refactor: add clipboard to canvas for refactoring of hotkey plugin as a standalone one

JackLian · liujuping · commit 852977c0914a · 2023-01-16T16:29:28.000+08:00
diff --git a/docs/docs/api/canvas.md b/docs/docs/api/canvas.md
@@ -36,6 +36,12 @@ sidebar_position: 12
 
 `@type {boolean}`
 
+### clipboard
+全局剪贴板实例
+
+`@type {IPublicModelClipboard}`
+
+相关类型：[IPublicModelClipboard](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/clipboard.ts)
 
 ## 方法
 
diff --git a/docs/docs/api/model/clipboard.md b/docs/docs/api/model/clipboard.md
@@ -0,0 +1,43 @@
+---
+title: Clipboard
+sidebar_position: 14
+---
+
+> **@types** [IPublicModelClipboard](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/clipboard.ts)<br/>
+> **@since** v1.1.0
+
+## 方法
+
+### setData
+
+给剪贴板赋值
+
+```typescript
+/**
+ * 给剪贴板赋值
+ * set data to clipboard
+ *
+ * @param {*} data
+ * @since v1.1.0
+ */
+setData(data: any): void;
+```
+
+### waitPasteData
+
+设置剪贴板数据设置的回调
+
+```typescript
+/**
+ * 设置剪贴板数据设置的回调
+ * set callback for clipboard provide paste data
+ *
+ * @param {KeyboardEvent} keyboardEvent
+ * @param {(data: any, clipboardEvent: ClipboardEvent) => void} cb
+ * @since v1.1.0
+ */
+waitPasteData(
+    keyboardEvent: KeyboardEvent,
+    cb: (data: any, clipboardEvent: ClipboardEvent) => void,
+  ): void;
+```
diff --git a/docs/docs/api/model/resource.md b/docs/docs/api/model/resource.md
@@ -1,6 +1,6 @@
 ---
 title: Resource
