更新

css/beautiful.css

@@ -198,6 +198,16 @@ cursor: pointer;
   width: 200px;
   width: 200px;
 }
 }
 
 
+.pink{
+  stroke: pink !important;
+}
+.skyblue{
+  stroke: skyblue !important;
+}
+.green{
+  stroke: green !important;
+}
+
 .drawflow .drawflow-node.selected  {
 .drawflow .drawflow-node.selected  {
   background: white;
   background: white;
   border: 1px solid #4ea9ff;
   border: 1px solid #4ea9ff;

css/style.css

@@ -10,6 +10,78 @@ html, body {
     border: 0;
     border: 0;
 }
 }
 
 
+#customContextMenu {
+    display: none;
+    position: absolute;
+    background: rgba(30, 30, 40, 0.95);
+    border-radius: 10px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+    overflow: hidden;
+    z-index: 1000;
+    backdrop-filter: blur(10px);
+    min-width: 200px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transform-origin: top left;
+    animation: menuAppear 0.2s ease-out forwards;
+}
+.instructions, .demo-area {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 15px;
+    padding: 25px;
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+
+.demo-area {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 300px;
+    position: relative;
+    overflow: hidden;
+}
+
+.instructions h2, .demo-area h2 {
+    font-size: 1.8rem;
+    margin-bottom: 20px;
+    color: #ffcc00;
+}
+        
+
+.menu-item {
+    padding: 12px 20px;
+    color: #e0e0e0;
+    font-size: 1rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    transition: all 0.2s ease;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.menu-item:last-child {
+    border-bottom: none;
+}
+
+.menu-item:hover {
+    background: rgba(80, 100, 220, 0.7);
+    color: white;
+}
+
+.menu-item i {
+    font-size: 1.2rem;
+    margin-right: 12px;
+    width: 20px;
+    text-align: center;
+}
+
+.menu-divider {
+    height: 1px;
+    background: rgba(255, 255, 255, 0.1);
+    margin: 5px 0;
+}
+
 /*拾色器*/
 /*拾色器*/
 .picker {
 .picker {
     display: inline-block;
     display: inline-block;

index.html

@@ -9,9 +9,10 @@
     <link rel="stylesheet" href="./css/iconfont.css">
     <link rel="stylesheet" href="./css/iconfont.css">
     <link rel="stylesheet" href="./css/timer.css">
     <link rel="stylesheet" href="./css/timer.css">
     
     
-    <script src="js/drawflow.min.js"></script>
+    
     <script src="js/all.min.js"  integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
     <script src="js/all.min.js"  integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
     <link rel="stylesheet" type="text/css" href="css/drawflow.min.css">
     <link rel="stylesheet" type="text/css" href="css/drawflow.min.css">
+    <script src="js/drawflow.min.js"></script>
     <link rel="stylesheet" type="text/css" href="css/beautiful.css" />
     <link rel="stylesheet" type="text/css" href="css/beautiful.css" />
     <link rel="stylesheet" href="css/all.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
     <link rel="stylesheet" href="css/all.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
     <link href="css/googleapis.css" rel="stylesheet">
     <link href="css/googleapis.css" rel="stylesheet">
@@ -161,7 +162,81 @@
         </div>
         </div>
     </div>
     </div>
 
 
+    <!-- 自定义右键菜单 -->
+    <div id="customContextMenu">
+        <div class="menu-item" data-action="startCard" >
+          <i class="fas fa-plus-circle"></i> 起始卡片 
+        </div>
+        <div class="menu-item" data-action="eventCard">
+          <i class="fas fa-plus-circle"></i> 事件卡片
+        </div>
+        <div class="menu-item" data-action="endCard">
+          <i class="fas fa-plus-circle"></i> 结局卡片
+        </div>
+
+
+        <!-- <div class="menu-item" data-action="new">
+            <i class="fas fa-plus-circle"></i> 新建文件
+        </div>
+        <div class="menu-item" data-action="open">
+            <i class="fas fa-folder-open"></i> 打开
+        </div>
+        <div class="menu-item" data-action="save">
+            <i class="fas fa-save"></i> 保存
+        </div>
+        <div class="menu-divider"></div>
+        <div class="menu-item" data-action="copy">
+            <i class="fas fa-copy"></i> 复制
+        </div>
+        <div class="menu-item" data-action="paste">
+            <i class="fas fa-paste"></i> 粘贴
+        </div>
+        <div class="menu-divider"></div>
+        <div class="menu-item" data-action="refresh">
+            <i class="fas fa-sync-alt"></i> 刷新
+        </div>
+        <div class="menu-item" data-action="info">
+            <i class="fas fa-info-circle"></i> 关于
+        </div> -->
+    </div>
+
   <script>
   <script>
+    class MyNodes {
+      constructor(input, output) {
+        this.input = input;
+        this.output = output;
+        //保存左右两侧输入输出的属性
+        this.left_string,this.left_int,this.left_bool;
+        this.right_string,this.right_int,this.right_bool;
+        //连接点总长度
+        this.totalLength = this.output.length+this.input.length;
+
+        if(this.input.length>0){
+          this.input.forEach(item=> {
+            if(item=="string"){
+              this.left_string = item
+            }else if(item=="int"){
+              this.left_int = item
+            }else if(item=="bool"){
+              this.left_bool = item
+            }
+          })
+        }
+        if(this.output.length>0){
+          this.output.forEach(item=> {
+            if(item=="string"){
+              this.right_string = item
+            }else if(item=="int"){
+              this.right_int = item
+            }else if(item=="bool"){
+              this.right_bool = item
+            }
+          })
+        }
+      }
+
+    }
+
     var id = document.getElementById("drawflow");
     var id = document.getElementById("drawflow");
     const editor = new Drawflow(id);
     const editor = new Drawflow(id);
     editor.reroute = true;
     editor.reroute = true;
@@ -169,65 +244,129 @@
     editor.start();
     editor.start();
     editor.import(dataToImport);
     editor.import(dataToImport);
 
 
+    var html = document.createElement("div");
+    html.innerHTML =  "Hello Drawflow!!";
+    editor.registerNode('test', html);
+    editor.on('connectionStart', function( output_id, output_class) {
+      // console.log(output_id);
+      // console.log(editor.getNodeFromId(output_id.output_id))
+    })
+
     // Events!
     // Events!
     editor.on('nodeCreated', function(id) {
     editor.on('nodeCreated', function(id) {
-      console.log("Node created " + id);
+      // console.log("Node created " + id);
     })
     })
 
 
     editor.on('nodeRemoved', function(id) {
     editor.on('nodeRemoved', function(id) {
-      console.log("Node removed " + id);
+      // console.log("Node removed " + id);
     })
     })
 
 
     editor.on('nodeSelected', function(id) {
     editor.on('nodeSelected', function(id) {
-      console.log("Node selected " + id);
+      // console.log("Node selected " + id);
     })
     })
 
 
     editor.on('moduleCreated', function(name) {
     editor.on('moduleCreated', function(name) {
-      console.log("Module Created " + name);
+      // console.log("Module Created " + name);
     })
     })
 
 
     editor.on('moduleChanged', function(name) {
     editor.on('moduleChanged', function(name) {
-      console.log("Module Changed " + name);
+      // console.log("Module Changed " + name);
     })
     })
 
 
     editor.on('connectionCreated', function(connection) {
     editor.on('connectionCreated', function(connection) {
-      console.log('Connection created');
+      // console.log('Connection created');
       console.log(connection);
       console.log(connection);
+      //处理是否建立连接
+      const input_id = connection.input_id
+      const output_id = connection.output_id
+      const input_class = connection.input_class
+      const output_class = connection.output_class
+      const input_index = parseInt(input_class.split("_")[1])
+      const output_index = parseInt(output_class.split("_")[1])
+
+      // console.log(editor.getNodeFromId(input_id))
+      // console.log(editor.getNodeFromId(output_id))
+      // console.log(input_index,output_index)
+      //对比输入输出的数据类型 
+      //得到对应的数据类型
+      const dataType_output = editor.getNodeFromId(output_id).data.node.output[output_index - 1]
+      const dataType_input = editor.getNodeFromId(input_id).data.node.input[input_index - 1]
+      console.log(dataType_output,dataType_input)
+      if(dataType_output != dataType_input){
+        editor.removeSingleConnection(output_id, input_id, output_class, input_class)
+      }
+
     })
     })
 
 
     editor.on('connectionRemoved', function(connection) {
     editor.on('connectionRemoved', function(connection) {
-      console.log('Connection removed');
-      console.log(connection);
+      // console.log('Connection removed');
+      // console.log(connection);
     })
     })
 
 
     editor.on('mouseMove', function(position) {
     editor.on('mouseMove', function(position) {
-      console.log('Position mouse x:' + position.x + ' y:'+ position.y);
+      // console.log('Position mouse x:' + position.x + ' y:'+ position.y);
     })
     })
 
 
     editor.on('nodeMoved', function(id) {
     editor.on('nodeMoved', function(id) {
-      console.log("Node moved " + id);
+      // console.log("Node moved " + id);
     })
     })
 
 
     editor.on('zoom', function(zoom) {
     editor.on('zoom', function(zoom) {
-      console.log('Zoom level ' + zoom);
+      // console.log('Zoom level ' + zoom);
     })
     })
 
 
     editor.on('translate', function(position) {
     editor.on('translate', function(position) {
-      console.log('Translate x:' + position.x + ' y:'+ position.y);
+      // console.log('Translate x:' + position.x + ' y:'+ position.y);
     })
     })
 
 
     editor.on('addReroute', function(id) {
     editor.on('addReroute', function(id) {
-      console.log("Reroute added " + id);
+      // console.log("Reroute added " + id);
     })
     })
 
 
     editor.on('removeReroute', function(id) {
     editor.on('removeReroute', function(id) {
-      console.log("Reroute removed " + id);
+      // console.log("Reroute removed " + id);
     })
     })
 
 
     /* DRAG EVENT */
     /* DRAG EVENT */
 
 
     /* Mouse and Touch Actions */
     /* Mouse and Touch Actions */
 
 
+
+
+
+    //tab切换
+    function TabToggle() {
+      document.addEventListener('keydown', (e) => {
+        if (e.key === "Tab") {
+          e.preventDefault();
+          if($("#timerSlider").css("display")=="none"){
+            $("#timerSlider").fadeIn(1000)
+            //复原底部菜单的显示
+            $("#draw").hide()
+            $("#timerSlider").show()
+            $("#Scene").show()
+            $("body").css("background","#363B40")
+            //恢复dom事件监听
+            WZCContorller = new Controller();
+            // document.removeEventListener('contextmenu', handleContextmenu);
+            document.getElementById("drawflow").removeEventListener("contextmenu", positonXY)
+          }else{
+            $("#timerSlider").fadeOut(1000)
+            //显示画板 隐藏底部菜单
+            $("#draw").show()
+            $("#timerSlider").hide()
+            $("#Scene").hide()
+            $("body").css("background","#fff")  
+            //解除dom事件监听
+            document[on.Start] = null;
+            rightMenu()
+            document.getElementById("drawflow").addEventListener("contextmenu", positonXY)
+          }
+        }
+      });
+    }
+    TabToggle()
+
     var elements = document.getElementsByClassName('drag-drawflow');
     var elements = document.getElementsByClassName('drag-drawflow');
     for (var i = 0; i < elements.length; i++) {
     for (var i = 0; i < elements.length; i++) {
       elements[i].addEventListener('touchend', drop, false);
       elements[i].addEventListener('touchend', drop, false);
@@ -246,14 +385,16 @@
     }
     }
 
 
     function drag(ev) {
     function drag(ev) {
+      console.log(ev.target.getAttribute('data-node'))
       if (ev.type === "touchstart") {
       if (ev.type === "touchstart") {
         mobile_item_selec = ev.target.closest(".drag-drawflow").getAttribute('data-node');
         mobile_item_selec = ev.target.closest(".drag-drawflow").getAttribute('data-node');
       } else {
       } else {
-      ev.dataTransfer.setData("node", ev.target.getAttribute('data-node'));
+        ev.dataTransfer.setData("node", ev.target.getAttribute('data-node'));
       }
       }
     }
     }
 
 
     function drop(ev) {
     function drop(ev) {
+      console.log(ev)
       if (ev.type === "touchend") {
       if (ev.type === "touchend") {
         var parentdrawflow = document.elementFromPoint( mobile_last_move.touches[0].clientX, mobile_last_move.touches[0].clientY).closest("#drawflow");
         var parentdrawflow = document.elementFromPoint( mobile_last_move.touches[0].clientX, mobile_last_move.touches[0].clientY).closest("#drawflow");
         if(parentdrawflow != null) {
         if(parentdrawflow != null) {
@@ -265,7 +406,6 @@
         var data = ev.dataTransfer.getData("node");
         var data = ev.dataTransfer.getData("node");
         addNodeToDrawFlow(data, ev.clientX, ev.clientY);
         addNodeToDrawFlow(data, ev.clientX, ev.clientY);
       }
       }
-
     }
     }
 
 
     function addNodeToDrawFlow(name, pos_x, pos_y) {
     function addNodeToDrawFlow(name, pos_x, pos_y) {
@@ -275,7 +415,6 @@
       pos_x = pos_x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)) - (editor.precanvas.getBoundingClientRect().x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)));
       pos_x = pos_x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)) - (editor.precanvas.getBoundingClientRect().x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)));
       pos_y = pos_y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)) - (editor.precanvas.getBoundingClientRect().y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)));
       pos_y = pos_y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)) - (editor.precanvas.getBoundingClientRect().y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)));
 
 
