@logicflow/core 2.2.0-alpha.7 → 2.2.1

package/src/model/node/CircleNodeModel.ts

@@ -1,91 +0,0 @@
-import { cloneDeep } from 'lodash-es'
-import { computed, observable } from 'mobx'
-import BaseNodeModel from './BaseNodeModel'
-import GraphModel from '../GraphModel'
-import LogicFlow from '../../LogicFlow'
-import { ModelType } from '../../constant'
-import { ResizeControl } from '../../view/Control'
-
-import NodeConfig = LogicFlow.NodeConfig
-import ResizeInfo = ResizeControl.ResizeInfo
-import ResizeNodeData = ResizeControl.ResizeNodeData
-
-export type ICircleNodeProperties = {
-  r?: number
-  style?: LogicFlow.CommonTheme
-  textStyle?: LogicFlow.CommonTheme
-
-  [key: string]: any
-}
-
-export class CircleNodeModel<
-  P extends ICircleNodeProperties = ICircleNodeProperties,
-> extends BaseNodeModel<P> {
-  modelType = ModelType.CIRCLE_NODE
-  // @observable properties: ICircleNodeProperties = {}
-  @observable r = 50
-
-  @computed get width(): number {
-    return this.r * 2
-  }
-
-  @computed get height(): number {
-    return this.r * 2
-  }
-
-  constructor(data: NodeConfig<P>, graphModel: GraphModel) {
-    super(data, graphModel)
-    // this.properties = data.properties || {}
-
-    this.initNodeData(data)
-    this.setAttributes()
-  }
-
-  setAttributes() {
-    super.setAttributes()
-
-    const { r } = this.properties
-    if (r) {
-      this.r = r
-    }
-  }
-
-  getNodeStyle() {
-    const style = super.getNodeStyle()
-    const {
-      graphModel: {
-        theme: { circle },
-      },
-    } = this
-    const { style: customStyle = {} } = this.properties
-    return {
-      ...style,
-      ...cloneDeep(circle),
-      ...cloneDeep(customStyle),
-    }
-  }
-
-  getDefaultAnchor() {
-    const { x, y, r } = this
-    return [
-      { x, y: y - r, id: `${this.id}_0` },
-      { x: x + r, y, id: `${this.id}_1` },
-      { x, y: y + r, id: `${this.id}_2` },
-      { x: x - r, y, id: `${this.id}_3` },
-    ]
-  }
-
-  resize(resizeInfo: ResizeInfo): ResizeNodeData {
-    const { width, deltaX, deltaY } = resizeInfo
-    // 移动节点以及文本内容
-    this.move(deltaX / 2, deltaY / 2)
-
-    this.r = width
-    this.setProperties({
-      r: width,
-    })
-    return this.getData()
-  }
-}
-
-export default CircleNodeModel

package/src/model/node/DiamondNodeModel.ts

