From 637a6c94fd97190c0e806b836dd2c23f2c0cc058 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E8=B1=AA=E7=8F=A3?= <519367854@qq.com> Date: Fri, 29 Mar 2024 17:21:28 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=A8=A1=E6=8B=9F?= =?UTF-8?q?=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../container/simulator.component.ts | 42 ++++++++++++++----- .../panels/viewport-panel.component.ts | 4 +- .../mobile-simulator/mobile-body.component.ts | 18 ++++---- .../designer-tool/designer-tool.widget.html | 10 ++--- .../designer-tool/designer-tool.widget.ts | 34 +++++++++++++-- src/app/services/responsive.service.ts | 17 ++++++++ 6 files changed, 95 insertions(+), 30 deletions(-) create mode 100644 src/app/services/responsive.service.ts diff --git a/src/app/components/container/simulator.component.ts b/src/app/components/container/simulator.component.ts index 48d81d4..25590a3 100644 --- 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) { - + } @else if (screen.type === ScreenType.Mobile) { - - - + + + } @else { - - - + + + } `, 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; + 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 index dcc2bec..cb6f429 100644 --- 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: ` - + + + `, diff --git a/src/app/components/simulators/mobile-simulator/mobile-body.component.ts b/src/app/components/simulators/mobile-simulator/mobile-body.component.ts index bf5585a..8bdc2bb 100644 --- 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 index 84a0571..9df8cf6 100644 --- 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 @@ } - @if (use.includes('SCREEN_TYPE') && screen.type == ScreenType.Responsive){ + @if (use.includes('SCREEN_TYPE') && screen.type === ScreenType.Responsive){ } @if (use.includes('SCREEN_TYPE')){ - - - } - @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 index 07b719d..bbfd911 100644 --- 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 new file mode 100644 index 0000000..b8c7b31 --- /dev/null +++ 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(); + + change() { + this.pageDetection$.next(true); + } + + subscribe(callback: () => void) { + this.pageDetection$.subscribe(v => callback()); + } +}