From 61c012c915cba2a2c60d2ee4828a855f56c2b11e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E8=B1=AA=E7=8F=A3?= <519367854@qq.com>
Date: Sat, 2 Mar 2024 23:10:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E5=8C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../container/designer.component.ts           |  1 -
 .../container/viewport.component.ts           | 19 ++++++++
 .../components/panels/view-panel.component.ts | 48 ++++++++++++++++---
 .../panels/viewport-panel.component.ts        | 15 ++++--
 src/app/core/models/workbench.ts              | 15 ++++++
 src/app/core/models/workspace.ts              |  1 +
 src/app/core/types.ts                         |  2 +
 src/app/pages/home/home.component.html        |  5 ++
 src/app/pages/home/home.component.ts          |  6 ++-
 9 files changed, 99 insertions(+), 13 deletions(-)
 create mode 100644 src/app/components/container/viewport.component.ts
 create mode 100644 src/app/core/models/workbench.ts
 create mode 100644 src/app/core/models/workspace.ts

diff --git a/src/app/components/container/designer.component.ts b/src/app/components/container/designer.component.ts
index e260ca6..0c3a22e 100644
--- a/src/app/components/container/designer.component.ts
+++ b/src/app/components/container/designer.component.ts
@@ -7,7 +7,6 @@ import { APP_PREFIX } from '@/app/constant/constant';
   standalone: true,
   imports: [SharedModule],
   template: `
-    <p>designer works!</p>
     <div [ngClass]="classNameList">
       <ng-content></ng-content>
     </div>
diff --git a/src/app/components/container/viewport.component.ts b/src/app/components/container/viewport.component.ts
new file mode 100644
index 0000000..d83888e
--- /dev/null
+++ b/src/app/components/container/viewport.component.ts
@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { SharedModule } from '../../shared/shared.module';
+import { usePrefix } from '../../utils';
+
+@Component({
+  selector: 'app-viewport',
+  standalone: true,
+  imports: [SharedModule],
+  template: `
+    <div class="{{ prefix }}">
+      <ng-content></ng-content>
+    </div>
+  `,
+  styleUrls: ['../styles/styles.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ViewportComponent {
+  prefix = usePrefix('viewport');
+}
diff --git a/src/app/components/panels/view-panel.component.ts b/src/app/components/panels/view-panel.component.ts
index 1a1f4da..ca792c3 100644
--- a/src/app/components/panels/view-panel.component.ts
+++ b/src/app/components/panels/view-panel.component.ts
@@ -1,15 +1,51 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges, signal, SimpleChanges } from '@angular/core';
+import { WorkspacePanelItemComponent } from '@/app/components/panels/workspace-panel.component';
+import { WorkbenchTypes } from '@/app/core/types';
+import { Workbench } from '@/app/core/models/workbench';
+import { ViewportComponent } from '@/app/components/container/viewport.component';
 
 @Component({
   selector: 'app-view-panel',
   standalone: true,
-  imports: [],
+  imports: [WorkspacePanelItemComponent, ViewportComponent],
   template: `
-    <div>
-      <ng-content></ng-content>
-    </div>
+    @if (workbench.type == 'DESIGNABLE') {
+      <app-viewport>
+        <ng-content></ng-content>
+      </app-viewport>
+    } @else {
+      <div [style]="defaultStyle()">
+        <ng-content></ng-content>
+      </div>
+    }
   `,
   styles: [``],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ViewPanelComponent {}
+export class ViewPanelComponent implements OnChanges {
+  @Input() scrollable: boolean = true;
+
+  @Input() type: WorkbenchTypes;
+
+  @Input() dragTipsDirection?: 'left' | 'right';
+
+  workbench: Workbench = { type: 'DESIGNABLE' } as any;
+
+  defaultStyle = signal({
+    overflow: 'overlay',
+    height: '100%',
+    cursor: 'auto',
+    userSelect: 'text'
+  });
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.scrollable) {
+      this.defaultStyle.set({
+        overflow: this.scrollable ? 'overlay' : 'hidden',
+        height: '100%',
+        cursor: 'auto',
+        userSelect: 'text'
+      });
+    }
+  }
+}
diff --git a/src/app/components/panels/viewport-panel.component.ts b/src/app/components/panels/viewport-panel.component.ts
index e03cb22..bcd40df 100644
--- a/src/app/components/panels/viewport-panel.component.ts
+++ b/src/app/components/panels/viewport-panel.component.ts
@@ -1,15 +1,20 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { WorkspacePanelItemComponent } from './workspace-panel.component';
 
 @Component({
   selector: 'app-viewport-panel',
   standalone: true,
-  imports: [],
+  imports: [WorkspacePanelItemComponent],
   template: `
