feat: make the 3d design rotate

packages/xlayers/src/app/editor/preview/viewer/3d-rotation.directive.ts

@@ -0,0 +1,117 @@
+import {
+  AfterContentInit,
+  ContentChild,
+  Directive,
+  ElementRef,
+  HostListener,
+  Input,
+  SimpleChanges,
+  OnChanges
+} from '@angular/core';
+import { SketchCanvasComponent } from './sketch-canvas/sketch-canvas.component';
+
+@Directive({
+  selector: '[xly3dRotation]'
+})
+export class Xly3dRotationDirective implements AfterContentInit, OnChanges {
+  // TODO: update this type when https://github.com/Microsoft/TypeScript/issues/15480 gets approved
+  readonly REFRESH_RATE: 10 = 10;
+
+  // TODO: update this type when https://github.com/Microsoft/TypeScript/issues/15480 gets approved
+  readonly ROTATION_SENSIVITY: 100 = 100;
+
+  // In deg
+  readonly ROTATION_MAX_DEG = 65;
+
+  private timestamp = 0;
+  private isKeyPressed = false;
+
+  @Input() enabled = false;
+
+  mouseCurrentPosition = {
+    x: 0,
+    y: 0
+  };
+  mouseOriginPosition = {
+    x: 0,
+    y: 0
+  };
+
+  @ContentChild(SketchCanvasComponent, { read: ElementRef }) canvas: ElementRef;
+
+  constructor() {}
+
+  ngAfterContentInit() {
+    this.setMouseOrigin(this.canvas.nativeElement);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.enabled && changes.enabled.currentValue === false) {
+      this.canvas.nativeElement.style.transform = '';
+    }
+  }
+
+  @HostListener('window:keydown.shift', ['$event'])
+  public onMouseDown(_event: KeyboardEvent): void {
+    this.isKeyPressed = true;
+  }
+
+  @HostListener('window:keyup.shift', ['$event'])
+  public onMouseUp(_event: KeyboardEvent): void {
+    this.isKeyPressed = false;
+  }
+
+  @HostListener('window:mouseenter', ['$event'])
+  public onMouseEnter(event: MouseEvent): void {
+    this.apply3dRotation();
+  }
+
+  @HostListener('window:mousemove', ['$event'])
+  public onMouseMove(event: any): void {
+    if (this.enabled && this.isKeyPressed && this.shouldUpdate3DRotation()) {
+      this.updateMouseCurrentPosition(event);
+      this.apply3dRotation();
+    }
+  }
+
+  @HostListener('window:mouseleave', ['$event'])
+  public onMouseLeave(_event: any): void {}
+
+  private apply3dRotation() {
+    const { width, height } = this.canvas.nativeElement.getBoundingClientRect();
+    this.updateTransformStyle(
+      (this.mouseCurrentPosition.x / ((width / 2) | 0)) *
+        this.ROTATION_SENSIVITY,
+      (this.mouseCurrentPosition.y / ((height / 2) | 0)) *
+        this.ROTATION_SENSIVITY
+    );
+  }
+
+  // make sure to invert x and y params to match the mouse invert axis
+  private updateTransformStyle(y: number, x: number) {
+    // limit constraints
+    x = Math.max(x, -this.ROTATION_MAX_DEG);
+    y = Math.max(y, -this.ROTATION_MAX_DEG);
+    x = Math.min(x, this.ROTATION_MAX_DEG);
+    y = Math.min(y, this.ROTATION_MAX_DEG);
+
+    const style = `translateZ(20px) rotateX(${x}deg) rotateY(${y}deg)`;
+    this.canvas.nativeElement.style.transform = style;
+  }
+
+  private shouldUpdate3DRotation() {
+    return this.timestamp++ % this.REFRESH_RATE === 0;
+  }
+
+  private updateMouseCurrentPosition(event: MouseEvent) {
+    this.mouseCurrentPosition.x = event.clientX - this.mouseOriginPosition.x;
+    this.mouseCurrentPosition.y =
+      (event.clientY - this.mouseOriginPosition.y) * -1;
+  }
+
+  private setMouseOrigin(element: HTMLElement) {
+    const { width, height, left, top } = element.getBoundingClientRect();
+    this.mouseOriginPosition.x = left + ((width / 2) | 0);
+    this.mouseOriginPosition.y = top + ((height / 2) | 0);
+  }
+}

