@logicflow/extension 1.2.27 → 2.0.0-beta.0

package/src/NodeResize/control/Util.ts

@@ -0,0 +1,206 @@
+export enum ModelType {
+  NODE = 'node',
+  CIRCLE_NODE = 'circle-node',
+  POLYGON_NODE = 'polygon-node',
+  RECT_NODE = 'rect-node',
+  HTML_NODE = 'html-node',
+  TEXT_NODE = 'text-node',
+  ELLIPSE_NODE = 'ellipse-node',
+  DIAMOND_NODE = 'diamond-node',
+  EDGE = 'edge',
+  LINE_EDGE = 'line-edge',
+  POLYLINE_EDGE = 'polyline-edge',
+  BEZIER_EDGE = 'bezier-edge',
+  GRAPH = 'graph',
+}
+
+// 计算节点的box四角数据
+function getNodeBox(node) {
+  const { x, y, width, height } = node
+  return {
+    minX: x - width / 2,
+    minY: y - height / 2,
+    maxX: x + width / 2,
+    maxY: y + height / 2,
+  }
+}
+
+// 计算矩形radius设置后，四个圆角的圆心
+function getRadiusCenter(node) {
+  const nodeBox = getNodeBox(node)
+  const { radius } = node
+  const { minX, minY, maxX, maxY } = nodeBox
+  return [
+    {
+      x: minX + radius,
+      y: minY + radius,
+    },
+    {
+      x: maxX - radius,
+      y: minY + radius,
+    },
+    {
+      x: maxX - radius,
+      y: maxY - radius,
+    },
+    {
+      x: minX + radius,
+      y: maxY - radius,
+    },
+  ]
+}
+
+// 获取矩形resize之后，与矩形连接边的新端点
+export function getRectResizeEdgePoint({ point, beforeNode, afterNode }) {
+  const { x, y } = point
+  const afterPoint = {
+    x,
+    y,
+  }
+  const { radius } = beforeNode
+  const beforeNodeBox = getNodeBox(beforeNode)
+  const afterNodeBox = getNodeBox(afterNode)
+  if (x === beforeNodeBox.minX) {
+    // 左边
+    afterPoint.x = afterNodeBox.minX
+    const pct = (y - beforeNode.y) / (beforeNode.height / 2 - radius)
+    if (pct) {
+      afterPoint.y = afterNode.y + (afterNode.height / 2 - radius) * pct
+    } else {
+      afterPoint.y = afterNode.y
+    }
+  } else if (x === beforeNodeBox.maxX) {
+    // 右边
+    afterPoint.x = afterNodeBox.maxX
+    const pct = (y - beforeNode.y) / (beforeNode.height / 2 - radius)
+    if (pct) {
+      afterPoint.y = afterNode.y + (afterNode.height / 2 - radius) * pct
+    } else {
+      afterPoint.y = afterNode.y
+    }
+  } else if (y === beforeNodeBox.minY) {
+    // 上边
+    afterPoint.y = afterNodeBox.minY
+    const pct = (x - beforeNode.x) / (beforeNode.width / 2 - radius)
+    if (pct) {
+      afterPoint.x = afterNode.x + (afterNode.width / 2 - radius) * pct
+    } else {
+      afterPoint.x = afterNode.x
+    }
+  } else if (y === beforeNodeBox.maxY) {
+    // 下边
+    afterPoint.y = afterNodeBox.maxY
+    const pct = (x - beforeNode.x) / (beforeNode.width / 2 - radius)
+    if (pct) {
+      afterPoint.x = afterNode.x + (afterNode.width / 2 - radius) * pct
+    } else {
+      afterPoint.x = afterNode.x
+    }
+  } else {
+    // 在圆角部分
+    const beforeCoc = getRadiusCenter(beforeNode)
+    const afterCoc = getRadiusCenter(afterNode)
+    const nodeBox = getNodeBox(beforeNode)
+    const { minX, minY, maxX, maxY } = nodeBox
+    let index = -1
+    if (x - minX < radius && y - minY < radius) {
+      // 左上角
+      index = 0
+    } else if (maxX - x < radius && y - minY < radius) {
+      // 右上角
+      index = 1
+    } else if (maxX - x < radius && maxY - y < radius) {
+      // 右下角
+      index = 2
+    } else if (x - minX < radius && minY - y < radius) {
+      // 左下角
+      index = 3
+    }
+    if (index > -1) {
+      // 根据夹角角度计算位置
+      const angle = Math.atan2(y - beforeCoc[index].y, x - beforeCoc[index].x)
+      afterPoint.x = afterCoc[index].x + radius * Math.cos(angle)
+      afterPoint.y = afterCoc[index].y + radius * Math.sin(angle)
+    }
+  }
+  return afterPoint
+}
+
+// 获取椭圆resize之后，与椭圆连接边的新端点
+export function getEllipseResizeEdgePoint({ point, beforeNode, afterNode }) {
+  const { rx, ry } = afterNode
+  let afterPoint = point
+  // 将椭圆中心当做中心点(0,0)，放大缩小前点与X周夹角
+  const tan = (point.y - beforeNode.y) / (point.x - beforeNode.x)
+  // 方便与公式对照，将rx命名为a,ry命名为b
+  const a = rx
+  const b = ry
+  let x
+  let y
+  // 将椭圆中心当做中心点(0,0),计算放大缩小后，同一夹角下，点相对位置
+  if (tan >= Infinity) {
+    //  θ = PI / 2
+    x = 0
+    y = b
+  } else if (tan <= -Infinity) {
+    //  θ = 3 * PI / 2
+    x = 0
+    y = -b
+  } else if (point.x - beforeNode.x > 0) {
+    //  0 < θ = PI / 2   或者  3 * PI / 2 < θ = 2 * PI
+    //  一四象限
+    x = (a * b) / Math.sqrt(b * b + a * a * tan * tan)
+    y = (a * b * tan) / Math.sqrt(b * b + a * a * tan * tan)
+  } else {
+    //  PI / 2 < θ  3 * PI / 2
+    //  二三象限
+    x = -(a * b) / Math.sqrt(b * b + a * a * tan * tan)
+    y = -(a * b * tan) / Math.sqrt(b * b + a * a * tan * tan)
+  }
+  afterPoint = {
+    x: x + afterNode.x,
+    y: y + afterNode.y,
+  }
+  return afterPoint
+}
+
+// 获取菱形resize之后，与菱形连接边的新端点
+export function getDiamondResizeEdgePoint({ point, beforeNode, afterNode }) {
+  let afterPoint = point
+  let x
+  let y
+  const px = point.x - beforeNode.x
+  const py = point.y - beforeNode.y
+  const rxBefore = beforeNode.rx
+  const ryBefore = beforeNode.ry
+  // eslint-disable-next-line max-len
+  const pct =
+    Math.sqrt((rxBefore - Math.abs(px)) * (rxBefore - Math.abs(px)) + py * py) /
+    Math.sqrt(rxBefore * rxBefore + ryBefore * ryBefore)
+  const rxAfter = afterNode.rx
+  const ryAfter = afterNode.ry
+  // eslint-disable-next-line max-len
+  const a = Math.sqrt(
+    (rxAfter * rxAfter + ryAfter * ryAfter) *
+      pct *
+      pct *
+      ((rxAfter * rxAfter) / (rxAfter * rxAfter + ryAfter * ryAfter)),
+  )
+  const b = a * (ryAfter / rxAfter)
+  if (px >= 0) {
+    // eslint-disable-next-line max-len
+    x = rxAfter - a
+  } else {
+    x = a - rxAfter
+  }
+  if (py > 0) {
+    y = b
+  } else {
+    y = -b
+  }
+  afterPoint = {
+    x: x + afterNode.x,
+    y: y + afterNode.y,
+  }
+  return afterPoint
+}

