@logicflow/core 1.2.27 → 2.0.0-beta.0

package/src/view/overlay/OutlineOverlay.tsx

@@ -0,0 +1,170 @@
+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))
+        } 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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,65 @@
+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,
+        logicFlow: 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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,27 @@
+export function Circle(props) {
+  const { x = 0, y = 0, r = 4, className } = props
+  const attrs: Record<string, any> = {
+    cx: x,
+    cy: y,
+    r,
+    fill: 'transparent',
+    fillOpacity: 1,
+    strokeWidth: '1',
+    stroke: '#000',
+    strokeOpacity: 1,
+  }
+  Object.entries(props).forEach(([k, v]) => {
+    const valueType = typeof v
+    if (valueType !== 'object') {
+      attrs[k] = v
+    }
+  })
+  if (className) {
+    attrs.className = `lf-basic-shape ${className}`
+  } else {
+    attrs.className = 'lf-shape'
+  }
+  return <circle {...attrs} />
+}
+
+export default Circle

package/src/view/shape/Ellipse.tsx

@@ -0,0 +1,28 @@
+export function Ellipse(props) {
+  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,
+  }
+  Object.entries(props).forEach(([k, v]) => {
+    const valueType = typeof v
+    if (valueType !== 'object') {
+      attrs[k] = v
+    }
+  })
+  if (className) {
+    attrs.className = `lf-basic-shape ${className}`
+  } else {
+    attrs.className = 'lf-shape'
+  }
+  return <ellipse {...attrs} />
+}
+
+export default Ellipse

package/src/view/shape/Line.tsx

@@ -0,0 +1,24 @@
+export function Line(props) {
+  const attrs = {
+    // default
+    x1: 10,
+    y1: 10,
+    x2: 20,
+    y2: 20,
+    stroke: 'black',
+    // ...props,
+  }
+  Object.entries(props).forEach(([k, v]) => {
+    if (k === 'style') {
+      attrs[k] = v
+    } else {
+      const valueType = typeof v
+      if (valueType !== 'object') {
+        attrs[k] = v
+      }
+    }
+  })
+  return <line {...attrs} />
+}
+
+export default Line

package/src/view/shape/Path.tsx

@@ -0,0 +1,19 @@
+type IProps = {
+  d: string
+  [key: string]: any
+}
+
+export function Path(props: IProps) {
+  const attrs = {
+    d: '',
+  }
+  Object.entries(props).forEach(([k, v]) => {
+    const valueType = typeof v
+    if (k === 'style' || valueType !== 'object') {
+      attrs[k] = v
+    }
+  })
+  return <path {...attrs} />
+}
+
+export default Path

package/src/view/shape/Polygon.tsx

@@ -0,0 +1,36 @@
+import LogicFlow from '../../LogicFlow'
+
+// TODO: 定义基础图形的类型
+export type IPolygonProps = {
+  points: LogicFlow.PointTuple[]
+  className?: string
+  [key: string]: any
+}
+
+export function Polygon(props: IPolygonProps) {
+  const { points, className } = props
+  const attrs: Record<string, any> = {
+    fill: 'transparent',
+    fillOpacity: 1,
+    strokeWidth: 1,
+    stroke: '#000',
+    strokeOpacity: 1,
+    points: '',
+  }
+  Object.entries(props).forEach(([k, v]) => {
+    const valueType = typeof v
+    if (valueType !== 'object') {
+      attrs[k] = v
+    }
+  })
+  if (className) {
+    attrs.className = `lf-basic-shape ${className}`
+  } else {
+    attrs.className = 'lf-shape'
+  }
+  attrs.points = points.map((point) => point.join(',')).join(' ')
+
+  return <polygon {...attrs} />
+}
+
+export default Polygon

package/src/view/shape/Polyline.tsx

@@ -0,0 +1,19 @@
+export function Polyline(props) {
+  const attrs = {
+    points: '',
+    fill: 'none',
+  }
+  Object.entries(props).forEach(([k, v]) => {
+    if (k === 'style') {
+      attrs[k] = v
+    } else {
+      const valueType = typeof v
+      if (valueType !== 'object') {
+        attrs[k] = v
+      }
+    }
+  })
+  return <polyline {...attrs} />
+}
+
+export default Polyline

package/src/view/shape/Rect.tsx

@@ -0,0 +1,44 @@
+import LogicFlow from '../../LogicFlow'
+
+import Point = LogicFlow.Point
+import RectSize = LogicFlow.RectSize
+
+type IRectProps = {
+  className?: string
+  radius?: number
+} & Point &
+  RectSize
+
+export function Rect(props: IRectProps) {
+  const { x, y, width, height, className, radius } = props
+
+  const leftTopX = x - width / 2
+  const leftTopY = y - height / 2
+  const attrs: Record<string, any> = {}
+  Object.entries(props).forEach(([k, v]) => {
+    const valueType = typeof v
+    if (valueType !== 'object') {
+      attrs[k] = v
+    }
+  })
+
+  if (className) {
+    attrs.className = `lf-basic-shape ${className}`
+  } else {
+    attrs.className = 'lf-shape'
+  }
+  if (radius) {
+    attrs.rx = radius
+    attrs.ry = radius
+  }
+  attrs.x = leftTopX
+  attrs.y = leftTopY
+  return <rect {...attrs} />
+}
+
+Rect.defaultProps = {
+  className: '',
+  radius: '',
+}
+
+export default Rect

