更新

css/beautiful.css

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

css/style.css

@@ -10,6 +10,78 @@ html, body {
     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 {
     display: inline-block;

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 {
@@ -507,16 +595,18 @@ class Controller {
         X: event.pageX,
         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
       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.menuTarget=C
       // this.PhenomenaObj.push(C);//把拖拽完成的相存入相型数组中
       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);
       };
     };
   }