@logicflow/core 2.0.13 → 2.0.14

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

@@ -5,6 +5,14 @@ export type IPolygonProps = {
     x?: number;
     y?: number;
     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/es/view/shape/Polygon.js

@@ -27,8 +27,48 @@ var __read = (this && this.__read) || function (o, n) {
 };
 import { jsx as _jsx } from "preact/jsx-runtime";
 import { forEach, toPairs } from 'lodash-es';
+/**
+ * 生成带圆角的多边形路径
+ * @param points 多边形顶点坐标数组
+ * @param radius 圆角半径
+ * @returns SVG 路径字符串
+ */
+export 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;
+}
 export function Polygon(props) {
-    var _a = props.points, points = _a === void 0 ? [] : _a, className = props.className;
+    var _a = props.points, points = _a === void 0 ? [] : _a, className = props.className, radius = props.radius;
     var attrs = {
         fill: 'transparent',
         fillOpacity: 1,
@@ -49,7 +89,14 @@ export function Polygon(props) {
     else {
         attrs.className = 'lf-basic-shape';
     }
-    attrs.points = points.map(function (point) { return point.join(','); }).join(' ');
-    return _jsx("polygon", __assign({}, attrs));
+    if (radius) {
+        var path = createRoundedPolygonPath(points, radius);
+        attrs.d = path;
+        return _jsx("path", __assign({}, attrs));
+    }
+    else {
+        attrs.points = points.map(function (point) { return point.join(','); }).join(' ');
+        return _jsx("polygon", __assign({}, attrs));
+    }
 }
 export default Polygon;

package/lib/LogicFlow.d.ts

@@ -8,6 +8,7 @@ import History from './history';
 import Keyboard from './keyboard';
 import { EventCallback, CallbackArgs, EventArgs } from './event/eventEmitter';
 import { EventType, SegmentDirection } from './constant';
+import { Grid } from './view/overlay';
 import Extension = LogicFlow.Extension;
 import ExtensionConfig = LogicFlow.ExtensionConfig;
 import ExtensionConstructor = LogicFlow.ExtensionConstructor;
@@ -314,7 +315,7 @@ export declare class LogicFlow {
     getAreaElement(leftTopPoint: PointTuple, rightBottomPoint: PointTuple, wholeEdge?: boolean, wholeNode?: boolean, ignoreHideElement?: boolean): (EdgeData | NodeData)[];
     /**
      * 设置元素的自定义属性
-     * @see todo docs link
+     * @see http://logicflow.cn/api/detail#setproperties
      * @param id 元素的id
      * @param properties 自定义属性
      */
@@ -356,12 +357,12 @@ export declare class LogicFlow {
     /**
      * 更新流程图编辑相关设置
      * @param {object} config 编辑配置
-     * @see todo docs link
+     * @see http://logicflow.cn/api/detail#updateeditconfig
      */
     updateEditConfig(config: Partial<IEditConfigType>): void;
     /**
      * 获取流程图当前编辑相关设置
-     * @see todo docs link
+     * @see http://logicflow.cn/api/detail#geteditconfig
      */
     getEditConfig(): _Model.IEditConfigType;
     /*********************************************************
@@ -372,7 +373,12 @@ export declare class LogicFlow {
      * @param { object } style 自定义主题样式
      * todo docs link
      */
-    setTheme(style: Partial<LogicFlow.Theme>): void;
+    setTheme(style: Partial<LogicFlow.Theme>, themeMode?: 'radius' | 'dark' | 'colorful' | 'default' | string): void;
+    /**
+     * 获取当前主题样式
+     * @see todo docs link
+     */
+    getTheme(): LogicFlow.Theme;
     private focusByElement;
     private focusByCoordinate;
     /**
@@ -568,6 +574,14 @@ export declare class LogicFlow {
      * @param props
      */
     static use(extension: ExtensionConstructor | ExtensionDefinition, props?: Record<string, unknown>): void;
+    /**
+     * 添加主题模式
+     * @param themeMode 主题模式
+     * @param style 主题样式
+     */
+    static addThemeMode(themeMode: string, style: Partial<LogicFlow.Theme>): void;
+    static removeThemeMode(themeMode: string): void;
+    static clearThemeMode(): void;
     private installPlugins;
     /**
      * 加载插件-内部方法
@@ -898,6 +912,10 @@ export declare namespace LogicFlow {
         refX?: number;
         refY?: number;
         verticalLength: number;
+        endArrowType?: 'solid' | 'hollow' | 'diamond' | 'circle' | 'none';
+        startArrowType?: 'solid' | 'hollow' | 'diamond' | 'circle' | 'none';
+        strokeLinecap?: 'butt' | 'round' | 'square';
+        strokeLinejoin?: 'miter' | 'round' | 'bevel';
     } & CommonTheme;
     type ArrowAttributesType = {
         d: string;
@@ -945,6 +963,8 @@ export declare namespace LogicFlow {
         edgeAdjust: CircleTheme;
         outline: OutlineTheme;
         edgeAnimation: EdgeAnimation;
+        background?: boolean | Partial<LFOptions.BackgroundConfig>;
+        grid?: boolean | Partial<Grid.GridOptions>;
     }
 }
 export declare namespace LogicFlow {

package/lib/LogicFlow.js

@@ -752,7 +752,7 @@ var LogicFlow = /** @class */ (function () {
     };
     /**
      * 设置元素的自定义属性
-     * @see todo docs link
+     * @see http://logicflow.cn/api/detail#setproperties
      * @param id 元素的id
      * @param properties 自定义属性
      */
@@ -809,7 +809,7 @@ var LogicFlow = /** @class */ (function () {
     /**
      * 更新流程图编辑相关设置
      * @param {object} config 编辑配置
-     * @see todo docs link
+     * @see http://logicflow.cn/api/detail#updateeditconfig
      */
     LogicFlow.prototype.updateEditConfig = function (config) {
         var _a = this.graphModel, editConfigModel = _a.editConfigModel, transformModel = _a.transformModel;
@@ -828,7 +828,7 @@ var LogicFlow = /** @class */ (function () {
     };
     /**
      * 获取流程图当前编辑相关设置
-     * @see todo docs link
+     * @see http://logicflow.cn/api/detail#geteditconfig
      */
     LogicFlow.prototype.getEditConfig = function () {
         return this.graphModel.editConfigModel.getConfig();
@@ -841,8 +841,15 @@ var LogicFlow = /** @class */ (function () {
      * @param { object } style 自定义主题样式
      * todo docs link
      */
-    LogicFlow.prototype.setTheme = function (style) {
-        this.graphModel.setTheme(style);
+    LogicFlow.prototype.setTheme = function (style, themeMode) {
+        this.graphModel.setTheme(style, themeMode);
+    };
+    /**
+     * 获取当前主题样式
+     * @see todo docs link
+     */
+    LogicFlow.prototype.getTheme = function () {
+        return this.graphModel.getTheme();
     };
     LogicFlow.prototype.focusByElement = function (id) {
         var coordinate = undefined;
@@ -1157,6 +1164,20 @@ var LogicFlow = /** @class */ (function () {
             _a.props = props,
             _a));
     };
+    /**
+     * 添加主题模式
+     * @param themeMode 主题模式
+     * @param style 主题样式
+     */
+    LogicFlow.addThemeMode = function (themeMode, style) {
+        (0, util_1.addThemeMode)(themeMode, style);
+    };
+    LogicFlow.removeThemeMode = function (themeMode) {
+        (0, util_1.removeThemeMode)(themeMode);
+    };
+    LogicFlow.clearThemeMode = function () {
+        (0, util_1.clearThemeMode)();
+    };
     LogicFlow.prototype.installPlugins = function (disabledPlugins) {
         var _this = this;
         if (disabledPlugins === void 0) { disabledPlugins = []; }
@@ -1219,6 +1240,7 @@ var LogicFlow = /** @class */ (function () {
         this.graphModel.destroy();
         this.tool.destroy();
         this.history.destroy();
+        this.clearThemeMode();
         for (var extensionName in this.extension) {
             var extensionInstance = this.extension[extensionName];
             if ('destroy' in extensionInstance) {

package/lib/model/GraphModel.d.ts

@@ -17,6 +17,7 @@ export declare class GraphModel {
     width: number;
     height: number;
     theme: LogicFlow.Theme;
+    customStyles: object;
     grid: Grid.GridOptions;
     readonly eventCenter: EventEmitter;
     readonly modelMap: Map<string, LogicFlow.GraphElementCtor>;
@@ -394,7 +395,39 @@ export declare class GraphModel {
      * 设置主题
      * todo docs link
      */
-    setTheme(style: Partial<LogicFlow.Theme>): void;
+    setTheme(style: Partial<LogicFlow.Theme>, themeMode?: 'radius' | 'dark' | 'colorful' | 'default' | string): void;
+    /**
+     * 设置主题
+     * todo docs link
+     */
+    getTheme(): {
+        background: boolean | LFOptions.BackgroundConfig | undefined;
+        grid: Grid.GridOptions;
+        baseNode: LogicFlow.CommonTheme;
+        baseEdge: LogicFlow.CommonTheme;
+        rect: LogicFlow.CommonTheme;
+        circle: LogicFlow.CommonTheme;
+        diamond: LogicFlow.CommonTheme;
+        ellipse: LogicFlow.CommonTheme;
+        polygon: LogicFlow.CommonTheme;
+        line: LogicFlow.CommonTheme;
+        polyline: LogicFlow.CommonTheme;
+        bezier: LogicFlow.EdgeBezierTheme;
+        anchorLine: LogicFlow.AnchorLineTheme;
+        text: LogicFlow.TextNodeTheme;
+        nodeText: LogicFlow.NodeTextTheme;
+        edgeText: LogicFlow.EdgeTextTheme;
+        inputText?: LogicFlow.CommonTheme | undefined;
+        anchor: LogicFlow.AnchorTheme;
+        arrow: LogicFlow.ArrowTheme;
+        snapline: LogicFlow.CommonTheme;
+        rotateControl: LogicFlow.CommonTheme;
+        resizeControl: LogicFlow.CommonTheme;
+        resizeOutline: LogicFlow.CommonTheme;
+        edgeAdjust: LogicFlow.CommonTheme;
+        outline: LogicFlow.OutlineTheme;
+        edgeAnimation: LogicFlow.EdgeAnimation;
+    };
     /**
      * 更新网格配置
      */

package/lib/model/GraphModel.js

@@ -110,8 +110,11 @@ var GraphModel = /** @class */ (function () {
             // TODO：需要让用户设置成 0 吗？后面可以讨论一下
             this.gridSize = grid.size || 1; // 默认 gridSize 设置为 1
         }
-        this.theme = (0, util_1.setupTheme)(options.style);
+        this.customStyles = options.style || {};
         this.grid = overlay_1.Grid.getGridOptions(grid !== null && grid !== void 0 ? grid : false);
+        this.theme = (0, util_1.setupTheme)(options.style, options.themeMode);
+        this.theme.grid = (0, lodash_es_1.cloneDeep)(this.grid);
+        this.theme.background = (0, lodash_es_1.cloneDeep)(this.background);
         this.edgeType = options.edgeType || 'polyline';
         this.animation = (0, util_1.setupAnimation)(animation);
         this.overlapMode = options.overlapMode || constant_1.OverlapMode.DEFAULT;
@@ -1304,8 +1307,33 @@ var GraphModel = /** @class */ (function () {
      * 设置主题
      * todo docs link
      */
-    GraphModel.prototype.setTheme = function (style) {
-        this.theme = (0, util_1.updateTheme)(__assign(__assign({}, this.theme), style));
+    GraphModel.prototype.setTheme = function (style, themeMode) {
+        var _a;
+        if (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])));
+        }
+        if (style.background) {
+            this.updateBackgroundOptions(style.background);
+        }
+        if (style.grid) {
+            var formattedGrid = overlay_1.Grid.getGridOptions((_a = style.grid) !== null && _a !== void 0 ? _a : false);
+            this.updateGridOptions(formattedGrid);
+        }
+        this.theme = (0, util_1.updateTheme)(__assign(__assign({}, this.customStyles), style), themeMode);
+        this.customStyles = __assign(__assign({}, this.customStyles), style);
+    };
+    /**
+     * 设置主题
+     * todo docs link
+     */
+    GraphModel.prototype.getTheme = function () {
+        var _a = this, background = _a.background, grid = _a.grid;
+        var theme = __assign(__assign({}, (0, lodash_es_1.cloneDeep)(this.theme)), { background: background, grid: grid });
+        return theme;
     };
     /**
      * 更新网格配置
@@ -1641,6 +1669,9 @@ var GraphModel = /** @class */ (function () {
     __decorate([
         mobx_1.action
     ], GraphModel.prototype, "setTheme", null);
+    __decorate([
+        mobx_1.action
+    ], GraphModel.prototype, "getTheme", null);
     __decorate([
         mobx_1.action
     ], GraphModel.prototype, "resize", null);

package/lib/model/node/RectNodeModel.js

@@ -57,6 +57,7 @@ var RectNodeModel = /** @class */ (function (_super) {
     RectNodeModel.prototype.setAttributes = function () {
         _super.prototype.setAttributes.call(this);
         var _a = this.properties, width = _a.width, height = _a.height, radius = _a.radius;
+        var styleRadius = this.getNodeStyle().radius;
         if (!(0, lodash_es_1.isNil)(width))
             this.width = width;
         if (!(0, lodash_es_1.isNil)(height))
@@ -64,6 +65,8 @@ var RectNodeModel = /** @class */ (function (_super) {
         // 矩形特有
         if (!(0, lodash_es_1.isNil)(radius))
             this.radius = radius;
+        if (!(0, lodash_es_1.isNil)(styleRadius))
+            this.radius = styleRadius;
     };
     RectNodeModel.prototype.getDefaultAnchor = function () {
         var _a = this, x = _a.x, y = _a.y, width = _a.width, height = _a.height;

package/lib/options.d.ts

@@ -66,6 +66,7 @@ export declare namespace Options {
         idGenerator?: (type?: string) => string;
         edgeGenerator?: EdgeGeneratorType;
         customTrajectory?: (props: CustomAnchorLineProps) => h.JSX.Element;
+        themeMode?: 'radius' | 'dark' | 'colorful';
         [key: string]: unknown;
     }
     interface ManualBooleans {

package/lib/util/theme.d.ts

@@ -1,4 +1,69 @@
 import LogicFlow from '../LogicFlow';
 export declare const defaultTheme: LogicFlow.Theme;
-export declare const setupTheme: (customTheme?: Partial<LogicFlow.Theme>) => LogicFlow.Theme;
-export declare const updateTheme: (customTheme?: Partial<LogicFlow.Theme>) => 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 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;

package/lib/util/theme.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateTheme = exports.setupTheme = exports.defaultTheme = void 0;
+exports.updateTheme = exports.clearThemeMode = exports.removeThemeMode = exports.addThemeMode = exports.setupTheme = exports.gridModeMap = exports.defaultGrid = exports.colorfulGrid = exports.darkGrid = exports.backgroundModeMap = exports.defaultBackground = exports.colorfulBackground = exports.darkBackground = exports.themeModeMap = exports.colorfulMode = exports.darkMode = exports.radiusMode = exports.defaultTheme = void 0;
 var lodash_es_1 = require("lodash-es");
 exports.defaultTheme = {
     baseNode: {
@@ -119,9 +119,171 @@ exports.defaultTheme = {
         strokeDasharray: '3,3',
     },
 };
+exports.radiusMode = {
+    rect: { radius: 8 },
+    diamond: { radius: 8 },
+    polygon: { radius: 8 },
+    polyline: { radius: 8 },
+    arrow: {
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        offset: 10,
+        verticalLength: 5, // 箭头垂直于边的距离
+    },
+    snapline: {
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        stroke: '#949494',
+        strokeWidth: 1,
+    },
+    outline: {
+        radius: 8,
+        fill: 'transparent',
+        stroke: '#949494',
+        strokeDasharray: '3,3',
+        hover: {
+            stroke: '#949494',
+        },
+    },
+    resizeOutline: {
+        radius: 8,
+        fill: 'none',
+        stroke: 'transparent', // 矩形默认不显示调整边框
+        strokeWidth: 1,
+        strokeDasharray: '3,3',
+    },
+};
+exports.darkMode = {
+    baseNode: {
+        fill: '#23272e',
+        stroke: '#fefeff',
+    },
+    baseEdge: {
+        stroke: '#fefeff',
+    },
+    rect: { radius: 8 },
+    diamond: { radius: 8 },
+    polygon: { radius: 8 },
+    polyline: { radius: 8 },
+    nodeText: {
+        color: '#fefeff',
+        overflowMode: 'default',
+        fontSize: 12,
+        lineHeight: 1.2,
+    },
+    arrow: {
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        offset: 10,
+        verticalLength: 5, // 箭头垂直于边的距离
+    },
+    snapline: {
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        stroke: '#949494',
+        strokeWidth: 1,
+    },
+    outline: {
+        radius: 8,
+        fill: 'transparent',
+        stroke: '#949494',
+        strokeDasharray: '3,3',
+        hover: {
+            stroke: '#949494',
+        },
+    },
+    resizeOutline: {
+        radius: 8,
+        fill: 'none',
+        stroke: 'transparent', // 矩形默认不显示调整边框
+        strokeWidth: 1,
+        strokeDasharray: '3,3',
+    },
+};
+exports.colorfulMode = {
+    rect: { fill: '#72CBFF', stroke: '#3ABDF9', radius: 8 },
+    circle: { fill: '#FFE075', stroke: '#F9CE3A', radius: 8 },
+    ellipse: { fill: '#FFA8A8', stroke: '#FF6B66', radius: 8 },
+    text: { fill: '#72CBFF', radius: 8 },
+    diamond: { fill: '#96F7AF', stroke: '#40EF7E', radius: 8 },
+    polygon: { fill: '#E0A8FF', stroke: '#C271FF', radius: 8 },
+    polyline: { radius: 8 },
+    arrow: {
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        offset: 10,
+        verticalLength: 5, // 箭头垂直于边的距离
+    },
+    snapline: {
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        stroke: '#949494',
+        strokeWidth: 1,
+    },
+    outline: {
+        radius: 8,
+        fill: 'transparent',
+        stroke: '#949494',
+        strokeDasharray: '3,3',
+        hover: {
+            stroke: '#949494',
+        },
+    },
+    resizeOutline: {
+        radius: 8,
+        fill: 'none',
+        stroke: 'transparent', // 矩形默认不显示调整边框
+        strokeWidth: 1,
+        strokeDasharray: '3,3',
+    },
+};
+exports.themeModeMap = {
+    colorful: exports.colorfulMode,
+    dark: exports.darkMode,
+    radius: exports.radiusMode,
+    default: exports.defaultTheme,
+};
+// 不同主题的背景色
+exports.darkBackground = {
+    background: '#23272e',
+};
+exports.colorfulBackground = {
+    background: '#fefeff',
+};
+exports.defaultBackground = {
+    background: '#ffffff',
+};
+exports.backgroundModeMap = {
+    colorful: exports.colorfulBackground,
+    dark: exports.darkBackground,
+    radius: exports.defaultBackground,
+    default: exports.defaultBackground,
+};
+// 不同主题的网格样式
+exports.darkGrid = {
+    color: '#66676a',
+    thickness: 1,
+};
+exports.colorfulGrid = {
+    color: '#dadada',
+    thickness: 1,
+};
+exports.defaultGrid = {
+    color: '#acacac',
+    thickness: 1,
+};
+exports.gridModeMap = {
+    colorful: exports.colorfulGrid,
+    dark: exports.darkGrid,
+    radius: exports.defaultGrid,
+    default: exports.defaultGrid,
+};
 /* 主题（全局样式）相关工具方法 */
-var setupTheme = function (customTheme) {
+var setupTheme = function (customTheme, themeMode) {
     var theme = (0, lodash_es_1.cloneDeep)(exports.defaultTheme);
+    if (themeMode) {
+        theme = (0, lodash_es_1.merge)(theme, exports.themeModeMap[themeMode]);
+    }
     if (customTheme) {
         /**
          * 为了不让默认样式被覆盖，使用 merge 方法
@@ -155,5 +317,33 @@ var setupTheme = function (customTheme) {
     return theme;
 };
 exports.setupTheme = setupTheme;
+var addThemeMode = function (themeMode, style) {
+    if (exports.themeModeMap[themeMode]) {
+        console.warn("theme mode ".concat(themeMode, " already exists"));
+        return;
+    }
+    exports.themeModeMap[themeMode] = style;
+    exports.backgroundModeMap[themeMode] = style.background || exports.defaultBackground;
+    exports.gridModeMap[themeMode] = style.grid || exports.defaultGrid;
+};
+exports.addThemeMode = addThemeMode;
+var removeThemeMode = function (themeMode) {
+    delete exports.themeModeMap[themeMode];
+    delete exports.backgroundModeMap[themeMode];
+    delete exports.gridModeMap[themeMode];
+};
+exports.removeThemeMode = removeThemeMode;
+var clearThemeMode = function () {
+    var resetTheme = {
+        colorful: {},
+        dark: {},
+        radius: {},
+        default: {},
+    };
+    (0, lodash_es_1.assign)(exports.themeModeMap, resetTheme);
+    (0, lodash_es_1.assign)(exports.backgroundModeMap, resetTheme);
+    (0, lodash_es_1.assign)(exports.gridModeMap, resetTheme);
+};
+exports.clearThemeMode = clearThemeMode;
 /* 更新 theme 方法 */
 exports.updateTheme = exports.setupTheme;

package/lib/view/edge/BaseEdge.d.ts

@@ -44,6 +44,10 @@ export declare abstract class BaseEdge<P extends IProps> extends Component<P, IE
      * 定义边的箭头，不支持重写。请使用getStartArrow和getEndArrow
      */
     private getArrow;
+    /**
+     * Private helper method to generate arrow path based on type and parameters
+     */
+    private getArrowPath;
     /**
      * @overridable 可重写，自定义边起点箭头形状。
      * @example