右键删除

This commit is contained in:
NaiboWang-Alienware 2023-07-17 12:34:47 +08:00
parent 192a44611a
commit e0de56633d
4 changed files with 61 additions and 12 deletions

View File

@ -8,6 +8,26 @@
margin-top: 10px; 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{ label{
margin-left: 2px; margin-left: 2px;
} }

View File

@ -44,18 +44,18 @@
<button type="button" data=2 draggable="true" class="btn btn-outline-primary options">Click Element</button> <button type="button" data=2 draggable="true" class="btn btn-outline-primary options">Click Element</button>
<button type="button" data=3 draggable="true" class="btn btn-outline-primary options">Collect Data</button> <button type="button" data=3 draggable="true" class="btn btn-outline-primary options">Collect Data</button>
<button type="button" data=4 draggable="true" class="btn btn-outline-primary options">Input Text</button> <button type="button" data=4 draggable="true" class="btn btn-outline-primary options">Input Text</button>
<button type="button" data=5 draggable="true" class="btn btn-outline-primary options">Custom Action</button> <button type="button" data=5 draggable="true" class="btn btn-outline-primary options" style="font-weight: bold; font-size: 14px!important;">Custom Action</button>
<button type="button" data=6 draggable="true" style="font-size: 14px!important;" class="btn btn-outline-primary options">Change Option</button> <button type="button" data=6 draggable="true" style="font-size: 14px!important;" class="btn btn-outline-primary options">Change Option</button>
<button type="button" data=7 draggable="true" class="btn btn-outline-primary options">Mouse Move</button> <button type="button" data=7 draggable="true" class="btn btn-outline-primary options">Mouse Move</button>
<button type="button" data=8 draggable="true" class="btn btn-outline-primary options">Loop</button> <button type="button" data=8 draggable="true" class="btn btn-outline-primary options" style="font-weight: bold">Loop</button>
<button type="button" data=9 draggable="true" class="btn btn-outline-primary options">If Condition</button> <button type="button" data=9 draggable="true" class="btn btn-outline-primary options" style="font-weight: bold">If Condition</button>
<div>-----------------</div> <div>-----------------</div>
<button type="button" data=13 class="btn btn-outline-primary options" title="Adjust the position of the next node/operation to be inserted">Set Anchor</button> <button type="button" data=13 draggable="true" class="btn btn-outline-primary options" title="Adjust the position of the next node/operation to be inserted">Set Anchor</button>
<button type="button" data=10 class="btn btn-outline-primary options">Cut Element</button> <button type="button" data=10 class="btn btn-outline-primary options">Cut Element</button>
<button type="button" data=11 class="btn btn-outline-primary options">Copy Element</button> <button type="button" data=11 class="btn btn-outline-primary options">Copy Element</button>
<button type="button" data=12 class="btn btn-outline-primary options">Del Element</button> <button type="button" data=12 class="btn btn-outline-primary options">Del Element</button>
<button type="button" data=0 class="btn btn-outline-primary2 options">Cancel</button> <button type="button" data=0 class="btn btn-outline-primary2 options">Cancel</button>
<div style="text-align: left;margin: 10px;font-size:15px!important">Click button above and then click the flowchart to insert.</div> <div style="text-align: left;margin: 10px;font-size:15px!important">Drag button above to the flowchart to insert.</div>
</div> </div>
</div> </div>
<div style="margin-top:20px;border: solid;height:850px;overflow: auto;width:58%;float:right" id="flowchart_graph"> <div style="margin-top:20px;border: solid;height:850px;overflow: auto;width:58%;float:right" id="flowchart_graph">

View File

