@logicflow/core 1.2.26 → 2.0.0-beta.0

package/src/model/node/CircleNodeModel.ts

@@ -0,0 +1,89 @@
+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 extends BaseNodeModel {
+  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, graphModel: GraphModel) {
+    super(data, graphModel)
+    this.properties = data.properties || {}
+
+    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,
+      ...(customStyle ?? {}),
+      ...cloneDeep(circle),
+    }
+  }
+
+  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

@@ -0,0 +1,128 @@
+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]: any
+}
+
+export class DiamondNodeModel extends BaseNodeModel {
+  modelType = ModelType.DIAMOND_NODE
+  @observable rx = 30
+  @observable ry = 50
+  @observable properties: IDiamondNodeProperties = {}
+
+  constructor(data: NodeConfig, graphModel: GraphModel) {
+    super(data, graphModel)
+    this.properties = data.properties || {}
+
+    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
+    return {
+      ...style,
+      ...cloneDeep(diamond),
+    }
+  }
+
+  @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

@@ -0,0 +1,94 @@
+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]: any
+}
+
+export class EllipseNodeModel extends BaseNodeModel {
+  modelType = ModelType.ELLIPSE_NODE
+  @observable rx = 30
+  @observable ry = 45
+  @observable properties: IEllipseNodeProperties = {}
+
+  constructor(data: NodeConfig, graphModel: GraphModel) {
+    super(data, graphModel)
+    this.properties = data.properties || {}
+
+    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
+    return {
+      ...style,
+      ...cloneDeep(ellipse),
+    }
+  }
+
+  @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

@@ -0,0 +1,49 @@
+import BaseNodeModel from './BaseNodeModel'
+import { Model } from '../BaseModel'
+import { ModelType } from '../../constant'
+
+import AnchorConfig = Model.AnchorConfig
+import { observable } from 'mobx'
+import LogicFlow from '../../LogicFlow'
+import GraphModel from '../GraphModel'
+
+export type IHtmlNodeModel = {
+  width?: number
+  height?: number
+  style?: LogicFlow.CommonTheme
+  textStyle?: LogicFlow.CommonTheme
+
+  [key: string]: any
+}
+
+export class HtmlNodeModel extends BaseNodeModel {
+  modelType = ModelType.HTML_NODE
+  @observable properties: IHtmlNodeModel = {}
+
+  constructor(data: LogicFlow.NodeConfig, 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` },
+    ]
+  }
+}
+
+export default HtmlNodeModel

package/src/model/node/PolygonNodeModel.ts

@@ -0,0 +1,147 @@
+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]: any
+}
+
+export class PolygonNodeModel extends BaseNodeModel {
+  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, graphModel: GraphModel) {
+    super(data, graphModel)
+    this.properties = data.properties || {}
+
+    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 },
+      },
+    } = this
+    const { style: customStyle } = this.properties
+    return {
+      ...style,
+      ...cloneDeep(polygon),
+      ...(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

@@ -0,0 +1,57 @@
+import { cloneDeep } 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 IRectNodeModel = {
+  width?: number
+  height?: number
+  style?: LogicFlow.CommonTheme
+  textStyle?: LogicFlow.CommonTheme
+
+  [key: string]: any
+}
+
+export class RectNodeModel extends BaseNodeModel {
+  modelType = ModelType.RECT_NODE
+  @observable radius = 0
+  @observable properties: IRectNodeModel = {}
+
+  constructor(data: LogicFlow.NodeConfig, 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() {
+    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
+    return {
+      ...style,
+      ...cloneDeep(rect),
+    }
+  }
+}
+
+export default RectNodeModel

package/src/model/node/TextNodeModel.ts

@@ -0,0 +1,41 @@
+import { cloneDeep } from 'lodash-es'
+import { computed } from 'mobx'
+import BaseNodeModel from './BaseNodeModel'
+import { ModelType } from '../../constant'
+import { getSvgTextWidthHeight } from '../../util'
+
+export class TextNodeModel extends BaseNodeModel {
+  modelType = ModelType.TEXT_NODE
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const { text } = this.graphModel.theme
+    return {
+      ...style,
+      ...cloneDeep(text),
+    }
+  }
+  @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

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