@logicflow/core 2.2.0-alpha.7 → 2.2.1

package/src/view/overlay/Grid.tsx

@@ -1,319 +0,0 @@
-import { Component } from 'preact/compat'
-import { cloneDeep, assign, isNil } from 'lodash-es'
-import { observer } from '../..'
-import { mergeMajorBoldConfig, MajorBoldConfig } from './gridConfig'
-import { createUuid } from '../../util'
-import { GraphModel } from '../../model'
-import { defaultGrid } from '../../constant'
-
-type IProps = {
-  graphModel: GraphModel
-}
-
-@observer
-export class Grid extends Component<IProps> {
-  gridOptions: Grid.GridOptions
-
-  readonly id = createUuid()
-
-  constructor(props: IProps) {
-    super(props)
-    this.gridOptions = this.props.graphModel.grid
-  }
-
-  // 网格类型为点状
-  renderDot() {
-    const { config, size = 1, visible } = this.gridOptions
-
-    const { color, thickness = 2 } = config ?? {}
-
-    // 对于点状网格，点的半径不能大于网格大小的四分之一
-    const radius = Math.min(Math.max(2, thickness), size / 4)
-    const opacity = visible ? 1 : 0
-    return (
-      <g fill={color} opacity={opacity}>
-        <circle cx={0} cy={0} r={radius / 2} />
-        <circle cx={0} cy={size} r={radius / 2} />
-        <circle cx={size} cy={0} r={radius / 2} />
-        <circle cx={size} cy={size} r={radius / 2} />
-      </g>
-    )
-  }
-
-  // 计算与 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,
-      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 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() {
-    const {
-      graphModel: { transformModel, grid },
-    } = this.props
-    this.gridOptions = grid
-    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 = [
-      SCALE_X,
-      SKEW_Y,
-      SKEW_X,
-      SCALE_Y,
-      TRANSLATE_X,
-      TRANSLATE_Y,
-    ].join(',')
-    const transform = `matrix(${matrixString})`
-    const radius = Math.min(Math.max(2, config.thickness ?? 1), size / 4)
-    const opacity = showMajorBold ? advanced.opacity : 1
-    return (
-      <div className="lf-grid">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          version="1.1"
-          width="100%"
-          height="100%"
-        >
-          <defs>
-            <pattern
-              id={this.id}
-              patternUnits="userSpaceOnUse"
-              patternTransform={transform}
-              x="0"
-              y="0"
-              width={size}
-              height={size}
-            >
-              {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>
-    )
-  }
-}
-
-export namespace Grid {
-  export type GridOptions = {
-    /**
-     * 网格格子间距
-     */
-    size?: number
-    /**
-     * 网格是否可见
-     */
-    visible?: boolean
-    /**
-     * 网格类型
-     * - `dot` 点状网格
-     * - `mesh` 交叉线网格
-     */
-    type?: 'dot' | 'mesh'
-    config?: {
-      /**
-       * 网格的颜色
-       */
-      color?: string
-      /**
-       * 网格的宽度
-       * - 对于 `dot` 点状网格，表示点的大小
-       * - 对于 `mesh` 交叉线网格，表示线的宽度
-       */
-      thickness?: number
-    }
-    /**
-     * 行为配置：支持 boolean 或高级对象
-     * - false: 禁用特殊样式，opacity=1，无加粗，无虚线
-     * - true: 启用默认样式，opacity=0.75，每第5个加粗/实线，虚线动态计算
-     * - object: 高级配置，详见 MajorBoldConfig
-     */
-    majorBold?: boolean | MajorBoldConfig
-  }
-
-  export function getGridOptions(options: number | boolean | GridOptions) {
-    const defaultOptions = cloneDeep(defaultGrid) as GridOptions
-    if (typeof options === 'number') {
-      return assign(defaultOptions, { size: options })
-    } else if (typeof options === 'boolean') {
-      return assign(defaultOptions, { visible: options })
-    } else {
-      return assign(defaultOptions, options)
-    }
-  }
-}

package/src/view/overlay/ModificationOverlay.tsx

@@ -1,31 +0,0 @@
-import { Component } from 'preact/compat'
-import { observer } from '../..'
-import GraphModel from '../../model/GraphModel'
-
-type IProps = {
-  graphModel: GraphModel
-}
-
-@observer
-export class ModificationOverlay extends Component<IProps> {
-  render() {
-    const {
-      graphModel: { transformModel },
-    } = this.props
-    const { transform } = transformModel.getTransformStyle()
-    const { children } = this.props
-    return (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        version="1.1"
-        width="100%"
-        height="100%"
-        className="modification-overlay"
-      >
-        <g transform={transform}>{children}</g>
-      </svg>
-    )
-  }
-}
-
-export default ModificationOverlay

package/src/view/overlay/OutlineOverlay.tsx

@@ -1,158 +0,0 @@
-import { Component } from 'preact/compat'
-import { Rect } from '../shape'
-import { observer } from '../..'
-import { ModelType } from '../../constant'
-import {
-  GraphModel,
-  LineEdgeModel,
-  BezierEdgeModel,
-  PolylineEdgeModel,
-} from '../../model'
-import { points2PointsList, getBezierPoints, getBBoxOfPoints } from '../../util'
-
-type IProps = {
-  graphModel: GraphModel
-}
-
-@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
-    const {
-      nodes,
-      editConfigModel: { hoverOutline, nodeSelectedOutline },
-    } = graphModel
-    const nodeOutline: any = []
-    nodes.forEach((element) => {
-      if (element.isHovered || element.isSelected) {
-        const { isHovered, isSelected, x, y, width, height } = element
-        if (
-          (nodeSelectedOutline && isSelected) ||
-          (hoverOutline && isHovered)
-        ) {
-          const style = element.getOutlineStyle() || {}
-          let attributes = {}
-          Object.keys(style).forEach((key) => {
-            if (key !== 'hover') {
-              attributes[key] = style[key]
-            }
-          })
-          if (isHovered) {
-            const hoverStyle = style.hover
-            attributes = {
-              ...attributes,
-              ...hoverStyle,
-            }
-          }
-          nodeOutline.push(
-            <Rect
-              transform={element.transform}
-              className="lf-outline-node"
-              {...{
-                x,
-                y,
-                width: width + 4,
-                height: height + 4,
-              }}
-              {...attributes}
-            />,
-          )
-        }
-      }
-    })
-    return nodeOutline
-  }
-
-  // 边的outline
-  getEdgeOutline() {
-    const {
-      graphModel: {
-        edges: edgeList,
-        editConfigModel: { edgeSelectedOutline, hoverOutline },
-      },
-    } = this.props
-    const edgeOutline: any = []
-    for (let i = 0; i < edgeList.length; i++) {
-      const edge = edgeList[i]
-      if (
-        (edgeSelectedOutline && edge.isSelected) ||
-        (hoverOutline && edge.isHovered)
-      ) {
-        if (edge.modelType === ModelType.LINE_EDGE) {
-          edgeOutline.push(this.getLineOutline(edge as LineEdgeModel))
-        } else if (edge.modelType === ModelType.POLYLINE_EDGE) {
-          edgeOutline.push(this.getPolylineOutline(edge as PolylineEdgeModel))
-        } else if (edge.modelType === ModelType.BEZIER_EDGE) {
-          edgeOutline.push(this.getBezierOutline(edge as BezierEdgeModel))
-        }
-      }
-    }
-    return edgeOutline
-  }
-
-  // 直线outline
-  getLineOutline(line: LineEdgeModel) {
-    const { startPoint, endPoint } = line
-    const style = line.getOutlineStyle()
-    return this.renderRectOutline(
-      [startPoint, endPoint],
-      style,
-      'lf-outline-edge',
-      { widthOffset: 10, heightOffset: 10 },
-    )
-  }
-
-  // 折线outline
-  getPolylineOutline(polyline: PolylineEdgeModel) {
-    const { points } = polyline
-    const pointsList = points2PointsList(points)
-    const style = polyline.getOutlineStyle()
-    return this.renderRectOutline(pointsList, style, 'lf-outline', {
-      widthOffset: 8,
-      heightOffset: 16,
-    })
-  }
-
-  // 曲线outline
-  getBezierOutline(bezier: BezierEdgeModel) {
-    const { path } = bezier
-    const pointsList = getBezierPoints(path)
-    const style = bezier.getOutlineStyle()
-    return this.renderRectOutline(pointsList, style, 'lf-outline', {
-      widthOffset: 8,
-      heightOffset: 16,
-    })
-  }
-
-  render() {
-    return (
-      <g className="lf-outline">
-        {this.getNodesOutline()}
-        {this.getEdgeOutline()}
-      </g>
-    )
-  }
-}
-
-export default OutlineOverlay

