coco-mxgraph-editor

mxgraph editor

基于 mxgraph，vue3，typescript 的 editor 组件

<template>
  <MyDraw :nodes="[]" />
</template>
<script setup lang="ts">
  import { MyDraw } from "coco-mxgraph-editor"
  import "coco-mxgraph-editor/dist/style.css"
</script>

props

nodes

SidebarNode[] 出现在侧边栏的节点

interface SidebarNode {
  name: string
  nodes?: SidebarNodeConfig[]
  children?: SidebarNode[]
}


interface SidebarNodeConfig {
  name: string
  style: string
  type: ItemType
  width: number
  height: number
  value?: string
  info?: Record<string, any>
}

hideSidebar

隐藏侧边栏

boolean

toolbar

自定义 toolbar

string[]
//默认值
// ['undo', 'redo', 'zoomIn', 'zoomOut', 'delete']

handleAddVertex?

添加 vertex 节点触发

(
  cell: mxCell,
  x: number,
  y: number,
  target: mxCell
) => void

handleDeleteCell?

删除节点触发

(cell: mxCell) => void

handleAddEdge?

添加 edge 节点触发

(cell: mxCell) => void

handleMoveCell?

移动节点触发

(cell: mxCell) => void

cellRightClick?

自定义侧边栏

(cells: mxCell[], menu: mxPopupMenuHandler) => void

beforeDeleteCell?

删除节点前触发，返回false不会触发删除

(cell: mxCell) => boolean

beforeAddCell?

添加节点前触发，返回false不会添加节点

(cell: mxCell) => boolean

连接规则

mx.mxConnectionHandler.prototype.connect = function (
  source: mxCell,
  target: mxCell,
  evt: MouseEvent,
  dropTarget: mxCell
) {
  this.originConnect.apply(this, arguments as any)
}

outlineMap

鸟瞰图

boolean