@@ -1,132 +0,0 @@
-import { cloneDeep, forEach, map } from 'lodash-es'
-import { computed, observable } from 'mobx'
-import GraphModel from '../GraphModel'
-import BaseNodeModel from './BaseNodeModel'
-import LogicFlow from '../../LogicFlow'
-import { ModelType } from '../../constant'
-import { ResizeControl } from '../../view/Control'
-
-import Point = LogicFlow.Point
-import PointTuple = LogicFlow.PointTuple
-import NodeConfig = LogicFlow.NodeConfig
-import ResizeInfo = ResizeControl.ResizeInfo
-import ResizeNodeData = ResizeControl.ResizeNodeData
-
-export type IDiamondNodeProperties = {
-  rx?: number
-  ry?: number
-  style?: LogicFlow.CommonTheme
-  textStyle?: LogicFlow.CommonTheme
-
-  [key: string]: unknown
-}
-
-export class DiamondNodeModel<
-  P extends IDiamondNodeProperties = IDiamondNodeProperties,
-> extends BaseNodeModel<P> {
-  modelType = ModelType.DIAMOND_NODE
-  @observable rx = 30
-  @observable ry = 50
-  // @observable properties: IDiamondNodeProperties = {}
-
-  constructor(data: NodeConfig<P>, graphModel: GraphModel) {
-    super(data, graphModel)
-    // this.properties = data.properties || {}
-
-    this.initNodeData(data)
-    this.setAttributes()
-  }
-
-  setAttributes() {
-    super.setAttributes()
-
-    const { rx, ry } = this.properties
-    if (rx) {
-      this.rx = rx
-    }
-    if (ry) {
-      this.ry = ry
-    }
-  }
-
-  getNodeStyle() {
-    const style = super.getNodeStyle()
-    const {
-      graphModel: {
-        theme: { diamond },
-      },
-    } = this
-    const { style: customStyle = {} } = this.properties
-    return {
-      ...style,
-      ...cloneDeep(diamond),
-      ...cloneDeep(customStyle),
-    }
-  }
-
-  @computed get points(): PointTuple[] {
-    const { x, y, rx, ry } = this
-    return [
-      [x, y - ry],
-      [x + rx, y],
-      [x, y + ry],
-      [x - rx, y],
-    ]
-  }
-
-  @computed get pointsPosition(): Point[] {
-    return map(this.points, ([x, y]) => ({ x, y }))
-  }
-
-  @computed get width(): number {
-    let min = Number.MAX_SAFE_INTEGER
-    let max = Number.MIN_SAFE_INTEGER
-    forEach(this.points, ([x]) => {
-      if (x < min) {
-        min = x
-      }
-      if (x > max) {
-        max = x
-      }
-    })
-    return max - min
-  }
-
-  @computed get height(): number {
-    let min = Number.MAX_SAFE_INTEGER
-    let max = Number.MIN_SAFE_INTEGER
-    forEach(this.points, ([, y]) => {
-      if (y < min) {
-        min = y
-      }
-      if (y > max) {
-        max = y
-      }
-    })
-    return max - min
-  }
-
-  getDefaultAnchor() {
-    return map(this.points, ([x, y], idx) => ({
-      x,
-      y,
-      id: `${this.id}_${idx}`,
-    }))
-  }
-
-  resize(resizeInfo: ResizeInfo): ResizeNodeData {
-    const { width, height, deltaX, deltaY } = resizeInfo
-    // 移动节点以及文本内容
-    this.move(deltaX / 2, deltaY / 2)
-
-    this.rx = width
-    this.ry = height
-    this.setProperties({
-      rx: width,
-      ry: height,
-    })
-    return this.getData()
-  }
-}
-
-export default DiamondNodeModel

package/src/model/node/EllipseNodeModel.ts

@@ -1,98 +0,0 @@
-import { cloneDeep } from 'lodash-es'
-import { computed, observable } from 'mobx'
-import BaseNodeModel from './BaseNodeModel'
-import GraphModel from '../GraphModel'
-import LogicFlow from '../../LogicFlow'
-import { ModelType } from '../../constant'
-import { ResizeControl } from '../../view/Control'
-
-import NodeConfig = LogicFlow.NodeConfig
-import ResizeInfo = ResizeControl.ResizeInfo
-import ResizeNodeData = ResizeControl.ResizeNodeData
-
-export type IEllipseNodeProperties = {
-  rx?: number
-  ry?: number
-  style?: LogicFlow.CommonTheme
-  textStyle?: LogicFlow.CommonTheme
-
-  [key: string]: unknown
-}
-
-export class EllipseNodeModel<
-  P extends IEllipseNodeProperties = IEllipseNodeProperties,
-> extends BaseNodeModel<P> {
-  modelType = ModelType.ELLIPSE_NODE
-  @observable rx = 30
-  @observable ry = 45
-  // @observable properties: IEllipseNodeProperties = {}
-
-  constructor(data: NodeConfig<P>, graphModel: GraphModel) {
-    super(data, graphModel)
-    // this.properties = data.properties || {}
-
-    this.initNodeData(data)
-    this.setAttributes()
-  }
-
-  setAttributes() {
-    super.setAttributes()
-
-    const { rx, ry } = this.properties
-    if (rx) {
-      this.rx = rx
-    }
-    if (ry) {
-      this.ry = ry
-    }
-  }
-
-  getNodeStyle() {
-    const style = super.getNodeStyle()
-    const {
-      graphModel: {
-        theme: { ellipse },
-      },
-    } = this
-    const { style: customStyle = {} } = this.properties
-    return {
-      ...style,
-      ...cloneDeep(ellipse),
-      ...cloneDeep(customStyle),
-    }
-  }
-
-  @computed get width(): number {
-    return this.rx * 2
-  }
-
-  @computed get height(): number {
-    return this.ry * 2
-  }
-
-  getDefaultAnchor() {
-    const { x, y, rx, ry } = this
-    return [
-      { x, y: y - ry, id: `${this.id}_0` },
-      { x: x + rx, y, id: `${this.id}_1` },
-      { x, y: y + ry, id: `${this.id}_2` },
-      { x: x - rx, y, id: `${this.id}_3` },
-    ]
-  }
-
-  resize(resizeInfo: ResizeInfo): ResizeNodeData {
-    const { width, height, deltaX, deltaY } = resizeInfo
-    // 移动节点以及文本内容
-    this.move(deltaX / 2, deltaY / 2)
-
-    this.rx = width
-    this.ry = height
-    this.setProperties({
-      rx: width,
-      ry: height,
-    })
-    return this.getData()
-  }
-}
-
-export default EllipseNodeModel

