antv/x6自定义节点+小地图+复制/删除节点+拖拽生成节点

已于 2024-01-26 18:03:16 修改
阅读量2.6k 收藏 14
点赞数 9
文章标签： antv/x6 x6自定义节点 dnd拖拽生成节点 小地图MiniMap
于 2024-01-26 18:01:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SunFlower914/article/details/135869294
版权

1、 下载x6：

npm i @antv/x6@2.17.1

 同步下载所需要用到的x6插件：

"@antv/x6-plugin-clipboard": "^2.0.0", // 如果使用剪切板功能，需要安装此包

"@antv/x6-plugin-history": "^2.0.0", // 如果使用撤销重做功能，需要安装此包

"@antv/x6-plugin-keyboard": "^2.0.0", // 如果使用快捷键功能，需要安装此包

"@antv/x6-plugin-minimap": "^2.0.0", // 如果使用小地图功能，需要安装此包

"@antv/x6-plugin-scroller": "^2.0.0", // 如果使用滚动画布功能，需要安装此包

"@antv/x6-plugin-selection": "^2.0.0", // 如果使用框选功能，需要安装此包

"@antv/x6-plugin-snapline": "^2.0.0", // 如果使用对齐线功能，需要安装此包

"@antv/x6-plugin-dnd": "^2.0.0", // 如果使用 dnd 功能，需要安装此包

"@antv/x6-plugin-stencil": "^2.0.0", // 如果使用 stencil 功能，需要安装此包

"@antv/x6-plugin-transform": "^2.0.0", // 如果使用图形变换功能，需要安装此包

"@antv/x6-plugin-export": "^2.0.0", // 如果使用图片导出功能，需要安装此包

"@antv/x6-react-components": "^2.0.0", // 如果使用配套 UI 组件，需要安装此包

"@antv/x6-react-shape": "^2.0.0", // 如果使用 react 渲染功能，需要安装此包

"@antv/x6-vue-shape": "^2.0.0" // 如果使用 vue 渲染功能，需要安装此包

 2、页面中引入x6

<template>
  <div class="entry-container" ref="screenRef">
      <div class="mapBox">
        <div id="mapBody"></div>
      </div>
      <div id="minimap"></div>
      <TeleportContainer />  // 很重要，必须将TeleportContainer标签放置在html结构中
    </div>
  </div>
</template>

<script setup>
import { register, getTeleport } from "@antv/x6-vue-shape/lib";
import { Graph, Path, Edge, Platform } from "@antv/x6";
import { Transform } from "@antv/x6-plugin-transform";
import { Selection } from "@antv/x6-plugin-selection";
import { Snapline } from "@antv/x6-plugin-snapline";
import { Keyboard } from "@antv/x6-plugin-keyboard";
import { Clipboard } from "@antv/x6-plugin-clipboard";
import { History } from "@antv/x6-plugin-history";
import { Scroller } from "@antv/x6-plugin-scroller";
import { Dnd } from "@antv/x6-plugin-dnd";
import { MiniMap } from "@antv/x6-plugin-minimap";
</script>

3、注册自定义节点：

// 引入自定义节点
import GroupNode from "./components/groupNode.vue";
import mapDrawer from "./components/mapDrawer.vue";

// 注册外部节点
register({
  shape: "ArtNode",
  inherit: "vue-shape",
  width: 300,
  height: 72,
  component: ArtNode,
  ports: { ...ports },
});

// 注册群组节点
register({
  shape: "GroupNode",
  inherit: "vue-shape",
  width: 325,
  height: 210,
  component: GroupNode,
  ports: { ...ports },
});

const ports = {
  groups: {
    in: {
      position: "left",
      attrs: {
        circle: {
          r: 5,
          magnet: true,
          stroke: "#ccc",
          strokeWidth: 2,
          fill: "#fff",
        },
      },
    },

    out: {
      position: "right",
      attrs: {
        circle: {
          r: 5,
          magnet: true,
          stroke: "#ccc",
          strokeWidth: 2,
          fill: "#fff",
        },
      },
    },
  },
  items: [
    {
      id: "port1",
      group: "in",
    },
    {
      id: "port2",
      group: "out",
    },
  ],
};

4、注册x6插件

// 注册插件
const handleUsePlugin = () => {
  graph
    .use(
      new Transform({
        resizing: true,
        rotating: true,
      })
    )
    .use(
      new Selection({
        rubberband: true,
        showNodeSelectionBox: true,
      })
    )
    .use(
      new Scroller({
        enabled: true,
        autoResize: true,
        pannable: true, //是否启用画布平移能力
        modifiers: ["alt", "ctrl", "meta"], //设置修饰键后需要点击鼠标并按下修饰键才能触发画布拖拽
      })
    )
    .use(
      new MiniMap({
        container: document.getElementById("minimap"),
        width: 200,
        height: 160,
        scalable: false,
        minScale: 0.1,
        maxScale: 2,
        padding: 10,
      })
    )
    .use(new Snapline())
    .use(new Keyboard())
    .use(new Clipboard())
    .use(new History());
};

