@logicflow/core 2.0.12 → 2.0.14

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
@@ -733,6 +739,14 @@ export class LogicFlow {
     }
   }
 
+  /**
+   * 移除选中的元素
+   * @param id 元素ID
+   */
+  deselectElementById(id: string) {
+    this.graphModel.deselectElementById(id)
+  }
+
   /**
    * 获取选中的元素数据
    * @param isIgnoreCheck 是否包括sourceNode和targetNode没有被选中的边,默认包括。
@@ -821,7 +835,7 @@ export class LogicFlow {
 
   /**
    * 设置元素的自定义属性
-   * @see todo docs link
+   * @see http://logicflow.cn/api/detail#setproperties
    * @param id 元素的id
    * @param properties 自定义属性
    */
@@ -881,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
@@ -906,7 +920,7 @@ export class LogicFlow {
 
   /**
    * 获取流程图当前编辑相关设置
-   * @see todo docs link
+   * @see http://logicflow.cn/api/detail#geteditconfig
    */
   getEditConfig() {
     return this.graphModel.editConfigModel.getConfig()
@@ -920,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) {
@@ -1325,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,
@@ -1391,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) {
@@ -1793,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
@@ -1817,7 +1863,7 @@ export namespace LogicFlow {
      * 基础图形线相关主题
      */
     line: EdgeTheme // 直线样式
-    polyline: EdgePolylineTheme // 折现样式
+    polyline: EdgePolylineTheme // 折线样式
     bezier: EdgeBezierTheme // 贝塞尔曲线样式
     anchorLine: AnchorLineTheme // 从锚点拉出的边的样式
 
@@ -1847,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
@@ -1197,6 +1205,14 @@ export class GraphModel {
     selectElement?.setSelected(true)
   }
 
+  @action
+  deselectElementById(id: string) {
+    const element = this.getElement(id)
+    if (element) {
+      element.setSelected(false)
+    }
+  }
+
   /**
    * 将所有选中的元素设置为非选中
    */
@@ -1463,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

package/src/view/Graph.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentType, createRef } from 'preact/compat'
+import { Component, ComponentType } from 'preact/compat'
 import { map, throttle } from 'lodash-es'
 import {
   CanvasOverlay,
@@ -38,10 +38,6 @@ type ContainerStyle = {
 
 @observer
 class Graph extends Component<IGraphProps> {
-  canvasOverlayRef = createRef<CanvasOverlay>()
-  getCanvasOverlay = () => {
-    return this.canvasOverlayRef.current
-  }
   private handleResize = () => {
     const { graphModel, options } = this.props
     const { width, height, isContainerWidth, isContainerHeight } = graphModel
@@ -113,11 +109,7 @@ class Graph extends Component<IGraphProps> {
     return (
       <div className="lf-graph" flow-id={graphModel.flowId} style={style}>
         {/* 元素层 */}
-        <CanvasOverlay
-          ref={this.canvasOverlayRef}
-          graphModel={graphModel}
-          dnd={dnd}
-        >
+        <CanvasOverlay graphModel={graphModel} dnd={dnd}>
           <g className="lf-base">
             {map(graphModel.sortElements, (nodeModel) =>
               this.getComponent(nodeModel, graphModel),
@@ -136,11 +128,7 @@ class Graph extends Component<IGraphProps> {
           )}
         </ModificationOverlay>
         {/* 工具层：插件 */}
-        <ToolOverlay
-          graphModel={graphModel}
-          tool={tool}
-          getCanvasOverlay={this.getCanvasOverlay}
-        />
+        <ToolOverlay graphModel={graphModel} tool={tool} />
         {/* 画布背景 */}
         {background && <BackgroundOverlay background={background} />}
         {/* 画布网格 */}