jellies-draw 0.3.1 → 0.3.3

package/package.json

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

package/src/App.vue

@@ -8,6 +8,11 @@
     <div class="demo-entry">
       <input type="checkbox" v-model="isCanvasEnabled"/> Enable Canvas
     </div>
+    <div class="penetration-test">
+      <p>底下可选中的文字：The quick brown fox jumps over the lazy dog. 在 laser 模式下拖一下，应该不选中。</p>
+      <button @click="testClickCount++" id="test-button">点我（穿透 click 计数：{{ testClickCount }}）</button>
+      <p>当前选中字符数：{{ selectionLength }}</p>
+    </div>
     <drawing-canvas
       ref="drawingCanvas"
       v-if="isCanvasCreated"
@@ -29,8 +34,16 @@ export default {
   },
   data: () => ({
     isCanvasCreated: false,
-    isCanvasVisible: false
+    isCanvasVisible: false,
+    testClickCount: 0,
+    selectionLength: 0
   }),
+  mounted() {
+    document.addEventListener('selectionchange', () => {
+      const sel = window.getSelection()
+      this.selectionLength = sel ? sel.toString().length : 0
+    })
+  },
   computed: {
     isCanvasEnabled: {
       get() {
@@ -90,4 +103,18 @@ body {
   right: 0;
   z-index: 2;
 }
+.penetration-test {
+  position: absolute;
+  top: 60px;
+  left: 20px;
+  z-index: 1;
+  text-align: left;
+  font-size: 18px;
+  line-height: 1.7;
+  max-width: 600px;
+}
+.penetration-test button {
+  font-size: 16px;
+  padding: 8px 16px;
+}
 </style>

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/canvas.js

@@ -110,7 +110,10 @@ export default {
     }
   },
   _handleKeydown(event) {
-    if (!this.hasShortCuts || Properties.isCanvasPenetrable) {
+    if (!this.hasShortCuts) {
+      return
+    }
+    if (Properties.isCanvasPenetrable && !event.shiftKey) {
       return
     }
     if (event.key === 'Escape') {

package/src/components/functions/laser.js

@@ -1,7 +1,8 @@
 import Konva from 'konva';
+import Properties from './properties';
+import laserCursorUrl from '../../assets/laser-cursor.svg';
 
 const FADE_DURATION = 700;
-const LASER_WIDTH = 4;
 const DRAG_THRESHOLD = 2;
 const GLOW_COLOR = '243, 59, 41';
 const CORE_COLOR = '255, 110, 90';
@@ -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,6 +65,11 @@ export default {
     window.addEventListener('pointermove', this._onMouseMove, true);
     window.addEventListener('pointerup', this._onMouseUp, true);
     window.addEventListener('pointercancel', this._onMouseUp, true);
+    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);
   },
 
@@ -72,6 +80,11 @@ export default {
     window.removeEventListener('pointermove', this._onMouseMove, true);
     window.removeEventListener('pointerup', this._onMouseUp, true);
     window.removeEventListener('pointercancel', this._onMouseUp, true);
+    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;
@@ -137,13 +150,23 @@ export default {
     }
     this.lastX = pt.x;
     this.lastY = pt.y;
+    e.stopPropagation();
+    e.preventDefault();
   },
 
-  _handleMouseUp() {
+  _handleMouseUp(e) {
+    if (this.hasDragged) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
     this.isPressed = false;
     this.hasDragged = false;
   },
 
+  _handleSelectStart(e) {
+    e.preventDefault();
+  },
+
   _tick() {
     if (!this.active) return;
     const now = performance.now();
@@ -170,17 +193,25 @@ 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;
     ctx.strokeStyle = `rgba(${GLOW_COLOR}, ${opacity * 0.3})`;
-    ctx.lineWidth = LASER_WIDTH * 2.5;
+    ctx.lineWidth = coreWidth * 2.5;
     ctx.stroke();
 
     ctx.strokeStyle = `rgba(${CORE_COLOR}, ${opacity})`;
-    ctx.lineWidth = LASER_WIDTH;
+    ctx.lineWidth = coreWidth;
     ctx.stroke();
 
     ctx.restore();