feat: 添加selection组件

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

@@ -1,13 +1,35 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, ViewChild } from '@angular/core';
 import { usePrefix } from '@/app/utils';
+import { Engine } from '@/app/core/models';
+import { SelectionWidget } from './selection.widget';
 
 @Component({
   selector: 'app-aux-tool-widget',
-  template: ` <div class="{{ prefix }}"></div> `,
+  template: `
+    <div #ref class="{{ prefix }}">
+      <app-selection-widget></app-selection-widget>
+    </div>
+  `,
   styleUrls: ['./styles.less'],
   standalone: true,
+  imports: [SelectionWidget],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AuxToolWidget {
+export class AuxToolWidget implements AfterViewInit {
   prefix = usePrefix('auxtool');
+
+  @ViewChild('ref') ref: ElementRef;
+
+  constructor(private engine: Engine) {}
+
+  ngAfterViewInit(): void {
+    const element = this.ref.nativeElement;
+    const viewport = this.engine.workbench.currentWorkspace.viewport;
+
+    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/selection.widget.ts

@@ -0,0 +1,115 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+  Renderer2,
+  SimpleChanges,
+  ViewChild
+} 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 { Rect } from '@/app/shared/coordinate';
+
+@Component({
+  selector: 'app-selection-box-widget',
+  template: `
+    <div class="{{ prefix }}" #container style="{{ createSelectionStyle() }}">
+      <div class="{{ innerPrefix }}"></div>
+    </div>
+  `,
+  standalone: true,
+  styleUrls: [`./styles.less`],
+  changeDetection: ChangeDetectionStrategy.Default
+})
+export class SelectionBoxWidget implements OnChanges {
+  @ViewChild('container') container: ElementRef;
+
+  @Input() node: TreeNode;
+
+  @Input() showHelpers: boolean;
+
+  prefix = usePrefix('aux-selection-box');
+
+  innerPrefix = usePrefix('aux-selection-box-inner');
+
+  nodeRect: Rect;
+
+  createSelectionStyle = () => {
+    const baseStyle = {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      boxSizing: 'border-box',
+      zIndex: 4
+    } as any;
+    if (this.nodeRect) {
+      baseStyle.transform = `perspective(1px) translate3d(${this.nodeRect.x}px,${this.nodeRect.y}px,0)`;
+      baseStyle.height = `${this.nodeRect.height}px`;
+      baseStyle.width = `${this.nodeRect.width}px`;
+    }
+    return baseStyle;
+  };
+
+  constructor(
+    private designer: Engine,
+    private renderer2: Renderer2,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.node && changes.node.currentValue) {
+      setTimeout(() => {
+        this.nodeRect = this.designer.workbench.currentWorkspace.viewport.getValidNodeOffsetRect(this.node);
+
+        this.renderer2.setAttribute(
+          this.container.nativeElement,
+          `${this.designer.props?.nodeSelectionIdAttrName}`,
+          this.node.id
+        );
+        this.cdr.markForCheck();
+      });
+    }
+  }
+}
+
+@Component({
+  selector: 'app-selection-widget',
+  template: `
+    @if (cursor.status === 'NORMAL' || !viewportMoveHelper.touchNode) {
+      @for (id of selection.selected; track id) {
+        @if (tree.findById(id) && !tree.findById(id).hidden) {
+          <app-selection-box-widget
+            [node]="tree.findById(id)"
+            [showHelpers]="selection.selected.length === 1"
+          ></app-selection-box-widget>
+        }
+      }
+    }
+  `,
+  standalone: true,
+  imports: [SelectionBoxWidget],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SelectionWidget {
+  selection: Selection;
+
+  cursor: Cursor;
+
+  viewportMoveHelper: MoveHelper;
+
+  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;
+  }
+}

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

@@ -1,4 +1,14 @@
-import { AfterViewInit, ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+  Renderer2,
+  SimpleChanges,
+  ViewChild
+} from '@angular/core';
 import { usePrefix } from '@/app/utils';
 import { TreeNodeWidget } from '../tree-node/tree-node.widget';
 import { IDesignerComponents } from '../../types';
@@ -9,7 +19,7 @@ import { Engine, TreeNode } from '@/app/core/models';
   selector: 'app-component-tree-widget',
   standalone: true,
   template: `
-    <div class="{{ prefix }}" [style]="style">
+    <div class="{{ prefix }}" [style]="style" #container>
       <app-tree-node-widget [node]="tree"></app-tree-node-widget>
     </div>
   `,
@@ -18,6 +28,8 @@ import { Engine, TreeNode } from '@/app/core/models';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ComponentTreeWidget implements OnChanges, AfterViewInit {
+  @ViewChild('container') container: ElementRef;
+
   prefix = usePrefix('component-tree');
 
   @Input() components: IDesignerComponents;
@@ -28,7 +40,10 @@ export class ComponentTreeWidget implements OnChanges, AfterViewInit {
 
   displayName = 'ComponentTreeWidget';
 
-  constructor(private designer: Engine) {}
+  constructor(
+    private designer: Engine,
+    private renderer2: Renderer2
+  ) {}
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.components && changes.components.currentValue) {
@@ -38,6 +53,7 @@ export class ComponentTreeWidget implements OnChanges, AfterViewInit {
 
   ngAfterViewInit(): void {
     this.tree = this.useTree();
+    this.renderer2.setAttribute(this.container.nativeElement, `${this.designer?.props?.nodeIdAttrName}`, this.tree.id);
   }
 
   registerDesignerBehaviors() {