@logicflow/core 2.0.12 → 2.0.14

package/src/view/edge/BaseEdge.tsx

@@ -162,6 +162,64 @@ export abstract class BaseEdge<P extends IProps> extends Component<
     )
   }
 
+  /**
+   * Private helper method to generate arrow path based on type and parameters
+   */
+  private getArrowPath(
+    arrowType: string,
+    props: {
+      stroke?: string
+      fill?: string
+      strokeWidth?: number
+      offset: number
+      verticalLength: number
+      strokeLinecap?: string
+      strokeLinejoin?: string
+      transform?: string
+    },
+  ): h.JSX.Element {
+    const {
+      stroke,
+      fill = stroke,
+      strokeWidth,
+      offset = 10,
+      verticalLength,
+      strokeLinecap,
+      strokeLinejoin,
+      transform,
+    } = props
+    let arrowPath = ''
+
+    switch (arrowType) {
+      case 'solid':
+        arrowPath = `M${-offset / 4},0 L${(3 * offset) / 4},${verticalLength} L${(3 * offset) / 4},-${verticalLength} Z`
+        break
+      case 'hollow':
+        arrowPath = `M${-offset / 4},0 L${(3 * offset) / 4},${verticalLength} L${-offset / 4},0 L${(3 * offset) / 4},-${verticalLength} L${-offset / 4},0 Z`
+        break
+      case 'diamond':
+        arrowPath = `M${-offset / 2},0 L0,${verticalLength} L${offset / 2},0 L0,-${verticalLength} L${-offset / 2},0 Z`
+        break
+      case 'circle':
+        arrowPath = `M${-offset / 2},0 A${offset / 4},${offset / 4} 0 1,0 ${offset / 2},0 A${offset / 4},${offset / 4} 0 1,0 ${-offset / 2},0 Z`
+        break
+      default:
+        arrowPath = ''
+        break
+    }
+    return (
+      <path
+        d={arrowPath}
+        stroke={stroke}
+        fill={fill}
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap as any}
+        strokeLinejoin={strokeLinejoin as any}
+        transform={transform}
+      />
+    )
+  }
+
   /**
    * @overridable 可重写，自定义边起点箭头形状。
    * @example
@@ -176,7 +234,25 @@ export abstract class BaseEdge<P extends IProps> extends Component<
    * }
    */
   getStartArrow(): h.JSX.Element | null {
-    return <path />
+    const { model } = this.props
+    const {
+      stroke,
+      strokeWidth,
+      offset,
+      verticalLength,
+      startArrowType = 'solid',
+      strokeLinecap,
+      strokeLinejoin,
+    } = model.getArrowStyle()
+
+    return this.getArrowPath(startArrowType, {
+      stroke,
+      strokeWidth,
+      offset,
+      verticalLength,
+      strokeLinecap,
+      strokeLinejoin,
+    })
   }
 
   /**
@@ -194,17 +270,25 @@ export abstract class BaseEdge<P extends IProps> extends Component<
    */
   getEndArrow(): h.JSX.Element | null {
     const { model } = this.props
-    const { stroke, strokeWidth, offset, verticalLength } =
-      model.getArrowStyle()
-    return (
-      <path
-        stroke={stroke}
-        fill={stroke}
-        strokeWidth={strokeWidth}
-        transform="rotate(180)"
-        d={`M 0 0 L ${offset} -${verticalLength} L ${offset} ${verticalLength} Z`}
-      />
-    )
+    const {
+      stroke,
+      strokeWidth,
+      offset,
+      verticalLength,
+      endArrowType = 'solid',
+      strokeLinecap,
+      strokeLinejoin,
+    } = model.getArrowStyle()
+
+    return this.getArrowPath(endArrowType, {
+      stroke,
+      strokeWidth,
+      offset,
+      verticalLength,
+      strokeLinecap,
+      strokeLinejoin,
+      transform: 'rotate(180)',
+    })
   }
 
   /**

package/src/view/overlay/Grid.tsx

@@ -62,8 +62,9 @@ export class Grid extends Component<IProps> {
 
   render() {
     const {
-      graphModel: { transformModel },
+      graphModel: { transformModel, grid },
     } = this.props
+    this.gridOptions = grid
     const { type, size = 1 } = this.gridOptions
     const { SCALE_X, SKEW_Y, SKEW_X, SCALE_Y, TRANSLATE_X, TRANSLATE_Y } =
       transformModel

package/src/view/overlay/ToolOverlay.tsx

@@ -1,5 +1,5 @@
 import { createElement as h, Component } from 'preact/compat'
-import { CanvasOverlay, OutlineOverlay } from '.'
+import { OutlineOverlay } from '.'
 import { observer } from '../..'
 import LogicFlow from '../../LogicFlow'
 import { GraphModel } from '../../model'
@@ -8,7 +8,6 @@ import { Tool } from '../../tool'
 type IProps = {
   graphModel: GraphModel
   tool: Tool
-  getCanvasOverlay: () => CanvasOverlay | null
 }
 
 @observer
@@ -53,24 +52,10 @@ export class ToolOverlay extends Component<IProps> {
     lf.components = [] // 保证extension组件的render只执行一次
   }
 
-  zoomHandler = (e: WheelEvent) => {
-    // TODO 是否应该使用 dispatchEvent 来触发事件
-    this.props.getCanvasOverlay()?.zoomHandler(e)
-  }
-
   render() {
     const { graphModel } = this.props
     return (
-      <div
-        className="lf-tool-overlay"
-        id={`ToolOverlay_${graphModel.flowId}`}
-        /*
-         * 默认情况下该容器设置了 pointer-events: none，不会触发这些事件
-         * 只会在容器取消 pointer-events: none 后触发，用于缩放、滚动画布等操作
-         * 目前只在 selection-select 插件中使用。为了能在元素内部进行框选，在开启选区后会关闭事件透传。需要手动触发事件
-         */
-        onWheel={this.zoomHandler}
-      >
+      <div className="lf-tool-overlay" id={`ToolOverlay_${graphModel.flowId}`}>
         {this.getTools()}
       </div>
     )