package/src/NodeResize/index.ts

@@ -0,0 +1,22 @@
+import LogicFlow from '@logicflow/core'
+
+import EllipseResize from './node/EllipseResize'
+import DiamondResize from './node/DiamondResize'
+import HtmlResize from './node/HtmlResize'
+import RectResize from './node/RectResize'
+
+export * from './node'
+export const NodeResize = {
+  pluginName: 'nodeResize',
+  // 拖动step
+  step: 0,
+
+  install(lf: LogicFlow) {
+    lf.register(EllipseResize)
+    lf.register(DiamondResize)
+    lf.register(HtmlResize)
+    lf.register(RectResize)
+  },
+}
+
+export default NodeResize

package/src/NodeResize/node/DiamondResize.tsx

@@ -0,0 +1,148 @@
+import LogicFlow, {
+  Polygon,
+  GraphModel,
+  DiamondNode,
+  DiamondNodeModel,
+} from '@logicflow/core'
+import { PCTResizeParams } from './RectResize'
+import ControlGroup from '../control/ControlGroup'
+
+import NodeConfig = LogicFlow.NodeConfig
+
+export type ResizeDiamondNodeConfig = NodeConfig & {
+  properties: {
+    nodeSize: {
+      rx: number
+      ry: number
+    }
+  } & Record<string, unknown>
+}
+
+export class DiamondResizeModel extends DiamondNodeModel {
+  PCTResizeInfo?: PCTResizeParams
+  minWidth!: number
+  minHeight!: number
+  maxWidth!: number
+  maxHeight!: number
+
+  constructor(data: ResizeDiamondNodeConfig, graphModel: GraphModel) {
+    super(data, graphModel)
+    const { nodeSize } = data.properties
+    if (nodeSize) {
+      this.rx = nodeSize.rx
+      this.ry = nodeSize.ry
+    }
+  }
+
+  initNodeData(data: any): void {
+    super.initNodeData(data)
+    this.minWidth = 30
+    this.minHeight = 30
+    this.maxWidth = 2000
+    this.maxHeight = 2000
+    this.gridSize = 1
+  }
+
+  getOutlineStyle() {
+    const style = super.getOutlineStyle()
+    const {
+      editConfigModel: { isSilentMode },
+    } = this.graphModel
+    if (isSilentMode) return style
+    style.stroke = 'none'
+    if (style.hover) {
+      style.hover.stroke = 'none'
+    }
+    return style
+  }
+
+  getResizeOutlineStyle() {
+    return {
+      stroke: '#000000',
+      strokeWidth: 1,
+      strokeDasharray: '3,3',
+    }
+  }
+
+  getControlPointStyle() {
+    return {
+      width: 7,
+      height: 7,
+      fill: '#FFFFFF',
+      stroke: '#000000',
+    }
+  }
+
+  // 该方法需要在重设宽高和最大、最小限制后被调用，不建议在 initNodeData() 方法中使用
+  enableProportionResize(turnOn = true) {
+    if (turnOn) {
+      const ResizePCT = {
+        widthPCT: 100,
+        heightPCT: 100,
+      }
+      const ResizeBasis = {
+        basisWidth: this.rx,
+        basisHeight: this.ry,
+      }
+      const ScaleLimit = {
+        maxScaleLimit: Math.min(
+          (this.maxWidth / (this.rx * 2)) * 100,
+          (this.maxHeight / (this.ry * 2)) * 100,
+        ),
+        minScaleLimit: Math.max(
+          (this.minWidth / (this.rx * 2)) * 100,
+          (this.minHeight / (this.ry * 2)) * 100,
+        ),
+      }
+      this.PCTResizeInfo = {
+        ResizePCT,
+        ResizeBasis,
+        ScaleLimit,
+      }
+    } else {
+      delete this.PCTResizeInfo
+    }
+  }
+}
+
+export class DiamondResizeView extends DiamondNode {
+  getControlGroup() {
+    const { model, graphModel } = this.props
+    return <ControlGroup model={model} graphModel={graphModel} />
+  }
+
+  // getResizeShape绘制图形，功能等同于基础菱形的getShape功能，可以通过复写此方法，进行节点自定义
+  getResizeShape() {
+    const { model } = this.props
+    const { points } = model
+    const style = model.getNodeStyle()
+    return (
+      <g>
+        <Polygon {...style} points={points} />
+      </g>
+    )
+  }
+
+  getShape() {
+    const {
+      model: { isSelected },
+      graphModel: {
+        editConfigModel: { isSilentMode },
+      },
+    } = this.props
+    return (
+      <g>
+        {this.getResizeShape()}
+        {isSelected && !isSilentMode ? this.getControlGroup() : ''}
+      </g>
+    )
+  }
+}
+
+export const DiamondResize = {
+  type: 'diamond',
+  view: DiamondResizeView,
+  model: DiamondResizeModel,
+}
+
+export default DiamondResize

