@logicflow/core 2.0.0-beta.0 → 2.0.0-beta.1

package/lib/view/overlay/Grid.d.ts

@@ -1,30 +1,45 @@
 import { Component } from 'preact/compat';
 import { GraphModel } from '../../model';
-export type GridOptions = {
-    /**
-     * 网格格子间距
-     */
-    size?: number;
-    /**
-     * 网格是否可见
-     */
-    visible?: boolean;
+import GridOptions = Grid.GridOptions;
+type IProps = GridOptions & {
     graphModel: GraphModel;
-    /**
-     * 网格类型
-     * 'dot' || 'mesh'
-     */
-    type?: string;
-    config?: {
-        color: string;
-        thickness?: number;
-    };
 };
-type IProps = GridOptions;
 export declare class Grid extends Component<IProps> {
     readonly id: string;
     renderDot(): import("preact/compat").JSX.Element;
     renderMesh(): import("preact/compat").JSX.Element;
     render(): import("preact/compat").JSX.Element;
 }
-export default Grid;
+export declare namespace Grid {
+    type GridOptions = {
+        /**
+         * 网格格子间距
+         */
+        size?: number;
+        /**
+         * 网格是否可见
+         */
+        visible?: boolean;
+        /**
+         * 网格类型
+         * - `dot` 点状网格
+         * - `mesh` 交叉线网格
+         */
+        type?: 'dot' | 'mesh';
+        config?: {
+            /**
+             * 网格的颜色
+             */
+            color: string;
+            /**
+             * 网格的宽度
+             * - 对于 `dot` 点状网格，表示点的大小
+             * - 对于 `mesh` 交叉线网格，表示线的宽度
+             */
+            thickness?: number;
+        };
+    };
+    const defaultProps: GridOptions;
+    function getGridOptions(options: number | boolean | GridOptions): GridOptions;
+}
+export {};

package/lib/view/overlay/Grid.js

@@ -49,6 +49,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Grid = void 0;
 var jsx_runtime_1 = require("preact/jsx-runtime");
 var compat_1 = require("preact/compat");
+var lodash_es_1 = require("lodash-es");
 var __1 = require("../..");
 var util_1 = require("../../util");
 var constant_1 = require("../../constant");
@@ -63,30 +64,24 @@ var Grid = /** @class */ (function (_super) {
     Grid.prototype.renderDot = function () {
         var _a = this.props, config = _a.config, _b = _a.size, size = _b === void 0 ? 1 : _b, visible = _a.visible;
         var _c = config !== null && config !== void 0 ? config : {}, color = _c.color, _d = _c.thickness, thickness = _d === void 0 ? 2 : _d;
-        var length = Math.min(Math.max(1.5, thickness), size / 2); // 2 < length < size /2
-        var opacity = 1;
-        if (!visible) {
-            opacity = 0;
-        }
-        /* eslint-disable-next-line */
-        return ((0, jsx_runtime_1.jsx)("rect", { width: length, height: length, rx: length / 2, ry: length / 2, fill: color, opacity: opacity }));
+        // 对于点状网格，点的半径不能大于网格大小的四分之一
+        var radius = Math.min(Math.max(2, thickness), size / 4);
+        var opacity = visible ? 1 : 0;
+        return ((0, jsx_runtime_1.jsxs)("g", { fill: color, opacity: opacity, children: [(0, jsx_runtime_1.jsx)("circle", { cx: 0, cy: 0, r: radius / 2 }), (0, jsx_runtime_1.jsx)("circle", { cx: 0, cy: size, r: radius / 2 }), (0, jsx_runtime_1.jsx)("circle", { cx: size, cy: 0, r: radius / 2 }), (0, jsx_runtime_1.jsx)("circle", { cx: size, cy: size, r: radius / 2 })] }));
     };
     // 网格类型为交叉线
     // todo: 采用背景缩放的方式，实现更好的体验
     Grid.prototype.renderMesh = function () {
         var _a = this.props, config = _a.config, _b = _a.size, size = _b === void 0 ? 1 : _b, visible = _a.visible;
         var _c = config !== null && config !== void 0 ? config : {}, color = _c.color, _d = _c.thickness, thickness = _d === void 0 ? 1 : _d;
-        var strokeWidth = Math.min(Math.max(1, thickness), size / 2); // 1 < strokeWidth < size /2
-        var d = "M ".concat(size, " 0 H0 M0 0 V0 ").concat(size);
-        var opacity = 1;
-        if (!visible) {
-            opacity = 0;
-        }
-        return ((0, jsx_runtime_1.jsx)("path", { d: d, stroke: color, strokeWidth: strokeWidth, opacity: opacity }));
+        // 对于交叉线网格，线的宽度不能大于网格大小的一半
+        var strokeWidth = Math.min(Math.max(1, thickness), size / 2);
+        var d = "M 0 0 H ".concat(size, " V ").concat(size, " H 0 Z");
+        var opacity = visible ? 1 : 0;
+        return ((0, jsx_runtime_1.jsx)("path", { d: d, stroke: color, strokeWidth: strokeWidth, opacity: opacity, fill: "transparent" }));
     };
     Grid.prototype.render = function () {
-        // TODO 生成网格️️️✔、网格支持 options（size）✔
-        var _a = this.props, type = _a.type, size = _a.size, transformModel = _a.graphModel.transformModel;
+        var _a = this.props, type = _a.type, _b = _a.size, size = _b === void 0 ? 1 : _b, transformModel = _a.graphModel.transformModel;
         var SCALE_X = transformModel.SCALE_X, SKEW_Y = transformModel.SKEW_Y, SKEW_X = transformModel.SKEW_X, SCALE_Y = transformModel.SCALE_Y, TRANSLATE_X = transformModel.TRANSLATE_X, TRANSLATE_Y = transformModel.TRANSLATE_Y;
         var matrixString = [
             SCALE_X,
@@ -108,14 +103,28 @@ var Grid = /** @class */ (function (_super) {
     return Grid;
 }(compat_1.Component));
 exports.Grid = Grid;
-Grid.defaultProps = {
-    size: constant_1.DEFAULT_GRID_SIZE,
-    visible: true,
-    type: 'dot',
-    config: {
-        color: '#ababab',
-        thickness: 1,
-    },
-};
-exports.default = Grid;
+(function (Grid) {
+    Grid.defaultProps = {
+        size: constant_1.DEFAULT_GRID_SIZE,
+        visible: true,
+        type: 'dot',
+        config: {
+            color: '#ababab',
+            thickness: 1,
+        },
+    };
+    function getGridOptions(options) {
+        var defaultOptions = (0, lodash_es_1.cloneDeep)(Grid.defaultProps);
+        if (typeof options === 'number') {
+            return (0, lodash_es_1.assign)(defaultOptions, { size: options });
+        }
+        else if (typeof options === 'boolean') {
+            return (0, lodash_es_1.assign)(defaultOptions, { visible: options });
+        }
+        else {
+            return (0, lodash_es_1.assign)(defaultOptions, options);
+        }
+    }
+    Grid.getGridOptions = getGridOptions;
+})(Grid || (exports.Grid = Grid = {}));
 //# sourceMappingURL=Grid.js.map

package/lib/view/overlay/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../src/view/overlay/Grid.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wCAAyC;AACzC,2BAAgC;AAChC,mCAAuC;AAEvC,2CAAkD;AA2BlD;IAA0B,wBAAiB;IAA3C;;QACW,QAAE,GAAG,IAAA,iBAAU,GAAE,CAAA;;IA0F5B,CAAC;IAxFC,UAAU;IACV,wBAAS,GAAT;QACQ,IAAA,KAAgC,IAAI,CAAC,KAAK,EAAxC,MAAM,YAAA,EAAE,YAAQ,EAAR,IAAI,mBAAG,CAAC,KAAA,EAAE,OAAO,aAAe,CAAA;QAE1C,IAAA,KAA2B,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAArC,KAAK,WAAA,EAAE,iBAAa,EAAb,SAAS,mBAAG,CAAC,KAAiB,CAAA;QAE7C,IAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,EAAE,IAAI,GAAG,CAAC,CAAC,CAAA,CAAC,uBAAuB;QACnF,IAAI,OAAO,GAAG,CAAC,CAAA;QACf,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,GAAG,CAAC,CAAA;QACb,CAAC;QACD,8BAA8B;QAC9B,OAAO,CACL,iCACE,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,MAAM,GAAG,CAAC,EACd,EAAE,EAAE,MAAM,GAAG,CAAC,EACd,IAAI,EAAE,KAAK,EACX,OAAO,EAAE,OAAO,GAChB,CACH,CAAA;IACH,CAAC;IAED,WAAW;IACX,0BAA0B;IAC1B,yBAAU,GAAV;QACQ,IAAA,KAAgC,IAAI,CAAC,KAAK,EAAxC,MAAM,YAAA,EAAE,YAAQ,EAAR,IAAI,mBAAG,CAAC,KAAA,EAAE,OAAO,aAAe,CAAA;QAC1C,IAAA,KAA2B,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAArC,KAAK,WAAA,EAAE,iBAAa,EAAb,SAAS,mBAAG,CAAC,KAAiB,CAAA;QAC7C,IAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC,EAAE,IAAI,GAAG,CAAC,CAAC,CAAA,CAAC,4BAA4B;QAC3F,IAAM,CAAC,GAAG,YAAK,IAAI,2BAAiB,IAAI,CAAE,CAAA;QAC1C,IAAI,OAAO,GAAG,CAAC,CAAA;QACf,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,GAAG,CAAC,CAAA;QACb,CAAC;QACD,OAAO,CACL,iCAAM,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,GAAI,CAC1E,CAAA;IACH,CAAC;IAED,qBAAM,GAAN;QACE,oCAAoC;QAC9B,IAAA,KAIF,IAAI,CAAC,KAAK,EAHZ,IAAI,UAAA,EACJ,IAAI,UAAA,EACU,cAAc,+BAChB,CAAA;QACN,IAAA,OAAO,GACb,cAAc,QADD,EAAE,MAAM,GACrB,cAAc,OADO,EAAE,MAAM,GAC7B,cAAc,OADe,EAAE,OAAO,GACtC,cAAc,QADwB,EAAE,WAAW,GACnD,cAAc,YADqC,EAAE,WAAW,GAChE,cAAc,YADkD,CAClD;QAChB,IAAM,YAAY,GAAG;YACnB,OAAO;YACP,MAAM;YACN,MAAM;YACN,OAAO;YACP,WAAW;YACX,WAAW;SACZ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QACX,IAAM,SAAS,GAAG,iBAAU,YAAY,MAAG,CAAA;QAC3C,4BAA4B;QAC5B,iCAAiC;QACjC,KAAK;QACL,OAAO,CACL,gCAAK,SAAS,EAAC,SAAS,YACtB,iCACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,KAAK,EACb,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,aAEb,2CACE,qCACE,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,YAAY,EAAC,gBAAgB,EAC7B,gBAAgB,EAAE,SAAS,EAC3B,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,aAEX,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,SAAS,EAAE,EAClC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,UAAU,EAAE,IAC7B,GACL,EACP,iCAAM,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAE,eAAQ,IAAI,CAAC,EAAE,MAAG,GAAI,IACzD,GACF,CACP,CAAA;IACH,CAAC;IA1FU,IAAI;QADhB,YAAQ;OACI,IAAI,CA2FhB;IAAD,WAAC;CAAA,AA3FD,CAA0B,kBAAS,GA2FlC;AA3FY,oBAAI;AA6FjB,IAAI,CAAC,YAAY,GAAG;IAClB,IAAI,EAAE,4BAAiB;IACvB,OAAO,EAAE,IAAI;IACb,IAAI,EAAE,KAAK;IACX,MAAM,EAAE;QACN,KAAK,EAAE,SAAS;QAChB,SAAS,EAAE,CAAC;KACb;CACF,CAAA;AAED,kBAAe,IAAI,CAAA"}
+{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../src/view/overlay/Grid.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@logicflow/core",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.1",
   "description": "LogicFlow, help you quickly create flowcharts",
-  "main": "dist/index.js",
+  "main": "lib/index.js",
   "module": "es/index.js",
   "types": "lib/index.d.ts",
-  "unpkg": "dist/index.js",
-  "jsdelivr": "dist/index.js",
+  "unpkg": "dist/index.min.js",
+  "jsdelivr": "dist/index.min.js",
   "homepage": "https://site.logic-flow.cn",
   "repository": {
     "type": "git",

package/src/model/edge/BaseEdgeModel.ts

@@ -107,6 +107,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
     this.initEdgeData(data)
     this.setAttributes()
   }
+
   /**
    * 初始化边数据
    * @overridable 支持重写
@@ -145,15 +146,18 @@ export class BaseEdgeModel implements IBaseEdgeModel {
     // 文本位置依赖于边上的所有拐点
     this.formatText(data)
   }
+
   /**
    * 设置model属性
    * @overridable 支持重写
    * 每次properties发生变化会触发
    */
   setAttributes() {}
+
   createId(): string | null {
     return null
   }
+
   /**
    * 自定义边样式
    *
@@ -166,6 +170,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
       ...this.style,
     }
   }
+
   /**
    * 自定义边调整点样式
    *
@@ -177,6 +182,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
       ...this.graphModel.theme.edgeAdjust,
     }
   }
+
   /**
    * 自定义边文本样式
    *
@@ -187,6 +193,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
     const { edgeText } = this.graphModel.theme
     return cloneDeep(edgeText)
   }
+
   /**
    * 自定义边动画样式
    *
@@ -204,6 +211,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
     const { edgeAnimation } = this.graphModel.theme
     return cloneDeep(edgeAnimation)
   }
+
   /**
    * 自定义边箭头样式
    *
@@ -229,6 +237,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
       ...arrow,
     }
   }
+
   /**
    * 自定义边被选中时展示其范围的矩形框样式
    *
@@ -247,6 +256,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
     const { outline } = graphModel.theme
     return cloneDeep(outline)
   }
+
   /**
    * 重新自定义文本位置
    *
@@ -258,18 +268,21 @@ export class BaseEdgeModel implements IBaseEdgeModel {
       y: 0,
     }
   }
+
   /**
    * 边的前一个节点
    */
   @computed get sourceNode() {
     return this.graphModel?.nodesMap[this.sourceNodeId]?.model
   }
+
   /**
    * 边的后一个节点
    */
   @computed get targetNode() {
     return this.graphModel?.nodesMap[this.targetNodeId]?.model
   }
+
   @computed get textPosition(): Point {
     return this.getTextPosition()
   }
@@ -346,12 +359,14 @@ export class BaseEdgeModel implements IBaseEdgeModel {
     })
     return position
   }
+
   /**
    * 获取当前边的properties
    */
   getProperties() {
     return toJS(this.properties)
   }
+
   /**
    * 获取被保存时返回的数据
    *
@@ -380,6 +395,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
     }
     return data
   }
+
   /**
    * 获取边的数据
    *
@@ -391,6 +407,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
   getHistoryData(): EdgeData {
     return this.getData()
   }
+
   /**
    * 设置边的属性，会触发重新渲染
    * @param key 属性名
@@ -401,6 +418,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
     this.properties[key] = formatData(val)
     this.setAttributes()
   }
+
   /**
    * 删除边的属性，会触发重新渲染
    * @param key 属性名
@@ -410,6 +428,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
     delete this.properties[key]
     this.setAttributes()
   }
+
   /**
    * 设置边的属性，会触发重新渲染
    * @param key 属性名
@@ -423,6 +442,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
     }
     this.setAttributes()
   }
+
   /**
    * 修改边的id
    */
@@ -437,6 +457,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
     }
     this.id = id
   }
+
   /**
    * 设置边样式，用于插件开发时跳过自定义边的渲染。大多数情况下，不需要使用此方法。
    * 如果需要设置边的样式，请使用 getEdgeStyle 方法自定义边样式。
@@ -448,6 +469,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
       [key]: formatData(val),
     }
   }
+
   /**
    * 设置边样式，用于插件开发时跳过自定义边的渲染。大多数情况下，不需要使用此方法。
    * 如果需要设置边的样式，请使用 getEdgeStyle 方法自定义边样式。
@@ -459,6 +481,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
       ...formatData(styles),
     }
   }
+
   /**
    * 设置边样式，用于插件开发时跳过自定义边的渲染。大多数情况下，不需要使用此方法。
    * 如果需要设置边的样式，请使用 getEdgeStyle 方法自定义边样式。
@@ -497,6 +520,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
       }
     }
   }
+
   /**
    * 重置文本位置
    */
@@ -505,6 +529,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
     this.text.x = x
     this.text.y = y
   }
+
   /**
    * 移动边上的文本
    */
@@ -520,6 +545,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
       }
     }
   }
