@logicflow/core 2.2.0-alpha.1 → 2.2.0-alpha.3

package/src/view/overlay/Grid.tsx

@@ -1,9 +1,10 @@
 import { Component } from 'preact/compat'
-import { cloneDeep, assign } from 'lodash-es'
+import { cloneDeep, assign, isNil } from 'lodash-es'
 import { observer } from '../..'
+import { mergeMajorBoldConfig, MajorBoldConfig } from './gridConfig'
 import { createUuid } from '../../util'
 import { GraphModel } from '../../model'
-import { DEFAULT_GRID_SIZE } from '../../constant'
+import { defaultGrid } from '../../constant'
 
 type IProps = {
   graphModel: GraphModel
@@ -39,25 +40,93 @@ export class Grid extends Component<IProps> {
     )
   }
 
+  // 计算与 size 整除的虚线周期，使边长能被 (dash + gap) 完整分割
+  private getDashArrayForSize(dashCfg?: { pattern: number[] }): string {
+    // 若提供了直接可用的 pattern，则优先使用
+    const direct = dashCfg?.pattern?.filter(
+      (n) => typeof n === 'number' && n > 0,
+    )
+    return direct?.join(',') || '2,1'
+  }
+
+  // 计算一个周期内的最大加粗索引（作为周期大小）
+  private getPeriod(advanced: any): number {
+    const list = Array.isArray(advanced?.boldIndices)
+      ? advanced.boldIndices.filter((n: any) => typeof n === 'number' && n > 0)
+      : []
+    return list.length ? Math.max(...list) : 0
+  }
+
+  // 计算加粗线宽，优先使用自定义；否则根据周期与厚度估算
+  private getBoldStrokeWidth(
+    advanced: any,
+    size: number,
+    thickness?: number,
+    period?: number,
+  ): number {
+    if (typeof advanced?.customBoldWidth === 'number')
+      return advanced.customBoldWidth
+    const baseThickness = Math.max(1, thickness ?? 1)
+    const p = Math.max(1, period ?? this.getPeriod(advanced))
+    return Math.min(baseThickness, (size * p) / 2) / 2
+  }
+
+  // 渲染 mesh 类型四条边的虚线，减少重复代码
+  private renderMeshEdgeLines(
+    size: number,
+    color: string,
+    strokeWidth: number,
+    opacity: number,
+    dash?: string,
+  ) {
+    const segments = [
+      { d: `M 0 0 H ${size}` },
+      { d: `M 0 ${size} H ${size}` },
+      { d: `M 0 0 V ${size}` },
+      { d: `M ${size} 0 V ${size}` },
+    ]
+    return (
+      <g opacity={opacity} fill="transparent">
+        {segments.map((seg) => (
+          <path
+            d={seg.d}
+            stroke={color}
+            strokeWidth={strokeWidth / 2}
+            strokeDasharray={dash}
+            strokeLinecap="butt"
+            fill="transparent"
+          />
+        ))}
+      </g>
+    )
+  }
+
   // 网格类型为交叉线
   // todo: 采用背景缩放的方式，实现更好的体验
   renderMesh() {
-    const { config, size = 1, visible } = this.gridOptions
-    const { color, thickness = 1 } = config ?? {}
+    const {
+      config,
+      size = 1,
+      visible,
+      majorBold,
+    } = this.gridOptions as Grid.GridOptions & {
+      majorBold?: boolean | MajorBoldConfig
+    }
+    const { config: advanced } = mergeMajorBoldConfig(majorBold)
+    const { opacity: baseOpacity } = advanced
+    const color: string = (config?.color ?? '#D7DEEB') as string
+    const thickness: number = (config?.thickness ?? 1) as number
 
     // 对于交叉线网格，线的宽度不能大于网格大小的一半
     const strokeWidth = Math.min(Math.max(1, thickness), size / 2)
-    const d = `M 0 0 H ${size} V ${size} H 0 Z`
-    const opacity = visible ? 1 : 0
-    return (
-      <path
-        d={d}
-        stroke={color}
-        strokeWidth={strokeWidth / 2}
-        opacity={opacity}
-        fill="transparent"
-      />
-    )
+    const opacity = visible ? baseOpacity : 0
+
+    // 根据 size 自动计算合适的 dash/gap 周期，使 size 能被 (dash + gap) 整除
+    const dash =
+      majorBold === false
+        ? undefined
+        : this.getDashArrayForSize(advanced.dashArrayConfig)
+    return this.renderMeshEdgeLines(size, color, strokeWidth, opacity, dash)
   }
 
   render() {
@@ -65,7 +134,16 @@ export class Grid extends Component<IProps> {
       graphModel: { transformModel, grid },
     } = this.props
     this.gridOptions = grid
-    const { type, size = 1 } = this.gridOptions
+    const {
+      type,
+      config = {},
+      size = 1,
+      majorBold,
+    } = this.gridOptions as Grid.GridOptions & {
+      majorBold?: boolean | MajorBoldConfig
+    }
+    const showMajorBold = majorBold !== false && !isNil(majorBold)
+    const { config: advanced } = mergeMajorBoldConfig(majorBold)
     const { SCALE_X, SKEW_Y, SKEW_X, SCALE_Y, TRANSLATE_X, TRANSLATE_Y } =
       transformModel
     const matrixString = [
@@ -77,9 +155,8 @@ export class Grid extends Component<IProps> {
       TRANSLATE_Y,
     ].join(',')
     const transform = `matrix(${matrixString})`
-    // const transitionStyle = {
-    //   transition: 'all 0.1s ease',
-    // };
+    const radius = Math.min(Math.max(2, config.thickness ?? 1), size / 4)
+    const opacity = showMajorBold ? advanced.opacity : 1
     return (
       <div className="lf-grid">
         <svg
@@ -101,8 +178,91 @@ export class Grid extends Component<IProps> {
               {type === 'dot' && this.renderDot()}
               {type === 'mesh' && this.renderMesh()}
             </pattern>
+            {type === 'dot' && advanced.boldIndices.length ? (
+              <pattern
+                id={`${this.id}-dot-major`}
+                patternUnits="userSpaceOnUse"
+                patternTransform={transform}
+                x="0"
+                y="0"
+                width={size * this.getPeriod(advanced)}
+                height={size * this.getPeriod(advanced)}
+              >
+                <g
+                  fill={this.gridOptions.config?.color ?? '#D7DEEB'}
+                  opacity={this.gridOptions.visible ? opacity : 0}
+                >
+                  <circle cx={0} cy={0} r={(radius * 1.5) / 2} />
+                  <circle
+                    cx={size * this.getPeriod(advanced)}
+                    cy={0}
+                    r={(radius * 1.5) / 2}
+                  />
+                  <circle
+                    cx={0}
+                    cy={size * this.getPeriod(advanced)}
+                    r={(radius * 1.5) / 2}
+                  />
+                  <circle
+                    cx={size * this.getPeriod(advanced)}
+                    cy={size * this.getPeriod(advanced)}
+                    r={(radius * 1.5) / 2}
+                  />
+                </g>
+              </pattern>
+            ) : null}
+            {type === 'mesh' && advanced.boldIndices.length ? (
+              <pattern
+                id={`${this.id}-major`}
+                patternUnits="userSpaceOnUse"
+                patternTransform={transform}
+                x="0"
+                y="0"
+                width={size * this.getPeriod(advanced)}
+                height={size * this.getPeriod(advanced)}
+              >
+                {advanced.boldIndices.map((i: number) => (
+                  <g>
+                    <path
+                      d={`M ${size * i} 0 V ${size * this.getPeriod(advanced)}`}
+                      stroke={this.gridOptions.config?.color ?? '#D7DEEB'}
+                      strokeWidth={this.getBoldStrokeWidth(
+                        advanced,
+                        size,
+                        (this.gridOptions.config ?? {}).thickness,
+                        this.getPeriod(advanced),
+                      )}
+                      opacity={this.gridOptions.visible ? opacity : 0}
+                      fill="transparent"
+                    />
+                    <path
+                      d={`M 0 ${size * i} H ${size * this.getPeriod(advanced)}`}
+                      stroke={this.gridOptions.config?.color ?? '#D7DEEB'}
+                      strokeWidth={this.getBoldStrokeWidth(
+                        advanced,
+                        size,
+                        (this.gridOptions.config ?? {}).thickness,
+                        this.getPeriod(advanced),
+                      )}
+                      opacity={this.gridOptions.visible ? opacity : 0}
+                      fill="transparent"
+                    />
+                  </g>
+                ))}
+              </pattern>
+            ) : null}
           </defs>
           <rect width="100%" height="100%" fill={`url(#${this.id})`} />
+          {type === 'dot' && showMajorBold && advanced.boldIndices.length ? (
+            <rect
+              width="100%"
+              height="100%"
+              fill={`url(#${this.id}-dot-major)`}
+            />
+          ) : null}
+          {type === 'mesh' && showMajorBold && advanced.boldIndices.length ? (
+            <rect width="100%" height="100%" fill={`url(#${this.id}-major)`} />
+          ) : null}
         </svg>
       </div>
     )
@@ -137,20 +297,17 @@ export namespace Grid {
        */
       thickness?: number
     }
-  }
-
-  export const defaultProps: GridOptions = {
-    size: DEFAULT_GRID_SIZE,
-    visible: true,
-    type: 'dot',
-    config: {
-      color: '#ababab',
-      thickness: 1,
-    },
+    /**
+     * 行为配置：支持 boolean 或高级对象
+     * - false: 禁用特殊样式，opacity=1，无加粗，无虚线
+     * - true: 启用默认样式，opacity=0.75，每第5个加粗/实线，虚线动态计算
+     * - object: 高级配置，详见 MajorBoldConfig
+     */
+    majorBold?: boolean | MajorBoldConfig
   }
 
   export function getGridOptions(options: number | boolean | GridOptions) {
-    const defaultOptions = cloneDeep(Grid.defaultProps)
+    const defaultOptions = cloneDeep(defaultGrid) as GridOptions
     if (typeof options === 'number') {
       return assign(defaultOptions, { size: options })
     } else if (typeof options === 'boolean') {

package/src/view/overlay/OutlineOverlay.tsx

@@ -16,6 +16,26 @@ type IProps = {
 
 @observer
 export class OutlineOverlay extends Component<IProps> {
+  // 通用渲染函数：根据点集合与样式计算包围盒并返回矩形轮廓
+  private renderRectOutline(
+    pointsList: any[],
+    style: Record<string, unknown>,
+    className: string,
+    defaultOffsets: { widthOffset: number; heightOffset: number },
+  ) {
+    const {
+      widthOffset = defaultOffsets.widthOffset,
+      heightOffset = defaultOffsets.heightOffset,
+    } = (style || {}) as any
+    const { x, y, width, height } = getBBoxOfPoints(
+      pointsList,
+      widthOffset,
+      heightOffset,
+    )
+    return (
+      <Rect className={className} {...{ x, y, width, height }} {...style} />
+    )
+  }
   // 节点outline
   getNodesOutline() {
     const { graphModel } = this.props
@@ -52,10 +72,8 @@ export class OutlineOverlay extends Component<IProps> {
               {...{
                 x,
                 y,
-                // width: width + 10,
-                // height: height + 10,
-                width: width + 10,
-                height: height + 10,
+                width: width + 4,
+                height: height + 4,
               }}
               {...attributes}
             />,
@@ -96,22 +114,12 @@ export class OutlineOverlay extends Component<IProps> {
   // 直线outline
   getLineOutline(line: LineEdgeModel) {
     const { startPoint, endPoint } = line
-    const x = (startPoint.x + endPoint.x) / 2
-    const y = (startPoint.y + endPoint.y) / 2
-    const width = Math.abs(startPoint.x - endPoint.x) + 10
-    const height = Math.abs(startPoint.y - endPoint.y) + 10
     const style = line.getOutlineStyle()
-    return (
-      <Rect
-        className="lf-outline-edge"
-        {...{
-          x,
-          y,
-          width,
-          height,
-        }}
-        {...style}
-      />
+    return this.renderRectOutline(
+      [startPoint, endPoint],
+      style,
+      'lf-outline-edge',
+      { widthOffset: 10, heightOffset: 10 },
     )
   }
 
@@ -119,42 +127,22 @@ export class OutlineOverlay extends Component<IProps> {
   getPolylineOutline(polyline: PolylineEdgeModel) {
     const { points } = polyline
     const pointsList = points2PointsList(points)
-    const bbox = getBBoxOfPoints(pointsList, 8)
-    const { x, y, width, height } = bbox
     const style = polyline.getOutlineStyle()
-    return (
-      <Rect
-        className="lf-outline"
-        {...{
-          x,
-          y,
-          width,
-          height,
-        }}
-        {...style}
-      />
-    )
+    return this.renderRectOutline(pointsList, style, 'lf-outline', {
+      widthOffset: 8,
+      heightOffset: 16,
+    })
   }
 
   // 曲线outline
   getBezierOutline(bezier: BezierEdgeModel) {
     const { path } = bezier
     const pointsList = getBezierPoints(path)
-    const bbox = getBBoxOfPoints(pointsList, 8)
-    const { x, y, width, height } = bbox
     const style = bezier.getOutlineStyle()
-    return (
-      <Rect
-        className="lf-outline"
-        {...{
-          x,
-          y,
-          width,
-          height,
-        }}
-        {...style}
-      />
-    )
+    return this.renderRectOutline(pointsList, style, 'lf-outline', {
+      widthOffset: 8,
+      heightOffset: 16,
+    })
   }
 
   render() {

package/src/view/overlay/gridConfig.ts

@@ -0,0 +1,103 @@
+/**
+ * 网格高级 majorBold 配置。
+ *
+ * 示例（布尔值）：
+ *  - false：禁用特殊样式，opacity=1，无加粗，无虚线
+ *  - true：启用默认值，opacity=0.75，每第 5 条线/点加粗/实线，
+ *          虚线图案通过 getDashArrayForSize(size) 计算
+ *
+ * 示例（对象）：
+ * {
+ *   opacity: 0.6,
+ *   boldIndices: [4, 8],
+ *   dashArrayConfig: { pattern: [4,2,4] },
+ *   customBoldWidth: 2,
+ * }
+ */
+export type MajorBoldConfig = {
+  /** 默认网格透明度 (0-1) */
+  opacity: number
+  /** 一个周期内需要加粗/实线的索引列表 */
+  boldIndices: number[]
+  /** 虚线样式的计算配置 */
+  dashArrayConfig: {
+    /** 固定的虚线模式（可选） */
+    pattern: number[]
+  }
+  /** mesh 网格的自定义加粗线宽（可选） */
+  customBoldWidth?: number
+}
+
+export const defaultGridConfig: MajorBoldConfig = {
+  opacity: 1,
+  boldIndices: [5],
+  dashArrayConfig: {
+    pattern: [2, 1],
+  },
+  customBoldWidth: 2,
+}
+
+/**
+ * 校验并规范化 GridConfig。
+ * - 将 opacity 限制在 [0,1] 范围
+ * - boldIndices 过滤为正整数并去重
+ */
+export function validateGridConfig(cfg: MajorBoldConfig): MajorBoldConfig {
+  const opacity = Math.max(
+    0,
+    Math.min(1, cfg.opacity ?? defaultGridConfig.opacity),
+  )
+  const boldIndicesSet = new Set<number>()
+  const boldRaw = Array.isArray(cfg.boldIndices)
+    ? cfg.boldIndices
+    : defaultGridConfig.boldIndices
+  for (const n of boldRaw) {
+    if (typeof n === 'number' && Number.isFinite(n) && n > 0) {
+      boldIndicesSet.add(Math.floor(n))
+    }
+  }
+  const boldIndices = Array.from(boldIndicesSet)
+  const pattern = Array.isArray(cfg.dashArrayConfig?.pattern)
+    ? cfg.dashArrayConfig.pattern
+    : defaultGridConfig.dashArrayConfig.pattern
+  const dashArrayConfig = {
+    pattern,
+  }
+  const customBoldWidth = cfg.customBoldWidth
+  return {
+    opacity,
+    boldIndices: boldIndices.length
+      ? boldIndices
+      : defaultGridConfig.boldIndices,
+    dashArrayConfig,
+    customBoldWidth,
+  }
+}
+
+/**
+ * 合并用户行为配置与默认值。
+ * - false → 关闭模式：opacity=1，bold=[]，关闭虚线
+ * - true → 默认模式：采用 defaultGridConfig
+ * - object → 自定义模式：校验后使用用户配置
+ */
+export function mergeMajorBoldConfig(input?: boolean | MajorBoldConfig): {
+  mode: 'disabled' | 'default' | 'custom'
+  config: MajorBoldConfig
+} {
+  if (input === false) {
+    return {
+      mode: 'disabled',
+      config: {
+        opacity: 1,
+        boldIndices: [],
+        dashArrayConfig: {
+          pattern: [],
+        },
+      },
+    }
+  }
+  if (input === true || input == null) {
+    return { mode: 'default', config: { ...defaultGridConfig } }
+  }
+  return { mode: 'custom', config: validateGridConfig(input) }
+}

package/src/view/shape/Polygon.tsx

@@ -1,6 +1,7 @@
 import { createElement as h } from 'preact/compat'
 import { forEach, toPairs } from 'lodash-es'
 import { LogicFlow } from '../..'
+import { generateRoundedCorners } from '../../util/geometry'
 
 export type IPolygonProps = {
   points: LogicFlow.PointTuple[]
@@ -9,52 +10,6 @@ export type IPolygonProps = {
   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, radius } = props
@@ -74,13 +29,21 @@ export function Polygon(props: IPolygonProps): h.JSX.Element {
   })
 
   if (className) {
-    attrs.classNmae = `lf-basic-shape ${className}`
+    attrs.className = `lf-basic-shape ${className}`
   } else {
     attrs.className = 'lf-basic-shape'
   }
   if (radius) {
-    const path = createRoundedPolygonPath(points, radius)
-    attrs.d = path
+    const pointList = points.map((point) => ({ x: point[0], y: point[1] }))
+    const rounded = generateRoundedCorners(pointList, radius, true)
+    const d = rounded.length
+      ? `M ${rounded[0].x} ${rounded[0].y} ${rounded
+          .slice(1)
+          .map((p) => `L ${p.x} ${p.y}`)
+          .join(' ')} Z`
+      : ''
+    attrs.d = d
+    delete attrs.points
     return <path {...attrs} />
   } else {
     attrs.points = points.map((point) => point.join(',')).join(' ')