@logicflow/extension 2.0.0-beta.9 → 2.0.1

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'
@@ -39,3 +41,6 @@ export * from './materials/node-selection'
  */
 export * from './NodeResize'
 export * from './materials/group'
+
+// 迷之插件
+export * from './rect-label-node'

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 = {
@@ -197,7 +198,7 @@ export class Label implements Extension {
    * @param position
    */
   private addLabel(element: GraphElement, position: Position) {
-    const { maxCount } = this
+    const { isMultiple, maxCount } = this
     const {
       properties: { _label, _labelOption },
     } = element
@@ -217,7 +218,7 @@ export class Label implements Extension {
       vertical: false,
     }
 
-    if (len >= (curLabelOption?.maxCount ?? maxCount)) {
+    if (!isMultiple || len >= (curLabelOption?.maxCount ?? maxCount)) {
       return
     }
 
@@ -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/mediumEditor.ts

@@ -1,6 +1,7 @@
 import MediumEditor from 'medium-editor'
 import Picker from 'vanilla-picker'
 import rangy from 'rangy'
+import 'rangy/lib/rangy-classapplier'
 
 export const defaultOptions = {
   toolbar: {

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