-    <div>
+    <app-workspace-panel-item [style]="style" [flexible]="flexible">
       <ng-content></ng-content>
-    </div>
+    </app-workspace-panel-item>
   `,
   styles: [``],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ViewportPanelComponent {}
+export class ViewportPanelComponent {
+  @Input() style: { [p: string]: any };
+
+  @Input() flexible: boolean = true;
+}
diff --git a/src/app/core/models/workbench.ts b/src/app/core/models/workbench.ts
new file mode 100644
index 0000000..b86ae68
--- /dev/null
+++ b/src/app/core/models/workbench.ts
@@ -0,0 +1,15 @@
+import { WorkbenchTypes } from '../types';
+import { Engine } from './engine';
+import { Workspace } from './workspace';
+
+export class Workbench {
+  workspaces: Workspace[];
+
+  currentWorkspace: Workspace;
+
+  activeWorkspace: Workspace;
+
+  engine: Engine;
+
+  type: WorkbenchTypes = 'DESIGNABLE';
+}
diff --git a/src/app/core/models/workspace.ts b/src/app/core/models/workspace.ts
new file mode 100644
index 0000000..bbc9961
--- /dev/null
+++ b/src/app/core/models/workspace.ts
@@ -0,0 +1 @@
+export class Workspace {}
diff --git a/src/app/core/types.ts b/src/app/core/types.ts
index 0b34de9..310dc17 100644
--- a/src/app/core/types.ts
+++ b/src/app/core/types.ts
@@ -128,3 +128,5 @@ export type IDesignerIconsStore = IDesignerStore<IDesignerIcons>;
 export type IDesignerLocaleStore = IDesignerStore<IDesignerLocales>;
 export type IDesignerBehaviorStore = IDesignerStore<IBehavior[]>;
 export type IDesignerLanguageStore = IDesignerStore<string>;
+
+export type WorkbenchTypes = 'DESIGNABLE' | 'PREVIEW' | 'JSONTREE' | 'MARKUP' | (string & {});
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index 71bba44..b115a5c 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -17,6 +17,11 @@
           <app-designer-tool-widget></app-designer-tool-widget>
           <app-view-tools-widget></app-view-tools-widget>
         </app-toolbar-panel>
+        <app-viewport-panel>
+          <app-view-panel>
+
+          </app-view-panel>
+        </app-viewport-panel>
       </app-workspace-panel>
       <app-setting-panel>
 
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts
index 753969f..72caf6b 100644
--- a/src/app/pages/home/home.component.ts
+++ b/src/app/pages/home/home.component.ts
@@ -18,6 +18,8 @@ import { DesignerToolWidget } from '@/app/components/widgets/designer-tool/desig
 import { IconFactory, IconFactoryProvider } from '@/app/components/icons/icon.factory';
 import { IconRegister } from '@/app/components/icons/icon.register';
 import { ViewToolsWidget } from '@/app/components/widgets/view-tools/view-tools.widget';
+import { ViewPanelComponent } from '@/app/components/panels/view-panel.component';
+import { ViewportPanelComponent } from '@/app/components/panels/viewport-panel.component';
 
 @Component({
   selector: 'app-home',
@@ -34,7 +36,9 @@ import { ViewToolsWidget } from '@/app/components/widgets/view-tools/view-tools.
     ResourceWidget,
     ToolbarPanelComponent,
     DesignerToolWidget,
-    ViewToolsWidget
+    ViewToolsWidget,
+    ViewPanelComponent,
+    ViewportPanelComponent
   ],
   providers: [{ provide: IconFactory, useClass: IconRegister }, IconFactoryProvider],
   templateUrl: './home.component.html',