+
   /**
    * 设置文本位置和值
    */
@@ -528,6 +554,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
       assign(this.text, textConfig)
     }
   }
+
   /**
    * 更新文本的值
    */
@@ -537,6 +564,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
       value,
     }
   }
+
   /**
    * 内部方法，计算边的起点和终点和其对于的锚点Id
    */
@@ -602,6 +630,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
   setHitable(flag = true): void {
     this.isHitable = flag
   }
+
   @action
   setHittable(flag = true): void {
     this.isHittable = flag
@@ -664,16 +693,19 @@ export class BaseEdgeModel implements IBaseEdgeModel {
   updateAttributes(attributes) {
     assign(this, attributes)
   }
+
   // 获取边调整的起点
   @action
   getAdjustStart() {
     return this.startPoint
   }
+
   // 获取边调整的终点
   @action
   getAdjustEnd() {
     return this.endPoint
   }
+
   // 起终点拖拽调整过程中，进行直线路径更新
   @action
   updateAfterAdjustStartAndEnd({

package/src/options.ts

@@ -1,9 +1,11 @@
 import { assign } from 'lodash-es'
 import { createElement as h } from 'preact/compat'
 import LogicFlow from './LogicFlow'
-import { GraphModel } from './model'
 import { KeyboardDef } from './keyboard'
-import { DEFAULT_GRID_SIZE, OverlapMode } from './constant'
+import { OverlapMode } from './constant'
+import { Grid } from './view/overlay'
+
+import GridOptions = Grid.GridOptions
 
 export namespace Options {
   import NodeData = LogicFlow.NodeData
@@ -25,19 +27,6 @@ export namespace Options {
     // TODO: 根据具体情况添加各种自定义样式
     [key: string]: any
   }
-  export type GridOptions = {
-    // 网格格子间距
-    size?: number
-    // 网格是否可见
-    visible?: boolean
-    graphModel?: GraphModel
-    // 网格类型
-    type?: 'dot' | 'mesh'
-    config?: {
-      color: string
-      thickness?: number
-    }
-  }
 
   export type AnimationConfig = {
     node: boolean
@@ -68,6 +57,9 @@ export namespace Options {
     width?: number
     height?: number
     background?: false | BackgroundConfig
+    /**
+     * Grid 网格配置
+     */
     grid?: number | boolean | GridOptions
 
     partial?: boolean
@@ -117,7 +109,7 @@ export namespace Options {
 
 export namespace Options {
   export function get(options: Partial<Manual>) {
-    const { grid, ...others } = options
+    const { ...others } = options
     const container = options.container
     if (container != null) {
       if (options.width == null) {
@@ -134,29 +126,6 @@ export namespace Options {
 
     const result = assign({}, defaults, others) as Options.Definition
 
-    const defaultGrid: GridOptions = {
-      size: DEFAULT_GRID_SIZE,
-      type: 'dot',
-      visible: true,
-      config: {
-        color: '#ababab',
-        thickness: 1,
-      },
-    }
-    if (typeof grid === 'number') {
-      result.grid = {
-        ...defaultGrid,
-        size: grid,
-      }
-    } else if (typeof grid === 'boolean') {
-      result.grid = {
-        ...defaultGrid,
-        visible: grid,
-      }
-    } else {
-      result.grid = { ...defaultGrid, ...grid }
-    }
-
     return result
   }
 }

package/src/view/Graph.tsx

@@ -68,7 +68,7 @@ class Graph extends Component<IGraphProps> {
     if (options.height) {
       style.height = `${graphModel.height}px`
     }
-    const grid = options.grid as any // TODO: fix type
+    const grid = options.grid && Grid.getGridOptions(options.grid)
     const { fakeNode, editConfigModel } = graphModel
     const { adjustEdge } = editConfigModel
 
@@ -95,7 +95,7 @@ class Graph extends Component<IGraphProps> {
         {options.background && (
           <BackgroundOverlay background={options.background} />
         )}
-        {options.grid && <Grid {...grid} graphModel={graphModel} />}
+        {grid && <Grid {...grid} graphModel={graphModel} />}
       </div>
     )
   }