@logicflow/core 1.2.26 → 2.0.0-beta.0

package/src/view/node/TextNode.tsx

@@ -0,0 +1,37 @@
+import Rect from '../shape/Rect'
+import BaseNode from './BaseNode'
+import { GraphModel, TextNodeModel } from '../../model'
+
+export type ITextNodeProps = {
+  model: TextNodeModel
+  graphModel: GraphModel
+}
+
+export class TextNode extends BaseNode<ITextNodeProps> {
+  getBackground() {
+    const { model } = this.props
+    const style = model.getTextStyle()
+    // 背景框宽度，最长一行字节数/2 * fontsize + 2
+    // 背景框宽度， 行数 * fontsize + 2
+    // FIX: #1067
+    const { width, height, x, y } = model
+    const rectAttr = {
+      ...style.background,
+      x,
+      y: y - 1,
+      width,
+      height,
+    }
+    return <Rect {...rectAttr} />
+  }
+
+  getResizeControl() {
+    return null
+  }
+
+  getShape() {
+    return <g>{this.getBackground()}</g>
+  }
+}
+
+export default TextNode

package/src/view/node/index.ts

@@ -0,0 +1,8 @@
+export * from './BaseNode'
+export * from './RectNode'
+export * from './CircleNode'
+export * from './PolygonNode'
+export * from './DiamondNode'
+export * from './EllipseNode'
+export * from './TextNode'
+export * from './HtmlNode'

package/src/view/overlay/BackgroundOverlay.tsx

@@ -0,0 +1,39 @@
+import { Component } from 'preact/compat'
+
+/**
+ * 背景配置, 支持css属性配置
+ * https://developer.mozilla.org/zh-CN/docs/Web/CSS/background
+ * @example
+ * {
+ *  backgroundImage: "url('./img/grid.svg')",
+ backgroundRepeat: 'repeat',
+ * }
+ */
+export type BackgroundConfig = {
+  /**
+   * 背景图片地址
+   */
+  backgroundImage?: string
+  /**
+   * 是否重复
+   */
+  backgroundRepeat?: string
+  [key: string]: any
+}
+
+type IProps = {
+  background: BackgroundConfig
+}
+
+export class BackgroundOverlay extends Component<IProps> {
+  render() {
+    const { background } = this.props
+    return (
+      <div className="lf-background">
+        <div style={background} className="lf-background-area" />
+      </div>
+    )
+  }
+}
+
+export default BackgroundOverlay

package/src/view/overlay/BezierAdjustOverlay.tsx