5、注册边&连接器

Edge.config({
  markup: [
    {
      tagName: "path",
      selector: "wrap",
      attrs: {
        fill: "none",
        cursor: "pointer",
        stroke: "transparent",
        strokeLinecap: "round",
      },
    },
    {
      tagName: "path",
      selector: "line",
      attrs: {
        fill: "none",
        pointerEvents: "none",
      },
    },
  ],
  connector: { name: "curveConnector" },
  attrs: {
    wrap: {
      connection: true,
      strokeWidth: 10,
      strokeLinejoin: "round",
    },
    line: {
      connection: true,
      stroke: "#A2B1C3",
      strokeWidth: 1,
      targetMarker: {
        name: "classic",
        size: 6,
      },
    },
  },
});

// 注册连接器
Graph.registerConnector(
  "curveConnector",
  (sourcePoint, targetPoint) => {
    const hgap = Math.abs(targetPoint.x - sourcePoint.x);
    const path = new Path();
    path.appendSegment(
      Path.createSegment("M", sourcePoint.x - 4, sourcePoint.y)
    );
    path.appendSegment(
      Path.createSegment("L", sourcePoint.x + 12, sourcePoint.y)
    );
    // 水平三阶贝塞尔曲线
    path.appendSegment(
      Path.createSegment(
        "C",
        sourcePoint.x < targetPoint.x
          ? sourcePoint.x + hgap / 2
          : sourcePoint.x - hgap / 2,
        sourcePoint.y,
        sourcePoint.x < targetPoint.x
          ? targetPoint.x - hgap / 2
          : targetPoint.x + hgap / 2,
        targetPoint.y,
        targetPoint.x - 6,
        targetPoint.y
      )
    );
    path.appendSegment(
      Path.createSegment("L", targetPoint.x + 2, targetPoint.y)
    );

    return path.serialize();
  },
  true
);

Graph.registerEdge("data-processing-curve", Edge, true);

6、初始化x6画布

// 创建画布
const handleInit = () => {
  // 创建画布
  graph = new Graph({
    container: document.getElementById("mapBody"),
    grid: true,
    width: 1500,
    height: 1200,
    autoResize: true,
    // 设置画布背景颜色
    background: {
      color: "#f0f3f5",
    },
    // 画布缩放 按住ctrl
    mousewheel: {
      enabled: true,
      global: true,
      modifiers: ["ctrl", "meta"],
    },
    // 设置连接线
    connecting: {
      snap: true, //开启和关闭连线过程中自动吸附
      anchor: "center",
      connectionPoint: "boundary",
      allowLoop: false, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点，默认为 true
      allowBlank: false, // 是否允许连接到画布空白位置的点
      highlight: true,
      sourceAnchor: {
        name: "left",
        args: {
          dx: Platform.IS_SAFARI ? 4 : 8,
        },
      },
      targetAnchor: {
        name: "right",
        args: {
          dx: Platform.IS_SAFARI ? 4 : -8,
        },
      },
      //创建边
      createEdge() {
        return graph.createEdge({
          shape: "data-processing-curve",
          attrs: {
            line: {
              stroke: "#A2B1C3",
              strokeWidth: 1,
              targetMarker: {
                name: "block",
                width: 12,
                height: 8,
              },
            },
          },
          zIndex: -1,
        });
      },
      validateConnection({ targetMagnet }) {
        return !!targetMagnet;
      },
    },
    highlighting: {
      magnetAdsorbed: {
        name: "stroke",
        args: {
          attrs: {
            fill: "#006eff",
            stroke: "#006eff",
          },
        },
      },
    },
  });
  graph.centerContent();
  handleUsePlugin();

7、给x6画布绑定事件(实现复制、粘贴、删除、撤销、回复等功能)

// 画布方法&快捷键
const handleGraphMethods = () => {
  // 撤销/复原
  graph.bindKey(["meta+z", "ctrl+z"], () => {
    if (graph.canUndo()) {
      graph.undo();
    }
    return false;
  });
  graph.bindKey(["meta+y", "ctrl+y"], () => {
    if (graph.canRedo()) {
      graph.redo();
    }
    return false;
  });

  //复制
  graph.bindKey(["meta+c", "ctrl+c"], () => {
    const cells = graph.getSelectedCells();
    if (cells.length) {
      graph.copy(cells);
    }
    return false;
  });

  // 粘贴
  graph.bindKey(["meta+v", "ctrl+v"], () => {
    if (!graph.isClipboardEmpty()) {
      const cells = graph.paste({ offset: 32 });
      cells.forEach((item) => {
        let node = item.store.data;
        node.shape !== "data-processing-curve" && (node.data.id = node.id);
      });
      graph.cleanSelection();
      graph.select(cells);
    }
    return false;
  });

  // 删除
  graph.bindKey("backspace", () => {
    const cells =  graph.getSelectedCells();
      if (cells.length) {
        graph.removeCells(cells);
      }
  });

  // 右键菜单
  graph.on("node:contextmenu", ({ e, x, y, cell, view }) => {
    handleContextmenu(e);
  });

  // 历史改变
  graph.on("history:change", () => {
    canRedo.value = graph.canRedo();
    canUndo.value = graph.canUndo();
  });

  //  选中节点
  graph.on("cell:selected", ({ cell, index, options }) => {
    selectCell.value = cell;
  });
  // 取消选中节点
  graph.on("cell:unselected", ({ cell, index, options }) => {
    selectCell.value = null;
  });

  // 双击节点
  graph.on("cell:dblclick", ({ e, x, y, cell, view }) => {
    if (graph.isNode(cell)) {
      drawerData.value = JSON.parse(JSON.stringify(cell.getData()));
      drawerData.value.showDrawer = true;
    }
  });
};

8、拖拽生成节点


  // 指定画布拖拽区
  dnd = new Dnd({
    target: graph,
    scaled: false,
    dndContainer: document.querySelector(".treeContent"),
    // 确保拖拽节点时和拖拽完成后节点id一致
    getDragNode: (node) => node.clone({ keepId: true }),
    getDropNode: (node) => {
      // 拖拽结束后
      let data = node.getData();
      drawerData.value = {
        ...data,
        id: node.id,
        isCreate: true,
        showDrawer: true,
      };
      return node.clone({ keepId: true });
    },
  });
  handleGraphMethods();
};

