@logicflow/core 2.2.0-alpha.2 → 2.2.0-alpha.3

package/es/constant/theme.js

@@ -0,0 +1,680 @@
+export var DEFAULT_GRID_SIZE = 10;
+export var defaultTheme = {
+    baseNode: {
+        fill: '#fff',
+        stroke: '#474747',
+        strokeWidth: 2,
+        radius: 12,
+    },
+    baseEdge: {
+        stroke: '#474747',
+        strokeWidth: 2,
+        radius: 12,
+    },
+    rect: {
+        shadow: {
+            dx: 0,
+            dy: 0,
+            stdDeviation: 4,
+            floodColor: '#9CA1AA55',
+        },
+    },
+    circle: {},
+    diamond: {},
+    ellipse: {},
+    polygon: {},
+    html: {
+        fill: 'transparent',
+        stroke: 'transparent',
+        shadow: {
+            dx: 0,
+            dy: 0,
+            stdDeviation: 4,
+            floodColor: '#9CA1AA55',
+        },
+    },
+    text: {
+        color: '#474747',
+        stroke: 'none',
+        fontSize: 12,
+        background: {
+            fill: 'transparent',
+        },
+    },
+    nodeText: {
+        color: '#474747',
+        overflowMode: 'default',
+        fontSize: 12,
+        lineHeight: 1.2,
+    },
+    anchor: {
+        stroke: '#474747',
+        fill: '#fff',
+        r: 4,
+        hover: {
+            r: 8,
+            fill: '#707070',
+            fillOpacity: 0.15,
+            stroke: 'transparent',
+        },
+    },
+    anchorLine: {
+        stroke: '#474747',
+        strokeWidth: 2,
+        strokeDasharray: '3,2',
+    },
+    line: {},
+    polyline: {},
+    bezier: {
+        fill: 'none',
+        adjustLine: {
+            stroke: '#949494',
+        },
+        adjustAnchor: {
+            r: 4,
+            fill: '#949494',
+            fillOpacity: 1,
+            stroke: '#949494',
+        },
+    },
+    edgeText: {
+        textWidth: 100,
+        overflowMode: 'default',
+        fontSize: 12,
+        background: {
+            fill: '#fff',
+        },
+    },
+    arrow: {
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        offset: 10,
+        verticalLength: 5, // 箭头垂直于边的距离
+    },
+    snapline: {
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        stroke: '#AAAAAA',
+        strokeWidth: 1,
+        strokeDasharray: '3,3',
+    },
+    edgeAdjust: {
+        r: 4,
+        fill: '#fff',
+        stroke: '#474747',
+        strokeWidth: 1,
+    },
+    outline: {
+        fill: 'none',
+        stroke: 'transparent', // 矩形默认不显示调整边框
+        strokeWidth: 0,
+    },
+    edgeOutline: {
+        fill: 'transparent',
+        stroke: '#757575',
+        strokeWidth: 1.5,
+        strokeDasharray: '4,4',
+        radius: 8,
+        hover: {
+            stroke: '#4271DF',
+        },
+    },
+    edgeAnimation: {
+        stroke: '#4271DF',
+        strokeDasharray: '12,4,6,4',
+        strokeDashoffset: '100%',
+        animationName: 'lf_animate_dash',
+        animationDuration: '20s',
+        animationIterationCount: 'infinite',
+        animationTimingFunction: 'linear',
+        animationDirection: 'normal',
+    },
+    rotateControl: {
+        stroke: '#474747',
+        fill: '#fff',
+        strokeWidth: 1,
+        hover: {
+            fill: '#707070',
+            fillOpacity: 0.15,
+            stroke: 'transparent',
+        },
+    },
+    resizeControl: {
+        width: 8,
+        height: 8,
+        radius: 2,
+        fill: '#fff',
+        stroke: '#474747',
+        hover: {
+            width: 12,
+            height: 12,
+            fill: '#707070',
+            fillOpacity: 0.15,
+            stroke: 'transparent',
+        },
+    },
+    resizeOutline: {
+        fill: 'transparent',
+        stroke: '#757575',
+        strokeWidth: 1.5,
+        strokeDasharray: '4,4',
+        radius: 8,
+        hover: {
+            stroke: '#4271DF',
+        },
+    },
+};
+export var retroTheme = {
+    baseNode: {
+        fill: '#fff',
+        stroke: '#000',
+        strokeWidth: 2,
+    },
+    baseEdge: {
+        stroke: '#000',
+        strokeWidth: 2,
+    },
+    rect: {},
+    circle: {},
+    diamond: {},
+    ellipse: {},
+    polygon: {},
+    html: {
+        fill: 'transparent',
+        stroke: 'transparent',
+    },
+    text: {
+        color: '#000',
+        stroke: 'none',
+        fontSize: 12,
+        background: {
+            fill: 'transparent',
+        },
+    },
+    anchor: {
+        stroke: '#000',
+        fill: '#fff',
+        r: 4,
+        hover: {
+            r: 10,
+            fill: '#949494',
+            fillOpacity: 0.5,
+            stroke: '#949494',
+        },
+    },
+    anchorLine: {
+        stroke: '#000',
+        strokeWidth: 2,
+        strokeDasharray: '3,2',
+    },
+    nodeText: {
+        color: '#000',
+        overflowMode: 'default',
+        fontSize: 12,
+        lineHeight: 1.2,
+    },
+    edgeText: {
+        textWidth: 100,
+        overflowMode: 'default',
+        fontSize: 12,
+        background: {
+            fill: '#fff',
+        },
+    },
+    line: {},
+    polyline: {},
+    bezier: {
+        fill: 'none',
+        adjustLine: {
+            stroke: '#949494',
+        },
+        adjustAnchor: {
+            r: 4,
+            fill: '#949494',
+            fillOpacity: 1,
+            stroke: '#949494',
+        },
+    },
+    arrow: {
+        offset: 10,
+        verticalLength: 5, // 箭头垂直于边的距离
+    },
+    snapline: {
+        stroke: '#949494',
+        strokeWidth: 1,
+    },
+    edgeAdjust: {
+        r: 4,
+        fill: '#fff',
+        stroke: '#949494',
+        strokeWidth: 2,
+    },
+    outline: {
+        fill: 'transparent',
+        stroke: '#949494',
+        strokeDasharray: '3,3',
+        hover: {
+            stroke: '#949494',
+        },
+    },
+    edgeOutline: {
+        fill: 'transparent',
+        stroke: '#949494',
+        strokeDasharray: '3,3',
+        hover: {
+            stroke: '#949494',
+        },
+    },
+    edgeAnimation: {
+        stroke: 'red',
+        strokeDasharray: '10,10',
+        strokeDashoffset: '100%',
+        animationName: 'lf_animate_dash',
+        animationDuration: '20s',
+        animationIterationCount: 'infinite',
+        animationTimingFunction: 'linear',
+        animationDirection: 'normal',
+    },
+    rotateControl: {
+        stroke: '#000',
+        fill: '#fff',
+        strokeWidth: 1.5,
+    },
+    resizeControl: {
+        width: 7,
+        height: 7,
+        fill: '#fff',
+        stroke: '#000',
+    },
+    resizeOutline: {
+        fill: 'none',
+        stroke: 'transparent', // 矩形默认不显示调整边框
+        strokeWidth: 1,
+        strokeDasharray: '3,3',
+    },
+};
+export var darkTheme = {
+    baseNode: {
+        fill: '#33353A',
+        stroke: '#EAEAEA',
+        strokeWidth: 2,
+        radius: 12,
+    },
+    baseEdge: {
+        stroke: '#EAEAEA',
+        strokeWidth: 2,
+        radius: 12,
+    },
+    rect: {},
+    circle: {},
+    diamond: {},
+    ellipse: {},
+    polygon: {},
+    html: {
+        fill: '#33353A',
+        stroke: 'transparent',
+        shadow: {
+            dx: 0,
+            dy: 0,
+            stdDeviation: 4,
+            floodColor: '#9CA1AA55',
+        },
+    },
+    text: {
+        color: '#EAEAEA',
+        stroke: 'none',
+        fontSize: 12,
+        background: {
+            fill: 'transparent',
+        },
+    },
+    nodeText: {
+        color: '#EAEAEA',
+        overflowMode: 'default',
+        fontSize: 12,
+        lineHeight: 1.2,
+    },
+    anchor: {
+        stroke: '#EAEAEA',
+        fill: '#33353A',
+        r: 4,
+        hover: {
+            r: 8,
+            fill: '#707070',
+            fillOpacity: 0.15,
+            stroke: 'transparent',
+        },
+    },
+    anchorLine: {
+        stroke: '#EAEAEA',
+        strokeWidth: 2,
+        strokeDasharray: '3,2',
+    },
+    line: {},
+    polyline: {},
+    bezier: {
+        fill: 'none',
+        adjustLine: {
+            stroke: '#EAEAEA',
+        },
+        adjustAnchor: {
+            r: 4,
+            fill: '#33353A',
+            fillOpacity: 1,
+            stroke: '#EAEAEA',
+        },
+    },
+    edgeText: {
+        textWidth: 100,
+        overflowMode: 'default',
+        fontSize: 12,
+        background: {
+            fill: '#EAEAEA',
+        },
+    },
+    arrow: {
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        offset: 10,
+        verticalLength: 5, // 箭头垂直于边的距离
+    },
+    snapline: {
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        stroke: '#949494',
+        strokeWidth: 1,
+    },
+    edgeAdjust: {
+        r: 4,
+        fill: '#33353A',
+        stroke: '#EAEAEA',
+        strokeWidth: 1,
+    },
+    outline: {
+        fill: 'none',
+        stroke: 'transparent', // 矩形默认不显示调整边框
+        strokeWidth: 0,
+    },
+    edgeOutline: {
+        fill: 'transparent',
+        stroke: '#EAEAEA',
+        strokeWidth: 1.5,
+        strokeDasharray: '4,4',
+        radius: 8,
+        hover: {
+            stroke: '#4271DF',
+        },
+    },
+    edgeAnimation: {
+        stroke: '#4271DF',
+        strokeDasharray: '12,4,6,4',
+        strokeDashoffset: '100%',
+        animationName: 'lf_animate_dash',
+        animationDuration: '20s',
+        animationIterationCount: 'infinite',
+        animationTimingFunction: 'linear',
+        animationDirection: 'normal',
+    },
+    rotateControl: {
+        stroke: '#EAEAEA',
+        fill: '#33353A',
+        strokeWidth: 1,
+        hover: {
+            fill: '#707070',
+            fillOpacity: 0.15,
+            stroke: 'transparent',
+        },
+    },
+    resizeControl: {
+        width: 8,
+        height: 8,
+        radius: 2,
+        fill: '#33353A',
+        stroke: '#EAEAEA',
+        hover: {
+            width: 12,
+            height: 12,
+            fill: '#707070',
+            fillOpacity: 0.15,
+            stroke: 'transparent',
+        },
+    },
+    resizeOutline: {
+        fill: 'transparent',
+        stroke: '#EAEAEA',
+        strokeWidth: 1.5,
+        strokeDasharray: '4,4',
+        radius: 8,
+        hover: {
+            stroke: '#4271DF',
+        },
+    },
+};
+export var colorfulTheme = {
+    baseNode: {
+        fill: '#fff',
+        stroke: '#474747',
+        strokeWidth: 2,
+        radius: 12,
+    },
+    baseEdge: {
+        stroke: '#474747',
+        strokeWidth: 2,
+        radius: 12,
+    },
+    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, fontSize: 12 },
+    diamond: { fill: '#96F7AF', stroke: '#40EF7E', radius: 8 },
+    polygon: { fill: '#E0A8FF', stroke: '#C271FF', radius: 8 },
+    nodeText: {
+        color: '#474747',
+        overflowMode: 'default',
+        fontSize: 12,
+        lineHeight: 1.2,
+    },
+    edgeText: {
+        textWidth: 100,
+        overflowMode: 'default',
+        fontSize: 12,
+        background: {
+            fill: '#fff',
+        },
+    },
+    html: {
+        fill: '#fff',
+        stroke: 'transparent',
+        strokeWidth: 0,
+    },
+    anchor: {
+        stroke: '#474747',
+        fill: '#fff',
+        r: 4,
+        hover: {
+            r: 8,
+            fill: '#707070',
+            fillOpacity: 0.15,
+            stroke: 'transparent',
+        },
+    },
+    anchorLine: {
+        stroke: '#474747',
+        strokeWidth: 2,
+        strokeDasharray: '3,2',
+    },
+    line: {},
+    polyline: { radius: 8 },
+    bezier: {
+        fill: 'none',
+        adjustLine: {
+            stroke: '#3ABDF9',
+        },
+        adjustAnchor: {
+            r: 4,
+            fill: '#3ABDF9',
+            fillOpacity: 1,
+            stroke: '#3ABDF9',
+        },
+    },
+    edgeAdjust: {
+        r: 4,
+        fill: '#fff',
+        stroke: '#474747',
+        strokeWidth: 1,
+    },
+    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',
+        },
+    },
+    edgeOutline: {
+        fill: 'transparent',
+        stroke: '#757575',
+        strokeWidth: 1.5,
+        strokeDasharray: '4,4',
+        radius: 8,
+        hover: {
+            stroke: '#4271DF',
+        },
+    },
+    edgeAnimation: {
+        stroke: '#4271DF',
+        strokeDasharray: '12,4,6,4',
+        strokeDashoffset: '100%',
+        animationName: 'lf_animate_dash',
+        animationDuration: '20s',
+        animationIterationCount: 'infinite',
+        animationTimingFunction: 'linear',
+        animationDirection: 'normal',
+    },
+    rotateControl: {
+        stroke: '#474747',
+        fill: '#fff',
+        strokeWidth: 1,
+        hover: {
+            fill: '#707070',
+            fillOpacity: 0.15,
+            stroke: 'transparent',
+        },
+    },
+    resizeControl: {
+        width: 8,
+        height: 8,
+        radius: 2,
+        fill: '#fff',
+        stroke: '#474747',
+        hover: {
+            width: 12,
+            height: 12,
+            fill: '#707070',
+            fillOpacity: 0.15,
+            stroke: 'transparent',
+        },
+    },
+    resizeOutline: {
+        fill: 'transparent',
+        stroke: '#757575',
+        strokeWidth: 1.5,
+        strokeDasharray: '4,4',
+        radius: 8,
+        hover: {
+            stroke: '#4271DF',
+        },
+    },
+};
+export var themeModeMap = {
+    default: defaultTheme,
+    colorful: colorfulTheme,
+    dark: darkTheme,
+    retro: retroTheme,
+};
+// 不同主题的背景色
+export var darkBackground = {
+    background: '#33353A',
+};
+export var colorfulBackground = {
+    background: '#fefeff',
+};
+export var defaultBackground = {
+    background: '#FBFCFE',
+};
+export var retroBackground = {
+    background: '#ffffff',
+};
+export var backgroundModeMap = {
+    colorful: colorfulBackground,
+    dark: darkBackground,
+    default: defaultBackground,
+    retro: retroBackground,
+};
+// 不同主题的网格样式
+export var darkGrid = {
+    size: DEFAULT_GRID_SIZE,
+    visible: true,
+    type: 'mesh',
+    config: {
+        color: '#83838377',
+        thickness: 2,
+    },
+    majorBold: true,
+};
+export var colorfulGrid = {
+    size: DEFAULT_GRID_SIZE,
+    visible: true,
+    type: 'dot',
+    config: {
+        color: '#b7c2d9',
+        thickness: 2,
+    },
+    majorBold: false,
+};
+export var defaultGrid = {
+    size: DEFAULT_GRID_SIZE,
+    visible: true,
+    type: 'mesh',
+    config: {
+        color: '#D7DEEB',
+        thickness: 1,
+    },
+    // majorBold: true,
+    majorBold: {
+        opacity: 0.6,
+        boldIndices: [5],
+        dashArrayConfig: { pattern: [] },
+        customBoldWidth: 2,
+    },
+};
+export var retroGrid = {
+    size: DEFAULT_GRID_SIZE,
+    visible: true,
+    type: 'dot',
+    config: {
+        color: '#ababab',
+        thickness: 1,
+    },
+    majorBold: false,
+};
+export var gridModeMap = {
+    colorful: colorfulGrid,
+    dark: darkGrid,
+    retro: retroGrid,
+    default: defaultGrid,
+};
+export default null;

