diff --git a/.circleci/config.yml b/.circleci/config.yml new file mode 100644 index 000000000..45cf3be9b --- /dev/null +++ b/.circleci/config.yml @@ -0,0 +1,33 @@ +version: 2 +jobs: + build: + docker: + # specify the version you desire here + - image: circleci/node:10.12 + + # Specify service dependencies here if necessary + # CircleCI maintains a library of pre-built images + # documented at https://circleci.com/docs/2.0/circleci-images/ + # - image: circleci/mongo:3.4.4 + + working_directory: ~/repo + + steps: + - checkout + + # Download and cache dependencies + - restore_cache: + keys: + - v1-dependencies-{{ checksum "package.json" }} + # fallback to using the latest cache if no exact match is found + - v1-dependencies- + + - run: yarn install + + - save_cache: + paths: + - node_modules + key: v1-dependencies-{{ checksum "package.json" }} + + # run tests! + - run: yarn test \ No newline at end of file diff --git a/package.json b/package.json index 047d97dde..57d15d61d 100644 --- a/package.json +++ b/package.json @@ -34,8 +34,6 @@ "@ngxs/store": "^3.3.0", "@stackblitz/sdk": "^1.2.0", "@types/file-saver": "^2.0.0", - "angular-draggable-droppable": "^4.0.2", - "angular-resizable-element": "^3.2.2", "big-integer": "^1.6.36", "buffer": "^5.2.1", "core-js": "^2.5.7", diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts index 6f07113d5..3ff334675 100644 --- a/src/app/core/core.module.ts +++ b/src/app/core/core.module.ts @@ -19,9 +19,8 @@ import { MatTabsModule } from '@angular/material/tabs'; import { MatToolbarModule } from '@angular/material/toolbar'; import { MatTooltipModule } from '@angular/material/tooltip'; import { MatTreeModule } from '@angular/material/tree'; -import { ResizableModule } from 'angular-resizable-element'; +import { DragDropModule } from '@angular/cdk/drag-drop'; import { ColorSketchModule } from 'ngx-color/sketch'; -import { DragAndDropModule } from 'angular-draggable-droppable'; const MatModules = [ MatSliderModule, @@ -41,15 +40,11 @@ const MatModules = [ MatButtonToggleModule, MatMenuModule, MatTooltipModule, - MatSelectModule + MatSelectModule, + DragDropModule ]; -const ExtraModules = [ - DragAndDropModule, - ResizableModule, - FormsModule, - ColorSketchModule -]; +const ExtraModules = [FormsModule, ColorSketchModule]; @NgModule({ imports: [...MatModules, ...ExtraModules], diff --git a/src/app/editor/code-editor/editor-container/codegen/codegen.service.spec.ts b/src/app/editor/code-editor/editor-container/codegen/codegen.service.spec.ts index 2e05b10d9..6647ea7ee 100644 --- a/src/app/editor/code-editor/editor-container/codegen/codegen.service.spec.ts +++ b/src/app/editor/code-editor/editor-container/codegen/codegen.service.spec.ts @@ -1,14 +1,22 @@ import { TestBed, inject } from '@angular/core/testing'; import { CodeGenService } from './codegen.service'; +import { NgxsModule } from '@ngxs/store'; +import { UiState } from 'src/app/core/state'; +import { CodeGenState } from 'src/app/core/state/page.state'; +import { MatSnackBarModule } from '@angular/material/snack-bar'; describe('CodeGenService', () => { beforeEach(() => { TestBed.configureTestingModule({ - providers: [CodeGenService] + providers: [CodeGenService], + imports: [NgxsModule.forRoot([UiState, CodeGenState]), MatSnackBarModule] }); }); - it('should be created', inject([CodeGenService], (service: CodeGenService) => { - expect(service).toBeTruthy(); - })); + it('should be created', inject( + [CodeGenService], + (service: CodeGenService) => { + expect(service).toBeTruthy(); + } + )); }); diff --git a/src/app/editor/code-editor/editor-container/editor-container.component.spec.ts b/src/app/editor/code-editor/editor-container/editor-container.component.spec.ts index 5232bc554..d64364df0 100644 --- a/src/app/editor/code-editor/editor-container/editor-container.component.spec.ts +++ b/src/app/editor/code-editor/editor-container/editor-container.component.spec.ts @@ -1,29 +1,54 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { EditorContainerComponent } from './editor-container.component'; import { NO_ERRORS_SCHEMA } from '@angular/core'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { MatMenuModule } from '@angular/material/menu'; +import { MatSnackBarModule } from '@angular/material/snack-bar'; +import { NgxsModule, Store } from '@ngxs/store'; +import { UiState } from 'src/app/core/state'; +import { CodeGenState, CodeGenSettings } from 'src/app/core/state/page.state'; +import { EditorContainerComponent } from './editor-container.component'; +import { CodeGenService } from './codegen/codegen.service'; + +const codeGenService = { + generate() { return []; } +}; describe('EditorContainerComponent', () => { let component: EditorContainerComponent; let fixture: ComponentFixture; + let store: Store; beforeEach(async(() => { TestBed.configureTestingModule({ schemas: [NO_ERRORS_SCHEMA], - imports: [MatMenuModule], - declarations: [ EditorContainerComponent ] - }) - .compileComponents(); + imports: [ + NgxsModule.forRoot([UiState, CodeGenState]), + MatMenuModule, + MatSnackBarModule + ], + providers: [ + { + provide: CodeGenService, + useValue: codeGenService + } + ], + declarations: [EditorContainerComponent] + }).compileComponents(); + + store = TestBed.get(Store); })); beforeEach(() => { fixture = TestBed.createComponent(EditorContainerComponent); component = fixture.componentInstance; + component.files = []; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); + store.selectOnce(state => state.codegen).subscribe((codegen: CodeGenSettings) => { + expect(codegen.content).toBe([]); + expect(codegen.kind).toBe(1 /* CodeGenService.Kind.Angular */ ); + }); }); }); diff --git a/src/app/editor/editor.component.html b/src/app/editor/editor.component.html index 96eef40b4..cee5d4d4d 100644 --- a/src/app/editor/editor.component.html +++ b/src/app/editor/editor.component.html @@ -50,14 +50,10 @@ @@ -116,15 +112,11 @@ diff --git a/src/app/editor/editor.component.ts b/src/app/editor/editor.component.ts index 69c321425..d797da836 100644 --- a/src/app/editor/editor.component.ts +++ b/src/app/editor/editor.component.ts @@ -3,7 +3,17 @@ import { MatExpansionPanel } from '@angular/material/expansion'; import { MatDrawerContainer } from '@angular/material/sidenav'; import { Store } from '@ngxs/store'; import * as FileSaver from 'file-saver'; -import { CurrentLayer, CurrentPage, ResetUiSettings, Toggle3D, ToggleCodeEditor, ToggleWireframe, UiState, ZoomIn, ZoomOut } from 'src/app/core/state'; +import { + CurrentLayer, + CurrentPage, + ResetUiSettings, + Toggle3D, + ToggleCodeEditor, + ToggleWireframe, + UiState, + ZoomIn, + ZoomOut +} from 'src/app/core/state'; import { environment } from '../../environments/environment'; import { CodeGenState, CodeGenSettings } from '../core/state/page.state'; import { XlayersNgxEditorModel } from './code-editor/editor-container/codegen/codegen.service'; @@ -107,9 +117,11 @@ export class EditorComponent implements OnInit { this.currentLayerNavRef.close(); } }); - this.store.select(UiState.isSettingsEnabled).subscribe(isEnbaledSettings => { - this.enabled = isEnbaledSettings; - }); + this.store + .select(UiState.isSettingsEnabled) + .subscribe(isEnbaledSettings => { + this.enabled = isEnbaledSettings; + }); this.store.select(CodeGenState.codegen).subscribe(codegen => { this.codegen = codegen; @@ -138,7 +150,7 @@ export class EditorComponent implements OnInit { return page && page.name; } - changeBackgroundColor(event) { + changeBackgroundColor(event: any) { const c = event.color.rgb; if (c.a === 0) { this.colors.background = 'transparent'; @@ -150,6 +162,7 @@ export class EditorComponent implements OnInit { ZoomIn() { this.store.dispatch(new ZoomIn()); } + ZoomOut() { this.store.dispatch(new ZoomOut()); } @@ -159,14 +172,6 @@ export class EditorComponent implements OnInit { this.store.dispatch(new Toggle3D(this.is3dView)); } - onResizeSettingMenuEnd(event) { - this.settingMenuWidth = event.rectangle.width; - } - - onResizeTreeViewerEnd(event) { - this.settingTreeViewerWidth = event.rectangle.width; - } - async share() { await this.exporter.export(this.codegen); } @@ -176,7 +181,7 @@ export class EditorComponent implements OnInit { this.codegen.content.forEach(file => { zip.file(file.uri, file.value); }); - const content = await zip.generateAsync({type: 'blob'}); + const content = await zip.generateAsync({ type: 'blob' }); FileSaver.saveAs(content, 'xLayers.zip'); } diff --git a/src/app/editor/viewer/lib/sketch-canvas.component.ts b/src/app/editor/viewer/lib/sketch-canvas.component.ts index ad34b4e29..224f4e51f 100644 --- a/src/app/editor/viewer/lib/sketch-canvas.component.ts +++ b/src/app/editor/viewer/lib/sketch-canvas.component.ts @@ -1,4 +1,12 @@ -import { AfterViewInit, Component, ElementRef, Input, OnInit, Renderer2, ViewChild } from '@angular/core'; +import { + AfterViewInit, + Component, + ElementRef, + Input, + OnInit, + Renderer2, + ViewChild +} from '@angular/core'; import { Store } from '@ngxs/store'; import { UiState } from 'src/app/core/state'; import { SketchData } from './sketch.service'; @@ -8,58 +16,59 @@ import { SketchData } from './sketch.service'; template: `
+ #canvas + >
+ [page]="currentPage" + >
`, styles: [ ` - :host { - width: 100%; - height: 100%; - transform: none; - overflow: visible; - transform-style: preserve-3d; - transition: transform 1s; - } - :host(.is-3d-view) { - perspective: 9000px; - transform: rotateY(22deg) rotateX(30deg); - } - img { - left: 2px; - top: 2px; - } - .canvas { - cursor: move; - left: 50%; - position: absolute; - transform-style: preserve-3d; - transform-origin: 50% 50%; - transform: translate3d(-50%, 50%, 0px) scale(1); - } - .canvas img { - opacity: 1; - transition: opacity 0.1s linear; - } - .canvas .hidden img { - opacity: 0; - } - ` + :host { + width: 100%; + height: 100%; + transform: none; + overflow: visible; + transform-style: preserve-3d; + transition: transform 1s; + } + :host(.is-3d-view) { + perspective: 9000px; + transform: rotateY(22deg) rotateX(30deg); + } + img { + left: 2px; + top: 2px; + } + .canvas { + cursor: move; + left: 50%; + position: absolute; + transform-style: preserve-3d; + transform-origin: 50% 50%; + transform: translate3d(-50%, 50%, 0px) scale(1); + } + .canvas img { + opacity: 1; + transition: opacity 0.1s linear; + } + .canvas .hidden img { + opacity: 0; + } + ` ] }) export class SketchCanvasComponent implements OnInit, AfterViewInit { @@ -74,7 +83,11 @@ export class SketchCanvasComponent implements OnInit, AfterViewInit { data: SketchData; - constructor(private store: Store, private renderer: Renderer2, private element: ElementRef) {} + constructor( + private store: Store, + private renderer: Renderer2, + private element: ElementRef + ) {} ngOnInit() { this.store.select(UiState.currentFile).subscribe(currentFile => { @@ -106,17 +119,17 @@ export class SketchCanvasComponent implements OnInit, AfterViewInit { } } - dragStart(event) { + dragStart(_event: DragEvent) { this.originPositionX = this.positionX; this.originPositionY = this.positionY; } - dragging(event) { + dragging(event: DragEvent) { this.positionX = this.originPositionX + event.x; this.positionY = this.originPositionY + event.y; } - dragEnd(event) { + dragEnd(event: DragEvent) { this.originPositionX += event.x; this.originPositionY += event.y; } diff --git a/src/app/editor/viewer/lib/sketch-container.component.spec.ts b/src/app/editor/viewer/lib/sketch-container.component.spec.ts index eec839a17..eaa74f963 100644 --- a/src/app/editor/viewer/lib/sketch-container.component.spec.ts +++ b/src/app/editor/viewer/lib/sketch-container.component.spec.ts @@ -26,18 +26,14 @@ fdescribe('SketchContainerComponent', () => { imports: [ NgxsModule.forRoot([UiState, CodeGenState]), MatSnackBarModule, - // HttpClientModule, HttpClientTestingModule, NoopAnimationsModule ], - providers: [ - SketchService - ], + providers: [SketchService], declarations: [SketchContainerComponent] - }) - .compileComponents(); - store = TestBed.get(Store); - sketchService = TestBed.get(SketchService); + }).compileComponents(); + store = TestBed.get(Store); + sketchService = TestBed.get(SketchService); })); beforeEach(() => { @@ -52,17 +48,22 @@ fdescribe('SketchContainerComponent', () => { expect(component).toBeTruthy(); }); - it('should process selected file', async() => { - spyOn(sketchService, 'process').and.returnValue(Promise.resolve(mockSketchData)); + it('should process selected file', async () => { + spyOn(sketchService, 'process').and.returnValue( + Promise.resolve(mockSketchData) + ); await component.onFileSelected(mockFile); - expect(component.data).toBe(mockSketchData); + + store.selectOnce(UiState.currentFile).subscribe(data => { + expect(data).toEqual(mockSketchData); + }); }); describe('should clear current page', () => { it('currentPage is truthy', async(() => { component.currentPage = {} as any; component.clearSelection(); - store.select(UiState.currentLayer).subscribe((element) => { + store.select(UiState.currentLayer).subscribe(element => { expect(element).toBe(null); }); })); @@ -70,7 +71,7 @@ fdescribe('SketchContainerComponent', () => { it('currentPage is falsy', async(() => { component.currentPage = null; component.clearSelection(); - store.select(UiState.currentLayer).subscribe((element) => { + store.select(UiState.currentLayer).subscribe(element => { expect(element).toBe(null); }); })); diff --git a/src/app/editor/viewer/lib/sketch-container.component.ts b/src/app/editor/viewer/lib/sketch-container.component.ts index bc131db00..43d20b7b8 100644 --- a/src/app/editor/viewer/lib/sketch-container.component.ts +++ b/src/app/editor/viewer/lib/sketch-container.component.ts @@ -1,6 +1,11 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { Store } from '@ngxs/store'; -import { CurrentFile, CurrentLayer, InformUser, UiState } from 'src/app/core/state'; +import { + CurrentFile, + CurrentLayer, + InformUser, + UiState +} from 'src/app/core/state'; import { SketchSelectedLayerDirective } from './selected-layer.directive'; import { SketchService } from './sketch.service'; @@ -11,38 +16,43 @@ import { SketchService } from './sketch.service'; -
- +
+
`, styles: [ - ` - :host { - width: 100%; - height: 100%; - justify-content: center; - top: 64px; - position: absolute; - transform: scale(1); - transform-origin: center; - } + ` + :host { + width: 100%; + height: 100%; + justify-content: center; + top: 64px; + position: absolute; + transform: scale(1); + transform-origin: center; + } - .layers-container { - display: flex; - justify-content: center; - width: 100%; - height: 100%; - min-height: 100%; - position: absolute; - top: 64px; - } + .layers-container { + display: flex; + justify-content: center; + width: 100%; + height: 100%; + min-height: 100%; + position: absolute; + top: 64px; + } - sketch-layer { - top: 0; - left: 0; - position: absolute; - } - ` + sketch-layer { + top: 0; + left: 0; + position: absolute; + } + ` ] }) export class SketchContainerComponent implements OnInit { @@ -78,8 +88,6 @@ export class SketchContainerComponent implements OnInit { } clearSelection() { - if (this.currentPage) { - this.store.dispatch(new CurrentLayer(null)); - } + this.store.dispatch(new CurrentLayer(null)); } } diff --git a/src/app/editor/viewer/lib/sketch-layer.component.mock.ts b/src/app/editor/viewer/lib/sketch-layer.component.mock.ts index eff3b8d2e..59e9af866 100644 --- a/src/app/editor/viewer/lib/sketch-layer.component.mock.ts +++ b/src/app/editor/viewer/lib/sketch-layer.component.mock.ts @@ -1,34 +1,7 @@ -import { ResizeEvent } from 'angular-resizable-element'; - -export function getResizeEventMock({ - positive = true, - top = true, - bottom = true, - left = true, - right = true -}: { - positive?: boolean; - top?: boolean; - bottom?: boolean; - left?: boolean; - right?: boolean; -} = {}) { - return { - rectangle: { - width: right && 38, - height: bottom && 98 - }, - edges: { - top: top && (positive ? 917 : -67), - left: left && (positive ? 578 : -346) - } - } as ResizeEvent; -} - export function getFrameMock(x: number, y: number) { return { - x, - y + x, + y } as SketchMSRect; } @@ -36,7 +9,7 @@ export function getFlatLayerMock(layer_number: number = 1) { return { do_objectID: `page-layer`, _class: 'page', - layers: Array.from(Array(layer_number).keys()).map((index) => ({ + layers: Array.from(Array(layer_number).keys()).map(index => ({ do_objectID: `layer-${index}-id`, _class: 'layer', layers: [], diff --git a/src/app/editor/viewer/lib/sketch-layer.component.spec.ts b/src/app/editor/viewer/lib/sketch-layer.component.spec.ts index de21629a6..c0b9db60e 100644 --- a/src/app/editor/viewer/lib/sketch-layer.component.spec.ts +++ b/src/app/editor/viewer/lib/sketch-layer.component.spec.ts @@ -1,13 +1,11 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { SketchLayerComponent } from './sketch-layer.component'; import { NO_ERRORS_SCHEMA } from '@angular/core'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { MatSnackBarModule } from '@angular/material/snack-bar'; import { NgxsModule, Store } from '@ngxs/store'; -import { ResizeEvent } from 'angular-resizable-element'; import { UiState } from '../../../core/state'; import { CodeGenState } from '../../../core/state/page.state'; -import { getFlatLayerMock, getResizeEventMock, getFrameMock } from './sketch-layer.component.mock'; -import { MatSnackBarModule } from '@angular/material/snack-bar'; +import { SketchLayerComponent } from './sketch-layer.component'; +import { getFrameMock } from './sketch-layer.component.mock'; describe('SketchLayerComponent', () => { let component: SketchLayerComponent; @@ -19,8 +17,7 @@ describe('SketchLayerComponent', () => { schemas: [NO_ERRORS_SCHEMA], imports: [NgxsModule.forRoot([UiState, CodeGenState]), MatSnackBarModule], declarations: [SketchLayerComponent] - }) - .compileComponents(); + }).compileComponents(); })); beforeEach(() => { @@ -30,13 +27,15 @@ describe('SketchLayerComponent', () => { component.layer = { do_objectID: `page-layer`, _class: 'page', - layers: [{ - do_objectID: `layer-0-id`, - _class: 'layer', - layers: [], - frame: getFrameMock(412, 422), - name: `layer-0` - }], + layers: [ + { + do_objectID: `layer-0-id`, + _class: 'layer', + layers: [], + frame: getFrameMock(412, 422), + name: `layer-0` + } + ], frame: getFrameMock(824, 918), name: `page-layer` } as SketchMSLayer; @@ -47,56 +46,8 @@ describe('SketchLayerComponent', () => { expect(component).toBeTruthy(); }); - describe('when resize', () => { - it('should work for positive left and top', (done: DoneFn) => { - const resizeEvent = { - rectangle: { - width: 238, - height: 218, - top: 0, - left: 0, - bottom: 0, - right: 0 - }, - edges: { - top: 917, - left: 578, - } - }; - component.resizeStart(resizeEvent); - component.resizing(resizeEvent); - component.resizeEnd(resizeEvent); - store.select(UiState.currentLayer).subscribe((element) => { - expect(element.frame.x).toBe(resizeEvent.edges.left); - expect(element.frame.y).toBe(resizeEvent.edges.top); - done(); - }); - }); - - it('should work for negative left and top', (done: DoneFn) => { - const resizeEvent = { - rectangle: { - width: 45, - height: 435 - }, - edges: { - top: -424, - left: -745, - } - } as ResizeEvent; - component.resizeStart(resizeEvent); - component.resizing(resizeEvent); - component.resizeEnd(resizeEvent); - store.select(UiState.currentLayer).subscribe((element) => { - expect(element.frame.x).toBe(resizeEvent.edges.left); - expect(element.frame.y).toBe(resizeEvent.edges.top); - done(); - }); - }); - }); - it('should select layer', (done: DoneFn) => { - store.select(UiState.currentLayer).subscribe((element) => { + store.select(UiState.currentLayer).subscribe(element => { if (element !== null) { expect(element).toEqual(component.layer); done(); diff --git a/src/app/editor/viewer/lib/sketch-layer.component.ts b/src/app/editor/viewer/lib/sketch-layer.component.ts index 4705daabd..030b8b406 100644 --- a/src/app/editor/viewer/lib/sketch-layer.component.ts +++ b/src/app/editor/viewer/lib/sketch-layer.component.ts @@ -1,40 +1,40 @@ -import { AfterContentInit, Component, ElementRef, Input, OnInit, Renderer2 } from '@angular/core'; +import { + AfterContentInit, + Component, + ElementRef, + Input, + OnInit, + Renderer2 +} from '@angular/core'; import { Store } from '@ngxs/store'; -import { ResizeEvent } from 'angular-resizable-element'; -import { UiState, CurrentLayer } from 'src/app/core/state/ui.state'; +import { CurrentLayer, UiState } from 'src/app/core/state/ui.state'; @Component({ selector: 'sketch-layer', template: ` -
- - {{textContent}} - - -
+ {{ textContent }} + + +
`, styles: [ ` @@ -72,9 +72,13 @@ export class SketchLayerComponent implements OnInit, AfterContentInit { offset3d = 20; - textContent; + textContent: string; - constructor(public store: Store, public renderer: Renderer2, public element: ElementRef) {} + constructor( + public store: Store, + public renderer: Renderer2, + public element: ElementRef + ) {} ngOnInit() { this.nativeElement = this.element.nativeElement; @@ -85,7 +89,11 @@ export class SketchLayerComponent implements OnInit, AfterContentInit { if (this.nativeElement) { if (is3dView === true) { if (this.level > 0) { - this.renderer.setStyle(this.nativeElement, 'transform', `translateZ(${(this.level * this.offset3d).toFixed(3)}px)`); + this.renderer.setStyle( + this.nativeElement, + 'transform', + `translateZ(${(this.level * this.offset3d).toFixed(3)}px)` + ); } } else { this.renderer.setStyle(this.nativeElement, 'transform', `none`); @@ -102,22 +110,35 @@ export class SketchLayerComponent implements OnInit, AfterContentInit { } isTextContent() { - if (this.layer._class as 'text' === 'text') { - this.textContent = (this.layer as SketchMSSymbolMaster).attributedString.string; + if ((this.layer._class as 'text') === 'text') { + this.textContent = (this + .layer as SketchMSSymbolMaster).attributedString.string; } } updateLayerStyle() { if (this.layer && this.nativeElement) { const elementPosition = this.nativeElement.getBoundingClientRect(); - this.renderer.setStyle(this.nativeElement, 'border-width', `${this.borderWidth}px`); - this.renderer.setStyle(this.nativeElement, 'left', `${elementPosition.left - this.borderWidth}px`); - this.renderer.setStyle(this.nativeElement, 'top', `${elementPosition.top - this.borderWidth}px`); + this.renderer.setStyle( + this.nativeElement, + 'border-width', + `${this.borderWidth}px` + ); + this.renderer.setStyle( + this.nativeElement, + 'left', + `${elementPosition.left - this.borderWidth}px` + ); + this.renderer.setStyle( + this.nativeElement, + 'top', + `${elementPosition.top - this.borderWidth}px` + ); this.applyDefaultStyles(); } } - toggleSelected(layer: SketchMSSymbolMaster) {} + toggleSelected(_layer: SketchMSSymbolMaster) {} applyDefaultStyles() { const css = (this.layer as any).css as { [key: string]: string }; @@ -130,30 +151,6 @@ export class SketchLayerComponent implements OnInit, AfterContentInit { } } - resizeStart(event: ResizeEvent) {} - resizing(event: ResizeEvent) { - if (event.rectangle.width && (event.edges.left || event.edges.right)) { - this.layer.frame.width = event.rectangle.width; - - if (typeof event.edges.left === 'number') { - this.layer.frame.x = event.edges.left; - } - } - - if (event.rectangle.height && (event.edges.top || event.edges.bottom)) { - this.layer.frame.height = event.rectangle.height; - - if (typeof event.edges.top === 'number') { - this.layer.frame.y = event.edges.top; - } - } - - this.updateLayerStyle(); - } - resizeEnd(event: ResizeEvent) { - this.store.dispatch(new CurrentLayer(this.layer)); - } - selectLayer(layer: SketchMSLayer) { this.store.dispatch(new CurrentLayer(layer)); }