diff --git a/ElectronJS/src/taskGrid/FlowChart.css b/ElectronJS/src/taskGrid/FlowChart.css index f750a35..81776bb 100644 --- a/ElectronJS/src/taskGrid/FlowChart.css +++ b/ElectronJS/src/taskGrid/FlowChart.css @@ -8,6 +8,26 @@ margin-top: 10px; } + #contextMenu { + position: absolute; + background-color: white; + padding: 3px!important; + text-align: center; + border: 1px solid darkblue; + border-radius: 3px; + /*width: 120px;*/ + } + + #contextMenu div{ + height: 30px; + padding-top: 2px; + } + + #contextMenu div:hover { + background-color: rgba(211,211,211,0.4) !important; + cursor: pointer; + } + label{ margin-left: 2px; } diff --git a/ElectronJS/src/taskGrid/FlowChart.html b/ElectronJS/src/taskGrid/FlowChart.html index 20e423c..db4e2fe 100644 --- a/ElectronJS/src/taskGrid/FlowChart.html +++ b/ElectronJS/src/taskGrid/FlowChart.html @@ -44,18 +44,18 @@ - + - - + +
-----------------
- + -
Click button above and then click the flowchart to insert.
+
Drag button above to the flowchart to insert.
diff --git a/ElectronJS/src/taskGrid/FlowChart.js b/ElectronJS/src/taskGrid/FlowChart.js index 43a7296..b6ae5ea 100644 --- a/ElectronJS/src/taskGrid/FlowChart.js +++ b/ElectronJS/src/taskGrid/FlowChart.js @@ -329,6 +329,11 @@ function branchClick(e) { function elementMousedown(e) { if (e.button == 2) //右键点击 { + try{ + document.getElementById("contextMenu").remove(); + } catch { + + } if (nowNode != null) { nowNode.style.borderColor = "skyblue"; } @@ -342,6 +347,11 @@ function elementMousedown(e) { //元素点击事件 function elementClick(e) { + try{ + document.getElementById("contextMenu").remove(); + } catch (e) { + + } if (nowNode != null) { nowNode.style.borderColor = "skyblue"; } @@ -429,10 +439,10 @@ function toolBoxKernel(e, para = null) { { position2--; } - console.log(element); + // console.log(element); nodeList[actionSequence[pId2]]["sequence"].splice(position2 + 1, 0, element[0]); //在相应位置添加新元素 refresh(); //重新渲染页面 - console.log(nodeList[element[0]]); + // console.log(nodeList[element[0]]); app._data.nowArrow = { "position": nodeList[element[0]]["position"], "pId": nodeList[element[0]]["parentId"], "num": 0 }; $("#" + nodeList[element[0]]["id"]).click(); } else { @@ -642,7 +652,7 @@ function refresh(nowArrowReset = true) { } function deleteElement() { - if (nowNode.getAttribute("id") == 0) { + if (nowNode == null || nowNode.getAttribute("id") == 0) { showError(LANG("当前未选中元素!", "No element is selected now!")); return; } @@ -676,7 +686,26 @@ function deleteElement() { } document.oncontextmenu = function() { - return false; + // 创建一个包含删除选项的右键菜单 + let contextMenu = document.createElement("div"); + contextMenu.id = "contextMenu"; + contextMenu.innerHTML = `
${LANG("删除元素", "Delete Element")}`; + + // 设置右键菜单的样式 + contextMenu.style.position = "absolute"; + contextMenu.style.left = event.clientX + "px"; + contextMenu.style.top = event.clientY + "px"; + contextMenu.style.width = LANG("140px", "180px"); + + // 添加删除元素的功能 + contextMenu.addEventListener("click", function() { + // myElement.remove(); // 删除元素 + deleteElement(); + contextMenu.remove(); // 删除右键菜单 + }); + + // 将右键菜单添加到文档中 + document.body.appendChild(contextMenu); } //屏蔽右键菜单 //删除元素 diff --git a/ElectronJS/src/taskGrid/FlowChart_CN.html b/ElectronJS/src/taskGrid/FlowChart_CN.html index a129bb0..cebd3ef 100644 --- a/ElectronJS/src/taskGrid/FlowChart_CN.html +++ b/ElectronJS/src/taskGrid/FlowChart_CN.html @@ -49,13 +49,13 @@ -
-----------------
- +
----------
+ -
提示:点击上方操作按钮后点击要放置元素的位置处的箭头,可按取消操作按钮取消。
+
提示:拖动上方按钮到流程图箭头处以添加操作,也可以点击按钮再点击箭头。