@logicflow/extension 2.2.0-alpha.7 → 2.2.1

package/src/tools/proximity-connect/index.ts

@@ -1,435 +0,0 @@
-import LogicFlow, {
-  Model,
-  twoPointDistance,
-  BaseNodeModel,
-  BaseEdgeModel,
-  isInNode,
-} from '@logicflow/core'
-import { assign, isEmpty, isEqual, isNil, isFinite, reduce } from 'lodash-es'
-
-import AnchorConfig = Model.AnchorConfig
-import Point = LogicFlow.Point
-
-export type ProximityConnectProps = {
-  enable: boolean
-  distance: number
-  reverseDirection: boolean
-  virtualEdgeStyle: Record<string, unknown>
-  /**
-   * proximityConnect 类型:
-   * - 'node': 节点-节点连接
-   * - 'anchor': 锚点-锚点连接
-   * - 'default': 节点-锚点连接
-   */
-  type: 'node' | 'anchor' | 'default'
-}
-
-export class ProximityConnect {
-  static pluginName = 'proximityConnect'
-  enable: boolean = true
-  type: 'node' | 'anchor' | 'default' = 'default'
-  lf: LogicFlow // lf实例
-  closestNode?: BaseNodeModel // 当前距离最近的节点
-  currentDistance: number = Infinity // 当前间距
-  thresholdDistance: number = 100 // 节点-节点连接距离阈值
-
-  currentNode?: BaseNodeModel // 当前操作节点
-  reverseDirection: boolean = false // 节点-节点连线方向，默认是拖拽节点连向最近节点
-
-  currentAnchor?: AnchorConfig // 当前连线锚点
-  closestAnchor?: AnchorConfig // 当前距离最近锚点
-  virtualEdge?: BaseEdgeModel // 虚拟边
-  virtualEdgeStyle: Record<string, unknown> = {
-    strokeDasharray: '10,10',
-    stroke: '#acacac',
-  } // 虚拟边样式
-
-  constructor({
-    lf,
-    options,
-  }: LogicFlow.IExtensionProps & { options: ProximityConnectProps }) {
-    this.lf = lf
-    assign(this, options)
-  }
-
-  render() {
-    this.addEventListeners()
-  }
-
-  // 增加节点拖拽和锚点拖拽的事件监听
-  addEventListeners() {
-    // 节点开始拖拽事件
-    this.lf.graphModel.eventCenter.on('node:dragstart', ({ data }) => {
-      if (this.type === 'anchor') return
-      if (!this.enable) return
-      const { graphModel } = this.lf
-      const { id } = data
-      this.currentNode = graphModel.getNodeModelById(id)
-    })
-    // 节点拖拽事件
-    this.lf.graphModel.eventCenter.on('node:drag', () => {
-      if (this.type === 'anchor') return
-      this.handleNodeDrag()
-    })
-    // 锚点开始拖拽事件
-    this.lf.graphModel.eventCenter.on(
-      'anchor:dragstart',
-      ({ data, nodeModel }) => {
-        if (!this.enable || this.type === 'node') return
-        this.currentNode = nodeModel
-        this.currentAnchor = data
-      },
-    )
-    // 锚点拖拽事件
-    this.lf.graphModel.eventCenter.on(
-      'anchor:drag',
-      ({ e: { clientX, clientY } }) => {
-        if (!this.enable || this.type === 'node') return
-        this.handleAnchorDrag(clientX, clientY)
-      },
-    )
-    // 节点、锚点拖拽结束事件
-    this.lf.graphModel.eventCenter.on('node:drop', () => {
-      if (!this.enable || this.type === 'anchor') return
-      this.handleDrop()
-    })
-    // 锚点拖拽需要单独判断一下当前拖拽终点是否在某个锚点上，如果是，就不触发插件的连线，以免出现创建了两条连线的问题，表现见 issue 2140
-    this.lf.graphModel.eventCenter.on('anchor:dragend', ({ e, edgeModel }) => {
-      if (!this.enable || this.type === 'node') return
-      const {
-        canvasOverlayPosition: { x: eventX, y: eventY },
-      } = this.lf.graphModel.getPointByClient({
-        x: e.clientX,
-        y: e.clientY,
-      })
-      if (edgeModel && this.virtualEdge) {
-        const { id: virtualEdgeId } = this.virtualEdge as BaseEdgeModel
-        const { targetNodeId } = edgeModel as BaseEdgeModel
-        const targetNodeModel =
-          this.lf.graphModel.getNodeModelById(targetNodeId)
-        if (
-          targetNodeModel &&
-          isInNode({ x: eventX, y: eventY }, targetNodeModel, 10)
-        ) {
-          // 如果当前拖拽点在锚点上，就不触发插件的连线
-          this.lf.deleteEdge(virtualEdgeId)
-          return
-        }
-      }
-
-      this.handleDrop()
-    })
-  }
-
-  // 节点拖拽动作
-  handleNodeDrag() {
-    /**
-     * 主要做几件事情
-     * 判断当前是否有虚拟连线，有的话判断两点距离是否超过阈值，超过的话删除连线
-     * 遍历画布上的所有节点，找到距离最近的节点，获取其所有锚点数据
-     * 判断每个锚点与当前选中节点的所有锚点之间的距离，找到路路径最短的两个点时，把当前节点、当前锚点当前最短记录记录下来，作为当前最近数据
-     * 判断当前最短距离是否小于阈值
-     * 如果是 就创建虚拟边
-     */
-    const { nodes } = this.lf.graphModel
-
-    if (!isNil(this.virtualEdge)) {
-      const { startPoint, endPoint, id } = this.virtualEdge
-      const curDistance = twoPointDistance(startPoint, endPoint)
-      if (curDistance > this.thresholdDistance) {
-        this.lf.deleteEdge(id)
-        this.virtualEdge = undefined
-      }
-    }
-    if (this.currentNode) {
-      this.findClosestAnchorOfNode(this.currentNode, nodes)
-    }
-    if (this.currentDistance < this.thresholdDistance) {
-      this.addVirtualEdge()
-    }
-  }
-
-  // 节点放下
-  handleDrop() {
-    this.addActualEdge()
-    this.resetData()
-  }
-
-  // 锚点拖拽动作
-  handleAnchorDrag(clientX: number, clientY: number) {
-    // 获取当前点在画布上的位置
-    const { graphModel } = this.lf
-    const {
-      canvasOverlayPosition: { x, y },
-    } = graphModel.getPointByClient({
-      x: clientX,
-      y: clientY,
-    })
-    if (isNil(x) || isNil(y)) return
-    const currentPoint: Point = { x, y }
-    const { nodes } = graphModel
-    // 判断当前是否有虚拟连线，有的话判断两点距离是否超过阈值，超过的话删除连线
-    if (!isNil(this.virtualEdge)) {
-      const { endPoint, id } = this.virtualEdge
-      const curDistance = twoPointDistance(currentPoint, endPoint)
-      if (curDistance > this.thresholdDistance) {
-        this.lf.deleteEdge(id)
-        this.virtualEdge = undefined
-      }
-    }
-    // 记录最近点的信息
-    this.findClosestAnchorOfAnchor(currentPoint, nodes)
-    if (this.currentDistance < this.thresholdDistance) {
-      this.addVirtualEdge()
-    }
-  }
-
-  // 节点→节点 找最近的节点和锚点
-  findClosestAnchorOfNode(
-    draggingNode: BaseNodeModel,
-    allNodes: BaseNodeModel[],
-  ) {
-    if (isNil(draggingNode) || isEmpty(draggingNode)) return
-    const { anchors: draggingAnchors = [], id } = draggingNode
-    let distance
-    let preConnectAnchor
-    let closestAnchor
-    let closestNode
-    allNodes.forEach((node) => {
-      if (isEqual(node.id, id)) return
-      const { anchors = [] } = node
-      // 遍历所有节点，找离当前拖拽节点最近的可连接节点和锚点
-      anchors.forEach((anchor) => {
-        // 找距离最近的两个锚点
-        draggingAnchors.forEach((draggingAnchor) => {
-          // 判断拖拽点锚点和当前锚点是否可连线
-          const anchorAllowConnect = this.anchorAllowConnect(
-            node,
-            anchor,
-            draggingAnchor,
-          )
-          if (!anchorAllowConnect) return
-          // 获取两个锚点之间的距离
-          const curDistance = twoPointDistance(draggingAnchor, anchor)
-          if (!distance || curDistance < distance) {
-            // 如果是第一条数据，或者当前这对锚点距离更短，就替换数据
-            distance = curDistance
-            preConnectAnchor = draggingAnchor
-            closestAnchor = anchor
-            closestNode = node
-          }
-        })
-      })
-    })
-    this.currentDistance = distance
-    this.currentAnchor = preConnectAnchor
-    this.closestAnchor = closestAnchor
-    this.closestNode = closestNode
-  }
-
-  // 锚点→节点 找最近的锚点
-  findClosestAnchorOfAnchor(draggingPoint: Point, allNodes: BaseNodeModel[]) {
-    if (isNil(draggingPoint)) return
-    let distance
-    let closestAnchor
-    let closestNode
-    const { currentNode, currentAnchor } = this
-    allNodes.forEach((node) => {
-      if (!currentNode) return
-      const { anchors = [] } = node
-      // 遍历所有节点，找离当前拖拽节点最近的可连接节点和锚点
-      anchors.forEach((anchor) => {
-        if (isEqual(this.currentAnchor?.id, anchor.id)) return
-        // 判断拖拽点锚点和当前锚点是否可连线
-        const anchorAllowConnect = this.anchorAllowConnect(
-          node,
-          anchor,
-          currentAnchor,
-        )
-        if (!anchorAllowConnect) return
-        // 获取两个锚点之间的距离
-        const curDistance = twoPointDistance(draggingPoint, anchor)
-        if (!distance || curDistance < distance) {
-          // 如果是第一条数据，或者当前这对锚点距离更短，就替换数据
-          distance = curDistance
-          closestAnchor = anchor
-          closestNode = node
-        }
-      })
-    })
-    this.currentDistance = distance
-    this.closestAnchor = closestAnchor
-    this.closestNode = closestNode
-  }
-
-  // 判断锚点是否允许连线
-  anchorAllowConnect(
-    node: BaseNodeModel,
-    anchor: AnchorConfig,
-    draggingAnchor: AnchorConfig | undefined,
-  ) {
-    const { currentNode } = this
-    if (!currentNode) return
-    // 判断起点是否可连接
-    const { isAllPass: sourceValidResult } = this.reverseDirection
-      ? node.isAllowConnectedAsSource(currentNode, anchor, draggingAnchor)
-      : currentNode.isAllowConnectedAsSource(node, draggingAnchor, anchor)
-    // 判断终点是否可连接
-    const { isAllPass: targetValidResult } = this.reverseDirection
-      ? currentNode.isAllowConnectedAsTarget(node, anchor, draggingAnchor)
-      : node.isAllowConnectedAsTarget(currentNode, draggingAnchor, anchor)
-    return sourceValidResult && targetValidResult
-  }
-
-  // 判断是否应该删除虚拟边
-  sameEdgeIsExist(edge: BaseEdgeModel) {
-    if (
-      isNil(this.closestNode) ||
-      isNil(this.currentNode) ||
-      isNil(this.closestAnchor) ||
-      isNil(this.currentAnchor)
-    )
-      return false
-    if (isNil(edge)) return false
-    const {
-      closestNode: { id: closestNodeId },
-      currentNode: { id: currentNodeId },
-      closestAnchor: { id: closestAnchorId },
-      currentAnchor: { id: currentAnchorId },
-      reverseDirection,
-    } = this
-    const { sourceNodeId, targetNodeId, sourceAnchorId, targetAnchorId } = edge
-    const isExist = reverseDirection
-      ? isEqual(closestNodeId, sourceNodeId) &&
-        isEqual(currentNodeId, targetNodeId) &&
-        isEqual(closestAnchorId, sourceAnchorId) &&
-        isEqual(currentAnchorId, targetAnchorId)
-      : isEqual(currentNodeId, sourceNodeId) &&
-        isEqual(closestNodeId, targetNodeId) &&
-        isEqual(currentAnchorId, sourceAnchorId) &&
-        isEqual(closestAnchorId, targetAnchorId)
-    return isExist
-  }
-
-  // 增加虚拟边
-  addVirtualEdge() {
-    const { edges } = this.lf.graphModel
-    // 判断当前是否已存在一条同样配置的真实边
-    const actualEdgeIsExist = reduce(
-      edges,
-      (result, edge) => {
-        if (edge.virtual) return result
-        return result || this.sameEdgeIsExist(edge)
-      },
-      false,
-    )
-    // 如果有真实边就不重复创建边了
-    if (actualEdgeIsExist) return
-
-    // 判断当前是否有虚拟边
-    // 如果当前已有虚拟边，判断当前的节点和锚点信息与虚拟边的信息是否一致
-    if (!isNil(this.virtualEdge)) {
-      const {
-        virtualEdge: { id: edgeId },
-      } = this
-      // 信息一致不做处理
-      if (this.sameEdgeIsExist(this.virtualEdge)) return
-      // 不一致就删除老边
-      this.lf.deleteEdge(edgeId)
-    }
-
-    // 开始创建虚拟边
-    const {
-      reverseDirection,
-      currentNode,
-      closestNode,
-      currentAnchor,
-      closestAnchor,
-    } = this
-    if (isEmpty(currentNode) || isEmpty(closestNode)) return
-    const properties = {
-      style: this.virtualEdgeStyle,
-    }
-    this.virtualEdge = this.lf.addEdge(
-      reverseDirection
-        ? {
-            sourceNodeId: closestNode?.id,
-            targetNodeId: currentNode?.id,
-            sourceAnchorId: closestAnchor?.id,
-            targetAnchorId: currentAnchor?.id,
-            properties,
-          }
-        : {
-            sourceNodeId: currentNode?.id,
-            targetNodeId: closestNode?.id,
-            sourceAnchorId: currentAnchor?.id,
-            targetAnchorId: closestAnchor?.id,
-            properties,
-          },
-    )
-    this.virtualEdge.virtual = true
-  }
-
-  // 增加实体边
-  addActualEdge() {
-    if (isNil(this.virtualEdge)) return
-    const {
-      type,
-      sourceNodeId,
-      targetNodeId,
-      sourceAnchorId,
-      targetAnchorId,
-      startPoint,
-      endPoint,
-      pointsList,
-    } = this.virtualEdge
-    this.lf.deleteEdge(this.virtualEdge.id)
-    this.lf.addEdge({
-      type,
-      sourceNodeId,
-      targetNodeId,
-      sourceAnchorId,
-      targetAnchorId,
-      startPoint,
-      endPoint,
-      pointsList,
-    })
-  }
-
-  // 设置虚拟边样式
-  public setVirtualEdgeStyle(value: Record<string, unknown>) {
-    this.virtualEdgeStyle = {
-      ...this.virtualEdgeStyle,
-      ...value,
-    }
-  }
-
-  // 设置连线阈值
-  public setThresholdDistance(distance: number) {
-    if (!isFinite(distance)) return
-    this.thresholdDistance = distance
-  }
-
-  // 设置连线方向
-  public setReverseDirection(value: boolean) {
-    this.reverseDirection = value
-  }
-
-  // 设置插件开关状态
-  public setEnable(enable: boolean) {
-    this.enable = enable
-    if (!enable) {
-      this.resetData()
-    }
-  }
-
-  // 重置数据
-  resetData() {
-    this.closestNode = undefined
-    this.currentDistance = Infinity
-    this.currentNode = undefined
-    this.currentAnchor = undefined
-    this.closestAnchor = undefined
-    this.virtualEdge = undefined
-  }
-}

