@logicflow/extension 2.2.0 → 2.2.1

package/src/mindmap/index.ts

@@ -1,328 +0,0 @@
-import LogicFlow from '@logicflow/core'
-import Hierarchy from '@antv/hierarchy'
-import MarkEntity from './markEntity'
-import FakerRoot from './fakerRoot'
-import MarkRoot from './markRoot'
-import MarkContent from './markContent'
-import MarkContentOption from './markContentOption'
-import { theme } from './theme'
-
-import NodeConfig = LogicFlow.NodeConfig
-import EdgeConfig = LogicFlow.EdgeConfig
-
-export const ROOT_NODE = 'mark:root'
-export const FAKER_NODE = 'faker:root'
-const FIRST_ROOT_X = 10
-const FIRST_ROOT_Y = 10
-
-class MindMap {
-  static pluginName = 'MindMap'
-  lf: any
-
-  constructor({ lf }) {
-    this.lf = lf
-    lf.adapterIn = this.adapterIn
-    lf.adapterOut = this.adapterOut
-
-    lf.setTheme(theme)
-    lf.register(FakerRoot)
-    lf.register(MarkRoot)
-    lf.register(MarkContent)
-    lf.register(MarkContentOption)
-    lf.register(MarkEntity)
-    lf.setDefaultEdgeType('bezier')
-    lf.updateEditConfig({
-      hideAnchors: true,
-      adjustNodePosition: false,
-      edgeTextEdit: false,
-      adjustEdge: false,
-    })
-    lf.graphModel.transformModel.translate(200, 200)
-    this.setContextMenu()
-    /**
-     * 删除树上的某一个点和这个点后面所有的点
-     */
-    lf.removeTreeNode = (nodeId) => {
-      const { nodesMap } = this.getGraphTreeData()
-      const node = nodesMap.get(nodeId)
-      if (node.type === ROOT_NODE) {
-        return
-      }
-      this.removeNode(node)
-      this.renderTree()
-    }
-    /**
-     * 重新排布树
-     */
-    lf.renderTree = () => {
-      this.renderTree()
-    }
-    /**
-     * 监听删除
-     */
-    this.lf.keyboard.on('backspace', () => {
-      const { nodes } = this.lf.getSelectElements(true)
-      if (nodes.length > 0) {
-        this.lf.clearSelectElements()
-        nodes.forEach((node) => {
-          this.lf.removeTreeNode(node.id)
-        })
-      }
-    })
-  }
-
-  setContextMenu() {
-    const menuItem = [
-      {
-        icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAA5NJREFUWEfNmOtRFEEQgHsiACIQIkAiADOQCMAI7I0AjOCaCMQIxAg4IlAjQCIQIhjrW3uuZvf2bmf2Vov+d3Xz+LbfPUFeuYS5+JqmOU1nxRhfzOzHHGdPAlTVwxDCaYzxvYicicj+BphnEbkLISxjjN/MjN9VUgWoqsB8FBHAkJ8ishSRXyLS11gCZ+0bX38rIp/MjPVFUgSoqmhoISKXIvIiIiYit6UXqepb/6grp7oWkZsSjY4Cuta+ighrAbOSg4fUg2uICHAXrvEPY766FVBV0dhnN+Xl2GFFNhMR/+g7EYki8m7buRsBM7gHzFOiNVXF357NDL/cKq5NIPHPjZCDgO4z92jOzHD2IlHVFqx0j/s2e4A8GfLpNUDf9N2D4axEc4m+FpB9rgwgH83spK+JIUBSQZvfan1uCqBDch+BSAoiiFbSAXS/eBxaWGLjqYAOiRaPReQot1ofMGnvsMa0u5g420uuxLU6WlwBuu/9nqq9TAvFQdK3iqqioFMzO0r/5YAp5xFNkwr9Lib2D1xjyAGhJzDI9pNkBkBKKlZsKFdA5ID88cXMdBLd35RRlQeH7umfkQNSdtbCvAZ2JkAseZxyYguYpZdzM6P8TJKZAMmDV2bWsiVAyhmljZq4qqNeW+n/SoVUsal5HTqDBrZTh1W1CjD1caWARCGCmUql074NArqZ8UH6s5rDOxD/zMQZ4GsIEmJgP3VEeRQzJyzNLJmp1ESrdTNpkHL3ZGbt3JMDkhgvzOygmsw37AqYZZOVq+WAqeXpRHIN7AyAFAmGMzqadvLrdzPtHDvVzDMAkuoOzIzs0UofsM1B+Rf8Lw1mM1Ankww1rHQy92Z2XgPnmWByLVZVGuXQb1aGWv6kxeqc6CZmqksvD0XfmJJzv5KtmTid5hfRfm+dWfu3+z5SVWeu2EaZmZZOai3FbRo76QkxNdWlMyOMXIaJiwGz8fbJe9G1x6VtgzuRxIWj03+mefZg4tHHIdccKWUj3EYT9y4Eci+EoIvF4qbIqUYWqSqZAjfgdWzr7F3yeET7RH3kgRJY6vXo08YQY9M0FzFGwHAhPvZ6bHocBcy0iQNTDvcADSHcxhgfxsyJn/ljJ1UCMEzKQ1TRRxYDep5Dm6QQLiPKEYIJ584vZB3+CFAawjAnvV9VO1cFmJvNCzudOMAAAZJeUtESgdJ2SF4+q59/R4NkjoDY9YzJGtz14tL9fwB50PM48Yfe+AAAAABJRU5ErkJggg==',
-        className: 'lf-mindmap_addIcon',
-        callback: (data) => {
-          this.addChild(data)
-        },
-      },
-    ]
-    this.lf.setContextMenuByType(ROOT_NODE, menuItem)
-    this.lf.setContextMenuByType('mark:entity', menuItem)
-    this.lf.setContextMenuByType('mark:content', menuItem)
-    this.lf.setContextMenuByType('mark:content-option', menuItem)
-  }
-
-  private addChild(data) {
-    let type = 'mark:content-option'
-    switch (data.type) {
-      case ROOT_NODE:
-        type = 'mark:entity'
-        break
-      case 'mark:entity':
-        type = 'mark:content'
-        break
-      default:
-        break
-    }
-    const nodeModel = this.lf.addNode({
-      type,
-      x: data.x,
-      y: data.y,
-    })
-    this.lf.addEdge({
-      sourceNodeId: data.id,
-      targetNodeId: nodeModel.id,
-    })
-    this.renderTree()
-  }
-
-  private removeNode(node) {
-    if (node.children && node.children.length > 0) {
-      node.children.forEach((subNode) => {
-        this.removeNode(subNode)
-      })
-    }
-    this.lf.deleteNode(node.id)
-  }
-
-  private getGraphTreeData() {
-    const graphData = this.lf.getGraphRawData()
-    const nodesMap = new Map()
-    const rootNodes: string[] = []
-    let root: any = null
-    graphData.nodes.forEach((node) => {
-      const treeNode = {
-        id: node.id,
-        type: node.type,
-        properties: node.properties,
-        x: node.x,
-        y: node.y,
-        children: [],
-      }
-      nodesMap.set(node.id, treeNode)
-      if (node.type === ROOT_NODE) {
-        rootNodes.push(node.id)
-      }
-      if (node.type === FAKER_NODE) {
-        root = treeNode
-      }
-    })
-
-    graphData.edges.forEach((edge) => {
-      const node = nodesMap.get(edge.sourceNodeId)
-      node.children.push(nodesMap.get(edge.targetNodeId))
-    })
-    rootNodes.forEach((nodeId) => {
-      root.children.push(nodesMap.get(nodeId))
-    })
-    return {
-      root,
-      nodesMap,
-    }
-  }
-
-  private renderTree() {
-    let graphData = this.lf.getGraphRawData()
-    let tree = this.graphToTree(graphData)
-    tree = this.layoutTree(tree)
-    graphData = this.treeToGraph(tree)
-    this.lf.graphModel.graphDataToModel(graphData)
-  }
-
-  private graphToTree(graphData) {
-    let tree: any = null
-    const nodesMap = new Map()
-    const roots: any = []
-    graphData.nodes.forEach((node) => {
-      const treeNode = {
-        id: node.id,
-        type: node.type,
-        properties: node.proerties,
-        text: node.text,
-        children: [],
-      }
-      nodesMap.set(node.id, treeNode)
-      if (node.type === 'mark:root') {
-        roots.push(node)
-      }
-      if (node.type === FAKER_NODE) {
-        tree = treeNode
-      }
-    })
-    graphData.edges.forEach((edge) => {
-      const node = nodesMap.get(edge.sourceNodeId)
-      node.children.push(nodesMap.get(edge.targetNodeId))
-    })
-    if (tree && tree.children) {
-      tree.children = roots.map((root: any) => nodesMap.get(root.id))
-    }
-    return tree
-  }
-
-  /**
-   * 将树这种数据格式转换为图
-   */
-  private treeToGraph(rootNode) {
-    const nodes: NodeConfig[] = []
-    const edges: EdgeConfig[] = []
-
-    function getNode(current, parent: any = null) {
-      const node: NodeConfig = {
-        id: current.id,
-        x: current.x,
-        y: current.y,
-        type: current.type || current.data.type,
-        properties: current.properties || {},
-      }
-      nodes.push(node)
-      if (current.children) {
-        current.children.forEach((subNode) => {
-          getNode(subNode, node)
-        })
-      }
-      if (parent && parent.type !== FAKER_NODE) {
-        const edge: EdgeConfig = {
-          sourceNodeId: parent.id,
-          targetNodeId: node.id as string,
-          type: 'bezier',
-        }
-        edges.push(edge)
-      }
-    }
-
-    getNode(rootNode)
-    return {
-      nodes,
-      edges,
-    }
-  }
-
-  /**
-   * 由于树这种数据格式本身是没有坐标的
-   * 需要使用一些算法来将树转换为有坐标的树
-   */
-  layoutTree(tree) {
-    if (!tree || !tree.children || tree.children.length === 0) return tree
-    const NODE_SIZE = 40
-    const PEM = 20
-    tree.isRoot = true
-    const rootNode = Hierarchy.compactBox(tree, {
-      direction: 'LR',
-      getId(d) {
-        return d.id
-      },
-      getHeight(d) {
-        if (d.type === ROOT_NODE) {
-          return NODE_SIZE * 4
-        }
-        return NODE_SIZE
-      },
-      getWidth() {
-        return 200 + PEM * 1.6
-      },
-      getHGap() {
-        return PEM
-      },
-      getVGap() {
-        return PEM
-      },
-      getSubTreeSep(d) {
-        if (!d.children || !d.children.length) {
-          return 0
-        }
-        return PEM
-      },
-    })
-    // const { nodes, edges } = this.treeToGraph(rootNode);
-    // 将根节点位置平移回原位置
-    // 保证第一个根节点在画布位置不变
-    // 为什么取第一个child呢，这里是因为一张图上存在多个树的情况下
-    // 我们需要使用一个虚拟的节点(faker:root)作为所有树的根节点
-    // 这样在使用树布局算法的时候方便统一处理。
-    // 但是为了在视觉上保证图形不抖动，
-    // 我们需要把第一个真实的根节点位置保持不动
-    const x = tree.children[0].x || FIRST_ROOT_X
-    const y = tree.children[0].y || FIRST_ROOT_Y
-    const x1 = rootNode.children[0].x
-    const y1 = rootNode.children[0].y
-    const moveX = x - x1
-    const moveY = y - y1
-    const newTree = this.dfsTree(rootNode, (currentNode) => ({
-      id: currentNode.id,
-      x: currentNode.x + moveX,
-      y: currentNode.y + moveY,
-      type: currentNode.data.type,
-    }))
-    return newTree
-  }
-
-  /**
-   * 遍历树的每一项，已传入的回调方法重新构建一个新的树
-   */
-  dfsTree(tree, callback) {
-    const newTree = callback(tree)
-    if (tree.children && tree.children.length > 0) {
-      newTree.children = tree.children.map((treeNode) =>
-        this.dfsTree(treeNode, callback),
-      )
-    }
-    return newTree
-  }
-
-  /**
-   * 将传入的数据转换为logicflow格式的数据
-   */
-  adapterIn = (trees) => {
-    const tree = {
-      id: 'faker:root',
-      type: 'faker:root',
-      x: 0,
-      y: 0,
-      children: trees,
-    }
-    const newtree = this.layoutTree(tree)
-    const graphData = this.treeToGraph(newtree)
-    return graphData
-  }
-  /**
-   * 将logicflow格式的数据转换为mindmap需要的数据
-   */
-  adapterOut = (graphData) => this.graphToTree(graphData).children
-}
-
-export { MindMap }

