refactor: centralize css (#33)

sfeir-open-source · Nov 21, 2018 · 3df1c35 · 3df1c35
1 parent 1a3e7e2
commit 3df1c35
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 14 deletions.
diff --git a/src/app/editor/viewer/lib/parsers/sketch-style-parser.service.ts b/src/app/editor/viewer/lib/parsers/sketch-style-parser.service.ts
@@ -113,6 +113,18 @@ export class SketchStyleParserService {
                 });
               }
           }
+
+          if ((obj as SketchMSLayer).frame) {
+            this.setStyle(obj, root, {
+              'display': 'block',
+              'position': 'absolute',
+              'left': `${obj.frame.x}px`,
+              'top': `${obj.frame.y}px`,
+              'width': `${obj.frame.width}px`,
+              'height': `${obj.frame.height}px`,
+              'visibility': obj.isVisible ? 'visibile' : 'hidden'
+            });
+          }
         }
       }
     }

diff --git a/src/app/editor/viewer/lib/sketch-layer.component.ts b/src/app/editor/viewer/lib/sketch-layer.component.ts
@@ -39,9 +39,7 @@ import { UiState, CurrentLayer } from 'src/app/core/state/ui.state';
   styles: [
     `
       :host {
-        display: block;
         border: 1px solid transparent;
-        position: absolute;
         box-sizing: border-box;
         transition: border-color 0.1s linear, transform 1s;
         transform-origin: 0 0;
@@ -69,7 +67,6 @@ export class SketchLayerComponent implements OnInit, AfterContentInit {
 
   @Input() level = 0;
 
-  artboardFactor = 1;
   borderWidth = 1;
   nativeElement: HTMLElement;
 
@@ -112,13 +109,10 @@ export class SketchLayerComponent implements OnInit, AfterContentInit {
 
   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', `${this.layer.frame.x * this.artboardFactor - this.borderWidth}px`);
-      this.renderer.setStyle(this.nativeElement, 'top', `${this.layer.frame.y * this.artboardFactor - this.borderWidth}px`);
-      this.renderer.setStyle(this.nativeElement, 'width', `${this.layer.frame.width * this.artboardFactor}px`);
-      this.renderer.setStyle(this.nativeElement, 'height', `${this.layer.frame.height * this.artboardFactor}px`);
-      this.renderer.setStyle(this.nativeElement, 'visibility', this.layer.isVisible ? 'visibile' : 'hidden');
-
+      this.renderer.setStyle(this.nativeElement, 'left', `${elementPosition.left - this.borderWidth}px`);
+      this.renderer.setStyle(this.nativeElement, 'top', `${elementPosition.top - this.borderWidth}px`);
       this.applyDefaultStyles();
     }
   }

diff --git a/src/app/editor/viewer/lib/sketch-page.component.ts b/src/app/editor/viewer/lib/sketch-page.component.ts
@@ -40,12 +40,10 @@ export class SketchPageComponent extends SketchLayerComponent implements OnInit,
   ngAfterContentInit() {
     super.ngAfterContentInit();
 
+    const elementPosition = this.nativeElement.getBoundingClientRect();
     const ne = this.element.nativeElement;
     this.renderer.setStyle(ne, 'border-width', `${this.borderWidth}px`);
-    this.renderer.setStyle(ne, 'left', `${this.page.frame.x * this.artboardFactor - this.borderWidth}px`);
-    this.renderer.setStyle(ne, 'top', `${this.page.frame.y * this.artboardFactor - this.borderWidth}px`);
-    this.renderer.setStyle(ne, 'width', `${this.page.frame.width * this.artboardFactor}px`);
-    this.renderer.setStyle(ne, 'height', `${this.page.frame.height * this.artboardFactor}px`);
-    this.renderer.setStyle(ne, 'visibility', this.page.isVisible ? 'visibile' : 'hidden');
+    this.renderer.setStyle(ne, 'left', `${elementPosition.left - this.borderWidth}px`);
+    this.renderer.setStyle(ne, 'top', `${elementPosition.top - this.borderWidth}px`);
   }
 }