feat: planishing options of createCell, addNode, addEdge

compatible with old api

#10

packages/x6/src/core/cell.ts

@@ -413,13 +413,16 @@ export namespace Cell {
   export interface CreateCellOptions {
     id?: string | null
     data?: any
-    style?: Style
     visible?: boolean
     overlays?: Overlay[]
     render?: Renderer | null
   }
 
-  export interface CreateNodeOptions extends CreateCellOptions {
+  export interface NestedStyle extends Style {
+    style?: Style
+  }
+
+  export interface CreateNodeOptions extends CreateCellOptions, NestedStyle {
     /**
      * Specifies the x-coordinate of the node. For relative geometries, this
      * defines the percentage x-coordinate relative the parent width, which
@@ -461,7 +464,7 @@ export namespace Cell {
     alternateBounds?: Rectangle | Rectangle.RectangleLike
   }
 
-  export interface CreateEdgeOptions extends CreateCellOptions {
+  export interface CreateEdgeOptions extends CreateCellOptions, NestedStyle {
     /**
      * The source `Point` of the edge. This is used if the corresponding
      * edge does not have a source node. Otherwise it is ignored.
@@ -485,52 +488,81 @@ export namespace Cell {
   }
 
   export function createNode(options: CreateNodeOptions = {}): Cell {
-    const geo = new Geometry(
-      options.x,
-      options.y,
-      options.width,
-      options.height,
-    )
-
-    geo.relative = options.relative != null ? options.relative : false
-
-    if (options.offset != null) {
-      geo.offset = Point.clone(options.offset)
+    const {
+      id,
+      data,
+      visible,
+      overlays,
+      render,
+      x,
+      y,
+      width,
+      height,
+      relative,
+      offset,
+      collapsed,
+      alternateBounds,
+      style,
+      ...otherStyle
+    } = options
+
+    const geo = new Geometry(x, y, width, height)
+
+    geo.relative = relative != null ? relative : false
+
+    if (offset != null) {
+      geo.offset = Point.clone(offset)
     }
 
-    if (options.alternateBounds != null) {
-      geo.alternateBounds = Rectangle.clone(options.alternateBounds)
+    if (alternateBounds != null) {
+      geo.alternateBounds = Rectangle.clone(alternateBounds)
     }
 
-    const node = new Cell(options.data, geo, options.style)
-    if (options.collapsed != null) {
-      node.setCollapsed(options.collapsed)
+    const finalStyle = { ...otherStyle, ...style }
+    const node = new Cell(data, geo, finalStyle)
+    if (collapsed != null) {
+      node.setCollapsed(collapsed)
     }
 
     return applyCommonOptions(node, options, true)
   }
 
   export function createEdge(options: CreateEdgeOptions): Cell {
+    const {
+      id,
+      data,
+      visible,
+      overlays,
+      render,
+      sourcePoint,
+      targetPoint,
+      points,
+      offset,
+      style,
+      ...otherStyle
+    } = options
+
     const geom = new Geometry()
     geom.relative = true
 
-    if (options.sourcePoint != null) {
-      geom.sourcePoint = Point.clone(options.sourcePoint)
+    if (sourcePoint != null) {
+      geom.sourcePoint = Point.clone(sourcePoint)
     }
 
-    if (options.targetPoint != null) {
-      geom.targetPoint = Point.clone(options.targetPoint)
+    if (targetPoint != null) {
+      geom.targetPoint = Point.clone(targetPoint)
     }
 
-    if (options.offset != null) {
-      geom.offset = Point.clone(options.offset)
+    if (offset != null) {
+      geom.offset = Point.clone(offset)
     }
 
-    if (options.points != null) {
-      options.points.forEach(p => geom.addPoint(p))
+    if (points != null) {
+      points.forEach(p => geom.addPoint(p))
     }
 
-    const edge = new Cell(options.data, geom, options.style)
+    const finalStyle = { ...otherStyle, ...style }
+    const edge = new Cell(data, geom, finalStyle)
     return applyCommonOptions(edge, options, false)
   }
 

packages/x6/src/graph/graph.ts

@@ -7,7 +7,6 @@ import { Model } from '../core/model'
 import { State } from '../core/state'
 import { Geometry } from '../core/geometry'
 import { Renderer } from '../core/renderer'
-import { IHooks } from './hook'
 import { Align, VAlign, Style, Size } from '../types'
 import { detector, DomEvent, MouseEventEx } from '../common'
 import { GraphOptions, getOptions, globals } from '../option'
@@ -40,11 +39,8 @@ import {
   ViewportManager,
   CellManager,
 } from '../manager'
+import { IHooks } from './hook'
 import { hook, afterCreate } from './util'
-// import { GraphBase } from './property/base'
-// import { GraphGrid } from './property/grid'
-// import { GraphFolding } from './property/folding'
-// import { GraphPageBreak } from './property/pagebreak'
 import { GraphProperty } from './property'
 
 export class Graph extends GraphProperty implements IHooks {
@@ -272,8 +268,9 @@ export class Graph extends GraphProperty implements IHooks {
     }
 
     const options = node != null ? node : {}
-    const cell = this.createNode(options)
-    return this.addNodes([cell], options.parent, options.index)[0]
+    const { parent: p, index: i, ...others } = options
+    const cell = this.createNode(others)
+    return this.addNodes([cell], p, i)[0]
   }
 
   addNodes(nodes: Cell[], parent?: Cell, index?: number): Cell[] {