jellies-draw 0.2.5 → 0.3.0

package/package.json

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

package/src/components/DrawingCanvas.vue

@@ -79,7 +79,8 @@ export default {
   width: 100%;
   height: 100%;
 }
-.container-penetrable {
+.container-penetrable,
+.container-penetrable * {
   pointer-events: none;
 }
 .cursor-crosshair {

package/src/components/ToolButton.vue

@@ -26,7 +26,7 @@ export default {
       default: 'selector'
     },
     shortCut: {
-      type: Number,
+      type: [Number, String],
       default: null
     },
     isActive: {
@@ -141,4 +141,14 @@ button {
 .tool-clear:before {
   content: "\e7a9";
 }
+.tool-laser:before {
+  content: "";
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #f33b29;
+  box-shadow: 0 0 4px #f33b29, 0 0 8px rgba(243, 59, 41, 0.6);
+  vertical-align: middle;
+}
 </style>

package/src/components/ToolButtons.vue

@@ -42,6 +42,7 @@ export default {
   data() {
     return {
       tools: [
+        'laser',
         'selector',
         'rectangle',
         'ellipse',
@@ -63,7 +64,8 @@ export default {
       toolsCanBeUsedContinuously: [
         'pen',
         'text',
-        'eraser'
+        'eraser',
+        'laser'
       ]
     }
   },
@@ -92,13 +94,8 @@ export default {
         Properties.latestTool = newTool;
       }
     },
-    isCanvasPenetrable: {
-      get() {
-        return Properties.isCanvasPenetrable;
-      },
-      set(isCanvasPenetrable) {
-        Properties.isCanvasPenetrable = isCanvasPenetrable;
-      }
+    isCanvasPenetrable() {
+      return Properties.isCanvasPenetrable;
     }
   },
   watch: {
@@ -108,7 +105,10 @@ export default {
   },
   methods: {
     toolShortCut(index) {
-      return Properties.isUsingText || Properties.isCanvasPenetrable ? null : (index + 1) % 10
+      if (Properties.isUsingText) return null
+      if (this.tools[index] === 'laser') return null
+      if (index === 10) return 0
+      return index
     },
     applyAction(action) {
       if (action === 'image') {
@@ -131,7 +131,6 @@ export default {
       }
       this.isCurrentToolLocked = this.toolsCanBeLocked.includes(action) && this.currentTool === action
       this.currentTool = action
-      this.isCanvasPenetrable = this.currentTool === 'selector' && this.isCurrentToolLocked
       this.releaseInstantTool()
     },
     releaseInstantTool() {
@@ -148,12 +147,26 @@ export default {
       event.target.value = ''
     },
     handleShortCutKey(event) {
-      if (this.hasShortCuts && this.currentTool !== 'text' && !this.isCanvasPenetrable) {
-        const key = event.key
-        const index = parseInt(key, 10)
-        if (index >= 0 && index < this.tools.length) {
-          this.applyAction(this.tools[(index + 9) % 10])
+      if (!this.hasShortCuts) return
+      if (this.currentTool === 'text') return
+      const tag = document.activeElement && document.activeElement.tagName
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || (document.activeElement && document.activeElement.isContentEditable)) return
+      if (event.key === '`') {
+        if (this.currentTool === 'laser') {
+          const fallback = this.latestTool.tool === 'laser' ? 'pen' : this.latestTool.tool
+          this.applyAction(fallback)
+        } else {
+          this.applyAction('laser')
         }
+        return
+      }
+      if (event.altKey || event.ctrlKey || event.metaKey) return
+      const key = event.key
+      const index = parseInt(key, 10)
+      if (isNaN(index)) return
+      const targetIdx = index === 0 ? 10 : index
+      if (targetIdx < this.tools.length) {
+        this.applyAction(this.tools[targetIdx])
       }
     }
   }

package/src/components/functions/canvas.js

@@ -4,7 +4,9 @@ import Clipboard from './clipboard';
 import Properties from './properties';
 import Tools from './tools';
 import Histories from './histories';
+import Laser from './laser';
 import AttachedText from './tools/helper/attachedText';
+import Connection from './tools/helper/connection';
 export default {
   layer: null,
   stage: null,
@@ -30,6 +32,15 @@ export default {
     });
     this.layer = new Konva.Layer();
     this.stage.add(this.layer);
+    Laser.initialize(this.stage, this.container);
+    this.unwatchLaser = Properties.$watch(
+      () => Properties.tool === 'laser',
+      (isLaserMode) => {
+        if (isLaserMode) Laser.activate();
+        else Laser.deactivate();
+      },
+      { immediate: true }
+    );
     AttachedText.attachLayerListeners(this.layer);
     document.addEventListener('keydown', this.keydownHandler);
     document.addEventListener('keyup', this.keyupHandler);
@@ -43,6 +54,10 @@ export default {
       window.addEventListener('pointerup', this.handleGlobalPointerUp, { once: true });
     });
     this.stage.on('mousemove', this._handleMouseMove.bind(this));
+    this.containerLeaveHandler = () => {
+      if (!this.isDrawing) Connection.hideSnapVisuals();
+    };
+    this.stage.container().addEventListener('mouseleave', this.containerLeaveHandler);
   },
   generateEventHandlers() {
     this.resizeHandler = this._handleResize.bind(this);
@@ -74,6 +89,15 @@ export default {
     this.stage.off('click tap', this.clickHandler);
     document.removeEventListener('keydown', this.keydownHandler);
     document.removeEventListener('keyup', this.keyupHandler);
+    if (this.containerLeaveHandler) {
+      this.stage.container().removeEventListener('mouseleave', this.containerLeaveHandler);
+    }
+    if (this.unwatchLaser) {
+      this.unwatchLaser();
+      this.unwatchLaser = null;
+    }
+    Laser.destroy();
+    Connection.hideSnapVisuals();
     this.stage.clear()
     this.stage = null;
     window.removeEventListener('resize', this.resizeHandler);
@@ -102,12 +126,12 @@ export default {
         this._handlePropertiesShortCuts(event);
       }
     } else if (event.altKey) {
-      Properties.isCanvasPenetrable = true;
+      Properties.isAltHeld = true;
     }
   },
   _handleKeyup(event) {
     if (event.key === 'Alt') {
-      Properties.isCanvasPenetrable = false;
+      Properties.isAltHeld = false;
       if (Properties.tool === 'selector') {
         Properties.isToolLocked = false;
         Properties.latestTool = {
@@ -197,11 +221,14 @@ export default {
   },
   _handleMouseMove(e) {
     if (Properties.isUsingDrawingTool || Properties.isUsingText) {
+      if (Properties.tool === 'line' || Properties.tool === 'arrow') {
+        this._handleSnapHoverPreview();
+      }
       return;
     }
 
     const target = e.target;
-    
+
     if (target === this.stage) {
       this.stage.container().style.cursor = 'default';
       return;
@@ -210,9 +237,9 @@ export default {
     if (target.hasName('node')) {
       const mousePos = this.stage.getPointerPosition();
       const canInteract = this._canInteractWithNode(target, mousePos);
-      
+
       this.stage.container().style.cursor = canInteract ? 'move' : 'default';
-      
+
       if (!canInteract) {
         target.draggable(false);
       } else if (!Properties.isUsingDrawingTool) {
@@ -220,6 +247,17 @@ export default {
       }
     }
   },
+  _handleSnapHoverPreview() {
+    if (this.isDrawing) return;
+    const pos = this.stage.getPointerPosition();
+    if (!pos) return;
+    const target = Connection.findSnapTarget(pos);
+    if (target) {
+      Connection.showSnapVisuals(target);
+    } else {
+      Connection.hideSnapVisuals();
+    }
+  },
   _canInteractWithNode(node, mousePos) {
     const selectedNodes = Transformer._nodes();
     if (selectedNodes.includes(node)) {

package/src/components/functions/clipboard.js

@@ -2,6 +2,7 @@ import Canvas from './canvas';
 import Transformer from './transformer';
 import Tools from './tools';
 import Histories from './histories';
+import Connection from './tools/helper/connection';
 export default {
   copiedNodes: [],
   copy() {
@@ -13,6 +14,21 @@ export default {
   },
   paste() {
     if (this.copiedNodes && this.copiedNodes.length > 0) {
+      const idMap = {};
+      this.copiedNodes.forEach((node) => {
+        if (node.attrs.nodeId) {
+          const oldId = node.attrs.nodeId;
+          node.setAttr('nodeId', undefined);
+          Connection.ensureNodeId(node);
+          idMap[oldId] = node.attrs.nodeId;
+        }
+      });
+      this.copiedNodes.forEach((node) => {
+        if (node.className === 'Line' || node.className === 'Arrow') {
+          this._remapLineAttachment(node, 'start', idMap);
+          this._remapLineAttachment(node, 'end', idMap);
+        }
+      });
       this.copiedNodes.forEach((node) => {
         node.x(node.x() + 10);
         node.y(node.y() + 10);
@@ -24,6 +40,17 @@ export default {
       Histories.record();
     }
   },
+  _remapLineAttachment(line, end, idMap) {
+    const oldId = line.attrs[`${end}AttachedTo`];
+    if (!oldId) return;
+    if (idMap[oldId]) {
+      line.setAttr(`${end}AttachedTo`, idMap[oldId]);
+    } else {
+      line.setAttr(`${end}AttachedTo`, undefined);
+      line.setAttr(`${end}AttachedLocalX`, undefined);
+      line.setAttr(`${end}AttachedLocalY`, undefined);
+    }
+  },
   _addEventsToCopiedNode(node) {
     const className = node.getClassName();
     if (className === 'Text') {

package/src/components/functions/laser.js

@@ -0,0 +1,188 @@
+import Konva from 'konva';
+
+const FADE_DURATION = 700;
+const LASER_WIDTH = 4;
+const DRAG_THRESHOLD = 2;
+const GLOW_COLOR = '243, 59, 41';
+const CORE_COLOR = '255, 110, 90';
+
+export default {
+  stage: null,
+  container: null,
+  layer: null,
+  shape: null,
+  segments: [],
+  isPressed: false,
+  hasDragged: false,
+  startX: 0,
+  startY: 0,
+  lastX: 0,
+  lastY: 0,
+  rafId: null,
+  active: false,
+  _onMouseDown: null,
+  _onMouseMove: null,
+  _onMouseUp: null,
+  _onTick: null,
+
+  initialize(stage, container) {
+    this.stage = stage;
+    this.container = container;
+    this._onMouseDown = this._handleMouseDown.bind(this);
+    this._onMouseMove = this._handleMouseMove.bind(this);
+    this._onMouseUp = this._handleMouseUp.bind(this);
+    this._onTick = this._tick.bind(this);
+    this.layer = new Konva.Layer({ listening: false });
+    this.shape = new Konva.Shape({
+      listening: false,
+      sceneFunc: (ctx) => this._renderSegments(ctx)
+    });
+    this.layer.add(this.shape);
+    this.layer.hide();
+    stage.add(this.layer);
+  },
+
+  destroy() {
+    this.deactivate();
+    if (this.layer) {
+      this.layer.destroy();
+      this.layer = null;
+      this.shape = null;
+    }
+    this.stage = null;
+    this.container = null;
+  },
+
+  activate() {
+    if (this.active || !this.layer) return;
+    this.active = true;
+    this.layer.show();
+    this.layer.moveToTop();
+    window.addEventListener('pointerdown', this._onMouseDown, true);
+    window.addEventListener('pointermove', this._onMouseMove, true);
+    window.addEventListener('pointerup', this._onMouseUp, true);
+    window.addEventListener('pointercancel', this._onMouseUp, true);
+    this.rafId = requestAnimationFrame(this._onTick);
+  },
+
+  deactivate() {
+    if (!this.active) return;
+    this.active = false;
+    window.removeEventListener('pointerdown', this._onMouseDown, true);
+    window.removeEventListener('pointermove', this._onMouseMove, true);
+    window.removeEventListener('pointerup', this._onMouseUp, true);
+    window.removeEventListener('pointercancel', this._onMouseUp, true);
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+    this.segments = [];
+    this.isPressed = false;
+    this.hasDragged = false;
+    if (this.layer) {
+      this.layer.hide();
+      this.layer.batchDraw();
+    }
+  },
+
+  _isWithinContainer(clientX, clientY) {
+    if (!this.container) return false;
+    const rect = this.container.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return false;
+    return clientX >= rect.left && clientX <= rect.right &&
+           clientY >= rect.top && clientY <= rect.bottom;
+  },
+
+  _toStageCoords(clientX, clientY) {
+    const rect = this.container.getBoundingClientRect();
+    return { x: clientX - rect.left, y: clientY - rect.top };
+  },
+
+  _handleMouseDown(e) {
+    if (e.button !== 0) return;
+    if (!this._isWithinContainer(e.clientX, e.clientY)) return;
+    const pt = this._toStageCoords(e.clientX, e.clientY);
+    this.isPressed = true;
+    this.hasDragged = false;
+    this.startX = pt.x;
+    this.startY = pt.y;
+    this.lastX = pt.x;
+    this.lastY = pt.y;
+  },
+
+  _handleMouseMove(e) {
+    if ((e.buttons & 1) === 0) {
+      this.isPressed = false;
+      this.hasDragged = false;
+      return;
+    }
+    if (!this.isPressed) return;
+    const pt = this._toStageCoords(e.clientX, e.clientY);
+    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;
+      this.hasDragged = true;
+      this.segments.push({
+        x1: this.startX, y1: this.startY,
+        x2: pt.x, y2: pt.y,
+        time: performance.now()
+      });
+    } else {
+      this.segments.push({
+        x1: this.lastX, y1: this.lastY,
+        x2: pt.x, y2: pt.y,
+        time: performance.now()
+      });
+    }
+    this.lastX = pt.x;
+    this.lastY = pt.y;
+  },
+
+  _handleMouseUp() {
+    this.isPressed = false;
+    this.hasDragged = false;
+  },
+
+  _tick() {
+    if (!this.active) return;
+    const now = performance.now();
+    const initialLength = this.segments.length;
+    while (this.segments.length && now - this.segments[0].time > FADE_DURATION) {
+      this.segments.shift();
+    }
+    if (this.segments.length > 0 || initialLength > 0) {
+      this.layer.batchDraw();
+    }
+    this.rafId = requestAnimationFrame(this._onTick);
+  },
+
+  _renderSegments(ctx) {
+    const segs = this.segments;
+    if (segs.length === 0) return;
+    const now = performance.now();
+    const newestAge = (now - segs[segs.length - 1].time) / FADE_DURATION;
+    const opacity = Math.max(0, 1 - newestAge);
+    if (opacity <= 0) return;
+
+    ctx.save();
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+    ctx.moveTo(segs[0].x1, segs[0].y1);
+    for (let i = 0; i < segs.length; i++) {
+      ctx.lineTo(segs[i].x2, segs[i].y2);
+    }
+
+    ctx.strokeStyle = `rgba(${GLOW_COLOR}, ${opacity * 0.3})`;
+    ctx.lineWidth = LASER_WIDTH * 2.5;
+    ctx.stroke();
+
+    ctx.strokeStyle = `rgba(${CORE_COLOR}, ${opacity})`;
+    ctx.lineWidth = LASER_WIDTH;
+    ctx.stroke();
+
+    ctx.restore();
+  }
+};

package/src/components/functions/properties.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Canvas from './canvas'
 import Transformer from './transformer'
+import Connection from './tools/helper/connection'
 
 export default new Vue({
   data() {
@@ -17,7 +18,7 @@ export default new Vue({
       isTextNodesSelected: false,
       isMassivelyAssigningProperties: false,
       isToolLocked: false,
-      isCanvasPenetrable: false,
+      isAltHeld: false,
       fontSizeOptions: {
         15: 'S',
         20: 'M',
@@ -105,14 +106,19 @@ export default new Vue({
       return this.tool === 'text' || this.isTextNodesSelected;
     },
     isUsingDrawingTool() {
-      return (this.tool !== 'selector');
+      return this.tool !== 'selector' && this.tool !== 'laser';
+    },
+    isCanvasPenetrable() {
+      return this.tool === 'laser' ||
+             this.isAltHeld ||
+             (this.tool === 'selector' && this.isToolLocked);
     }
   },
   watch: {
-    toolSelected() {
+    toolSelected(newTool) {
       this.refreshNodesStatus()
-      if (this.tool === 'selector' && this.isToolLocked) {
-        this.isCanvasPenetrable = true;
+      if (newTool !== 'line' && newTool !== 'arrow') {
+        Connection.hideSnapVisuals()
       }
     }
   },

package/src/components/functions/tools/arrow.js

@@ -4,21 +4,29 @@ import Canvas from '../canvas'
 import Histories from '../histories'
 import AngleSnap from './helper/angleSnap'
 import AttachedText from './helper/attachedText'
+import Connection from './helper/connection'
 
 export default {
   temporalShape: null,
   startX: 0,
   startY: 0,
+  startSnap: null,
+  endSnap: null,
   show({ offsetX, offsetY }) {
     Canvas.isDrawing = true;
-    this.startX = offsetX
-    this.startY = offsetY
+    const startSnap = Connection.findSnapTarget({ x: offsetX, y: offsetY })
+    const startX = startSnap ? startSnap.worldX : offsetX
+    const startY = startSnap ? startSnap.worldY : offsetY
+    this.startX = startX
+    this.startY = startY
+    this.startSnap = startSnap
+    this.endSnap = null
     const strokeWidth = Properties.strokeWidth
     const pointerWidth = Math.pow(Properties.strokeWidth, 2) / 2
     const pointerLength = Math.pow(Properties.strokeWidth, 2) / 2
     const stroke = Properties.strokeColor
-    const newArrow = this.generate({ 
-      points: [offsetX, offsetY, offsetX, offsetY],
+    const newArrow = this.generate({
+      points: [startX, startY, startX, startY],
       stroke,
       strokeWidth,
       pointerWidth,
@@ -26,25 +34,47 @@ export default {
     })
     this.temporalShape = newArrow
     Canvas.layer.add(this.temporalShape)
+    Connection.hideSnapVisuals()
   },
   change({ offsetX, offsetY, shiftKey }) {
-    if (Canvas.isDrawing) {
-      const endPoint = AngleSnap.getSnappedEndPoint(
-        this.startX,
-        this.startY,
-        offsetX,
-        offsetY,
-        shiftKey
-      );
-      this.temporalShape.points([this.startX, this.startY, endPoint.x, endPoint.y]);
+    if (!Canvas.isDrawing) return
+    const endPoint = AngleSnap.getSnappedEndPoint(
+      this.startX,
+      this.startY,
+      offsetX,
+      offsetY,
+      shiftKey
+    );
+    let endX = endPoint.x
+    let endY = endPoint.y
+    const endSnap = Connection.findSnapTarget({ x: endX, y: endY }, this.temporalShape, 'end')
+    if (endSnap) {
+      endX = endSnap.worldX
+      endY = endSnap.worldY
+      Connection.showSnapVisuals(endSnap)
+    } else {
+      Connection.hideSnapVisuals()
     }
+    this.endSnap = endSnap
+    this.temporalShape.points([this.startX, this.startY, endX, endY]);
   },
   finish() {
+    Connection.hideSnapVisuals()
+    if (this.temporalShape) {
+      if (this.startSnap) {
+        Connection.attachLineEndpoint(this.temporalShape, 'start', this.startSnap)
+      }
+      if (this.endSnap) {
+        Connection.attachLineEndpoint(this.temporalShape, 'end', this.endSnap)
+      }
+    }
     if (!Properties.isToolLocked) {
       Properties.tool = Properties.latestTool.tool
       Properties.isToolLocked = Properties.latestTool.isToolLocked
     }
     this.temporalShape = null
+    this.startSnap = null
+    this.endSnap = null
   },
   bindEvents(newArrow) {
     newArrow.off('transform')
@@ -60,8 +90,9 @@ export default {
     newArrow.on('transformend', Histories.record)
     newArrow.on('dragend', Histories.record)
     AttachedText.bindShapeEvents(newArrow)
+    Connection.bindLineListeners(newArrow)
   },
-  generate({ x, y, scaleX, scaleY, skewX, rotation, points, stroke, strokeWidth, pointerWidth, pointerLength, attachedText, attachedFontSize, attachedFill }) {
+  generate({ x, y, scaleX, scaleY, skewX, rotation, points, stroke, strokeWidth, pointerWidth, pointerLength, attachedText, attachedFontSize, attachedFill, startAttachedTo, startAttachedLocalX, startAttachedLocalY, endAttachedTo, endAttachedLocalX, endAttachedLocalY }) {
     const newArrow = new Konva.Arrow({
       x,
       y,
@@ -77,6 +108,12 @@ export default {
       attachedText,
       attachedFontSize,
       attachedFill,
+      startAttachedTo,
+      startAttachedLocalX,
+      startAttachedLocalY,
+      endAttachedTo,
+      endAttachedLocalX,
+      endAttachedLocalY,
       name: 'node',
       nodeType: 'arrow',
       lineCap: 'round',

package/src/components/functions/tools/ellipse.js

@@ -4,6 +4,7 @@ import Canvas from '../canvas'
 import Histories from '../histories'
 import ShapeConstraint from './helper/shapeConstraint'
 import AttachedText from './helper/attachedText'
+import Connection from './helper/connection'
 
 export default {
   temporalShape: null,
@@ -60,7 +61,7 @@ export default {
       }
     }, 200)
   },
-  generate({ x, y, radiusX, radiusY, scaleX, scaleY, skewX, rotation, fill, stroke, strokeWidth, attachedText, attachedFontSize, attachedFill }) {
+  generate({ x, y, radiusX, radiusY, scaleX, scaleY, skewX, rotation, fill, stroke, strokeWidth, attachedText, attachedFontSize, attachedFill, nodeId }) {
     const newEllipse = new Konva.Ellipse({
       x,
       y,
@@ -76,10 +77,12 @@ export default {
       attachedText,
       attachedFontSize,
       attachedFill,
+      nodeId,
       name: 'node',
       nodeType: 'ellipse',
       strokeScaleEnabled: false
     })
+    Connection.ensureNodeId(newEllipse)
     this.bindEvents(newEllipse)
     return newEllipse
   },
@@ -89,5 +92,6 @@ export default {
     newEllipse.on('transformend', Histories.record)
     newEllipse.on('dragend', Histories.record)
     AttachedText.bindShapeEvents(newEllipse)
+    Connection.bindShapeListeners(newEllipse)
   }
 }