@logicflow/core 2.2.0 → 2.2.2

package/lib/model/GraphModel.d.ts

@@ -17,7 +17,8 @@ export declare class GraphModel {
     width: number;
     height: number;
     theme: LogicFlow.Theme;
-    customStyles: object;
+    themeMode: LogicFlow.ThemeMode | string;
+    customStyles: LogicFlow.Theme;
     grid: Grid.GridOptions;
     readonly eventCenter: EventEmitter;
     readonly modelMap: Map<string, LogicFlow.GraphElementCtor>;
@@ -30,6 +31,7 @@ export declare class GraphModel {
     animation?: boolean | LFOptions.AnimationConfig;
     idGenerator?: (type?: string) => string | undefined;
     edgeGenerator: LFOptions.Definition['edgeGenerator'];
+    customTargetAnchor?: LFOptions.Definition['customTargetAnchor'];
     nodeModelMap: Map<string, BaseNodeModel>;
     edgeModelMap: Map<string, BaseEdgeModel>;
     elementsModelMap: Map<string, BaseNodeModel | BaseEdgeModel>;
@@ -403,7 +405,7 @@ export declare class GraphModel {
      * 设置主题
      * todo docs link
      */
-    setTheme(style: Partial<LogicFlow.Theme>, themeMode?: 'radius' | 'dark' | 'colorful' | 'default' | string): void;
+    setTheme(style: Partial<LogicFlow.Theme>, themeMode?: LogicFlow.ThemeMode | string): void;
     /**
      * 设置主题
      * todo docs link
@@ -418,6 +420,7 @@ export declare class GraphModel {
         diamond: LogicFlow.CommonTheme;
         ellipse: LogicFlow.CommonTheme;
         polygon: LogicFlow.CommonTheme;
+        html: LogicFlow.CommonTheme;
         line: LogicFlow.CommonTheme;
         polyline: LogicFlow.CommonTheme;
         bezier: LogicFlow.EdgeBezierTheme;
@@ -432,8 +435,13 @@ export declare class GraphModel {
         rotateControl: LogicFlow.CommonTheme;
         resizeControl: LogicFlow.CommonTheme;
         resizeOutline: LogicFlow.CommonTheme;
+        multiSelect?: {
+            xPadding?: number | undefined;
+            yPadding?: number | undefined;
+        } | undefined;
         edgeAdjust: LogicFlow.CommonTheme;
         outline: LogicFlow.OutlineTheme;
+        edgeOutline: LogicFlow.OutlineTheme;
         edgeAnimation: LogicFlow.EdgeAnimation;
     };
     /**

package/lib/model/GraphModel.js

@@ -69,6 +69,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
@@ -102,7 +103,10 @@ 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;
+        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 = constant_1.gridModeMap[this.themeMode] || constant_1.gridModeMap['default'];
+        var initialBackground = constant_1.backgroundModeMap[this.themeMode] || constant_1.backgroundModeMap['default'];
         this.rootEl = container;
         this.partial = !!partial;
         this.background = background;
@@ -111,11 +115,14 @@ var GraphModel = /** @class */ (function () {
             // TODO：需要让用户设置成 0 吗？后面可以讨论一下
             this.gridSize = grid.size || 1; // 默认 gridSize 设置为 1
         }
-        this.customStyles = options.style || {};
-        this.grid = overlay_1.Grid.getGridOptions(grid !== null && grid !== void 0 ? grid : false);
+        this.customStyles = (options.style || {});
         this.theme = (0, util_1.setupTheme)(options.style, options.themeMode);
+        this.grid = overlay_1.Grid.getGridOptions((0, lodash_es_1.assign)({}, initialGrid, grid));
         this.theme.grid = (0, lodash_es_1.cloneDeep)(this.grid);
-        this.theme.background = (0, lodash_es_1.cloneDeep)(this.background);
+        if (background) {
+            this.background = (0, lodash_es_1.cloneDeep)((0, lodash_es_1.assign)({}, initialBackground, background));
+            this.theme.background = (0, lodash_es_1.cloneDeep)((0, lodash_es_1.assign)({}, initialBackground, background));
+        }
         this.edgeType = options.edgeType || 'polyline';
         this.animation = (0, util_1.setupAnimation)(animation);
         this.overlapMode = options.overlapMode || constant_1.OverlapMode.DEFAULT;
@@ -130,6 +137,10 @@ var GraphModel = /** @class */ (function () {
                 for (var entries_1 = __values(entries), entries_1_1 = entries_1.next(); !entries_1_1.done; entries_1_1 = entries_1.next()) {
                     var entry = entries_1_1.value;
                     if (entry.target === _this.rootEl) {
+                        // 检查元素是否仍在DOM中
+                        var isElementInDOM = document.body.contains(_this.rootEl);
+                        if (!isElementInDOM)
+                            return;
                         _this.resize();
                         _this.eventCenter.emit('graph:resize', {
                             target: _this.rootEl,
@@ -157,6 +168,7 @@ var GraphModel = /** @class */ (function () {
         this.idGenerator = idGenerator;
         this.edgeGenerator = (0, util_1.createEdgeGenerator)(this, edgeGenerator);
         this.customTrajectory = customTrajectory;
+        this.customTargetAnchor = customTargetAnchor;
     }
     Object.defineProperty(GraphModel.prototype, "nodesMap", {
         get: function () {
@@ -497,7 +509,7 @@ var GraphModel = /** @class */ (function () {
                 edgeDragging = true;
                 break;
             }
-            else {
+            if (!edgeMode.virtual) {
                 edges.push(edgeMode.getHistoryData());
             }
         }
@@ -1337,11 +1349,12 @@ var GraphModel = /** @class */ (function () {
     GraphModel.prototype.setTheme = function (style, themeMode) {
         var _a;
         if (themeMode) {
+            this.themeMode = themeMode;
             // 修改背景颜色
-            util_1.backgroundModeMap[themeMode] &&
-                this.updateBackgroundOptions(__assign(__assign({}, (typeof this.background === 'object' ? this.background : {})), util_1.backgroundModeMap[themeMode]));
-            util_1.gridModeMap[themeMode] &&
-                this.updateGridOptions(overlay_1.Grid.getGridOptions(__assign(__assign({}, this.grid), util_1.gridModeMap[themeMode])));
+            constant_1.backgroundModeMap[themeMode] &&
+                this.updateBackgroundOptions(__assign(__assign({}, (typeof this.background === 'object' ? this.background : {})), constant_1.backgroundModeMap[themeMode]));
+            constant_1.gridModeMap[themeMode] &&
+                this.updateGridOptions(overlay_1.Grid.getGridOptions(__assign(__assign({}, this.grid), constant_1.gridModeMap[themeMode])));
         }
         if (style.background) {
             this.updateBackgroundOptions(style.background);
@@ -1389,12 +1402,30 @@ var GraphModel = /** @class */ (function () {
      * 重新设置画布的宽高
      */
     GraphModel.prototype.resize = function (width, height) {
-        this.width = width !== null && width !== void 0 ? width : this.rootEl.getBoundingClientRect().width;
-        this.isContainerWidth = (0, lodash_es_1.isNil)(width);
-        this.height = height !== null && height !== void 0 ? height : this.rootEl.getBoundingClientRect().height;
-        this.isContainerHeight = (0, lodash_es_1.isNil)(height);
-        if (!this.width || !this.height) {
-            console.warn('渲染画布的时候无法获取画布宽高，请确认在container已挂载到DOM。@see https://github.com/didi/LogicFlow/issues/675');
+        // 检查当前实例是否已被销毁或rootEl不存在
+        if (!this.rootEl)
+            return;
+        // 检查元素是否仍在DOM中
+        var isElementInDOM = document.body.contains(this.rootEl);
+        if (!isElementInDOM)
+            return;
+        // 检查元素是否可见
+        var isVisible = this.rootEl.offsetParent !== null;
+        if (!isVisible)
+            return;
+        try {
+            this.width = width !== null && width !== void 0 ? width : this.rootEl.getBoundingClientRect().width;
+            this.isContainerWidth = (0, lodash_es_1.isNil)(width);
+            this.height = height !== null && height !== void 0 ? height : this.rootEl.getBoundingClientRect().height;
+            this.isContainerHeight = (0, lodash_es_1.isNil)(height);
+            // 只有在元素可见且应该有宽高的情况下才显示警告
+            if (isVisible && (!this.width || !this.height)) {
+                console.warn('渲染画布的时候无法获取画布宽高，请确认在container已挂载到DOM。@see https://github.com/didi/LogicFlow/issues/675');
+            }
+        }
+        catch (error) {
+            // 捕获可能的DOM操作错误
+            console.warn('获取画布宽高时发生错误:', error);
         }
     };
     /**
@@ -1534,6 +1565,9 @@ var GraphModel = /** @class */ (function () {
     __decorate([
         mobx_1.observable
     ], GraphModel.prototype, "theme", void 0);
+    __decorate([
+        mobx_1.observable
+    ], GraphModel.prototype, "themeMode", void 0);
     __decorate([
         mobx_1.observable
     ], GraphModel.prototype, "grid", void 0);

package/lib/model/TransformModel.js

@@ -33,15 +33,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/lib/model/edge/BaseEdgeModel.js

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

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

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

package/lib/model/edge/PolylineEdgeModel.js

@@ -72,12 +72,139 @@ var PolylineEdgeModel = /** @class */ (function (_super) {
         return _this;
     }
     PolylineEdgeModel.prototype.initEdgeData = function (data) {
-        this.offset = (0, lodash_es_1.get)(data, 'properties.offset', 30);
+        var providedOffset = (0, lodash_es_1.get)(data, 'properties.offset');
+        // 当用户未传入 offset 时，按“箭头与折线重叠长度 + 5”作为默认值
+        // 其中“重叠长度”采用箭头样式中的 offset（沿边方向的长度）
+        this.offset =
+            typeof providedOffset === 'number'
+                ? providedOffset
+                : this.getDefaultOffset();
         if (data.pointsList) {
-            this.pointsList = data.pointsList;
+            var corrected = this.orthogonalizePath(data.pointsList);
+            data.pointsList = corrected;
+            this.pointsList = corrected;
         }
         _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();
+        }
+    };
+    PolylineEdgeModel.prototype.orthogonalizePath = function (points) {
+        // 输入非法或不足两点时直接返回副本
+        if (!Array.isArray(points) || points.length < 2) {
+            return points;
+        }
+        // pushUnique: 向数组中添加唯一点，避免重复
+        var pushUnique = function (arr, p) {
+            var last = arr[arr.length - 1];
+            if (!last || last.x !== p.x || last.y !== p.y) {
+                arr.push({ x: p.x, y: p.y });
+            }
+        };
+        // isAxisAligned: 检查两点是否在同一条轴上
+        var isAxisAligned = function (a, b) { return a.x === b.x || a.y === b.y; };
+        // manhattanDistance: 计算两点在曼哈顿距离上的距离
+        var manhattanDistance = function (a, b) {
+            return Math.abs(a.x - b.x) + Math.abs(a.y - b.y);
+        };
+        // 1) 生成严格正交路径，尽量延续前一段方向以减少折点
+        var orthogonal = [];
+        pushUnique(orthogonal, points[0]);
+        // previousDirection: 记录前一段的方向，用于判断当前段的PreferredCorner
+        var previousDirection;
+        // 遍历所有点对，生成正交路径
+        for (var i = 0; i < points.length - 1; i++) {
+            var current = orthogonal[orthogonal.length - 1];
+            var next = points[i + 1];
+            if (!current || !next)
+                continue;
+            if (isAxisAligned(current, next)) {
+                pushUnique(orthogonal, next);
+                previousDirection =
+                    current.x === next.x
+                        ? constant_1.SegmentDirection.VERTICAL
+                        : constant_1.SegmentDirection.HORIZONTAL;
+                continue;
+            }
+            var cornerHV = { x: next.x, y: current.y };
+            var cornerVH = { x: current.x, y: next.y };
+            // 根据前一段的方向，优先选择能延续该方向的拐角点，以减少折点数量；
+            // 若前一段为垂直方向，则优先选择垂直-水平拐角(cornerVH)；
+            // 若前一段为水平方向，则优先选择水平-垂直拐角(cornerHV)；
+            // 若前一段无方向（初始情况），则比较两个拐角的曼哈顿距离，选更近者。
+            var preferredCorner = previousDirection === constant_1.SegmentDirection.VERTICAL
+                ? cornerVH
+                : previousDirection === constant_1.SegmentDirection.HORIZONTAL
+                    ? cornerHV
+                    : manhattanDistance(current, cornerHV) <=
+                        manhattanDistance(current, cornerVH)
+                        ? cornerHV
+                        : cornerVH;
+            if (preferredCorner.x !== current.x || preferredCorner.y !== current.y) {
+                pushUnique(orthogonal, preferredCorner);
+            }
+            pushUnique(orthogonal, next);
+            var a = orthogonal[orthogonal.length - 2];
+            var b = orthogonal[orthogonal.length - 1];
+            previousDirection =
+                a && b
+                    ? a.x === b.x
+                        ? constant_1.SegmentDirection.VERTICAL
+                        : constant_1.SegmentDirection.HORIZONTAL
+                    : previousDirection;
+        }
+        // 2) 去除冗余共线中间点
+        var simplified = [];
+        for (var i = 0; i < orthogonal.length; i++) {
+            var prev = orthogonal[i - 1];
+            var curr = orthogonal[i];
+            var next = orthogonal[i + 1];
+            // 如果当前点与前一个点和后一个点在同一条水平线或垂直线上，则跳过该点，去除冗余的共线中间点
+            if (prev &&
+                curr &&
+                next &&
+                ((prev.x === curr.x && curr.x === next.x) || // 水平共线
+                    (prev.y === curr.y && curr.y === next.y)) // 垂直共线
+            ) {
+                continue;
+            }
+            pushUnique(simplified, curr);
+        }
+        // 3) 保留原始起点与终点位置
+        if (simplified.length >= 2) {
+            simplified[0] = { x: points[0].x, y: points[0].y };
+            simplified[simplified.length - 1] = {
+                x: points[points.length - 1].x,
+                y: points[points.length - 1].y,
+            };
+        }
+        // 4) 结果校验：任意相邻段都必须为水平/垂直；失败则退化为起止两点
+        var isOrthogonal = simplified.length < 2 ||
+            simplified.every(function (_, idx, arr) {
+                if (idx === 0)
+                    return true;
+                return isAxisAligned(arr[idx - 1], arr[idx]);
+            });
+        return isOrthogonal
+            ? simplified
+            : [
+                { x: points[0].x, y: points[0].y },
+                { x: points[points.length - 1].x, y: points[points.length - 1].y },
+            ];
+    };
+    /**
+     * 计算默认 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);
@@ -289,7 +416,7 @@ var PolylineEdgeModel = /** @class */ (function (_super) {
         return list;
     };
     PolylineEdgeModel.prototype.updatePath = function (pointList) {
-        this.pointsList = pointList;
+        this.pointsList = this.orthogonalizePath(pointList);
         this.points = this.getPath(this.pointsList);
     };
     PolylineEdgeModel.prototype.getData = function () {
@@ -324,8 +451,10 @@ var PolylineEdgeModel = /** @class */ (function (_super) {
             x: this.endPoint.x,
             y: this.endPoint.y,
         }, this.sourceNode, this.targetNode, this.offset || 0);
-        this.pointsList = pointsList;
-        this.points = pointsList.map(function (point) { return "".concat(point.x, ",").concat(point.y); }).join(' ');
+        this.pointsList = this.orthogonalizePath(pointsList);
+        this.points = this.pointsList
+            .map(function (point) { return "".concat(point.x, ",").concat(point.y); })
+            .join(' ');
     };
     PolylineEdgeModel.prototype.updateStartPoint = function (anchor) {
         this.startPoint = Object.assign({}, anchor);
@@ -547,13 +676,13 @@ var PolylineEdgeModel = /** @class */ (function (_super) {
     // 起终点拖拽调整过程中，进行折线路径更新
     PolylineEdgeModel.prototype.updateAfterAdjustStartAndEnd = function (_a) {
         var startPoint = _a.startPoint, endPoint = _a.endPoint, sourceNode = _a.sourceNode, targetNode = _a.targetNode;
-        this.pointsList = (0, util_1.getPolylinePoints)({
+        this.pointsList = this.orthogonalizePath((0, util_1.getPolylinePoints)({
             x: startPoint.x,
             y: startPoint.y,
         }, {
             x: endPoint.x,
             y: endPoint.y,
-        }, sourceNode, targetNode, this.offset || 0);
+        }, sourceNode, targetNode, this.offset || 0));
         this.initPoints();
     };
     __decorate([

package/lib/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/lib/model/node/BaseNodeModel.js

@@ -382,7 +382,12 @@ var BaseNodeModel = /** @class */ (function () {
     };
     BaseNodeModel.prototype.getResizeOutlineStyle = function () {
         var resizeOutline = this.graphModel.theme.resizeOutline;
-        return (0, lodash_es_1.cloneDeep)(resizeOutline);
+        var attributes = __assign({}, resizeOutline);
+        if (this.isHovered) {
+            var hoverStyle = resizeOutline.hover || {};
+            attributes = __assign(__assign({}, attributes), hoverStyle);
+        }
+        return (0, lodash_es_1.cloneDeep)(attributes);
     };
     /**
      * @overridable 支持重写
@@ -552,7 +557,9 @@ var BaseNodeModel = /** @class */ (function () {
      * 手动连接边到节点时，需要连接的锚点
      */
     BaseNodeModel.prototype.getTargetAnchor = function (position) {
-        return (0, util_1.getClosestAnchor)(position, this);
+        var _a;
+        var customTargetAnchor = this.graphModel.customTargetAnchor;
+        return ((_a = customTargetAnchor === null || customTargetAnchor === void 0 ? void 0 : customTargetAnchor(this, position)) !== null && _a !== void 0 ? _a : (0, util_1.getClosestAnchor)(position, this));
     };
     /**
      * 获取节点BBox

package/lib/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/lib/model/node/HtmlNodeModel.js

@@ -14,11 +14,23 @@ 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);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HtmlNodeModel = void 0;
+var lodash_es_1 = require("lodash-es");
 var BaseNodeModel_1 = __importDefault(require("./BaseNodeModel"));
 var constant_1 = require("../../constant");
 var HtmlNodeModel = /** @class */ (function (_super) {
@@ -48,6 +60,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), (0, lodash_es_1.cloneDeep)(baseNode)), (0, lodash_es_1.cloneDeep)(html)), (0, lodash_es_1.cloneDeep)(customStyle));
+        return finalStyle;
+    };
     return HtmlNodeModel;
 }(BaseNodeModel_1.default));
 exports.HtmlNodeModel = HtmlNodeModel;

package/lib/model/node/PolygonNodeModel.js

@@ -94,9 +94,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), (0, lodash_es_1.cloneDeep)(polygon)), (0, lodash_es_1.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), (0, lodash_es_1.cloneDeep)(polygon)), (0, lodash_es_1.cloneDeep)(customPolygon)), (0, lodash_es_1.cloneDeep)(customStyle));
     };
     Object.defineProperty(PolygonNodeModel.prototype, "pointsPosition", {
         /**

package/lib/options.d.ts

@@ -1,4 +1,4 @@
-import type { TransformModel } from './model';
+import type { TransformModel, BaseNodeModel, Model } from './model';
 import { createElement as h } from 'preact/compat';
 import LogicFlow from './LogicFlow';
 import { KeyboardDef } from './keyboard';
@@ -21,6 +21,7 @@ export declare namespace Options {
         edge: boolean;
     };
     type EdgeGeneratorType = (sourceNode: LogicFlow.NodeData, targetNode: LogicFlow.NodeData, currentEdge?: Partial<LogicFlow.EdgeConfig>) => any;
+    type customTargetAnchorType = (nodeModel: BaseNodeModel, position: LogicFlow.Point) => Model.AnchorInfo | undefined;
     interface CustomAnchorLineProps {
         sourcePoint: LogicFlow.Point;
         targetPoint: LogicFlow.Point;
@@ -67,8 +68,9 @@ export declare namespace Options {
         disabledTools?: string[];
         idGenerator?: (type?: string) => string;
         edgeGenerator?: EdgeGeneratorType;
+        customTargetAnchor?: customTargetAnchorType;
         customTrajectory?: (props: CustomAnchorLineProps) => h.JSX.Element;
-        themeMode?: 'radius' | 'dark' | 'colorful';
+        themeMode?: LogicFlow.ThemeMode;
         parentTransform?: TransformModel;
         [key: string]: unknown;
     }

package/lib/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/lib/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/lib/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/lib/style/raw.js

@@ -5,4 +5,4 @@ exports.content = void 0;
 /**
  * Auto generated file, do not modify it!
  */
-exports.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";
+exports.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";