-
       switch (name) {
       switch (name) {
         case 'facebook':
         case 'facebook':
         var facebook = `
         var facebook = `
@@ -345,55 +484,204 @@
             `;
             `;
             editor.addNode('log', 1, 0, pos_x, pos_y, 'log', {}, log );
             editor.addNode('log', 1, 0, pos_x, pos_y, 'log', {}, log );
             break;
             break;
-          case 'google':
-            var google = `
-            <div>
-              <div class="title-box"><i class="fab fa-google-drive"></i> Google Drive save </div>
+        case 'google':
+          var google = `
+          <div>
+            <div class="title-box"><i class="fab fa-google-drive"></i> Google Drive save </div>
+          </div>
+          `;
+          editor.addNode('google', 1, 0, pos_x, pos_y, 'google', {}, google );
+          break;
+        case 'email':
+          var email = `
+          <div>
+            <div class="title-box"><i class="fas fa-at"></i> Send Email </div>
+          </div>
+          `;
+          editor.addNode('email', 1, 0, pos_x, pos_y, 'email', {}, email );
+          break;
+
+        case 'template':
+          var template = `
+          <div>
+            <div class="title-box"><i class="fas fa-code"></i> Template</div>
+            <div class="box">
+              Ger Vars
+              <textarea df-template></textarea>
+              Output template with vars
             </div>
             </div>
-            `;
-            editor.addNode('google', 1, 0, pos_x, pos_y, 'google', {}, google );
-            break;
-          case 'email':
-            var email = `
-            <div>
-              <div class="title-box"><i class="fas fa-at"></i> Send Email </div>
+          </div>
+          `;
+          editor.addNode('template', 1, 1, pos_x, pos_y, 'template', { "template": 'Write your template'}, template );
+          break;
+        case 'multiple':
+          var multiple = `
+          <div>
+            <div class="box">
+              Multiple!
             </div>
             </div>
-            `;
-            editor.addNode('email', 1, 0, pos_x, pos_y, 'email', {}, email );
-            break;
-
-          case 'template':
-            var template = `
+          </div>
+          `;
+          editor.addNode('multiple', 3, 4, pos_x, pos_y, 'multiple', {}, multiple );
+          break;
+        case 'personalized':
+          var personalized = `
+          <div>
+            Personalized
+          </div>
+          `;
+          editor.addNode('personalized', 1, 1, pos_x, pos_y, 'personalized', {}, personalized );
+          break;
+        case 'dbclick':
+            var dbclick = `
             <div>
             <div>
-              <div class="title-box"><i class="fas fa-code"></i> Template</div>
-              <div class="box">
-                Ger Vars
-                <textarea df-template></textarea>
-                Output template with vars
+            <div class="title-box"><i class="fas fa-mouse"></i> Db Click</div>
+              <div class="box dbclickbox" ondblclick="showpopup(event)">
+                Db Click here
+                <div class="modal" style="display:none">
+                  <div class="modal-content">
+                    <span class="close" onclick="closemodal(event)">&times;</span>
+                    Change your variable {name} !
+                    <input type="text" df-name>
+                  </div>
+
+                </div>
               </div>
               </div>
             </div>
             </div>
             `;
             `;
-            editor.addNode('template', 1, 1, pos_x, pos_y, 'template', { "template": 'Write your template'}, template );
+            editor.addNode('dbclick', 1, 1, pos_x, pos_y, 'dbclick', { name: ''}, dbclick );
             break;
             break;
-          case 'multiple':
-            var multiple = `
-            <div>
-              <div class="box">
-                Multiple!
-              </div>
+
+        default:
+      }
+    }
+
+    function addNodeToDrawFlow_A(name, pos_x, pos_y){
+      console.log(name, pos_x, pos_y)
+      if(editor.editor_mode === 'fixed') {
+        return false;
+      }
+      pos_x = pos_x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)) - (editor.precanvas.getBoundingClientRect().x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)));
+      pos_y = pos_y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)) - (editor.precanvas.getBoundingClientRect().y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)));
+
+      switch (name) {
+        case 'facebook':
+          var facebook = `
+          <div>
+            <div class="title-box"><i class="fab fa-facebook"></i> Facebook Message</div>
+          </div>
+          `;
+            editor.addNode('facebook', 0,  3, pos_x, pos_y, 'facebook', {"node":new MyNodes([],['string','int','bool'])}, facebook );
+          break;
+        case 'slack':
+          var slackchat = `
+          <div>
+            <div class="title-box"><i class="fab fa-slack"></i> Slack chat message</div>
+          </div>
+          `
+            editor.addNode('slack', 3, 0, pos_x, pos_y, 'slack', {"node":new MyNodes(['string','int','bool'],[])}, slackchat );
+          break;
+        case 'github':
+          var githubtemplate = `
+          <div>
+            <div class="title-box"><i class="fab fa-github "></i> Github Stars</div>
+            <div class="box">
+              <p>Enter repository url</p>
+            <input type="text" df-name>
             </div>
             </div>
-            `;
-            editor.addNode('multiple', 3, 4, pos_x, pos_y, 'multiple', {}, multiple );
-            break;
-          case 'personalized':
-            var personalized = `
+          </div>
+          `;
+          editor.addNode('github', 0, 1, pos_x, pos_y, 'github', { "name": ''}, githubtemplate );
+          break;
+        case 'telegram':
+          var telegrambot = `
+          <div>
+            <div class="title-box"><i class="fab fa-telegram-plane"></i> Telegram bot</div>
+            <div class="box">
+              <p>Send to telegram</p>
+              <p>select channel</p>
+              <select df-channel>
+                <option value="channel_1">Channel 1</option>
+                <option value="channel_2">Channel 2</option>
+                <option value="channel_3">Channel 3</option>
+                <option value="channel_4">Channel 4</option>
+              </select>
+            </div>
+          </div>
+          `;
+          editor.addNode('telegram', 1, 0, pos_x, pos_y, 'telegram', { "channel": 'channel_3'}, telegrambot );
+          break;
+        case 'aws':
+          var aws = `
+          <div>
+            <div class="title-box"><i class="fab fa-aws"></i> Aws Save </div>
+            <div class="box">
+              <p>Save in aws</p>
+              <input type="text" df-db-dbname placeholder="DB name"><br><br>
+              <input type="text" df-db-key placeholder="DB key">
+              <p>Output Log</p>
+            </div>
+          </div>
+          `;
+          editor.addNode('aws', 1, 1, pos_x, pos_y, 'aws', { "db": { "dbname": '', "key": '' }}, aws );
+          break;
+        case 'log':
+            var log = `
             <div>
             <div>
-              Personalized
+              <div class="title-box"><i class="fas fa-file-signature"></i> Save log file </div>
             </div>
             </div>
             `;
             `;
-            editor.addNode('personalized', 1, 1, pos_x, pos_y, 'personalized', {}, personalized );
+            editor.addNode('log', 1, 0, pos_x, pos_y, 'log', {}, log );
             break;
             break;
-          case 'dbclick':
+        case 'google':
+          var google = `
+          <div>
+            <div class="title-box"><i class="fab fa-google-drive"></i> Google Drive save </div>
+          </div>
+          `;
+          editor.addNode('google', 1, 0, pos_x, pos_y, 'google', {}, google );
+          break;
+        case 'email':
+          var email = `
+          <div>
+            <div class="title-box"><i class="fas fa-at"></i> Send Email </div>
+          </div>
+          `;
+          editor.addNode('email', 1, 0, pos_x, pos_y, 'email', {}, email );
+          break;
+
+        case 'template':
+          var template = `
+          <div>
+            <div class="title-box"><i class="fas fa-code"></i> Template</div>
+            <div class="box">
+              Ger Vars
+              <textarea df-template></textarea>
+              Output template with vars
+            </div>
+          </div>
+          `;
+          editor.addNode('template', 3, 3, pos_x, pos_y, 'template', {"node":new MyNodes(['string','int','bool'],['string','int','bool'])}, template );
+          break;
+        case 'multiple':
+          var multiple = `
+          <div>
+            <div class="box">
+              Multiple!
+            </div>
+          </div>
+          `;
+          editor.addNode('multiple', 3, 4, pos_x, pos_y, 'multiple', {}, multiple );
+          break;
+        case 'personalized':
+          var personalized = `
+          <div>
+            Personalized
+          </div>
+          `;
+          editor.addNode('personalized', 1, 1, pos_x, pos_y, 'personalized', {}, personalized );
+          break;
+        case 'dbclick':
             var dbclick = `
             var dbclick = `
             <div>
             <div>
             <div class="title-box"><i class="fas fa-mouse"></i> Db Click</div>
             <div class="title-box"><i class="fas fa-mouse"></i> Db Click</div>
@@ -417,6 +705,7 @@
       }
       }
     }
     }
 
 
