@logicflow/core 2.2.0-alpha.1 → 2.2.0-alpha.3

package/lib/view/overlay/Grid.js

@@ -20,12 +20,38 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 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 gridConfig_1 = require("./gridConfig");
 var util_1 = require("../../util");
 var constant_1 = require("../../constant");
 var Grid = /** @class */ (function (_super) {
@@ -45,21 +71,64 @@ var Grid = /** @class */ (function (_super) {
         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 })] }));
     };
+    // 计算与 size 整除的虚线周期，使边长能被 (dash + gap) 完整分割
+    Grid.prototype.getDashArrayForSize = function (dashCfg) {
+        var _a;
+        // 若提供了直接可用的 pattern，则优先使用
+        var direct = (_a = dashCfg === null || dashCfg === void 0 ? void 0 : dashCfg.pattern) === null || _a === void 0 ? void 0 : _a.filter(function (n) { return typeof n === 'number' && n > 0; });
+        return (direct === null || direct === void 0 ? void 0 : direct.join(',')) || '2,1';
+    };
+    // 计算一个周期内的最大加粗索引（作为周期大小）
+    Grid.prototype.getPeriod = function (advanced) {
+        var list = Array.isArray(advanced === null || advanced === void 0 ? void 0 : advanced.boldIndices)
+            ? advanced.boldIndices.filter(function (n) { return typeof n === 'number' && n > 0; })
+            : [];
+        return list.length ? Math.max.apply(Math, __spreadArray([], __read(list), false)) : 0;
+    };
+    // 计算加粗线宽，优先使用自定义；否则根据周期与厚度估算
+    Grid.prototype.getBoldStrokeWidth = function (advanced, size, thickness, period) {
+        if (typeof (advanced === null || advanced === void 0 ? void 0 : advanced.customBoldWidth) === 'number')
+            return advanced.customBoldWidth;
+        var baseThickness = Math.max(1, thickness !== null && thickness !== void 0 ? thickness : 1);
+        var p = Math.max(1, period !== null && period !== void 0 ? period : this.getPeriod(advanced));
+        return Math.min(baseThickness, (size * p) / 2) / 2;
+    };
+    // 渲染 mesh 类型四条边的虚线，减少重复代码
+    Grid.prototype.renderMeshEdgeLines = function (size, color, strokeWidth, opacity, dash) {
+        var segments = [
+            { d: "M 0 0 H ".concat(size) },
+            { d: "M 0 ".concat(size, " H ").concat(size) },
+            { d: "M 0 0 V ".concat(size) },
+            { d: "M ".concat(size, " 0 V ").concat(size) },
+        ];
+        return ((0, jsx_runtime_1.jsx)("g", { opacity: opacity, fill: "transparent", children: segments.map(function (seg) { return ((0, jsx_runtime_1.jsx)("path", { d: seg.d, stroke: color, strokeWidth: strokeWidth / 2, strokeDasharray: dash, strokeLinecap: "butt", fill: "transparent" })); }) }));
+    };
     // 网格类型为交叉线
     // todo: 采用背景缩放的方式，实现更好的体验
     Grid.prototype.renderMesh = function () {
-        var _a = this.gridOptions, 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 _a, _b;
+        var _c = this.gridOptions, config = _c.config, _d = _c.size, size = _d === void 0 ? 1 : _d, visible = _c.visible, majorBold = _c.majorBold;
+        var advanced = (0, gridConfig_1.mergeMajorBoldConfig)(majorBold).config;
+        var baseOpacity = advanced.opacity;
+        var color = ((_a = config === null || config === void 0 ? void 0 : config.color) !== null && _a !== void 0 ? _a : '#D7DEEB');
+        var thickness = ((_b = config === null || config === void 0 ? void 0 : config.thickness) !== null && _b !== void 0 ? _b : 1);
         // 对于交叉线网格，线的宽度不能大于网格大小的一半
         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 / 2, opacity: opacity, fill: "transparent" }));