package/src/model/node/HtmlNodeModel.ts

@@ -1,64 +0,0 @@
-import { cloneDeep } from 'lodash-es'
-import BaseNodeModel from './BaseNodeModel'
-import { Model } from '../BaseModel'
-import { ModelType } from '../../constant'
-
-import AnchorConfig = Model.AnchorConfig
-import LogicFlow from '../../LogicFlow'
-import GraphModel from '../GraphModel'
-
-export interface IHtmlNodeProperties {
-  width?: number
-  height?: number
-  style?: LogicFlow.CommonTheme
-  textStyle?: LogicFlow.CommonTheme
-
-  [key: string]: unknown
-}
-
-export class HtmlNodeModel<
-  P extends IHtmlNodeProperties = IHtmlNodeProperties,
-> extends BaseNodeModel<P> {
-  modelType = ModelType.HTML_NODE
-  // @observable properties: IHtmlNodeProperties = {}
-
-  constructor(data: LogicFlow.NodeConfig<P>, graphModel: GraphModel) {
-    super(data, graphModel)
-    // this.properties = data.properties || {}
-
-    this.setAttributes()
-  }
-
-  setAttributes() {
-    super.setAttributes()
-
-    const { width, height } = this.properties
-    if (width) this.width = width
-    if (height) this.height = height
-  }
-
-  getDefaultAnchor(): AnchorConfig[] {
-    const { x, y, width, height } = this
-    return [
-      { x, y: y - height / 2, id: `${this.id}_0` },
-      { x: x + width / 2, y, id: `${this.id}_1` },
-      { x, y: y + height / 2, id: `${this.id}_2` },
-      { x: x - width / 2, y, id: `${this.id}_3` },
-    ]
-  }
-
-  getNodeStyle() {
-    const style = super.getNodeStyle()
-    const { baseNode, html } = this.graphModel.theme
-    const { style: customStyle = {} } = this.properties
-    const finalStyle = {
-      ...style,
-      ...cloneDeep(baseNode),
-      ...cloneDeep(html),
-      ...cloneDeep(customStyle),
-    }
-    return finalStyle
-  }
-}
-
-export default HtmlNodeModel

package/src/model/node/PolygonNodeModel.ts

