@logicflow/extension 2.2.0-alpha.7 → 2.2.1

package/src/NodeResize/control/Util.ts

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

@@ -1,26 +0,0 @@
-/**
- * @deprecated
- * 待废弃，2.0 版本将 NodeResize 能力内置，该插件设计和实现有比较多的问题，后续不再维护，请及时切换
- */
-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

@@ -1,149 +0,0 @@
-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 {
-      fill: 'none',
-      stroke: 'transparent',
-      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

@@ -1,140 +0,0 @@
-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 {
-      fill: 'none',
-      stroke: 'transparent',
-      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

@@ -1,125 +0,0 @@
-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 {
-      fill: 'none',
-      stroke: 'transparent',
-      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