jellies-draw 0.2.0 → 0.2.1

package/package.json

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

package/src/components/functions/canvas.js

@@ -42,6 +42,7 @@ export default {
         window.addEventListener('pointerup', this.handleGlobalPointerUp, { once: true });
       }
     });
+    this.stage.on('mousemove', this._handleMouseMove.bind(this));
   },
   generateEventHandlers() {
     this.resizeHandler = this._handleResize.bind(this);
@@ -193,6 +194,43 @@ export default {
       return;
     }
     Transformer.selectNode(targetNode, metaPressed);
+  },
+  _handleMouseMove(e) {
+    if (Properties.isUsingDrawingTool || Properties.isUsingText) {
+      return;
+    }
+
+    const target = e.target;
+    
+    // Reset cursor to default when over stage
+    if (target === this.stage) {
+      this.stage.container().style.cursor = 'default';
+      return;
+    }
+
+    // Handle cursor for nodes
+    if (target.hasName('node')) {
+      if (this._shouldShowMoveCursor(target)) {
+        this.stage.container().style.cursor = 'move';
+      } else {
+        this.stage.container().style.cursor = 'default';
+      }
+    }
+  },
+  _shouldShowMoveCursor(node) {
+    // Always show move cursor for non-shape nodes
+    if (!['Rect', 'Circle', 'Ellipse'].includes(node.className)) {
+      return true;
+    }
+
+    // Show move cursor for filled shapes
+    if (node.attrs.fill && node.attrs.fill !== 'transparent') {
+      return true;
+    }
+
+    // For unfilled shapes, only show move cursor near border
+    const mousePos = this.stage.getPointerPosition();
+    return Transformer._isNearBorder(node, mousePos);
   }
 }
 

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

