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

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":"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"}
+{"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.2",
   "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/LogicFlow.tsx

@@ -1,5 +1,5 @@
 import { ComponentType, createElement as h, render } from 'preact/compat'
-import { cloneDeep, forEach } from 'lodash-es'
+import { cloneDeep, forEach, indexOf } from 'lodash-es'
 import { observer } from '.'
 import { Options as LFOptions } from './options'
 import * as _Model from './model'
@@ -24,8 +24,9 @@ import History from './history'
 import { EventCallback, CallbackArgs, EventArgs } from './event/eventEmitter'
 import { ElementType, EventType, SegmentDirection } from './constant'
 import { initDefaultShortcut } from './keyboard/shortcut'
+
 import Extension = LogicFlow.Extension
-import RegisteredExtension = LogicFlow.RegisteredExtension
+import ExtensionConfig = LogicFlow.ExtensionConfig
 import ExtensionConstructor = LogicFlow.ExtensionConstructor
 import GraphConfigData = LogicFlow.GraphConfigData
 import NodeConfig = LogicFlow.NodeConfig
@@ -38,11 +39,13 @@ import RegisterParam = LogicFlow.RegisterParam
 import GraphElements = LogicFlow.GraphElements
 import Position = LogicFlow.Position
 import PointTuple = LogicFlow.PointTuple
-import ExtensionRender = LogicFlow.ExtensionRender
+import ExtensionRenderFunc = LogicFlow.ExtensionRenderFunc
 import RegisterElementFunc = LogicFlow.RegisterElementFunc
 import PropertiesType = LogicFlow.PropertiesType
 import BaseNodeModelCtor = LogicFlow.BaseNodeModelCtor
 import ClientPosition = LogicFlow.ClientPosition
+import ExtensionDefinition = LogicFlow.ExtensionDefinition
+import ExtensionType = LogicFlow.ExtensionType
 
 const pluginFlag = Symbol('plugin registered by Logicflow.use')
 
@@ -61,13 +64,13 @@ export class LogicFlow {
   tool: Tool
   snaplineModel?: SnaplineModel
 
-  components: ExtensionRender[] = []
+  components: ExtensionRenderFunc[] = []
   // 个性配置的插件，覆盖全局配置的插件
-  readonly plugins: ExtensionConstructor[]
+  readonly plugins: ExtensionType[]
   // 全局配置的插件，所有的LogicFlow示例都会使用
-  static extensions: Map<string, RegisteredExtension> = new Map()
+  static extensions: Map<string, ExtensionConfig> = new Map()
   // 插件扩展方法
-  extension: Record<string, Extension> = {}
+  extension: Record<string, Extension | ExtensionDefinition> = {}
 
   readonly width?: number // 只读：画布宽度
   readonly height?: number // 只读：画布高度
@@ -1292,19 +1295,14 @@ export class LogicFlow {
    * @param props
    */
   static use(
-    extension: ExtensionConstructor,
+    extension: ExtensionConstructor | ExtensionDefinition,
     props?: Record<string, unknown>,
   ): void {
-    let { pluginName } = extension
+    const { pluginName } = extension
     if (!pluginName) {
-      console.warn(
-        `请给插件${
-          extension.name || extension.constructor.name
-        }指定pluginName!`,
-      )
-      pluginName = extension.name // 兼容以前name的情况，1.0版本去掉。
+      throw new Error(`请给插件指定 pluginName!`)
     }
-    // TODO: 应该在何时进行插件的销毁
+    // TODO: 应该在何时进行插件的销毁？？？
     // const preExtension = this.extensions.get(pluginName)?.extension
     // preExtension?.destroy?.() // 该代码应该有问题，因为 preExtension 直接用的是 Constructor，没有实例化。无法访问实例方法 destroy
 
@@ -1316,19 +1314,26 @@ export class LogicFlow {
   }
 
   private installPlugins(disabledPlugins: string[] = []) {
+    const extensionsAddByUse = Array.from(
+      LogicFlow.extensions,
+      ([, extension]) => extension,
+    )
     // 安装插件，优先使用个性插件
-    const extensions = this.plugins ?? LogicFlow.extensions
-    extensions.forEach((ext: any) => {
-      let extension: any
-      let props = null
-      if (ext[pluginFlag]) {
+    const extensions = [...extensionsAddByUse, ...this.plugins]
+    forEach(extensions, (ext) => {
+      let extension: ExtensionConstructor | ExtensionDefinition
+      let props: Record<string, any> | undefined
+
+      if (pluginFlag in ext) {
         extension = ext.extension
         props = ext.props
       } else {
         extension = ext
       }
-      const pluginName = extension?.pluginName || extension?.name
-      if (disabledPlugins.indexOf(pluginName) === -1) {
+
+      const pluginName = extension?.pluginName
+
+      if (indexOf(disabledPlugins, pluginName) === -1) {
         this.installPlugin(extension, props)
       }
     })
@@ -1337,31 +1342,38 @@ export class LogicFlow {
   /**
    * 加载插件-内部方法
    */
-  private installPlugin(extension: Extension, props: any) {
-    if (typeof extension === 'object') {
-      const { pluginName, install, render: renderComponent } = extension
+  private installPlugin(
+    extension: ExtensionConstructor | ExtensionDefinition,
+    props?: Record<string, any>,
+  ) {
+    if ('pluginName' in extension && 'install' in extension) {
+      const { pluginName, install, render } = extension
       if (pluginName) {
         install && install.call(extension, this, LogicFlow)
-        renderComponent && this.components.push(renderComponent.bind(extension))
+        render && this.components.push(render.bind(extension))
         this.extension[pluginName] = extension
       }
       return
     }
-    const ExtensionCls = extension as ExtensionConstructor
-    const extensionInstance = new ExtensionCls({
+
+    const ExtensionCtor = extension as ExtensionConstructor
+    const extensionIns = new ExtensionCtor({
       lf: this,
       LogicFlow,
-      options: this.options.pluginsOptions ?? {},
       props,
+      options: this.options.pluginsOptions ?? {},
     })
-    extensionInstance.render &&
-      this.components.push(extensionInstance.render.bind(extensionInstance))
-    this.extension[ExtensionCls.pluginName] = extensionInstance
+    extensionIns.render &&
+      this.components.push(extensionIns.render.bind(extensionIns))
+    this.extension[ExtensionCtor.pluginName] = extensionIns
   }
 }
 
 // Option
 export namespace LogicFlow {
+  /**
+   * LogicFlow init Options
+   */
   export interface Options extends LFOptions.Common {}
 
   export type DomAttributes = {
@@ -1376,6 +1388,7 @@ export namespace LogicFlow {
     ry?: number
   } & Record<string, any>
   export type AttributesType = Record<string, any>
+
   export type VectorData = {
     deltaX: number
     deltaY: number
@@ -1390,7 +1403,7 @@ export namespace LogicFlow {
   }
   export type Point = {
     id?: string
-    [key: string]: any
+    [key: string]: any // TODO: 确认这个属性是干什么的呢？是有可以移除
   } & Position
   export type PointTuple = [number, number]
   export type ClientPosition = {
@@ -1422,7 +1435,7 @@ export namespace LogicFlow {
     value: string
     editable?: boolean
     draggable?: boolean
-  } & Point
+  } & Position
 
   export type AppendConfig = {
     startIndex: number
@@ -1755,8 +1768,14 @@ export namespace LogicFlow {
 
 // Render or Functions
 export namespace LogicFlow {
-  type FocusOnById = { id: string; coordinate?: never }
-  type FocusOnByCoordinate = { id?: string; coordinate: Position }
+  type FocusOnById = {
+    id: string
+    coordinate?: never
+  }
+  type FocusOnByCoordinate = {
+    id?: string
+    coordinate: Position
+  }
   export type FocusOnArgsType = FocusOnById | FocusOnByCoordinate
 
   export type BaseNodeModelCtor = typeof BaseNodeModel
@@ -1794,32 +1813,43 @@ export namespace LogicFlow {
     new (options: LFOptions.Definition): LogicFlow
   }
 
-  export type RegisteredExtension = {
+  /**
+   * Extension 插件类型
+   */
+  export type ExtensionType = ExtensionConstructor | ExtensionDefinition
+  export type ExtensionConfig = {
     [pluginFlag]: symbol
-    extension: ExtensionConstructor
-    props?: Record<string, unknown>
+    extension: ExtensionType
+    props?: Record<string, any> // TODO: 看这类型是否可以更精确
   }
 
-  export type ExtensionProps = {
+  export type IExtensionProps = {
     lf: LogicFlow
     LogicFlow: LogicFlowConstructor
-    options: Record<string, unknown>
     props?: Record<string, unknown>
+    options: Record<string, unknown>
   }
 
   export interface ExtensionConstructor {
     pluginName: string
-
-    new (props: ExtensionProps): Extension
+    new (props: IExtensionProps): Extension
   }
 
-  export type ExtensionRender = (lf: LogicFlow, container: HTMLElement) => void
+  export type ExtensionRenderFunc = (
+    lf: LogicFlow,
+    container: HTMLElement,
+  ) => void
+
+  // 对象形式定义的插件
+  export type ExtensionDefinition = {
+    pluginName: string
+    install?: (lf: LogicFlow, LFCtor: LogicFlowConstructor) => void
+    render?: ExtensionRenderFunc
+  }
 
   export interface Extension {
-    readonly pluginName?: string // 插件名称，只用用于插件覆盖和细粒度控制加载哪些插件
-    install?: (lf: LogicFlow, logicFlow: LogicFlowConstructor) => void
-    render?: ExtensionRender
-    destroy?: () => void
+    render: ExtensionRenderFunc
+    destroy?: () => void // TODO: 确认插件销毁函数参数类型
   }
 }
 

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({