@logicflow/extension 2.2.0-alpha.0 → 2.2.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/extension",
-  "version": "2.2.0-alpha.0",
+  "version": "2.2.0-alpha.1",
   "description": "LogicFlow Extensions",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,8 +20,8 @@
   "author": "Logicflow-Team",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@logicflow/core": "2.2.0-alpha.0",
-    "@logicflow/vue-node-registry": "1.2.0-alpha.0"
+    "@logicflow/vue-node-registry": "1.2.0-alpha.1",
+    "@logicflow/core": "2.2.0-alpha.1"
   },
   "dependencies": {
     "@antv/hierarchy": "^0.6.11",
@@ -32,8 +32,8 @@
     "preact": "^10.17.1",
     "rangy": "^1.3.1",
     "vanilla-picker": "^2.12.3",
-    "@logicflow/core": "2.2.0-alpha.0",
-    "@logicflow/vue-node-registry": "1.2.0-alpha.0"
+    "@logicflow/core": "2.2.0-alpha.1",
+    "@logicflow/vue-node-registry": "1.2.0-alpha.1"
   },
   "devDependencies": {
     "less": "^4.1.1",

package/src/insert-node-in-polyline/index.ts

@@ -3,6 +3,7 @@ import LogicFlow, {
   PolylineEdgeModel,
   EventType,
   formatAnchorConnectValidateData,
+  getClosestAnchor,
 } from '@logicflow/core'
 import { cloneDeep } from 'lodash-es'
 import { isNodeInSegment } from './edge'
@@ -132,7 +133,6 @@ export class InsertNodeInPolyline {
         } = edges[i]
         // fix https://github.com/didi/LogicFlow/issues/996
         const startPoint = cloneDeep(pointsList[0])
-        const endPoint = cloneDeep(crossPoints.startCrossPoint)
         this._lf.deleteEdge(id)
         const checkResult = this.checkRuleBeforeInsetNode(
           sourceNodeId,
@@ -141,27 +141,33 @@ export class InsertNodeInPolyline {
           targetAnchorId!,
           nodeData,
         )
+        // 基于插入节点的进入交点计算出最近的“进入锚点”，用于重连原边的前半段
+        const entryAnchorInfo = getClosestAnchor(
+          crossPoints.startCrossPoint,
+          nodeModel,
+        )
+        const entryAnchor = entryAnchorInfo.anchor
+        // 构造第一条边：原 source → 插入节点（终点为进入锚点）
         this._lf.addEdge({
           type,
           sourceNodeId,
           targetNodeId: nodeData.id,
           startPoint,
-          endPoint,
-          pointsList: [
-            ...pointsList.slice(0, crossIndex),
-            crossPoints.startCrossPoint,
-          ],
+          endPoint: entryAnchor,
         })
+        // 基于插入节点的离开交点计算出最近的“离开锚点”，用于重连原边的后半段
+        const exitAnchorInfo = getClosestAnchor(
+          crossPoints.endCrossPoint,
+          nodeModel,
+        )
+        const exitAnchor = exitAnchorInfo.anchor
+        // 构造第二条边：插入节点 → 原 target（起点为离开锚点）
         this._lf.addEdge({
           type,
           sourceNodeId: nodeData.id,
           targetNodeId,
-          startPoint: cloneDeep(crossPoints.endCrossPoint),
+          startPoint: cloneDeep(exitAnchor),
           endPoint: cloneDeep(pointsList[pointsList.length - 1]),
-          pointsList: [
-            crossPoints.endCrossPoint,
-            ...pointsList.slice(crossIndex),
-          ],
         })
         if (!checkResult.isPass) {
           this._lf.graphModel.eventCenter.emit(

package/src/tools/label/LabelOverlay.tsx

@@ -4,7 +4,11 @@ import { forEach, merge } from 'lodash-es'
 import LabelPlugin from '.'
 import Label from './Label'
 import LabelModel from './LabelModel'
-import { MediumEditor, defaultOptions, ColorPickerButton } from './mediumEditor'
+import {
+  MediumEditor,
+  defaultOptions,
+  createColorPickerButtonClass,
+} from './mediumEditor'
 
 import LabelConfig = LogicFlow.LabelConfig
 
@@ -47,7 +51,7 @@ export class LabelOverlay extends Component<IToolProps, ILabelOverlayState> {
       merge(defaultOptions, {
         autoLink: true,
         extensions: {
-          colorPicker: new ColorPickerButton(),
+          colorPicker: new (createColorPickerButtonClass(MediumEditor))(),
         },
       }),
     )
@@ -82,7 +86,7 @@ export class LabelOverlay extends Component<IToolProps, ILabelOverlayState> {
         merge(defaultOptions, {
           autoLink: true,
           extensions: {
-            colorPicker: new ColorPickerButton(),
+            colorPicker: new (createColorPickerButtonClass(MediumEditor))(),
           },
         }),
       )

package/src/tools/label/mediumEditor.ts

@@ -39,56 +39,83 @@ export const defaultOptions = {
   disableEditing: true,
 }
 
-export const ColorPickerButton = MediumEditor.extensions.button.extend({
-  name: 'colorpicker',
-  tagNames: ['mark'],
-  contentDefault: '<b>Color</b>',
-  aria: 'Color Picker',
-  action: 'colorPicker',
-  init: function () {
-    rangy.init()
-    MediumEditor.extensions.button.prototype.init.call(this)
-    this.colorPicker = new Picker({
-      parent: this.button,
-      color: '#000',
-      onDone: (res) => {
-        if (this.coloredText && this.coloredText.isAppliedToSelection()) {
-          this.coloredText.undoToSelection()
-        }
-        this.coloredText = rangy.createClassApplier('colored', {
-          elementTagName: 'span',
-          elementProperties: {
-            style: {
-              color: res.hex,
-            },
-          },
-          normalize: true,
-        })
-        this.coloredText.toggleSelection()
-        this.base.checkContentChanged()
-        this.setInactive()
-      },
-    })
-  },
-  getButton: function () {
-    return this.button
-  },
-  handleClick: function () {
-    this.setActive()
-    this.colorPicker.show()
-  },
-  isAlreadyApplied: function (node) {
-    return node.nodeName.toLowerCase() === 'mark'
-  },
-  isActive: function () {
-    return this.button.classList.contains('medium-editor-button-active')
-  },
-  setInactive: function () {
-    this.button.classList.remove('medium-editor-button-active')
-  },
-  setActive: function () {
-    this.button.classList.add('medium-editor-button-active')
-  },
-})
+export function createColorPickerButtonClass(MediumEditor?: any) {
+  const ButtonBase =
+    MediumEditor?.extensions?.button || MediumEditor?.extensions?.button
+  const ExtensionBase =
+    MediumEditor?.Extension || (MediumEditor as any)?.Extension
+
+  // 当 Button 扩展基类不可用时，回退到 Extension 基类，避免在模块加载阶段抛错
+  const Base = ButtonBase || ExtensionBase
+  if (!Base) {
+    console.warn(
+      'MediumEditor button/extension base not available; using noop extension',
+    )
+    return class {}
+  }
+
+  return Base.extend({
+    name: 'colorpicker',
+    tagNames: ['mark'],
+    contentDefault: '<b>Color</b>',
+    aria: 'Color Picker',
+    action: 'colorPicker',
+    init: function () {
+      try {
+        rangy.init()
+      } catch {
+        console.error('rangy.init failed')
+      }
+      // 初始化按钮（ButtonBase 才有 prototype.init）
+      try {
+        ;(ButtonBase as any)?.prototype?.init?.call(this)
+      } catch {
+        console.error('ButtonBase.init failed')
+      }
+      this.colorPicker = new Picker({
+        parent: (this as any).button || undefined,
+        color: '#000',
+        onDone: (res) => {
+          try {
+            if (this.coloredText && this.coloredText.isAppliedToSelection?.()) {
+              this.coloredText.undoToSelection()
+            }
+            this.coloredText = rangy.createClassApplier('colored', {
+              elementTagName: 'span',
+              elementProperties: { style: { color: res.hex } },
+              normalize: true,
+            })
+            this.coloredText.toggleSelection()
+            this.base?.checkContentChanged?.()
+            this.setInactive?.()
+          } catch {
+            console.error('Picker.onDone failed')
+          }
+        },
+      })
+    },
+    getButton: function () {
+      return (this as any).button
+    },
+    handleClick: function () {
+      this.setActive?.()
+      this.colorPicker?.show?.()
+    },
+    isAlreadyApplied: function (node) {
+      return node?.nodeName?.toLowerCase?.() === 'mark'
+    },
+    isActive: function () {
+      return (this as any).button?.classList?.contains(
+        'medium-editor-button-active',
+      )
+    },
+    setInactive: function () {
+      ;(this as any).button?.classList?.remove('medium-editor-button-active')
+    },
+    setActive: function () {
+      ;(this as any).button?.classList?.add('medium-editor-button-active')
+    },
+  })
+}
 
 export { MediumEditor }

package/src/tools/snapshot/index.ts

@@ -646,6 +646,18 @@ export class Snapshot {
     const { fileType = baseFileType } = toImageOptions ?? {}
     const svg = this.getSvgRootElement(this.lf)
     await updateImageSource(svg as SVGElement)
+    if (fileType === 'svg') {
+      const copy = await this.cloneSvg(svg)
+      const svgString = new XMLSerializer().serializeToString(copy)
+      const blob = new Blob([svgString], {
+        type: 'image/svg+xml;charset=utf-8',
+      })
+      return {
+        data: blob,
+        width: 0,
+        height: 0,
+      }
+    }
     return new Promise((resolve) => {
       this.getCanvasData(svg, {
         backgroundColor,