package/src/mindmap/markContent.ts

@@ -1,81 +0,0 @@
-import { h, RectNode, RectNodeModel } from '@logicflow/core'
-
-class MarkContentModel extends RectNodeModel {
-  static extendKey = 'MarkContentModel'
-
-  constructor(data, graphModel) {
-    if (!data.text) {
-      data.text = {
-        x: data.x,
-        y: data.y + 15,
-        value: '',
-      }
-    }
-    super(data, graphModel)
-  }
-
-  setAttributes() {
-    this.height = 60
-    this.strokeWidth = 1
-  }
-}
-
-class MarkContentView extends RectNode {
-  static extendKey = 'MarkContent'
-
-  getLabelShape(): h.JSX.Element {
-    const { x, y, width, height } = this.props.model
-    const style = this.props.model.getNodeStyle()
-    return h(
-      'svg',
-      {
-        x: x - width / 2 + 5,
-        y: y - height / 2 + 5,
-        width: 25,
-        height: 25,
-        viewBox: '0 0 1274 1024',
-      },
-      h('path', {
-        fill: style.stroke,
-        d: 'M655.807326 287.35973m-223.989415 0a218.879 218.879 0 1 0 447.978829 0 218.879 218.879 0 1 0-447.978829 0ZM1039.955839 895.482975c-0.490184-212.177424-172.287821-384.030443-384.148513-384.030443-211.862739 0-383.660376 171.85302-384.15056 384.030443L1039.955839 895.482975z',
-      }),
-    )
-  }
-
-  getShape(): h.JSX.Element {
-    const { x, y, width, height, radius } = this.props.model
-    const style = this.props.model.getNodeStyle()
-    return h('g', {}, [
-      h('rect', {
-        ...style,
-        x: x - width / 2,
-        y: y - height / 2,
-        rx: radius,
-        ry: radius,
-        width,
-        height,
-      }),
-      this.getLabelShape(),
-      h(
-        'text',
-        {
-          fill: style.stroke,
-          fontSize: 12,
-          x: x - width / 2 + 30,
-          y: y - height / 2 + 20,
-          width: 50,
-          height: 25,
-        },
-        '二级主题',
-      ),
-    ])
-  }
-}
-
-const MarkContent = {
-  type: 'mark:content',
-  view: MarkContentView,
-  model: MarkContentModel,
-}
-
-export default MarkContent

