From fe60317810df72b03f355e97ec334ffdae501304 Mon Sep 17 00:00:00 2001
From: Christian Liebel <christian.liebel@thinktecture.com>
Date: Sun, 28 Feb 2021 00:01:24 +0100
Subject: [PATCH] feat(elements): add customElement decorator to tool box

---
 src/actions/open.ts      | 16 +++++-----
 src/elements/tool-box.ts | 68 +++++++++++++++++++---------------------
 2 files changed, 40 insertions(+), 44 deletions(-)

diff --git a/src/actions/open.ts b/src/actions/open.ts
index 2a33bf76..92301099 100644
--- 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
index 0fe90fe0..45b708d9 100644
--- 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);