@@ -0,0 +1,150 @@
+import { Component } from 'preact/compat'
+import { Circle, Line } from '../shape'
+import { observer } from '../..'
+import LogicFlow from '../../LogicFlow'
+import { EventType, ModelType } from '../../constant'
+import { StepDrag, getBezierPoints, IDragParams } from '../../util'
+import { GraphModel, BezierEdgeModel } from '../../model'
+
+import Point = LogicFlow.Point
+
+type IProps = {
+  graphModel: GraphModel
+}
+
+type IAnchorProps = {
+  position: Point
+  bezierModel: BezierEdgeModel
+  graphModel: GraphModel
+  type: string
+}
+
+type IState = {
+  endX: number
+  endY: number
+}
+
+// bezier曲线的可调整锚点
+export class BezierAdjustAnchor extends Component<IAnchorProps, IState> {
+  dragHandler: StepDrag
+
+  constructor() {
+    super()
+    this.dragHandler = new StepDrag({
+      onDragging: this.onDragging,
+      onDragEnd: this.onDragEnd,
+    })
+  }
+
+  onDragging = ({ event }: IDragParams) => {
+    const { graphModel, bezierModel, type } = this.props
+    const {
+      canvasOverlayPosition: { x, y },
+    } = graphModel.getPointByClient({
+      x: event!.clientX,
+      y: event!.clientY,
+    })
+    bezierModel.updateAdjustAnchor(
+      {
+        x,
+        y,
+      },
+      type,
+    )
+    graphModel.eventCenter.emit(EventType.EDGE_ADJUST, {
+      data: bezierModel.getData(),
+    })
+  }
+  onDragEnd = () => {
+    const { bezierModel } = this.props
+    bezierModel.isDragging = false
+  }
+
+  render() {
+    const { position } = this.props
+    const { x, y } = position
+    const { bezierModel } = this.props
+    const { adjustAnchor } = bezierModel.getEdgeStyle()
+    return (
+      <Circle
+        className="lf-bezier-adjust-anchor"
+        x={x}
+        y={y}
+        {...adjustAnchor}
+        onMouseDown={(ev) => {
+          // if (edgeAddable !== false) {
+          this.dragHandler.handleMouseDown(ev)
+          // }
+        }}
+      />
+    )
+  }
+}
+
+@observer
+export class BezierAdjustOverlay extends Component<IProps> {
+  getBezierAdjust(bezier: BezierEdgeModel, graphModel: GraphModel) {
+    const { path, id } = bezier
+    const pointsList = getBezierPoints(path)
+    const [start, sNext, ePre, end] = pointsList
+    const { adjustLine } = bezier.getEdgeStyle()
+    const result: any = [] // TODO: 类型定义
+    result.push(
+      <Line
+        x1={start.x}
+        y1={start.y}
+        x2={sNext.x}
+        y2={sNext.y}
+        {...adjustLine}
+      />,
+    )
+    result.push(
+      <BezierAdjustAnchor
+        position={sNext}
+        bezierModel={bezier}
+        graphModel={graphModel}
+        key={`${id}_ePre`}
+        type="sNext"
+      />,
+    )
+    result.push(
+      <Line x1={end.x} y1={end.y} x2={ePre.x} y2={ePre.y} {...adjustLine} />,
+    )
+    result.push(
+      <BezierAdjustAnchor
+        position={ePre}
+        bezierModel={bezier}
+        graphModel={graphModel}
+        key={`${id}_sNext`}
+        type="ePre"
+      />,
+    )
+    return result
+  }
+
+  // 获取选中bezier曲线，调整操作线和锚点
+  selectedBezierEdge() {
+    const { graphModel } = this.props
+    const edgeList = graphModel.edges
+    const edgeAdjust: any = [] // TODO：类型定义
+    for (let i = 0; i < edgeList.length; i++) {
+      const edge = edgeList[i]
+      if (
+        edge.isSelected &&
+        edge.modelType === ModelType.BEZIER_EDGE &&
+        edge.draggable
+      ) {
+        edgeAdjust.push(
+          this.getBezierAdjust(edge as BezierEdgeModel, graphModel),
+        )
+      }
+    }
+    return edgeAdjust
+  }
+
+  render() {
+    return <g className="lf-bezier-adjust">{this.selectedBezierEdge()}</g>
+  }
+}
+
+export default BezierAdjustOverlay

package/src/view/overlay/CanvasOverlay.tsx