package/src/view/shape/Text.tsx

@@ -0,0 +1,138 @@
+import { getHtmlTextHeight } from '../../util'
+import { ElementType, ModelType } from '../../constant'
+
+export function Text(props) {
+  const {
+    x = 0,
+    y = 0,
+    value,
+    fontSize,
+    fill = 'currentColor',
+    overflowMode = 'default',
+    textWidth = '',
+    model,
+  } = props
+  const attrs = {
+    textAnchor: 'middle',
+    'dominant-baseline': 'middle',
+    x,
+    y,
+    fill,
+    // ...props,
+  }
+  Object.entries(props).forEach(([k, v]) => {
+    const valueType = typeof v
+    if (valueType !== 'object') {
+      attrs[k] = v
+    }
+  })
+  if (value) {
+    // String(value),兼容纯数字的文案
+    const rows = String(value).split(/[\r\n]/g)
+    const rowsLength = rows.length
+    if (overflowMode !== 'default') {
+      // 非文本节点设置了自动换行，或边设置了自动换行并且设置了textWidth
+      const { BaseType, modelType } = model
+      if (
+        (BaseType === ElementType.NODE && modelType !== ModelType.TEXT_NODE) ||
+        (BaseType === ElementType.EDGE && textWidth)
+      ) {
+        return renderHtmlText(props)
+      }
+    }
+    if (rowsLength > 1) {
+      const tSpans = rows.map((row, i) => {
+        // 保证文字居中，文字Y轴偏移为当前行数对应中心行数的偏移行 * 行高
+        const tspanLineHeight = fontSize + 2
+        const offsetY = (i - (rowsLength - 1) / 2) * tspanLineHeight
+        return (
+          <tspan className="lf-text-tspan" x={x} y={y + offsetY}>
+            {row}
+          </tspan>
+        )
+      })
+      return <text {...attrs}>{tSpans}</text>
+    }
+    return <text {...attrs}>{value}</text>
+  }
+
+  return null
+}
+
+function renderHtmlText(props) {
+  const {
+    value,
+    fontSize,
+    model,
+    fontFamily = '',
+    lineHeight,
+    wrapPadding = '0, 0',
+    overflowMode,
+    x,
+    y,
+  } = props
+  const { width, textHeight } = model
+  const textRealWidth = props.textWidth || width
+  const rows = String(value).split(/[\r\n]/g)
+  const rowsLength = rows.length
+  const textRealHeight = getHtmlTextHeight({
+    rows,
+    style: {
+      fontSize: `${fontSize}px`,
+      width: `${textRealWidth}px`,
+      fontFamily,
+      lineHeight,
+      padding: wrapPadding,
+    },
+    rowsLength,
+    className: 'lf-get-text-height',
+  })
+  // 当文字超过边框时，取文字高度的实际值，也就是文字可以超过边框
+  let foreignObjectHeight =
+    model.height > textRealHeight ? model.height : textRealHeight
+  // 如果设置了文字高度，取设置的高度
+  if (textHeight) {
+    foreignObjectHeight = textHeight
+  }
+  const isEllipsis = overflowMode === 'ellipsis'
+  if (isEllipsis) {
+    foreignObjectHeight = fontSize + 2
+  }
+  return (
+    <g>
+      <foreignObject
+        width={textRealWidth}
+        height={foreignObjectHeight}
+        x={x - textRealWidth / 2}
+        y={y - foreignObjectHeight / 2}
+      >
+        <div
+          className="lf-node-text-auto-wrap"
+          style={{
+            minHeight: foreignObjectHeight,
+            width: textRealWidth,
+            padding: wrapPadding,
+          }}
+        >
+          <div
+            className={
+              isEllipsis
+                ? 'lf-node-text-ellipsis-content'
+                : 'lf-node-text-auto-wrap-content'
+            }
+            title={isEllipsis ? rows.join('') : ''}
+            style={{
+              ...props,
+            }}
+          >
+            {rows.map((item) => (
+              <div className="lf-node-text--auto-wrap-inner">{item}</div>
+            ))}
+          </div>
+        </div>
+      </foreignObject>
+    </g>
+  )
+}
+
+export default Text

package/src/view/shape/index.ts

@@ -0,0 +1,8 @@
+export * from './Text'
+export * from './Line'
+export * from './Rect'
+export * from './Path'
+export * from './Circle'
+export * from './Ellipse'
+export * from './Polygon'
+export * from './Polyline'