@logicflow/core 2.0.0 → 2.0.2

package/lib/view/edge/PolylineEdge.js

@@ -277,4 +277,3 @@ var PolylineEdge = /** @class */ (function (_super) {
 }(BaseEdge_1.default));
 exports.PolylineEdge = PolylineEdge;
 exports.default = PolylineEdge;
-//# sourceMappingURL=PolylineEdge.js.map

package/lib/view/edge/index.js

@@ -20,4 +20,3 @@ __exportStar(require("./BaseEdge"), exports);
 __exportStar(require("./BezierEdge"), exports);
 __exportStar(require("./LineEdge"), exports);
 __exportStar(require("./PolylineEdge"), exports);
-//# sourceMappingURL=index.js.map

package/lib/view/index.js

@@ -21,4 +21,3 @@ __exportStar(require("./shape"), exports);
 __exportStar(require("./node"), exports);
 __exportStar(require("./edge"), exports);
 __exportStar(require("./text"), exports);
-//# sourceMappingURL=index.js.map

package/lib/view/node/BaseNode.js

@@ -430,4 +430,3 @@ var BaseNode = /** @class */ (function (_super) {
 }(compat_1.Component));
 exports.BaseNode = BaseNode;
 exports.default = BaseNode;
-//# sourceMappingURL=BaseNode.js.map

package/lib/view/node/CircleNode.js

@@ -48,4 +48,3 @@ var CircleNode = /** @class */ (function (_super) {
 }(BaseNode_1.default));
 exports.CircleNode = CircleNode;
 exports.default = CircleNode;
-//# sourceMappingURL=CircleNode.js.map

package/lib/view/node/DiamondNode.js

@@ -47,4 +47,3 @@ var DiamondNode = /** @class */ (function (_super) {
 }(BaseNode_1.default));
 exports.DiamondNode = DiamondNode;
 exports.default = DiamondNode;
-//# sourceMappingURL=DiamondNode.js.map

package/lib/view/node/EllipseNode.js

@@ -47,4 +47,3 @@ var EllipseNode = /** @class */ (function (_super) {
 }(BaseNode_1.default));
 exports.EllipseNode = EllipseNode;
 exports.default = EllipseNode;
-//# sourceMappingURL=EllipseNode.js.map

package/lib/view/node/HtmlNode.js

@@ -132,4 +132,3 @@ var HtmlNode = /** @class */ (function (_super) {
 }(BaseNode_1.default));
 exports.HtmlNode = HtmlNode;
 exports.default = HtmlNode;
-//# sourceMappingURL=HtmlNode.js.map

package/lib/view/node/PolygonNode.js

@@ -51,4 +51,3 @@ var PolygonNode = /** @class */ (function (_super) {
 }(BaseNode_1.default));
 exports.PolygonNode = PolygonNode;
 exports.default = PolygonNode;
-//# sourceMappingURL=PolygonNode.js.map

package/lib/view/node/RectNode.js

@@ -47,4 +47,3 @@ var RectNode = /** @class */ (function (_super) {
 }(BaseNode_1.default));
 exports.RectNode = RectNode;
 exports.default = RectNode;
-//# sourceMappingURL=RectNode.js.map

package/lib/view/node/TextNode.js

@@ -58,4 +58,3 @@ var TextNode = /** @class */ (function (_super) {
 }(BaseNode_1.default));
 exports.TextNode = TextNode;
 exports.default = TextNode;
-//# sourceMappingURL=TextNode.js.map

package/lib/view/node/index.js

@@ -22,4 +22,3 @@ __exportStar(require("./DiamondNode"), exports);
 __exportStar(require("./EllipseNode"), exports);
 __exportStar(require("./TextNode"), exports);
 __exportStar(require("./HtmlNode"), exports);
-//# sourceMappingURL=index.js.map

package/lib/view/overlay/BackgroundOverlay.js

@@ -31,4 +31,3 @@ var BackgroundOverlay = /** @class */ (function (_super) {
 }(compat_1.Component));
 exports.BackgroundOverlay = BackgroundOverlay;
 exports.default = BackgroundOverlay;
-//# sourceMappingURL=BackgroundOverlay.js.map

