perf: 完善拖拽事件

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

@@ -1,16 +1,35 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { PcSimulatorComponent } from '../simulators/pc-simulator/pc-simulator.component';
+import { Engine, Screen, ScreenType } from '@/app/core/models';
+import { MobileSimulatorComponent } from '@/app/components/simulators/mobile-simulator/mobile-simulator.component';
 
 @Component({
   selector: 'app-simulator',
   template: `
-    <app-pc-simulator>
-      <ng-content></ng-content>
-    </app-pc-simulator>
+    @if (screen.type === ScreenType.PC) {
+      <app-pc-simulator>
+        <ng-content></ng-content>
+      </app-pc-simulator>
+    } @else if (screen.type === ScreenType.Mobile) {
+      <!--            <app-mobile-simulator>-->
+      <!--              <ng-content></ng-content>-->
+      <!--            </app-mobile-simulator>-->
+    } @else {
+      <!--      <app-pc-simulator>-->
+      <!--        <ng-content></ng-content>-->
+      <!--      </app-pc-simulator>-->
+    }
   `,
   styles: [``],
   standalone: true,
-  imports: [PcSimulatorComponent],
+  imports: [PcSimulatorComponent, MobileSimulatorComponent],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SimulatorComponent {}
+export class SimulatorComponent {
+  screen: Screen;
+  constructor(private designer: Engine) {
+    this.screen = this.designer.screen;
+  }
+
+  protected readonly ScreenType = ScreenType;
+}

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

@@ -1,15 +1,18 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
 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';
 
 @Component({
   selector: 'app-viewport',
   standalone: true,
   imports: [SharedModule, AuxToolWidget, EmptyWidget],
   template: `
-    <div class="{{ prefix }}">
+    <div class="{{ prefix }}" #containerRef>
       <ng-content></ng-content>
       <app-aux-tool-widget></app-aux-tool-widget>
       <app-empty-widget></app-empty-widget>
@@ -18,6 +21,21 @@ import { EmptyWidget } from '@/app/components/widgets/empty/empty.widget';
   styleUrls: ['../styles/styles.less'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ViewportComponent {
+export class ViewportComponent implements AfterViewInit, OnDestroy {
   prefix = usePrefix('viewport');
+
+  @ViewChild('containerRef') container: ElementRef;
+
+  viewport: Viewport;
+
+  constructor(private designer: Engine) {}
+
+  ngAfterViewInit(): void {
+    this.viewport = this.designer.workbench.currentWorkspace.viewport;
+    this.viewport.onMount(this.container.nativeElement, globalThisPolyfill);
+  }
+
+  ngOnDestroy(): void {
+    this.viewport.onUnmount();
+  }
 }

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

@@ -12,8 +12,6 @@ import { usePrefix } from '@/app/utils';
 import { IconWidget } from '@/app/components/widgets/icon/icon.widget';
 import { SharedModule } from '@/app/shared/shared.module';
 import { IconType } from '@/app/components/icons/icon.type';
-import { IconFactory, IconFactoryProvider } from '@/app/components/icons/icon.factory';
-import { IconRegister } from '@/app/components/icons/icon.register';
 import { TextWidget } from '@/app/components/widgets/text/text.widget';
 import { NgIf } from '@angular/common';
 

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

@@ -9,13 +9,13 @@ import { ViewportComponent } from '@/app/components/container/viewport.component
   standalone: true,
   imports: [WorkspacePanelItemComponent, ViewportComponent],
   template: `
-    @if (workbench.type == 'DESIGNABLE') {
+    @if (workbench.type === 'DESIGNABLE') {
       <app-viewport>
         <ng-content></ng-content>
       </app-viewport>
     } @else {
       <div [style]="defaultStyle()">
-        <ng-content></ng-content>
+        <!--        <ng-content></ng-content>-->
       </div>
     }
   `,

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

@@ -1,13 +1,16 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { WorkspacePanelItemComponent } from './workspace-panel.component';
+import { SimulatorComponent } from '@/app/components/container/simulator.component';
 
 @Component({
   selector: 'app-viewport-panel',
   standalone: true,
-  imports: [WorkspacePanelItemComponent],
+  imports: [WorkspacePanelItemComponent, SimulatorComponent],
   template: `
     <app-workspace-panel-item [style]="style" [flexible]="flexible">
-      <ng-content></ng-content>
+      <app-simulator>
+        <ng-content></ng-content>
+      </app-simulator>
     </app-workspace-panel-item>
   `,
   styles: [

src/app/components/simulators/mobile-simulator/mobile-body.component.ts

@@ -0,0 +1,89 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { usePrefix } from '@/app/utils';
+import { Engine, Screen } from '@/app/core/models';
+import { NgOptimizedImage, NgStyle } from '@angular/common';
+
+@Component({
+  selector: 'app-mobile-body',
+  template: `
+    <div
+      class="{{ prefix }}"
+      [ngStyle]="{
+        alignItems: screen.flip ? 'center' : '',
+        minWidth: screen.flip ? 1000 : 0
+      }"
+    >
+      <div
+        class="{{ prefix }}-wrapper"
+        [ngStyle]="{
+          position: 'relative',
+          minHeight: screen.flip ? 0 : 1000
+        }"
+      >
+        <img
+          [src]="screen.flip ? MockupImages[theme][0] : MockupImages[theme][1]"
+          alt=""
+          [ngStyle]="{
+            display: 'block',
+            margin: '20px 0',
+            width: screen.flip ? 946.667 : 460,
+            height: screen.flip ? 460 : 946.667,
+            boxShadow: '0 0 20px #0000004d',
+            borderRadius: 60,
+            backfaceVisibility: 'hidden'
+          }"
+        />
+        <div class="{{ prefix }}-content" [style]="getContentStyles()">
+          <ng-content></ng-content>
+        </div>
+      </div>
+    </div>
+  `,
+  standalone: true,
+  styleUrls: ['./mobile-simulator.component.less'],
+  imports: [NgOptimizedImage, NgStyle],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MobileBodyComponent {
+  prefix = usePrefix('mobile-simulator-body');
+
+  screen: Screen;
+
+  MockupImages = {
+    dark: [
+      '//img.alicdn.com/imgextra/i3/O1CN01zXMc8W26oJZGUaCK1_!!6000000007708-55-tps-946-459.svg',
+      '//img.alicdn.com/imgextra/i3/O1CN012KWk2i1DLduN7InSK_!!6000000000200-55-tps-459-945.svg'
+    ],
+    light: [
+      '//img.alicdn.com/imgextra/i4/O1CN01vuXGe31tEy00v2xBx_!!6000000005871-55-tps-946-459.svg',
+      '//img.alicdn.com/imgextra/i4/O1CN01ehfzMc1QPqY6HONTJ_!!6000000001969-55-tps-459-945.svg'
+    ]
+  };
+
+  theme: string = 'light';
+
+  constructor(private designer: Engine) {
+    this.screen = designer.screen;
+  }
+
+  getContentStyles = () => {
+    if (this.screen.flip) {
+      return {
+        position: 'absolute',
+        width: 736,
+        height: 414,
+        top: 43.3333,
+        left: 106.667,
+        overflow: 'hidden'
+      };
+    }
+    return {
+      position: 'absolute',
+      width: 414,
+      height: 736,
+      top: 126.667,
+      left: 23.3333,
+      overflow: 'hidden'
+    };
+  };
+}

src/app/components/simulators/mobile-simulator/mobile-simulator.component.less

@@ -0,0 +1,29 @@
+@import '../../../../theme/variables.less';
+
+.@{prefix-cls}-mobile-simulator {
+  position: relative;
+  min-height: 100px;
+  height: 100%;
+  width: 100%;
+  background-color: var(--dn-mobile-simulator-bg-color);
+
+  &-content {
+    width: 100%;
+    top: 0;
+    left: 0;
+    height: 100%;
+    position: absolute;
+    overflow: overlay;
+  }
+
+  &-body {
+    display: flex;
+    justify-content: center;
+    height: 100%;
+
+    &-content {
+      background-color: var(--dn-mobile-simulator-body-bg-color);
+      border: 3px solid var(--dn-mobile-simulator-border-color)
+    }
+  }
+}

src/app/components/simulators/mobile-simulator/mobile-simulator.component.ts

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { usePrefix } from '@/app/utils';
+import { MobileBodyComponent } from './mobile-body.component';
+
+@Component({
+  selector: 'app-mobile-simulator',
+  template: `
+    <div class="{{ prefix }}">
+      <div class="{{ prefix }}-content">
+        <app-mobile-body>
+          <ng-content></ng-content>
+        </app-mobile-body>
+      </div>
+    </div>
+  `,
+  standalone: true,
+  styleUrls: ['./mobile-simulator.component.less'],
+  imports: [MobileBodyComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MobileSimulatorComponent {
+  prefix = usePrefix('mobile-simulator');
+}

src/app/components/styles/styles.less

@@ -327,3 +327,15 @@
     }
   }
 }
+
+
+.@{prefix-cls}-viewport {
+  height: 100%;
+  width: 100%;
+  min-height: 100px;
+  position: relative;
+  outline: none;
+  box-sizing: border-box;
+  user-select: none;
+  overflow: overlay;
+}

src/app/components/types.ts

@@ -0,0 +1,3 @@
+export interface IDesignerComponents {
+  [key: string]: any;
+}

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

@@ -0,0 +1,6 @@
+@import '../../../../theme/variables.less';
+
+.@{prefix-cls}-component-tree {
+  min-height: 100%;
+  min-width: 100%;
+}

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

@@ -0,0 +1,50 @@
+import { AfterViewInit, ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { usePrefix } from '@/app/utils';
+import { TreeNodeWidget } from '../tree-node/tree-node.widget';
+import { IDesignerComponents } from '../../types';
+import { GlobalRegistry } from '@/app/core/registry';
+import { Engine, TreeNode } from '@/app/core/models';
+
+@Component({
+  selector: 'app-component-tree-widget',
+  standalone: true,
+  template: `
+    <div class="{{ prefix }}" [style]="style">
+      <app-tree-node-widget [node]="tree"></app-tree-node-widget>
+    </div>
+  `,
+  styleUrls: ['./component-tree.widget.less'],
+  imports: [TreeNodeWidget],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ComponentTreeWidget implements OnChanges, AfterViewInit {
+  prefix = usePrefix('component-tree');
+
+  @Input() components: IDesignerComponents;
+
+  @Input() style: { [p: string]: any };
+
+  tree: TreeNode;
+
+  displayName = 'ComponentTreeWidget';
+
+  constructor(private designer: Engine) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.components && changes.components.currentValue) {
+      this.registerDesignerBehaviors();
+    }
+  }
+
+  ngAfterViewInit(): void {
+    this.tree = this.useTree();
+  }
+
+  registerDesignerBehaviors() {
+    GlobalRegistry.registerDesignerBehaviors(this.components);
+  }
+
+  useTree() {
+    return this.designer.workbench.currentWorkspace.operation.tree;
+  }
+}