@logicflow/core 2.0.12 → 2.0.14

package/es/view/Graph.js

@@ -45,7 +45,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { Component, createRef } from 'preact/compat';
+import { Component } from 'preact/compat';
 import { map, throttle } from 'lodash-es';
 import { CanvasOverlay, ToolOverlay, BackgroundOverlay, Grid, SnaplineOverlay, OutlineOverlay, BezierAdjustOverlay, ModificationOverlay, } from './overlay';
 import { observer } from '..';
@@ -54,10 +54,6 @@ var Graph = /** @class */ (function (_super) {
     __extends(Graph, _super);
     function Graph() {
         var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
-        _this.canvasOverlayRef = createRef();
-        _this.getCanvasOverlay = function () {
-            return _this.canvasOverlayRef.current;
-        };
         _this.handleResize = function () {
             var _a = _this.props, graphModel = _a.graphModel, options = _a.options;
             var width = graphModel.width, height = graphModel.height, isContainerWidth = graphModel.isContainerWidth, isContainerHeight = graphModel.isContainerHeight;
@@ -114,9 +110,9 @@ var Graph = /** @class */ (function (_super) {
         }
         var fakeNode = graphModel.fakeNode, editConfigModel = graphModel.editConfigModel, background = graphModel.background;
         var adjustEdge = editConfigModel.adjustEdge;
-        return (_jsxs("div", { className: "lf-graph", "flow-id": graphModel.flowId, style: style, children: [_jsxs(CanvasOverlay, { ref: this.canvasOverlayRef, graphModel: graphModel, dnd: dnd, children: [_jsx("g", { className: "lf-base", children: map(graphModel.sortElements, function (nodeModel) {
+        return (_jsxs("div", { className: "lf-graph", "flow-id": graphModel.flowId, style: style, children: [_jsxs(CanvasOverlay, { graphModel: graphModel, dnd: dnd, children: [_jsx("g", { className: "lf-base", children: map(graphModel.sortElements, function (nodeModel) {
                                 return _this.getComponent(nodeModel, graphModel);
-                            }) }), fakeNode ? this.getComponent(fakeNode, graphModel) : ''] }), _jsxs(ModificationOverlay, { graphModel: graphModel, children: [_jsx(OutlineOverlay, { graphModel: graphModel }), adjustEdge ? _jsx(BezierAdjustOverlay, { graphModel: graphModel }) : '', options.snapline !== false ? (_jsx(SnaplineOverlay, { snaplineModel: snaplineModel })) : ('')] }), _jsx(ToolOverlay, { graphModel: graphModel, tool: tool, getCanvasOverlay: this.getCanvasOverlay }), background && _jsx(BackgroundOverlay, { background: background }), _jsx(Grid, { graphModel: graphModel })] }));
+                            }) }), fakeNode ? this.getComponent(fakeNode, graphModel) : ''] }), _jsxs(ModificationOverlay, { graphModel: graphModel, children: [_jsx(OutlineOverlay, { graphModel: graphModel }), adjustEdge ? _jsx(BezierAdjustOverlay, { graphModel: graphModel }) : '', options.snapline !== false ? (_jsx(SnaplineOverlay, { snaplineModel: snaplineModel })) : ('')] }), _jsx(ToolOverlay, { graphModel: graphModel, tool: tool }), background && _jsx(BackgroundOverlay, { background: background }), _jsx(Grid, { graphModel: graphModel })] }));
     };
     Graph = __decorate([
         observer

package/es/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

package/es/view/edge/BaseEdge.js

@@ -291,6 +291,31 @@ var BaseEdge = /** @class */ (function (_super) {
         }
         return (_jsx("g", { children: _jsxs("defs", { children: [_jsx("marker", { id: "marker-start-".concat(id), refX: -refX, refY: refY, overflow: "visible", orient: "auto", markerUnits: "userSpaceOnUse", children: this.getStartArrow() }), _jsx("marker", { id: "marker-end-".concat(id), refX: refX, refY: refY, overflow: "visible", orient: theta, markerUnits: "userSpaceOnUse", children: this.getEndArrow() })] }) }));
     };
+    /**
+     * Private helper method to generate arrow path based on type and parameters
+     */
+    BaseEdge.prototype.getArrowPath = function (arrowType, props) {
+        var stroke = props.stroke, _a = props.fill, fill = _a === void 0 ? stroke : _a, strokeWidth = props.strokeWidth, _b = props.offset, offset = _b === void 0 ? 10 : _b, verticalLength = props.verticalLength, strokeLinecap = props.strokeLinecap, strokeLinejoin = props.strokeLinejoin, transform = props.transform;
+        var arrowPath = '';
+        switch (arrowType) {
+            case 'solid':
+                arrowPath = "M".concat(-offset / 4, ",0 L").concat((3 * offset) / 4, ",").concat(verticalLength, " L").concat((3 * offset) / 4, ",-").concat(verticalLength, " Z");
+                break;
+            case 'hollow':
+                arrowPath = "M".concat(-offset / 4, ",0 L").concat((3 * offset) / 4, ",").concat(verticalLength, " L").concat(-offset / 4, ",0 L").concat((3 * offset) / 4, ",-").concat(verticalLength, " L").concat(-offset / 4, ",0 Z");
+                break;
+            case 'diamond':
+                arrowPath = "M".concat(-offset / 2, ",0 L0,").concat(verticalLength, " L").concat(offset / 2, ",0 L0,-").concat(verticalLength, " L").concat(-offset / 2, ",0 Z");
+                break;
+            case 'circle':
+                arrowPath = "M".concat(-offset / 2, ",0 A").concat(offset / 4, ",").concat(offset / 4, " 0 1,0 ").concat(offset / 2, ",0 A").concat(offset / 4, ",").concat(offset / 4, " 0 1,0 ").concat(-offset / 2, ",0 Z");
+                break;
+            default:
+                arrowPath = '';
+                break;
+        }
+        return (_jsx("path", { d: arrowPath, stroke: stroke, fill: fill, strokeWidth: strokeWidth, strokeLinecap: strokeLinecap, strokeLinejoin: strokeLinejoin, transform: transform }));
+    };
     /**
      * @overridable 可重写，自定义边起点箭头形状。
      * @example
@@ -305,7 +330,16 @@ var BaseEdge = /** @class */ (function (_super) {
      * }
      */
     BaseEdge.prototype.getStartArrow = function () {
-        return _jsx("path", {});
+        var model = this.props.model;
+        var _a = model.getArrowStyle(), stroke = _a.stroke, strokeWidth = _a.strokeWidth, offset = _a.offset, verticalLength = _a.verticalLength, _b = _a.startArrowType, startArrowType = _b === void 0 ? 'solid' : _b, strokeLinecap = _a.strokeLinecap, strokeLinejoin = _a.strokeLinejoin;
+        return this.getArrowPath(startArrowType, {
+            stroke: stroke,
+            strokeWidth: strokeWidth,
+            offset: offset,
+            verticalLength: verticalLength,
+            strokeLinecap: strokeLinecap,
+            strokeLinejoin: strokeLinejoin,
+        });
     };
     /**
      * @overridable 可重写，自定义边终点箭头形状。
@@ -322,8 +356,16 @@ var BaseEdge = /** @class */ (function (_super) {
      */
     BaseEdge.prototype.getEndArrow = function () {
         var model = this.props.model;
-        var _a = model.getArrowStyle(), stroke = _a.stroke, strokeWidth = _a.strokeWidth, offset = _a.offset, verticalLength = _a.verticalLength;
-        return (_jsx("path", { stroke: stroke, fill: stroke, strokeWidth: strokeWidth, transform: "rotate(180)", d: "M 0 0 L ".concat(offset, " -").concat(verticalLength, " L ").concat(offset, " ").concat(verticalLength, " Z") }));
+        var _a = model.getArrowStyle(), stroke = _a.stroke, strokeWidth = _a.strokeWidth, offset = _a.offset, verticalLength = _a.verticalLength, _b = _a.endArrowType, endArrowType = _b === void 0 ? 'solid' : _b, strokeLinecap = _a.strokeLinecap, strokeLinejoin = _a.strokeLinejoin;
+        return this.getArrowPath(endArrowType, {
+            stroke: stroke,
+            strokeWidth: strokeWidth,
+            offset: offset,
+            verticalLength: verticalLength,
+            strokeLinecap: strokeLinecap,
+            strokeLinejoin: strokeLinejoin,
+            transform: 'rotate(180)',
+        });
     };
     /**
      * @overridable 可重写，自定义调整边连接节点形状。在开启了adjustEdgeStartAndEnd的时候，会显示调整点。

package/es/view/overlay/Grid.js

@@ -54,8 +54,9 @@ var Grid = /** @class */ (function (_super) {
         return (_jsx("path", { d: d, stroke: color, strokeWidth: strokeWidth / 2, opacity: opacity, fill: "transparent" }));
     };
     Grid.prototype.render = function () {
-        var transformModel = this.props.graphModel.transformModel;
-        var _a = this.gridOptions, type = _a.type, _b = _a.size, size = _b === void 0 ? 1 : _b;
+        var _a = this.props.graphModel, transformModel = _a.transformModel, grid = _a.grid;
+        this.gridOptions = grid;
+        var _b = this.gridOptions, type = _b.type, _c = _b.size, size = _c === void 0 ? 1 : _c;
         var SCALE_X = transformModel.SCALE_X, SKEW_Y = transformModel.SKEW_Y, SKEW_X = transformModel.SKEW_X, SCALE_Y = transformModel.SCALE_Y, TRANSLATE_X = transformModel.TRANSLATE_X, TRANSLATE_Y = transformModel.TRANSLATE_Y;
         var matrixString = [
             SCALE_X,

package/es/view/overlay/ToolOverlay.d.ts

@@ -1,11 +1,10 @@
 import { createElement as h, Component } from 'preact/compat';
-import { CanvasOverlay, OutlineOverlay } from '.';
+import { OutlineOverlay } from '.';
 import { GraphModel } from '../../model';
 import { Tool } from '../../tool';
 type IProps = {
     graphModel: GraphModel;
     tool: Tool;
-    getCanvasOverlay: () => CanvasOverlay | null;
 };
 export declare class ToolOverlay extends Component<IProps> {
     componentDidMount(): void;
@@ -15,7 +14,6 @@ export declare class ToolOverlay extends Component<IProps> {
      */
     getTools(): import("preact").VNode<import("../..").IToolProps>[];
     triggerToolRender(): void;
-    zoomHandler: (e: WheelEvent) => void;
     render(): h.JSX.Element;
 }
 export default OutlineOverlay;

package/es/view/overlay/ToolOverlay.js

@@ -19,31 +19,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { jsx as _jsx } from "preact/jsx-runtime";
 import { createElement as h, Component } from 'preact/compat';
 import { OutlineOverlay } from '.';
@@ -51,13 +26,7 @@ import { observer } from '../..';
 var ToolOverlay = /** @class */ (function (_super) {
     __extends(ToolOverlay, _super);
     function ToolOverlay() {
-        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
-        _this.zoomHandler = function (e) {
-            var _a;
-            // TODO 是否应该使用 dispatchEvent 来触发事件
-            (_a = _this.props.getCanvasOverlay()) === null || _a === void 0 ? void 0 : _a.zoomHandler(e);
-        };
-        return _this;
+        return _super !== null && _super.apply(this, arguments) || this;
     }
     // 在react严格模式下，useEffect会执行两次，但是在LogicFlow内部，则只会触发一次componentDidMount和componentDidUpdate。
     // 其中第一次componentDidMount对应的graphModel为被丢弃的graphModel, 所以不应该生效。
@@ -95,13 +64,7 @@ var ToolOverlay = /** @class */ (function (_super) {
     };
     ToolOverlay.prototype.render = function () {
         var graphModel = this.props.graphModel;
-        return (_jsx("div", { className: "lf-tool-overlay", id: "ToolOverlay_".concat(graphModel.flowId), 
-            /*
-             * 默认情况下该容器设置了 pointer-events: none，不会触发这些事件
-             * 只会在容器取消 pointer-events: none 后触发，用于缩放、滚动画布等操作
-             * 目前只在 selection-select 插件中使用。为了能在元素内部进行框选，在开启选区后会关闭事件透传。需要手动触发事件
-             */
-            onWheel: this.zoomHandler, children: this.getTools() }));
+        return (_jsx("div", { className: "lf-tool-overlay", id: "ToolOverlay_".concat(graphModel.flowId), children: this.getTools() }));
     };
     ToolOverlay = __decorate([
         observer

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;
@@ -263,6 +264,11 @@ export declare class LogicFlow {
      * @param toFront 是否将选中的元素置顶，默认为true
      */
     selectElementById(id: string, multiple?: boolean, toFront?: boolean): void;
+    /**
+     * 移除选中的元素
+     * @param id 元素ID
+     */
+    deselectElementById(id: string): void;
     /**
      * 获取选中的元素数据
      * @param isIgnoreCheck 是否包括sourceNode和targetNode没有被选中的边,默认包括。
@@ -309,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 自定义属性
      */
@@ -351,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;
     /*********************************************************
@@ -367,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;
     /**
@@ -563,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;
     /**
      * 加载插件-内部方法
@@ -893,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;
@@ -940,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

@@ -669,6 +669,13 @@ var LogicFlow = /** @class */ (function () {
             this.graphModel.toFront(id);
         }
     };
+    /**
+     * 移除选中的元素
+     * @param id 元素ID
+     */
+    LogicFlow.prototype.deselectElementById = function (id) {
+        this.graphModel.deselectElementById(id);
+    };
     /**
      * 获取选中的元素数据
      * @param isIgnoreCheck 是否包括sourceNode和targetNode没有被选中的边,默认包括。
@@ -745,7 +752,7 @@ var LogicFlow = /** @class */ (function () {
     };
     /**
      * 设置元素的自定义属性
-     * @see todo docs link
+     * @see http://logicflow.cn/api/detail#setproperties
      * @param id 元素的id
      * @param properties 自定义属性
      */
@@ -802,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;
@@ -821,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();
@@ -834,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;
@@ -1150,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 = []; }
@@ -1212,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>;
@@ -322,6 +323,7 @@ export declare class GraphModel {
      * @param multiple 是否允许多选，如果为true，不会将上一个选中的元素重置
      */
     selectElementById(id: string, multiple?: boolean): void;
+    deselectElementById(id: string): void;
     /**
      * 将所有选中的元素设置为非选中
      */
@@ -393,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;
@@ -1060,6 +1063,12 @@ var GraphModel = /** @class */ (function () {
         var selectElement = this.getElement(id);
         selectElement === null || selectElement === void 0 ? void 0 : selectElement.setSelected(true);
     };
+    GraphModel.prototype.deselectElementById = function (id) {
+        var element = this.getElement(id);
+        if (element) {
+            element.setSelected(false);
+        }
+    };
     /**
      * 将所有选中的元素设置为非选中
      */
@@ -1298,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;
     };
     /**
      * 更新网格配置
@@ -1596,6 +1630,9 @@ var GraphModel = /** @class */ (function () {
     __decorate([
         mobx_1.action
     ], GraphModel.prototype, "selectElementById", null);
+    __decorate([
+        mobx_1.action
+    ], GraphModel.prototype, "deselectElementById", null);
     __decorate([
         mobx_1.action
     ], GraphModel.prototype, "clearSelectElements", null);
@@ -1632,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 {