Initial commit

modeler/src/views/decision/builder/node.vue

@@ -0,0 +1,194 @@
+<template>
+  <a-dropdown :trigger="['contextmenu']" @openChange="handleVisibleChange">
+    <a-card :class="['ks-designer-node', `ks-designer-node-${element?.type}`]" hoverable>
+      <template #title>
+        {{ element?.name ?? '-' }}
+      </template>
+      <div class="w-full">
+        <p>{{ element?.description ?? '-' }}</p>
+      </div>
+    </a-card>
+    <template #overlay>
+      <a-menu @click="handleMenuClick">
+        <a-menu-item key="delete">
+          <template #icon>
+            <DeleteOutlined />
+          </template>
+          删除
+        </a-menu-item>
+      </a-menu>
+    </template>
+  </a-dropdown>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
+import { elementProps } from './props';
+import type { SettingTaskNodeElement } from '../types';
+import { DeleteOutlined, SettingOutlined } from '@ant-design/icons-vue';
+import type { Graph } from '@antv/x6';
+
+export default defineComponent({
+  name: 'SettingTaskNodeElement',
+  components: {
+    SettingOutlined,
+    DeleteOutlined,
+  },
+  props: elementProps,
+  setup(_props) {
+    // 初始化 element，保证类型是 SettingTaskNodeElement 或 null
+    const element = ref<SettingTaskNodeElement | null>(
+      _props.node ? (_props.node.getData() as SettingTaskNodeElement) : null,
+    );
+    const updateKey = ref(0);
+    const isMenuVisible = ref(false);
+
+    // 获取节点所在的画布实例
+    const getGraph = (): Graph | null => {
+      return _props.graph as Graph || null;
+    };
+
+    const handleDataChange = () => {
+      if (_props.node) {
+        element.value = _props.node.getData() as SettingTaskNodeElement;
+      } else {
+        element.value = null;
+      }
+      console.info('handleDataChange', element.value);
+      updateKey.value++;
+    };
+
+    const handleVisibleChange = (visible: boolean) => {
+      isMenuVisible.value = visible;
+    };
+
+    const handleMenuClick = ({ key }: { key: string }) => {
+      if (key === 'delete') {
+        handleDelete();
+      }
+    };
+
+    const handleDelete = () => {
+      if (!_props.node) return;
+
+      const graph = getGraph();
+      if (graph) {
+        try {
+          // 获取与该节点关联的所有边
+          const connectedEdges = graph.getConnectedEdges(_props.node);
+
+          // 先移除关联的边
+          connectedEdges.forEach(edge => {
+            graph.removeEdge(edge);
+          });
+
+          // 再移除节点本身
+          graph.removeNode(_props.node);
+
+          console.info(`节点 ${_props.node.id} 已删除`);
+        } catch (error) {
+          console.error('删除节点失败:', error);
+        }
+      } else {
+        console.error('无法获取 Graph 实例');
+      }
+
+      // 关闭右键菜单
+      isMenuVisible.value = false;
+    };
+
+    onMounted(() => {
+      console.info('node onMounted');
+      _props.node?.on('change:data', handleDataChange);
+    });
+
+    onUnmounted(() => {
+      console.info('node onUnmounted');
+      _props.node?.off('change:data', handleDataChange);
+    });
+
+    return {
+      element,
+      handleMenuClick,
+      handleVisibleChange,
+    };
+  },
+});
+</script>
+
+<style lang="less">
+.x6-widget-selection-box {
+  border: 1px dashed #7a6986;
+  box-shadow: 2px 2px 5px #000000;
+}
+
+.ks-designer-node {
+  background: #1b3875;
+  //background: url('@/assets/icons/bg-node.png') center / 100% 100%;
+  border: 0;
+  border-radius: 2px;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+
+  &:hover {
+    box-shadow: 0 1px 2px -2px rgb(0 0 0), 0 3px 6px 0 rgb(0 0 0 / 60%), 0 5px 12px 4px rgb(0 0 0 / 30%);
+  }
+
+  .ant-card-head {
+    border: 0;
+    height: 30px;
+    min-height: 30px;
+    border-radius: 0;
+    color: #ddd;
+    font-size: 12px;
+    font-weight: normal;
+    padding: 0 15px;
+  }
+
+  .ant-card-body {
+    color: #fff;
+    height: calc(100% - 30px);
+    background: #24417e;
+    border-radius: 0;
+    font-size: 12px;
+    padding: 15px !important;
+    //overflow: hidden;
+    //white-space: nowrap;
+    //text-overflow: ellipsis;
+  }
+
+  //&.ks-designer-node-root{
+  //background: #645525;
+  //.ant-card-body{
+  //  background: #726334;
+  //}
+  //}
+  &.ks-designer-node-select {
+    background: #255464;
+
+    .ant-card-body {
+      background: #1c4654;
+    }
+  }
+
+  &.ks-designer-node-precondition,
+  &.ks-designer-node-parallel,
+  &.ks-designer-node-sequence {
+    background: #4c5a9d;
+
+    .ant-card-body {
+      background: #3f4d8d;
+    }
+  }
+
+  &.ks-designer-node-action {
+    background: #645525;
+
+    .ant-card-body {
+      background: #726334;
+    }
+  }
+}
+
+</style>