packages/xlayers/src/app/editor/preview/viewer/sketch-canvas/sketch-canvas.component.ts

@@ -28,6 +28,7 @@ import { SketchData } from '@app/core/sketch.service';
   styles: [
     `
       :host {
+        display: block;
         width: 100%;
         height: calc(100% - 64px);
         transform: none;
@@ -43,7 +44,7 @@ import { SketchData } from '@app/core/sketch.service';
         top: 2px;
       }
       .canvas {
-        display: none;
+        display:block;
         cursor: move;
         left: 50%;
         position: absolute;

packages/xlayers/src/app/editor/preview/viewer/sketch-container/sketch-container.component.ts

@@ -6,7 +6,7 @@ import { SketchSelectedLayerDirective } from '../sketch-layer/selected-layer.dir
 @Component({
   selector: 'xly-viewer-container',
   template: `
-    <div class="layers-container">
+    <div class="layers-container" xly3dRotation [enabled]="is3dView">
       <xly-canvas
         #ref
         xlySelectedLayer
@@ -39,6 +39,7 @@ import { SketchSelectedLayerDirective } from '../sketch-layer/selected-layer.dir
         top: 0;
         left: 0;
         position: absolute;
+        will-change: transform;
       }
     `
   ]
@@ -47,6 +48,7 @@ export class SketchContainerComponent implements OnInit {
   constructor(private store: Store) {}
 
   public currentPage: SketchMSLayer;
+  public is3dView: boolean;
 
   @ViewChild(SketchSelectedLayerDirective) ref: SketchSelectedLayerDirective;
 
@@ -55,6 +57,10 @@ export class SketchContainerComponent implements OnInit {
       this.currentPage = currentPage;
     });
 
+    this.store.select(UiState.is3dView).subscribe(is3dView => {
+      this.is3dView = is3dView;
+    });
+
     this.store.select(UiState.currentLayer).subscribe(currentLayer => {
       if (this.ref) {
         this.ref.selectDomNode(currentLayer);

packages/xlayers/src/app/editor/preview/viewer/sketch-layer/sketch-layer.component.ts

@@ -17,8 +17,6 @@ import { ResourceImageData, SketchService } from '@app/core/sketch.service';
     <div
       [style.width.px]="layer?.frame?.width"
       [style.height.px]="layer?.frame?.height"
-      [style.left.px]="layer?.frame?.x"
-      [style.top.px]="layer?.frame?.y"
     >
       <xly-layer
         xlySelectedLayer
@@ -51,6 +49,7 @@ import { ResourceImageData, SketchService } from '@app/core/sketch.service';
         transform-origin: 0 0;
         transform-style: preserve-3d;
         will-change: transform, transition;
+        display: block;
       }
 
       :host(:hover) {

packages/xlayers/src/app/editor/preview/viewer/sketch-page/sketch-page.component.ts

@@ -26,6 +26,8 @@ import { SketchService } from '@app/core/sketch.service';
       [attr.data-id]="layer?.do_objectID"
       [attr.data-name]="layer?.name"
       [attr.data-class]="layer?._class"
+      [style.width.px]="layer?.frame?.width"
+      [style.height.px]="layer?.frame?.height"
     ></xly-layer>
   `,
   styles: [

packages/xlayers/src/app/editor/preview/viewer/viewer.module.ts

@@ -8,6 +8,7 @@ import { SketchLayerComponent } from './sketch-layer/sketch-layer.component';
 import { SketchPageComponent } from './sketch-page/sketch-page.component';
 import { SketchStopEventPropagationDirective } from './sketch-stop-event-propagation.directive';
 import { SketchTooltilDirective } from './sketch-tooltip.directive';
+import { Xly3dRotationDirective } from './3d-rotation.directive';
 
 @NgModule({
   imports: [CoreModule, SketchParserModule],
@@ -18,7 +19,8 @@ import { SketchTooltilDirective } from './sketch-tooltip.directive';
     SketchLayerComponent,
     SketchStopEventPropagationDirective,
     SketchSelectedLayerDirective,
-    SketchTooltilDirective
+    SketchTooltilDirective,
+    Xly3dRotationDirective
   ],
   exports: [
     SketchCanvasComponent,