jellies-draw 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jellies-draw",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "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,44 @@ export default {
       return;
     }
     Transformer.selectNode(targetNode, metaPressed);
+  },
+  _handleMouseMove(e) {
+    if (Properties.isUsingDrawingTool || Properties.isUsingText) {
+      return;
+    }
+
+    const target = e.target;
+    
+    if (target === this.stage) {
+      this.stage.container().style.cursor = 'default';
+      return;
+    }
+
+    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) {
+        target.draggable(true);
+      }
+    }
+  },
+  _canInteractWithNode(node, mousePos) {
+    const selectedNodes = Transformer._nodes();
+    if (selectedNodes.includes(node)) {
+      return true;
+    }
+
+    if (!['Rect', 'Ellipse'].includes(node.className) ||
+        (node.attrs.fill && node.attrs.fill !== 'transparent')) {
+      return true;
+    }
+    
+    return Transformer._isNearBorder(node, mousePos);
   }
 }
 

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

@@ -2,6 +2,8 @@ import Konva from 'konva'
 import Properties from '../properties'
 import Canvas from '../canvas'
 import Histories from '../histories'
+import AngleSnap from './helper/angleSnap'
+
 export default {
   temporalShape: null,
   startX: 0,
@@ -24,9 +26,16 @@ export default {
     this.temporalShape = newArrow
     Canvas.layer.add(this.temporalShape)
   },
-  change({ offsetX, offsetY }) {
+  change({ offsetX, offsetY, shiftKey }) {
     if (Canvas.isDrawing) {
-      this.temporalShape.points([this.startX, this.startY, offsetX, offsetY]);
+      const endPoint = AngleSnap.getSnappedEndPoint(
+        this.startX,
+        this.startY,
+        offsetX,
+        offsetY,
+        shiftKey
+      );
+      this.temporalShape.points([this.startX, this.startY, endPoint.x, endPoint.y]);
     }
   },
   finish() {

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

@@ -2,6 +2,8 @@ import Konva from 'konva'
 import Properties from '../properties'
 import Canvas from '../canvas'
 import Histories from '../histories'
+import ShapeConstraint from './helper/shapeConstraint'
+
 export default {
   temporalShape: null,
   startX: 0,
@@ -26,12 +28,19 @@ export default {
     this.temporalShape = newEllipse
     Canvas.layer.add(this.temporalShape)
   },
-  change({ offsetX, offsetY }) {
+  change({ offsetX, offsetY, shiftKey }) {
     if (Canvas.isDrawing) {
+      const { width, height } = ShapeConstraint.getConstrainedSize(
+        this.startX,
+        this.startY,
+        offsetX,
+        offsetY,
+        shiftKey
+      );
       this.temporalShape.x((offsetX + this.startX) / 2);
       this.temporalShape.y((offsetY + this.startY) / 2);
-      this.temporalShape.radiusX(Math.abs(offsetX - this.startX) / 2);
-      this.temporalShape.radiusY(Math.abs(offsetY - this.startY) / 2);
+      this.temporalShape.radiusX(Math.abs(width) / 2);
+      this.temporalShape.radiusY(Math.abs(height) / 2);
     }
   },
   finish() {

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,37 @@ 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 '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 +176,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/helper/angleSnap.js

@@ -0,0 +1,29 @@
+export default {
+  getAngle(startX, startY, endX, endY) {
+    return Math.atan2(endY - startY, endX - startX);
+  },
+
+  snapAngle(angle) {
+    let degrees = (angle * 180) / Math.PI;
+    degrees = (degrees + 360) % 360;
+    const snappedDegrees = Math.round(degrees / 15) * 15;
+    return (snappedDegrees * Math.PI) / 180;
+  },
+
+  getSnappedEndPoint(startX, startY, endX, endY, isShiftPressed) {
+    if (!isShiftPressed) {
+      return { x: endX, y: endY };
+    }
+
+    const angle = this.getAngle(startX, startY, endX, endY);
+    const snappedAngle = this.snapAngle(angle);
+    const distance = Math.sqrt(
+      Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2)
+    );
+    
+    return {
+      x: startX + distance * Math.cos(snappedAngle),
+      y: startY + distance * Math.sin(snappedAngle)
+    };
+  }
+}

package/src/components/functions/tools/helper/shapeConstraint.js

@@ -0,0 +1,19 @@
+export default {
+  getConstrainedSize(startX, startY, currentX, currentY, isShiftPressed) {
+    if (!isShiftPressed) {
+      return {
+        width: currentX - startX,
+        height: currentY - startY
+      };
+    }
+
+    const width = currentX - startX;
+    const height = currentY - startY;
+    const size = Math.max(Math.abs(width), Math.abs(height));
+    
+    return {
+      width: size * Math.sign(width),
+      height: size * Math.sign(height)
+    };
+  }
+}

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

@@ -2,6 +2,8 @@ import Konva from 'konva'
 import Properties from '../properties'
 import Canvas from '../canvas'
 import Histories from '../histories'
+import AngleSnap from './helper/angleSnap'
+
 export default {
   temporalShape: null,
   startX: 0,
@@ -20,9 +22,16 @@ export default {
     this.temporalShape = newLine
     Canvas.layer.add(this.temporalShape)
   },
-  change({ offsetX, offsetY }) {
+  change({ offsetX, offsetY, shiftKey }) {
     if (Canvas.isDrawing) {
-      this.temporalShape.points([this.startX, this.startY, offsetX, offsetY]);
+      const endPoint = AngleSnap.getSnappedEndPoint(
+        this.startX,
+        this.startY,
+        offsetX,
+        offsetY,
+        shiftKey
+      );
+      this.temporalShape.points([this.startX, this.startY, endPoint.x, endPoint.y]);
     }
   },
   finish() {

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

@@ -2,6 +2,8 @@ import Konva from 'konva'
 import Properties from '../properties'
 import Canvas from '../canvas'
 import Histories from '../histories'
+import ShapeConstraint from './helper/shapeConstraint'
+
 export default {
   temporalShape: null,
   startX: 0,
@@ -26,10 +28,17 @@ export default {
     this.temporalShape = newRectangle
     Canvas.layer.add(this.temporalShape)
   },
-  change({ offsetX, offsetY }) {
+  change({ offsetX, offsetY, shiftKey }) {
     if (Canvas.isDrawing) {
-      this.temporalShape.width(offsetX - this.startX)
-      this.temporalShape.height(offsetY - this.startY)
+      const { width, height } = ShapeConstraint.getConstrainedSize(
+        this.startX,
+        this.startY,
+        offsetX,
+        offsetY,
+        shiftKey
+      );
+      this.temporalShape.width(width);
+      this.temporalShape.height(height);
     }
   },
   finish() {

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

@@ -11,6 +11,15 @@ export default {
   },
   initialize() {
     this.transformer = new Konva.Transformer();
+    
+    // 创建一个透明的拖动区域
+    this.dragArea = new Konva.Rect({
+      fill: 'transparent',
+      draggable: true,
+      listening: true
+    });
+    
+    Canvas.layer.add(this.dragArea);
     Canvas.layer.add(this.transformer);
   },
   copySelectedNodes() {
@@ -39,6 +48,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]);
@@ -64,20 +77,22 @@ export default {
       this._selectLinearNode(targetNodes[0]);
     } else {
       this._nodes(targetNodes);
-      if (targetNodes.length === 1) {
-        this.transformer.enabledAnchors(['top-left', 'top-center', 'top-right', 'middle-right', 'middle-left', 'bottom-left', 'bottom-center', 'bottom-right']);
+      if (targetNodes.length > 0) {
+        this._updateDragArea(targetNodes);
+        this._updateTransformerAnchors(targetNodes);
       } else {
-        this.transformer.enabledAnchors(['top-left', 'top-right', 'bottom-left', 'bottom-right']);
+        this.dragArea.visible(false);
       }
-      Properties.isTextNodesSelected = this._hasSelectedOnlyTextNodes()
+      Properties.isTextNodesSelected = this._hasSelectedOnlyTextNodes();
     }
     Properties.setProperties(this._getCommonPropertiesOfSelectedNodes());
   },
   deselectAllNodes() {
+    this.dragArea.visible(false);
     this.selectNodes([]);
     if (this.linearTransformer.node) {
       this.linearTransformer.node.destroy();
-      this._removeLinearTransformer()
+      this._removeLinearTransformer();
     }
   },
   selectAllNodes() {
@@ -211,5 +226,75 @@ export default {
       return hasOnlyTextNodes;
     }
     return false;
+  },
+  _shouldSelectNode(node) {
+    if ((node.className === 'Rect' || 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 transform = node.getAbsoluteTransform().copy();
+    const localPoint = transform.invert().point(point);
+    
+    const threshold = node.attrs.strokeWidth * 2;
+
+    if (node.className === 'Rect') {
+      const width = node.width();
+      const height = node.height();
+      
+      const nearHorizontalEdge = (localPoint.y >= -threshold && localPoint.y <= threshold) || 
+                               (localPoint.y >= height - threshold && localPoint.y <= height + threshold);
+      const nearVerticalEdge = (localPoint.x >= -threshold && localPoint.x <= threshold) ||
+                             (localPoint.x >= width - threshold && localPoint.x <= width + threshold);
+      
+      return (nearHorizontalEdge && localPoint.x >= -threshold && localPoint.x <= width + threshold) ||
+             (nearVerticalEdge && localPoint.y >= -threshold && localPoint.y <= height + threshold);
+    } 
+    
+    if (node.className === 'Ellipse') {
+      const radiusX = node.radiusX();
+      const radiusY = node.radiusY();
+      
+      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;
+  },
+  _updateDragArea(targetNodes) {
+    const box = this.transformer.getClientRect();
+    this.dragArea.setAttrs({
+      x: box.x,
+      y: box.y,
+      width: box.width,
+      height: box.height,
+      visible: true
+    });
+
+    this.dragArea.off('dragmove');
+    this.dragArea.on('dragmove', () => {
+      const dx = this.dragArea.x() - box.x;
+      const dy = this.dragArea.y() - box.y;
+      targetNodes.forEach(node => {
+        node.x(node.x() + dx);
+        node.y(node.y() + dy);
+      });
+      box.x = this.dragArea.x();
+      box.y = this.dragArea.y();
+    });
+  },
+  _updateTransformerAnchors(targetNodes) {
+    if (targetNodes.length === 1) {
+      this.transformer.enabledAnchors(['top-left', 'top-center', 'top-right', 'middle-right', 'middle-left', 'bottom-left', 'bottom-center', 'bottom-right']);
+    } else {
+      this.transformer.enabledAnchors(['top-left', 'top-right', 'bottom-left', 'bottom-right']);
+    }
   }
 }