feat(plugin): adding support for the middle mouse button event to drag the workspace

packages/core/index.ts

@@ -39,6 +39,7 @@ export { default as ImageStroke } from './plugin/ImageStroke';
 export { default as ResizePlugin } from './plugin/ResizePlugin';
 export { default as LockPlugin } from './plugin/LockPlugin';
 export { default as AddBaseTypePlugin } from './plugin/AddBaseTypePlugin';
+export { default as MiddleMousePlugin } from './plugin/MiddleMousePlugin';
 import EventType from './eventType';
 import Utils from './utils/utils';
 import CustomRect from './objects/CustomRect';

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();

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;

src/views/home/index.vue

@@ -274,6 +274,7 @@ import Editor, {
   LockPlugin,
   AddBaseTypePlugin,
   MaskPlugin,
+  MiddleMousePlugin,
 } from '@kuaitu/core';
 import Edit from '@/components/edit.vue';
 import ClipImage from '@/components/clipImage.vue';
@@ -392,6 +393,7 @@ onMounted(() => {
     .use(ResizePlugin)
     .use(LockPlugin)
     .use(AddBaseTypePlugin)
+    .use(MiddleMousePlugin)
     .use(MaskPlugin);
 
   state.show = true;