@@ -0,0 +1,180 @@
+import { Component } from 'preact/compat'
+import Dnd from '../behavior/dnd'
+import { observer } from '../..'
+import GraphModel from '../../model/GraphModel'
+import { EventType } from '../../constant'
+import { StepDrag, IDragParams } from '../../util'
+
+type IProps = {
+  graphModel: GraphModel
+  dnd: Dnd
+}
+type IState = {
+  isDragging: boolean
+}
+
+@observer
+export class CanvasOverlay extends Component<IProps, IState> {
+  stepDrag: StepDrag
+  stepScrollX = 0
+  stepScrollY = 0
+
+  constructor(props: IProps) {
+    super()
+    const {
+      graphModel: { gridSize, eventCenter },
+    } = props
+    this.stepDrag = new StepDrag({
+      onDragging: this.onDragging,
+      onDragEnd: this.onDragEnd,
+      step: gridSize,
+      eventType: 'BLANK',
+      isStopPropagation: false,
+      eventCenter,
+      model: undefined,
+    })
+    // 当ctrl键被按住的时候，可以放大缩小。
+    this.state = {
+      isDragging: false,
+    }
+  }
+
+  // get InjectedProps() {
+  //   return this.props as InjectedProps;
+  // }
+  onDragging = ({ deltaX, deltaY }: IDragParams) => {
+    this.setState({
+      isDragging: true,
+    })
+    const {
+      graphModel: { transformModel, editConfigModel },
+    } = this.props
+    if (editConfigModel.stopMoveGraph === true) {
+      return
+    }
+    transformModel.translate(deltaX, deltaY)
+  }
+  onDragEnd = () => {
+    this.setState({
+      isDragging: false,
+    })
+  }
+  zoomHandler = (ev: WheelEvent) => {
+    const {
+      graphModel: { editConfigModel, transformModel, gridSize },
+      graphModel,
+    } = this.props
+    const { deltaX: eX, deltaY: eY } = ev
+    // 如果没有禁止滚动移动画布, 并且当前触发的时候ctrl键没有按住, 那么移动画布
+    if (!editConfigModel.stopScrollGraph && ev.ctrlKey !== true) {
+      ev.preventDefault()
+      this.stepScrollX += eX
+      this.stepScrollY += eY
+      if (Math.abs(this.stepScrollX) >= gridSize) {
+        const remainderX = this.stepScrollX % gridSize
+        const moveDistance = this.stepScrollX - remainderX
+        transformModel.translate(-moveDistance * transformModel.SCALE_X, 0)
+        this.stepScrollX = remainderX
+      }
+      if (Math.abs(this.stepScrollY) >= gridSize) {
+        const remainderY = this.stepScrollY % gridSize
+        const moveDistanceY = this.stepScrollY - remainderY
+        transformModel.translate(0, -moveDistanceY * transformModel.SCALE_Y)
+        this.stepScrollY = remainderY
+      }
+      return
+    }
+    // 如果没有禁止缩放画布，那么进行缩放. 在禁止缩放画布后，按住ctrl键也不能缩放了。
+    if (!editConfigModel.stopZoomGraph) {
+      ev.preventDefault()
+      const position = graphModel.getPointByClient({
+        x: ev.clientX,
+        y: ev.clientY,
+      })
+      const { x, y } = position.canvasOverlayPosition
+      transformModel.zoom(ev.deltaY < 0, [x, y])
+    }
+  }
+  clickHandler = (ev: MouseEvent) => {
+    // 点击空白处取消节点选中状态, 不包括冒泡过来的事件。
+    const target = ev.target as HTMLElement
+    if (target.getAttribute('name') === 'canvas-overlay') {
+      const { graphModel } = this.props
+      const { selectElements } = graphModel
+      if (selectElements.size > 0) {
+        graphModel.clearSelectElements()
+      }
+      graphModel.eventCenter.emit(EventType.BLANK_CLICK, { e: ev })
+    }
+  }
+  handleContextMenu = (ev: MouseEvent) => {
+    const target = ev.target as HTMLElement
+    if (target.getAttribute('name') === 'canvas-overlay') {
+      ev.preventDefault()
+      const { graphModel } = this.props
+      const position = graphModel.getPointByClient({
+        x: ev.clientX,
+        y: ev.clientY,
+      })
+      // graphModel.setElementState(ElementState.SHOW_MENU, position.domOverlayPosition);
+      graphModel.eventCenter.emit(EventType.BLANK_CONTEXTMENU, {
+        e: ev,
+        position,
+      })
+    }
+  }
+  mouseDownHandler = (ev: MouseEvent) => {
+    const {
+      graphModel: {
+        eventCenter,
+        editConfigModel,
+        transformModel: { SCALE_X },
+        gridSize,
+      },
+    } = this.props
+    const target = ev.target as HTMLElement
+    const isFrozenElement =
+      !editConfigModel.adjustEdge && !editConfigModel.adjustNodePosition
+    if (target.getAttribute('name') === 'canvas-overlay' || isFrozenElement) {
+      if (editConfigModel.stopMoveGraph !== true) {
+        this.stepDrag.setStep(gridSize * SCALE_X)
+        this.stepDrag.handleMouseDown(ev)
+      } else {
+        eventCenter.emit(EventType.BLANK_MOUSEDOWN, { e: ev })
+      }
+      // 为了处理画布移动的时候，编辑和菜单仍然存在的问题。
+      this.clickHandler(ev)
+    }
+  }
+
+  render() {
+    const {
+      graphModel: { transformModel },
+    } = this.props
+    const { transform } = transformModel.getTransformStyle()
+    const { children, dnd } = this.props
+    const { isDragging } = this.state
+
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="100%"
+        height="100%"
+        name="canvas-overlay"
+        onWheel={this.zoomHandler}
+        onMouseDown={this.mouseDownHandler}
+        onContextMenu={this.handleContextMenu}
+        className={
+          isDragging
+            ? 'lf-canvas-overlay lf-dragging'
+            : 'lf-canvas-overlay lf-drag-able'
+        }
+        {...dnd.eventMap()}
+      >
+        <g transform={transform}>{children}</g>
+      </svg>
+    )
+  }
+}
+
+export default CanvasOverlay

