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

package/lib/constant/theme.js

@@ -0,0 +1,683 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gridModeMap = exports.retroGrid = exports.defaultGrid = exports.colorfulGrid = exports.darkGrid = exports.backgroundModeMap = exports.retroBackground = exports.defaultBackground = exports.colorfulBackground = exports.darkBackground = exports.themeModeMap = exports.colorfulTheme = exports.darkTheme = exports.retroTheme = exports.defaultTheme = exports.DEFAULT_GRID_SIZE = void 0;
+exports.DEFAULT_GRID_SIZE = 10;
+exports.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',
+        },
+    },
+};
+exports.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',
+    },
+};
+exports.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',
+        },
+    },
+};
+exports.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',
+        },
+    },
+};
+exports.themeModeMap = {
+    default: exports.defaultTheme,
+    colorful: exports.colorfulTheme,
+    dark: exports.darkTheme,
+    retro: exports.retroTheme,
+};
+// 不同主题的背景色
+exports.darkBackground = {
+    background: '#33353A',
+};
+exports.colorfulBackground = {
+    background: '#fefeff',
+};
+exports.defaultBackground = {
+    background: '#FBFCFE',
+};
+exports.retroBackground = {
+    background: '#ffffff',
+};
+exports.backgroundModeMap = {
+    colorful: exports.colorfulBackground,
+    dark: exports.darkBackground,
+    default: exports.defaultBackground,
+    retro: exports.retroBackground,
+};
+// 不同主题的网格样式
+exports.darkGrid = {
+    size: exports.DEFAULT_GRID_SIZE,
+    visible: true,
+    type: 'mesh',
+    config: {
+        color: '#83838377',
+        thickness: 2,
+    },
+    majorBold: true,
+};
+exports.colorfulGrid = {
+    size: exports.DEFAULT_GRID_SIZE,
+    visible: true,
+    type: 'dot',
+    config: {
+        color: '#b7c2d9',
+        thickness: 2,
+    },
+    majorBold: false,
+};
+exports.defaultGrid = {
+    size: exports.DEFAULT_GRID_SIZE,
+    visible: true,
+    type: 'mesh',
+    config: {
+        color: '#D7DEEB',
+        thickness: 1,
+    },
+    // majorBold: true,
+    majorBold: {
+        opacity: 0.6,
+        boldIndices: [5],
+        dashArrayConfig: { pattern: [] },
+        customBoldWidth: 2,
+    },
+};
+exports.retroGrid = {
+    size: exports.DEFAULT_GRID_SIZE,
+    visible: true,
+    type: 'dot',
+    config: {
+        color: '#ababab',
+        thickness: 1,
+    },
+    majorBold: false,
+};
+exports.gridModeMap = {
+    colorful: exports.colorfulGrid,
+    dark: exports.darkGrid,
+    retro: exports.retroGrid,
+    default: exports.defaultGrid,
+};
+exports.default = null;

package/lib/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 {