feat(workspace): add multi foces-tracker in workspace mode

alibaba · Jul 10, 2023 · 7b61817 · 7b61817
1 parent eb3b570
commit 7b61817
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 15 deletions.
diff --git a/packages/designer/src/builtin-simulator/host.ts b/packages/designer/src/builtin-simulator/host.ts
@@ -4,7 +4,6 @@ import {
   reaction,
   computed,
   getPublicPath,
-  focusTracker,
   engineConfig,
   globalLocale,
   IReactionPublic,
@@ -519,7 +518,8 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
     // bind hotkey & clipboard
     const hotkey = this.designer.editor.get('innerHotkey');
     hotkey.mount(this._contentWindow);
-    focusTracker.mount(this._contentWindow);
+    const innerSkeleton = this.designer.editor.get('skeleton');
+    innerSkeleton.focusTracker.mount(this._contentWindow);
     clipboard.injectCopyPaster(this._contentDocument);
 
     // TODO: dispose the bindings

diff --git a/packages/designer/tests/builtin-simulator/host.test.ts b/packages/designer/tests/builtin-simulator/host.test.ts
@@ -24,6 +24,9 @@ import { fireEvent } from '@testing-library/react';
 import { shellModelFactory } from '../../../engine/src/modules/shell-model-factory';
 import { Setters, Workspace } from '@alilc/lowcode-shell';
 import { ILowCodePluginContextApiAssembler, ILowCodePluginContextPrivate, LowCodePluginManager } from '@alilc/lowcode-designer';
+import {
+  Skeleton as InnerSkeleton,
+} from '@alilc/lowcode-editor-skeleton';
 
 describe('Host 测试', () => {
   let editor: Editor;
@@ -45,6 +48,8 @@ describe('Host 测试', () => {
     const innerPlugins = new LowCodePluginManager(pluginContextApiAssembler);
     const innerWorkspace = new InnerWorkspace(() => {}, {});
     const workspace = new Workspace(innerWorkspace);
+    const innerSkeleton = new InnerSkeleton(editor);
+    editor.set('skeleton' as any, innerSkeleton);
     editor.set('innerHotkey', new InnerHotkey())
     editor.set('setters', new Setters(new InnerSetters()));
     editor.set('innerPlugins' as any, innerPlugins);

diff --git a/packages/editor-core/src/utils/focus-tracker.ts b/packages/editor-core/src/utils/focus-tracker.ts
@@ -1,4 +1,8 @@
 export class FocusTracker {
+  private actives: Focusable[] = [];
+
+  private modals: Array<{ checkDown: (e: MouseEvent) => boolean; checkOpen: () => boolean }> = [];
+
   mount(win: Window) {
     const checkDown = (e: MouseEvent) => {
       if (this.checkModalDown(e)) {
@@ -16,14 +20,10 @@ export class FocusTracker {
     };
   }
 
-  private actives: Focusable[] = [];
-
   get first() {
     return this.actives[0];
   }
 
-  private modals: Array<{ checkDown: (e: MouseEvent) => boolean; checkOpen: () => boolean }> = [];
-
   addModal(checkDown: (e: MouseEvent) => boolean, checkOpen: () => boolean) {
     this.modals.push({
       checkDown,
@@ -154,7 +154,3 @@ export class Focusable {
     }
   }
 }
-
-export const focusTracker = new FocusTracker();
-
-focusTracker.mount(window);
diff --git a/packages/editor-skeleton/src/layouts/left-float-pane.tsx b/packages/editor-skeleton/src/layouts/left-float-pane.tsx
@@ -1,6 +1,6 @@
 import { Component, Fragment } from 'react';
 import classNames from 'classnames';
-import { observer, Focusable, focusTracker } from '@alilc/lowcode-editor-core';
+import { observer, Focusable } from '@alilc/lowcode-editor-core';
 import { Area } from '../area';
 import { Panel } from '../widget/panel';
 import { PanelConfig } from '../types';
@@ -31,7 +31,7 @@ export default class LeftFloatPane extends Component<{ area: Area<PanelConfig, P
       area.skeleton.editor.removeListener('designer.drag', triggerClose);
     };
 
-    this.focusing = focusTracker.create({
+    this.focusing = area.skeleton.focusTracker.create({
       range: (e) => {
         const target = e.target as HTMLElement;
         if (!target) {

diff --git a/packages/editor-skeleton/src/skeleton.ts b/packages/editor-skeleton/src/skeleton.ts
@@ -1,4 +1,4 @@
-import { action, makeObservable, obx, engineConfig, IEditor } from '@alilc/lowcode-editor-core';
+import { action, makeObservable, obx, engineConfig, IEditor, FocusTracker } from '@alilc/lowcode-editor-core';
 import {
   DockConfig,
   PanelConfig,
@@ -83,6 +83,8 @@ export interface ISkeleton extends Omit<IPublicApiSkeleton,
 
   readonly widgets: IWidget[];
 
+  readonly focusTracker: FocusTracker;
+
   getPanel(name: string): Panel | undefined;
 
   getWidget(name: string): IWidget | undefined;
@@ -133,6 +135,8 @@ export class Skeleton {
 
   readonly widgets: IWidget[] = [];
 
+  readonly focusTracker = new FocusTracker();
+
   constructor(readonly editor: IEditor, readonly viewName: string = 'global') {
     makeObservable(this);
     this.leftArea = new Area(
@@ -245,6 +249,7 @@ export class Skeleton {
 
     this.setupPlugins();
     this.setupEvents();
+    this.focusTracker.mount(window);
   }
 
   /**

diff --git a/packages/workspace/src/layouts/left-float-pane.tsx b/packages/workspace/src/layouts/left-float-pane.tsx
@@ -1,6 +1,6 @@
 import { Component, Fragment } from 'react';
 import classNames from 'classnames';
-import { observer, Focusable, focusTracker } from '@alilc/lowcode-editor-core';
+import { observer, Focusable } from '@alilc/lowcode-editor-core';
 import { Area, Panel } from '@alilc/lowcode-editor-skeleton';
 
 @observer
@@ -29,7 +29,7 @@ export default class LeftFloatPane extends Component<{ area: Area<any, Panel> }>
       area.skeleton.editor.removeListener('designer.drag', triggerClose);
     };
 
-    this.focusing = focusTracker.create({
+    this.focusing = area.skeleton.focusTracker.create({
       range: (e) => {
         const target = e.target as HTMLElement;
         if (!target) {