@@ -26,8 +26,8 @@ export default {
   change({ offsetX, offsetY }) {
     if (!Canvas.isDrawing) return
 
+    this._interpolateAndCheck(this.lastX, this.lastY, offsetX, offsetY)
     this._updateEraserPath(offsetX, offsetY)
-    this._checkAndMarkIntersections(offsetX, offsetY)
     
     this.lastX = offsetX
     this.lastY = offsetY
@@ -60,11 +60,21 @@ export default {
   },
 
   _checkAndMarkIntersections(x, y) {
+    const eraserRadius = Properties.strokeWidth
+
     Canvas.stage.find('.node').forEach(node => {
       if (node === this.temporalShape) return
       
-      if (this._checkIntersection(node, { x, y })) {
-        if (!this.erasedNodes.has(node)) {
+      const nodeRect = node.getClientRect()
+      const eraserRect = {
+        x: x - eraserRadius,
+        y: y - eraserRadius,
+        width: eraserRadius * 2,
+        height: eraserRadius * 2
+      }
+
+      if (this._checkRectOverlap(nodeRect, eraserRect)) {
+        if (this._checkIntersection(node, { x, y }) && !this.erasedNodes.has(node)) {
           this._markNodeForErasure(node)
         }
       }
@@ -92,24 +102,38 @@ export default {
     if (node.attrs.nodeType === 'pen') {
       return this._checkPenIntersection(node, point)
     }
-    return this._checkDefaultIntersection(node)
+    
+    switch (node.className) {
+      case 'Line':
+      case 'Arrow':
+        return this._checkLineIntersection(node, point)
+      case 'Circle':
+      case 'Ellipse':
+        return this._checkEllipseIntersection(node, point)
+      case 'Rect':
+        return this._checkRectIntersection(node, point)
+      default:
+        return this._checkDefaultIntersection(node)
+    }
   },
 
   _checkPenIntersection(node, point) {
     const localPoint = this._transformPointToLocal(node, point)
-    const { points: pts, widths } = node.attrs
+    const { points, widths } = node.attrs
+    const eraserRadius = Properties.strokeWidth
 
-    for (let i = 0; i < pts.length - 1; i++) {
+    for (let i = 0; i < points.length - 1; i++) {
       const distance = this._getDistanceToLineSegment(
         localPoint.x,
         localPoint.y,
-        pts[i][0],
-        pts[i][1],
-        pts[i + 1][0],
-        pts[i + 1][1]
+        points[i][0],
+        points[i][1],
+        points[i + 1][0],
+        points[i + 1][1]
       )
 
-      if (distance < (widths[i] + Properties.strokeWidth) / 2) {
+      const combinedWidth = (widths[i] + eraserRadius) / 2
+      if (distance < combinedWidth) {
         return true
       }
     }
@@ -153,5 +177,102 @@ export default {
     const dx = x1 - x2
     const dy = y1 - y2
     return Math.sqrt(dx * dx + dy * dy)
+  },
+
+  _checkLineIntersection(node, point) {
+    const points = node.points()
+    const transform = node.getTransform()
+    const localPoint = transform.copy().invert().point(point)
+    const eraserRadius = Properties.strokeWidth
+    
+    for (let i = 0; i < points.length - 2; i += 2) {
+      const distance = this._getDistanceToLineSegment(
+        localPoint.x,
+        localPoint.y,
+        points[i],
+        points[i + 1],
+        points[i + 2],
+        points[i + 3]
+      )
+      
+      const combinedWidth = (node.strokeWidth() + eraserRadius) / 2
+      if (distance < combinedWidth) {
+        return true
+      }
+    }
+    return false
+  },
+
+  _checkEllipseIntersection(node, point) {
+    const transform = node.getTransform()
+    const localPoint = transform.copy().invert().point(point)
+    
+    const radiusX = node.radiusX()
+    const radiusY = node.radiusY()
+    
+    // Normalize point to unit circle
+    const normalizedX = localPoint.x / radiusX
+    const normalizedY = localPoint.y / radiusY
+    
+    // Check if point is within ellipse border
+    const distanceFromCenter = Math.sqrt(
+      normalizedX * normalizedX + normalizedY * normalizedY
+    )
+    
+    if (node.attrs.fill && node.attrs.fill !== 'transparent') {
+      // For filled ellipses, allow erasing anywhere inside
+      return distanceFromCenter <= 1
+    } 
+    // For unfilled ellipses, only erase near the border
+    return Math.abs(distanceFromCenter - 1) < Properties.strokeWidth / Math.min(radiusX, radiusY)
+  },
+
+  _checkRectIntersection(node, point) {
+    const transform = node.getTransform()
+    const localPoint = transform.copy().invert().point(point)
+    
+    const width = node.width()
+    const height = node.height()
+    const strokeWidth = Properties.strokeWidth
+
+    if (node.attrs.fill && node.attrs.fill !== 'transparent') {
+      // For filled rectangles, allow erasing anywhere inside
+      return localPoint.x >= -strokeWidth &&
+             localPoint.x <= width + strokeWidth &&
+             localPoint.y >= -strokeWidth &&
+             localPoint.y <= height + strokeWidth
+    }
+    // For unfilled rectangles, only erase near the border
+    return (Math.abs(localPoint.x) < strokeWidth || 
+            Math.abs(localPoint.x - width) < strokeWidth ||
+            Math.abs(localPoint.y) < strokeWidth ||
+            Math.abs(localPoint.y - height) < strokeWidth) &&
+            localPoint.x >= -strokeWidth &&
+            localPoint.x <= width + strokeWidth &&
+            localPoint.y >= -strokeWidth &&
+            localPoint.y <= height + strokeWidth
+  },
+
+  _interpolateAndCheck(x1, y1, x2, y2) {
+    const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
+    const steps = Math.ceil(distance / (Properties.strokeWidth / 2))
+    
+    if (steps > 1) {
+      for (let i = 1; i < steps; i++) {
+        const ratio = i / steps
+        const x = x1 + (x2 - x1) * ratio
+        const y = y1 + (y2 - y1) * ratio
+        this._checkAndMarkIntersections(x, y)
+      }
+    } else {
+      this._checkAndMarkIntersections(x2, y2)
+    }
+  },
+
+  _checkRectOverlap(rect1, rect2) {
+    return !(rect1.x > rect2.x + rect2.width ||
+             rect1.x + rect1.width < rect2.x ||
+             rect1.y > rect2.y + rect2.height ||
+             rect1.y + rect1.height < rect2.y)
   }
 }

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

@@ -39,8 +39,43 @@ export default {
     return this.selector !== null
   },
   _isInSelector(node) {
-    const nodeRect = node.getClientRect()
     const selectorRect = this.selector.getClientRect()
-    return Konva.Util.haveIntersection(selectorRect, nodeRect)
+    
+    if (node.className === 'Line' || node.className === 'Arrow') {
+      return this._isLineFullyContained(node, selectorRect)
+    }
+    
+    return this._isShapeFullyContained(node, selectorRect)
+  },
+  _isLineFullyContained(node, selectorRect) {
+    const points = node.points()
+    for (let i = 0; i < points.length; i += 2) {
+      const point = node.getAbsoluteTransform().point({ 
+        x: points[i], 
+        y: points[i + 1] 
+      })
+      
+      if (!this._isPointInRect(point, selectorRect)) {
+        return false
+      }
+    }
+    return true
+  },
+  _isShapeFullyContained(node, selectorRect) {
+    const nodeRect = node.getClientRect()
+    const corners = [
+      { x: nodeRect.x, y: nodeRect.y }, // top-left
+      { x: nodeRect.x + nodeRect.width, y: nodeRect.y }, // top-right
+      { x: nodeRect.x, y: nodeRect.y + nodeRect.height }, // bottom-left
+      { x: nodeRect.x + nodeRect.width, y: nodeRect.y + nodeRect.height } // bottom-right
+    ]
+    
+    return corners.every(point => this._isPointInRect(point, selectorRect))
+  },
+  _isPointInRect(point, rect) {
+    return point.x >= rect.x && 
+           point.x <= rect.x + rect.width &&
+           point.y >= rect.y && 
+           point.y <= rect.y + rect.height
   }
 }

package/src/components/functions/transformer.js

@@ -39,6 +39,10 @@ export default {
     });
   },
   selectNode(targetNode, isAppending = false) {
+    if (!this._shouldSelectNode(targetNode)) {
+      return;
+    }
+
     const isSelected = this._nodes().indexOf(targetNode) >= 0 || this.linearTransformer.node === targetNode;
     if (!isAppending && !isSelected) {
       this.selectNodes([targetNode]);
@@ -211,5 +215,44 @@ export default {
       return hasOnlyTextNodes;
     }
     return false;
+  },
+  _shouldSelectNode(node) {
+    if ((node.className === 'Rect' || node.className === 'Circle' || node.className === 'Ellipse') &&
+        (!node.attrs.fill || node.attrs.fill === 'transparent')) {
+      const stage = Canvas.stage;
+      const mousePos = stage.getPointerPosition();
+      return this._isNearBorder(node, mousePos);
+    }
+    return true;
+  },
+  _isNearBorder(node, point) {
+    const localPoint = node.getAbsoluteTransform().copy().invert().point(point);
+    const threshold = Properties.strokeWidth * 2;
+
+    if (node.className === 'Rect') {
+      const width = node.width();
+      const height = node.height();
+      
+      return (Math.abs(localPoint.x) < threshold || 
+              Math.abs(localPoint.x - width) < threshold ||
+              Math.abs(localPoint.y) < threshold ||
+              Math.abs(localPoint.y - height) < threshold) &&
+             localPoint.x >= -threshold &&
+             localPoint.x <= width + threshold &&
+             localPoint.y >= -threshold &&
+             localPoint.y <= height + threshold;
+    } else if (node.className === 'Circle' || node.className === 'Ellipse') {
+      const radiusX = node.radiusX ? node.radiusX() : node.radius();
+      const radiusY = node.radiusY ? node.radiusY() : node.radius();
+      
+      const normalizedX = localPoint.x / radiusX;
+      const normalizedY = localPoint.y / radiusY;
+      
+      const distanceFromCenter = Math.sqrt(
+        normalizedX * normalizedX + normalizedY * normalizedY
+      );
+      return Math.abs(distanceFromCenter - 1) < threshold / Math.min(radiusX, radiusY);
+    }
+    return true;
   }
 }