jellies-draw 0.3.2 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jellies-draw",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "A drawer for jellies",
   "private": false,
   "main": "./src/index.js",

package/src/assets/laser-cursor.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <circle cx="12" cy="12" r="10" fill="rgba(243, 59, 41, 0.2)"/>
+  <circle cx="12" cy="12" r="6" fill="rgba(243, 59, 41, 0.5)"/>
+  <circle cx="12" cy="12" r="3" fill="rgb(255, 110, 90)"/>
+</svg>

package/src/components/functions/laser.js

@@ -1,5 +1,6 @@
 import Konva from 'konva';
 import Properties from './properties';
+import laserCursorUrl from '../../assets/laser-cursor.svg';
 
 const FADE_DURATION = 700;
 const DRAG_THRESHOLD = 2;
@@ -23,6 +24,7 @@ export default {
   _onMouseDown: null,
   _onMouseMove: null,
   _onMouseUp: null,
+  _onSelectStart: null,
   _onTick: null,
 
   initialize(stage, container) {
@@ -31,6 +33,7 @@ export default {
     this._onMouseDown = this._handleMouseDown.bind(this);
     this._onMouseMove = this._handleMouseMove.bind(this);
     this._onMouseUp = this._handleMouseUp.bind(this);
+    this._onSelectStart = this._handleSelectStart.bind(this);
     this._onTick = this._tick.bind(this);
     this.layer = new Konva.Layer({ listening: false });
     this.shape = new Konva.Shape({
@@ -62,8 +65,11 @@ export default {
     window.addEventListener('pointermove', this._onMouseMove, true);
     window.addEventListener('pointerup', this._onMouseUp, true);
     window.addEventListener('pointercancel', this._onMouseUp, true);
-    this._previousUserSelect = document.body.style.userSelect;
-    document.body.style.userSelect = 'none';
+    window.addEventListener('selectstart', this._onSelectStart, true);
+    this._cursorStyleEl = document.createElement('style');
+    this._cursorStyleEl.setAttribute('data-jellies-draw-laser-cursor', '');
+    this._cursorStyleEl.textContent = `*, *::before, *::after { cursor: url("${laserCursorUrl}") 12 12, auto !important; }`;
+    document.head.appendChild(this._cursorStyleEl);
     this.rafId = requestAnimationFrame(this._onTick);
   },
 
@@ -74,8 +80,11 @@ export default {
     window.removeEventListener('pointermove', this._onMouseMove, true);
     window.removeEventListener('pointerup', this._onMouseUp, true);
     window.removeEventListener('pointercancel', this._onMouseUp, true);
-    document.body.style.userSelect = this._previousUserSelect || '';
-    this._previousUserSelect = null;
+    window.removeEventListener('selectstart', this._onSelectStart, true);
+    if (this._cursorStyleEl) {
+      this._cursorStyleEl.remove();
+      this._cursorStyleEl = null;
+    }
     if (this.rafId !== null) {
       cancelAnimationFrame(this.rafId);
       this.rafId = null;
@@ -112,6 +121,10 @@ export default {
     this.startY = pt.y;
     this.lastX = pt.x;
     this.lastY = pt.y;
+    this._downClientX = e.clientX;
+    this._downClientY = e.clientY;
+    e.stopPropagation();
+    e.preventDefault();
   },
 
   _handleMouseMove(e) {
@@ -125,7 +138,11 @@ export default {
     if (!this.hasDragged) {
       const dx = pt.x - this.startX;
       const dy = pt.y - this.startY;
-      if (dx * dx + dy * dy < DRAG_THRESHOLD * DRAG_THRESHOLD) return;
+      if (dx * dx + dy * dy < DRAG_THRESHOLD * DRAG_THRESHOLD) {
+        e.stopPropagation();
+        e.preventDefault();
+        return;
+      }
       this.hasDragged = true;
       this.segments.push({
         x1: this.startX, y1: this.startY,
@@ -146,12 +163,24 @@ export default {
   },
 
   _handleMouseUp(e) {
-    if (this.hasDragged) {
-      e.stopPropagation();
-      e.preventDefault();
-    }
+    if (!this.isPressed) return;
+    const wasClick = !this.hasDragged && e.type === 'pointerup';
+    const downX = this._downClientX;
+    const downY = this._downClientY;
     this.isPressed = false;
     this.hasDragged = false;
+    e.stopPropagation();
+    e.preventDefault();
+    if (wasClick) {
+      const target = document.elementFromPoint(downX, downY);
+      if (target && typeof target.click === 'function') {
+        target.click();
+      }
+    }
+  },
+
+  _handleSelectStart(e) {
+    e.preventDefault();
   },
 
   _tick() {
@@ -180,9 +209,16 @@ export default {
     ctx.lineJoin = 'round';
 
     ctx.beginPath();
-    ctx.moveTo(segs[0].x1, segs[0].y1);
+    let lastX = null;
+    let lastY = null;
     for (let i = 0; i < segs.length; i++) {
-      ctx.lineTo(segs[i].x2, segs[i].y2);
+      const seg = segs[i];
+      if (seg.x1 !== lastX || seg.y1 !== lastY) {
+        ctx.moveTo(seg.x1, seg.y1);
+      }
+      ctx.lineTo(seg.x2, seg.y2);
+      lastX = seg.x2;
+      lastY = seg.y2;
     }
 
     const coreWidth = Properties.strokeWidth || 4;