jellies-draw 0.1.11 → 0.2.0

package/package.json

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

package/src/components/functions/canvas.js

@@ -35,8 +35,13 @@ export default {
     Histories.record();
     this.stage.on('pointerdown', this.pointerDownHandler);
     this.stage.on('pointermove', this.pointerMoveHandler);
-    this.stage.on('pointerup', this.pointerUpHandler);
+    this.stage.on('pointerup', this.handleCanvasPointerUp);
     this.stage.on('click tap', this.clickHandler);
+    this.stage.on('pointerdown', () => {
+      if (Properties.isUsingDrawingTool) {
+        window.addEventListener('pointerup', this.handleGlobalPointerUp, { once: true });
+      }
+    });
   },
   generateEventHandlers() {
     this.resizeHandler = this._handleResize.bind(this);
@@ -44,7 +49,17 @@ export default {
     this.keyupHandler = this._handleKeyup.bind(this);
     this.pointerDownHandler = this.handlePointerDown.bind(this);
     this.pointerMoveHandler = this.handlePointerMove.bind(this);
-    this.pointerUpHandler = this.handlePointerUp.bind(this);
+    this.handleCanvasPointerUp = (event) => {
+      if (event.target.getStage()) {
+        this.handlePointerUp(event);
+      }
+    };
+    this.handleGlobalPointerUp = (event) => {
+      const container = this.stage.container();
+      if (!container.contains(event.target)) {
+        this.handlePointerUp(event);
+      }
+    };
     this.clickHandler = this.handleClick.bind(this);
   },
   clear() {
@@ -54,7 +69,7 @@ export default {
   destroy() {
     this.stage.off('pointerdown', this.pointerDownHandler);
     this.stage.off('pointermove', this.pointerMoveHandler);
-    this.stage.off('pointerup', this.pointerUpHandler);
+    this.stage.off('pointerup', this.handleCanvasPointerUp);
     this.stage.off('click tap', this.clickHandler);
     document.removeEventListener('keydown', this.keydownHandler);
     document.removeEventListener('keyup', this.keyupHandler);
@@ -180,3 +195,4 @@ export default {
     Transformer.selectNode(targetNode, metaPressed);
   }
 }
+

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

@@ -1,51 +1,157 @@
 import Konva from 'konva'
 import Properties from '../properties'
 import Canvas from '../canvas'
+
 export default {
-  temporalCurveTrajectory: null,
   temporalShape: null,
   startX: 0,
   startY: 0,
+  lastX: 0,
+  lastY: 0,
+  erasedNodes: new Set(),
+
   show({ offsetX, offsetY }) {
-    Canvas.isDrawing = true;
+    Canvas.isDrawing = true
     this.startX = offsetX
     this.startY = offsetY
-    this.temporalCurveTrajectory = null
-    const strokeWidth = Properties.strokeWidth
-    const newCurve = new Konva.Line({
-      points: [offsetX, offsetY, offsetX, offsetY],
-      stroke: 'transparent',
-      strokeWidth,
-      name: 'node',
-      bezier: true,
-      lineCap: 'round',
-      strokeScaleEnabled: false
-    });
+    this.lastX = offsetX
+    this.lastY = offsetY
+    this.erasedNodes.clear()
+    
+    const newCurve = this._generateEraserLine(offsetX, offsetY)
     this.temporalShape = newCurve
-    Canvas.layer.add(this.temporalShape);
+    Canvas.layer.add(this.temporalShape)
   },
+
   change({ offsetX, offsetY }) {
-    if (Canvas.isDrawing) {
-      if (!this.temporalCurveTrajectory) {
-        this.temporalCurveTrajectory = [this.startX, this.startY]
+    if (!Canvas.isDrawing) return
+
+    this._updateEraserPath(offsetX, offsetY)
+    this._checkAndMarkIntersections(offsetX, offsetY)
+    
+    this.lastX = offsetX
+    this.lastY = offsetY
+    Canvas.layer.batchDraw()
+  },
+
+  finish() {
+    this._destroyErasedNodes()
+    this._cleanupTemporalShape()
+    Canvas.layer.batchDraw()
+  },
+
+  _generateEraserLine(x, y) {
+    return new Konva.Line({
+      points: [x, y],
+      stroke: '#000000',
+      strokeWidth: Properties.strokeWidth * 2,
+      opacity: 0,
+      lineCap: 'round',
+      lineJoin: 'round',
+      tension: 0.5,
+      strokeScaleEnabled: false
+    })
+  },
+
+  _updateEraserPath(x, y) {
+    const points = this.temporalShape.points()
+    points.push(x, y)
+    this.temporalShape.points(points)
+  },
+
+  _checkAndMarkIntersections(x, y) {
+    Canvas.stage.find('.node').forEach(node => {
+      if (node === this.temporalShape) return
+      
+      if (this._checkIntersection(node, { x, y })) {
+        if (!this.erasedNodes.has(node)) {
+          this._markNodeForErasure(node)
+        }
       }
-      this.temporalCurveTrajectory.push(offsetX, offsetY)
-      this.temporalShape.points(this.temporalCurveTrajectory);
-      Canvas.stage.find('.node')
-        .filter(node => this._hasIntersectionOnEraserCurve(node))
-        .forEach(node => node.opacity(0.1));
+    })
+  },
+
+  _markNodeForErasure(node) {
+    node.opacity(0.2)
+    this.erasedNodes.add(node)
+  },
+
+  _destroyErasedNodes() {
+    this.erasedNodes.forEach(node => node.destroy())
+    this.erasedNodes.clear()
+  },
+
+  _cleanupTemporalShape() {
+    if (this.temporalShape) {
+      this.temporalShape.destroy()
+      this.temporalShape = null
     }
   },
-  finish() {
-    Canvas.stage.find('.node')
-      .filter(node => this._hasIntersectionOnEraserCurve(node))
-      .forEach(node => node.remove())
-    this.temporalShape = null
+
+  _checkIntersection(node, point) {
+    if (node.attrs.nodeType === 'pen') {
+      return this._checkPenIntersection(node, point)
+    }
+    return this._checkDefaultIntersection(node)
+  },
+
+  _checkPenIntersection(node, point) {
+    const localPoint = this._transformPointToLocal(node, point)
+    const { points: pts, widths } = node.attrs
+
+    for (let i = 0; i < pts.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]
+      )
+
+      if (distance < (widths[i] + Properties.strokeWidth) / 2) {
+        return true
+      }
+    }
+    return false
   },
-  _hasIntersectionOnEraserCurve(node) {
+
+  _checkDefaultIntersection(node) {
     return Konva.Util.haveIntersection(
       this.temporalShape.getClientRect(),
       node.getClientRect()
-    );
+    )
+  },
+
+  _transformPointToLocal(node, point) {
+    const transform = node.getTransform()
+    return transform.copy().invert().point(point)
+  },
+
+  _getDistanceToLineSegment(px, py, x1, y1, x2, y2) {
+    const A = px - x1
+    const B = py - y1
+    const C = x2 - x1
+    const D = y2 - y1
+
+    const dot = A * C + B * D
+    const lenSq = C * C + D * D
+    const param = lenSq !== 0 ? dot / lenSq : -1
+
+    if (param < 0) return this._getDistance(px, py, x1, y1)
+    if (param > 1) return this._getDistance(px, py, x2, y2)
+
+    return this._getDistance(
+      px,
+      py,
+      x1 + param * C,
+      y1 + param * D
+    )
+  },
+
+  _getDistance(x1, y1, x2, y2) {
+    const dx = x1 - x2
+    const dy = y1 - y2
+    return Math.sqrt(dx * dx + dy * dy)
   }
 }

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

@@ -2,62 +2,373 @@ import Konva from 'konva'
 import Properties from '../properties'
 import Canvas from '../canvas'
 import Histories from '../histories'
+
 export default {
-  temporalCurveTrajectory: null,
   temporalShape: null,
   startX: 0,
   startY: 0,
+  lastX: 0,
+  lastY: 0,
+  lastTime: 0,
+  points: [],
+  widths: [],
+  boundMinX: 0,
+  boundMinY: 0,
+  boundMaxX: 0,
+  boundMaxY: 0,
+
   show({ offsetX, offsetY }) {
-    Canvas.isDrawing = true;
+    Canvas.isDrawing = true
     this.startX = offsetX
     this.startY = offsetY
-    this.temporalCurveTrajectory = null
-    const stroke = Properties.strokeColor
-    const strokeWidth = Properties.strokeWidth
+    this.lastX = offsetX
+    this.lastY = offsetY
+    this.lastTime = Date.now()
+    
+    this.boundMinX = offsetX
+    this.boundMinY = offsetY
+    this.boundMaxX = offsetX
+    this.boundMaxY = offsetY
+    
+    this.points = [[0, 0]]
+    this.widths = [Properties.strokeWidth]
+    
     const newCurve = this.generate({ 
-      points: [offsetX, offsetY, offsetX, offsetY],
-      stroke,
-      strokeWidth
+      x: offsetX,
+      y: offsetY,
+      points: this.points,
+      widths: this.widths,
+      stroke: Properties.strokeColor
     })
+    
     this.temporalShape = newCurve
     Canvas.layer.add(this.temporalShape)
   },
+
   change({ offsetX, offsetY }) {
-    if (Canvas.isDrawing) {
-      if (!this.temporalCurveTrajectory) {
-        this.temporalCurveTrajectory = [this.startX, this.startY]
-      }
-      this.temporalCurveTrajectory.push(offsetX, offsetY)
-      this.temporalShape.points(this.temporalCurveTrajectory);
-    }
+    if (!Canvas.isDrawing) return
+
+    const currentTime = Date.now()
+    const strokeWidth = this._calculateStrokeWidth(offsetX, offsetY, currentTime)
+
+    this._updateBoundaries(offsetX, offsetY)
+    
+    const relativeX = offsetX - this.startX
+    const relativeY = offsetY - this.startY
+    
+    this.points.push([relativeX, relativeY])
+    this.widths.push(strokeWidth)
+    
+    Canvas.layer.batchDraw()
+    
+    this.lastX = offsetX
+    this.lastY = offsetY
+    this.lastTime = currentTime
   },
+
   finish() {
+    if (!this.temporalShape) return
+
+    const maxStrokeWidth = Math.max(...this.widths)
+    const padding = maxStrokeWidth
+
+    this._adjustShapeBoundaries(padding)
+    Canvas.layer.batchDraw()
     this.temporalShape = null
   },
-  generate({ x, y, scaleX, scaleY, skewX, rotation, points, stroke, strokeWidth }) {
-    const newLine = new Konva.Line({
-      x,
-      y,
-      scaleX,
-      scaleY,
-      skewX,
-      rotation,
-      points,
+
+  generate({ points, widths, stroke, x, y, width, height }) {
+    const tool = this
+
+    const shape = new Konva.Shape({
+      x: x || 0,
+      y: y || 0,
+      width: width || 0,
+      height: height || 0,
       stroke,
-      strokeWidth,
+      points,
+      widths,
       name: 'node',
       nodeType: 'pen',
-      lineCap: 'round',
-      bezier: false,
-      strokeScaleEnabled: false
+      strokeScaleEnabled: false,
+
+      sceneFunc: (context, shape) => {
+        const smoothPoints = tool._calculateSmoothPoints(shape.attrs.points)
+        tool._drawSmoothLine(context, smoothPoints, shape.attrs.widths, shape.attrs.stroke)
+      },
+
+      hitFunc: (context, shape) => {
+        const smoothPoints = tool._calculateSmoothPoints(shape.attrs.points)
+        tool._drawHitPath(context, smoothPoints, shape.attrs.widths)
+        context.fillStrokeShape(shape)
+      }
     })
-    this.bindEvents(newLine)
-    return newLine
-  },
-  bindEvents(newLine) {
-    newLine.off('transformend')
-    newLine.off('dragend')
-    newLine.on('transformend', Histories.record)
-    newLine.on('dragend', Histories.record)
+
+    this.bindEvents(shape)
+    return shape
+  },
+
+  bindEvents(shape) {
+    shape.off('transformend')
+    shape.off('dragend')
+    shape.on('transformend', Histories.record)
+    shape.on('dragend', Histories.record)
+  },
+
+  _calculateStrokeWidth(offsetX, offsetY, currentTime) {
+    const timeDiff = currentTime - this.lastTime
+    const distance = Math.sqrt(
+      Math.pow(offsetX - this.lastX, 2) + 
+      Math.pow(offsetY - this.lastY, 2)
+    )
+    const velocity = distance / (timeDiff + 1)
+
+    const baseWidth = Properties.strokeWidth
+    const minWidth = baseWidth * 0.7
+    const maxWidth = baseWidth * 1.2
+    
+    if (velocity > 0.7) return minWidth
+    if (velocity < 0.2) return maxWidth
+    return maxWidth - (velocity - 0.2) * (maxWidth - minWidth) / 0.5
+  },
+
+  _updateBoundaries(x, y) {
+    this.boundMinX = Math.min(this.boundMinX, x)
+    this.boundMinY = Math.min(this.boundMinY, y)
+    this.boundMaxX = Math.max(this.boundMaxX, x)
+    this.boundMaxY = Math.max(this.boundMaxY, y)
+  },
+
+  _adjustShapeBoundaries(padding) {
+    this.temporalShape.x(this.boundMinX - padding)
+    this.temporalShape.y(this.boundMinY - padding)
+    this.temporalShape.width(this.boundMaxX - this.boundMinX + padding * 2)
+    this.temporalShape.height(this.boundMaxY - this.boundMinY + padding * 2)
+
+    const adjustedPoints = this.points.map(point => [
+      point[0] - (this.boundMinX - this.startX - padding),
+      point[1] - (this.boundMinY - this.startY - padding)
+    ])
+    this.temporalShape.attrs.points = adjustedPoints
+  },
+
+  _drawSmoothLine(context, points, widths, stroke) {
+    context.beginPath()
+    context.strokeStyle = stroke
+    context.lineCap = 'round'
+    context.lineJoin = 'round'
+    context.moveTo(points[0][0], points[0][1])
+
+    for (let i = 1; i < points.length; i++) {
+      const width = this._interpolateWidth(i, points.length, widths)
+      context.lineWidth = width
+      context.lineTo(points[i][0], points[i][1])
+      context.stroke()
+      context.beginPath()
+      context.moveTo(points[i][0], points[i][1])
+    }
+  },
+
+  _drawHitPath(context, points, widths) {
+    context.beginPath()
+    context.lineCap = 'round'
+    context.lineJoin = 'round'
+    context.moveTo(points[0][0], points[0][1])
+
+    this._drawForwardPath(context, points, widths)
+    this._drawReversePath(context, points, widths)
+  },
+
+  _drawForwardPath(context, points, widths) {
+    for (let i = 1; i < points.length; i++) {
+      const width = this._interpolateWidth(i, points.length, widths) + 10
+      context.lineWidth = width
+      context.lineTo(points[i][0], points[i][1])
+    }
+  },
+
+  _drawReversePath(context, points, widths) {
+    for (let i = points.length - 1; i >= 0; i--) {
+      const width = this._interpolateWidth(i, points.length, widths) + 10
+      context.lineWidth = width
+      context.lineTo(points[i][0], points[i][1])
+    }
+  },
+
+  _interpolateWidth(index, total, widths) {
+    const progress = index / total
+    const widthIndex = Math.floor(progress * (widths.length - 1))
+    const nextWidthIndex = Math.min(widthIndex + 1, widths.length - 1)
+    const widthProgress = progress * (widths.length - 1) - widthIndex
+    return widths[widthIndex] * (1 - widthProgress) + 
+           widths[nextWidthIndex] * widthProgress
+  },
+
+  _calculateSmoothPoints(points) {
+    // 首先检查是否是近似直线
+    const isNearlyLine = this._checkIfNearlyLine(points)
+    
+    // 如果是近似直线，使用 Douglas-Peucker 算法简化
+    if (isNearlyLine) {
+      return this._simplifyDouglasPeucker(points, 2)
+    }
+
+    const smoothPoints = []
+    for (let i = 0; i < points.length - 1; i++) {
+      const p0 = i > 0 ? points[i - 1] : points[i]
+      const p1 = points[i]
+      const p2 = points[i + 1]
+      const p3 = i < points.length - 2 ? points[i + 2] : p2
+
+      // 检查是否是锐角
+      if (i > 0 && i < points.length - 2) {
+        const angle = this._getAngle(p1, p2, p0)
+        
+        if (angle < Math.PI * 0.6 && this._getSegmentLength(p1, p2) > 20) {
+          smoothPoints.push(p1)
+          smoothPoints.push(p2)
+          continue
+        }
+      }
+
+      this._addCatmullRomPoints(smoothPoints, p0, p1, p2, p3)
+    }
+    smoothPoints.push(points[points.length - 1])
+    return smoothPoints
+  },
+
+  _checkIfNearlyLine(points) {
+    if (points.length < 3) return true
+
+    // 计算所有点到起点和终点连线的最大偏差
+    const start = points[0]
+    const end = points[points.length - 1]
+    let maxDeviation = 0
+
+    for (let i = 1; i < points.length - 1; i++) {
+      const deviation = this._getPointToLineDistance(
+        points[i],
+        start,
+        end
+      )
+      maxDeviation = Math.max(maxDeviation, deviation)
+    }
+
+    // 检查所有相邻点之间的角度
+    for (let i = 1; i < points.length - 1; i++) {
+      const angle = this._getAngle(points[i-1], points[i], points[i+1])
+      // 176度 ≈ 3.07 弧度
+      if (angle < 3.07) {
+        return false
+      }
+    }
+
+    // 如果最大偏差小于阈值且所有角度都接近180度，认为是近似直线
+    return maxDeviation < 5
+  },
+
+  _getPointToLineDistance(point, lineStart, lineEnd) {
+    const dx = lineEnd[0] - lineStart[0]
+    const dy = lineEnd[1] - lineStart[1]
+    const lineLengthSq = dx * dx + dy * dy
+    
+    if (lineLengthSq === 0) return 0
+    
+    const t = ((point[0] - lineStart[0]) * dx + 
+               (point[1] - lineStart[1]) * dy) / lineLengthSq
+    
+    if (t < 0) return this._getSegmentLength(point, lineStart)
+    if (t > 1) return this._getSegmentLength(point, lineEnd)
+    
+    const projX = lineStart[0] + t * dx
+    const projY = lineStart[1] + t * dy
+    
+    return Math.sqrt(
+      Math.pow(point[0] - projX, 2) + 
+      Math.pow(point[1] - projY, 2)
+    )
+  },
+
+  _getAngle(p1, p2, p0) {
+    const v1 = [p1[0] - p0[0], p1[1] - p0[1]]
+    const v2 = [p2[0] - p1[0], p2[1] - p1[1]]
+    
+    // 计算向量夹角
+    const dot = v1[0] * v2[0] + v1[1] * v2[1]
+    const len1 = Math.sqrt(v1[0] * v1[0] + v1[1] * v1[1])
+    const len2 = Math.sqrt(v2[0] * v2[0] + v2[1] * v2[1])
+    
+    return Math.acos(dot / (len1 * len2))
+  },
+
+  _getSegmentLength(p1, p2) {
+    const dx = p2[0] - p1[0]
+    const dy = p2[1] - p1[1]
+    return Math.sqrt(dx * dx + dy * dy)
+  },
+
+  _addCatmullRomPoints(smoothPoints, p0, p1, p2, p3) {
+    for (let t = 0; t < 1; t += 0.1) {
+      const t2 = t * t
+      const t3 = t2 * t
+      
+      const x = 0.5 * (
+        (2 * p1[0]) +
+        (-p0[0] + p2[0]) * t +
+        (2 * p0[0] - 5 * p1[0] + 4 * p2[0] - p3[0]) * t2 +
+        (-p0[0] + 3 * p1[0] - 3 * p2[0] + p3[0]) * t3
+      )
+      const y = 0.5 * (
+        (2 * p1[1]) +
+        (-p0[1] + p2[1]) * t +
+        (2 * p0[1] - 5 * p1[1] + 4 * p2[1] - p3[1]) * t2 +
+        (-p0[1] + 3 * p1[1] - 3 * p2[1] + p3[1]) * t3
+      )
+      
+      smoothPoints.push([x, y])
+    }
+  },
+
+  _simplifyDouglasPeucker(points, epsilon) {
+    if (points.length <= 2) return points
+
+    // 找到最远点
+    let maxDistance = 0
+    let maxIndex = 0
+
+    const firstPoint = points[0]
+    const lastPoint = points[points.length - 1]
+
+    // 找到距离首尾连线最远的点
+    for (let i = 1; i < points.length - 1; i++) {
+      const distance = this._getPointToLineDistance(
+        points[i],
+        firstPoint,
+        lastPoint
+      )
+
+      if (distance > maxDistance) {
+        maxDistance = distance
+        maxIndex = i
+      }
+    }
+
+    // 如果最大距离大于阈值，递归处理两个子段
+    if (maxDistance > epsilon) {
+      const firstHalf = this._simplifyDouglasPeucker(
+        points.slice(0, maxIndex + 1),
+        epsilon
+      )
+      const secondHalf = this._simplifyDouglasPeucker(
+        points.slice(maxIndex),
+        epsilon
+      )
+
+      // 合并两个子段，去掉重复的中间点
+      return firstHalf.slice(0, -1).concat(secondHalf)
+    }
+
+    // 如果最大距离小于阈值，只保留首尾两点
+    return [firstPoint, lastPoint]
   }
 }

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

@@ -39,9 +39,8 @@ export default {
     return this.selector !== null
   },
   _isInSelector(node) {
-    return Konva.Util.haveIntersection(
-      this.selector.getClientRect(),
-      node.getClientRect()
-    );
+    const nodeRect = node.getClientRect()
+    const selectorRect = this.selector.getClientRect()
+    return Konva.Util.haveIntersection(selectorRect, nodeRect)
   }
 }