@logicflow/core 2.2.0 → 2.2.1

package/src/view/overlay/Grid.tsx

@@ -1,162 +0,0 @@
-import { Component } from 'preact/compat'
-import { cloneDeep, assign } from 'lodash-es'
-import { observer } from '../..'
-import { createUuid } from '../../util'
-import { GraphModel } from '../../model'
-import { DEFAULT_GRID_SIZE } 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>
-    )
-  }
-
-  // 网格类型为交叉线
-  // todo: 采用背景缩放的方式，实现更好的体验
-  renderMesh() {
-    const { config, size = 1, visible } = this.gridOptions
-    const { color, thickness = 1 } = config ?? {}
-
-    // 对于交叉线网格，线的宽度不能大于网格大小的一半
-    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"
-      />
-    )
-  }
-
-  render() {
-    const {
-      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
-    const matrixString = [
-      SCALE_X,
-      SKEW_Y,
-      SKEW_X,
-      SCALE_Y,
-      TRANSLATE_X,
-      TRANSLATE_Y,
-    ].join(',')
-    const transform = `matrix(${matrixString})`
-    // const transitionStyle = {
-    //   transition: 'all 0.1s ease',
-    // };
-    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>
-          </defs>
-          <rect width="100%" height="100%" fill={`url(#${this.id})`} />
-        </svg>
-      </div>
-    )
-  }
-}
-
-export namespace Grid {
-  export type GridOptions = {
-    /**
-     * 网格格子间距
-     */
-    size?: number
-    /**
-     * 网格是否可见
-     */
-    visible?: boolean
-    /**
-     * 网格类型
-     * - `dot` 点状网格
-     * - `mesh` 交叉线网格
-     */
-    type?: 'dot' | 'mesh'
-    config?: {
-      /**
-       * 网格的颜色
-       */
-      color?: string
-      /**
-       * 网格的宽度
-       * - 对于 `dot` 点状网格，表示点的大小
-       * - 对于 `mesh` 交叉线网格，表示线的宽度
-       */
-      thickness?: number
-    }
-  }
-
-  export const defaultProps: GridOptions = {
-    size: DEFAULT_GRID_SIZE,
-    visible: true,
-    type: 'dot',
-    config: {
-      color: '#ababab',
-      thickness: 1,
-    },
-  }
-
-  export function getGridOptions(options: number | boolean | GridOptions) {
-    const defaultOptions = cloneDeep(Grid.defaultProps)
-    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,170 +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> {
-  // 节点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 + 10,
-                // height: height + 10,
-                width: width + 10,
-                height: height + 10,
-              }}
-              {...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 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}
-      />
-    )
-  }
-
-  // 折线outline
-  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}
-      />
-    )
-  }
-
-  // 曲线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}
-      />
-    )
-  }
-
-  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()}
-        />
-      )
-    }
-  }
-}

package/src/view/overlay/index.ts

@@ -1,8 +0,0 @@
-export * from './CanvasOverlay'
-export * from './BezierAdjustOverlay'
-export * from './BackgroundOverlay'
-export * from './Grid'
-export * from './ModificationOverlay'
-export * from './OutlineOverlay'
-export * from './SnaplineOverlay'
-export * from './ToolOverlay'

package/src/view/shape/Circle.tsx

@@ -1,41 +0,0 @@
-import { createElement as h } from 'preact/compat'
-import { forEach, toPairs } from 'lodash-es'
-import { LogicFlow } from '../..'
-
-export type ICircleProps = {
-  x?: number
-  y?: number
-  r?: number
-  className?: string
-} & LogicFlow.CommonTheme
-
-export function Circle(props: ICircleProps): h.JSX.Element {
-  const { x = 0, y = 0, r = 4, className } = props
-
-  const attrs: ICircleProps = {
-    cx: x,
-    cy: y,
-    r,
-    fill: 'transparent',
-    fillOpacity: 1,
-    strokeWidth: 1,
-    stroke: '#000',
-    strokeOpacity: 1,
-  }
-
-  forEach(toPairs(props), ([k, v]: [k: string, v: any]) => {
-    if (typeof v !== 'object') {
-      attrs[k] = v
-    }
-  })
-
-  if (className) {
-    attrs.className = `lf-basic-shape ${className}`
-  } else {
-    attrs.className = `lf-basic-shape`
-  }
-
-  return <circle {...attrs} />
-}
-
-export default Circle

package/src/view/shape/Ellipse.tsx

@@ -1,42 +0,0 @@
-import { createElement as h } from 'preact/compat'
-import { forEach, toPairs } from 'lodash-es'
-import { LogicFlow } from '../..'
-
-export type IEllipseProps = {
-  x?: number
-  y?: number
-  rx?: number
-  ry?: number
-  className?: string
-} & LogicFlow.CommonTheme
-
-export function Ellipse(props: IEllipseProps): h.JSX.Element {
-  const { x = 0, y = 0, rx = 4, ry = 4, className } = props
-
-  const attrs: Record<string, any> = {
-    cx: x,
-    cy: y,
-    rx,
-    ry,
-    fill: 'transparent',
-    fillOpacity: 1,
-    strokeWidth: 1,
-    stroke: '#000',
-    strokeOpacity: 1,
-  }
-  forEach(toPairs(props), ([k, v]: [k: string, v: any]) => {
-    if (typeof v !== 'object') {
-      attrs[k] = v
-    }
-  })
-
-  if (className) {
-    attrs.className = `lf-basic-shape ${className}`
-  } else {
-    attrs.className = `lf-basic-shape`
-  }
-
-  return <ellipse {...attrs} />
-}
-
-export default Ellipse

package/src/view/shape/Line.tsx

@@ -1,39 +0,0 @@
-import { createElement as h } from 'preact/compat'
-import { forEach, toPairs } from 'lodash-es'
-
-export type ILineProps = {
-  id?: string
-  tabindex?: number
-  x1?: number
-  y1?: number
-  x2?: number
-  y2?: number
-  stroke?: string // Color
-  className?: string
-  style?: h.JSX.CSSProperties
-  [key: string]: any
-}
-
-export function Line(props: ILineProps): h.JSX.Element {
-  const attrs: ILineProps = {
-    // default
-    x1: 10,
-    y1: 10,
-    x2: 20,
-    y2: 20,
-    stroke: 'black',
-    // ...props
-  }
-
-  forEach(toPairs(props), ([k, v]: [k: string, v: any]) => {
-    if (k === 'style') {
-      attrs[k] = v
-    } else if (typeof v !== 'object') {
-      attrs[k] = v
-    }
-  })
-
-  return <line {...attrs} />
-}
-
-export default Line

package/src/view/shape/Path.tsx

@@ -1,22 +0,0 @@
-import { createElement as h } from 'preact/compat'
-import { forEach, toPairs } from 'lodash-es'
-
-export type IPathProps = {
-  d: string
-  [key: string]: any
-}
-
-export function Path(props: IPathProps): h.JSX.Element {
-  const attrs: Record<string, any> = {
-    d: '',
-  }
-  forEach(toPairs(props), ([k, v]: [key: string, v: any]) => {
-    if (k === 'style' || typeof v !== 'object') {
-      attrs[k] = v
-    }
-  })
-
-  return <path {...attrs} />
-}
-
-export default Path