@logicflow/extension 2.0.0 → 2.0.1

package/src/bpmn-adapter/index.ts

@@ -429,7 +429,7 @@ function getLfEdges(value, bpmnEdges) {
 
 function getEdgeConfig(edgeValue, processValue): EdgeConfig {
   let text
-  const textVal = processValue['-name']
+  const textVal = `${processValue['-name']}`
   if (textVal) {
     const textBounds = edgeValue['bpmndi:BPMNLabel']['dc:Bounds']
     // 如果边文本换行，则其偏移量应该是最长一行的位置

package/src/bpmn-elements-adapter/index.ts

@@ -923,7 +923,7 @@ function getLfEdges(value: any, bpmnEdges: any) {
 
 function getEdgeConfig(edgeValue: any, processValue: any) {
   let text
-  const textVal = processValue['-name']
+  const textVal = `${processValue['-name']}`
   if (textVal) {
     const textBounds = edgeValue['bpmndi:BPMNLabel']['dc:Bounds']
     // 如果边文本换行，则其偏移量应该是最长一行的位置

package/src/components/highlight/index.ts

@@ -14,6 +14,7 @@ const getNodePath = (node, lf: LogicFlow) => {
   const outgoingPaths: any[] = []
 
   const getIncomingPaths = (curNode, path, prevNode?: BaseNodeModel) => {
+    if (!curNode) return
     if (prevNode) {
       // * 上个节点和当前节点中间边
       path.unshift(
@@ -48,6 +49,7 @@ const getNodePath = (node, lf: LogicFlow) => {
 
   // * 同上逻辑
   const getOutgoingPaths = (curNode, path, prevNode?: BaseNodeModel) => {
+    if (!curNode) return
     if (prevNode) {
       path.push(
         ...lf

package/src/components/selection-select/index.ts

@@ -165,9 +165,13 @@ export class SelectionSelect {
         this.isWholeNode,
         true,
       )
-      const { dynamicGroup } = this.lf.graphModel
+      const { dynamicGroup, group } = this.lf.graphModel
       elements.forEach((element) => {
-        // 如果节点属于分组，则不不选中节点
+        // 如果节点属于分组，则不选中节点，此处兼容旧版 Group 插件
+        if (!group || !group.getNodeGroup(element.id)) {
+          this.lf.selectElementById(element.id, true)
+        }
+        // 如果节点属于动态分组，则不不选中节点
         if (!dynamicGroup || !dynamicGroup.getGroupByNodeId(element.id)) {
           this.lf.selectElementById(element.id, true)
         }

package/src/dynamic-group/index.ts

@@ -506,8 +506,8 @@ export class DynamicGroup {
 
       if (groupModel && groupModel.isRestrict) {
         // 如果移动的节点存在与分组中，且这个分组禁止子节点移出去
-        const bounds = model.getBounds()
-        return isAllowMoveTo(bounds, groupModel)
+        const groupBounds = groupModel.getBounds()
+        return isAllowMoveTo(groupBounds, model, deltaX, deltaY)
       }
 
       return true
@@ -523,7 +523,6 @@ export class DynamicGroup {
     lf.on('graph:updated', ({ data }) => console.log('data', data))
 
     lf.on('group:add-node', ({ data }) => console.log('group:add-node', data))
-    // lf.eventCenter.on('node:resize', this.onGroupResize)
 
     // https://github.com/didi/LogicFlow/issues/1346
     // 重写 addElements() 方法，在 addElements() 原有基础上增加对 group 内部所有 nodes 和 edges 的复制功能

package/src/dynamic-group/model.ts

@@ -95,12 +95,13 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
   @observable groupAddable: boolean = false
   // 缩放或旋转容器时，是否缩放或旋转组内节点
   @observable transformWidthContainer: boolean = true
-  childrenLastCollapseStateDict: Record<string, boolean> = {}
+  childrenLastCollapseStateDict: Map<string, boolean> = new Map()
 
   constructor(data: NodeConfig<IGroupNodeProperties>, graphModel: GraphModel) {
     super(data, graphModel)
-    this.initNodeData(data)
+    this.childrenLastCollapseStateDict = new Map()
 
+    this.initNodeData(data)
     this.setAttributes()
   }
 
@@ -118,6 +119,7 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
       isCollapsed,
       zIndex,
       isRestrict,
+      autoResize,
       autoToFront,
     } = data.properties ?? {}
 
@@ -137,6 +139,7 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
     this.collapsedHeight = collapsedHeight ?? DEFAULT_GROUP_COLLAPSE_HEIGHT
 
     this.isRestrict = isRestrict ?? false
+    this.autoResize = autoResize ?? false
     this.collapsible = collapsible ?? true
     this.autoToFront = autoToFront ?? false
 
@@ -217,11 +220,12 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
 
     // step 2
     let allRelatedEdges = [...this.incoming.edges, ...this.outgoing.edges]
-    console.log('this -->>', this)
-    console.log('this.children -->>', this.children)
     const childrenArr = Array.from(this.children)
+
     forEach(childrenArr, (elementId) => {
-      const model = this.graphModel.getElement(elementId)
+      // FIX: 当使用 graphModel.getElement 获取元素时，会因为
+      // const model = this.graphModel.getElement(elementId)
+      const model = this.graphModel.elementsModelMap.get(elementId)
 
       if (model) {
         // TODO: ??? 普通节点有这个属性吗？确认这个代码的意义
@@ -242,7 +246,7 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
           if (!collapse) {
             // 当 parent 准备展开时，children 的值应该恢复到折叠前的状态
             const lastCollapseStatus =
-              this.childrenLastCollapseStateDict[elementId]
+              this.childrenLastCollapseStateDict?.get(elementId)
             if (
               lastCollapseStatus !== undefined &&
               lastCollapseStatus !== model.isCollapsed
@@ -255,7 +259,7 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
           }
         }
 
-        this.childrenLastCollapseStateDict[elementId] = !!collapseStatus
+        this.childrenLastCollapseStateDict?.set(elementId, !!collapseStatus)
         model.visible = !collapse
 
         // 判断，如果是节点时，才去读取节点的 incoming 和 outgoing
@@ -360,13 +364,15 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
         graphModel.deleteEdgeById(edge.id)
       }
       // 考虑目标节点也属于分组的情况
-      let targetNodeGroup = graphModel.group.getGroupByNodeId(targetNodeId)
+      let targetNodeGroup =
+        graphModel.dynamicGroup.getGroupByNodeId(targetNodeId)
       if (!targetNodeGroup) {
         targetNodeGroup = graphModel.getNodeModelById(targetNodeId)
       }
 
       // 考虑源节点也属于分组的情况
-      let sourceNodeGroup = graphModel.group.getGroupByNodeId(sourceNodeId)
+      let sourceNodeGroup =
+        graphModel.dynamicGroup.getGroupByNodeId(sourceNodeId)
       if (!sourceNodeGroup) {
         sourceNodeGroup = graphModel.getNodeModelById(sourceNodeId)
       }

package/src/dynamic-group/node.ts

@@ -1,8 +1,11 @@
-import { GraphModel, h, RectNode } from '@logicflow/core'
+import LogicFlow, { GraphModel, h, RectNode } from '@logicflow/core'
 import { forEach } from 'lodash-es'
 import { DynamicGroupNodeModel } from './model'
 import { handleResize } from '@logicflow/core/es/util/resize'
 
+import Position = LogicFlow.Position
+import { rotatePointAroundCenter } from '../tools/label/utils'
+
 export interface IDynamicGroupNodeProps {
   model: DynamicGroupNodeModel
   graphModel: GraphModel
@@ -17,12 +20,32 @@ export class DynamicGroupNode<
     const { model: curGroup, graphModel } = this.props
     const { eventCenter } = graphModel
 
+    const childrenPositionMap: Map<string, Position> = new Map()
+
     // 在 group 旋转时，对组内的所有子节点也进行对应的旋转计算
     eventCenter.on('node:rotate', ({ model }) => {
+      // DONE: 目前操作是对分组内节点以节点中心旋转节点本身，而按照正常逻辑，应该是以分组中心，旋转节点（跟 Label 旋转操作逻辑一致）
       if (model.id === curGroup.id) {
+        const center = { x: curGroup.x, y: curGroup.y }
         forEach(Array.from(curGroup.children), (childId) => {
           const child = graphModel.getNodeModelById(childId)
+
           if (child) {
+            let point: Position = { x: child.x, y: child.y }
+            if (childrenPositionMap.has(child.id)) {
+              point = childrenPositionMap.get(child.id)!
+            } else {
+              childrenPositionMap.set(child.id, point)
+            }
+
+            // 弧度转角度
+            let theta = model.rotate * (180 / Math.PI)
+            if (theta < 0) theta += 360
+            const radian = theta * (Math.PI / 180)
+
+            const newPoint = rotatePointAroundCenter(point, center, radian)
+
+            child.moveTo(newPoint.x, newPoint.y)
             child.rotate = model.rotate
           }
         })
@@ -31,6 +54,7 @@ export class DynamicGroupNode<
 
     // 在 group 缩放时，对组内的所有子节点也进行对应的缩放计算
     eventCenter.on('node:resize', ({ deltaX, deltaY, index, model }) => {
+      // TODO: 目前 Resize 的比例值有问题，导致缩放时，节点会变形，需要修复
       if (model.id === curGroup.id) {
         forEach(Array.from(curGroup.children), (childId) => {
           const child = graphModel.getNodeModelById(childId)

package/src/dynamic-group/utils.ts

@@ -19,15 +19,28 @@ export function isBoundsInGroup(bounds: BoxBoundsPoint, group: BaseNodeModel) {
 
 /**
  * 判断 bounds 是否可以移动到下一个范围
- * @param bounds
- * @param group
+ * @param groupBounds
+ * @param node
+ * @param deltaX
+ * @param deltaY
  */
-export function isAllowMoveTo(bounds: BoxBoundsPoint, group: BaseNodeModel) {
-  const { minX, minY, maxX, maxY } = bounds
-  const { x, y, width, height } = group
+export function isAllowMoveTo(
+  groupBounds: BoxBoundsPoint,
+  node: BaseNodeModel,
+  deltaX: number,
+  deltaY: number,
+) {
+  const { minX, minY, maxX, maxY } = groupBounds
+  const { x, y, width, height } = node
+
+  // DONE: 计算节点坐标 (x, y) 可移动的范围，并判断 x + deltaX, y + deltaY 是否在范围内
+  const allowMoveMinX = minX + width / 2
+  const allowMoveMinY = minY + height / 2
+  const allowMoveMaxX = maxX - width / 2
+  const allowMoveMaxY = maxY - height / 2
 
   return {
-    x: minX >= x - width / 2 && maxX <= x + width / 2,
-    y: minY >= y - height / 2 && maxY <= y + height / 2,
+    x: x + deltaX >= allowMoveMinX && x + deltaX <= allowMoveMaxX,
+    y: y + deltaY >= allowMoveMinY && y + deltaY <= allowMoveMaxY,
   }
 }

package/src/index.ts

@@ -1,3 +1,5 @@
+import './index.less'
+
 // BPMN 相关
 export * from './bpmn'
 export * from './bpmn-adapter'

package/src/style/index.less

@@ -1,8 +1,3 @@
-@import url('medium-editor/dist/css/medium-editor.min.css');
-//@import url('medium-editor/dist/css/themes/bootstrap.min.css');
-@import url('medium-editor/dist/css/themes/beagle.min.css');
-@import url('vanilla-picker/dist/vanilla-picker.csp.css');
-
 .lf-control {
   position: absolute;
   top: 0;
@@ -258,71 +253,3 @@
 .lf-mindmap_addIcon {
   margin-top: 10px;
 }
-
-/* label */
-.lf-label-overlay {
-  width: 0;
-  height: 0;
-  overflow: visible;
-
-  .lf-label-editor {
-    //box-sizing: content-box;
-    padding: 4px;
-    background: #fff;
-    border-radius: 5px;
-
-    &-container {
-      position: absolute;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: visible;
-      text-align: center;
-
-      p {
-        margin: 0;
-      }
-    }
-
-    &-dragging {
-      cursor: move;
-    }
-
-    &-editing {
-      border: 2px solid #275dc5;
-      outline: none;
-      cursor: text;
-    }
-
-    &-hover {
-      border: 2px dashed #acacac;
-    }
-
-    // textOverflowMode
-    &-clip {
-      width: 100px; /* 根据需要调整宽度 */
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: clip;
-    }
-
-    &-ellipsis {
-      width: 100px; /* 根据需要调整宽度 */
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    &-wrap {
-      width: 100px; /* 根据需要调整宽度 */
-      white-space: normal;
-      overflow-wrap: break-word; /* 允许单词内换行 */
-    }
-
-    &-nowrap {
-      width: 100px; /* 根据需要调整宽度 */
-      overflow: visible;
-      white-space: nowrap;
-    }
-  }
-}

package/src/style/raw.ts

@@ -4,10 +4,7 @@
  * Auto generated file, do not modify it!
  */
 
-export const content = `@import url('medium-editor/dist/css/medium-editor.min.css');
-@import url('medium-editor/dist/css/themes/beagle.min.css');
-@import url('vanilla-picker/dist/vanilla-picker.csp.css');
-.lf-control {
+export const content = `.lf-control {
   position: absolute;
   top: 0;
   right: 10px;
@@ -222,64 +219,4 @@ export const content = `@import url('medium-editor/dist/css/medium-editor.min.cs
 .lf-mindmap_addIcon {
   margin-top: 10px;
 }
-/* label */
-.lf-label-overlay {
-  width: 0;
-  height: 0;
-  overflow: visible;
-}
-.lf-label-overlay .lf-label-editor {
-  padding: 4px;
-  background: #fff;
-  border-radius: 5px;
-}
-.lf-label-overlay .lf-label-editor-container {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: visible;
-  text-align: center;
-}
-.lf-label-overlay .lf-label-editor-container p {
-  margin: 0;
-}
-.lf-label-overlay .lf-label-editor-dragging {
-  cursor: move;
-}
-.lf-label-overlay .lf-label-editor-editing {
-  border: 2px solid #275dc5;
-  outline: none;
-  cursor: text;
-}
-.lf-label-overlay .lf-label-editor-hover {
-  border: 2px dashed #acacac;
-}
-.lf-label-overlay .lf-label-editor-clip {
-  width: 100px;
-  /* 根据需要调整宽度 */
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: clip;
-}
-.lf-label-overlay .lf-label-editor-ellipsis {
-  width: 100px;
-  /* 根据需要调整宽度 */
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.lf-label-overlay .lf-label-editor-wrap {
-  width: 100px;
-  /* 根据需要调整宽度 */
-  white-space: normal;
-  overflow-wrap: break-word;
-  /* 允许单词内换行 */
-}
-.lf-label-overlay .lf-label-editor-nowrap {
-  width: 100px;
-  /* 根据需要调整宽度 */
-  overflow: visible;
-  white-space: nowrap;
-}
 `

package/src/tools/label/LabelOverlay.tsx

@@ -130,7 +130,6 @@ export class LabelOverlay extends Component<IToolProps, ILabelOverlayState> {
           // }
           const label = new LabelModel(config, element, graphModel)
           labelMap.set(label.id, label)
-
           labels.push(
             <Label
               key={label.id}

package/src/tools/label/index.ts

@@ -1,6 +1,12 @@
 import LogicFlow, { createUuid, GraphModel, TextMode } from '@logicflow/core'
 import { cloneDeep, forEach, isArray, isObject, map } from 'lodash-es'
 import LabelOverlay, { LabelConfigType } from './LabelOverlay'
+import {
+  BBoxInfo,
+  calcPointAfterResize,
+  rotatePointAroundCenter,
+} from './utils'
+import './style.less'
 
 import Position = LogicFlow.Position
 import NodeData = LogicFlow.NodeData
@@ -8,11 +14,6 @@ import EdgeData = LogicFlow.EdgeData
 import Extension = LogicFlow.Extension
 import LabelConfig = LogicFlow.LabelConfig
 import GraphElement = LogicFlow.GraphElement
-import {
-  BBoxInfo,
-  calcPointAfterResize,
-  rotatePointAroundCenter,
-} from './utils'
 
 // 类型定义，如果 isMultiple 为 true 的话，maxCount 为数值且大于 1
 export type ILabelOptions = {
@@ -333,6 +334,14 @@ export class Label implements Extension {
 
       model.setProperty('_label', newLabelConfig)
     })
+    // 监听元素新增事件，元素label格式化
+    eventCenter.on('node:add,edge:add', ({ data }) => {
+      const element = graphModel.getElement(data.id)
+      if (element) {
+        const formatedLabel = this.formatConfig(graphModel, data)
+        element.setProperty('_label', formatedLabel)
+      }
+    })
   }
 
   /**

package/src/tools/label/style.less

@@ -0,0 +1,71 @@
+@import url('medium-editor/dist/css/medium-editor.min.css');
+@import url('medium-editor/dist/css/themes/beagle.min.css');
+@import url('vanilla-picker/dist/vanilla-picker.csp.css');
+
+/* label */
+.lf-label-overlay {
+  width: 0;
+  height: 0;
+  overflow: visible;
+
+  .lf-label-editor {
+    //box-sizing: content-box;
+    padding: 4px;
+    background: #fff;
+    border-radius: 5px;
+
+    &-container {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: visible;
+      text-align: center;
+
+      p {
+        margin: 0;
+      }
+    }
+
+    &-dragging {
+      cursor: move;
+    }
+
+    &-editing {
+      border: 2px solid #275dc5;
+      outline: none;
+      cursor: text;
+    }
+
+    &-hover {
+      border: 2px dashed #acacac;
+    }
+
+    // textOverflowMode
+    &-clip {
+      width: 100px; /* 根据需要调整宽度 */
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: clip;
+    }
+
+    &-ellipsis {
+      width: 100px; /* 根据需要调整宽度 */
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    &-wrap {
+      width: 100px; /* 根据需要调整宽度 */
+      white-space: normal;
+      overflow-wrap: break-word; /* 允许单词内换行 */
+    }
+
+    &-nowrap {
+      width: 100px; /* 根据需要调整宽度 */
+      overflow: visible;
+      white-space: nowrap;
+    }
+  }
+}

package/src/tools/snapshot/index.ts

@@ -4,7 +4,7 @@ import { updateImageSource, copyCanvas } from './utils'
 // 导出图片
 export type ToImageOptions = {
   /**
-   * 导出图片的格式，可选值为：`png`、`webp`、`gif`、`jpeg`、`svg`，默认值为 `png`
+   * 导出图片的格式，可选值为：`png`、`webp`、`jpeg`、`svg`，默认值为 `png`
    */
   fileType?: string
   /**
@@ -63,17 +63,17 @@ export class Snapshot {
 
     // TODO: 设置fileType为gif但是下载下来的还是png
     // TODO: 完善静默模式不允许添加、操作元素能力
-    /* 下载快照 */
+    /* 导出画布快照 */
     lf.getSnapshot = async (
       fileName?: string,
       toImageOptions?: ToImageOptions,
     ) => await this.getSnapshot(fileName, toImageOptions)
 
-    /* 获取Blob对象，用户图片上传 */
+    /* 获取Blob对象 */
     lf.getSnapshotBlob = async (backgroundColor?: string, fileType?: string) =>
       await this.getSnapshotBlob(backgroundColor, fileType)
 
-    /* 获取Base64对象，用户图片上传 */
+    /* 获取Base64对象 */
     lf.getSnapshotBase64 = async (
       backgroundColor?: string,
       fileType?: string,
@@ -144,7 +144,7 @@ export class Snapshot {
   }
 
   /**
-   * 下载前的处理画布工作：局部渲染模式处理、静默模式处理
+   * 导出画布：导出前的处理画布工作，局部渲染模式处理、静默模式处理
    * @param fileName
    * @param toImageOptions
    */
@@ -195,7 +195,7 @@ export class Snapshot {
     } else {
       this.getCanvasData(svg, toImageOptions ?? {}).then(
         (canvas: HTMLCanvasElement) => {
-          // canvas元素 => url   image/octet-stream: 确保所有浏览器都能正常下载
+          // canvas元素 => base64 url   image/octet-stream: 确保所有浏览器都能正常下载
           const imgUrl = canvas
             .toDataURL(`image/${fileType}`, quality)
             .replace(`image/${fileType}`, 'image/octet-stream')
@@ -211,7 +211,7 @@ export class Snapshot {
    * @param fileType
    * @returns
    */
-  private async getSnapshotBase64(
+  async getSnapshotBase64(
     backgroundColor?: string,
     fileType?: string,
   ): Promise<SnapshotResponse> {
@@ -238,7 +238,7 @@ export class Snapshot {
    * @param fileType
    * @returns
    */
-  private async getSnapshotBlob(
+  async getSnapshotBlob(
     backgroundColor?: string,
     fileType?: string,
   ): Promise<SnapshotResponse> {
@@ -264,7 +264,7 @@ export class Snapshot {
   }
 
   /**
-   * 获取脚本css样式
+   * 获取脚本 css 样式
    * @returns
    */
   private getClassRules(): string {
@@ -273,7 +273,7 @@ export class Snapshot {
       const { styleSheets } = document
       for (let i = 0; i < styleSheets.length; i++) {
         const sheet = styleSheets[i]
-        // 这里是为了过滤掉不同源css脚本
+        // 这里是为了过滤掉不同源 css 脚本，防止报错终止导出
         try {
           for (let j = 0; j < sheet.cssRules.length; j++) {
             rules += sheet.cssRules[j].cssText
@@ -292,10 +292,10 @@ export class Snapshot {
   }
 
   /**
-   * 获取图片生成中间产物canvas对象，用户转换为其他需要的格式
-   * @param svg
-   * @param toImageOptions
-   * @returns
+   * 将 svg 转化为 canvas
+   * @param svg - svg 元素
+   * @param toImageOptions - 图像选项
+   * @returns Promise<canvas> - 返回 canvas 对象
    */
   private async getCanvasData(
     svg: Element,
@@ -334,15 +334,19 @@ export class Snapshot {
     const { graphModel } = this.lf
     const { transformModel } = graphModel
     const { SCALE_X, SCALE_Y, TRANSLATE_X, TRANSLATE_Y } = transformModel
+
+    // 将导出区域移动到左上角，canvas 绘制的时候是从左上角开始绘制的
     ;(copy.lastChild as SVGElement).style.transform = `matrix(1, 0, 0, 1, ${
       (-offsetX + TRANSLATE_X) * (1 / SCALE_X)
     }, ${(-offsetY + TRANSLATE_Y) * (1 / SCALE_Y)})`
+
     // 包含所有元素的最小宽高
     const bboxWidth = Math.ceil(bbox.width / SCALE_X)
     const bboxHeight = Math.ceil(bbox.height / SCALE_Y)
     const canvas = document.createElement('canvas')
     canvas.style.width = `${bboxWidth}px`
     canvas.style.height = `${bboxHeight}px`
+
     // 宽高值 默认加padding 40，保证图形不会紧贴着下载图片
     canvas.width = bboxWidth * dpr + padding * 2
     canvas.height = bboxHeight * dpr + padding * 2
@@ -362,7 +366,7 @@ export class Snapshot {
 
     const img = new Image()
 
-    // 设置css样式
+    // 注入 css 样式
     const style = document.createElement('style')
     style.innerHTML = this.getClassRules()
     const foreignObject = document.createElement('foreignObject')