jellies-draw 0.3.2 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jellies-draw",
-  "version": "0.3.2",
+  "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/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;
@@ -154,6 +163,10 @@ export default {
     this.hasDragged = false;
   },
 
+  _handleSelectStart(e) {
+    e.preventDefault();
+  },
+
   _tick() {
     if (!this.active) return;
     const now = performance.now();
@@ -180,9 +193,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;