package/src/mindmap/markContentOption.ts

@@ -1,81 +0,0 @@
-import { h, RectNode, RectNodeModel } from '@logicflow/core'
-
-class MarkContentOptionModel extends RectNodeModel {
-  static extendKey = 'MarkContentOptionModel'
-
-  constructor(data, graphModel) {
-    if (!data.text) {
-      data.text = {
-        x: data.x,
-        y: data.y + 15,
-        value: '',
-      }
-    }
-    super(data, graphModel)
-  }
-
-  setAttributes() {
-    this.height = 60
-    this.strokeWidth = 1
-  }
-}
-
-export class MarkContentOptionView extends RectNode {
-  static extendKey = 'MarkContentOption'
-
-  getLabelShape(): h.JSX.Element {
-    const { x, y, width, height } = this.props.model
-    const style = this.props.model.getNodeStyle()
-    return h(
-      'svg',
-      {
-        x: x - width / 2 + 5,
-        y: y - height / 2 + 5,
-        width: 25,
-        height: 25,
-        viewBox: '0 0 1274 1024',
-      },
-      h('path', {
-        fill: style.stroke,
-        d: 'M655.807326 287.35973m-223.989415 0a218.879 218.879 0 1 0 447.978829 0 218.879 218.879 0 1 0-447.978829 0ZM1039.955839 895.482975c-0.490184-212.177424-172.287821-384.030443-384.148513-384.030443-211.862739 0-383.660376 171.85302-384.15056 384.030443L1039.955839 895.482975z',
-      }),
-    )
-  }
-
-  getShape(): h.JSX.Element {
-    const { x, y, width, height, radius } = this.props.model
-    const style = this.props.model.getNodeStyle()
-    return h('g', {}, [
-      h('rect', {
-        x: x - width / 2,
-        y: y - height / 2,
-        ...style,
-        rx: radius,
-        ry: radius,
-        width,
-        height,
-      }),
-      this.getLabelShape(),
-      h(
-        'text',
-        {
-          fill: style.stroke,
-          fontSize: 12,
-          x: x - width / 2 + 30,
-          y: y - height / 2 + 20,
-          width: 50,
-          height: 25,
-        },
-        '主题内容',
-      ),
-    ])
-  }
-}
-
-const MarkContentOption = {
-  type: 'mark:content-option',
-  view: MarkContentOptionView,
-  model: MarkContentOptionModel,
-}
-
-export default MarkContentOption

