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

package/es/model/GraphModel.js

@@ -51,11 +51,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { find, forEach, map, merge, isBoolean, debounce, cloneDeep, isNil, } from 'lodash-es';
+import { assign, find, forEach, map, merge, isBoolean, debounce, cloneDeep, isNil, } from 'lodash-es';
 import { action, computed, observable } from 'mobx';
 import { EditConfigModel, } from '.';
-import { DEFAULT_VISIBLE_SPACE, ELEMENT_MAX_Z_INDEX, ElementState, ElementType, EventType, ModelType, OverlapMode, TextMode, } from '../constant';
-import { createEdgeGenerator, createUuid, formatData, getClosestPointOfPolyline, getMinIndex, getNodeAnchorPosition, getNodeBBox, getZIndex, isPointInArea, setupAnimation, setupTheme, snapToGrid, updateTheme, backgroundModeMap, gridModeMap, } from '../util';
+import { DEFAULT_VISIBLE_SPACE, ELEMENT_MAX_Z_INDEX, ElementState, ElementType, EventType, ModelType, OverlapMode, TextMode, backgroundModeMap, gridModeMap, } from '../constant';
+import { createEdgeGenerator, createUuid, formatData, getClosestPointOfPolyline, getMinIndex, getNodeAnchorPosition, getNodeBBox, getZIndex, isPointInArea, setupAnimation, setupTheme, snapToGrid, updateTheme, } from '../util';
 import EventEmitter from '../event/eventEmitter';
 import { Grid } from '../view/overlay';
 import NestedTransformModel from './NestedTransformModel';