package/src/view/overlay/SnaplineOverlay.tsx

@@ -1,44 +0,0 @@
-import { Component } from 'preact/compat'
-import SnaplineModel from '../../model/SnaplineModel'
-import Line from '../shape/Line'
-import { observer } from '../..'
-import OutlineOverlay from './OutlineOverlay'
-
-type IProps = {
-  snaplineModel?: SnaplineModel
-}
-
-@observer
-export class SnaplineOverlay extends Component<IProps> {
-  render() {
-    const { snaplineModel } = this.props
-    const { position, isShowHorizontal, isShowVertical } = snaplineModel ?? {}
-    const style = snaplineModel?.getStyle()
-    const { x = 0, y = 0 } = position ?? {}
-    // 展示横向，纵向默认-100000,100000 减少计算量
-    const horizontalLine = {
-      x1: -100000,
-      y1: y,
-      x2: 100000,
-      y2: y,
-      ...style,
-      stroke: isShowHorizontal ? style?.stroke : 'none',
-    }
-    const verticalLine = {
-      x1: x,
-      y1: -100000,
-      x2: x,
-      y2: 100000,
-      ...style,
-      stroke: isShowVertical ? style?.stroke : 'none',
-    }
-    return (
-      <g className="lf-snapline">
-        <Line {...horizontalLine} />
-        <Line {...verticalLine} />
-      </g>
-    )
-  }
-}
-
-export default OutlineOverlay

