@logicflow/extension 2.1.5 → 2.1.7

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

@@ -18,6 +18,7 @@ export class SelectionSelect {
   private disabled = true
   private isWholeNode = true
   private isWholeEdge = true
+  private originStatusSaved = false
   exclusiveMode = false // 框选独占模式：true 表示只能进行框选操作，false 表示可以同时进行其他画布操作
   // 用于区分选区和点击事件
   private mouseDownInfo: {
@@ -97,7 +98,6 @@ export class SelectionSelect {
 
   private addEventListeners() {
     if (!this.container) return
-
     if (this.exclusiveMode) {
       // 独占模式：监听 container 的 mousedown 事件
       this.container.style.pointerEvents = 'auto'
@@ -143,9 +143,12 @@ export class SelectionSelect {
       y: e.clientY,
       time: Date.now(),
     }
-
     // 记录原始设置并临时禁止画布移动
-    this.originalStopMoveGraph = this.lf.getEditConfig().stopMoveGraph!
+    if (!this.originStatusSaved) {
+      // 为了防止在开启框选时用户多次点击画布导致缓存的stopMoveGraph变化，所以只在第一次点击时记录原始的stopMoveGraph issue #2263
+      this.originalStopMoveGraph = this.lf.getEditConfig().stopMoveGraph!
+      this.originStatusSaved = true
+    }
     this.lf.updateEditConfig({
       stopMoveGraph: true,
     })
@@ -249,6 +252,11 @@ export class SelectionSelect {
     }
   }
   private drawOff = (e: MouseEvent) => {
+    // 恢复原始的 stopMoveGraph 设置
+    this.lf.updateEditConfig({
+      stopMoveGraph: this.originalStopMoveGraph,
+    })
+    this.originStatusSaved = false
     // 处理鼠标抬起事件
     // 首先判断是否是点击，如果是，则清空框选
     if (this.mouseDownInfo) {
@@ -271,11 +279,6 @@ export class SelectionSelect {
       document.removeEventListener('mouseup', this.drawOff)
     }
 
-    // 恢复原始的 stopMoveGraph 设置
-    this.lf.updateEditConfig({
-      stopMoveGraph: this.originalStopMoveGraph,
-    })
-
     if (curStartPoint && curEndPoint) {
       const { x, y } = curStartPoint
       const { x: x1, y: y1 } = curEndPoint

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 }