package/src/NodeResize/node/EllipseResize.tsx

@@ -0,0 +1,139 @@
+import LogicFlow, {
+  GraphModel,
+  EllipseNode,
+  EllipseNodeModel,
+} from '@logicflow/core'
+import { PCTResizeParams } from './RectResize'
+import ControlGroup from '../control/ControlGroup'
+
+import NodeConfig = LogicFlow.NodeConfig
+
+export type ResizeEllipseNodeConfig = NodeConfig & {
+  properties: {
+    nodeSize: {
+      rx: number
+      ry: number
+    }
+  } & Record<string, unknown>
+}
+
+export class EllipseResizeModel extends EllipseNodeModel {
+  PCTResizeInfo?: PCTResizeParams
+  minWidth!: number
+  minHeight!: number
+  maxWidth!: number
+  maxHeight!: number
+
+  constructor(data: ResizeEllipseNodeConfig, graphModel: GraphModel) {
+    super(data, graphModel)
+    const { nodeSize } = data.properties
+    if (nodeSize) {
+      this.rx = nodeSize.rx
+      this.ry = nodeSize.ry
+    }
+  }
+
+  initNodeData(data: any): void {
+    super.initNodeData(data)
+    this.minWidth = 30
+    this.minHeight = 30
+    this.maxWidth = 2000
+    this.maxHeight = 2000
+  }
+
+  getOutlineStyle() {
+    const style = super.getOutlineStyle()
+    const {
+      editConfigModel: { isSilentMode },
+    } = this.graphModel
+    if (isSilentMode) return style
+    style.stroke = 'none'
+    if (style.hover) {
+      style.hover.stroke = 'none'
+    }
+    return style
+  }
+
+  getResizeOutlineStyle() {
+    return {
+      stroke: '#000000',
+      strokeWidth: 1,
+      strokeDasharray: '3,3',
+    }
+  }
+
+  getControlPointStyle() {
+    return {
+      width: 7,
+      height: 7,
+      fill: '#FFFFFF',
+      stroke: '#000000',
+    }
+  }
+
+  // 该方法需要在重设宽高和最大、最小限制后被调用，不建议在 initNodeData() 方法中使用
+  enableProportionResize(turnOn = true) {
+    if (turnOn) {
+      const ResizePCT = {
+        widthPCT: 100,
+        heightPCT: 100,
+      }
+      const ResizeBasis = {
+        basisWidth: this.rx,
+        basisHeight: this.ry,
+      }
+      const ScaleLimit = {
+        maxScaleLimit: Math.min(
+          (this.maxWidth / (this.rx * 2)) * 100,
+          (this.maxHeight / (this.ry * 2)) * 100,
+        ),
+        minScaleLimit: Math.max(
+          (this.minWidth / (this.rx * 2)) * 100,
+          (this.minHeight / (this.ry * 2)) * 100,
+        ),
+      }
+      this.PCTResizeInfo = {
+        ResizePCT,
+        ResizeBasis,
+        ScaleLimit,
+      }
+    } else {
+      delete this.PCTResizeInfo
+    }
+  }
+}
+
+export class EllipseResizeView extends EllipseNode {
+  getControlGroup() {
+    const { model, graphModel } = this.props
+    return <ControlGroup model={model} graphModel={graphModel} />
+  }
+
+  // getResizeShape绘制图形，功能等同于基础椭圆的getShape功能，可以通过复写此方法，进行节点自定义
+  getResizeShape() {
+    return super.getShape()
+  }
+
+  getShape() {
+    const {
+      model,
+      graphModel: {
+        editConfigModel: { isSilentMode },
+      },
+    } = this.props
+    return (
+      <g>
+        {this.getResizeShape()}
+        {model.isSelected && !isSilentMode ? this.getControlGroup() : ''}
+      </g>
+    )
+  }
+}
+
+export const EllipseResize = {
+  type: 'ellipse',
+  view: EllipseResizeView,
+  model: EllipseResizeModel,
+}
+
+export default EllipseResize