// 拖拽生成节点
const handleCreateNode = (type, e) => {
  // graph.cleanSelection();
  const node =
    type === "group"
      ? graph.createNode({
          shape: "GroupNode",
          data: {
            type: "group",
            group: [{ type: "inside" }, { type: "outside" }],
          },
        })
      : graph.createNode({
          shape: "ArtNode",
          data: {
            type,
          },
        });
  dnd.start(node, e);
};

 9、保存/设置节点数据

// 保存
const handleToJson = () => {
  const json = graph.toJSON();
  json.knwlgMapId = route.query.pkId;
  submitNode(json).then(() => {
    proxy.$modal.msgSuccess("保存成功!");
  });
};

// 获取地图数据
const getMapDetail = () => {
  loading.value = true;
  getNodeDetail({ knwlgMapId: route.query.pkId })
    .then(({ data: cells }) => {
      graph.fromJSON({ cells });
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
};

完整代码：

<template>
  <div class="entry-container" ref="screenRef" v-loading="loading">
    <div class="treeContent" style="width: 240px">
      <div class="flex mb20">
        <div class="mr5">插入节点</div>
        <el-tooltip placement="bottom">
          <template #content>
            * 创建节点方式：<br />
            按住内部节点/外部节点/文章集合后往右侧区域拖拽<br />
            * 节点/边操作快捷键：<br />
            删除：点击选中节点/边后按Backspace键<br />
            撤销：操作后Ctrl+z<br />
            恢复：操作后Ctrl+y<br />
            复制：选中节点/边后Ctrl+c Ctrl+v<br />
            多选：直接框选或按住Ctrl单点<br />
            * 画布操作快捷键：<br />
            按住Ctrl+鼠标左键可拖拽画布<br />
            按住Ctrl+鼠标滚轮可缩放画布<br />
          </template>
          <el-icon class="mr5" :size="14" color="#006eff"
            ><QuestionFilled
          /></el-icon>
        </el-tooltip>
      </div>
      <div class="sigleGroup">
        <div
          class="shapeItem flex"
          v-for="(item, index) in shapeList"
          :key="index"
          @mousedown="handleCreateNode(item.type, $event)"
        >
          <img class="mr10" :src="item.imgSrc" />
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div class="mapContent">
      <div class="mapHeader flex">
        <div class="flex">
          <div v-if="!mapInfo.showIpt">{{ mapInfo.knwlgMapName }}</div>
          <el-input
            v-else
            ref="mapNameRef"
            maxlength="20"
            autofocus
            v-model.trim="mapInfo.knwlgMapName"
            placeholder="输入地图名称"
            show-word-limit
            clearable
            style="width: 200px"
            @blur="handleBlur"
          ></el-input>
          <el-button
            v-if="!mapInfo.showIpt"
            link
            type="primary"
            icon="Edit"
            @click="handleShowIpt"
          ></el-button>
        </div>
        <div class="flex">
          <el-tooltip content="撤销">
            <el-button
              :disabled="!canUndo"
              link
              type="primary"
              icon="RefreshLeft"
              @click="handleUndo"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="恢复">
            <el-button
              :disabled="!canRedo"
              link
              type="primary"
              icon="RefreshRight"
              @click="handleRedo"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="删除选中的线或节点">
            <el-button
              :disabled="!selectCell"
              link
              type="primary"
              icon="Delete"
              @click="handleDelete()"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="复制选中的线或节点">
            <el-button
              :disabled="!selectCell"
              link
              type="primary"
              icon="CopyDocument"
              @click="handleCopy"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="全屏">
            <el-button
              link
              type="primary"
              icon="FullScreen"
              @click="toggle"
            ></el-button>
          </el-tooltip>
          <el-divider direction="vertical" />
          <el-button type="primary" @click="handleToJson">保存</el-button>
          <el-button @click="handleClosePage">关闭</el-button>
        </div>
      </div>
      <div class="mapBox">
        <div id="mapBody"></div>
      </div>
      <div id="minimap"></div>
      <TeleportContainer />
    </div>
    <mapDrawer
      v-model="drawerData"
      @handleUpdateData="handleUpdateData"
      @handleDelCell="handleDelete"
    />
  </div>
</template>

<script setup name="Ekms/map/grapth">
import { getNodeDetail, submitNode, editName } from "@/api/ekms/map";
import { register, getTeleport } from "@antv/x6-vue-shape/lib";
import { Graph, Path, Edge, Platform } from "@antv/x6";
import { Transform } from "@antv/x6-plugin-transform";
import { Selection } from "@antv/x6-plugin-selection";
import { Snapline } from "@antv/x6-plugin-snapline";
import { Keyboard } from "@antv/x6-plugin-keyboard";
import { Clipboard } from "@antv/x6-plugin-clipboard";
import { History } from "@antv/x6-plugin-history";
import { Scroller } from "@antv/x6-plugin-scroller";
import { Dnd } from "@antv/x6-plugin-dnd";
import { MiniMap } from "@antv/x6-plugin-minimap";
import { useFullscreen } from "@vueuse/core";
import ContextMenu from "@imengyu/vue3-context-menu";
import useTagsViewStore from "@/store/modules/tagsView";
import { ports, shapeList } from "./components/constans.js";
import ArtNode from "./components/artNode.vue";
import GroupNode from "./components/groupNode.vue";
import mapDrawer from "./components/mapDrawer.vue";

const { proxy } = getCurrentInstance();
const screenRef = ref(null);
const { toggle } = useFullscreen(screenRef);
const route = useRoute();
const router = useRouter();
const mapInfo = ref({
  originName: route.query.knwlgMapName,
  knwlgMapName: route.query.knwlgMapName,
});

let graph = null;
let dnd = null;
const TeleportContainer = getTeleport();
const canRedo = ref(false);
const canUndo = ref(false);
const loading = ref(false);
// const routeId = ref(route.query.pkId);
const selectCell = ref(null);
const drawerData = ref({
  showDrawer: false,
  title: "",
  group: [{ type: "inside" }, { type: "outside" }],
});

onMounted(() => {
  if (!route.query.pkId) return;
  handleInit();
  // window.addEventListener("resize", resizeFn);
});

// const resizeFn = () => {
//   const width = document.querySelector(".mapContent").offsetWidth;
//   const height = document.querySelector(".mapContent").offsetHeight;
//   graph.resize(width, height);
// };

// onActivated(() => {
//   if (routeId.value != route.query.pkId) {
//     routeId.value = route.query.pkId;
//     graph && graph.dispose();
//     handleInit();
//   } else {
//     resizeFn();
//     graph.centerContent();
//   }
// });

const handleShowIpt = () => {
  mapInfo.value.showIpt = true;
  nextTick(() => {
    proxy.$refs.mapNameRef.input.focus();
  });
};

const handleBlur = async () => {
  mapInfo.value.showIpt = false;
  !mapInfo.value.knwlgMapName?.length &&
    (mapInfo.value.knwlgMapName = route.query.knwlgMapName);
  await editName({
    pkId: route.query.pkId,
    knwlgMapName: mapInfo.value.knwlgMapName,
  });
};

// 获取地图数据
const getMapDetail = () => {
  loading.value = true;
  getNodeDetail({ knwlgMapId: route.query.pkId })
    .then(({ data: cells }) => {
      graph.fromJSON({ cells });
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
};

// 注册外部节点
register({
  shape: "ArtNode",
  inherit: "vue-shape",
  width: 300,
  height: 72,
  component: ArtNode,
  ports: { ...ports },
});

// 注册群组节点
register({
  shape: "GroupNode",
  inherit: "vue-shape",
  width: 325,
  height: 210,
  component: GroupNode,
  ports: { ...ports },
});

Edge.config({
  markup: [
    {
      tagName: "path",
      selector: "wrap",
      attrs: {
        fill: "none",
        cursor: "pointer",
        stroke: "transparent",
        strokeLinecap: "round",
      },
    },
    {
      tagName: "path",
      selector: "line",
      attrs: {
        fill: "none",
        pointerEvents: "none",
      },
    },
  ],
  connector: { name: "curveConnector" },
  attrs: {
    wrap: {
      connection: true,
      strokeWidth: 10,
      strokeLinejoin: "round",
    },
    line: {
      connection: true,
      stroke: "#A2B1C3",
      strokeWidth: 1,
      targetMarker: {
        name: "classic",
        size: 6,
      },
    },
  },
});

// 注册连接器
Graph.registerConnector(
  "curveConnector",
  (sourcePoint, targetPoint) => {
    const hgap = Math.abs(targetPoint.x - sourcePoint.x);
    const path = new Path();
    path.appendSegment(
      Path.createSegment("M", sourcePoint.x - 4, sourcePoint.y)
    );
    path.appendSegment(
      Path.createSegment("L", sourcePoint.x + 12, sourcePoint.y)
    );
    // 水平三阶贝塞尔曲线
    path.appendSegment(
      Path.createSegment(
        "C",
        sourcePoint.x < targetPoint.x
          ? sourcePoint.x + hgap / 2
          : sourcePoint.x - hgap / 2,
        sourcePoint.y,
        sourcePoint.x < targetPoint.x
          ? targetPoint.x - hgap / 2
          : targetPoint.x + hgap / 2,
        targetPoint.y,
        targetPoint.x - 6,
        targetPoint.y
      )
    );
    path.appendSegment(
      Path.createSegment("L", targetPoint.x + 2, targetPoint.y)
    );

    return path.serialize();
  },
  true
);

Graph.registerEdge("data-processing-curve", Edge, true);

// 创建画布
const handleInit = () => {
  // 创建画布
  graph = new Graph({
    container: document.getElementById("mapBody"),
    grid: true,
    width: 1500,
    height: 1200,
    autoResize: true,
    // 设置画布背景颜色
    background: {
      color: "#f0f3f5",
    },
    // 画布缩放 按住ctrl
    mousewheel: {
      enabled: true,
      global: true,
      modifiers: ["ctrl", "meta"],
    },
    // 设置连接线
    connecting: {
      snap: true, //开启和关闭连线过程中自动吸附
      anchor: "center",
      connectionPoint: "boundary",
      allowLoop: false, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点，默认为 true
      allowBlank: false, // 是否允许连接到画布空白位置的点
      highlight: true,
      sourceAnchor: {
        name: "left",
        args: {
          dx: Platform.IS_SAFARI ? 4 : 8,
        },
      },
      targetAnchor: {
        name: "right",
        args: {
          dx: Platform.IS_SAFARI ? 4 : -8,
        },
      },
      //创建边
      createEdge() {
        return graph.createEdge({
          shape: "data-processing-curve",
          attrs: {
            line: {
              stroke: "#A2B1C3",
              strokeWidth: 1,
              targetMarker: {
                name: "block",
                width: 12,
                height: 8,
              },
            },
          },
          zIndex: -1,
        });
      },
      validateConnection({ targetMagnet }) {
        return !!targetMagnet;
      },
    },
    highlighting: {
      magnetAdsorbed: {
        name: "stroke",
        args: {
          attrs: {
            fill: "#006eff",
            stroke: "#006eff",
          },
        },
      },
    },
  });
  // resizeFn();
  graph.centerContent();
  getMapDetail();
  handleUsePlugin();
  // 指定画布拖拽区
  dnd = new Dnd({
    target: graph,
    scaled: false,
    dndContainer: document.querySelector(".treeContent"),
    // 确保拖拽节点时和拖拽完成后节点id一致
    getDragNode: (node) => node.clone({ keepId: true }),
    getDropNode: (node) => {
      // 拖拽结束后
      let data = node.getData();
      drawerData.value = {
        ...data,
        id: node.id,
        isCreate: true,
        showDrawer: true,
      };
      return node.clone({ keepId: true });
    },
  });
  handleGraphMethods();
};

// 画布方法&快捷键
const handleGraphMethods = () => {
  // 撤销/复原
  graph.bindKey(["meta+z", "ctrl+z"], () => {
    if (graph.canUndo()) {
      graph.undo();
    }
    return false;
  });
  graph.bindKey(["meta+y", "ctrl+y"], () => {
    if (graph.canRedo()) {
      graph.redo();
    }
    return false;
  });

  //复制
  graph.bindKey(["meta+c", "ctrl+c"], () => {
    const cells = graph.getSelectedCells();
    if (cells.length) {
      graph.copy(cells);
    }
    return false;
  });

  // 粘贴
  graph.bindKey(["meta+v", "ctrl+v"], () => {
    if (!graph.isClipboardEmpty()) {
      const cells = graph.paste({ offset: 32 });
      cells.forEach((item) => {
        let node = item.store.data;
        node.shape !== "data-processing-curve" && (node.data.id = node.id);
      });
      graph.cleanSelection();
      graph.select(cells);
    }
    return false;
  });

  // 删除
  graph.bindKey("backspace", () => {
    handleDelete();
  });

  // 右键菜单
  graph.on("node:contextmenu", ({ e, x, y, cell, view }) => {
    handleContextmenu(e);
  });

  // 历史改变
  graph.on("history:change", () => {
    canRedo.value = graph.canRedo();
    canUndo.value = graph.canUndo();
  });

  //  选中节点
  graph.on("cell:selected", ({ cell, index, options }) => {
    selectCell.value = cell;
  });
  // 取消选中节点
  graph.on("cell:unselected", ({ cell, index, options }) => {
    selectCell.value = null;
  });

  // 双击节点
  graph.on("cell:dblclick", ({ e, x, y, cell, view }) => {
    if (graph.isNode(cell)) {
      drawerData.value = JSON.parse(JSON.stringify(cell.getData()));
      drawerData.value.showDrawer = true;
    }
  });
};

// 注册插件
const handleUsePlugin = () => {
  graph
    .use(
      new Transform({
        resizing: true,
        rotating: true,
      })
    )
    .use(
      new Selection({
        rubberband: true,
        showNodeSelectionBox: true,
      })
    )
    .use(
      new Scroller({
        enabled: true,
        autoResize: true,
        pannable: true, //是否启用画布平移能力
        modifiers: ["alt", "ctrl", "meta"], //设置修饰键后需要点击鼠标并按下修饰键才能触发画布拖拽
      })
    )
    .use(
      new MiniMap({
        container: document.getElementById("minimap"),
        width: 200,
        height: 160,
        scalable: false,
        minScale: 0.1,
        maxScale: 2,
        padding: 10,
      })
    )
    .use(new Snapline())
    .use(new Keyboard())
    .use(new Clipboard())
    .use(new History());
};

// 拖拽生成节点
const handleCreateNode = (type, e) => {
  // graph.cleanSelection();
  const node =
    type === "group"
      ? graph.createNode({
          shape: "GroupNode",
          data: {
            type: "group",
            group: [{ type: "inside" }, { type: "outside" }],
          },
        })
      : graph.createNode({
          shape: "ArtNode",
          data: {
            type,
          },
        });
  dnd.start(node, e);
};

// 修改节点内容
const handleUpdateData = (id, value) => {
  let cell = graph.getCellById(id || selectCell.value.id);
  cell.updateData(value);
  if (drawerData.value.type === "group") {
    cell.resize(325, 50 + drawerData.value.group.length * 82);
  }
  drawerData.value.showDrawer = false;
};

// 撤销
const handleUndo = () => {
  graph.undo();
};

// 恢复
const handleRedo = () => {
  graph.redo();
};

// 复制
const handleCopy = () => {
  const cells = graph.getSelectedCells();
  if (cells.length) {
    graph.copy(cells);
    if (!graph.isClipboardEmpty()) {
      const cells = graph.paste({ offset: 32 });
      graph.cleanSelection();
      graph.select(cells);
    }
  }
};

// 右键菜单
const handleContextmenu = (e) => {
  const cells = graph.getSelectedCells();
  ContextMenu.showContextMenu({
    x: e.pageX,
    y: e.pageY,
    items: [
      {
        label: "复制(Ctrl+c&Ctrl+z)",
        disabled: cells.length === 0 ? true : false,
        onClick: () => {
          if (cells.length) {
            graph.copy(cells);
            if (!graph.isClipboardEmpty()) {
              const cells = graph.paste({ offset: 32 });
              // 解决复制的节点修改失效问题
              cells.forEach((item) => {
                let node = item.store.data;
                node.shape !== "data-processing-curve" &&
                  (node.data.id = node.id);
              });
              graph.cleanSelection();
              graph.select(cells);
            }
          }
        },
      },
      {
        label: "删除(Backspace)",
        disabled: cells.length === 0 ? true : false,
        onClick: () => {
          if (cells.length) {
            graph.removeCells(cells);
          }
        },
      },
    ],
  });
};

// 删除节点/边
const handleDelete = (id) => {
  // 判断是新增删除还是修改删除
  const cells = id ? [graph.getCellById(id)] : graph.getSelectedCells();
  if (cells.length) {
    graph.removeCells(cells);
  }
};

// 保存
const handleToJson = () => {
  const json = graph.toJSON();
  json.knwlgMapId = route.query.pkId;
  submitNode(json).then(() => {
    proxy.$modal.msgSuccess("保存成功!");
  });
};

// 关闭页面
const handleClosePage = () => {
  let tag = useTagsViewStore().visitedViews.find(
    (item) => item.path === "/ekms/map/grapth"
  );
  proxy.$tab.closePage(tag).then(() => {
    router.push("/ekms/map/mapLibrary");
  });
};

onBeforeUnmount(() => {
  graph && graph.dispose();
});
</script>

<style lang="scss" scoped>
.entry-container {
  display: flex;
  position: relative;
  background: #f0f3f5;
  height: calc(100vh - 70px);
  :deep(.treeContent) {
    padding: 20px;
    min-width: 240px;
    .shapeItem {
      padding: 0 10px;
      margin-bottom: 10px;
      height: 44px;
      line-height: 20px;
      font-size: 14px;
      background: #f6f8fd;
      border-radius: 4px;
      user-select: none;
      cursor: move;
      &:hover {
        border: 1px solid rgba(0, 112, 255, 1);
      }
      img {
        width: 28px;
        height: 28px;
      }
    }
  }
  :deep(.mapContent) {
    flex: 1;
    position: relative;
    .mapHeader {
      padding: 0 20px;
      width: 100%;
      height: 40px;
      line-height: 40px;
      background: #fff;
      justify-content: space-between;
      box-shadow: 0px 1px 0px 0px rgba(215, 220, 230, 1);
    }
    .mapBox {
      width: calc(100vw - 245px);
      height: calc(100vh - 110px);
    }
    #minimap {
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}
:deep(#mapBody) {
  .x6-widget-selection-box {
    border-color: rgba(0, 110, 255, 1);
  }
  .x6-widget-transform {
    display: none !important;
  }
  .x6-edge-selected path:nth-child(2) {
    stroke: #006eff;
    stroke-dasharray: 8px, 2px;
  }
}
</style>

SunFlower914
关注
  • 9
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
antv x6自定义节点(使用vue渲染节点）
web18296061989的博客
03-05 7848
1、安装@antv/x6-vue-shape # npm npm install @antv/x6-vue-shape # yarn yarn add @antv/x6-vue-shape # 在 vue2 下还需要安装 @vue/composition-api yarn add @vue/composition-api --dev 主文件引入@antv/x6-vue-shape import "@antv/x6-vue-shape"; 安装并应用该包后，指定节点的shape为vue-shape，并
在vue3中浅尝antv X6 2.0 （一）
m0_65104145的博客
02-09 2269
在vue3中浅尝antv X6 2.0的一些小记录
antV X6的简要使用教程
最新发布
爱蹦跶的全栈大A阿
05-09 1280
在我们的日常开发工作中，我们经常需要构建复杂的交互式图表。这是一项挑战，因为我们需要处理大量的数据，同时还要保证图表的可读性和用户体验。幸运的是，有一些强大的工具可以帮助我们完成这项任务，antv x6就是其中之一。在这篇博客中，我将向你介绍如何使用antv x6构建交互式图表，并提供一些代码示例。​antv x6还允许我们创建自定义的节点。
【AntV X6 流程图】在elementUI对话框的渲染问题(已解决)
xiaoxiqo的博客
05-02 454
AntV X6 的流程图不能在elementUI中渲染，渲染时机改为update()中就可以了
antv/x6节点添加鼠标悬浮高亮和删除功能
.伊泽瑞尔
02-04 769
antv/x6 节点node添加鼠标悬浮高亮和删除功能
antvG6绘制树形图踩坑记录（自定义节点等功能）
Mr__proto__的博客
02-24 2125
antvg6 树状图 vue2
Antv X6-初次使用（安装&引入、简单配置）
m0_50911095的博客
06-28 6934
Vue2+Antv X6
“Error: Ensure the container of the graph is specified and valid“：antv-x6报错
weixin_44213308的博客
12-16 5749
antv-X6快速上手报错： 发现原因是因为： 正确的代码如下： <template> <div id="container"> </div> </template> <script> import { Graph } from '@antv/x6'; const data = { // 节点 nodes: [ { id: 'node1', // String，可选，节点的唯一标识
x6实现节点新增编辑删除
weixin_44151849的博客
09-03 1292
【代码】x6实现节点新增编辑删除。
vue3+ts使用antv/x6 + 自定义节点
qq_40934617的博客
08-10 3852
vue3+ts使用antv/x6
x6自定义样式
weixin_43815091的博客
05-03 1513
x6自定义节点样式 自定义节点 官方的示例如下自定义节点示例（由于自动布局示例的要素过多，暂以倒数第二个示例来看） 要素： markup:markup官方文档 markup指定了渲染节点/边时使用的 SVG/HTML片段，使用 JSON 格式描述。例如 Shape.Rect节点的markup定义如下。 tagname: 通过tagname指定需要创建的SVG/HTML元素 selector: SVG/HTML元素的唯一标识，可以在attrs中通过selector:'name'的name属性修改样式
vue3+vite+ts+antv/x6搭建的流程图编辑页面
03-26
这个编辑页面中，可以根据自己的需求，轻松创建和编辑各种形状的节点，包括矩形、圆形、菱形等，甚至还可以自定义节点的样式和属性。同时，还提供了一个拖拽组件栏，用户只需简单拖拽，即可将所需的组件添加到流程图...
vue中使用antv/x6编写自定义流程
04-14
使用antv/x6实现画布绘制和流程绘制，通过拖动节点到画布的方式进行节点的添加，使用element组件实现鼠标移入节点后的自定义功能，使用antv/x6自带的api和事件系统实现节点、连线、连接桩的添加、删除功能，节点使用...
antv/x6封装vue2.0源码
05-13
附带增删改连线拖拽生成功能撤销保存放大缩小等等
Vue+Antv X6绘制流程图demo
07-05
隐含需求：节点样式需要满足`UI`设计，所以需要自定义节点样式 一个满足以上需求的Vue+Antv X6的项目 具体效果如下： https://img-blog.csdnimg.cn/a24d2e30b5a0481297f83c5a75b78b4f.png#pic_center
antv x6 拖拽流程DEMO
04-26
可自定义节点、设备，设计设备或节点的属性。 可自定义流程任何方向，可动态扩展。 后期开发可自定义任何功能。 参考官网DEMO地址：https://x6.antv.antgroup.com/examples 参考官网文档：...
会用这些的api，轻松绘制流程图（antv/g6流程图入门）
qq_35094120的博客
01-30 4693
g6的api使用常用graph属性和方法graph属性graph方法getPointByClient(clientX, clientY)getZoom()zoomTo(toRatio, center)get(key)find(type, fn)removeItem(item, stack)update(node/edge,nodeModel/edgeModel)updateItem(item, model, stack)destroy()setAutoPaint(auto)paint()setItemSta
react antv/X6可视化工具超详细入门
热门推荐
xye1230的博客
03-18 1万+
描述之前我想先吐槽一下这个X6的官网，可能原生html、JS还行，但是框架玩家是真看不懂，我个人而言，无法灵活运用到项目中，幸好后面有带佬的代码，不得不说质量雀食高 开整！ 首先我们的目的是画一个这样的图表 看到这个树状图，我们想要搞清楚，我们需要那几样来完成 - 不是显示单独一个数据，所以必然要自定义节点 - 第一先确定数据格式，从后台穿过来的数据里面不单是数据，还需要一组头尾的连接字段来确认边，如果已经大致看过X6的可视化逻辑，自然明白边的头尾是什么逻辑了 - 其次自定义节点，自定义节点需要从创
Vue2项目中使用AntV X6 自定义节点绘制组织树
weixin_45792972的博客
11-03 3536
Vue2项目中使用AntV X6 自定义节点绘制组织树。
antv/x6 拖动连接线
12-21
在antv/x6中，可以通过拖动来连接两个节点。下面是一个示例代码： ```javascript import { Graph, Node, Edge } from '@antv/x6'; // 创建画布 const graph = new Graph({ container: document.getElementById('container'), width: 800, height: 600, }); // 创建节点 const node1 = graph.addNode({ x: 100, y: 100, width: 80, height: 40, shape: 'rect', attrs: { body: { fill: '#ffffff', stroke: '#000000', }, label: { text: 'Node 1', }, }, }); const node2 = graph.addNode({ x: 300, y: 200, width: 80, height: 40, shape: 'rect', attrs: { body: { fill: '#ffffff', stroke: '#000000', }, label: { text: 'Node 2', }, }, }); // 创建连接线 const edge = graph.addEdge({ source: node1, target: node2, attrs: { line: { stroke: '#000000', }, }, }); // 开启连接线的拖动交互 graph.addEdgeTools(edge, [ { name: 'source-arrowhead', }, { name: 'target-arrowhead', }, { name: 'vertices', }, ]); // 开启节点的拖动交互 graph.addNodeTools(node1, [ { name: 'boundary', }, ]); graph.addNodeTools(node2, [ { name: 'boundary', }, ]); ``` 这段代码创建了一个画布，并在画布上添加了两个节点和一个连接线。通过开启连接线和节点的拖动交互，可以实现拖动连接线的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值