+
   var transform = '';
   var transform = '';
   function showpopup(e) {
   function showpopup(e) {
     e.target.closest(".drawflow-node").style.zIndex = "9999";
     e.target.closest(".drawflow-node").style.zIndex = "9999";

js/index.js

@@ -171,30 +171,118 @@ function getXY(e, obj) {
   };
   };
 }
 }
 
 
-//tab切换
-function TabToggle() {
-  document.addEventListener('keydown', (e) => {
-    if (e.key === "Tab") {
-      e.preventDefault();
-      if($("#timerSlider").css("display")=="none"){
-        $("#timerSlider").fadeIn(1000)
-        //复原底部菜单的显示
-        $("#draw").hide()
-        $("#timerSlider").show()
-        $("#Scene").show()
-        $("body").css("background","#363B40")
-      }else{
-        $("#timerSlider").fadeOut(1000)
-        //显示画板 隐藏底部菜单
-        $("#draw").show()
-        $("#timerSlider").hide()
-        $("#Scene").hide()
-        $("body").css("background","#fff")
+
+
+function handleContextmenu(e) {
+  const customMenu = document.getElementById('customContextMenu');
+  // 阻止默认右键菜单
+  e.preventDefault();
+
+  // 显示自定义菜单
+  customMenu.style.display = 'block';
+
+  // 获取视窗尺寸
+  const windowWidth = window.innerWidth;
+  const windowHeight = window.innerHeight;
+
+  // 获取菜单尺寸
+  const menuWidth = customMenu.offsetWidth;
+  const menuHeight = customMenu.offsetHeight;
+
+  // 计算菜单位置 - 确保不会超出视窗
+  let posX = e.pageX;
+  let posY = e.pageY;
+
+  // 水平方向调整
+  if (posX + menuWidth > windowWidth) {
+    posX = windowWidth - menuWidth - 10;
+  }
+
+  // 垂直方向调整
+  if (posY + menuHeight > windowHeight) {
+    posY = windowHeight - menuHeight - 10;
+  }
+
+  // 设置菜单位置
+  customMenu.style.left = posX + 'px';
+  customMenu.style.top = posY + 'px';
+}
+
+  var x ,y;
+  function positonXY(event) {
+    x = event.pageX; // 水平坐标（含滚动距离）  
+    y = event.pageY; // 垂直坐标（含滚动距离）
+    console.log(`文档坐标：(${x}, ${y})`);
+  }
+
+// 右键菜单
+function rightMenu() {
+    const customMenu = document.getElementById('customContextMenu');
+    const demoArea = document.getElementById('demoArea');
+
+    // 在文档上监听右键点击事件
+    document.addEventListener('contextmenu',handleContextmenu);
+
+    // 点击任意位置关闭菜单（菜单自身点击除外）
+    document.addEventListener('click', (e) => {
+      // 如果点击的不是菜单，则隐藏菜单
+      if (!customMenu.contains(e.target)) {
+        customMenu.style.display = 'none';
       }
       }
-    }
-  });
+    });
+
+    // 为菜单项添加点击事件
+    const menuItems = customMenu.querySelectorAll('.menu-item');
+    menuItems.forEach(item => {
+      item.addEventListener('click', (event) => {
+        const action = item.getAttribute('data-action');
+        // 根据不同的动作执行不同的操作
+        switch (action) {
+          case 'startCard':
+            addNodeToDrawFlow_A("facebook",x,y)
+            break;
+          case 'eventCard':
+            addNodeToDrawFlow_A("template",x,y)
+            break;
+          case 'endCard':
+            addNodeToDrawFlow_A("slack",x,y)
+            break;
+          // case 'new':
+          //   alert('您选择了 "新建文件"');
+          //   break;
+          // case 'open':
+          //   alert('您选择了 "打开"');
+          //   break;
+          // case 'save':
+          //   alert('您选择了 "保存"');
+          //   break;
+          // case 'copy':
+          //   alert('您选择了 "复制"');
+          //   break;
+          // case 'paste':
+          //   alert('您选择了 "粘贴"');
+          //   break;
+          // case 'refresh':
+          //   alert('页面即将刷新...');
+          //   setTimeout(() => location.reload(), 500);
+          //   break;
+          // case 'info':
+          //   alert('自定义右键菜单 v1.0\n© 2023 前端开发示例');
+          //   break;
+        }
+
+        // 点击菜单项后隐藏菜单
+        customMenu.style.display = 'none';
+      });
+    });
+
+    // 阻止在菜单上右键点击时触发默认菜单
+    customMenu.addEventListener('contextmenu', (e) => {
+      e.preventDefault();
+    });
 }
 }