package/src/view/overlay/Grid.tsx

@@ -0,0 +1,135 @@
+import { Component } from 'preact/compat'
+import { observer } from '../..'
+import { createUuid } from '../../util'
+import { GraphModel } from '../../model'
+import { DEFAULT_GRID_SIZE } from '../../constant'
+
+export type GridOptions = {
+  /**
+   * 网格格子间距
+   */
+  size?: number
+  /**
+   * 网格是否可见
+   */
+  visible?: boolean
+
+  graphModel: GraphModel
+  /**
+   * 网格类型
+   * 'dot' || 'mesh'
+   */
+  type?: string
+  config?: {
+    color: string
+    thickness?: number
+  }
+}
+
+type IProps = GridOptions
+
+@observer
+export class Grid extends Component<IProps> {
+  readonly id = createUuid()
+
+  // 网格类型为点状
+  renderDot() {
+    const { config, size = 1, visible } = this.props
+
+    const { color, thickness = 2 } = config ?? {}
+
+    const length = Math.min(Math.max(1.5, thickness), size / 2) // 2 < length < size /2
+    let opacity = 1
+    if (!visible) {
+      opacity = 0
+    }
+    /* eslint-disable-next-line */
+    return (
+      <rect
+        width={length}
+        height={length}
+        rx={length / 2}
+        ry={length / 2}
+        fill={color}
+        opacity={opacity}
+      />
+    )
+  }
+
+  // 网格类型为交叉线
+  // todo: 采用背景缩放的方式，实现更好的体验
+  renderMesh() {
+    const { config, size = 1, visible } = this.props
+    const { color, thickness = 1 } = config ?? {}
+    const strokeWidth = Math.min(Math.max(1, thickness), size / 2) // 1 < strokeWidth < size /2
+    const d = `M ${size} 0 H0 M0 0 V0 ${size}`
+    let opacity = 1
+    if (!visible) {
+      opacity = 0
+    }
+    return (
+      <path d={d} stroke={color} strokeWidth={strokeWidth} opacity={opacity} />
+    )
+  }
+
+  render() {
+    // TODO 生成网格️️️✔、网格支持 options（size）✔
+    const {
+      type,
+      size,
+      graphModel: { transformModel },
+    } = this.props
+    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>
+    )
+  }
+}
+
+Grid.defaultProps = {
+  size: DEFAULT_GRID_SIZE,
+  visible: true,
+  type: 'dot',
+  config: {
+    color: '#ababab',
+    thickness: 1,
+  },
+}
+
+export default Grid

package/src/view/overlay/ModificationOverlay.tsx

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