|
|
@@ -1,26 +1,25 @@
|
|
|
<template>
|
|
|
<div class="dnd-flow" >
|
|
|
- <VueFlow :nodes="nodes" :edges="edges" @drop="onDrop" @contextmenu="onContextMenu"
|
|
|
- @keydown.delete="onDeleteKey" @node-drop="handleNodeDrop" @dragover="onDragOver" @dragleave="onDragLeave" @node-click="onNodeClick">
|
|
|
+ <VueFlow ref="vueFlowRef" :nodes="nodes" :edges="edges" @drop="onDrop" @contextmenu.prevent="onContextMenu"
|
|
|
+ @keydown.delete="onDeleteKey" @dragover="onDragOver" @dragleave="onDragLeave" @node-click="onNodeClick">
|
|
|
<template #node-default="props">
|
|
|
<modelb :node="props" />
|
|
|
</template>
|
|
|
<!-- //<Handle type="target" :position="Position.Left" /> -->
|
|
|
- <!-- </Panel> -->
|
|
|
- <!-- <DropzoneBackground
|
|
|
+ <!-- <Panel>
|
|
|
+ <DropzoneBackground
|
|
|
:style="{
|
|
|
backgroundColor: isDragOver ? '#e7f3ff' : 'transparent',
|
|
|
transition: 'background-color 0.2s ease',
|
|
|
}"
|
|
|
>
|
|
|
- </DropzoneBackground> -->
|
|
|
- <!-- </Panel> -->
|
|
|
-
|
|
|
+ </DropzoneBackground>
|
|
|
+ </Panel> -->
|
|
|
</VueFlow>
|
|
|
|
|
|
<!-- <Sidebar /> -->
|
|
|
<!-- 优化器 -->
|
|
|
- <!-- <div id="contextMenu" @click="deleteItemConfirm">删除</div> -->
|
|
|
+ <div id="contextMenu" v-show="shopShow" @click="deleteItemConfirm">删除</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -35,30 +34,19 @@ import f11 from '@/assets/img/f11.png'
|
|
|
import modelb from './modelb.vue'
|
|
|
import { useDialogState } from './delete.js'
|
|
|
const { isVisible, message, resolve } = useDialogState()
|
|
|
-// import func from 'vue-temp/vue-editor-bridge'
|
|
|
-// import {initialNodes,initialEdges } from './node'
|
|
|
-// const nodes = ref(initialNodes)
|
|
|
+ const { onConnect, addEdges, onNodesChange, onEdgesChange, applyNodeChanges, applyEdgeChanges } = useVueFlow()
|
|
|
+let vueFlowRef=ref();
|
|
|
let emit = defineEmits(['optimizerfalse']);
|
|
|
-const props = defineProps({
|
|
|
- // optimizer: {
|
|
|
- // type: Boolean,
|
|
|
- // required: true,
|
|
|
- // },
|
|
|
-})
|
|
|
+const props = defineProps({})
|
|
|
+let shopShow=ref(false);
|
|
|
let noid=ref([]);
|
|
|
-// const edges = ref(initialEdges)
|
|
|
-const { onConnect, addEdges } = useVueFlow()
|
|
|
let node=ref();
|
|
|
let contextMenu=ref( {
|
|
|
- show: false,
|
|
|
+ shopShow: false,
|
|
|
position: { x: 0, y: 0 },
|
|
|
target: 'kong',
|
|
|
})
|
|
|
const { onDragOver, onDrop, onDragLeave, isDragOver} = useDragAndDrop();
|
|
|
-function handleNodeDrop(e){
|
|
|
- console.log(11111)
|
|
|
- console.log(e);
|
|
|
-}
|
|
|
const edges = ref([]);
|
|
|
const nodes = ref([]);
|
|
|
onConnect(addEdges)
|
|
|
@@ -74,43 +62,77 @@ function onNodeClick(e){
|
|
|
|
|
|
}
|
|
|
function onContextMenu(event,node) {
|
|
|
+ console.log(event)
|
|
|
console.log(node)
|
|
|
- event.preventDefault();
|
|
|
+ // event.preventDefault();
|
|
|
+ if(noid.value!==null){
|
|
|
+
|
|
|
+
|
|
|
if (noid.value.id) {
|
|
|
- // document.getElementById('contextMenu').style.top = noid.value.position.y+50 + 'px';
|
|
|
- // document.getElementById('contextMenu').style.left = noid.value.position.x +80+ 'px';
|
|
|
- // document.getElementById('contextMenu').style.display = 'block';
|
|
|
+ document.getElementById('contextMenu').style.top = noid.value.position.y+50 + 'px';
|
|
|
+ document.getElementById('contextMenu').style.left = noid.value.position.x +80+ 'px';
|
|
|
+ document.getElementById('contextMenu').style.display = 'block';
|
|
|
+ shopShow.value=true;
|
|
|
event.preventDefault();
|
|
|
-
|
|
|
- console.log(11111)
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
//点击左键右键内容消失
|
|
|
document.addEventListener('click', function(e) {
|
|
|
if (e.button === 0) { // 0 是左键
|
|
|
- // document.getElementById('contextMenu').style.display = 'none';
|
|
|
+ //document.getElementById('contextMenu').style.display = 'none';
|
|
|
+ shopShow.value=false;
|
|
|
}
|
|
|
});
|
|
|
function onDeleteKey(event,node) {
|
|
|
// 禁用Backspace删除节点
|
|
|
- console.log(node)
|
|
|
+ console.log(event)
|
|
|
event.preventDefault();
|
|
|
|
|
|
}
|
|
|
//删除
|
|
|
const deleteItemConfirm=()=>{
|
|
|
- resolve(true)
|
|
|
- isVisible.value = false
|
|
|
+ //const index = nodes.value.findIndex(n => n.id === noid.value.id);
|
|
|
+ if(noid.value.id){
|
|
|
+ vueFlowRef.value.removeNodes(noid.value.id);
|
|
|
+ noid.value=null;
|
|
|
+ // nodes.value = nodes.value.filter(node => node.id !== noid.value.id);
|
|
|
+ //console.log(noid.value.id);
|
|
|
+ // resolve(true)
|
|
|
+ // console.log( resolve(true));
|
|
|
+ shopShow.value = false
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
+onNodesChange(async (changes) => {
|
|
|
+ const nextChanges = []
|
|
|
+
|
|
|
+ for (const change of changes) {
|
|
|
+
|
|
|
+ if (change.type === 'remove') {
|
|
|
+ const isConfirmed = noid.value.id
|
|
|
+ console.log(isConfirmed)
|
|
|
+ if (isConfirmed) {
|
|
|
+ nextChanges.push(change)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ nextChanges.push(change)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ applyNodeChanges(nextChanges)
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
</script>
|
|
|
<style>
|
|
|
.vue-flow__edge {
|
|
|
text-align: left; /* 设置edges的左对齐 */
|
|
|
}
|
|
|
#contextMenu{
|
|
|
- display: none;
|
|
|
+ /* display: none; */
|
|
|
position: absolute;
|
|
|
background-color: #fff;
|
|
|
border-radius: 5px;
|