-TabToggle()
+
+
 
 
 //圆角滑块类
 //圆角滑块类
 class RadiusSlider {
 class RadiusSlider {
@@ -507,16 +595,18 @@ class Controller {
         X: event.pageX,
         X: event.pageX,
         Y: event.pageY,
         Y: event.pageY,
       };
       };
-      console.log(event.pageX)
+      // window.pageX = event.pageX
+      // window.pageY = event.pageY
+      // console.log(event.pageX,event.pageY)
       if (this.editState) return; //如果是编辑状态则退出--->this.phenomenaObj.length为实例化对象的Div的id
       if (this.editState) return; //如果是编辑状态则退出--->this.phenomenaObj.length为实例化对象的Div的id
       const C = new Texter(this.PhenomenaObj.length,JsonClone(this.XY),null,null,null,"#"+ColorToolKit.HsbToHex({h:Math.round(Math.random()*360),s:Math.round(Math.random()*69),b:Math.round(70+Math.random()*30)}));
       const C = new Texter(this.PhenomenaObj.length,JsonClone(this.XY),null,null,null,"#"+ColorToolKit.HsbToHex({h:Math.round(Math.random()*360),s:Math.round(Math.random()*69),b:Math.round(70+Math.random()*30)}));
       this.CreatStatus=true;
       this.CreatStatus=true;
       this.menuTarget=C
       this.menuTarget=C
       // this.PhenomenaObj.push(C);//把拖拽完成的相存入相型数组中
       // this.PhenomenaObj.push(C);//把拖拽完成的相存入相型数组中
       document[on.Move] = (event) => {
       document[on.Move] = (event) => {
-      event=CoordinatE(event)
-        // event=event.pageX?event:event.targetTouches[0]
-      C.DrawDiv(event,this.XY);
+        event=CoordinatE(event)
+          // event=event.pageX?event:event.targetTouches[0]
+        C.DrawDiv(event,this.XY);
       };
       };
     };
     };
   }
   }