jellies-draw 0.3.1 → 0.3.2

package/package.json

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

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,7 @@
 import Konva from 'konva';
+import Properties from './properties';
 
 const FADE_DURATION = 700;
-const LASER_WIDTH = 4;
 const DRAG_THRESHOLD = 2;
 const GLOW_COLOR = '243, 59, 41';
 const CORE_COLOR = '255, 110, 90';
@@ -62,6 +62,8 @@ 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';
     this.rafId = requestAnimationFrame(this._onTick);
   },
 
@@ -72,6 +74,8 @@ 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;
     if (this.rafId !== null) {
       cancelAnimationFrame(this.rafId);
       this.rafId = null;
@@ -137,9 +141,15 @@ 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;
   },
@@ -175,12 +185,13 @@ export default {
       ctx.lineTo(segs[i].x2, segs[i].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();