diff --git a/packages/x6/src/core/cell.ts b/packages/x6/src/core/cell.ts index acd6b49068b..98973b1679a 100644 --- a/packages/x6/src/core/cell.ts +++ b/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) } diff --git a/packages/x6/src/graph/graph.ts b/packages/x6/src/graph/graph.ts index f5e6a9914f8..a1f4af0c513 100644 --- a/packages/x6/src/graph/graph.ts +++ b/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[] {