@@ -1,152 +0,0 @@
-import { cloneDeep, map } from 'lodash-es'
-import { computed, observable } from 'mobx'
-import BaseNodeModel from './BaseNodeModel'
-import GraphModel from '../GraphModel'
-import LogicFlow from '../../LogicFlow'
-import { ModelType } from '../../constant'
-import { ResizeControl } from '../../view/Control'
-import Point = LogicFlow.Point
-import PointTuple = LogicFlow.PointTuple
-import NodeConfig = LogicFlow.NodeConfig
-import ResizeInfo = ResizeControl.ResizeInfo
-import ResizeNodeData = ResizeControl.ResizeNodeData
-import { normalizePolygon } from '../../util'
-
-export type IPolygonNodeProperties = {
-  points?: PointTuple[]
-  width?: number
-  height?: number
-  style?: LogicFlow.CommonTheme
-  textStyle?: LogicFlow.CommonTheme
-
-  [key: string]: unknown
-}
-
-export class PolygonNodeModel<
-  P extends IPolygonNodeProperties = IPolygonNodeProperties,
-> extends BaseNodeModel<P> {
-  modelType = ModelType.POLYGON_NODE
-  @observable points: PointTuple[] = [
-    [50, 0],
-    [100, 50],
-    [50, 100],
-    [0, 50], // 菱形
-    // [0,100], [50,25], [50,75], [100,0] // 闪电
-    // [100, 10],
-    // [40, 198],
-    // [190, 78],
-    // [10, 78],
-    // [160, 198], // 五角星
-  ]
-  // @observable properties: IPolygonNodeProperties = {}
-
-  constructor(data: NodeConfig<P>, graphModel: GraphModel) {
-    super(data, graphModel)
-    // this.properties = data.properties || {}
-
-    this.initNodeData(data)
-    this.setAttributes()
-  }
-
-  setAttributes() {
-    super.setAttributes()
-
-    const { points, width, height } = this.properties
-    // DONE: 如果设置了 points，又设置了节点的宽高，则需要做如下操作
-    // 1. 将 points 的位置置零，即将图形向原点移动（找到 points 中 x,y 的最小值，所有坐标值减掉该值）
-    // 2. 按宽高的比例重新计算最新的 points
-    // if (points) {
-    //   this.points = points
-    // }
-    const nextPoints = points || this.points
-    this.points = normalizePolygon(nextPoints, width, height)
-  }
-
-  getNodeStyle() {
-    const style = super.getNodeStyle()
-    const {
-      graphModel: {
-        theme: { polygon },
-        customStyles: { polygon: customPolygon },
-      },
-    } = this
-    const { style: customStyle = {} } = this.properties
-    return {
-      ...style,
-      ...cloneDeep(polygon),
-      ...cloneDeep(customPolygon),
-      ...cloneDeep(customStyle),
-    }
-  }
-
-  /**
-   * 由于大多数情况下，我们初始化拿到的多边形坐标都是基于原点的（例如绘图工具到处的svg）。
-   * 在logicflow中对多边形进行移动，我们不需要去更新points，
-   * 而是去更新多边形中心点即可。
-   */
-  @computed get pointsPosition(): Point[] {
-    const { x, y, width, height } = this
-    return this.points.map((item) => ({
-      x: item[0] + x - width / 2,
-      y: item[1] + y - height / 2,
-    }))
-  }
-
-  @computed get width(): number {
-    let min = Number.MAX_SAFE_INTEGER
-    let max = Number.MIN_SAFE_INTEGER
-    this.points.forEach(([x]) => {
-      if (x < min) {
-        min = x
-      }
-      if (x > max) {
-        max = x
-      }
-    })
-    return max - min
-  }
-
-  @computed get height(): number {
-    let min = Number.MAX_SAFE_INTEGER
-    let max = Number.MIN_SAFE_INTEGER
-    this.points.forEach(([, y]) => {
-      if (y < min) {
-        min = y
-      }
-      if (y > max) {
-        max = y
-      }
-    })
-    return max - min
-  }
-
-  getDefaultAnchor() {
-    const { x, y, width, height, points } = this
-    return points.map(([x1, y1], idx) => ({
-      x: x + x1 - width / 2,
-      y: y + y1 - height / 2,
-      id: `${this.id}_${idx}`,
-    }))
-  }
-
-  resize(resizeInfo: ResizeInfo): ResizeNodeData {
-    const { width, height, deltaX, deltaY } = resizeInfo
-    // 移动节点以及文本内容
-    this.move(deltaX / 2, deltaY / 2)
-
-    const nextPoints: PointTuple[] = map(this.points, ([x, y]) => [
-      (x * width) / this.width,
-      (y * height) / this.height,
-    ])
-    this.points = nextPoints
-
-    this.properties.points = nextPoints
-    // this.setProperties({
-    //   points: toJS(nextPoints),
-    // })
-
-    return this.getData()
-  }
-}
-
-export default PolygonNodeModel

package/src/model/node/RectNodeModel.ts