package/lib/view/overlay/BezierAdjustOverlay.js

@@ -142,4 +142,3 @@ var BezierAdjustOverlay = /** @class */ (function (_super) {
 }(compat_1.Component));
 exports.BezierAdjustOverlay = BezierAdjustOverlay;
 exports.default = BezierAdjustOverlay;
-//# sourceMappingURL=BezierAdjustOverlay.js.map

package/lib/view/overlay/CanvasOverlay.js

@@ -173,4 +173,3 @@ var CanvasOverlay = /** @class */ (function (_super) {
 }(compat_1.Component));
 exports.CanvasOverlay = CanvasOverlay;
 exports.default = CanvasOverlay;
-//# sourceMappingURL=CanvasOverlay.js.map

package/lib/view/overlay/Grid.js

@@ -127,4 +127,3 @@ exports.Grid = Grid;
     }
     Grid.getGridOptions = getGridOptions;
 })(Grid || (exports.Grid = Grid = {}));
-//# sourceMappingURL=Grid.js.map

package/lib/view/overlay/ModificationOverlay.js

@@ -43,4 +43,3 @@ var ModificationOverlay = /** @class */ (function (_super) {
 }(compat_1.Component));
 exports.ModificationOverlay = ModificationOverlay;
 exports.default = ModificationOverlay;
-//# sourceMappingURL=ModificationOverlay.js.map

package/lib/view/overlay/OutlineOverlay.js

@@ -134,4 +134,3 @@ var OutlineOverlay = /** @class */ (function (_super) {
 }(compat_1.Component));
 exports.OutlineOverlay = OutlineOverlay;
 exports.default = OutlineOverlay;
-//# sourceMappingURL=OutlineOverlay.js.map

package/lib/view/overlay/SnaplineOverlay.js

@@ -63,4 +63,3 @@ var SnaplineOverlay = /** @class */ (function (_super) {
 }(compat_1.Component));
 exports.SnaplineOverlay = SnaplineOverlay;
 exports.default = OutlineOverlay_1.default;
-//# sourceMappingURL=SnaplineOverlay.js.map

package/lib/view/overlay/ToolOverlay.js

@@ -76,4 +76,3 @@ var ToolOverlay = /** @class */ (function (_super) {
 }(compat_1.Component));
 exports.ToolOverlay = ToolOverlay;
 exports.default = _1.OutlineOverlay;
-//# sourceMappingURL=ToolOverlay.js.map

package/lib/view/overlay/getTransformHoc.js

@@ -58,4 +58,3 @@ function getTransform(WrappedComponent) {
     }(preact_1.Component));
 }
 exports.getTransform = getTransform;
-//# sourceMappingURL=getTransformHoc.js.map

package/lib/view/overlay/index.js

@@ -22,4 +22,3 @@ __exportStar(require("./ModificationOverlay"), exports);
 __exportStar(require("./OutlineOverlay"), exports);
 __exportStar(require("./SnaplineOverlay"), exports);
 __exportStar(require("./ToolOverlay"), exports);
-//# sourceMappingURL=index.js.map

package/lib/view/shape/Circle.js

@@ -58,4 +58,3 @@ function Circle(props) {
 }
 exports.Circle = Circle;
 exports.default = Circle;
-//# sourceMappingURL=Circle.js.map

package/lib/view/shape/Ellipse.js

@@ -59,4 +59,3 @@ function Ellipse(props) {
 }
 exports.Ellipse = Ellipse;
 exports.default = Ellipse;
-//# sourceMappingURL=Ellipse.js.map

package/lib/view/shape/Line.js

@@ -53,4 +53,3 @@ function Line(props) {
 }
 exports.Line = Line;
 exports.default = Line;
-//# sourceMappingURL=Line.js.map

package/lib/view/shape/Path.js

@@ -44,4 +44,3 @@ function Path(props) {
 }
 exports.Path = Path;
 exports.default = Path;
-//# sourceMappingURL=Path.js.map

package/lib/view/shape/Polygon.js

@@ -57,4 +57,3 @@ function Polygon(props) {
 }
 exports.Polygon = Polygon;
 exports.default = Polygon;
