@logicflow/extension 2.0.0 → 2.0.2

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,75 @@
 @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');
 
+/* 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;
+    }
+  }
+}
+
 .lf-control {
   position: absolute;
   top: 0;
@@ -258,71 +325,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

@@ -7,6 +7,66 @@
 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');
+/* 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;
+}
 .lf-control {
   position: absolute;
   top: 0;
@@ -222,64 +282,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,11 @@
 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 Position = LogicFlow.Position
 import NodeData = LogicFlow.NodeData
@@ -8,11 +13,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 = {
@@ -125,9 +125,6 @@ export class Label implements Extension {
     if (element.BaseType === 'edge') {
       // 判断当前 label，是否在 edge 的路径上，如果不在，就重新计算位置
       formatConfig = map(formatConfig, (config) => {
-        const { x, y } = config
-        console.log('x, y --->>>', x, y)
-
         return config
       })
     }
@@ -333,6 +330,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)
+      }
+    })
   }
 
   /**
@@ -364,7 +369,6 @@ export class Label implements Extension {
             y: label.y + deltaY,
           }
         })
-        // console.log('Label --->>>', nextLabel)
         element?.setProperty('_label', nextLabel)
       }
     }

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')