package/src/mindmap/markEntity.ts

@@ -1,82 +0,0 @@
-import { h, RectNode, RectNodeModel } from '@logicflow/core'
-
-class MarkEntityModel extends RectNodeModel {
-  static extendKey = 'MarkEntityModel'
-
-  constructor(data, graphModel) {
-    if (!data.text) {
-      data.text = {
-        x: data.x,
-        y: data.y + 15,
-        value: '',
-      }
-    }
-    super(data, graphModel)
-  }
-
-  setAttributes() {
-    this.height = 60
-    this.strokeWidth = 1
-  }
-}
-
-class MarkEntityView extends RectNode {
-  static extendKey = 'MarkEntity'
-
-  getLabelShape(): h.JSX.Element {
-    const { x, y, width, height } = this.props.model
-    const style = this.props.model.getNodeStyle()
-    return h(
-      'svg',
-      {
-        x: x - width / 2 + 5,
-        y: y - height / 2 + 5,
-        width: 25,
-        height: 25,
-        viewBox: '0 0 1274 1024',
-      },
-      h('path', {
-        fill: style.stroke,
-        d: 'M655.807326 287.35973m-223.989415 0a218.879 218.879 0 1 0 447.978829 0 218.879 218.879 0 1 0-447.978829 0ZM1039.955839 895.482975c-0.490184-212.177424-172.287821-384.030443-384.148513-384.030443-211.862739 0-383.660376 171.85302-384.15056 384.030443L1039.955839 895.482975z',
-      }),
-    )
-  }
-
-  getShape(): h.JSX.Element {
-    const { x, y, width, height, radius } = this.props.model
-    const style = this.props.model.getNodeStyle()
-    // todo: 将basic-shape对外暴露，在这里可以直接用。现在纯手写有点麻烦。
-    return h('g', {}, [
-      h('rect', {
-        x: x - width / 2,
-        y: y - height / 2,
-        rx: radius,
-        ry: radius,
-        width,
-        height,
-        ...style,
-      }),
-      this.getLabelShape(),
-      h(
-        'text',
-        {
-          fill: style.stroke,
-          fontSize: 12,
-          x: x - width / 2 + 30,
-          y: y - height / 2 + 20,
-          width: 50,
-          height: 25,
-        },
-        '一级主题',
-      ),
-    ])
-  }
-}
-
-const MarkEntity = {
-  type: 'mark:entity',
-  view: MarkEntityView,
-  model: MarkEntityModel,
-}
-
-export default MarkEntity

