jellies-draw 0.2.1 → 0.2.2

package/package.json

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

package/src/components/functions/canvas.js

@@ -202,34 +202,35 @@ export default {
 
     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';
+      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);
       }
     }
   },
-  _shouldShowMoveCursor(node) {
-    // Always show move cursor for non-shape nodes
-    if (!['Rect', 'Circle', 'Ellipse'].includes(node.className)) {
+  _canInteractWithNode(node, mousePos) {
+    const selectedNodes = Transformer._nodes();
+    if (selectedNodes.includes(node)) {
       return true;
     }
 
-    // Show move cursor for filled shapes
-    if (node.attrs.fill && node.attrs.fill !== 'transparent') {
+    if (!['Rect', 'Ellipse'].includes(node.className) ||
+        (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/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

@@ -107,7 +107,6 @@ export default {
       case 'Line':
       case 'Arrow':
         return this._checkLineIntersection(node, point)
-      case 'Circle':
       case 'Ellipse':
         return this._checkEllipseIntersection(node, point)
       case 'Rect':

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/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() {
@@ -68,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() {
@@ -217,7 +228,7 @@ export default {
     return false;
   },
   _shouldSelectNode(node) {
-    if ((node.className === 'Rect' || node.className === 'Circle' || node.className === 'Ellipse') &&
+    if ((node.className === 'Rect' || node.className === 'Ellipse') &&
         (!node.attrs.fill || node.attrs.fill === 'transparent')) {
       const stage = Canvas.stage;
       const mousePos = stage.getPointerPosition();
@@ -226,33 +237,64 @@ export default {
     return true;
   },
   _isNearBorder(node, point) {
-    const localPoint = node.getAbsoluteTransform().copy().invert().point(point);
-    const threshold = Properties.strokeWidth * 2;
+    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();
       
-      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 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);
       
-      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']);
+    }
   }
 }