@logicflow/core 2.0.13 → 2.0.15

package/lib/view/edge/BaseEdge.js

@@ -317,6 +317,31 @@ var BaseEdge = /** @class */ (function (_super) {
         }
         return ((0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsxs)("defs", { children: [(0, jsx_runtime_1.jsx)("marker", { id: "marker-start-".concat(id), refX: -refX, refY: refY, overflow: "visible", orient: "auto", markerUnits: "userSpaceOnUse", children: this.getStartArrow() }), (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)("path", { d: arrowPath, stroke: stroke, fill: fill, strokeWidth: strokeWidth, strokeLinecap: strokeLinecap, strokeLinejoin: strokeLinejoin, transform: transform }));
+    };
     /**
      * @overridable 可重写，自定义边起点箭头形状。
      * @example
@@ -331,7 +356,16 @@ var BaseEdge = /** @class */ (function (_super) {
      * }
      */
     BaseEdge.prototype.getStartArrow = function () {
-        return (0, jsx_runtime_1.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 ? 'none' : _b, strokeLinecap = _a.strokeLinecap, strokeLinejoin = _a.strokeLinejoin;
+        return this.getArrowPath(startArrowType, {
+            stroke: stroke,
+            strokeWidth: strokeWidth,
+            offset: offset,
+            verticalLength: verticalLength,
+            strokeLinecap: strokeLinecap,
+            strokeLinejoin: strokeLinejoin,
+        });
     };
     /**
      * @overridable 可重写，自定义边终点箭头形状。
@@ -348,8 +382,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 ((0, jsx_runtime_1.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/lib/view/overlay/Grid.js

@@ -57,8 +57,9 @@ var Grid = /** @class */ (function (_super) {
         return ((0, jsx_runtime_1.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/lib/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/lib/view/shape/Polygon.js

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

package/package.json

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

package/src/LogicFlow.tsx

@@ -14,7 +14,12 @@ import {
 
 import Graph from './view/Graph'
 import * as _View from './view'
-import { formatData } from './util'
+import {
+  formatData,
+  addThemeMode,
+  removeThemeMode,
+  clearThemeMode,
+} from './util'
 
 import { Dnd, snapline } from './view/behavior'
 import Tool from './tool'
@@ -22,6 +27,7 @@ import History from './history'
 import Keyboard, { initDefaultShortcut } from './keyboard'
 import { EventCallback, CallbackArgs, EventArgs } from './event/eventEmitter'
 import { ElementType, EventType, SegmentDirection } from './constant'
+import { Grid } from './view/overlay'
 
 import Extension = LogicFlow.Extension
 import ExtensionConfig = LogicFlow.ExtensionConfig
@@ -829,7 +835,7 @@ export class LogicFlow {
 
   /**
    * 设置元素的自定义属性
-   * @see todo docs link
+   * @see http://logicflow.cn/api/detail#setproperties
    * @param id 元素的id
    * @param properties 自定义属性
    */
@@ -889,7 +895,7 @@ export class LogicFlow {
   /**
    * 更新流程图编辑相关设置
    * @param {object} config 编辑配置
-   * @see todo docs link
+   * @see http://logicflow.cn/api/detail#updateeditconfig
    */
   updateEditConfig(config: Partial<IEditConfigType>) {
     const { editConfigModel, transformModel } = this.graphModel
@@ -914,7 +920,7 @@ export class LogicFlow {
 
   /**
    * 获取流程图当前编辑相关设置
-   * @see todo docs link
+   * @see http://logicflow.cn/api/detail#geteditconfig
    */
   getEditConfig() {
     return this.graphModel.editConfigModel.getConfig()
@@ -928,8 +934,18 @@ export class LogicFlow {
    * @param { object } style 自定义主题样式
    * todo docs link
    */
-  setTheme(style: Partial<LogicFlow.Theme>): void {
-    this.graphModel.setTheme(style)
+  setTheme(
+    style: Partial<LogicFlow.Theme>,
+    themeMode?: 'radius' | 'dark' | 'colorful' | 'default' | string,
+  ): void {
+    this.graphModel.setTheme(style, themeMode)
+  }
+  /**
+   * 获取当前主题样式
+   * @see todo docs link
+   */
+  getTheme(): LogicFlow.Theme {
+    return this.graphModel.getTheme()
   }
 
   private focusByElement(id: string) {
@@ -1333,6 +1349,23 @@ export class LogicFlow {
     })
   }
 
+  /**
+   * 添加主题模式
+   * @param themeMode 主题模式
+   * @param style 主题样式
+   */
+  static addThemeMode(themeMode: string, style: Partial<LogicFlow.Theme>) {
+    addThemeMode(themeMode, style)
+  }
+
+  static removeThemeMode(themeMode: string) {
+    removeThemeMode(themeMode)
+  }
+
+  static clearThemeMode() {
+    clearThemeMode()
+  }
+
   private installPlugins(disabledPlugins: string[] = []) {
     const extensionsAddByUse = Array.from(
       LogicFlow.extensions,
@@ -1399,6 +1432,7 @@ export class LogicFlow {
     this.graphModel.destroy()
     this.tool.destroy()
     this.history.destroy()
+    this.clearThemeMode()
     for (const extensionName in this.extension) {
       const extensionInstance = this.extension[extensionName]
       if ('destroy' in extensionInstance) {
@@ -1801,6 +1835,10 @@ export 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
   export type ArrowAttributesType = {
     d: string
@@ -1855,6 +1893,10 @@ export namespace LogicFlow {
     edgeAdjust: CircleTheme
     outline: OutlineTheme // 节点选择状态下外侧的选框样式
     edgeAnimation: EdgeAnimation // 边动画样式
+
+    // 画布背景
+    background?: boolean | Partial<LFOptions.BackgroundConfig>
+    grid?: boolean | Partial<Grid.GridOptions>
   }
 }
 

package/src/model/GraphModel.ts

@@ -5,6 +5,7 @@ import {
   merge,
   isBoolean,
   debounce,
+  cloneDeep,
   isNil,
 } from 'lodash-es'
 import { action, computed, observable } from 'mobx'
@@ -42,6 +43,8 @@ import {
   setupTheme,
   snapToGrid,
   updateTheme,
+  backgroundModeMap,
+  gridModeMap,
 } from '../util'
 import EventEmitter from '../event/eventEmitter'
 import { Grid } from '../view/overlay'
@@ -64,6 +67,8 @@ export class GraphModel {
 
   // 流程图主题配置
   @observable theme: LogicFlow.Theme
+  // 初始化样式
+  customStyles: object
   // 网格配置
   @observable grid: Grid.GridOptions
   // 事件中心
@@ -165,8 +170,11 @@ export class GraphModel {
       // TODO：需要让用户设置成 0 吗？后面可以讨论一下
       this.gridSize = grid.size || 1 // 默认 gridSize 设置为 1
     }
-    this.theme = setupTheme(options.style)
+    this.customStyles = options.style || {}
     this.grid = Grid.getGridOptions(grid ?? false)
+    this.theme = setupTheme(options.style, options.themeMode)
+    this.theme.grid = cloneDeep(this.grid)
+    this.theme.background = cloneDeep(this.background)
     this.edgeType = options.edgeType || 'polyline'
     this.animation = setupAnimation(animation)
     this.overlapMode = options.overlapMode || OverlapMode.DEFAULT
@@ -1471,8 +1479,45 @@ export class GraphModel {
    * 设置主题
    * todo docs link
    */
-  @action setTheme(style: Partial<LogicFlow.Theme>) {
-    this.theme = updateTheme({ ...this.theme, ...style })
+  @action setTheme(
+    style: Partial<LogicFlow.Theme>,
+    themeMode?: 'radius' | 'dark' | 'colorful' | 'default' | string,
+  ) {
+    if (themeMode) {
+      // 修改背景颜色
+      backgroundModeMap[themeMode] &&
+        this.updateBackgroundOptions({
+          ...(typeof this.background === 'object' ? this.background : {}),
+          ...backgroundModeMap[themeMode],
+        })
+      gridModeMap[themeMode] &&
+        this.updateGridOptions(
+          Grid.getGridOptions({ ...this.grid, ...gridModeMap[themeMode] }),
+        )
+    }
+    if (style.background) {
+      this.updateBackgroundOptions(style.background)
+    }
+    if (style.grid) {
+      const formattedGrid = Grid.getGridOptions(style.grid ?? false)
+      this.updateGridOptions(formattedGrid)
+    }
+    this.theme = updateTheme({ ...this.customStyles, ...style }, themeMode)
+    this.customStyles = { ...this.customStyles, ...style }
+  }
+
+  /**
+   * 设置主题
+   * todo docs link
+   */
+  @action getTheme() {
+    const { background, grid } = this
+    const theme = {
+      ...cloneDeep(this.theme),
+      background,
+      grid,
+    }
+    return theme
   }
 
   /**

package/src/model/edge/index.ts

@@ -1,4 +1,4 @@
-export * from './BaseEdgeModel';
-export * from './BezierEdgeModel';
-export * from './LineEdgeModel';
-export * from './PolylineEdgeModel';
+export * from './BaseEdgeModel'
+export * from './BezierEdgeModel'
+export * from './LineEdgeModel'
+export * from './PolylineEdgeModel'

package/src/model/index.ts

@@ -1,8 +1,8 @@
-export * from './edge';
-export * from './node';
+export * from './edge'
+export * from './node'
 
-export * from './BaseModel';
-export * from './EditConfigModel';
-export * from './GraphModel';
-export * from './SnaplineModel';
-export * from './TransformModel';
+export * from './BaseModel'
+export * from './EditConfigModel'
+export * from './GraphModel'
+export * from './SnaplineModel'
+export * from './TransformModel'

package/src/model/node/RectNodeModel.ts

@@ -36,11 +36,12 @@ export class RectNodeModel<
     super.setAttributes()
 
     const { width, height, radius } = this.properties
+    const { radius: styleRadius } = this.getNodeStyle()
     if (!isNil(width)) this.width = width
     if (!isNil(height)) this.height = height
-
     // 矩形特有
     if (!isNil(radius)) this.radius = radius
+    if (!isNil(styleRadius)) this.radius = styleRadius
   }
 
   getDefaultAnchor() {

package/src/model/node/index.ts

@@ -1,8 +1,8 @@
-export * from './BaseNodeModel';
-export * from './CircleNodeModel';
-export * from './DiamondNodeModel';
-export * from './EllipseNodeModel';
-export * from './PolygonNodeModel';
-export * from './RectNodeModel';
-export * from './TextNodeModel';
-export * from './HtmlNodeModel';
+export * from './BaseNodeModel'
+export * from './CircleNodeModel'
+export * from './DiamondNodeModel'
+export * from './EllipseNodeModel'
+export * from './PolygonNodeModel'
+export * from './RectNodeModel'
+export * from './TextNodeModel'
+export * from './HtmlNodeModel'

package/src/options.ts

@@ -102,6 +102,7 @@ export namespace Options {
     edgeGenerator?: EdgeGeneratorType
 
     customTrajectory?: (props: CustomAnchorLineProps) => h.JSX.Element
+    themeMode?: 'radius' | 'dark' | 'colorful' // 主题模式
     [key: string]: unknown
   }
 

package/src/util/theme.ts

@@ -1,4 +1,4 @@
-import { cloneDeep, merge } from 'lodash-es'
+import { cloneDeep, merge, assign } from 'lodash-es'
 import LogicFlow from '../LogicFlow'
 
 export const defaultTheme: LogicFlow.Theme = {
@@ -135,13 +135,178 @@ export const defaultTheme: LogicFlow.Theme = {
     strokeDasharray: '3,3',
   },
 }
+export const radiusMode: any = {
+  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',
+  },
+}
+export const darkMode: any = {
+  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',
+  },
+}
+export const colorfulMode: any = {
+  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',
+  },
+}
+
+export const themeModeMap = {
+  colorful: colorfulMode,
+  dark: darkMode,
+  radius: radiusMode,
+  default: defaultTheme,
+}
+
+// 不同主题的背景色
+export const darkBackground = {
+  background: '#23272e',
+}
+export const colorfulBackground = {
+  background: '#fefeff',
+}
+export const defaultBackground = {
+  background: '#ffffff',
+}
+export const backgroundModeMap = {
+  colorful: colorfulBackground,
+  dark: darkBackground,
+  radius: defaultBackground,
+  default: defaultBackground,
+}
+
+// 不同主题的网格样式
+export const darkGrid = {
+  color: '#66676a',
+  thickness: 1,
+}
+export const colorfulGrid = {
+  color: '#dadada',
+  thickness: 1,
+}
+export const defaultGrid = {
+  color: '#acacac',
+  thickness: 1,
+}
+export const gridModeMap = {
+  colorful: colorfulGrid,
+  dark: darkGrid,
+  radius: defaultGrid,
+  default: defaultGrid,
+}
 
 /* 主题（全局样式）相关工具方法 */
 export const setupTheme = (
   customTheme?: Partial<LogicFlow.Theme>,
+  themeMode?: 'radius' | 'dark' | 'colorful' | 'default' | string,
 ): LogicFlow.Theme => {
   let theme = cloneDeep(defaultTheme)
-
+  if (themeMode) {
+    theme = merge(theme, themeModeMap[themeMode])
+  }
   if (customTheme) {
     /**
      * 为了不让默认样式被覆盖，使用 merge 方法
@@ -172,9 +337,39 @@ export const setupTheme = (
      */
     theme = merge(theme, customTheme)
   }
-
   return theme
 }
 
+export const addThemeMode = (
+  themeMode: string,
+  style: Partial<LogicFlow.Theme>,
+): void => {
+  if (themeModeMap[themeMode]) {
+    console.warn(`theme mode ${themeMode} already exists`)
+    return
+  }
+  themeModeMap[themeMode] = style
+  backgroundModeMap[themeMode] = style.background || defaultBackground
+  gridModeMap[themeMode] = style.grid || defaultGrid
+}
+
+export const removeThemeMode = (themeMode: string): void => {
+  delete themeModeMap[themeMode]
+  delete backgroundModeMap[themeMode]
+  delete gridModeMap[themeMode]
+}
+
+export const clearThemeMode = (): void => {
+  const resetTheme = {
+    colorful: {},
+    dark: {},
+    radius: {},
+    default: {},
+  }
+  assign(themeModeMap, resetTheme)
+  assign(backgroundModeMap, resetTheme)
+  assign(gridModeMap, resetTheme)
+}
+
 /* 更新 theme 方法 */
 export const updateTheme = setupTheme