perf: 优化模拟器

one-piece-studio · Mar 29, 2024 · 637a6c9 · 637a6c9
1 parent 83345f9
commit 637a6c9
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 30 deletions.
diff --git a/src/app/components/container/simulator.component.ts b/src/app/components/container/simulator.component.ts
@@ -1,35 +1,55 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  TemplateRef
+} 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';
+import { NgTemplateOutlet } from '@angular/common';
+import { ResponsiveService } from '@/app/services/responsive.service';
 
 @Component({
   selector: 'app-simulator',
   template: `
     @if (screen.type === ScreenType.PC) {
       <app-pc-simulator>
-        <ng-content></ng-content>
+        <ng-container *ngTemplateOutlet="template"></ng-container>
       </app-pc-simulator>
     } @else if (screen.type === ScreenType.Mobile) {
-      <!--            <app-mobile-simulator>-->
-      <!--              <ng-content></ng-content>-->
-      <!--            </app-mobile-simulator>-->
+      <app-mobile-simulator>
+        <ng-container *ngTemplateOutlet="template"></ng-container>
+      </app-mobile-simulator>
     } @else {
-      <!--      <app-pc-simulator>-->
-      <!--        <ng-content></ng-content>-->
-      <!--      </app-pc-simulator>-->
+      <app-pc-simulator>
+        <ng-container *ngTemplateOutlet="template"></ng-container>
+      </app-pc-simulator>
     }
   `,
   styles: [``],
   standalone: true,
-  imports: [PcSimulatorComponent, MobileSimulatorComponent],
+  imports: [PcSimulatorComponent, MobileSimulatorComponent, NgTemplateOutlet],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SimulatorComponent {
+export class SimulatorComponent implements AfterViewInit {
+  @ContentChild(TemplateRef) template: TemplateRef<any>;
+
   screen: Screen;
-  constructor(private designer: Engine) {
+  constructor(
+    private designer: Engine,
+    private responsiveService: ResponsiveService,
+    private cdr: ChangeDetectorRef
+  ) {
     this.screen = this.designer.screen;
   }
 
+  ngAfterViewInit(): void {
+    console.log('template>>>', this.template);
+    this.responsiveService.subscribe(() => this.cdr.detectChanges());
+  }
+
   protected readonly ScreenType = ScreenType;
 }
diff --git a/src/app/components/panels/viewport-panel.component.ts b/src/app/components/panels/viewport-panel.component.ts
@@ -9,7 +9,9 @@ import { SimulatorComponent } from '@/app/components/container/simulator.compone
   template: `
     <app-workspace-panel-item [style]="style" [flexible]="flexible">
       <app-simulator>
-        <ng-content></ng-content>
+        <ng-template>
+          <ng-content></ng-content>
+        </ng-template>
       </app-simulator>
     </app-workspace-panel-item>
   `,

diff --git a/src/app/components/simulators/mobile-simulator/mobile-body.component.ts b/src/app/components/simulators/mobile-simulator/mobile-body.component.ts
@@ -29,7 +29,7 @@ import { NgOptimizedImage, NgStyle } from '@angular/common';
             width: screen.flip ? 946.667 : 460,
             height: screen.flip ? 460 : 946.667,
             boxShadow: '0 0 20px #0000004d',
-            borderRadius: 60,
+            borderRadius: '60px',
             backfaceVisibility: 'hidden'
           }"
         />
@@ -70,19 +70,19 @@ export class MobileBodyComponent {
     if (this.screen.flip) {
       return {
         position: 'absolute',
-        width: 736,
-        height: 414,
-        top: 43.3333,
-        left: 106.667,
+        width: '736px',
+        height: '414px',
+        top: '43.3333px',
+        left: '106.667px',
         overflow: 'hidden'
       };
     }
     return {
       position: 'absolute',
-      width: 414,
-      height: 736,
-      top: 126.667,
-      left: 23.3333,
+      width: '414px',
+      height: '736px',
+      top: '126.667px',
+      left: '23.3333px',
       overflow: 'hidden'
     };
   };

diff --git a/src/app/components/widgets/designer-tool/designer-tool.widget.html b/src/app/components/widgets/designer-tool/designer-tool.widget.html
@@ -21,25 +21,25 @@
     </nz-button-group>
   }
 
-  @if (use.includes('SCREEN_TYPE') && screen.type == ScreenType.Responsive){
+  @if (use.includes('SCREEN_TYPE') && screen.type === ScreenType.Responsive){
 
   }
 
   @if (use.includes('SCREEN_TYPE')){
     <nz-button-group nzSize="small" [style]="{marginRight: '20px'}">
-      <button nz-button nzSize="small">
+      <button nz-button nzSize="small" (click)="selectPc()">
         <app-icon icon="Pc"></app-icon>
       </button>
-      <button nz-button nzSize="small">
+      <button nz-button nzSize="small" (click)="selectMobile()">
         <app-icon icon="Mobile"></app-icon>
       </button>
-      <button nz-button nzSize="small">
+      <button nz-button nzSize="small" (click)="selectResponsive()">
         <app-icon icon="Responsive"></app-icon>
       </button>
     </nz-button-group>
   }
 
-  @if (use.includes('SCREEN_TYPE')  && screen.type == ScreenType.Mobile){
+  @if (use.includes('SCREEN_TYPE')  && screen.type === ScreenType.Mobile){
 
   }
 

diff --git a/src/app/components/widgets/designer-tool/designer-tool.widget.ts b/src/app/components/widgets/designer-tool/designer-tool.widget.ts
@@ -1,14 +1,17 @@
-import { Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { usePrefix } from '@/app/utils';
 import { SharedModule } from '@/app/shared/shared.module';
 import { IconWidget } from '@/app/components/widgets/icon/icon.widget';
-import { ScreenType } from '@/app/core/models/screen';
+import { Screen, ScreenType } from '@/app/core/models/screen';
+import { Engine } from '@/app/core/models';
+import { ResponsiveService } from '@/app/services/responsive.service';
 
 @Component({
   selector: 'app-designer-tool-widget',
   standalone: true,
   templateUrl: './designer-tool.widget.html',
-  imports: [SharedModule, IconWidget]
+  imports: [SharedModule, IconWidget],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DesignerToolWidget {
   prefix = usePrefix('designer-tools');
@@ -17,6 +20,29 @@ export class DesignerToolWidget {
 
   @Input() use: string[] = ['HISTORY', 'CURSOR', 'SCREEN_TYPE'];
 
-  screen = { type: ScreenType.PC };
+  screen: Screen;
+
+  constructor(
+    private designer: Engine,
+    private responsiveService: ResponsiveService
+  ) {
+    this.screen = this.designer.screen;
+  }
+
   protected readonly ScreenType = ScreenType;
+
+  selectPc() {
+    this.screen.setType(ScreenType.PC);
+    this.responsiveService.change();
+  }
+
+  selectMobile() {
+    this.screen.setType(ScreenType.Mobile);
+    this.responsiveService.change();
+  }
+
+  selectResponsive() {
+    this.screen.setType(ScreenType.Responsive);
+    this.responsiveService.change();
+  }
 }
diff --git a/src/app/services/responsive.service.ts b/src/app/services/responsive.service.ts
@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ResponsiveService {
+  pageDetection$ = new Subject<boolean>();
+
+  change() {
+    this.pageDetection$.next(true);
+  }
+
+  subscribe(callback: () => void) {
+    this.pageDetection$.subscribe(v => callback());
+  }
+}