feat: 添加model对象

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

@@ -1,9 +1,30 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Optional } from '@angular/core';
+import { usePrefix } from '../../../utils';
+import { NodeTitleWidget } from '../node-title/node-title.widget';
+import { Engine } from '../../../core/models';
+import { Cursor, CursorStatus } from '../../../core/models/cursor';
 
 @Component({
   selector: 'app-ghost',
   standalone: true,
-  template: ``,
+  template: `
+    @if (cursor.status === CursorStatus.Dragging) {
+      <div class="{{ prefix }}">
+        <span style="white-space: nowrap">
+          <app-node-title-widget></app-node-title-widget>
+        </span>
+      </div>
+    }
+  `,
+  imports: [NodeTitleWidget],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class GhostWidget {}
+export class GhostWidget {
+  prefix = usePrefix('ghost');
+  constructor(
+    @Optional() public designer: Engine,
+    @Optional() public cursor: Cursor
+  ) {}
+
+  protected readonly CursorStatus = CursorStatus;
+}

src/app/components/widgets/node-title/node-title.widget.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { TreeNode } from '../../../core/models';
+
+@Component({
+  selector: 'app-node-title-widget',
+  standalone: true,
+  template: ` {{ node.getMessage('title') || node.componentName }} `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class NodeTitleWidget implements OnChanges {
+  @Input() node: TreeNode;
+
+  currentNode: TreeNode;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.node && changes.node.currentValue) {
+      this.currentNode = this.takeNode(this.node);
+    }
+  }
+
+  private takeNode(node: TreeNode) {
+    if (node.componentName === '$$ResourceNode$$') {
+      return node.children[0];
+    }
+    return node;
+  }
+}

src/app/core/models/cursor.ts

@@ -113,4 +113,54 @@ export class Cursor {
   constructor(engine: Engine) {
     this.engine = engine;
   }
+
+  get speed() {
+    return Math.sqrt(Math.pow(this.dragAtomDelta.clientX, 2) + Math.pow(this.dragAtomDelta.clientY, 2));
+  }
+
+  setStatus(status: CursorStatus) {
+    this.status = status;
+  }
+
+  setType(type: CursorType | string) {
+    this.type = type;
+  }
+
+  setDragType(type: CursorDragType | string) {
+    this.dragType = type;
+  }
+
+  setStyle(style: string) {
+    this.engine.workbench.eachWorkspace(workspace => {
+      setCursorStyle(workspace.viewport.contentWindow, style);
+    });
+  }
+
+  setPosition(position?: ICursorPosition) {
+    this.dragAtomDelta = calcPositionDelta(this.position, position);
+    this.position = { ...position };
+    if (this.status === CursorStatus.Dragging) {
+      this.dragStartToCurrentDelta = calcPositionDelta(this.position, this.dragStartPosition);
+    }
+  }
+
+  setDragStartPosition(position?: ICursorPosition) {
+    if (position) {
+      this.dragStartPosition = { ...position };
+    } else {
+      this.dragStartPosition = null;
+      this.dragStartToCurrentDelta = DEFAULT_POSITION;
+    }
+  }
+
+  setDragEndPosition(position?: ICursorPosition) {
+    if (!this.dragStartPosition) return;
+    if (position) {
+      this.dragEndPosition = { ...position };
+      this.dragStartToEndDelta = calcPositionDelta(this.dragStartPosition, this.dragEndPosition);
+    } else {
+      this.dragEndPosition = null;
+      this.dragStartToEndDelta = DEFAULT_POSITION;
+    }
+  }
 }

src/app/core/models/engine.ts

@@ -3,6 +3,7 @@ import { IEngineProps } from '@/app/shared/types';
 import { Cursor } from '@/app/core/models/cursor';
 import { Screen } from '@/app/core/models/screen';
 import { uid } from '@/app/shared/uid';
+import { TreeNode } from '@/app/core/models/tree-node';
 
 export class Engine {
   id: string;
@@ -28,4 +29,16 @@ export class Engine {
     this.cursor = new Cursor(this);
     // this.keyboard = new Keyboard(this)
   }
+
+  findMovingNodes(): TreeNode[] {
+    const results = [];
+    this.workbench.eachWorkspace(workspace => {
+      workspace.operation.moveHelper.dragNodes?.forEach(node => {
+        if (!results.includes(node)) {
+          results.push(node);
+        }
+      });
+    });
+    return results;
+  }
 }

src/app/core/models/workbench.ts

@@ -34,4 +34,8 @@ export class Workbench {
       // setWorkbenchType: action
     });
   }
+
+  eachWorkspace<T>(callbackFn: (value: Workspace, index: number) => T) {
+    this.workspaces.forEach(callbackFn);
+  }
 }