misc puttering

lmorchard · May 18, 2024 · cf7fca3 · cf7fca3
1 parent 21278cc
commit cf7fca3
Show file tree

Hide file tree

Showing 10 changed files with 222 additions and 218 deletions.
diff --git a/public/lib/components/StickyNote.js b/public/lib/components/StickyNote.js
@@ -1,11 +1,9 @@
-import { html } from "../dom.js";
+import { html, BaseElement } from "../dom.js";
 import { StickyNotesCanvasChildDraggableMixin } from "../mixins/StickyNotesCanvasChildDraggableMixin.js";
 
-export class StickyNote extends StickyNotesCanvasChildDraggableMixin() {
-  static observedAttributes = [
-    ...StickyNotesCanvasChildDraggableMixin.observedAttributes,
-    "color",
-  ];
+const BaseClass = StickyNotesCanvasChildDraggableMixin(BaseElement);
+export class StickyNote extends BaseClass {
+  static observedAttributes = [...BaseClass.observedAttributes, "color"];
 
   static template = html`
     <style>

diff --git a/public/lib/components/StickyNotesCanvas.js b/public/lib/components/StickyNotesCanvas.js
@@ -2,14 +2,8 @@ import { html, BaseElement, $ } from "../dom.js";
 import { PanZoomableMixin } from "../mixins/PanZoomableMixin.js";
 import { GraphLayoutMixin } from "../mixins/GraphLayoutMixin.js";
 
-export class StickyNotesCanvas extends GraphLayoutMixin(
-  PanZoomableMixin(BaseElement)
-) {
-  static observedAttributes = [
-    ...PanZoomableMixin.observedAttributes,
-    ...GraphLayoutMixin.observedAttributes,
-  ];
-
+const BaseClass = GraphLayoutMixin(PanZoomableMixin(BaseElement));
+export class StickyNotesCanvas extends BaseClass {
   static template = html`
     <style>
       :host {
@@ -24,7 +18,6 @@ export class StickyNotesCanvas extends GraphLayoutMixin(
         height: 100%;
       }
       .canvas {
-
       }
       .background {
         position: absolute;
@@ -34,7 +27,11 @@ export class StickyNotesCanvas extends GraphLayoutMixin(
         top: -5000px;
         z-index: -100;
 
-        background-image: radial-gradient(circle at 5px 5px, rgba(0, 0, 0, 0.25) 3px, transparent 0);
+        background-image: radial-gradient(
+          circle at 5px 5px,
+          rgba(0, 0, 0, 0.25) 3px,
+          transparent 0
+        );
         background-size: 40px 40px;
       }
     </style>
@@ -46,14 +43,6 @@ export class StickyNotesCanvas extends GraphLayoutMixin(
       <div class="background"></div>
     </div>
   `;
-
-  get viewport() {
-    return this.$(".viewport");
-  }
-
-  constructor() {
-    super();
-  }
 }
 
 customElements.define("sticky-notes-canvas", StickyNotesCanvas);
diff --git a/public/lib/components/StickyNotesClusterTopic.js b/public/lib/components/StickyNotesClusterTopic.js
@@ -1,11 +1,9 @@
 import { html, BaseElement } from "../dom.js";
 import { StickyNotesCanvasChildDraggableMixin } from "../mixins/StickyNotesCanvasChildDraggableMixin.js";
 
-export class StickyNotesClusterTopic extends StickyNotesCanvasChildDraggableMixin() {
-  static observedAttributes = [
-    ...StickyNotesCanvasChildDraggableMixin.observedAttributes,
-    "color",
-  ];
+const BaseClass = StickyNotesCanvasChildDraggableMixin(BaseElement);
+export class StickyNotesClusterTopic extends BaseClass {
+  static observedAttributes = [...BaseClass.observedAttributes, "color"];
 
   static template = html`
     <style>

diff --git a/public/lib/dom.js b/public/lib/dom.js
@@ -49,6 +49,8 @@ export function createElement(name, changeSet = {}, context = document) {
 }
 
 export class BaseElement extends HTMLElement {
+  static observedAttributes = [];
+
   static template = html`<slot></slot>`;
 
   constructor() {

diff --git a/public/lib/mixins/DraggableMixin.js b/public/lib/mixins/DraggableMixin.js
@@ -1,5 +1,7 @@
-export const DraggableMixin = (Base) =>
-  class extends Base {
+import { BaseElement } from "../dom.js";
+
+export const DraggableMixin = (BaseClass = BaseElement) =>
+  class extends BaseClass {
     connectedCallback() {
       super.connectedCallback();
       this.dragging = false;