@@ -1,69 +0,0 @@
-import { cloneDeep, isNil } from 'lodash-es'
-import { observable } from 'mobx'
-import BaseNodeModel from './BaseNodeModel'
-import GraphModel from '../GraphModel'
-import LogicFlow from '../../LogicFlow'
-import { ModelType } from '../../constant'
-
-export type IRectNodeProperties = {
-  width?: number
-  height?: number
-  radius?: number
-  style?: LogicFlow.CommonTheme
-  textStyle?: LogicFlow.CommonTheme
-
-  [key: string]: unknown
-}
-
-export class RectNodeModel<
-  P extends IRectNodeProperties = IRectNodeProperties,
-> extends BaseNodeModel<P> {
-  modelType = ModelType.RECT_NODE
-  @observable radius = 0
-  // @observable properties: P
-
-  constructor(data: LogicFlow.NodeConfig<P>, graphModel: GraphModel) {
-    super(data, graphModel)
-
-    // TODO：类字段初始化会覆盖 super、setAttributes 中设置的属性
-    // this.properties = data.properties || {}
-    // TODO: bug here, 上面更新 properties 会触发 setAttributes，下面再主动调用，会导致触发两次
-    this.initNodeData(data)
-    this.setAttributes()
-  }
-
-  setAttributes() {
-    super.setAttributes()
-
-    const { width, height, radius } = this.properties
-    const { radius: styleRadius } = this.getNodeStyle()
-    if (!isNil(width)) this.width = width
-    if (!isNil(height)) this.height = height
-    // 矩形特有
-    if (!isNil(radius)) this.radius = radius
-    if (!isNil(styleRadius)) this.radius = styleRadius
-  }
-
-  getDefaultAnchor() {
-    const { x, y, width, height } = this
-    return [
-      { x, y: y - height / 2, id: `${this.id}_0` },
-      { x: x + width / 2, y, id: `${this.id}_1` },
-      { x, y: y + height / 2, id: `${this.id}_2` },
-      { x: x - width / 2, y, id: `${this.id}_3` },
-    ]
-  }
-
-  getNodeStyle() {
-    const style = super.getNodeStyle()
-    const { rect } = this.graphModel.theme
-    const { style: customStyle = {} } = this.properties
-    return {
-      ...style,
-      ...cloneDeep(rect),
-      ...cloneDeep(customStyle),
-    }
-  }
-}
-
-export default RectNodeModel

package/src/model/node/TextNodeModel.ts

@@ -1,54 +0,0 @@
-import { cloneDeep } from 'lodash-es'
-import { computed } from 'mobx'
-import BaseNodeModel from './BaseNodeModel'
-import { ModelType } from '../../constant'
-import { getSvgTextWidthHeight } from '../../util'
-import LogicFlow from '../../LogicFlow'
-
-export type ITextNodeProperties = {
-  style?: LogicFlow.CommonTheme
-  textStyle?: LogicFlow.CommonTheme
-
-  [key: string]: unknown
-}
-
-export class TextNodeModel<
-  P extends ITextNodeProperties = ITextNodeProperties,
-> extends BaseNodeModel<P> {
-  modelType = ModelType.TEXT_NODE
-
-  getTextStyle() {
-    const style = super.getTextStyle()
-    const { text } = this.graphModel.theme
-    const { textStyle } = this.properties
-    return {
-      ...style,
-      ...cloneDeep(text),
-      ...cloneDeep(textStyle),
-    }
-  }
-
-  @computed get width(): number {
-    const rows = String(this.text.value).split(/[\r\n]/g)
-    const { fontSize } = this.getTextStyle()
-    const { width } = getSvgTextWidthHeight({
-      rows,
-      fontSize,
-      rowsLength: rows.length,
-    })
-    return width
-  }
-
-  @computed get height(): number {
-    const rows = String(this.text.value).split(/[\r\n]/g)
-    const { fontSize } = this.getTextStyle()
-    const { height } = getSvgTextWidthHeight({
-      rows,
-      fontSize,
-      rowsLength: rows.length,
-    })
-    return height
-  }
-}
-
-export default TextNodeModel

package/src/model/node/index.ts

@@ -1,8 +0,0 @@
-export * from './BaseNodeModel'
-export * from './CircleNodeModel'
-export * from './DiamondNodeModel'
-export * from './EllipseNodeModel'
-export * from './PolygonNodeModel'
-export * from './RectNodeModel'
-export * from './TextNodeModel'
-export * from './HtmlNodeModel'