@logicflow/core 2.0.12 → 2.0.14

package/es/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/es/LogicFlow.js

@@ -43,7 +43,7 @@ import * as _Model from './model';
 import { GraphModel, SnaplineModel, } from './model';
 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';
 import History from './history';
@@ -640,6 +640,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没有被选中的边,默认包括。
@@ -716,7 +723,7 @@ var LogicFlow = /** @class */ (function () {
     };
     /**
      * 设置元素的自定义属性
-     * @see todo docs link
+     * @see http://logicflow.cn/api/detail#setproperties
      * @param id 元素的id
      * @param properties 自定义属性
      */
@@ -773,7 +780,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;
@@ -792,7 +799,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();
@@ -805,8 +812,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;
@@ -1121,6 +1135,20 @@ var LogicFlow = /** @class */ (function () {
             _a.props = props,
             _a));
     };
+    /**
+     * 添加主题模式
+     * @param themeMode 主题模式
+     * @param style 主题样式
+     */
+    LogicFlow.addThemeMode = function (themeMode, style) {
+        addThemeMode(themeMode, style);
+    };
+    LogicFlow.removeThemeMode = function (themeMode) {
+        removeThemeMode(themeMode);
+    };
+    LogicFlow.clearThemeMode = function () {
+        clearThemeMode();
+    };
     LogicFlow.prototype.installPlugins = function (disabledPlugins) {
         var _this = this;
         if (disabledPlugins === void 0) { disabledPlugins = []; }
@@ -1183,6 +1211,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/es/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/es/model/GraphModel.js

@@ -51,11 +51,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { find, forEach, map, merge, isBoolean, debounce, isNil, } from 'lodash-es';
+import { find, forEach, map, merge, isBoolean, debounce, cloneDeep, isNil, } from 'lodash-es';
 import { action, computed, observable } from 'mobx';
 import { EditConfigModel, TransformModel, } from '.';
 import { DEFAULT_VISIBLE_SPACE, ELEMENT_MAX_Z_INDEX, ElementState, ElementType, EventType, ModelType, OverlapMode, TextMode, } from '../constant';
-import { createEdgeGenerator, createUuid, formatData, getClosestPointOfPolyline, getMinIndex, getNodeAnchorPosition, getNodeBBox, getZIndex, isPointInArea, setupAnimation, setupTheme, snapToGrid, updateTheme, } from '../util';
+import { createEdgeGenerator, createUuid, formatData, getClosestPointOfPolyline, getMinIndex, getNodeAnchorPosition, getNodeBBox, getZIndex, isPointInArea, setupAnimation, setupTheme, snapToGrid, updateTheme, backgroundModeMap, gridModeMap, } from '../util';
 import EventEmitter from '../event/eventEmitter';
 import { Grid } from '../view/overlay';
 var GraphModel = /** @class */ (function () {
@@ -104,8 +104,11 @@ var GraphModel = /** @class */ (function () {
             // TODO：需要让用户设置成 0 吗？后面可以讨论一下
             this.gridSize = grid.size || 1; // 默认 gridSize 设置为 1
         }
-        this.theme = setupTheme(options.style);
+        this.customStyles = options.style || {};
         this.grid = Grid.getGridOptions(grid !== null && grid !== void 0 ? 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;
@@ -1054,6 +1057,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);
+        }
+    };
     /**
      * 将所有选中的元素设置为非选中
      */
@@ -1292,8 +1301,33 @@ var GraphModel = /** @class */ (function () {
      * 设置主题
      * todo docs link
      */
-    GraphModel.prototype.setTheme = function (style) {
-        this.theme = updateTheme(__assign(__assign({}, this.theme), style));
+    GraphModel.prototype.setTheme = function (style, themeMode) {
+        var _a;
+        if (themeMode) {
+            // 修改背景颜色
+            backgroundModeMap[themeMode] &&
+                this.updateBackgroundOptions(__assign(__assign({}, (typeof this.background === 'object' ? this.background : {})), backgroundModeMap[themeMode]));
+            gridModeMap[themeMode] &&
+                this.updateGridOptions(Grid.getGridOptions(__assign(__assign({}, this.grid), gridModeMap[themeMode])));
+        }
+        if (style.background) {
+            this.updateBackgroundOptions(style.background);
+        }
+        if (style.grid) {
+            var formattedGrid = Grid.getGridOptions((_a = style.grid) !== null && _a !== void 0 ? _a : false);
+            this.updateGridOptions(formattedGrid);
+        }
+        this.theme = 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({}, cloneDeep(this.theme)), { background: background, grid: grid });
+        return theme;
     };
     /**
      * 更新网格配置
@@ -1590,6 +1624,9 @@ var GraphModel = /** @class */ (function () {
     __decorate([
         action
     ], GraphModel.prototype, "selectElementById", null);
+    __decorate([
+        action
+    ], GraphModel.prototype, "deselectElementById", null);
     __decorate([
         action
     ], GraphModel.prototype, "clearSelectElements", null);
@@ -1626,6 +1663,9 @@ var GraphModel = /** @class */ (function () {
     __decorate([
         action
     ], GraphModel.prototype, "setTheme", null);
+    __decorate([
+        action
+    ], GraphModel.prototype, "getTheme", null);
     __decorate([
         action
     ], GraphModel.prototype, "resize", null);

package/es/model/node/RectNodeModel.js

@@ -51,6 +51,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 (!isNil(width))
             this.width = width;
         if (!isNil(height))
@@ -58,6 +59,8 @@ var RectNodeModel = /** @class */ (function (_super) {
         // 矩形特有
         if (!isNil(radius))
             this.radius = radius;
+        if (!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/es/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/es/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/es/util/theme.js

@@ -1,4 +1,4 @@
-import { cloneDeep, merge } from 'lodash-es';
+import { cloneDeep, merge, assign } from 'lodash-es';
 export var defaultTheme = {
     baseNode: {
         fill: '#fff',
@@ -116,9 +116,171 @@ export var defaultTheme = {
         strokeDasharray: '3,3',
     },
 };
+export var 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',
+    },
+};
+export var 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',
+    },
+};
+export var 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',
+    },
+};
+export var themeModeMap = {
+    colorful: colorfulMode,
+    dark: darkMode,
+    radius: radiusMode,
+    default: defaultTheme,
+};
+// 不同主题的背景色
+export var darkBackground = {
+    background: '#23272e',
+};
+export var colorfulBackground = {
+    background: '#fefeff',
+};
+export var defaultBackground = {
+    background: '#ffffff',
+};
+export var backgroundModeMap = {
+    colorful: colorfulBackground,
+    dark: darkBackground,
+    radius: defaultBackground,
+    default: defaultBackground,
+};
+// 不同主题的网格样式
+export var darkGrid = {
+    color: '#66676a',
+    thickness: 1,
+};
+export var colorfulGrid = {
+    color: '#dadada',
+    thickness: 1,
+};
+export var defaultGrid = {
+    color: '#acacac',
+    thickness: 1,
+};
+export var gridModeMap = {
+    colorful: colorfulGrid,
+    dark: darkGrid,
+    radius: defaultGrid,
+    default: defaultGrid,
+};
 /* 主题（全局样式）相关工具方法 */
-export var setupTheme = function (customTheme) {
+export var setupTheme = function (customTheme, themeMode) {
     var theme = cloneDeep(defaultTheme);
+    if (themeMode) {
+        theme = merge(theme, themeModeMap[themeMode]);
+    }
     if (customTheme) {
         /**
          * 为了不让默认样式被覆盖，使用 merge 方法
@@ -151,5 +313,30 @@ export var setupTheme = function (customTheme) {
     }
     return theme;
 };
+export var addThemeMode = function (themeMode, style) {
+    if (themeModeMap[themeMode]) {
+        console.warn("theme mode ".concat(themeMode, " already exists"));
+        return;
+    }
+    themeModeMap[themeMode] = style;
+    backgroundModeMap[themeMode] = style.background || defaultBackground;
+    gridModeMap[themeMode] = style.grid || defaultGrid;
+};
+export var removeThemeMode = function (themeMode) {
+    delete themeModeMap[themeMode];
+    delete backgroundModeMap[themeMode];
+    delete gridModeMap[themeMode];
+};
+export var clearThemeMode = function () {
+    var resetTheme = {
+        colorful: {},
+        dark: {},
+        radius: {},
+        default: {},
+    };
+    assign(themeModeMap, resetTheme);
+    assign(backgroundModeMap, resetTheme);
+    assign(gridModeMap, resetTheme);
+};
 /* 更新 theme 方法 */
 export var updateTheme = setupTheme;

package/es/view/Graph.d.ts

@@ -1,5 +1,4 @@
 import { Component, ComponentType } from 'preact/compat';
-import { CanvasOverlay } from './overlay';
 import DnD from './behavior/dnd';
 import Tool from '../tool';
 import { Options as LFOptions } from '../options';
@@ -13,8 +12,6 @@ type IGraphProps = {
     graphModel: GraphModel;
 };
 declare class Graph extends Component<IGraphProps> {
-    canvasOverlayRef: import("preact").RefObject<CanvasOverlay>;
-    getCanvasOverlay: () => CanvasOverlay | null;
     private handleResize;
     private throttleResize;
     componentDidMount(): void;