+        var opacity = visible ? baseOpacity : 0;
+        // 根据 size 自动计算合适的 dash/gap 周期，使 size 能被 (dash + gap) 整除
+        var dash = majorBold === false
+            ? undefined
+            : this.getDashArrayForSize(advanced.dashArrayConfig);
+        return this.renderMeshEdgeLines(size, color, strokeWidth, opacity, dash);
     };
     Grid.prototype.render = function () {
-        var _a = this.props.graphModel, transformModel = _a.transformModel, grid = _a.grid;
+        var _this = this;
+        var _a, _b, _c;
+        var _d = this.props.graphModel, transformModel = _d.transformModel, grid = _d.grid;
         this.gridOptions = grid;
-        var _b = this.gridOptions, type = _b.type, _c = _b.size, size = _c === void 0 ? 1 : _c;
+        var _e = this.gridOptions, type = _e.type, _f = _e.config, config = _f === void 0 ? {} : _f, _g = _e.size, size = _g === void 0 ? 1 : _g, majorBold = _e.majorBold;
+        var showMajorBold = majorBold !== false && !(0, lodash_es_1.isNil)(majorBold);
+        var advanced = (0, gridConfig_1.mergeMajorBoldConfig)(majorBold).config;
         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,
@@ -70,10 +139,12 @@ var Grid = /** @class */ (function (_super) {
             TRANSLATE_Y,
         ].join(',');
         var transform = "matrix(".concat(matrixString, ")");
-        // const transitionStyle = {
-        //   transition: 'all 0.1s ease',
-        // };
-        return ((0, jsx_runtime_1.jsx)("div", { className: "lf-grid", children: (0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("pattern", { id: this.id, patternUnits: "userSpaceOnUse", patternTransform: transform, x: "0", y: "0", width: size, height: size, children: [type === 'dot' && this.renderDot(), type === 'mesh' && this.renderMesh()] }) }), (0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", fill: "url(#".concat(this.id, ")") })] }) }));
+        var radius = Math.min(Math.max(2, (_a = config.thickness) !== null && _a !== void 0 ? _a : 1), size / 4);
+        var opacity = showMajorBold ? advanced.opacity : 1;
+        return ((0, jsx_runtime_1.jsx)("div", { className: "lf-grid", children: (0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", children: [(0, jsx_runtime_1.jsxs)("defs", { children: [(0, jsx_runtime_1.jsxs)("pattern", { id: this.id, patternUnits: "userSpaceOnUse", patternTransform: transform, x: "0", y: "0", width: size, height: size, children: [type === 'dot' && this.renderDot(), type === 'mesh' && this.renderMesh()] }), type === 'dot' && advanced.boldIndices.length ? ((0, jsx_runtime_1.jsx)("pattern", { id: "".concat(this.id, "-dot-major"), patternUnits: "userSpaceOnUse", patternTransform: transform, x: "0", y: "0", width: size * this.getPeriod(advanced), height: size * this.getPeriod(advanced), children: (0, jsx_runtime_1.jsxs)("g", { fill: (_c = (_b = this.gridOptions.config) === null || _b === void 0 ? void 0 : _b.color) !== null && _c !== void 0 ? _c : '#D7DEEB', opacity: this.gridOptions.visible ? opacity : 0, children: [(0, jsx_runtime_1.jsx)("circle", { cx: 0, cy: 0, r: (radius * 1.5) / 2 }), (0, jsx_runtime_1.jsx)("circle", { cx: size * this.getPeriod(advanced), cy: 0, r: (radius * 1.5) / 2 }), (0, jsx_runtime_1.jsx)("circle", { cx: 0, cy: size * this.getPeriod(advanced), r: (radius * 1.5) / 2 }), (0, jsx_runtime_1.jsx)("circle", { cx: size * this.getPeriod(advanced), cy: size * this.getPeriod(advanced), r: (radius * 1.5) / 2 })] }) })) : null, type === 'mesh' && advanced.boldIndices.length ? ((0, jsx_runtime_1.jsx)("pattern", { id: "".concat(this.id, "-major"), patternUnits: "userSpaceOnUse", patternTransform: transform, x: "0", y: "0", width: size * this.getPeriod(advanced), height: size * this.getPeriod(advanced), children: advanced.boldIndices.map(function (i) {
+                                    var _a, _b, _c, _d, _e, _f;
+                                    return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("path", { d: "M ".concat(size * i, " 0 V ").concat(size * _this.getPeriod(advanced)), stroke: (_b = (_a = _this.gridOptions.config) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : '#D7DEEB', strokeWidth: _this.getBoldStrokeWidth(advanced, size, ((_c = _this.gridOptions.config) !== null && _c !== void 0 ? _c : {}).thickness, _this.getPeriod(advanced)), opacity: _this.gridOptions.visible ? opacity : 0, fill: "transparent" }), (0, jsx_runtime_1.jsx)("path", { d: "M 0 ".concat(size * i, " H ").concat(size * _this.getPeriod(advanced)), stroke: (_e = (_d = _this.gridOptions.config) === null || _d === void 0 ? void 0 : _d.color) !== null && _e !== void 0 ? _e : '#D7DEEB', strokeWidth: _this.getBoldStrokeWidth(advanced, size, ((_f = _this.gridOptions.config) !== null && _f !== void 0 ? _f : {}).thickness, _this.getPeriod(advanced)), opacity: _this.gridOptions.visible ? opacity : 0, fill: "transparent" })] }));
+                                }) })) : null] }), (0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", fill: "url(#".concat(this.id, ")") }), type === 'dot' && showMajorBold && advanced.boldIndices.length ? ((0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", fill: "url(#".concat(this.id, "-dot-major)") })) : null, type === 'mesh' && showMajorBold && advanced.boldIndices.length ? ((0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", fill: "url(#".concat(this.id, "-major)") })) : null] }) }));
     };
     Grid = __decorate([
         __1.observer
@@ -82,17 +153,8 @@ var Grid = /** @class */ (function (_super) {
 }(compat_1.Component));
 exports.Grid = 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);
+        var defaultOptions = (0, lodash_es_1.cloneDeep)(constant_1.defaultGrid);
         if (typeof options === 'number') {
             return (0, lodash_es_1.assign)(defaultOptions, { size: options });
         }

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

@@ -4,6 +4,7 @@ type IProps = {
     graphModel: GraphModel;
 };
 export declare class OutlineOverlay extends Component<IProps> {
+    private renderRectOutline;
     getNodesOutline(): any;
     getEdgeOutline(): any;
     getLineOutline(line: LineEdgeModel): import("preact/compat").JSX.Element;

package/lib/view/overlay/OutlineOverlay.js

@@ -44,6 +44,12 @@ var OutlineOverlay = /** @class */ (function (_super) {
     function OutlineOverlay() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    // 通用渲染函数：根据点集合与样式计算包围盒并返回矩形轮廓
+    OutlineOverlay.prototype.renderRectOutline = function (pointsList, style, className, defaultOffsets) {
+        var _a = (style || {}), _b = _a.widthOffset, widthOffset = _b === void 0 ? defaultOffsets.widthOffset : _b, _c = _a.heightOffset, heightOffset = _c === void 0 ? defaultOffsets.heightOffset : _c;
+        var _d = (0, util_1.getBBoxOfPoints)(pointsList, widthOffset, heightOffset), x = _d.x, y = _d.y, width = _d.width, height = _d.height;
+        return ((0, jsx_runtime_1.jsx)(shape_1.Rect, __assign({ className: className, x: x, y: y, width: width, height: height }, style)));
+    };
     // 节点outline
     OutlineOverlay.prototype.getNodesOutline = function () {
         var graphModel = this.props.graphModel;
@@ -65,11 +71,8 @@ var OutlineOverlay = /** @class */ (function (_super) {
                         var hoverStyle = style_1.hover;
                         attributes_1 = __assign(__assign({}, attributes_1), hoverStyle);
                     }
-                    nodeOutline.push((0, jsx_runtime_1.jsx)(shape_1.Rect, __assign({ transform: element.transform, className: "lf-outline-node", x: x, y: y, 
-                        // width: width + 10,
-                        // height: height + 10,
-                        width: width + 10,
-                        height: height + 10 }, attributes_1)));
+                    nodeOutline.push((0, jsx_runtime_1.jsx)(shape_1.Rect, __assign({ transform: element.transform, className: "lf-outline-node", x: x, y: y, width: width + 4,
+                        height: height + 4 }, attributes_1)));
                 }
             }
         });
@@ -99,30 +102,28 @@ var OutlineOverlay = /** @class */ (function (_super) {
     // 直线outline
     OutlineOverlay.prototype.getLineOutline = function (line) {
         var startPoint = line.startPoint, endPoint = line.endPoint;
-        var x = (startPoint.x + endPoint.x) / 2;
-        var y = (startPoint.y + endPoint.y) / 2;
-        var width = Math.abs(startPoint.x - endPoint.x) + 10;
-        var height = Math.abs(startPoint.y - endPoint.y) + 10;
         var style = line.getOutlineStyle();
-        return ((0, jsx_runtime_1.jsx)(shape_1.Rect, __assign({ className: "lf-outline-edge", x: x, y: y, width: width, height: height }, style)));
+        return this.renderRectOutline([startPoint, endPoint], style, 'lf-outline-edge', { widthOffset: 10, heightOffset: 10 });
     };
     // 折线outline
     OutlineOverlay.prototype.getPolylineOutline = function (polyline) {
         var points = polyline.points;
         var pointsList = (0, util_1.points2PointsList)(points);
-        var bbox = (0, util_1.getBBoxOfPoints)(pointsList, 8);
-        var x = bbox.x, y = bbox.y, width = bbox.width, height = bbox.height;
         var style = polyline.getOutlineStyle();
-        return ((0, jsx_runtime_1.jsx)(shape_1.Rect, __assign({ className: "lf-outline", x: x, y: y, width: width, height: height }, style)));
+        return this.renderRectOutline(pointsList, style, 'lf-outline', {
+            widthOffset: 8,
+            heightOffset: 16,
+        });
     };
     // 曲线outline
     OutlineOverlay.prototype.getBezierOutline = function (bezier) {
         var path = bezier.path;
         var pointsList = (0, util_1.getBezierPoints)(path);
-        var bbox = (0, util_1.getBBoxOfPoints)(pointsList, 8);
-        var x = bbox.x, y = bbox.y, width = bbox.width, height = bbox.height;
         var style = bezier.getOutlineStyle();
-        return ((0, jsx_runtime_1.jsx)(shape_1.Rect, __assign({ className: "lf-outline", x: x, y: y, width: width, height: height }, style)));
+        return this.renderRectOutline(pointsList, style, 'lf-outline', {
+            widthOffset: 8,
+            heightOffset: 16,
+        });
     };
     OutlineOverlay.prototype.render = function () {
         return ((0, jsx_runtime_1.jsxs)("g", { className: "lf-outline", children: [this.getNodesOutline(), this.getEdgeOutline()] }));

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

@@ -0,0 +1,46 @@
+/**
+ * 网格高级 majorBold 配置。
+ *
+ * 示例（布尔值）：
+ *  - false：禁用特殊样式，opacity=1，无加粗，无虚线
+ *  - true：启用默认值，opacity=0.75，每第 5 条线/点加粗/实线，
+ *          虚线图案通过 getDashArrayForSize(size) 计算
+ *
+ * 示例（对象）：
+ * {
+ *   opacity: 0.6,
+ *   boldIndices: [4, 8],
+ *   dashArrayConfig: { pattern: [4,2,4] },
+ *   customBoldWidth: 2,
+ * }
+ */
+export type MajorBoldConfig = {
+    /** 默认网格透明度 (0-1) */
+    opacity: number;
+    /** 一个周期内需要加粗/实线的索引列表 */
+    boldIndices: number[];
+    /** 虚线样式的计算配置 */
+    dashArrayConfig: {
+        /** 固定的虚线模式（可选） */
+        pattern: number[];
+    };
+    /** mesh 网格的自定义加粗线宽（可选） */
+    customBoldWidth?: number;
+};
+export declare const defaultGridConfig: MajorBoldConfig;
+/**
+ * 校验并规范化 GridConfig。
+ * - 将 opacity 限制在 [0,1] 范围
+ * - boldIndices 过滤为正整数并去重
+ */
+export declare function validateGridConfig(cfg: MajorBoldConfig): MajorBoldConfig;
+/**
+ * 合并用户行为配置与默认值。
+ * - false → 关闭模式：opacity=1，bold=[]，关闭虚线
+ * - true → 默认模式：采用 defaultGridConfig
+ * - object → 自定义模式：校验后使用用户配置
+ */
+export declare function mergeMajorBoldConfig(input?: boolean | MajorBoldConfig): {
+    mode: 'disabled' | 'default' | 'custom';
+    config: MajorBoldConfig;
+};

package/lib/view/overlay/gridConfig.js

@@ -0,0 +1,104 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeMajorBoldConfig = exports.validateGridConfig = exports.defaultGridConfig = void 0;
+exports.defaultGridConfig = {
+    opacity: 1,
+    boldIndices: [5],
+    dashArrayConfig: {
+        pattern: [2, 1],
+    },
+    customBoldWidth: 2,
+};
+/**
+ * 校验并规范化 GridConfig。
+ * - 将 opacity 限制在 [0,1] 范围
+ * - boldIndices 过滤为正整数并去重
+ */
+function validateGridConfig(cfg) {
+    var e_1, _a;
+    var _b, _c;
+    var opacity = Math.max(0, Math.min(1, (_b = cfg.opacity) !== null && _b !== void 0 ? _b : exports.defaultGridConfig.opacity));
+    var boldIndicesSet = new Set();
+    var boldRaw = Array.isArray(cfg.boldIndices)
+        ? cfg.boldIndices
+        : exports.defaultGridConfig.boldIndices;
+    try {
+        for (var boldRaw_1 = __values(boldRaw), boldRaw_1_1 = boldRaw_1.next(); !boldRaw_1_1.done; boldRaw_1_1 = boldRaw_1.next()) {
+            var n = boldRaw_1_1.value;
+            if (typeof n === 'number' && Number.isFinite(n) && n > 0) {
+                boldIndicesSet.add(Math.floor(n));
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (boldRaw_1_1 && !boldRaw_1_1.done && (_a = boldRaw_1.return)) _a.call(boldRaw_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    var boldIndices = Array.from(boldIndicesSet);
+    var pattern = Array.isArray((_c = cfg.dashArrayConfig) === null || _c === void 0 ? void 0 : _c.pattern)
+        ? cfg.dashArrayConfig.pattern
+        : exports.defaultGridConfig.dashArrayConfig.pattern;
+    var dashArrayConfig = {
+        pattern: pattern,
+    };
+    var customBoldWidth = cfg.customBoldWidth;
+    return {
+        opacity: opacity,
+        boldIndices: boldIndices.length
+            ? boldIndices
+            : exports.defaultGridConfig.boldIndices,
+        dashArrayConfig: dashArrayConfig,
+        customBoldWidth: customBoldWidth,
+    };
+}
+exports.validateGridConfig = validateGridConfig;
+/**
+ * 合并用户行为配置与默认值。
+ * - false → 关闭模式：opacity=1，bold=[]，关闭虚线
+ * - true → 默认模式：采用 defaultGridConfig
+ * - object → 自定义模式：校验后使用用户配置
+ */
+function mergeMajorBoldConfig(input) {
+    if (input === false) {
+        return {
+            mode: 'disabled',
+            config: {
+                opacity: 1,
+                boldIndices: [],
+                dashArrayConfig: {
+                    pattern: [],
+                },
+            },
+        };
+    }
+    if (input === true || input == null) {
+        return { mode: 'default', config: __assign({}, exports.defaultGridConfig) };
+    }
+    return { mode: 'custom', config: validateGridConfig(input) };
+}
+exports.mergeMajorBoldConfig = mergeMajorBoldConfig;

package/lib/view/shape/Polygon.d.ts

@@ -7,12 +7,5 @@ export type IPolygonProps = {
     className?: string;
     radius?: number;
 };
-/**
- * 生成带圆角的多边形路径
- * @param points 多边形顶点坐标数组
- * @param radius 圆角半径
- * @returns SVG 路径字符串
- */
-export declare function createRoundedPolygonPath(points: any, radius: any): string;
 export declare function Polygon(props: IPolygonProps): h.JSX.Element;
 export default Polygon;

package/lib/view/shape/Polygon.js

@@ -27,50 +27,10 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Polygon = exports.createRoundedPolygonPath = void 0;
+exports.Polygon = void 0;
 var jsx_runtime_1 = require("preact/jsx-runtime");
 var lodash_es_1 = require("lodash-es");
-/**
- * 生成带圆角的多边形路径
- * @param points 多边形顶点坐标数组
- * @param radius 圆角半径
- * @returns SVG 路径字符串
- */
-function createRoundedPolygonPath(points, radius) {
-    var pointList = points.map(function (point) { return ({ x: point[0], y: point[1] }); });
-    var len = pointList.length;
-    if (len < 3)
-        return '';
-    var r = Math.abs(radius);
-    var path = '';
-    for (var i = 0; i < len; i++) {
-        var prev = pointList[(i - 1 + len) % len];
-        var curr = pointList[i];
-        var next = pointList[(i + 1) % len];
-        // 向量
-        var v1 = { x: curr.x - prev.x, y: curr.y - prev.y };
-        var v2 = { x: next.x - curr.x, y: next.y - curr.y };
-        // 单位向量
-        var len1 = Math.hypot(v1.x, v1.y);
-        var len2 = Math.hypot(v2.x, v2.y);
-        var u1 = { x: v1.x / len1, y: v1.y / len1 };
-        var u2 = { x: v2.x / len2, y: v2.y / len2 };
-        // 起点 = curr - u1 * r，终点 = curr + u2 * r
-        var start = { x: curr.x - u1.x * r, y: curr.y - u1.y * r };
-        var end = { x: curr.x + u2.x * r, y: curr.y + u2.y * r };
-        if (i === 0) {
-            path += "M ".concat(start.x, " ").concat(start.y, " ");
-        }
-        else {
-            path += "L ".concat(start.x, " ").concat(start.y, " ");
-        }
-        // Q 控制点是当前拐角点
-        path += "Q ".concat(curr.x, " ").concat(curr.y, " ").concat(end.x, " ").concat(end.y, " ");
-    }
-    path += 'Z';
-    return path;
-}
-exports.createRoundedPolygonPath = createRoundedPolygonPath;
+var geometry_1 = require("../../util/geometry");
 function Polygon(props) {
     var _a = props.points, points = _a === void 0 ? [] : _a, className = props.className, radius = props.radius;
     var attrs = {
@@ -88,14 +48,22 @@ function Polygon(props) {
         }
     });
     if (className) {
-        attrs.classNmae = "lf-basic-shape ".concat(className);
+        attrs.className = "lf-basic-shape ".concat(className);
     }
     else {
         attrs.className = 'lf-basic-shape';
     }
     if (radius) {
-        var path = createRoundedPolygonPath(points, radius);
-        attrs.d = path;
+        var pointList = points.map(function (point) { return ({ x: point[0], y: point[1] }); });
+        var rounded = (0, geometry_1.generateRoundedCorners)(pointList, radius, true);
+        var d = rounded.length
+            ? "M ".concat(rounded[0].x, " ").concat(rounded[0].y, " ").concat(rounded
+                .slice(1)
+                .map(function (p) { return "L ".concat(p.x, " ").concat(p.y); })
+                .join(' '), " Z")
+            : '';
+        attrs.d = d;
+        delete attrs.points;
         return (0, jsx_runtime_1.jsx)("path", __assign({}, attrs));
     }
     else {

package/package.json

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

package/src/LogicFlow.tsx

@@ -1832,6 +1832,8 @@ export namespace LogicFlow {
 
   export type OutlineTheme = {
     hover?: CommonTheme
+    widthOffset?: number
+    heightOffset?: number
   } & CommonTheme &
     EdgeAnimation
 
@@ -1871,6 +1873,7 @@ export namespace LogicFlow {
     diamond: PolygonTheme // 菱形样式
     ellipse: EllipseTheme // 椭圆样式
     polygon: PolygonTheme // 多边形样式
+    html: RectTheme // html 节点样式
 
     /**
      * 基础图形线相关主题
@@ -1897,6 +1900,10 @@ export namespace LogicFlow {
     rotateControl: CommonTheme // 节点旋转控制点样式
     resizeControl: CommonTheme // 节点旋转控制点样式
     resizeOutline: CommonTheme // 节点调整大小时的外框样式
+    multiSelect?: {
+      xPadding?: number
+      yPadding?: number
+    }
 
     /**
      * REMIND: 当开启了跳转边的起点和终点(adjustEdgeStartAndEnd:true)后
@@ -1905,12 +1912,15 @@ export namespace LogicFlow {
      */
     edgeAdjust: CircleTheme
     outline: OutlineTheme // 节点选择状态下外侧的选框样式
+    edgeOutline: OutlineTheme // 边选择状态下外侧的选框样式
     edgeAnimation: EdgeAnimation // 边动画样式
 
     // 画布背景
     background?: boolean | Partial<LFOptions.BackgroundConfig>
     grid?: boolean | Partial<Grid.GridOptions>
   }
+
+  export type ThemeMode = 'default' | 'retro' | 'dark' | 'colorful'
 }
 
 // Render or Functions

package/src/constant/index.ts

@@ -1,8 +1,6 @@
 export const DEFAULT_VISIBLE_SPACE = 200
 export const ELEMENT_MAX_Z_INDEX = 9999
 
-export const DEFAULT_GRID_SIZE = 10
-
 export enum ElementState {
   DEFAULT = 1, // 默认显示
   TEXT_EDIT, // 此元素正在进行文本编辑
@@ -177,3 +175,5 @@ export enum TextMode {
   TEXT = 'text',
   LABEL = 'label',
 }
+
+export * from './theme'