package/src/tools/snapshot/README.md

@@ -1,145 +0,0 @@
-# 导出 Snapshot
-
-我们经常需要将画布内容通过图片的形式导出来，我们提供了一个独立的插件包 `Snapshot` 来使用这个功能。
-
-## 使用
-
-### 1. 注册
-
-两种注册方式，全局注册和局部注册，区别是全局注册每一个`lf`实例都可以使用。
-
-```tsx | pure
-import LogicFlow from "@logicflow/core";
-import { Snapshot } from "@logicflow/extension";
-
-// 全局注册
-LogicFlow.use(Snapshot);
-
-// 局部注册
-const lf = new LogicFlow({
-  ...config,
-  plugins: [Snapshot]
-});
-
-```
-
-### 2. 使用
-
-注册后，`lf`实例身上将被挂载`getSnapshot()`方法，通过`lf.getSnapshot()`方法调用。
-
-```tsx | pure
-
-// 可以使用任意方式触发，然后将绘制的图形下载到本地磁盘上
-document.getElementById("button").addEventListener("click", () => {
-  lf.getSnapshot();
-
-  // 或者 1.1.13版本
-  // lf.extension.snapshot.getSnapshot()
-});
-
-```
-
-值得一提的是：通过此插件截取下载的图片不会因为偏移、缩放受到影响。
-
-## 自定义设置 css
-
-当自定义元素在导出图片时需要额外添加 css 样式时，可以用如下方式实现：
-
-为了保持流程图生成的图片与画布上效果一致，`snapshot`插件默认会将当前页面所有的 `css` 规则都加载到导出图片中,
-但是可能会因为 css 文件跨域引起报错，参考 issue575。可以修改useGlobalRules来禁止加载所有 css
-规则，然后通过`customCssRules`属性来自定义增加css样式。
-
-```tsx
-
-// 默认开启css样式
-lf.extension.snapshot.useGlobalRules = true
-// 不会覆盖css样式，会叠加，customCssRules优先级高
-lf.extension.snapshot.customCssRules = `
-    .uml-wrapper {
-      line-height: 1.2;
-      text-align: center;
-      color: blue;
-    }
-  `
-
-```
-
-## API
-
-### lf.getSnapshot(...)
-
-导出图片。
-
-```ts
-
-const getSnapshot = (fileName?: string, toImageOptions?: ToImageOptions): Promise<void> => {}
-
-```
-
-`fileName` 为文件名称，不填为默认为`logic-flow.当前时间戳`，`ToImageOptions` 描述如下：
-
-| 属性名             | 类型      | 默认值 | 必填 | 描述                                                                                     |
-|-----------------|---------|-----|----|----------------------------------------------------------------------------------------|
-| fileType        | string  | png |    | 图片类型: 默认不填是png 还可以设置有webp、gif、jpeg、svg                                                 |
-| width           | number  | -   |    | 自定义导出图片的宽度，不设置即可，设置可能会拉伸图形                                                             |
-| height          | number  | -   |    | 自定义导出图片的宽度，不设置即可，设置可能会拉伸图形                                                             |
-| backgroundColor | string  | -   |    | 图片背景，不设置背景默认透明                                                                         |
-| quality         | number  | -   |    | 图片质量，在指定图片格式为 jpeg 或 webp 的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他不合法参数会被忽略 |
-| padding         | number  | 40  |    | 图片内边距: 元素内容所在区之外空白空间，不设置默认有40的内边距                                                      |
-| partial         | boolean | -   |    | 导出时是否开启局部渲染，false：将导出画布上所有的元素，true：只导出画面区域内的可见元素，不设置默认为lf实例身上partial值                  |
-
-注意：
-
-- `svg`目前暂不支持`width`，`height`， `backgroundColor`， `padding` 属性。
-- 自定义宽高后，可能会拉伸图形，这时候`padding`也会被拉伸导致不准确。
-
-### lf.getSnapshotBlob(...)
-
-`snapshot`
-除了支持图片类型导出，还支持下载<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Blob" target="_blank">
-Blob文件对象 </a>
-和 <a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Base64" target="_blank">
-Base64文本编码 </a>
-
-获取`Blob`对象。
-
-```ts
-
-const getSnapshotBlob = async (
-  backgroundColor?: string,
-  fileType?: string
-): Promise<SnapshotResponse> => {}
-
-// example
-const { data: blob } = await lf.getSnapshotBlob()
-console.log(blob)
-
-```
-
-`backgroundColor`: 背景，不填默认为透明。
-
-`fileType`: 文件类型，不填默认为png。
-
-`SnapshotResponse`: 返回对象。
-
-```tsx | pure
-
-export type SnapshotResponse = {
-  data: Blob | string // Blob对象 或 Base64文本编码文本
-  width: number // 图片宽度
-  height: number // 图片高度
-}
-
-```
-
-### lf.getSnapshotBase64(...)
-
-获取`Base64文本编码`文本。
-
-```ts
-
-async getSnapshotBase64(backgroundColor?: string, fileType?: string) : Promise<SnapshotResponse>
-
-// example
-const { data : base64 } = await lf.getSnapshotBlob()
-console.log(base64)