@logicflow/core 2.0.13 → 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;
@@ -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/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';
@@ -723,7 +723,7 @@ var LogicFlow = /** @class */ (function () {
     };
     /**
      * 设置元素的自定义属性
-     * @see todo docs link
+     * @see http://logicflow.cn/api/detail#setproperties
      * @param id 元素的id
      * @param properties 自定义属性
      */
@@ -780,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;
@@ -799,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();
@@ -812,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;
@@ -1128,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 = []; }
@@ -1190,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>;
@@ -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/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;
@@ -1298,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;
     };
     /**
      * 更新网格配置
@@ -1635,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/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,