-//# sourceMappingURL=Polygon.js.map

package/lib/view/shape/Polyline.js

@@ -52,4 +52,3 @@ function Polyline(props) {
 }
 exports.Polyline = Polyline;
 exports.default = Polyline;
-//# sourceMappingURL=Polyline.js.map

package/lib/view/shape/Rect.js

@@ -58,4 +58,3 @@ function Rect(props) {
 }
 exports.Rect = Rect;
 exports.default = Rect;
-//# sourceMappingURL=Rect.js.map

package/lib/view/shape/Text.js

@@ -119,4 +119,3 @@ function renderHtmlText(props) {
 }
 exports.renderHtmlText = renderHtmlText;
 exports.default = Text;
-//# sourceMappingURL=Text.js.map

package/lib/view/shape/index.js

@@ -22,4 +22,3 @@ __exportStar(require("./Circle"), exports);
 __exportStar(require("./Ellipse"), exports);
 __exportStar(require("./Polygon"), exports);
 __exportStar(require("./Polyline"), exports);
-//# sourceMappingURL=index.js.map

package/lib/view/text/BaseText.js

@@ -131,4 +131,3 @@ var BaseText = /** @class */ (function (_super) {
 }(compat_1.Component));
 exports.BaseText = BaseText;
 exports.default = BaseText;
-//# sourceMappingURL=BaseText.js.map

package/lib/view/text/LineText.js

@@ -157,4 +157,3 @@ var LineText = /** @class */ (function (_super) {
 }(_1.BaseText));
 exports.LineText = LineText;
 exports.default = LineText;
-//# sourceMappingURL=LineText.js.map

package/lib/view/text/index.js

@@ -16,4 +16,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./BaseText"), exports);
 __exportStar(require("./LineText"), exports);
-//# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/core",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "LogicFlow, help you quickly create flowcharts",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/model/GraphModel.ts

@@ -43,10 +43,6 @@ import NodeConfig = LogicFlow.NodeConfig
 import BaseNodeModelCtor = LogicFlow.BaseNodeModelCtor
 import BaseEdgeModelCtor = LogicFlow.BaseEdgeModelCtor
 
