fix(AddBaseTypePlugin): refreshing the history when add base type ele…

…ment (#532) * fix(plugin): fix the DringPlugin.ts that the cursor style grab and grabbing is not so much available * refactor(fabric-history): refactor the fabric-history and tuning the HistoryPlugin * refactor(fabric-history): refactor the fabric-history and tuning the HistoryPlugin * refactor(fabric-history): refactor the fabric-history and tuning the HistoryPlugin * refactor(fabric-history): refactor the fabric-history and tuning the HistoryPlugin * refactor(fabric-history): refactor the fabric-history and tuning the HistoryPlugin * refactor(fabric-history): refactor the fabric-history and tuning the HistoryPlugin * refactor(fabric-history): refactor the fabric-history and tuning the HistoryPlugin * refactor(fabric-history): refactor the fabric-history and tuning the HistoryPlugin * feat(plugin): adding support for the middle mouse button event to drag the workspace * fix(AddBaseTypePlugin): refreshing the history when add base type element --------- Co-authored-by: GeorgeSmith <[email protected]>
ikuaitu · Nov 4, 2024 · 897c53b · 897c53b
1 parent 6dca813
commit 897c53b
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 1 deletion.
diff --git a/packages/core/plugin/AddBaseTypePlugin.ts b/packages/core/plugin/AddBaseTypePlugin.ts
@@ -43,6 +43,7 @@ export default class AddBaseTypePlugin implements IPluginTempl {
     if (!event && center) {
       this._toCenter(item);
     }
+    this.canvas.refreshHistory();
     this.canvas.setActiveObject(item);
     this.canvas.renderAll();
   }

diff --git a/packages/core/plugin/DringPlugin.ts b/packages/core/plugin/DringPlugin.ts
@@ -49,7 +49,8 @@ export class DringPlugin implements IPluginTempl {
     const This = this;
     this.canvas.on('mouse:down', function (this: ExtCanvas, opt) {
       const evt = opt.e;
-      if (evt.altKey || This.dragMode) {
+      // evt.button === 1 为鼠标中键的判断
+      if (evt.altKey || This.dragMode || evt.button === 1) {
         This.canvas.setCursor('grabbing');
         This.canvas.discardActiveObject();
         This._setDring();

diff --git a/packages/core/plugin/MiddleMousePlugin.ts b/packages/core/plugin/MiddleMousePlugin.ts
@@ -0,0 +1,49 @@
+/*
+ * @Author: George
+ * @Date: 2024-10-29 11:11:11
+ * @LastEditors: George
+ * @LastEditTime: 2024-10-29 11:11:11
+ * @Description: 鼠标中键点击事件插件
+ */
+
+import { fabric } from 'fabric';
+import type { IEditor, IPluginTempl } from '@kuaitu/core';
+
+class MiddleMousePlugin implements IPluginTempl {
+  static pluginName = 'MiddleMousePlugin';
+  workspaceEl!: HTMLElement;
+
+  constructor(public canvas: fabric.Canvas, public editor: IEditor) {
+    this.init();
+  }
+
+  private init() {
+    const workspaceEl = document.querySelector('#workspace') as HTMLElement;
+    if (!workspaceEl) {
+      throw new Error('element #workspace is missing, plz check!');
+    }
+    this.workspaceEl = workspaceEl;
+    this.initListener();
+  }
+
+  private handleMouseUp = (e: MouseEvent) => e.button === 1 && this.canvas.fire('mouse:up', { e });
+
+  private handleMouseDown = (e: MouseEvent) =>
+    e.button === 1 && this.canvas.fire('mouse:down', { e });
+
+  /**
+   * @desc 初始化鼠标中键监听事件
+   */
+  private initListener() {
+    this.workspaceEl.addEventListener('mouseup', this.handleMouseUp);
+    this.workspaceEl.addEventListener('mousedown', this.handleMouseDown);
+  }
+
+  destroy() {
+    this.workspaceEl.removeEventListener('mouseup', this.handleMouseUp);
+    this.workspaceEl.removeEventListener('mousedown', this.handleMouseDown);
+    console.log('pluginDestroy');
+  }
+}
+
+export default MiddleMousePlugin;
diff --git a/typings/extends.d.ts b/typings/extends.d.ts
@@ -7,6 +7,7 @@ declare namespace fabric {
     historyProcessing: boolean;
     _currentTransform: unknown;
     extraProps: any;
+    refreshHistory(): void;
     clearHistory(boolean?): void;
     clearUndo(): void;
     _historyNext(): void;