airoptweb/src/views/vuetree/index.vue

<template>
  <VueFlow ref="vueFlowRef" :nodes="nodes" :edges="edges"  :class="{ dark }"
    class="basic-flow" 
    :default-viewport="{ zoom: 1.5 }" :min-zoom="0.2" :max-zoom="4" @drop="onDrop"
    @contextmenu.prevent="onContextMenu" @node-contextmenu="logEvent('contextmenu', $event)" 
    @dragover="onDragOver" @dragleave="onDragLeave" @edge-click="onEdgeClick" @node-click="onNodeClick">
    <template #node-default="props">
      <!-- <template  #node-process="props">   //  @contextmenu.prevent="onContextMenu"  -->
      <eltree :node="props" />
    </template>

    <Background pattern-color="#aaa" :gap="16" />

    <!-- <MiniMap /> -->
    <Panel>
      <div>
        <button class="remove" @click="removeNode(event)">删除节点</button>
        <button class="remove" @click="removeEdge(event)">删除线</button>
        <!-- <button class="remove" @click="getnodes()">获取所有数据</button> -->
      </div>
    </Panel>
    <Controls position="top-left">
      <ControlButton title="Reset Transform" @click="resetTransform">
        <Icon name="reset" />
      </ControlButton>

      <!-- <ControlButton title="Shuffle Node Positions" @click="updatePos">
        <Icon name="update" />
      </ControlButton> -->

      <ControlButton title="Toggle Dark Mode" @click="toggleDarkMode">
        <Icon v-if="dark" name="sun" />
        <Icon v-else name="moon" />
      </ControlButton>

      <ControlButton title="Log `toObject`" @click="logToObject">
        <Icon name="log" />
      </ControlButton>
    </Controls>

  </VueFlow>
  <div class="dnd-flow">

    <div id="contextMenu" @click="deleteItemConfirm">删除</div>


  </div>
</template>
<script setup>
import { ref, markRaw } from 'vue'
import { VueFlow, useVueFlow, MarkerType } from '@vue-flow/core'
import { useRoute } from 'vue-router';
import { Background } from '@vue-flow/background'
import { ControlButton, Controls } from '@vue-flow/controls'
import { initialEdges, initialNodes } from './modeljs.js'
import { MiniMap } from '@vue-flow/minimap'
import "./main.css";//重置样式
import DropzoneBackground from './DropzoneBackground.vue'
import eltree from './eltree.vue'
import useDragAndDrop from './useDnD'
import f11 from '@/assets/img/f11.png'
import Icon from './Icon.vue'
const dark = ref(false)
const route = useRoute();
const { onInit, onNodeDragStop, onNodeContextMenu, onConnect, addEdges, setViewport, toObject } = useVueFlow()
let vueFlowRef = ref();
let emit = defineEmits(['optimizerfalse']);
const props = defineProps({

  optimizer: {
    type: Boolean,
  },
})

const shopShow = ref(false);
let noid = ref([]);
let Edgeid = ref();
let node = ref();
let contextMenu = ref({
  position: { x: 0, y: 0 },
  target: 'kong',
})
const { onDragOver, onDrop, onDragLeave, isDragOver } = useDragAndDrop();
const edges = ref([]);
const nodes = ref([]);
onConnect((connection) => {
  console.log(connection);
  connection.type = 'smoothstep';//  smoothstep straight
  connection.markerEnd = MarkerType.ArrowClosed;
  addEdges(connection)
})
function onNodeClick(e) {
  noid.value = e.node;
  if (e.node.data.label == '优化器') {
    console.log(e.node);
    emit('optimizerfalse', true);
  }

}
// 监听线
function onEdgeClick(e) {
  Edgeid.value = e.edge.id;
}
function logEvent(name, event) {
  console.log(2222)
}
function onContextMenu(event) {
  if (noid.value !== null) {
    if (noid.value.id) {
      console.log(noid.value.position.y);
      console.log(noid.value.position.x);
      document.getElementById('contextMenu').style.top = noid.value.position.y + 100 + 'px';
      document.getElementById('contextMenu').style.left = noid.value.position.x + 270 + 'px';
      document.getElementById('contextMenu').style.display = 'block';
      event.preventDefault();
      //shopShow.value=true;
      // document.getElementById('contextMenu').style.display = 'none';
    }
  }

}
//点击左键右键内容消失
document.addEventListener('click', function (e) {
  if (e.button === 0) { // 0 是左键
    document.getElementById('contextMenu').style.display = 'none';
    //   shopShow.value=false;
  }
});
//删除
const deleteItemConfirm = () => {
  if (noid.value.id) {
    vueFlowRef.value.removeNodes(noid.value.id);
    noid.value = null;
    document.getElementById('contextMenu').style.display = 'none';
  }

}
onInit((vueFlowInstance) => {
  vueFlowInstance.fitView()
})

onNodeDragStop(({ event, nodes, node }) => {
  console.log('Node Drag Stop', { event, nodes, node })
})

onConnect((connection) => {
  addEdges(connection)
  console.log(1111);
  console.log(edges.value);
})
function updatePos() {
  nodes.value = nodes.value.map((node) => {
    return {
      ...node,
      position: {
        x: Math.random() * 400,
        y: Math.random() * 400,
      },
    }
  })
}
function removeEdge(id) {
  id = Edgeid.value;
  vueFlowRef.value.removeEdges(id);
}
function removeNode(id) {
  id = noid.value.id
  vueFlowRef.value.removeNodes(noid.value.id);
}
function logToObject() {
  console.log(toObject())
}

/**
 * Resets the current viewport transformation (zoom & pan)
 */
function resetTransform() {
  setViewport({ x: 0, y: 0, zoom: 1 })
}

function toggleDarkMode() {
  dark.value = !dark.value
}
onMounted(() => {
  getroter();
  // childfun();

});
// 获取链接
const getroter=()=>{
  console.log(11111)
  console.log(route.query);
  if(route.query.id=='0'){
    console.log(route.query);
    nodes.value=initialNodes;
    edges.value=initialEdges;
  }
}
</script>

<style>
.vue-flow__edge {
  text-align: left;
  /* 设置edges的左对齐 */
}

#contextMenu {
  display: none;
  position: absolute;
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
  text-align: center;
  color: black;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  z-index: 99999;
}
.vue-flow__node-default.selectable:hover,
.vue-flow__node-input.selectable:hover,
.vue-flow__node-output.selectable:hover {
  box-shadow: none;
}

panel {
  cursor: pointer;
  position: absolute;
  z-index: 100000;
}

.remove {
  background: #fff;
  color: #666;
  margin: 0 10px;
  font-size: 12px;
}
.vue-flow__node-default, .vue-flow__node-input, .vue-flow__node-output{
  width: auto !important;
  border: none;
  background-color: rgba(0,0,0,0);
}
</style>