package/src/mindmap/markRoot.ts

@@ -1,83 +0,0 @@
-import { h, RectNode, RectNodeModel } from '@logicflow/core'
-
-class MarkRootModel extends RectNodeModel {
-  static extendKey = 'MarkRootModel'
-
-  constructor(data, graphModel) {
-    if (!data.text) {
-      data.text = {
-        x: data.x,
-        y: data.y + 15,
-        value: '',
-      }
-    }
-    super(data, graphModel)
-  }
-
-  setAttributes() {
-    this.height = 60
-    this.strokeWidth = 1
-    this.stroke = '#646764'
-  }
-}
-
-class MarkRootView extends RectNode {
-  static extendKey = 'MarkRoot'
-
-  getLabelShape(): h.JSX.Element {
-    const { x, y, width, height } = this.props.model
-    const style = this.props.model.getNodeStyle()
-    return h(
-      'svg',
-      {
-        x: x - width / 2 + 5,
-        y: y - height / 2 + 5,
-        width: 25,
-        height: 25,
-        viewBox: '0 0 1274 1024',
-      },
-      h('path', {
-        fill: style.stroke,
-        d: 'M655.807326 287.35973m-223.989415 0a218.879 218.879 0 1 0 447.978829 0 218.879 218.879 0 1 0-447.978829 0ZM1039.955839 895.482975c-0.490184-212.177424-172.287821-384.030443-384.148513-384.030443-211.862739 0-383.660376 171.85302-384.15056 384.030443L1039.955839 895.482975z',
-      }),
-    )
-  }
-
-  getShape(): h.JSX.Element {
-    const style = this.props.model.getNodeStyle()
-    const { x, y, width, height, radius } = this.props.model
-    // todo: 将basic-shape对外暴露，在这里可以直接用。现在纯手写有点麻烦。
-    return h('g', {}, [
-      h('rect', {
-        x: x - width / 2,
-        y: y - height / 2,
-        rx: radius,
-        ry: radius,
-        width,
-        height,
-        ...style,
-      }),
-      this.getLabelShape(),
-      h(
-        'text',
-        {
-          fill: style.stroke,
-          fontSize: 12,
-          x: x - width / 2 + 30,
-          y: y - height / 2 + 20,
-          width: 50,
-          height: 25,
-        },
-        '中心主题',
-      ),
-    ])
-  }
-}
-
-const MarkRoot = {
-  type: 'mark:root',
-  view: MarkRootView,
-  model: MarkRootModel,
-}
-
-export default MarkRoot

