jellies-draw 0.3.3 → 0.3.5

package/package.json

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

package/src/App.vue

@@ -8,11 +8,6 @@
     <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"
@@ -34,16 +29,8 @@ export default {
   },
   data: () => ({
     isCanvasCreated: false,
-    isCanvasVisible: false,
-    testClickCount: 0,
-    selectionLength: 0
+    isCanvasVisible: false
   }),
-  mounted() {
-    document.addEventListener('selectionchange', () => {
-      const sel = window.getSelection()
-      this.selectionLength = sel ? sel.toString().length : 0
-    })
-  },
   computed: {
     isCanvasEnabled: {
       get() {
@@ -103,18 +90,4 @@ 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/components/functions/canvas.js

@@ -110,10 +110,7 @@ export default {
     }
   },
   _handleKeydown(event) {
-    if (!this.hasShortCuts) {
-      return
-    }
-    if (Properties.isCanvasPenetrable && !event.shiftKey) {
+    if (!this.hasShortCuts || Properties.isCanvasPenetrable) {
       return
     }
     if (event.key === 'Escape') {
@@ -125,7 +122,7 @@ export default {
         this._handleNodesShortCuts(event);
       }
     } else if (event.shiftKey) {
-      if (!this.isEditingText) {
+      if (!this.isEditingText && Properties.isUsingDrawingTool) {
         this._handlePropertiesShortCuts(event);
       }
     } else if (event.altKey) {

package/src/components/functions/laser.js

@@ -121,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) {
@@ -134,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,
@@ -155,12 +163,20 @@ 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) {