feat(elements): add customElement decorator to tool box

christianliebel · Feb 27, 2021 · fe60317 · fe60317
1 parent 77c4efd
commit fe60317
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 44 deletions.
diff --git a/src/actions/open.ts b/src/actions/open.ts
@@ -6,14 +6,14 @@ import type { DrawingContext } from '../models/drawing-context';
 
 export class OpenAction implements Action {
   async execute(drawingContext: DrawingContext): Promise<void> {
-      const file = await fileOpen({
-        extensions: ['.png'],
-        description: 'PNG Files',
-      });
-      drawingContext.document.handle = file.handle;
-      drawingContext.document.title = file.name;
-      updateContext(drawingContext.element);
+    const file = await fileOpen({
+      extensions: ['.png'],
+      description: 'PNG Files',
+    });
+    drawingContext.document.handle = file.handle;
+    drawingContext.document.title = file.name;
+    updateContext(drawingContext.element);
 
-      loadFileAndAdjustCanvas(file, drawingContext);
+    await loadFileAndAdjustCanvas(file, drawingContext);
   }
 }
diff --git a/src/elements/tool-box.ts b/src/elements/tool-box.ts
@@ -1,6 +1,7 @@
 import {
   css,
   CSSResult,
+  customElement,
   html,
   LitElement,
   property,
@@ -28,7 +29,8 @@ import {
   tools,
 } from '../tools/all';
 
-class ToolBox extends LitElement {
+@customElement('paint-tool-box')
+export class ToolBox extends LitElement {
   @property() drawingContext = DRAWING_CONTEXT;
   @property({ attribute: false }) tool?: ToolDefinition;
 
@@ -61,20 +63,19 @@ class ToolBox extends LitElement {
 
   render(): TemplateResult {
     return html`
-        ${tools.map(
-                (tool) => html`
-                    <paint-tool
-                            .tool=${tool}
-                            title="${tool.tooltip}"
-                            class="${this.drawingContext?.tool === tool
-                                    ? 'active'
-                                    : ''} ${tool.instance ? '' : 'unavailable'}"
-                            @pointerup="${() => this.selectTool(tool)}"
-                    ></paint-tool>`,
-        )}
-        <paint-inset-container>
-            ${this.getToolHtml(this.drawingContext.tool)}
-        </paint-inset-container>
+      ${tools.map(
+      (tool) => html` <paint-tool
+          .tool=${tool}
+          title="${tool.tooltip}"
+          class="${this.drawingContext?.tool === tool
+        ? 'active'
+        : ''} ${tool.instance ? '' : 'unavailable'}"
+          @pointerup="${() => this.selectTool(tool)}"
+        ></paint-tool>`,
+    )}
+      <paint-inset-container>
+        ${this.getToolHtml(this.drawingContext.tool)}
+      </paint-inset-container>
     `;
   }
 
@@ -118,37 +119,34 @@ class ToolBox extends LitElement {
     }
 
     if ([RECTANGLE, /* ELLIPSE, */ POLYGON, ROUNDED_RECTANGLE].includes(tool)) {
-      return html`
-          <paint-tool-fill-style
-                  .drawingContext="${this.drawingContext}"
-          ></paint-tool-fill-style>`;
+      return html` <paint-tool-fill-style
+        .drawingContext="${this.drawingContext}"
+      ></paint-tool-fill-style>`;
     }
 
     if ([FREE_FORM_SELECT, SELECT, TEXT].includes(tool)) {
-      return html`
-          <paint-tool-draw-opaque
-                  .drawingContext="${this.drawingContext}"
-          ></paint-tool-draw-opaque>`;
+      return html` <paint-tool-draw-opaque
+        .drawingContext="${this.drawingContext}"
+      ></paint-tool-draw-opaque>`;
     }
 
     if (ERASER === tool) {
-      return html`
-          <paint-tool-eraser-size
-                  .drawingContext="${this.drawingContext}"
-          ></paint-tool-eraser-size>`;
+      return html` <paint-tool-eraser-size
+        .drawingContext="${this.drawingContext}"
+      ></paint-tool-eraser-size>`;
     }
 
     if (BRUSH === tool) {
-      return html`
-          <paint-tool-brush
-                  .drawingContext="${this.drawingContext}"
-          ></paint-tool-brush>`;
+      return html` <paint-tool-brush
+        .drawingContext="${this.drawingContext}"
+      ></paint-tool-brush>`;
     }
 
     if (AIRBRUSH === tool) {
-      return html`<paint-tool-airbrush
-              .drawingContext="${this.drawingContext}"
-      ></paint-tool-airbrush>`;
+      return html`
+          <paint-tool-airbrush
+                  .drawingContext="${this.drawingContext}"
+          ></paint-tool-airbrush>`;
     }
 
     if (MAGNIFIER === tool) {
@@ -158,5 +156,3 @@ class ToolBox extends LitElement {
     return '';
   }
 }
-
-customElements.define('paint-tool-box', ToolBox);