package/src/NodeResize/node/HtmlResize.tsx

@@ -0,0 +1,124 @@
+import { GraphModel, HtmlNode, HtmlNodeModel } from '@logicflow/core'
+import { PCTResizeParams, ResizeNodeConfig } from './RectResize'
+import ControlGroup from '../control/ControlGroup'
+
+export class HtmlResizeModel extends HtmlNodeModel {
+  PCTResizeInfo?: PCTResizeParams
+  minWidth!: number
+  minHeight!: number
+  maxWidth!: number
+  maxHeight!: number
+
+  constructor(data: ResizeNodeConfig, graphModel: GraphModel) {
+    super(data, graphModel)
+    const { nodeSize } = data.properties
+    if (nodeSize) {
+      this.width = nodeSize.width
+      this.height = nodeSize.height
+    }
+  }
+
+  initNodeData(data: any): void {
+    super.initNodeData(data)
+    this.minWidth = 30
+    this.minHeight = 30
+    this.maxWidth = 2000
+    this.maxHeight = 2000
+  }
+
+  getOutlineStyle() {
+    const style = super.getOutlineStyle()
+    const {
+      editConfigModel: { isSilentMode },
+    } = this.graphModel
+    if (isSilentMode) return style
+    style.stroke = 'none'
+    if (style.hover) {
+      style.hover.stroke = 'none'
+    }
+    return style
+  }
+
+  getResizeOutlineStyle() {
+    return {
+      stroke: '#000000',
+      strokeWidth: 1,
+      strokeDasharray: '3,3',
+    }
+  }
+
+  getControlPointStyle() {
+    return {
+      width: 7,
+      height: 7,
+      fill: '#FFFFFF',
+      stroke: '#000000',
+    }
+  }
+
+  // 该方法需要在重设宽高和最大、最小限制后被调用，不建议在 initNodeData() 方法中使用
+  enableProportionResize(turnOn = true) {
+    if (turnOn) {
+      const ResizePCT = {
+        widthPCT: 100,
+        heightPCT: 100,
+      }
+      const ResizeBasis = {
+        basisWidth: this.width,
+        basisHeight: this.height,
+      }
+      const ScaleLimit = {
+        maxScaleLimit: Math.min(
+          (this.maxWidth / this.width) * 100,
+          (this.maxHeight / this.height) * 100,
+        ),
+        minScaleLimit: Math.max(
+          (this.minWidth / this.width) * 100,
+          (this.minHeight / this.height) * 100,
+        ),
+      }
+      this.PCTResizeInfo = {
+        ResizePCT,
+        ResizeBasis,
+        ScaleLimit,
+      }
+    } else {
+      delete this.PCTResizeInfo
+    }
+  }
+}
+
+export class HtmlResizeView extends HtmlNode {
+  getControlGroup() {
+    const { model, graphModel } = this.props
+    return <ControlGroup model={model} graphModel={graphModel} />
+  }
+
+  // getResizeShape绘制图形，功能等同于基础矩形的getShape功能，可以通过复写此方法，进行节点自定义
+  getResizeShape() {
+    return super.getShape()
+  }
+
+  getShape() {
+    const {
+      model: { isSelected },
+      graphModel: {
+        editConfigModel: { isSilentMode },
+      },
+    } = this.props
+    return (
+      <g>
+        {this.getResizeShape()}
+        {isSelected && !isSilentMode ? this.getControlGroup() : ''}
+      </g>
+    )
+  }
+}
+
+export const HtmlResize = {
+  type: 'html',
+  view: HtmlResizeView,
+  model: HtmlResizeModel,
+}
+
+export default HtmlResize