-export interface Constructable<T> {
-  new (...args: any): T
-}
-
 export class GraphModel {
   /**
    * LogicFlow画布挂载元素
@@ -76,6 +72,13 @@ export class GraphModel {
   // 节点间连线、连线变更时的边的生成规则
   edgeGenerator: LFOptions.Definition['edgeGenerator']
 
+  // Remind：用于记录当前画布上所有节点和边的 model 的 Map
+  // 现在的处理方式，用 this.nodes.map 生成的方式，如果在 new Model 的过程中依赖于其它节点的 model，会出现找不到的情况
+  // eg: new DynamicGroupModel 时，需要获取当前 children 的 model，根据 groupModel 的 isCollapsed 状态更新子节点的 visible
+  nodeModelMap: Map<string, BaseNodeModel> = new Map()
+  edgeModelMap: Map<string, BaseEdgeModel> = new Map()
+  elementsModelMap: Map<string, BaseNodeModel | BaseEdgeModel> = new Map()
+
   /**
    * 节点移动规则判断
    * 在节点移动的时候，会出发此数组中的所有规则判断
@@ -161,9 +164,7 @@ export class GraphModel {
     }, {} as GraphModel.NodesMapType)
   }
 
-  @computed get edgesMap(): {
-    [key: string]: { index: number; model: BaseEdgeModel }
-  } {
+  @computed get edgesMap(): GraphModel.EdgesMapType {
     return this.edges.reduce((eMap, model, index) => {
       eMap[model.id] = {
         index,
@@ -191,7 +192,7 @@ export class GraphModel {
 
     // 只显示可见区域的节点和边
     const visibleElements: (BaseNodeModel | BaseEdgeModel)[] = []
-    // TODO: 缓存，优化计算效率 by xutao. So what to do?
+    // TODO: 缓存，优化计算效率 by xutao. So how?
     const visibleLt: PointTuple = [
       -DEFAULT_VISIBLE_SPACE,
       -DEFAULT_VISIBLE_SPACE,
@@ -428,7 +429,11 @@ export class GraphModel {
         if (!Model) {
           throw new Error(`找不到${edge.type}对应的边。`)
         }
-        return new Model(edge, this)
+        const edgeModel = new Model(edge, this)
+        this.edgeModelMap.set(edgeModel.id, edgeModel)
+        this.elementsModelMap.set(edgeModel.id, edgeModel)
+
+        return edgeModel
       })
     } else {
       this.edges = []
@@ -800,7 +805,11 @@ export class GraphModel {
         node.text.y += node.y - nodeY
       }
     }
-    return new Model(node, this)
+    const nodeModel = new Model(node, this)
+    this.nodeModelMap.set(nodeModel.id, nodeModel)
+    this.elementsModelMap.set(nodeModel.id, nodeModel)
+
+    return nodeModel
   }
 
   /**
@@ -914,6 +923,8 @@ export class GraphModel {
       },
       this,
     )
+    this.edgeModelMap.set(edgeModel.id, edgeModel)
+    this.elementsModelMap.set(edgeModel.id, edgeModel)
 
     const edgeData = edgeModel.getData()
     this.edges.push(edgeModel)
@@ -1153,8 +1164,10 @@ export class GraphModel {
     // 如果节点之间存在连线，则只移动连线一次。
     const nodeIdMap: Record<string, [number, number]> = nodeIds.reduce(
       (acc, cur) => {
-        const nodeModel = this.nodesMap[cur].model
-        acc[cur] = nodeModel.getMoveDistance(deltaX, deltaY, isIgnoreRule)
+        const nodeModel = this.nodesMap[cur]?.model
+        if (nodeModel) {
+          acc[cur] = nodeModel.getMoveDistance(deltaX, deltaY, isIgnoreRule)
+        }
         return acc
       },
       {},
@@ -1337,10 +1350,9 @@ export class GraphModel {
   }
 
   /**
-   * TODO: 命名问题 outcoming -> outgoing or incoming
    * 获取所有以此锚点为起点的边
    */
-  @action getAnchorOutcomingEdge(anchorId?: string) {
+  @action getAnchorOutgoingEdge(anchorId?: string) {
     const edges: BaseEdgeModel[] = []
     this.edges.forEach((edge) => {
       if (edge.sourceAnchorId === anchorId) {

package/src/model/edge/BaseEdgeModel.ts

@@ -1,5 +1,5 @@
 import { assign, cloneDeep, find, isUndefined } from 'lodash-es'
-import { action, computed, isObservable, observable, toJS } from 'mobx'
+import { action, computed, isObservable, observable, set, toJS } from 'mobx'
 import { BaseNodeModel, GraphModel, Model } from '..'
 import LogicFlow from '../../LogicFlow'
 import {
@@ -389,8 +389,8 @@ export class BaseEdgeModel<P extends PropertiesType = PropertiesType>
       id: this.id,
       type: this.type,
       properties,
-      sourceNodeId: this.sourceNode.id,
-      targetNodeId: this.targetNode.id,
+      sourceNodeId: this.sourceNodeId,
+      targetNodeId: this.targetNodeId,
       startPoint: assign({}, this.startPoint),
       endPoint: assign({}, this.endPoint),
     }
@@ -425,14 +425,12 @@ export class BaseEdgeModel<P extends PropertiesType = PropertiesType>
    * @param key 属性名
    * @param val 属性值
    */
-  @action
-  setProperty(key: string, val: any): void {
+  @action setProperty(key: string, val: any): void {
     const preProperties = toJS(this.properties)
-    this.properties = {
-      ...preProperties,
-      [key]: formatData(val),
-    }
+    const newProperties = cloneDeep(preProperties)
+    set(newProperties, key, formatData(val))
 
+    this.properties = newProperties
     this.setAttributes()
   }
 
@@ -440,8 +438,7 @@ export class BaseEdgeModel<P extends PropertiesType = PropertiesType>
    * 删除边的属性，会触发重新渲染
    * @param key 属性名
    */
-  @action
-  deleteProperty(key: string): void {
+  @action deleteProperty(key: string): void {
     delete this.properties[key]
     this.setAttributes()
   }

package/src/model/node/BaseNodeModel.ts

@@ -1,5 +1,13 @@
 import { action, computed, isObservable, observable, toJS } from 'mobx'
-import { assign, cloneDeep, has, isNil, mapKeys, isUndefined } from 'lodash-es'
+import {
+  assign,
+  cloneDeep,
+  has,
+  isNil,
+  mapKeys,
+  isUndefined,
+  set,
+} from 'lodash-es'
 import { GraphModel, Model } from '..'
 import LogicFlow from '../../LogicFlow'
 import {
@@ -774,33 +782,37 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
     this.additionStateData = additionStateData
   }
 
-  // TODO: 处理重复代码，setProperty 和 setProperties  -> 公用代码提到 updateProperties 中？
-  @action setProperty(key: string, val: any): void {
+  private updateProperties(nextProperties: P, updateKeys: string[]): void {
     const preProperties = toJS(this.properties)
-    const nextProperties = {
-      ...preProperties,
-      [key]: formatData(val),
-    }
     this.properties = nextProperties
     this.setAttributes()
 
     // 触发更新节点 properties:change 的事件
     this.graphModel.eventCenter.emit(EventType.NODE_PROPERTIES_CHANGE, {
       id: this.id,
-      keys: [key],
+      keys: updateKeys,
       preProperties,
       properties: nextProperties,
     })
   }
 
+  @action setProperty(key: string, val: any): void {
+    const preProperties = toJS(this.properties)
+    const nextProperties = cloneDeep(preProperties)
+    // https://lodash.com/docs/4.17.15#set
+    // 使用 lodash 的 set 方法更新某个属性，可以支持 key 为 'a.b.c' 的情况
+    // TODO：待测试
+    set(nextProperties, key, formatData(val))
+
+    this.updateProperties(nextProperties, [key])
+  }
+
   @action setProperties(properties: Record<string, any>): void {
     const preProperties = toJS(this.properties)
     const nextProperties = {
       ...preProperties,
       ...formatData(properties),
     }
-    this.properties = nextProperties
-    this.setAttributes()
 
     const updateKeys: string[] = []
     mapKeys(properties, (val, key) => {
@@ -813,13 +825,7 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
       }
     })
 
-    // 触发更新节点 properties:change 的事件
-    this.graphModel.eventCenter.emit(EventType.NODE_PROPERTIES_CHANGE, {
-      id: this.id,
-      keys: updateKeys,
-      preProperties,
-      properties: nextProperties,
-    })
+    this.updateProperties(nextProperties, updateKeys)
   }
 
   @action deleteProperty(key: string): void {

package/src/model/node/CircleNodeModel.ts

@@ -37,6 +37,7 @@ export class CircleNodeModel<
     super(data, graphModel)
     // this.properties = data.properties || {}
 
+    this.initNodeData(data)
     this.setAttributes()
   }
 

package/src/model/node/DiamondNodeModel.ts

@@ -33,6 +33,7 @@ export class DiamondNodeModel<
     super(data, graphModel)
     // this.properties = data.properties || {}
 
+    this.initNodeData(data)
     this.setAttributes()
   }
 

package/src/model/node/EllipseNodeModel.ts

@@ -31,6 +31,7 @@ export class EllipseNodeModel<
     super(data, graphModel)
     // this.properties = data.properties || {}
 
+    this.initNodeData(data)
     this.setAttributes()
   }
 

package/src/model/node/PolygonNodeModel.ts

@@ -44,6 +44,7 @@ export class PolygonNodeModel<
     super(data, graphModel)
     // this.properties = data.properties || {}
 
+    this.initNodeData(data)
     this.setAttributes()
   }
 

package/src/model/node/RectNodeModel.ts

@@ -1,4 +1,4 @@
-import { cloneDeep } from 'lodash-es'
+import { cloneDeep, isNil } from 'lodash-es'
 import { observable } from 'mobx'
 import BaseNodeModel from './BaseNodeModel'
 import GraphModel from '../GraphModel'
@@ -28,6 +28,7 @@ export class RectNodeModel<
     // TODO：类字段初始化会覆盖 super、setAttributes 中设置的属性
     // this.properties = data.properties || {}
     // TODO: bug here, 上面更新 properties 会触发 setAttributes，下面再主动调用，会导致触发两次
+    this.initNodeData(data)
     this.setAttributes()
   }
 
@@ -35,10 +36,11 @@ export class RectNodeModel<
     super.setAttributes()
 
     const { width, height, radius } = this.properties
-    if (width) this.width = width
-    if (height) this.height = height
+    if (!isNil(width)) this.width = width
+    if (!isNil(height)) this.height = height
+
     // 矩形特有
-    if (radius) this.radius = radius
+    if (!isNil(radius)) this.radius = radius
   }
 
   getDefaultAnchor() {
@@ -50,6 +52,7 @@ export class RectNodeModel<
       { x: x - width / 2, y, id: `${this.id}_3` },
     ]
   }
+
   getNodeStyle() {
     const style = super.getNodeStyle()
     const { rect } = this.graphModel.theme

package/src/util/drag.ts

@@ -148,6 +148,8 @@ export class StepDrag {
       }
       this.isDragging = true
       // 为了让dragstart和drag不在同一个事件循环中，使drag事件放到下一个消息队列中。
+      // TODO: 放到下一个消息队列中是否会有延迟，比如
+      // 限制某个元素的拖拽范围，如果在dragstart中设置了拖拽范围，那么在drag中就会有延迟。
       Promise.resolve().then(() => {
         this.onDragging({
           deltaX,

package/src/view/Anchor.tsx

@@ -208,12 +208,12 @@ class Anchor extends Component<IProps, IState> {
 
   get relateEdges() {
     const {
-      graphModel: { getAnchorIncomingEdge, getAnchorOutcomingEdge },
+      graphModel: { getAnchorIncomingEdge, getAnchorOutgoingEdge },
       anchorData: { id },
     } = this.props
     return {
       incomingEdgeList: getAnchorIncomingEdge(id),
-      outcomingEdgeList: getAnchorOutcomingEdge(id),
+      outgoingEdgeList: getAnchorOutgoingEdge(id),
     }
   }
 

package/src/view/Graph.tsx

@@ -38,12 +38,13 @@ type ContainerStyle = {
 
 @observer
 class Graph extends Component<IGraphProps> {
-  handleResize = () => {
+  private handleResize = () => {
     this.props.graphModel.resize()
   }
+  private throttleResize = () => throttle(this.handleResize, 200)
 
   componentDidMount() {
-    window.addEventListener('resize', throttle(this.handleResize, 200))
+    window.addEventListener('resize', this.throttleResize)
   }
 
   componentDidUpdate() {
@@ -52,7 +53,7 @@ class Graph extends Component<IGraphProps> {
   }
 
   componentWillUnmount() {
-    window.removeEventListener('resize', throttle(this.handleResize, 200))
+    window.removeEventListener('resize', this.throttleResize)
   }
 
   getComponent(
@@ -91,6 +92,7 @@ class Graph extends Component<IGraphProps> {
     const { adjustEdge } = editConfigModel
     return (
       <div className="lf-graph" flow-id={graphModel.flowId}>
+        {/* 元素层 */}
         <CanvasOverlay graphModel={graphModel} dnd={dnd}>
           <g className="lf-base">
             {map(graphModel.sortElements, (nodeModel) =>
@@ -99,6 +101,7 @@ class Graph extends Component<IGraphProps> {
           </g>
           {fakeNode ? this.getComponent(fakeNode, graphModel) : ''}
         </CanvasOverlay>
+        {/* 虚线边框 */}
         <ModificationOverlay graphModel={graphModel}>
           <OutlineOverlay graphModel={graphModel} />
           {adjustEdge ? <BezierAdjustOverlay graphModel={graphModel} /> : ''}
@@ -108,10 +111,12 @@ class Graph extends Component<IGraphProps> {
             ''
           )}
         </ModificationOverlay>
+        {/* 工具层：插件 */}
         <ToolOverlay graphModel={graphModel} tool={tool} />
         {options.background && (
           <BackgroundOverlay background={options.background} />
         )}
+        {/* 画布网格 */}
         {grid && <Grid {...grid} graphModel={graphModel} />}
       </div>
     )