@ -329,6 +329,11 @@ function branchClick(e) {
function elementMousedown(e) { function elementMousedown(e) {
if (e.button == 2) //右键点击 if (e.button == 2) //右键点击
{ {
try{
document.getElementById("contextMenu").remove();
} catch {
}
if (nowNode != null) { if (nowNode != null) {
nowNode.style.borderColor = "skyblue"; nowNode.style.borderColor = "skyblue";
} }
@ -342,6 +347,11 @@ function elementMousedown(e) {
//元素点击事件 //元素点击事件
function elementClick(e) { function elementClick(e) {
try{
document.getElementById("contextMenu").remove();
} catch (e) {
}
if (nowNode != null) { if (nowNode != null) {
nowNode.style.borderColor = "skyblue"; nowNode.style.borderColor = "skyblue";
} }
@ -429,10 +439,10 @@ function toolBoxKernel(e, para = null) {
{ {
position2--; position2--;
} }
console.log(element); // console.log(element);
nodeList[actionSequence[pId2]]["sequence"].splice(position2 + 1, 0, element[0]); //在相应位置添加新元素 nodeList[actionSequence[pId2]]["sequence"].splice(position2 + 1, 0, element[0]); //在相应位置添加新元素
refresh(); //重新渲染页面 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 }; app._data.nowArrow = { "position": nodeList[element[0]]["position"], "pId": nodeList[element[0]]["parentId"], "num": 0 };
$("#" + nodeList[element[0]]["id"]).click(); $("#" + nodeList[element[0]]["id"]).click();
} else { } else {
@ -642,7 +652,7 @@ function refresh(nowArrowReset = true) {
} }
function deleteElement() { function deleteElement() {
if (nowNode.getAttribute("id") == 0) { if (nowNode == null || nowNode.getAttribute("id") == 0) {
showError(LANG("当前未选中元素!", "No element is selected now!")); showError(LANG("当前未选中元素!", "No element is selected now!"));
return; return;
} }
@ -676,7 +686,26 @@ function deleteElement() {
} }
document.oncontextmenu = function() { document.oncontextmenu = function() {
return false; // 创建一个包含删除选项的右键菜单
let contextMenu = document.createElement("div");
contextMenu.id = "contextMenu";
contextMenu.innerHTML = `<div>${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);
} //屏蔽右键菜单 } //屏蔽右键菜单
//删除元素 //删除元素

View File

@ -49,13 +49,13 @@
<button type="button" data=7 draggable="true" class="btn btn-outline-primary options">移动到元素</button> <button type="button" data=7 draggable="true" class="btn btn-outline-primary options">移动到元素</button>
<button type="button" data=8 draggable="true" class="btn btn-outline-primary options" style="font-weight: bold">循环</button> <button type="button" data=8 draggable="true" class="btn btn-outline-primary options" style="font-weight: bold">循环</button>
<button type="button" data=9 draggable="true" class="btn btn-outline-primary options" style="font-weight: bold">判断条件</button> <button type="button" data=9 draggable="true" class="btn btn-outline-primary options" style="font-weight: bold">判断条件</button>
<div>-----------------</div> <div>----------</div>
<button type="button" data=13 class="btn btn-outline-primary options" title="调整下一个要插入的节点的位置">调整锚点</button> <button type="button" data=13 draggable="true" class="btn btn-outline-primary options" title="调整下一个要插入的节点的位置">调整锚点</button>
<button type="button" data=10 class="btn btn-outline-primary options">剪切元素</button> <button type="button" data=10 class="btn btn-outline-primary options">剪切元素</button>
<button type="button" data=11 class="btn btn-outline-primary options">复制元素</button> <button type="button" data=11 class="btn btn-outline-primary options">复制元素</button>
<button type="button" data=12 class="btn btn-outline-primary options">删除元素</button> <button type="button" data=12 class="btn btn-outline-primary options">删除元素</button>
<button type="button" data=0 class="btn btn-outline-primary2 options">取消操作</button> <button type="button" data=0 class="btn btn-outline-primary2 options">取消操作</button>
<div style="text-align: left;margin: 10px;font-size:15px!important">提示:点击上方操作按钮后点击要放置元素的位置处的箭头,可按取消操作按钮取消</div> <div style="text-align: left;margin: 10px;font-size:15px!important">提示:拖动上方按钮到流程图箭头处以添加操作,也可以点击按钮再点击箭头</div>
</div> </div>
</div> </div>
<div style="margin-top:20px;border: solid;height:850px;overflow: auto;width:58%;float:right" id="flowchart_graph"> <div style="margin-top:20px;border: solid;height:850px;overflow: auto;width:58%;float:right" id="flowchart_graph">