-sidebar_position: 12
+sidebar_position: 13
 ---
 
 > **[@experimental](./#experimental)**<br/>
diff --git a/packages/designer/src/designer/clipboard.ts b/packages/designer/src/designer/clipboard.ts
@@ -1,3 +1,5 @@
+import { IPublicModelClipboard } from '@alilc/lowcode-types';
+
 function getDataFromPasteEvent(event: ClipboardEvent) {
   const { clipboardData } = event;
   if (!clipboardData) {
@@ -23,7 +25,13 @@ function getDataFromPasteEvent(event: ClipboardEvent) {
   }
 }
 
-class Clipboard {
+export interface IClipboard extends IPublicModelClipboard {
+
+  initCopyPaster(el: HTMLTextAreaElement): void;
+
+  injectCopyPaster(document: Document): void;
+}
+class Clipboard implements IClipboard {
   private copyPasters: HTMLTextAreaElement[] = [];
 
   private waitFn?: (data: any, e: ClipboardEvent) => void;
@@ -56,7 +64,7 @@ class Clipboard {
   }
 
   injectCopyPaster(document: Document) {
-    if (this.copyPasters.find(x => x.ownerDocument === document)) {
+    if (this.copyPasters.find((x) => x.ownerDocument === document)) {
       return;
     }
     const copyPaster = document.createElement<'textarea'>('textarea');
@@ -69,8 +77,8 @@ class Clipboard {
     };
   }
 
-  setData(data: any) {
-    const copyPaster = this.copyPasters.find(x => x.ownerDocument);
+  setData(data: any): void {
+    const copyPaster = this.copyPasters.find((x) => x.ownerDocument);
     if (!copyPaster) {
       return;
     }
@@ -81,12 +89,12 @@ class Clipboard {
     copyPaster.blur();
   }
 
-  waitPasteData(e: KeyboardEvent, cb: (data: any, e: ClipboardEvent) => void) {
-    const win = e.view;
+  waitPasteData(keyboardEvent: KeyboardEvent, cb: (data: any, e: ClipboardEvent) => void) {
+    const win = keyboardEvent.view;
     if (!win) {
       return;
     }
-    const copyPaster = this.copyPasters.find(cp => cp.ownerDocument === win.document);
+    const copyPaster = this.copyPasters.find((cp) => cp.ownerDocument === win.document);
     if (copyPaster) {
       copyPaster.select();
       this.waitFn = cb;
diff --git a/packages/engine/src/inner-plugins/builtin-hotkey.ts b/packages/engine/src/inner-plugins/builtin-hotkey.ts
@@ -2,7 +2,6 @@
 import { isFormEvent, isNodeSchema } from '@alilc/lowcode-utils';
 import {
   insertChildren,
-  clipboard,
 } from '@alilc/lowcode-designer';
 import {
   IPublicModelPluginContext,
@@ -129,6 +128,7 @@ export const builtinHotkey = (ctx: IPublicModelPluginContext) => {
   return {
     init() {
       const { hotkey, project, logger, canvas } = ctx;
+      const { clipboard } = canvas;
       // hotkey binding
       hotkey.bind(['backspace', 'del'], (e: KeyboardEvent, action) => {
         logger.info(`action ${action} is triggered`);
diff --git a/packages/shell/src/api/canvas.ts b/packages/shell/src/api/canvas.ts
@@ -8,6 +8,7 @@ import {
   IPublicModelEditor,
   IPublicModelDragon,
   IPublicModelActiveTracker,
+  IPublicModelClipboard,
 } from '@alilc/lowcode-types';
 import {
   ScrollTarget as InnerScrollTarget,
@@ -18,10 +19,14 @@ import {
   Dragon as ShellDragon,
   DropLocation as ShellDropLocation,
   ActiveTracker as ShellActiveTracker,
+  Clipboard as ShellClipboard,
 } from '../model';
 
+const clipboardInstanceSymbol = Symbol('clipboardInstace');
+
 export class Canvas implements IPublicApiCanvas {
   private readonly [editorSymbol]: IPublicModelEditor;
+  private readonly [clipboardInstanceSymbol]: IPublicModelClipboard;
 
   private get [designerSymbol](): IDesigner {
     return this[editorSymbol].get('designer') as IDesigner;
@@ -40,8 +45,13 @@ export class Canvas implements IPublicApiCanvas {
     return Boolean(this[editorSymbol].get('designer')?.project?.simulator?.liveEditing?.editing);
   }
 
+  get clipboard(): IPublicModelClipboard {
+    return this[clipboardInstanceSymbol];
+  }
+
   constructor(editor: IPublicModelEditor, readonly workspaceMode: boolean = false) {
     this[editorSymbol] = editor;
+    this[clipboardInstanceSymbol] = new ShellClipboard();
   }
 
   createScrollTarget(shell: HTMLDivElement): IPublicModelScrollTarget {
diff --git a/packages/shell/src/index.ts b/packages/shell/src/index.ts
@@ -9,6 +9,7 @@ import {
   Dragon,
   SettingPropEntry,
   SettingTopEntry,
+  Clipboard,
 } from './model';
 import {
   Project,
@@ -57,4 +58,5 @@ export {
   Logger,
   Canvas,
   Workspace,
+  Clipboard,
 };
diff --git a/packages/shell/src/model/clipboard.ts b/packages/shell/src/model/clipboard.ts
@@ -0,0 +1,22 @@
+import { IPublicModelClipboard } from '@alilc/lowcode-types';
+import { clipboardSymbol } from '../symbols';
+import { IClipboard, clipboard } from '@alilc/lowcode-designer';
+
+export class Clipboard implements IPublicModelClipboard {
+  private readonly [clipboardSymbol]: IClipboard;
+
+  constructor() {
+    this[clipboardSymbol] = clipboard;
+  }
+
+  setData(data: any): void {
+    this[clipboardSymbol].setData(data);
+  }
+
+  waitPasteData(
+      keyboardEvent: KeyboardEvent,
+      cb: (data: any, clipboardEvent: ClipboardEvent) => void,
+    ): void {
+    this[clipboardSymbol].waitPasteData(keyboardEvent, cb);
+  }
+}
diff --git a/packages/shell/src/model/index.ts b/packages/shell/src/model/index.ts
@@ -17,4 +17,5 @@ export * from './setting-top-entry';
 export * from './resource';
 export * from './active-tracker';
 export * from './plugin-instance';
-export * from './window';
+export * from './window';
+export * from './clipboard';
diff --git a/packages/shell/src/symbols.ts b/packages/shell/src/symbols.ts
@@ -30,4 +30,5 @@ export const workspaceSymbol = Symbol('workspace');
 export const windowSymbol = Symbol('window');
 export const pluginInstanceSymbol = Symbol('plugin-instance');
 export const resourceTypeSymbol = Symbol('resourceType');
-export const resourceSymbol = Symbol('resource');
+export const resourceSymbol = Symbol('resource');
+export const clipboardSymbol = Symbol('clipboard');
diff --git a/packages/types/src/shell/api/canvas.ts b/packages/types/src/shell/api/canvas.ts
@@ -1,4 +1,4 @@
-import { IPublicModelDragon, IPublicModelDropLocation, IPublicModelScrollTarget, IPublicModelScrollable, IPublicModelScroller, IPublicModelActiveTracker } from '../model';
+import { IPublicModelDragon, IPublicModelDropLocation, IPublicModelScrollTarget, IPublicModelScrollable, IPublicModelScroller, IPublicModelActiveTracker, IPublicModelClipboard } from '../model';
 import { IPublicTypeLocationData } from '../type';
 
 /**
@@ -54,4 +54,12 @@ export interface IPublicApiCanvas {
    * @since v1.1.0
    */
   get isInLiveEditing(): boolean;
+
+  /**
+   * 获取全局剪贴板实例
+   * get clipboard instance
+   *
+   * @since v1.1.0
+   */
+  get clipboard(): IPublicModelClipboard;
 }
diff --git a/packages/types/src/shell/model/clipboard.ts b/packages/types/src/shell/model/clipboard.ts
@@ -0,0 +1,25 @@
+
+export interface IPublicModelClipboard {
+
+  /**
+   * 给剪贴板赋值
+   * set data to clipboard
+   *
+   * @param {*} data
+   * @since v1.1.0
+   */
+  setData(data: any): void;
+
+  /**
+   * 设置剪贴板数据设置的回调
+   * set callback for clipboard provide paste data
+   *
+   * @param {KeyboardEvent} keyboardEvent
+   * @param {(data: any, clipboardEvent: ClipboardEvent) => void} cb
+   * @since v1.1.0
+   */
+  waitPasteData(
+      keyboardEvent: KeyboardEvent,
+      cb: (data: any, clipboardEvent: ClipboardEvent) => void,
+    ): void;
+}
diff --git a/packages/types/src/shell/model/index.ts b/packages/types/src/shell/model/index.ts
@@ -28,4 +28,5 @@ export * from './editor';
 export * from './preference';
 export * from './plugin-instance';
 export * from './sensor';
-export * from './resource';
+export * from './resource';
+export * from './clipboard';
