@logicflow/core 2.0.0-beta.1 → 2.0.0-beta.10

package/src/LogicFlow.tsx

@@ -1,12 +1,12 @@
 import { ComponentType, createElement as h, render } from 'preact/compat'
-import { cloneDeep, forEach } from 'lodash-es'
+import { cloneDeep, forEach, indexOf } from 'lodash-es'
 import { observer } from '.'
 import { Options as LFOptions } from './options'
 import * as _Model from './model'
 import {
   BaseEdgeModel,
   BaseNodeModel,
-  EditConfigInterface,
+  IEditConfigType,
   GraphModel,
   SnaplineModel,
   ZoomParamType,
@@ -16,16 +16,15 @@ import Graph from './view/Graph'
 import * as _View from './view'
 import { formatData } from './util'
 
-import Dnd from './view/behavior/dnd'
-import Tool from './tool/tool'
-import { snapline } from './tool'
-import Keyboard from './keyboard'
+import { Dnd, snapline } from './view/behavior'
+import Tool from './tool'
 import History from './history'
+import Keyboard, { initDefaultShortcut } from './keyboard'
 import { EventCallback, CallbackArgs, EventArgs } from './event/eventEmitter'
 import { ElementType, EventType, SegmentDirection } from './constant'
-import { initDefaultShortcut } from './keyboard/shortcut'
+
 import Extension = LogicFlow.Extension
-import RegisteredExtension = LogicFlow.RegisteredExtension
+import ExtensionConfig = LogicFlow.ExtensionConfig
 import ExtensionConstructor = LogicFlow.ExtensionConstructor
 import GraphConfigData = LogicFlow.GraphConfigData
 import NodeConfig = LogicFlow.NodeConfig
@@ -38,11 +37,13 @@ import RegisterParam = LogicFlow.RegisterParam
 import GraphElements = LogicFlow.GraphElements
 import Position = LogicFlow.Position
 import PointTuple = LogicFlow.PointTuple
-import ExtensionRender = LogicFlow.ExtensionRender
+import ExtensionRenderFunc = LogicFlow.ExtensionRenderFunc
 import RegisterElementFunc = LogicFlow.RegisterElementFunc
 import PropertiesType = LogicFlow.PropertiesType
 import BaseNodeModelCtor = LogicFlow.BaseNodeModelCtor
 import ClientPosition = LogicFlow.ClientPosition
+import ExtensionDefinition = LogicFlow.ExtensionDefinition
+import ExtensionType = LogicFlow.ExtensionType
 
 const pluginFlag = Symbol('plugin registered by Logicflow.use')
 
@@ -61,13 +62,13 @@ export class LogicFlow {
   tool: Tool
   snaplineModel?: SnaplineModel
 
-  components: ExtensionRender[] = []
+  components: ExtensionRenderFunc[] = []
   // 个性配置的插件，覆盖全局配置的插件
-  readonly plugins: ExtensionConstructor[]
+  readonly plugins: ExtensionType[]
   // 全局配置的插件，所有的LogicFlow示例都会使用
-  static extensions: Map<string, RegisteredExtension> = new Map()
+  static extensions: Map<string, ExtensionConfig> = new Map()
   // 插件扩展方法
-  extension: Record<string, Extension> = {}
+  extension: Record<string, Extension | ExtensionDefinition> = {}
 
   readonly width?: number // 只读：画布宽度
   readonly height?: number // 只读：画布高度
@@ -78,19 +79,23 @@ export class LogicFlow {
    * 包括 adapterIn 和 adapterOut 两个方法
    */
   // TODO: 如何让用户执行时定义下面方法参数和返回值的类型
-  private adapterIn?: (data: unknown) => GraphData
-  private adapterOut?: (data: GraphData, ...rest: any) => unknown;
+  adapterIn?: (data: unknown) => GraphData
+  adapterOut?: (data: GraphData, ...rest: any) => unknown;
 
   // 支持插件在 LogicFlow 实例上增加自定义方法
   [propName: string]: any
 
-  private initContainer(container: HTMLElement | HTMLDivElement) {
+  private initContainer(
+    container: HTMLElement | HTMLDivElement,
+    width?: number,
+    height?: number,
+  ) {
     // TODO: 确认是否需要，后续是否只要返回 container 即可（下面方法是为了解决事件绑定问题的）
     // fix: destroy keyboard events while destroy LogicFlow.(#1110)
     const lfContainer = document.createElement('div')
     lfContainer.style.position = 'relative'
-    lfContainer.style.width = '100%'
-    lfContainer.style.height = '100%'
+    lfContainer.style.width = width ? `${width}px` : '100%'
+    lfContainer.style.height = height ? `${height}px` : '100%'
     container.innerHTML = ''
     container.appendChild(lfContainer)
     return lfContainer
@@ -102,8 +107,9 @@ export class LogicFlow {
 
   constructor(options: LFOptions.Common) {
     const initOptions = LFOptions.get(options)
+    const { container, width, height } = initOptions
     this.options = initOptions
-    this.container = this.initContainer(initOptions.container)
+    this.container = this.initContainer(container, width, height)
     this.graphModel = new GraphModel({
       ...initOptions,
       container: this.container, // TODO：测试该部分是否会有问题
@@ -685,13 +691,10 @@ export class LogicFlow {
    * @param edges
    * @param distance
    */
-  addElements(
-    { nodes, edges }: GraphConfigData,
-    distance = 40,
-  ): GraphElements | undefined {
+  addElements({ nodes, edges }: GraphConfigData, distance = 40): GraphElements {
     // TODO: 1. 解决下面方法中 distance 传参缺未使用的问题；该方法在快捷键中有调用
-    console.log('addElements', nodes, edges, distance)
     // TODO: 2. review 一下本函数代码逻辑，确认 nodeIdMap 的作用，看是否有优化的空间
+    console.log('distance', distance)
     const nodeIdMap: Record<string, string> = {}
     const elements: GraphElements = {
       nodes: [],
@@ -700,11 +703,9 @@ export class LogicFlow {
     forEach(nodes, (node) => {
       const nodeId = node.id
       const nodeModel = this.addNode(node)
-
       if (nodeId) nodeIdMap[nodeId] = nodeModel.id
       elements.nodes.push(nodeModel)
     })
-
     forEach(edges, (edge) => {
       let { sourceNodeId, targetNodeId } = edge
       if (nodeIdMap[sourceNodeId]) sourceNodeId = nodeIdMap[sourceNodeId]
@@ -882,7 +883,7 @@ export class LogicFlow {
    * @param {object} config 编辑配置
    * @see todo docs link
    */
-  updateEditConfig(config: EditConfigInterface) {
+  updateEditConfig(config: Partial<IEditConfigType>) {
     const { editConfigModel, transformModel } = this.graphModel
     editConfigModel.updateEditConfig(config)
     if (config?.stopMoveGraph !== undefined) {
@@ -1066,6 +1067,7 @@ export class LogicFlow {
     )
     this.emit(EventType.GRAPH_RENDERED, {
       data: this.graphModel.modelToGraphData(),
+      graphModel: this.graphModel,
     })
   }
 
@@ -1292,19 +1294,14 @@ export class LogicFlow {
    * @param props
    */
   static use(
-    extension: ExtensionConstructor,
+    extension: ExtensionConstructor | ExtensionDefinition,
     props?: Record<string, unknown>,
   ): void {
-    let { pluginName } = extension
+    const { pluginName } = extension
     if (!pluginName) {
-      console.warn(
-        `请给插件${
-          extension.name || extension.constructor.name
-        }指定pluginName!`,
-      )
-      pluginName = extension.name // 兼容以前name的情况，1.0版本去掉。
+      throw new Error(`请给插件指定 pluginName!`)
     }
-    // TODO: 应该在何时进行插件的销毁
+    // TODO: 应该在何时进行插件的销毁？？？
     // const preExtension = this.extensions.get(pluginName)?.extension
     // preExtension?.destroy?.() // 该代码应该有问题，因为 preExtension 直接用的是 Constructor，没有实例化。无法访问实例方法 destroy
 
@@ -1316,19 +1313,26 @@ export class LogicFlow {
   }
 
   private installPlugins(disabledPlugins: string[] = []) {
+    const extensionsAddByUse = Array.from(
+      LogicFlow.extensions,
+      ([, extension]) => extension,
+    )
     // 安装插件，优先使用个性插件
-    const extensions = this.plugins ?? LogicFlow.extensions
-    extensions.forEach((ext: any) => {
-      let extension: any
-      let props = null
-      if (ext[pluginFlag]) {
+    const extensions = [...this.plugins, ...extensionsAddByUse]
+    forEach(extensions, (ext) => {
+      let extension: ExtensionConstructor | ExtensionDefinition
+      let props: Record<string, any> | undefined
+
+      if (pluginFlag in ext) {
         extension = ext.extension
         props = ext.props
       } else {
         extension = ext
       }
-      const pluginName = extension?.pluginName || extension?.name
-      if (disabledPlugins.indexOf(pluginName) === -1) {
+
+      const pluginName = extension?.pluginName
+
+      if (indexOf(disabledPlugins, pluginName) === -1) {
         this.installPlugin(extension, props)
       }
     })
@@ -1337,31 +1341,41 @@ export class LogicFlow {
   /**
    * 加载插件-内部方法
    */
-  private installPlugin(extension: Extension, props: any) {
-    if (typeof extension === 'object') {
-      const { pluginName, install, render: renderComponent } = extension
+  private installPlugin(
+    extension: ExtensionConstructor | ExtensionDefinition,
+    props?: Record<string, any>,
+  ) {
+    if ('pluginName' in extension && 'install' in extension) {
+      const { pluginName, install, render } = extension
       if (pluginName) {
         install && install.call(extension, this, LogicFlow)
-        renderComponent && this.components.push(renderComponent.bind(extension))
+        render && this.components.push(render.bind(extension))
         this.extension[pluginName] = extension
       }
       return
     }
-    const ExtensionCls = extension as ExtensionConstructor
-    const extensionInstance = new ExtensionCls({
+
+    const ExtensionCtor = extension as ExtensionConstructor
+    const pluginName = ExtensionCtor.pluginName
+    const extensionIns = new ExtensionCtor({
       lf: this,
       LogicFlow,
-      options: this.options.pluginsOptions ?? {},
       props,
+      // TODO: 这里的 options 应该传入插件对应的 options，而不是全局的 options
+      // 所以应该这么写 this.options.pluginsOptions[ExtensionCtor.pluginName] ?? {}
+      options: this.options.pluginsOptions?.[pluginName] ?? {},
     })
-    extensionInstance.render &&
-      this.components.push(extensionInstance.render.bind(extensionInstance))
-    this.extension[ExtensionCls.pluginName] = extensionInstance
+    extensionIns.render &&
+      this.components.push(extensionIns.render.bind(extensionIns))
+    this.extension[pluginName] = extensionIns
   }
 }
 
 // Option
 export namespace LogicFlow {
+  /**
+   * LogicFlow init Options
+   */
   export interface Options extends LFOptions.Common {}
 
   export type DomAttributes = {
@@ -1369,13 +1383,19 @@ export namespace LogicFlow {
     [key: string]: string | undefined
   }
 
-  export type PropertiesType = {
+  export interface PropertiesType {
     width?: number
     height?: number
     rx?: number
     ry?: number
-  } & Record<string, any>
+
+    style?: LogicFlow.CommonTheme
+    textStyle?: LogicFlow.CommonTheme
+
+    [key: string]: any
+  }
   export type AttributesType = Record<string, any>
+
   export type VectorData = {
     deltaX: number
     deltaY: number
@@ -1390,7 +1410,7 @@ export namespace LogicFlow {
   }
   export type Point = {
     id?: string
-    [key: string]: any
+    [key: string]: any // TODO: 确认这个属性是干什么的呢？是有可以移除
   } & Position
   export type PointTuple = [number, number]
   export type ClientPosition = {
@@ -1420,9 +1440,51 @@ export namespace LogicFlow {
   }
   export type TextConfig = {
     value: string
+    x: number
+    y: number
     editable?: boolean
     draggable?: boolean
-  } & Point
+    // 直接在这儿设置文本模式
+    // overflowMode?: 'default' | 'autoWrap' | 'ellipsis'
+  }
+
+  // label数据类型声明
+  export type LabelConfig = {
+    id?: string // label唯一标识
+    x: number
+    y: number
+    content?: string // 富文本内容
+    value: string // 纯文本内容
+    rotate?: number // 旋转角度
+    // 样式属性
+    style?: h.JSX.CSSProperties // label自定义样式
+
+    // 编辑状态属性
+    editable?: boolean
+    draggable?: boolean
+    labelWidth?: number
+    textOverflowMode?: 'ellipsis' | 'wrap' | 'clip' | 'nowrap' | 'default'
+
+    // 当前 Label 是否渲染纵向文本
+    vertical?: boolean
+  }
+
+  export type LabelOption = {
+    // 节点的所有 Label 是否纵向展示
+    isVertical: boolean
+    // 是否支持多个 label
+    isMultiple: boolean
+    // 允许设置多个 label 时最大个数
+    maxCount?: number
+  }
+
+  export interface LabelData extends LabelConfig {
+    id: string
+    x: number
+    y: number
+    content: string
+    value: string
+  }
 
   export type AppendConfig = {
     startIndex: number
@@ -1469,28 +1531,30 @@ export namespace LogicFlow {
     [key: string]: any
   }
 
-  export interface NodeConfig {
+  export interface NodeConfig<P extends PropertiesType = PropertiesType> {
     id?: string
     type: string
     x: number
     y: number
     text?: TextConfig | string
     zIndex?: number
-    properties?: PropertiesType
+    properties?: P
     virtual?: boolean // 是否虚拟节点
     rotate?: number
 
+    rotatable?: boolean // 节点是否可旋转
+    resizable?: boolean // 节点是否可缩放
+
     [key: string]: any
   }
 
   export interface NodeData extends NodeConfig {
     id: string
     text?: TextConfig
-
     [key: string]: unknown
   }
 
-  export interface EdgeConfig {
+  export interface EdgeConfig<P extends PropertiesType = PropertiesType> {
     id?: string
     type?: string // TODO: 将所有类型选项列出来；LogicFlow 内部默认为 polyline
 
@@ -1498,13 +1562,12 @@ export namespace LogicFlow {
     sourceAnchorId?: string
     targetNodeId: string
     targetAnchorId?: string
-
     startPoint?: Point
     endPoint?: Point
     text?: TextConfig | string
     pointsList?: Point[]
     zIndex?: number
-    properties?: PropertiesType
+    properties?: P
   }
 
   export interface EdgeData extends EdgeConfig {
@@ -1553,6 +1616,8 @@ export namespace LogicFlow {
     radius?: number
     rx?: number
     ry?: number
+    width?: number
+    height?: number
     path?: string
     [key: string]: unknown
   }
@@ -1636,6 +1701,7 @@ export namespace LogicFlow {
      * ellipsis: 超出省略
      */
     overflowMode?: 'default' | 'autoWrap' | 'ellipsis'
+    textWidth?: number
     background?: RectTheme
     /**
      * 背景区域 padding
@@ -1643,6 +1709,7 @@ export namespace LogicFlow {
      */
     wrapPadding?: string
   } & TextTheme
+
   // 边上文本样式
   export type EdgeTextTheme = {
     textWidth: number
@@ -1755,12 +1822,18 @@ export namespace LogicFlow {
 
 // Render or Functions
 export namespace LogicFlow {
-  type FocusOnById = { id: string; coordinate?: never }
-  type FocusOnByCoordinate = { id?: string; coordinate: Position }
+  type FocusOnById = {
+    id: string
+    coordinate?: never
+  }
+  type FocusOnByCoordinate = {
+    id?: string
+    coordinate: Position
+  }
   export type FocusOnArgsType = FocusOnById | FocusOnByCoordinate
 
-  export type BaseNodeModelCtor = typeof BaseNodeModel
-  export type BaseEdgeModelCtor = typeof BaseEdgeModel
+  export type BaseNodeModelCtor = typeof BaseNodeModel<PropertiesType>
+  export type BaseEdgeModelCtor = typeof BaseEdgeModel<PropertiesType>
 
   export type GraphElementCtor = BaseNodeModelCtor | BaseEdgeModelCtor
   export type GraphElement = BaseNodeModel | BaseEdgeModel
@@ -1794,32 +1867,43 @@ export namespace LogicFlow {
     new (options: LFOptions.Definition): LogicFlow
   }
 
-  export type RegisteredExtension = {
+  /**
+   * Extension 插件类型
+   */
+  export type ExtensionType = ExtensionConstructor | ExtensionDefinition
+  export type ExtensionConfig = {
     [pluginFlag]: symbol
-    extension: ExtensionConstructor
-    props?: Record<string, unknown>
+    extension: ExtensionType
+    props?: Record<string, any> // TODO: 看这类型是否可以更精确
   }
 
-  export type ExtensionProps = {
+  export type IExtensionProps = {
     lf: LogicFlow
     LogicFlow: LogicFlowConstructor
-    options: Record<string, unknown>
     props?: Record<string, unknown>
+    options: Record<string, unknown>
   }
 
   export interface ExtensionConstructor {
     pluginName: string
-
-    new (props: ExtensionProps): Extension
+    new (props: IExtensionProps): Extension
   }
 
-  export type ExtensionRender = (lf: LogicFlow, container: HTMLElement) => void
+  export type ExtensionRenderFunc = (
+    lf: LogicFlow,
+    container: HTMLElement,
+  ) => void
+
+  // 对象形式定义的插件
+  export type ExtensionDefinition = {
+    pluginName: string
+    install?: (lf: LogicFlow, LFCtor: LogicFlowConstructor) => void
+    render?: ExtensionRenderFunc
+  }
 
   export interface Extension {
-    readonly pluginName?: string // 插件名称，只用用于插件覆盖和细粒度控制加载哪些插件
-    install?: (lf: LogicFlow, logicFlow: LogicFlowConstructor) => void
-    render?: ExtensionRender
-    destroy?: () => void
+    render: ExtensionRenderFunc
+    destroy?: () => void // TODO: 确认插件销毁函数参数类型
   }
 }
 

package/src/algorithm/edge.ts

@@ -1,4 +1,5 @@
 import LogicFlow from '../LogicFlow'
+
 import Point = LogicFlow.Point
 
 /**

package/src/algorithm/index.ts

@@ -1,4 +1,6 @@
 // 各类算法的实现
+export * from './outline'
+export * from './edge'
 
 /*
  * 计算垂直边的与起始点有一定距离对称，边垂直于边的点

package/src/algorithm/outline.ts

@@ -1,11 +1,11 @@
 import { ModelType } from '../constant'
 import {
   Model,
-  PolylineEdgeModel,
-  BezierEdgeModel,
   BaseNodeModel,
   BaseEdgeModel,
   LineEdgeModel,
+  BezierEdgeModel,
+  PolylineEdgeModel,
 } from '../model'
 import { points2PointsList, getBBoxOfPoints, getBezierPoints } from '../util'