package/src/mindmap/theme.ts

@@ -1,11 +0,0 @@
-export const theme = {
-  rect: {
-    // outlineColor: 'transparent'
-    stroke: '#187DFF',
-  },
-  bezier: {
-    offset: 100,
-    strokeWidth: 1,
-    stroke: '#a4a5a6',
-  },
-}

package/src/rect-label-node/RectLabelNodeView.ts

@@ -1,33 +0,0 @@
-import { RectNode, h } from '@logicflow/core'
-
-export class RectLabelNodeView extends RectNode {
-  getLabelShape(): h.JSX.Element {
-    const { x, y, width, height, properties } = this.props.model
-
-    return h(
-      'text',
-      {
-        x: x - width / 2 + 5,
-        y: y - height / 2 + 16,
-        fontSize: 12,
-        fill: 'blue',
-      },
-      properties.moreText as string,
-    )
-  }
-
-  getShape(): h.JSX.Element {
-    const { x, y, width, height } = this.props.model
-    const style = this.props.model.getNodeStyle()
-    // todo: 将basic-shape对外暴露，在这里可以直接用。现在纯手写有点麻烦。
-    return h('g', {}, [
-      h('rect', {
-        ...style,
-        fill: '#FFFFFF',
-        x: x - width / 2,
-        y: y - height / 2,
-      }),
-      this.getLabelShape(),
-    ])
-  }
-}