perf: 优化hook逻辑

src/app/components/container/simulator.component.ts

@@ -47,7 +47,6 @@ export class SimulatorComponent implements AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    console.log('template>>>', this.template);
     this.responsiveService.subscribe(() => this.cdr.detectChanges());
   }
 

src/app/components/container/viewport.component.ts

@@ -3,9 +3,9 @@ import { SharedModule } from '../../shared/shared.module';
 import { usePrefix } from '../../utils';
 import { AuxToolWidget } from '@/app/components/widgets/aux-tool/aux-tool.widget';
 import { EmptyWidget } from '@/app/components/widgets/empty/empty.widget';
-import { Engine } from '@/app/core/models';
 import { globalThisPolyfill } from '@/app/shared/globalThisPolyfill';
 import { Viewport } from '@/app/core/models/viewport';
+import { HookService } from '@/app/services/hook.service';
 
 @Component({
   selector: 'app-viewport',
@@ -28,10 +28,10 @@ export class ViewportComponent implements AfterViewInit, OnDestroy {
 
   viewport: Viewport;
 
-  constructor(private designer: Engine) {}
+  constructor(private hookService: HookService) {}
 
   ngAfterViewInit(): void {
-    this.viewport = this.designer.workbench.currentWorkspace.viewport;
+    this.viewport = this.hookService.useViewport();
     this.viewport.onMount(this.container.nativeElement, globalThisPolyfill);
   }
 

src/app/components/panels/view-panel.component.ts

@@ -3,6 +3,7 @@ import { WorkspacePanelItemComponent } from '@/app/components/panels/workspace-p
 import { WorkbenchTypes } from '@/app/core/types';
 import { Workbench } from '@/app/core/models/workbench';
 import { ViewportComponent } from '@/app/components/container/viewport.component';
+import { HookService } from '@/app/services/hook.service';
 
 @Component({
   selector: 'app-view-panel',
@@ -29,7 +30,7 @@ export class ViewPanelComponent implements OnChanges {
 
   @Input() dragTipsDirection?: 'left' | 'right';
 
-  workbench: Workbench = { type: 'DESIGNABLE' } as any;
+  workbench: Workbench;
 
   defaultStyle = signal({
     overflow: 'overlay',
@@ -38,6 +39,10 @@ export class ViewPanelComponent implements OnChanges {
     userSelect: 'text'
   });
 
+  constructor(private hookService: HookService) {
+    this.workbench = this.hookService.useWorkbench();
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.scrollable) {
       this.defaultStyle.set({

src/app/components/widgets/aux-tool/aux-tool.widget.ts

@@ -2,6 +2,7 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, ViewChil
 import { usePrefix } from '@/app/utils';
 import { Engine } from '@/app/core/models';
 import { SelectionWidget } from './selection.widget';
+import { HookService } from '@/app/services/hook.service';
 
 @Component({
   selector: 'app-aux-tool-widget',
@@ -20,12 +21,14 @@ export class AuxToolWidget implements AfterViewInit {
 
   @ViewChild('ref') ref: ElementRef;
 
-  constructor(private engine: Engine) {}
+  constructor(
+    private engine: Engine,
+    private hookService: HookService
+  ) {}
 
   ngAfterViewInit(): void {
     const element = this.ref.nativeElement;
-    const viewport = this.engine.workbench.currentWorkspace.viewport;
-
+    const viewport = this.hookService.useViewport();
     this.engine.subscribeWith('viewport:scroll', () => {
       if (viewport.isIframe && element) {
         element.style.transform = `perspective(1px) translate3d(${-viewport.scrollX}px,${-viewport.scrollY}px,0)`;

src/app/components/widgets/aux-tool/helpers.widget.ts

@@ -12,6 +12,7 @@ import { Engine, TreeNode } from '@/app/core/models';
 import { usePrefix } from '@/app/utils';
 import { SelectorWidget } from '@/app/components/widgets/aux-tool/selector.widget';
 import { Viewport } from '@/app/core/models/viewport';
+import { HookService } from '@/app/services/hook.service';
 
 @Component({
   selector: 'app-helpers-widget',
@@ -42,32 +43,21 @@ export class HelpersWidget implements OnChanges {
 
   viewport: Viewport;
 
-  promise: Promise<void>;
-
-  resolve: () => void;
-
-  reject: (error) => void;
-
   constructor(
     private designer: Engine,
-    private cdr: ChangeDetectorRef
+    private cdr: ChangeDetectorRef,
+    private hookService: HookService
   ) {
-    this.viewport = this.designer.workbench.currentWorkspace.viewport;
-    this.promise = new Promise((resolve, reject) => {
-      this.resolve = resolve;
-      this.reject = reject;
-    });
+    this.viewport = this.hookService.useViewport();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.nodeRect && changes.nodeRect.currentValue) {
-      this.update();
-      this.resolve();
+      setTimeout(() => this.update());
     }
   }
 
-  async update() {
-    await this.promise;
+  update() {
     const helpersRect = this.container?.nativeElement?.getBoundingClientRect();
     if (!helpersRect || !this.nodeRect) return;
     this.position =

src/app/components/widgets/aux-tool/selection.widget.ts

@@ -1,11 +1,21 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnChanges,
+  SimpleChanges
+} from '@angular/core';
 import { usePrefix } from '@/app/utils';
 import { Engine, TreeNode } from '@/app/core/models';
 import { Selection } from '@/app/core/models/selection';
 import { Cursor } from '@/app/core/models/cursor';
 import { MoveHelper } from '@/app/core/models/move-helper';
 import { AttributeDirective } from '@/app/directive';
 import { HelpersWidget } from '@/app/components/widgets/aux-tool/helpers.widget';
+import { fromEvent } from 'rxjs';
+import { HookService } from '@/app/services/hook.service';
 
 @Component({
   selector: 'app-selection-box-widget',
@@ -22,7 +32,7 @@ import { HelpersWidget } from '@/app/components/widgets/aux-tool/helpers.widget'
   imports: [AttributeDirective, HelpersWidget],
   changeDetection: ChangeDetectionStrategy.Default
 })
-export class SelectionBoxWidget implements OnChanges {
+export class SelectionBoxWidget implements OnChanges, AfterViewInit {
   @Input() node: TreeNode;
 
   @Input() showHelpers: boolean;
@@ -52,17 +62,22 @@ export class SelectionBoxWidget implements OnChanges {
   };
   constructor(
     private designer: Engine,
-    private cdr: ChangeDetectorRef
+    private cdr: ChangeDetectorRef,
+    private hookService: HookService
   ) {}
 
+  ngAfterViewInit(): void {
+    fromEvent(window, 'resize').subscribe(() => this.update());
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.node && changes.node.currentValue) {
       setTimeout(() => this.update());
     }
   }
 
   update() {
-    this.nodeRect = this.designer.workbench.currentWorkspace.viewport.getValidNodeOffsetRect(this.node) as any;
+    this.nodeRect = this.hookService.useViewport().getValidNodeOffsetRect(this.node) as any;
     this.attributes = {
       [this.designer.props?.nodeSelectionIdAttrName]: this.node.id
     };
@@ -97,11 +112,10 @@ export class SelectionWidget {
 
   tree: TreeNode;
 
-  constructor(private designer: Engine) {
-    const operation = this.designer.workbench.currentWorkspace.operation;
-    this.selection = operation.selection;
-    this.viewportMoveHelper = operation.moveHelper;
-    this.tree = operation.tree;
-    this.cursor = this.designer.cursor;
+  constructor(private hookService: HookService) {
+    this.selection = this.hookService.useSelection();
+    this.viewportMoveHelper = this.hookService.useMoveHelper();
+    this.tree = this.hookService.useTree();
+    this.cursor = this.hookService.useCursor();
   }
 }

src/app/components/widgets/component-tree/component-tree.widget.ts

@@ -13,6 +13,7 @@ import { IDesignerComponents } from '../../types';
 import { GlobalRegistry } from '@/app/core/registry';
 import { Engine, TreeNode } from '@/app/core/models';
 import { AttributeDirective } from '@/app/directive';
+import { HookService } from '@/app/services/hook.service';
 
 @Component({
   selector: 'app-component-tree-widget',
@@ -41,7 +42,8 @@ export class ComponentTreeWidget implements OnChanges, AfterViewInit {
 
   constructor(
     private designer: Engine,
-    private cdr: ChangeDetectorRef
+    private cdr: ChangeDetectorRef,
+    private hookService: HookService
   ) {}
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -51,7 +53,7 @@ export class ComponentTreeWidget implements OnChanges, AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    this.tree = this.useTree();
+    this.tree = this.hookService.useTree();
     this.attributes = {
       [this.designer?.props?.nodeIdAttrName]: this.tree.id
     };
@@ -61,8 +63,4 @@ export class ComponentTreeWidget implements OnChanges, AfterViewInit {
   registerDesignerBehaviors() {
     GlobalRegistry.registerDesignerBehaviors(this.components);
   }
-
-  useTree() {
-    return this.designer.workbench.currentWorkspace.operation.tree;
-  }
 }

src/app/components/widgets/empty/empty.widget.ts

@@ -2,6 +2,7 @@ import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, I
 import { usePrefix } from '@/app/utils';
 import { IconWidget } from '../icon/icon.widget';
 import { Engine, TreeNode } from '@/app/core/models';
+import { HookService } from '@/app/services/hook.service';
 
 @Component({
   selector: 'app-empty-widget',
@@ -41,18 +42,15 @@ export class EmptyWidget implements AfterViewInit {
   tree: TreeNode;
   constructor(
     private designer: Engine,
-    private cdr: ChangeDetectorRef
+    private cdr: ChangeDetectorRef,
+    private hookService: HookService
   ) {}
 
   ngAfterViewInit(): void {
-    this.tree = this.useTree();
+    this.tree = this.hookService.useTree();
 
     setInterval(() => {
       this.cdr.markForCheck();
     }, 1000);
   }
-
-  useTree() {
-    return this.designer.workbench.currentWorkspace.operation.tree;
-  }
 }

src/app/services/hook.service.ts

@@ -0,0 +1,68 @@
+import { Injectable } from '@angular/core';
+import { Engine } from '../core/models';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HookService {
+  constructor(private designer: Engine) {}
+
+  useDesigner() {
+    return this.designer;
+  }
+
+  useCursor() {
+    return this.designer.cursor;
+  }
+
+  useWorkbench() {
+    return this.designer.workbench;
+  }
+
+  useScreen() {
+    return this.designer.screen;
+  }
+
+  useWorkspace(workspaceId?: string) {
+    if (workspaceId) {
+      return this.designer.workbench.findWorkspaceById(workspaceId);
+    } else {
+      return this.designer.workbench.currentWorkspace;
+    }
+  }
+
+  useOperation(workspaceId?: string) {
+    const workspace = this.useWorkspace(workspaceId);
+    return workspace?.operation;
+  }
+
+  useSelection(workspaceId?: string) {
+    const operation = this.useOperation(workspaceId);
+    return operation?.selection;
+  }
+
+  useTree(workspaceId?: string) {
+    const operation = this.useOperation(workspaceId);
+    return operation?.tree;
+  }
+
+  useTransformHelper(workspaceId?: string) {
+    const operation = this.useOperation(workspaceId);
+    return operation?.transformHelper;
+  }
+
+  useMoveHelper(workspaceId?: string) {
+    const operation = this.useOperation(workspaceId);
+    return operation?.moveHelper;
+  }
+
+  useViewport(workspaceId?: string) {
+    const workspace = this.useWorkspace(workspaceId);
+    return workspace?.viewport;
+  }
+
+  useOutline(workspaceId?: string) {
+    const workspace = this.useWorkspace(workspaceId);
+    return workspace?.outline;
+  }
+}