package/src/view/overlay/ToolOverlay.tsx

@@ -1,65 +0,0 @@
-import { createElement as h, Component } from 'preact/compat'
-import { OutlineOverlay } from '.'
-import { observer } from '../..'
-import LogicFlow from '../../LogicFlow'
-import { GraphModel } from '../../model'
-import { Tool } from '../../tool'
-
-type IProps = {
-  graphModel: GraphModel
-  tool: Tool
-}
-
-@observer
-export class ToolOverlay extends Component<IProps> {
-  // 在react严格模式下，useEffect会执行两次，但是在LogicFlow内部，则只会触发一次componentDidMount和componentDidUpdate。
-  // 其中第一次componentDidMount对应的graphModel为被丢弃的graphModel, 所以不应该生效。
-  // 在非react环境下，只会触发一次componentDidMount，不会触发componentDidUpdate。
-  // 所以这里采用componentDidUpdate和componentDidMount都去触发插件的render方法。
-  componentDidMount(): void {
-    this.triggerToolRender()
-  }
-
-  componentDidUpdate(): void {
-    this.triggerToolRender()
-  }
-
-  /**
-   * 外部传入的一般是HTMLElement
-   */
-  getTools() {
-    const { tool, graphModel } = this.props
-    const { textEditElement } = graphModel
-    const tools = tool.getTools()
-    const components = tools.map((t) =>
-      h(t, {
-        textEditElement,
-        graphModel,
-        lf: tool.instance,
-      }),
-    )
-    tool.components = components
-    return components
-  }
-
-  triggerToolRender() {
-    const { tool, graphModel } = this.props
-    const ToolOverlayElement = document.querySelector(
-      `#ToolOverlay_${graphModel.flowId}`,
-    ) as HTMLElement
-    const lf: LogicFlow = tool.getInstance()
-    lf.components.forEach((render) => render(lf, ToolOverlayElement))
-    lf.components = [] // 保证extension组件的render只执行一次
-  }
-
-  render() {
-    const { graphModel } = this.props
-    return (
-      <div className="lf-tool-overlay" id={`ToolOverlay_${graphModel.flowId}`}>
-        {this.getTools()}
-      </div>
-    )
-  }
-}
-
-export default OutlineOverlay

package/src/view/overlay/getTransformHoc.tsx

@@ -1,50 +0,0 @@
-import { Component, ComponentType } from 'preact'
-import GraphModel from '../../model/GraphModel'
-
-type IProps = {
-  graphModel: GraphModel
-}
-
-export type GraphTransform = {
-  transform: string
-  transformOrigin: string
-}
-
-export function getTransform<P>(WrappedComponent: ComponentType<P>) {
-  return class extends Component<IProps & P> {
-    getMatrixString(): GraphTransform {
-      const { graphModel } = this.props
-      const {
-        transformModel: {
-          SCALE_X,
-          SKEW_Y,
-          SKEW_X,
-          SCALE_Y,
-          TRANSLATE_X,
-          TRANSLATE_Y,
-        },
-      } = graphModel
-      const matrixString = [
-        SCALE_X,
-        SKEW_Y,
-        SKEW_X,
-        SCALE_Y,
-        TRANSLATE_X,
-        TRANSLATE_Y,
-      ].join(',')
-      return {
-        transform: `matrix(${matrixString})`,
-        transformOrigin: 'left top',
-      }
-    }
-
-    render() {
-      return (
-        <WrappedComponent
-          {...(this.props as P)}
-          transformStyle={this.getMatrixString()}
-        />
-      )
-    }
-  }
-}