@@ -63,6 +63,7 @@ var GraphModel = /** @class */ (function () {
     function GraphModel(options) {
         var _this = this;
         var _a, _b;
+        this.themeMode = 'default';
         // 维护所有节点和边类型对应的 model
         this.modelMap = new Map();
         // Remind：用于记录当前画布上所有节点和边的 model 的 Map
@@ -97,6 +98,9 @@ var GraphModel = /** @class */ (function () {
         this.partial = false;
         this.waitCleanEffects = [];
         var container = options.container, partial = options.partial, _c = options.background, background = _c === void 0 ? {} : _c, grid = options.grid, idGenerator = options.idGenerator, edgeGenerator = options.edgeGenerator, animation = options.animation, customTrajectory = options.customTrajectory, customTargetAnchor = options.customTargetAnchor;
+        this.themeMode = options.themeMode || 'default';
+        var initialGrid = gridModeMap[this.themeMode] || gridModeMap['default'];
+        var initialBackground = backgroundModeMap[this.themeMode] || backgroundModeMap['default'];
         this.rootEl = container;
         this.partial = !!partial;
         this.background = background;
@@ -105,11 +109,14 @@ var GraphModel = /** @class */ (function () {
             // TODO：需要让用户设置成 0 吗？后面可以讨论一下
             this.gridSize = grid.size || 1; // 默认 gridSize 设置为 1
         }
-        this.customStyles = options.style || {};
-        this.grid = Grid.getGridOptions(grid !== null && grid !== void 0 ? grid : false);
+        this.customStyles = (options.style || {});
         this.theme = setupTheme(options.style, options.themeMode);
+        this.grid = Grid.getGridOptions(assign({}, initialGrid, grid));
         this.theme.grid = cloneDeep(this.grid);
-        this.theme.background = cloneDeep(this.background);
+        if (background) {
+            this.background = cloneDeep(assign({}, initialBackground, background));
+            this.theme.background = cloneDeep(assign({}, initialBackground, background));
+        }
         this.edgeType = options.edgeType || 'polyline';
         this.animation = setupAnimation(animation);
         this.overlapMode = options.overlapMode || OverlapMode.DEFAULT;
@@ -1332,6 +1339,7 @@ var GraphModel = /** @class */ (function () {
     GraphModel.prototype.setTheme = function (style, themeMode) {
         var _a;
         if (themeMode) {
+            this.themeMode = themeMode;
             // 修改背景颜色
             backgroundModeMap[themeMode] &&
                 this.updateBackgroundOptions(__assign(__assign({}, (typeof this.background === 'object' ? this.background : {})), backgroundModeMap[themeMode]));
@@ -1529,6 +1537,9 @@ var GraphModel = /** @class */ (function () {
     __decorate([
         observable
     ], GraphModel.prototype, "theme", void 0);
+    __decorate([
+        observable
+    ], GraphModel.prototype, "themeMode", void 0);
     __decorate([
         observable
     ], GraphModel.prototype, "grid", void 0);

package/es/model/TransformModel.js

@@ -30,15 +30,15 @@ var translateLimitsMap = {
 };
 var TransformModel = /** @class */ (function () {
     function TransformModel(eventCenter, options) {
-        this.MINI_SCALE_SIZE = 0.2;
-        this.MAX_SCALE_SIZE = 16;
-        this.SCALE_X = 1;
-        this.SKEW_Y = 0;
-        this.SKEW_X = 0;
-        this.SCALE_Y = 1;
-        this.TRANSLATE_X = 0;
-        this.TRANSLATE_Y = 0;
-        this.ZOOM_SIZE = 0.04;
+        this.MINI_SCALE_SIZE = 0.2; // 缩小的最小值
+        this.MAX_SCALE_SIZE = 16; // 放大的最大值
+        this.SCALE_X = 1; // x轴缩放比例
+        this.SKEW_Y = 0; // y轴倾斜角度
+        this.SKEW_X = 0; // x轴倾斜角度
+        this.SCALE_Y = 1; // y轴缩放比例
+        this.TRANSLATE_X = 0; // x轴平移距离
+        this.TRANSLATE_Y = 0; // y轴平移距离
+        this.ZOOM_SIZE = 0.04; // 缩放比例变化量
         // 限制画布可移动区域
         this.translateLimitMinX = -Infinity;
         this.translateLimitMinY = -Infinity;

package/es/model/edge/BaseEdgeModel.js

@@ -192,8 +192,13 @@ var BaseEdgeModel = /** @class */ (function () {
      */
     BaseEdgeModel.prototype.getOutlineStyle = function () {
         var graphModel = this.graphModel;
-        var outline = graphModel.theme.outline;
-        return cloneDeep(outline);
+        var edgeOutline = graphModel.theme.edgeOutline;
+        var attributes = __assign({}, edgeOutline);
+        if (this.isHovered) {
+            var hoverStyle = edgeOutline.hover || {};
+            attributes = __assign(__assign({}, attributes), hoverStyle);
+        }
+        return cloneDeep(attributes);
     };
     /**
      * 重新自定义文本位置

package/es/model/edge/PolylineEdgeModel.d.ts

@@ -12,6 +12,12 @@ export declare class PolylineEdgeModel extends BaseEdgeModel {
     offset?: number;
     dbClickPosition?: Point;
     initEdgeData(data: LogicFlow.EdgeConfig): void;
+    setAttributes(): void;
+    /**
+     * 计算默认 offset：箭头与折线重叠长度 + 5
+     * 重叠长度采用箭头样式中的 offset（沿边方向的长度）
+     */
+    private getDefaultOffset;
     getEdgeStyle(): {
         [x: string]: unknown;
         fill?: string | undefined;

package/es/model/edge/PolylineEdgeModel.js

@@ -69,12 +69,34 @@ var PolylineEdgeModel = /** @class */ (function (_super) {
         return _this;
     }
     PolylineEdgeModel.prototype.initEdgeData = function (data) {
-        this.offset = get(data, 'properties.offset', 30);
+        var providedOffset = get(data, 'properties.offset');
+        // 当用户未传入 offset 时，按“箭头与折线重叠长度 + 5”作为默认值
+        // 其中“重叠长度”采用箭头样式中的 offset（沿边方向的长度）
+        this.offset =
+            typeof providedOffset === 'number'
+                ? providedOffset
+                : this.getDefaultOffset();
         if (data.pointsList) {
             this.pointsList = data.pointsList;
         }
         _super.prototype.initEdgeData.call(this, data);
     };
+    PolylineEdgeModel.prototype.setAttributes = function () {
+        var newOffset = this.properties.offset;
+        if (newOffset && newOffset !== this.offset) {
+            this.offset = newOffset;
+            this.updatePoints();
+        }
+    };
+    /**
+     * 计算默认 offset：箭头与折线重叠长度 + 5
+     * 重叠长度采用箭头样式中的 offset（沿边方向的长度）
+     */
+    PolylineEdgeModel.prototype.getDefaultOffset = function () {
+        var arrowStyle = this.getArrowStyle();
+        var arrowOverlap = typeof arrowStyle.offset === 'number' ? arrowStyle.offset : 0;
+        return arrowOverlap + 5;
+    };
     PolylineEdgeModel.prototype.getEdgeStyle = function () {
         var polyline = this.graphModel.theme.polyline;
         var style = _super.prototype.getEdgeStyle.call(this);

package/es/model/node/BaseNodeModel.d.ts

@@ -185,7 +185,18 @@ export declare class BaseNodeModel<P extends PropertiesType = PropertiesType> im
      * 获取当前节点缩放控制节点的样式
      */
     getResizeControlStyle(): LogicFlow.CommonTheme;
-    getResizeOutlineStyle(): LogicFlow.CommonTheme;
+    getResizeOutlineStyle(): {
+        [x: string]: unknown;
+        fill?: string | undefined;
+        stroke?: string | undefined;
+        strokeWidth?: number | undefined;
+        radius?: number | undefined;
+        rx?: number | undefined;
+        ry?: number | undefined;
+        width?: number | undefined;
+        height?: number | undefined;
+        path?: string | undefined;
+    };
     /**
      * @overridable 支持重写
      * 获取当前节点锚点样式

package/es/model/node/BaseNodeModel.js

@@ -379,7 +379,12 @@ var BaseNodeModel = /** @class */ (function () {
     };
     BaseNodeModel.prototype.getResizeOutlineStyle = function () {
         var resizeOutline = this.graphModel.theme.resizeOutline;
-        return cloneDeep(resizeOutline);
+        var attributes = __assign({}, resizeOutline);
+        if (this.isHovered) {
+            var hoverStyle = resizeOutline.hover || {};
+            attributes = __assign(__assign({}, attributes), hoverStyle);
+        }
+        return cloneDeep(attributes);
     };
     /**
      * @overridable 支持重写

package/es/model/node/HtmlNodeModel.d.ts

@@ -16,5 +16,17 @@ export declare class HtmlNodeModel<P extends IHtmlNodeProperties = IHtmlNodeProp
     constructor(data: LogicFlow.NodeConfig<P>, graphModel: GraphModel);
     setAttributes(): void;
     getDefaultAnchor(): AnchorConfig[];
+    getNodeStyle(): {
+        [x: string]: unknown;
+        fill?: string | undefined;
+        stroke?: string | undefined;
+        strokeWidth?: number | undefined;
+        radius?: number | undefined;
+        rx?: number | undefined;
+        ry?: number | undefined;
+        width?: number | undefined;
+        height?: number | undefined;
+        path?: string | undefined;
+    };
 }
 export default HtmlNodeModel;

package/es/model/node/HtmlNodeModel.js

@@ -13,6 +13,18 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+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);
+};
+import { cloneDeep } from 'lodash-es';
 import BaseNodeModel from './BaseNodeModel';
 import { ModelType } from '../../constant';
 var HtmlNodeModel = /** @class */ (function (_super) {
@@ -42,6 +54,13 @@ var HtmlNodeModel = /** @class */ (function (_super) {
             { x: x - width / 2, y: y, id: "".concat(this.id, "_3") },
         ];
     };
+    HtmlNodeModel.prototype.getNodeStyle = function () {
+        var style = _super.prototype.getNodeStyle.call(this);
+        var _a = this.graphModel.theme, baseNode = _a.baseNode, html = _a.html;
+        var _b = this.properties.style, customStyle = _b === void 0 ? {} : _b;
+        var finalStyle = __assign(__assign(__assign(__assign({}, style), cloneDeep(baseNode)), cloneDeep(html)), cloneDeep(customStyle));
+        return finalStyle;
+    };
     return HtmlNodeModel;
 }(BaseNodeModel));
 export { HtmlNodeModel };

package/es/model/node/PolygonNodeModel.js

@@ -88,9 +88,9 @@ var PolygonNodeModel = /** @class */ (function (_super) {
     };
     PolygonNodeModel.prototype.getNodeStyle = function () {
         var style = _super.prototype.getNodeStyle.call(this);
-        var polygon = this.graphModel.theme.polygon;
-        var _a = this.properties.style, customStyle = _a === void 0 ? {} : _a;
-        return __assign(__assign(__assign({}, style), cloneDeep(polygon)), cloneDeep(customStyle));
+        var _a = this.graphModel, polygon = _a.theme.polygon, customPolygon = _a.customStyles.polygon;
+        var _b = this.properties.style, customStyle = _b === void 0 ? {} : _b;
+        return __assign(__assign(__assign(__assign({}, style), cloneDeep(polygon)), cloneDeep(customPolygon)), cloneDeep(customStyle));
     };
     Object.defineProperty(PolygonNodeModel.prototype, "pointsPosition", {
         /**

package/es/options.d.ts

@@ -70,7 +70,7 @@ export declare namespace Options {
         edgeGenerator?: EdgeGeneratorType;
         customTargetAnchor?: customTargetAnchorType;
         customTrajectory?: (props: CustomAnchorLineProps) => h.JSX.Element;
-        themeMode?: 'radius' | 'dark' | 'colorful';
+        themeMode?: LogicFlow.ThemeMode;
         parentTransform?: TransformModel;
         [key: string]: unknown;
     }

package/es/style/index.css

@@ -177,8 +177,9 @@
 }
 .lf-multiple-select {
   position: absolute;
-  border: 2px dashed #187dffcc;
-  box-shadow: 0 0 3px 0 #187dff80;
+  border: 2px dashed #4271dfcc;
+  border-radius: 12px;
+  box-shadow: 0 0 3px 0 #4271df80;
   cursor: move;
 }
 .lf-edge-adjust-point {

package/es/style/index.less

@@ -215,8 +215,9 @@
 
 .lf-multiple-select {
   position: absolute;
-  border: 2px dashed #187dffcc;
-  box-shadow: 0 0 3px 0 #187dff80;
+  border: 2px dashed #4271dfcc;
+  border-radius: 12px;
+  box-shadow: 0 0 3px 0 #4271df80;
   cursor: move;
 }
 

package/es/style/raw.d.ts

@@ -1,4 +1,4 @@
 /**
  * Auto generated file, do not modify it!
  */
-export declare const content = ".lf-graph {\n  position: relative;\n  z-index: 0;\n  width: 100%;\n  height: 100%;\n  background: #fff;\n  user-select: none;\n}\n.lf-element-text {\n  cursor: text;\n}\n.lf-text-disabled {\n  pointer-events: none;\n}\n.lf-text-draggable {\n  cursor: move;\n}\n*:focus {\n  outline: none;\n}\n.lf-node-anchor {\n  cursor: crosshair;\n}\n.lf-node-anchor-hover {\n  visibility: hidden;\n}\n.lf-anchor:hover .lf-node-anchor-hover {\n  visibility: visible;\n}\n.lf-edge.pointer-none {\n  pointer-events: none;\n}\n.lf-edge-append {\n  cursor: pointer;\n}\n.lf-edge-animation {\n  stroke-dashoffset: 100%;\n  animation: lf_animate_dash 5s linear infinite;\n}\n@keyframes lf_animate_dash {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n/* node */\n.lf-node-not-allow {\n  cursor: not-allowed;\n}\n.lf-polyline-append-ns-resize {\n  cursor: ns-resize;\n}\n.lf-polyline-append-ew-resize {\n  cursor: ew-resize;\n}\n.lf-dragging {\n  cursor: move;\n}\n.lf-dragging .lf-element-text {\n  cursor: move;\n}\n.lf-draggable {\n  cursor: default;\n}\n.lf-bezier-adjust-anchor {\n  cursor: pointer;\n}\n/* background */\n.lf-background,\n.lf-grid {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n}\n.lf-background-area {\n  width: 100%;\n  height: 100%;\n}\n/* html-overlay */\n.lf-html-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  overflow: hidden;\n  user-select: none;\n  pointer-events: none;\n}\n.lf-html-overlay__transform > * {\n  pointer-events: all;\n}\n.lf-text-editable {\n  pointer-events: all;\n}\n.lf-text-input {\n  position: absolute;\n  box-sizing: border-box;\n  min-width: 100px;\n  min-height: 20px;\n  padding: 5px;\n  line-height: 1.2;\n  white-space: pre;\n  text-align: center;\n  background: #fff;\n  border: 1px solid #edefed;\n  border-radius: 3px;\n  outline: none;\n  transform: translate(-50%, -50%);\n  resize: none;\n}\n.lf-get-text-height {\n  display: inline-block;\n  box-sizing: border-box;\n  word-break: break-all;\n  /* \u4E3A\u4E86\u8DDF\u8F93\u5165\u6548\u679C\u4FDD\u6301\u4E00\u81F4\uFF0C\u8BBE\u7F6E\u900F\u660E\u8FB9\u6846\u5360\u4F4D */\n  border: 1px solid transparent;\n}\n.lf-node-text-auto-wrap {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  /* border: 1px solid transparent; */\n}\n.lf-node-text-auto-wrap-content {\n  width: 100%;\n  line-height: 1.2;\n  text-align: center;\n  word-break: break-all;\n  background: transparent;\n}\n.lf-node-text-ellipsis-content {\n  width: 100%;\n  line-height: 1.2;\n  white-space: nowrap;\n  text-align: center;\n  background: transparent;\n  /* overflow: hidden;\n  text-overflow: ellipsis; */\n}\n.lf-node-text-ellipsis-content > div {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n/* tool-overlay */\n.lf-tool-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  overflow: hidden;\n  pointer-events: none;\n}\n.lf-tool-overlay > * {\n  pointer-events: all;\n}\n/* modification-overlay */\n.modification-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  overflow: hidden;\n  pointer-events: none;\n}\n.modification-overlay > * {\n  pointer-events: all;\n}\n.lf-outline,\n.lf-snapline {\n  pointer-events: none;\n}\n.lf-keyboard-tips {\n  float: right;\n}\n.lf-node-select-decorate {\n  position: absolute;\n  border: 1px dashed #343435;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n.lf-multiple-select {\n  position: absolute;\n  border: 2px dashed #187dffcc;\n  box-shadow: 0 0 3px 0 #187dff80;\n  cursor: move;\n}\n.lf-edge-adjust-point {\n  cursor: move;\n}\n.lf-rotate-control {\n  cursor: grabbing;\n}\n.lf-resize-control-nw {\n  cursor: nw-resize;\n}\n.lf-resize-control-n {\n  cursor: n-resize;\n}\n.lf-resize-control-ne {\n  cursor: ne-resize;\n}\n.lf-resize-control-e {\n  cursor: e-resize;\n}\n.lf-resize-control-se {\n  cursor: se-resize;\n}\n.lf-resize-control-s {\n  cursor: s-resize;\n}\n.lf-resize-control-sw {\n  cursor: sw-resize;\n}\n.lf-resize-control-w {\n  cursor: w-resize;\n}\n";
+export declare const content = ".lf-graph {\n  position: relative;\n  z-index: 0;\n  width: 100%;\n  height: 100%;\n  background: #fff;\n  user-select: none;\n}\n.lf-element-text {\n  cursor: text;\n}\n.lf-text-disabled {\n  pointer-events: none;\n}\n.lf-text-draggable {\n  cursor: move;\n}\n*:focus {\n  outline: none;\n}\n.lf-node-anchor {\n  cursor: crosshair;\n}\n.lf-node-anchor-hover {\n  visibility: hidden;\n}\n.lf-anchor:hover .lf-node-anchor-hover {\n  visibility: visible;\n}\n.lf-edge.pointer-none {\n  pointer-events: none;\n}\n.lf-edge-append {\n  cursor: pointer;\n}\n.lf-edge-animation {\n  stroke-dashoffset: 100%;\n  animation: lf_animate_dash 5s linear infinite;\n}\n@keyframes lf_animate_dash {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n/* node */\n.lf-node-not-allow {\n  cursor: not-allowed;\n}\n.lf-polyline-append-ns-resize {\n  cursor: ns-resize;\n}\n.lf-polyline-append-ew-resize {\n  cursor: ew-resize;\n}\n.lf-dragging {\n  cursor: move;\n}\n.lf-dragging .lf-element-text {\n  cursor: move;\n}\n.lf-draggable {\n  cursor: default;\n}\n.lf-bezier-adjust-anchor {\n  cursor: pointer;\n}\n/* background */\n.lf-background,\n.lf-grid {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n}\n.lf-background-area {\n  width: 100%;\n  height: 100%;\n}\n/* html-overlay */\n.lf-html-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  overflow: hidden;\n  user-select: none;\n  pointer-events: none;\n}\n.lf-html-overlay__transform > * {\n  pointer-events: all;\n}\n.lf-text-editable {\n  pointer-events: all;\n}\n.lf-text-input {\n  position: absolute;\n  box-sizing: border-box;\n  min-width: 100px;\n  min-height: 20px;\n  padding: 5px;\n  line-height: 1.2;\n  white-space: pre;\n  text-align: center;\n  background: #fff;\n  border: 1px solid #edefed;\n  border-radius: 3px;\n  outline: none;\n  transform: translate(-50%, -50%);\n  resize: none;\n}\n.lf-get-text-height {\n  display: inline-block;\n  box-sizing: border-box;\n  word-break: break-all;\n  /* \u4E3A\u4E86\u8DDF\u8F93\u5165\u6548\u679C\u4FDD\u6301\u4E00\u81F4\uFF0C\u8BBE\u7F6E\u900F\u660E\u8FB9\u6846\u5360\u4F4D */\n  border: 1px solid transparent;\n}\n.lf-node-text-auto-wrap {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  /* border: 1px solid transparent; */\n}\n.lf-node-text-auto-wrap-content {\n  width: 100%;\n  line-height: 1.2;\n  text-align: center;\n  word-break: break-all;\n  background: transparent;\n}\n.lf-node-text-ellipsis-content {\n  width: 100%;\n  line-height: 1.2;\n  white-space: nowrap;\n  text-align: center;\n  background: transparent;\n  /* overflow: hidden;\n  text-overflow: ellipsis; */\n}\n.lf-node-text-ellipsis-content > div {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n/* tool-overlay */\n.lf-tool-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  overflow: hidden;\n  pointer-events: none;\n}\n.lf-tool-overlay > * {\n  pointer-events: all;\n}\n/* modification-overlay */\n.modification-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  overflow: hidden;\n  pointer-events: none;\n}\n.modification-overlay > * {\n  pointer-events: all;\n}\n.lf-outline,\n.lf-snapline {\n  pointer-events: none;\n}\n.lf-keyboard-tips {\n  float: right;\n}\n.lf-node-select-decorate {\n  position: absolute;\n  border: 1px dashed #343435;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n.lf-multiple-select {\n  position: absolute;\n  border: 2px dashed #4271dfcc;\n  border-radius: 12px;\n  box-shadow: 0 0 3px 0 #4271df80;\n  cursor: move;\n}\n.lf-edge-adjust-point {\n  cursor: move;\n}\n.lf-rotate-control {\n  cursor: grabbing;\n}\n.lf-resize-control-nw {\n  cursor: nw-resize;\n}\n.lf-resize-control-n {\n  cursor: n-resize;\n}\n.lf-resize-control-ne {\n  cursor: ne-resize;\n}\n.lf-resize-control-e {\n  cursor: e-resize;\n}\n.lf-resize-control-se {\n  cursor: se-resize;\n}\n.lf-resize-control-s {\n  cursor: s-resize;\n}\n.lf-resize-control-sw {\n  cursor: sw-resize;\n}\n.lf-resize-control-w {\n  cursor: w-resize;\n}\n";

package/es/style/raw.js

@@ -2,4 +2,4 @@
 /**
  * Auto generated file, do not modify it!
  */
-export var content = ".lf-graph {\n  position: relative;\n  z-index: 0;\n  width: 100%;\n  height: 100%;\n  background: #fff;\n  user-select: none;\n}\n.lf-element-text {\n  cursor: text;\n}\n.lf-text-disabled {\n  pointer-events: none;\n}\n.lf-text-draggable {\n  cursor: move;\n}\n*:focus {\n  outline: none;\n}\n.lf-node-anchor {\n  cursor: crosshair;\n}\n.lf-node-anchor-hover {\n  visibility: hidden;\n}\n.lf-anchor:hover .lf-node-anchor-hover {\n  visibility: visible;\n}\n.lf-edge.pointer-none {\n  pointer-events: none;\n}\n.lf-edge-append {\n  cursor: pointer;\n}\n.lf-edge-animation {\n  stroke-dashoffset: 100%;\n  animation: lf_animate_dash 5s linear infinite;\n}\n@keyframes lf_animate_dash {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n/* node */\n.lf-node-not-allow {\n  cursor: not-allowed;\n}\n.lf-polyline-append-ns-resize {\n  cursor: ns-resize;\n}\n.lf-polyline-append-ew-resize {\n  cursor: ew-resize;\n}\n.lf-dragging {\n  cursor: move;\n}\n.lf-dragging .lf-element-text {\n  cursor: move;\n}\n.lf-draggable {\n  cursor: default;\n}\n.lf-bezier-adjust-anchor {\n  cursor: pointer;\n}\n/* background */\n.lf-background,\n.lf-grid {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n}\n.lf-background-area {\n  width: 100%;\n  height: 100%;\n}\n/* html-overlay */\n.lf-html-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  overflow: hidden;\n  user-select: none;\n  pointer-events: none;\n}\n.lf-html-overlay__transform > * {\n  pointer-events: all;\n}\n.lf-text-editable {\n  pointer-events: all;\n}\n.lf-text-input {\n  position: absolute;\n  box-sizing: border-box;\n  min-width: 100px;\n  min-height: 20px;\n  padding: 5px;\n  line-height: 1.2;\n  white-space: pre;\n  text-align: center;\n  background: #fff;\n  border: 1px solid #edefed;\n  border-radius: 3px;\n  outline: none;\n  transform: translate(-50%, -50%);\n  resize: none;\n}\n.lf-get-text-height {\n  display: inline-block;\n  box-sizing: border-box;\n  word-break: break-all;\n  /* \u4E3A\u4E86\u8DDF\u8F93\u5165\u6548\u679C\u4FDD\u6301\u4E00\u81F4\uFF0C\u8BBE\u7F6E\u900F\u660E\u8FB9\u6846\u5360\u4F4D */\n  border: 1px solid transparent;\n}\n.lf-node-text-auto-wrap {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  /* border: 1px solid transparent; */\n}\n.lf-node-text-auto-wrap-content {\n  width: 100%;\n  line-height: 1.2;\n  text-align: center;\n  word-break: break-all;\n  background: transparent;\n}\n.lf-node-text-ellipsis-content {\n  width: 100%;\n  line-height: 1.2;\n  white-space: nowrap;\n  text-align: center;\n  background: transparent;\n  /* overflow: hidden;\n  text-overflow: ellipsis; */\n}\n.lf-node-text-ellipsis-content > div {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n/* tool-overlay */\n.lf-tool-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  overflow: hidden;\n  pointer-events: none;\n}\n.lf-tool-overlay > * {\n  pointer-events: all;\n}\n/* modification-overlay */\n.modification-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  overflow: hidden;\n  pointer-events: none;\n}\n.modification-overlay > * {\n  pointer-events: all;\n}\n.lf-outline,\n.lf-snapline {\n  pointer-events: none;\n}\n.lf-keyboard-tips {\n  float: right;\n}\n.lf-node-select-decorate {\n  position: absolute;\n  border: 1px dashed #343435;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n.lf-multiple-select {\n  position: absolute;\n  border: 2px dashed #187dffcc;\n  box-shadow: 0 0 3px 0 #187dff80;\n  cursor: move;\n}\n.lf-edge-adjust-point {\n  cursor: move;\n}\n.lf-rotate-control {\n  cursor: grabbing;\n}\n.lf-resize-control-nw {\n  cursor: nw-resize;\n}\n.lf-resize-control-n {\n  cursor: n-resize;\n}\n.lf-resize-control-ne {\n  cursor: ne-resize;\n}\n.lf-resize-control-e {\n  cursor: e-resize;\n}\n.lf-resize-control-se {\n  cursor: se-resize;\n}\n.lf-resize-control-s {\n  cursor: s-resize;\n}\n.lf-resize-control-sw {\n  cursor: sw-resize;\n}\n.lf-resize-control-w {\n  cursor: w-resize;\n}\n";
+export var content = ".lf-graph {\n  position: relative;\n  z-index: 0;\n  width: 100%;\n  height: 100%;\n  background: #fff;\n  user-select: none;\n}\n.lf-element-text {\n  cursor: text;\n}\n.lf-text-disabled {\n  pointer-events: none;\n}\n.lf-text-draggable {\n  cursor: move;\n}\n*:focus {\n  outline: none;\n}\n.lf-node-anchor {\n  cursor: crosshair;\n}\n.lf-node-anchor-hover {\n  visibility: hidden;\n}\n.lf-anchor:hover .lf-node-anchor-hover {\n  visibility: visible;\n}\n.lf-edge.pointer-none {\n  pointer-events: none;\n}\n.lf-edge-append {\n  cursor: pointer;\n}\n.lf-edge-animation {\n  stroke-dashoffset: 100%;\n  animation: lf_animate_dash 5s linear infinite;\n}\n@keyframes lf_animate_dash {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n/* node */\n.lf-node-not-allow {\n  cursor: not-allowed;\n}\n.lf-polyline-append-ns-resize {\n  cursor: ns-resize;\n}\n.lf-polyline-append-ew-resize {\n  cursor: ew-resize;\n}\n.lf-dragging {\n  cursor: move;\n}\n.lf-dragging .lf-element-text {\n  cursor: move;\n}\n.lf-draggable {\n  cursor: default;\n}\n.lf-bezier-adjust-anchor {\n  cursor: pointer;\n}\n/* background */\n.lf-background,\n.lf-grid {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n}\n.lf-background-area {\n  width: 100%;\n  height: 100%;\n}\n/* html-overlay */\n.lf-html-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  overflow: hidden;\n  user-select: none;\n  pointer-events: none;\n}\n.lf-html-overlay__transform > * {\n  pointer-events: all;\n}\n.lf-text-editable {\n  pointer-events: all;\n}\n.lf-text-input {\n  position: absolute;\n  box-sizing: border-box;\n  min-width: 100px;\n  min-height: 20px;\n  padding: 5px;\n  line-height: 1.2;\n  white-space: pre;\n  text-align: center;\n  background: #fff;\n  border: 1px solid #edefed;\n  border-radius: 3px;\n  outline: none;\n  transform: translate(-50%, -50%);\n  resize: none;\n}\n.lf-get-text-height {\n  display: inline-block;\n  box-sizing: border-box;\n  word-break: break-all;\n  /* \u4E3A\u4E86\u8DDF\u8F93\u5165\u6548\u679C\u4FDD\u6301\u4E00\u81F4\uFF0C\u8BBE\u7F6E\u900F\u660E\u8FB9\u6846\u5360\u4F4D */\n  border: 1px solid transparent;\n}\n.lf-node-text-auto-wrap {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  /* border: 1px solid transparent; */\n}\n.lf-node-text-auto-wrap-content {\n  width: 100%;\n  line-height: 1.2;\n  text-align: center;\n  word-break: break-all;\n  background: transparent;\n}\n.lf-node-text-ellipsis-content {\n  width: 100%;\n  line-height: 1.2;\n  white-space: nowrap;\n  text-align: center;\n  background: transparent;\n  /* overflow: hidden;\n  text-overflow: ellipsis; */\n}\n.lf-node-text-ellipsis-content > div {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n/* tool-overlay */\n.lf-tool-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  overflow: hidden;\n  pointer-events: none;\n}\n.lf-tool-overlay > * {\n  pointer-events: all;\n}\n/* modification-overlay */\n.modification-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  overflow: hidden;\n  pointer-events: none;\n}\n.modification-overlay > * {\n  pointer-events: all;\n}\n.lf-outline,\n.lf-snapline {\n  pointer-events: none;\n}\n.lf-keyboard-tips {\n  float: right;\n}\n.lf-node-select-decorate {\n  position: absolute;\n  border: 1px dashed #343435;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n.lf-multiple-select {\n  position: absolute;\n  border: 2px dashed #4271dfcc;\n  border-radius: 12px;\n  box-shadow: 0 0 3px 0 #4271df80;\n  cursor: move;\n}\n.lf-edge-adjust-point {\n  cursor: move;\n}\n.lf-rotate-control {\n  cursor: grabbing;\n}\n.lf-resize-control-nw {\n  cursor: nw-resize;\n}\n.lf-resize-control-n {\n  cursor: n-resize;\n}\n.lf-resize-control-ne {\n  cursor: ne-resize;\n}\n.lf-resize-control-e {\n  cursor: e-resize;\n}\n.lf-resize-control-se {\n  cursor: se-resize;\n}\n.lf-resize-control-s {\n  cursor: s-resize;\n}\n.lf-resize-control-sw {\n  cursor: sw-resize;\n}\n.lf-resize-control-w {\n  cursor: w-resize;\n}\n";

package/es/tool/MultipleSelectTool.js

@@ -115,8 +115,9 @@ var MultipleSelect = /** @class */ (function (_super) {
     }
     MultipleSelect.prototype.render = function () {
         var _a, _b;
-        var _c = this.props.graphModel, selectElements = _c.selectElements, transformModel = _c.transformModel;
+        var _c = this.props.graphModel, selectElements = _c.selectElements, transformModel = _c.transformModel, theme = _c.theme;
         var _d = this.props.lf.getTransform(), SCALE_X = _d.SCALE_X, SCALE_Y = _d.SCALE_Y;
+        var _e = theme.multiSelect || {}, _f = _e.xPadding, xPadding = _f === void 0 ? 8 : _f, _g = _e.yPadding, yPadding = _g === void 0 ? 8 : _g;
         if (selectElements.size <= 1)
             return;
         var x = Number.MAX_SAFE_INTEGER;
@@ -141,10 +142,10 @@ var MultipleSelect = /** @class */ (function (_super) {
         _a = __read(transformModel.CanvasPointToHtmlPoint([x, y]), 2), x = _a[0], y = _a[1];
         _b = __read(transformModel.CanvasPointToHtmlPoint([x1, y1]), 2), x1 = _b[0], y1 = _b[1];
         var style = {
-            left: "".concat(x - (20 * SCALE_X) / 2, "px"),
-            top: "".concat(y - (20 * SCALE_Y) / 2, "px"),
-            width: "".concat(x1 - x + 20 * SCALE_X, "px"),
-            height: "".concat(y1 - y + 20 * SCALE_Y, "px"),
+            left: "".concat(x - (20 * SCALE_X) / 2 - xPadding / 2, "px"),
+            top: "".concat(y - (20 * SCALE_Y) / 2 - yPadding / 2, "px"),
+            width: "".concat(x1 - x + 20 * SCALE_X + xPadding, "px"),
+            height: "".concat(y1 - y + 20 * SCALE_Y + yPadding, "px"),
             'border-width': "".concat(2 * SCALE_X, "px"),
         };
         return (_jsx("div", { className: "lf-multiple-select", style: style, onPointerDown: this.handleMouseDown, onContextMenu: this.handleContextMenu, onWheel: this.handleWheelEvent }));

package/es/util/edge.d.ts

@@ -16,7 +16,7 @@ export declare const getExpandedBBox: (bbox: BoxBounds, offset: number) => BoxBo
 export declare const pointDirection: (point: Point, bbox: BoxBounds) => Direction;
 export declare const getExpandedBBoxPoint: (expendBBox: BoxBounds, bbox: BoxBounds, point: Point) => Point;
 export declare const mergeBBox: (b1: BoxBounds, b2: BoxBounds) => BoxBounds;
-export declare const getBBoxOfPoints: (points?: Point[], offset?: number) => BoxBounds;
+export declare const getBBoxOfPoints: (points?: Point[], offset?: number, heightOffset?: number) => BoxBounds;
 export declare const getPointsFromBBox: (bbox: BoxBounds) => [Point, Point, Point, Point];
 export declare const isPointOutsideBBox: (point: Point, bbox: BoxBounds) => boolean;
 export declare const getBBoxXCrossPoints: (bbox: BoxBounds, x: number) => [Point, Point] | [

package/es/util/edge.js

@@ -155,7 +155,7 @@ export var mergeBBox = function (b1, b2) {
  * 1、获取起始终点相邻点(expendBboxPoint)的bbox
  * 2、polylineEdge, bezierEdge，获取outline边框，这种情况传入offset
  */
-export var getBBoxOfPoints = function (points, offset) {
+export var getBBoxOfPoints = function (points, offset, heightOffset) {
     if (points === void 0) { points = []; }
     var xList = [];
     var yList = [];
@@ -171,7 +171,7 @@ export var getBBoxOfPoints = function (points, offset) {
     var height = maxY - minY;
     if (offset) {
         width += offset;
-        height += offset;
+        height += heightOffset || offset;
     }
     return {
         centerX: (minX + maxX) / 2,

package/es/util/geometry.d.ts

@@ -1,5 +1,6 @@
 import LogicFlow from '../LogicFlow';
 import PointTuple = LogicFlow.PointTuple;
+import Point = LogicFlow.Point;
 export declare function snapToGrid(point: number, gridSize: number, snapGrid: boolean): number;
 export declare function getGridOffset(distance: number, gridSize: number): number;
 /**
@@ -9,3 +10,10 @@ export declare function getGridOffset(distance: number, gridSize: number): numbe
  * @param height
  */
 export declare function normalizePolygon(points?: PointTuple[], width?: number, height?: number): PointTuple[];
+/**
+ * 通用圆角生成：为菱形、多边形、折线在转折处生成与矩形视觉一致的圆角
+ * - 圆角基于角平分线，切点距顶点的距离 t = r * tan(theta/2)
+ * - 半径会根据相邻边长度进行钳制，避免超过边长造成断裂
+ * - 多边形/菱形保持闭合；折线保持开口
+ */
+export declare const generateRoundedCorners: (points: Point[], radius: number, isClosedShape: boolean) => Point[];

package/es/util/geometry.js

@@ -72,3 +72,82 @@ export function normalizePolygon(points, width, height) {
         return [x * scaleFactor, y * scaleFactor];
     });
 }
+/**
+ * 通用圆角生成：为菱形、多边形、折线在转折处生成与矩形视觉一致的圆角
+ * - 圆角基于角平分线，切点距顶点的距离 t = r * tan(theta/2)
+ * - 半径会根据相邻边长度进行钳制，避免超过边长造成断裂
+ * - 多边形/菱形保持闭合；折线保持开口
+ */
+export var generateRoundedCorners = function (points, radius, isClosedShape) {
+    var n = points.length;
+    if (n < 2 || radius <= 0)
+        return points.slice();
+    var toVec = function (a, b) { return ({ x: b.x - a.x, y: b.y - a.y }); };
+    var len = function (v) { return Math.hypot(v.x, v.y); };
+    var norm = function (v) {
+        var l = len(v) || 1;
+        return { x: v.x / l, y: v.y / l };
+    };
+    var result = [];
+    // 用二次贝塞尔近似圆角，控制点取角点，避免复杂圆心计算
+    var makeRoundCorner = function (prev, curr, next) {
+        var vPrev = toVec(curr, prev);
+        var vNext = toVec(curr, next);
+        var dPrev = len(vPrev);
+        var dNext = len(vNext);
+        if (dPrev < 1e-6 || dNext < 1e-6)
+            return [curr];
+        var uPrev = norm(vPrev);
+        var uNext = norm(vNext);
+        var t = Math.min(radius, dPrev * 0.45, dNext * 0.45);
+        var start = { x: curr.x + uPrev.x * t, y: curr.y + uPrev.y * t };
+        var end = { x: curr.x + uNext.x * t, y: curr.y + uNext.y * t };
+        // 二次贝塞尔采样：B(s) = (1-s)^2*start + 2(1-s)s*curr + s^2*end
+        var steps = 10; // 3段近似，简洁且效果稳定
+        var pts = [start];
+        for (var k = 1; k < steps; k++) {
+            var s = k / steps;
+            var a = 1 - s;
+            pts.push({
+                x: a * a * start.x + 2 * a * s * curr.x + s * s * end.x,
+                y: a * a * start.y + 2 * a * s * curr.y + s * s * end.y,
+            });
+        }
+        pts.push(end);
+        return pts;
+    };
+    for (var i = 0; i < n; i++) {
+        var prevIdx = i === 0 ? (isClosedShape ? n - 1 : 0) : i - 1;
+        var nextIdx = i === n - 1 ? (isClosedShape ? 0 : n - 1) : i + 1;
+        var prev = points[prevIdx];
+        var curr = points[i];
+        var next = points[nextIdx];
+        var isEndpoint = !isClosedShape && (i === 0 || i === n - 1);
+        if (isEndpoint) {
+            // 折线两端不处理圆角
+            result.push(curr);
+        }
+        else {
+            var arc = makeRoundCorner(prev, curr, next);
+            arc.forEach(function (p) { return result.push(p); });
+        }
+    }
+    // 去重处理：避免连续重复点
+    var dedup = [];
+    for (var i = 0; i < result.length; i++) {
+        var p = result[i];
+        if (dedup.length === 0 ||
+            Math.hypot(p.x - dedup[dedup.length - 1].x, p.y - dedup[dedup.length - 1].y) > 1e-6) {
+            dedup.push(p);
+        }
+    }
+    // 闭合图形：确保首尾不重复闭合
+    if (isClosedShape && dedup.length > 1) {
+        var first = dedup[0];
+        var last = dedup[dedup.length - 1];
+        if (Math.hypot(first.x - last.x, first.y - last.y) < 1e-6) {
+            dedup.pop();
+        }
+    }
+    return dedup;
+};

package/es/util/theme.d.ts

@@ -1,69 +1,6 @@
 import LogicFlow from '../LogicFlow';
-export declare const defaultTheme: LogicFlow.Theme;
-export declare const radiusMode: any;
-export declare const darkMode: any;
-export declare const colorfulMode: any;
-export declare const themeModeMap: {
-    colorful: any;
-    dark: any;
-    radius: any;
-    default: LogicFlow.Theme;
-};
-export declare const darkBackground: {
-    background: string;
-};
-export declare const colorfulBackground: {
-    background: string;
-};
-export declare const defaultBackground: {
-    background: string;
-};
-export declare const backgroundModeMap: {
-    colorful: {
-        background: string;
-    };
-    dark: {
-        background: string;
-    };
-    radius: {
-        background: string;
-    };
-    default: {
-        background: string;
-    };
-};
-export declare const darkGrid: {
-    color: string;
-    thickness: number;
-};
-export declare const colorfulGrid: {
-    color: string;
-    thickness: number;
-};
-export declare const defaultGrid: {
-    color: string;
-    thickness: number;
-};
-export declare const gridModeMap: {
-    colorful: {
-        color: string;
-        thickness: number;
-    };
-    dark: {
-        color: string;
-        thickness: number;
-    };
-    radius: {
-        color: string;
-        thickness: number;
-    };
-    default: {
-        color: string;
-        thickness: number;
-    };
-};
-export declare const setupTheme: (customTheme?: Partial<LogicFlow.Theme>, themeMode?: 'radius' | 'dark' | 'colorful' | 'default' | string) => LogicFlow.Theme;
+export declare const setupTheme: (customTheme?: Partial<LogicFlow.Theme>, themeMode?: LogicFlow.ThemeMode | string) => LogicFlow.Theme;
 export declare const addThemeMode: (themeMode: string, style: Partial<LogicFlow.Theme>) => void;
 export declare const removeThemeMode: (themeMode: string) => void;
 export declare const clearThemeMode: () => void;
-export declare const updateTheme: (customTheme?: Partial<LogicFlow.Theme>, themeMode?: 'radius' | 'dark' | 'colorful' | 'default' | string) => LogicFlow.Theme;
+export declare const updateTheme: (customTheme?: Partial<LogicFlow.Theme>, themeMode?: LogicFlow.ThemeMode | string) => LogicFlow.Theme;