package/src/view/shape/Polygon.tsx

@@ -7,10 +7,57 @@ export type IPolygonProps = {
   x?: number
   y?: number
   className?: string
+  radius?: number
+}
+/**
+ * 生成带圆角的多边形路径
+ * @param points 多边形顶点坐标数组
+ * @param radius 圆角半径
+ * @returns SVG 路径字符串
+ */
+export function createRoundedPolygonPath(points, radius): string {
+  const pointList = points.map((point) => ({ x: point[0], y: point[1] }))
+  const len = pointList.length
+  if (len < 3) return ''
+
+  const r = Math.abs(radius)
+  let path = ''
+
+  for (let i = 0; i < len; i++) {
+    const prev = pointList[(i - 1 + len) % len]
+    const curr = pointList[i]
+    const next = pointList[(i + 1) % len]
+
+    // 向量
+    const v1 = { x: curr.x - prev.x, y: curr.y - prev.y }
+    const v2 = { x: next.x - curr.x, y: next.y - curr.y }
+
+    // 单位向量
+    const len1 = Math.hypot(v1.x, v1.y)
+    const len2 = Math.hypot(v2.x, v2.y)
+    const u1 = { x: v1.x / len1, y: v1.y / len1 }
+    const u2 = { x: v2.x / len2, y: v2.y / len2 }
+
+    // 起点 = curr - u1 * r，终点 = curr + u2 * r
+    const start = { x: curr.x - u1.x * r, y: curr.y - u1.y * r }
+    const end = { x: curr.x + u2.x * r, y: curr.y + u2.y * r }
+
+    if (i === 0) {
+      path += `M ${start.x} ${start.y} `
+    } else {
+      path += `L ${start.x} ${start.y} `
+    }
+
+    // Q 控制点是当前拐角点
+    path += `Q ${curr.x} ${curr.y} ${end.x} ${end.y} `
+  }
+
+  path += 'Z'
+  return path
 }
 
 export function Polygon(props: IPolygonProps): h.JSX.Element {
-  const { points = [], className } = props
+  const { points = [], className, radius } = props
   const attrs: Record<string, any> = {
     fill: 'transparent',
     fillOpacity: 1,
@@ -31,9 +78,14 @@ export function Polygon(props: IPolygonProps): h.JSX.Element {
   } else {
     attrs.className = 'lf-basic-shape'
   }
-  attrs.points = points.map((point) => point.join(',')).join(' ')
-
-  return <polygon {...attrs} />
+  if (radius) {
+    const path = createRoundedPolygonPath(points, radius)
+    attrs.d = path
+    return <path {...attrs} />
+  } else {
+    attrs.points = points.map((point) => point.join(',')).join(' ')
+    return <polygon {...attrs} />
+  }
 }
 
 export default Polygon