package/es/index.css

@@ -177,8 +177,9 @@
 }
 .lf-multiple-select {
   position: absolute;
-  border: 2px dashed #187dffcc;
-  box-shadow: 0 0 3px 0 #187dff80;
+  border: 2px dashed #4271dfcc;
+  border-radius: 12px;
+  box-shadow: 0 0 3px 0 #4271df80;
   cursor: move;
 }
 .lf-edge-adjust-point {

package/es/model/GraphModel.d.ts

@@ -17,7 +17,8 @@ export declare class GraphModel {
     width: number;
     height: number;
     theme: LogicFlow.Theme;
-    customStyles: object;
+    themeMode: LogicFlow.ThemeMode | string;
+    customStyles: LogicFlow.Theme;
     grid: Grid.GridOptions;
     readonly eventCenter: EventEmitter;
     readonly modelMap: Map<string, LogicFlow.GraphElementCtor>;
@@ -404,7 +405,7 @@ export declare class GraphModel {
      * 设置主题
      * todo docs link
      */
-    setTheme(style: Partial<LogicFlow.Theme>, themeMode?: 'radius' | 'dark' | 'colorful' | 'default' | string): void;
+    setTheme(style: Partial<LogicFlow.Theme>, themeMode?: LogicFlow.ThemeMode | string): void;
     /**
      * 设置主题
      * todo docs link
@@ -419,6 +420,7 @@ export declare class GraphModel {
         diamond: LogicFlow.CommonTheme;
         ellipse: LogicFlow.CommonTheme;
         polygon: LogicFlow.CommonTheme;
+        html: LogicFlow.CommonTheme;
         line: LogicFlow.CommonTheme;
         polyline: LogicFlow.CommonTheme;
         bezier: LogicFlow.EdgeBezierTheme;
@@ -433,8 +435,13 @@ export declare class GraphModel {
         rotateControl: LogicFlow.CommonTheme;
         resizeControl: LogicFlow.CommonTheme;
         resizeOutline: LogicFlow.CommonTheme;
+        multiSelect?: {
+            xPadding?: number | undefined;
+            yPadding?: number | undefined;
+        } | undefined;
         edgeAdjust: LogicFlow.CommonTheme;
         outline: LogicFlow.OutlineTheme;
+        edgeOutline: LogicFlow.OutlineTheme;
         edgeAnimation: LogicFlow.EdgeAnimation;
     };
     /**