add a dotted background, misc tweaks and code golfing

lmorchard · May 17, 2024 · 21278cc · 21278cc
1 parent f8a4152
commit 21278cc
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 68 deletions.
diff --git a/public/index.css b/public/index.css
@@ -8,8 +8,15 @@ sticky-notes-canvas {
   top: 0;
   left: 0;
   box-sizing: border-box;
-  width: 90vw;
-  height: 90vh;
+  width: 100%;
+  height: 100%;
   border: 4px solid black;
-  margin: 1em;
 }
+
+sticky-notes-cluster-topic {
+  font-size: 2em;
+}
+
+sticky-note {
+  font-size: 1.5em;
+}
diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,7 @@
     <script type="module" src="./index.js"></script>
   </head>
   <body>
-    <sticky-notes-canvas id="notes-canvas" zoom="0.3" originX="0" originY="0">
+    <sticky-notes-canvas id="notes-canvas" zoom="0.5" originX="0" originY="0">
     </sticky-notes-canvas>
   </body>
 </html>
diff --git a/public/index.js b/public/index.js
@@ -88,7 +88,7 @@ async function main() {
 
     const clusterAngle = (i / clusters.length) * Math.PI * 2;
     const clusterX = Math.cos(clusterAngle) * CLUSTER_LAYOUT_RADIUS;
-    const clusterY = Math.sin(clusterAngle) * CLUSTER_LAYOUT_RADIUS;
+    const clusterY = Math.sin(clusterAngle) * (CLUSTER_LAYOUT_RADIUS / 2);
 
     for (const item of cluster) {
       const linkEl = document.querySelector(`sticky-notes-cluster-link[href="${item.id}"]`);

diff --git a/public/lib/components/StickyNotesCanvas.js b/public/lib/components/StickyNotesCanvas.js
@@ -22,32 +22,28 @@ export class StickyNotesCanvas extends GraphLayoutMixin(
         left: 0;
         width: 100%;
         height: 100%;
+      }
+      .canvas {
+
+      }
+      .background {
+        position: absolute;
+        width: 20000px;
+        height: 10000px;
+        left: -10000px;
+        top: -5000px;
+        z-index: -100;
 
-        /*
-        --dot-bg: rgba(250, 250, 250, 1);
-        --dot-color: #000;
-        --dot-size: 1px;
-        --dot-space: 22px;
-        background: linear-gradient(
-              90deg,
-              var(--dot-bg) calc(var(--dot-space) - var(--dot-size)),
-              transparent 1%
-            )
-            center / var(--dot-space) var(--dot-space),
-          linear-gradient(
-              var(--dot-bg) calc(var(--dot-space) - var(--dot-size)),
-              transparent 1%
-            )
-            center / var(--dot-space) var(--dot-space),
-          var(--dot-color);
-        */
+        background-image: radial-gradient(circle at 5px 5px, rgba(0, 0, 0, 0.25) 3px, transparent 0);
+        background-size: 40px 40px;
       }
     </style>
 
     <div class="viewport">
       <div class="canvas">
         <slot></slot>
       </div>
+      <div class="background"></div>
     </div>
   `;
 

diff --git a/public/lib/mixins/DraggableMixin.js b/public/lib/mixins/DraggableMixin.js
@@ -2,17 +2,14 @@ export const DraggableMixin = (Base) =>
   class extends Base {
     connectedCallback() {
       super.connectedCallback();
-
       this.dragging = false;
       this.addEventListener("mousedown", this.onMouseDown);
     }
 
     onMouseDown(ev) {
-      const startPosition = this.getDragStartPosition();
-      const dragClientStart = { x: ev.clientX, y: ev.clientY };
-
       this.dragging = true;
-      this.onDragStart();
+      const startPosition = this.onDragStart();
+      const dragClientStart = { x: ev.clientX, y: ev.clientY };
 
       const onMouseMove = (ev) => {
         const dx = ev.clientX - dragClientStart.x;
@@ -33,13 +30,11 @@ export const DraggableMixin = (Base) =>
       ev.stopPropagation();
     }
 
-    getDragStartPosition() {
+    onDragStart() {
       return { x: 0, y: 0 };
     }
 
-    onDragStart() {}
-
-    onDragged(sx, sy, dx, dy) {}
+    onDragged(startX, startY, deltaX, deltaY) {}
 
     onDragEnd() {}
   };
diff --git a/public/lib/mixins/PanZoomableMixin.js b/public/lib/mixins/PanZoomableMixin.js
@@ -4,7 +4,7 @@ export const PanZoomableMixin = (Base) =>
   class extends DraggableMixin(Base) {
     constructor() {
       super();
-      this.minZoom = 0.1;
+      this.minZoom = 0.2;
       this.maxZoom = 5;
       this.wheelFactor = -0.1;
       this.zoomOrigin = { x: 0, y: 0 };
@@ -19,10 +19,6 @@ export const PanZoomableMixin = (Base) =>
       return this.$(".viewport");
     }
 
-    get canvas() {
-      return this.$(".canvas");
-    }
-
     get zoom() {
       return parseFloat(this.attributes.zoom.value);
     }
@@ -35,39 +31,31 @@ export const PanZoomableMixin = (Base) =>
       ev.preventDefault();
 
       // Preserve previous zoom level and calculate new based on wheel direction
-      const oldZoom = this.zoom;
-      const wheel = Math.sign(ev.deltaY);
-      const deltaZoom = Math.exp(wheel * this.wheelFactor);
+      const deltaZoom = Math.exp(Math.sign(ev.deltaY) * this.wheelFactor);
       const newZoom = Math.min(
         Math.max(this.minZoom, this.zoom * deltaZoom),
         this.maxZoom
       );
+      const oldZoom = this.zoom;
+      this.zoom = newZoom;
 
-      // Calculate the pointer position within the viewport
-      const {
-        x: vX,
-        y: vY,
-        width: vWidth,
-        height: vHeight,
-      } = this.getBoundingClientRect();
-      const zoomX = ev.clientX - vX - vWidth / 2;
-      const zoomY = ev.clientY - vY - vHeight / 2;
+      // Calculate the pointer position within the host relative to center
+      const hostRect = this.getBoundingClientRect();
+      const zoomX = ev.clientX - hostRect.x - hostRect.width / 2;
+      const zoomY = ev.clientY - hostRect.y - hostRect.height / 2;
 
       // Calculate the relative offset between old & new zoom positions
       const zoomOffsetX = zoomX / oldZoom - zoomX / newZoom;
       const zoomOffsetY = zoomY / oldZoom - zoomY / newZoom;
 
       // Nudge the center of the viewport to keep the content under pointer in the same position
-      const attrs = this.getObservedAttributes();
-      const originX = parseFloat(attrs.originx);
-      const originY = parseFloat(attrs.originy);
+      const originX = parseFloat(this.attributes.originx.value);
+      const originY = parseFloat(this.attributes.originy.value);
       this.attributes.originx.value = originX + zoomOffsetX;
       this.attributes.originy.value = originY + zoomOffsetY;
-
-      this.zoom = newZoom;
     }
 
-    getDragStartPosition() {
+    onDragStart() {
       return {
         x: parseFloat(this.attributes.originx.value),
         y: parseFloat(this.attributes.originy.value),
@@ -80,22 +68,15 @@ export const PanZoomableMixin = (Base) =>
     }
 
     update() {
-      const attrs = this.getObservedAttributes();
-      const originX = parseFloat(attrs.originx);
-      const originY = parseFloat(attrs.originy);
-
       const zoom = this.zoom;
 
-      const parentEl = this;
-      const viewport = this.viewport;
-
-      const parentHalfWidth = parentEl.clientWidth / 2;
-      const parentHalfHeight = parentEl.clientHeight / 2;
+      const originX = parseFloat(this.attributes.originx.value);
+      const originY = parseFloat(this.attributes.originy.value);
 
-      const translateX = parentHalfWidth - originX;
-      const translateY = parentHalfHeight - originY;
+      const translateX = this.clientWidth / 2 - originX;
+      const translateY = this.clientHeight / 2 - originY;
 
-      viewport.style.transform = `
+      this.viewport.style.transform = `
         scale(${zoom})
         translate(${translateX}px, ${translateY}px)
       `;

diff --git a/public/lib/mixins/StickyNotesCanvasChildDraggableMixin.js b/public/lib/mixins/StickyNotesCanvasChildDraggableMixin.js
@@ -10,7 +10,7 @@ export const StickyNotesCanvasChildDraggableMixin = (Base = BaseElement) =>
       return parentCanvas ? parseFloat(parentCanvas.zoom) : 1;
     }
 
-    getDragStartPosition() {
+    onDragStart() {
       return {
         x: parseInt(this.attributes.x.value),
         y: parseInt(this.attributes.y.value),