The GraphObject hierarchy forms the foundation of all visual elements in GoJS diagrams. This system provides a consistent structure for managing visual properties, layout, and user interactions across all diagram components.
The root class for all visual elements, providing common properties and behaviors.
abstract class GraphObject {
// Visibility and Appearance
visible: boolean;
opacity: number;
background: Brush | string;
areaBackground: Brush | string;
// Positioning and Layout
position: Point;
margin: Margin;
stretch: Stretch;
alignment: Spot;
// Sizing
width: number;
height: number;
minSize: Size;
maxSize: Size;
desiredSize: Size;
actualBounds: Rect;
naturalBounds: Rect;
// Interaction
pickable: boolean;
cursor: string;
toolTip: Adornment;
contextMenu: Adornment;
// Data Binding
bind(property: string, dataProperty?: string, converter?: (val: any) => any): GraphObject;
// Transformation
angle: number;
scale: number;
transform: Transform;
// Events
click: ((e: InputEvent, obj: GraphObject) => void) | null;
doubleClick: ((e: InputEvent, obj: GraphObject) => void) | null;
mouseEnter: ((e: InputEvent, obj: GraphObject) => void) | null;
mouseLeave: ((e: InputEvent, obj: GraphObject) => void) | null;
mouseDragEnter: ((e: InputEvent, obj: GraphObject) => void) | null;
mouseDragLeave: ((e: InputEvent, obj: GraphObject) => void) | null;
mouseDrop: ((e: InputEvent, obj: GraphObject) => void) | null;
// Hierarchy Navigation
panel: Panel | null;
part: Part | null;
diagram: Diagram | null;
layer: Layer | null;
}Container class that arranges and manages child GraphObjects according to layout rules.
class Panel extends GraphObject {
/**
* Creates a new Panel with the specified panel type.
* @param type - The panel type (Position, Auto, Spot, Horizontal, Vertical, etc.)
*/
constructor(type?: PanelType | string);
// Panel Configuration
type: PanelType;
itemArray: List<GraphObject>;
// Layout Properties
defaultAlignment: Spot;
defaultStretch: Stretch;
defaultSeparatorPadding: Margin;
// Sizing and Spacing
padding: Margin;
columnSizing: Sizing;
rowSizing: Sizing;
// Grid and Table Properties (for Table panels)
columnCount: number;
rowCount: number;
// Graduated Panel Properties
graduatedMin: number;
graduatedMax: number;
graduatedTickBase: number;
graduatedTickUnit: number;
// Methods
add(obj: GraphObject): Panel;
insert(i: number, obj: GraphObject): void;
remove(obj: GraphObject): boolean;
removeAt(i: number): GraphObject;
clear(): void;
findObject(name: string): GraphObject | null;
elt(i: number): GraphObject;
}Panel Types:
enum PanelType {
Position = 'Position', // Absolute positioning
Auto = 'Auto', // Auto-sizing container
Spot = 'Spot', // Spot-based positioning
Horizontal = 'Horizontal', // Horizontal layout
Vertical = 'Vertical', // Vertical layout
Table = 'Table', // Table layout
TableRow = 'TableRow', // Table row
TableColumn = 'TableColumn', // Table column
Viewbox = 'Viewbox', // Scaled container
Grid = 'Grid', // Grid background
Graduated = 'Graduated', // Graduated scale
Link = 'Link' // Link path layout
}Usage Examples:
// Horizontal panel with shapes
const panel = new go.Panel('Horizontal', {
background: 'lightblue',
margin: 5
})
.add(
new go.Shape('Circle', { width: 20, height: 20, fill: 'red' }),
new go.Shape('Rectangle', { width: 30, height: 20, fill: 'blue' })
);
// Auto panel (shape automatically surrounds content)
const autoPanel = new go.Panel('Auto')
.add(
new go.Shape('RoundedRectangle', { fill: 'white', stroke: 'black' }),
new go.TextBlock('Content', { margin: 8 })
);
// Table panel with multiple rows and columns
const tablePanel = new go.Panel('Table', {
defaultAlignment: go.Spot.Center
})
.add(
new go.TextBlock('Header 1', { row: 0, column: 0, font: 'bold 12pt sans-serif' }),
new go.TextBlock('Header 2', { row: 0, column: 1, font: 'bold 12pt sans-serif' }),
new go.TextBlock('Data 1', { row: 1, column: 0 }),
new go.TextBlock('Data 2', { row: 1, column: 1 })
);Base class for diagram elements that can be selected, moved, and manipulated by users.
class Part extends Panel {
/**
* Creates a new Part.
* @param type - Panel type for the part's layout
*/
constructor(type?: PanelType | string);
// Data Association
data: ObjectData;
category: string;
key: any;
// Positioning
location: Point;
position: Point;
locationSpot: Spot;
locationObjectName: string;
// Selection and State
isSelected: boolean;
selectable: boolean;
selectionObjectName: string;
selectionAdornmentTemplate: Adornment;
// Movement and Interaction
movable: boolean;
copyable: boolean;
deletable: boolean;
resizable: boolean;
resizeObjectName: string;
resizeAdornmentTemplate: Adornment;
rotatable: boolean;
rotateObjectName: string;
rotateAdornmentTemplate: Adornment;
// Grouping
containingGroup: Group | null;
containingGroupChanged: ((part: Part) => void) | null;
// Layout
layoutConditions: LayoutConditions;
// Highlighting and Animation
isHighlighted: boolean;
highlightAdornmentTemplate: Adornment;
// Link Connection (for Nodes)
portId: string;
fromLinkable: boolean;
toLinkable: boolean;
fromLinkableDuplicates: boolean;
toLinkableDuplicates: boolean;
fromLinkableSelfNode: boolean;
toLinkableSelfNode: boolean;
// Methods
move(newpos: Point, useLocation?: boolean): void;
canDelete(): boolean;
canCopy(): boolean;
canMove(): boolean;
// Port Methods (for Nodes)
findPort(portid: string): GraphObject | null;
getAvoidableRect(r: Rect): Rect;
// Adornment Methods
addAdornment(category: string, ad: Adornment): void;
removeAdornment(category: string): boolean;
clearAdornments(): void;
updateAdornments(): void;
}Represents nodes (vertices) in the diagram that can be connected by links.
class Node extends Part {
/**
* Creates a new Node.
* @param type - Panel type for the node's layout
*/
constructor(type?: PanelType | string);
// Link Connectivity
linksConnected: List<Link>;
findLinksInto(): Iterator<Link>;
findLinksOutOf(): Iterator<Link>;
findLinksConnected(category?: string): Iterator<Link>;
findTreeParentNode(): Node | null;
findTreeChildrenNodes(): Iterator<Node>;
findTreeLevel(): number;
findTreeRoot(): Node;
// Port Management
ports: Iterator<GraphObject>;
findPort(portid: string): GraphObject | null;
findLinksInto(portid?: string): Iterator<Link>;
findLinksOutOf(portid?: string): Iterator<Link>;
// Grouping (when acting as a group)
isTreeExpanded: boolean;
wasTreeExpanded: boolean;
expandTree(): void;
collapseTree(): void;
// Geometry
getAvoidableRect(r: Rect): Rect;
getLinkPoint(node: Node, port: GraphObject, spot: Spot, from: boolean, ortho: boolean, othernode: Node, otherport: GraphObject): Point;
getLinkDirection(node: Node, port: GraphObject, linkpoint: Point, spot: Spot, from: boolean, ortho: boolean, othernode: Node, otherport: GraphObject): number;
// Tree Operations
collapseTree(): void;
expandTree(): void;
findTreeParentNode(): Node | null;
findTreeChildrenNodes(): Iterator<Node>;
}Usage Examples:
// Basic node with auto-sizing panel
const simpleNode = new go.Node('Auto', {
selectable: true,
movable: true,
locationSpot: go.Spot.Center
})
.add(
new go.Shape('RoundedRectangle', {
fill: 'lightblue',
stroke: 'blue',
portId: '', // entire shape is a port
fromLinkable: true,
toLinkable: true
}),
new go.TextBlock('Node Text', {
margin: 8,
editable: true
})
.bind('text', 'text')
);
// Node with multiple ports
const nodeWithPorts = new go.Node('Spot')
.add(
new go.Shape('Rectangle', { fill: 'white', stroke: 'black', width: 100, height: 60 }),
new go.TextBlock({ alignment: go.Spot.Center })
.bind('text', 'name'),
// Input port on left side
new go.Shape('Circle', {
width: 10, height: 10, fill: 'blue',
portId: 'in', alignment: go.Spot.Left,
toLinkable: true
}),
// Output port on right side
new go.Shape('Circle', {
width: 10, height: 10, fill: 'red',
portId: 'out', alignment: go.Spot.Right,
fromLinkable: true
})
);Special nodes that can contain other Parts as members, with automatic bounds calculation.
class Group extends Node {
/**
* Creates a new Group.
* @param type - Panel type for the group's layout
*/
constructor(type?: PanelType | string);
// Member Management
memberParts: Set<Part>;
layout: Layout;
// Expansion State
isSubGraphExpanded: boolean;
wasSubGraphExpanded: boolean;
// Placeholder
placeholder: Placeholder;
computesBoundsAfterDrag: boolean;
computesBoundsIncludingLocation: boolean;
computesBoundsIncludingLinks: boolean;
// Layout Management
handleChildChangedEvent: boolean;
ungroupable: boolean;
// Subgraph Operations
collapseSubGraph(): void;
expandSubGraph(): void;
// Member Operations
addMembers(coll: Iterable<Part>, check?: boolean): boolean;
removeMembers(coll: Iterable<Part>, check?: boolean): boolean;
// Layout
layoutDiagram(updateallgroups?: boolean): void;
}Usage Examples:
// Basic group template
const groupTemplate = new go.Group('Auto', {
background: 'transparent',
ungroupable: true,
computesBoundsAfterDrag: true,
layout: new go.LayeredDigraphLayout({
direction: 90,
layerSpacing: 10
})
})
.add(
new go.Shape('RoundedRectangle', {
fill: 'rgba(128,128,128,0.2)',
stroke: 'gray',
strokeWidth: 2
}),
new go.Panel('Vertical')
.add(
// Group header
new go.Panel('Horizontal', {
alignment: go.Spot.Left,
defaultAlignment: go.Spot.Left
})
.add(
new go.TextBlock({
font: 'bold 12pt sans-serif',
margin: new go.Margin(5, 5, 0, 5)
})
.bind('text', 'text')
),
// Placeholder for group members
new go.Placeholder({
padding: 5,
alignment: go.Spot.TopLeft
})
)
);Represents connections (edges) between nodes in the diagram.
class Link extends Part {
/**
* Creates a new Link.
*/
constructor();
// Connection Points
fromNode: Node | null;
toNode: Node | null;
fromPort: GraphObject | null;
toPort: GraphObject | null;
fromPortId: string;
toPortId: string;
// Geometry and Routing
points: List<Point>;
routing: Routing;
curve: Curve;
curviness: number;
corner: number;
smoothness: number;
// Visual Properties
path: Shape;
// Arrowheads
fromArrow: string;
toArrow: string;
fromArrowScale: number;
toArrowScale: number;
// Adjustment and Avoidance
adjusting: LinkAdjusting;
// Selection and Interaction
selectable: boolean;
reshapable: boolean;
relinkableFrom: boolean;
relinkableTo: boolean;
// Geometric Calculations
getLinkPoint(node: Node, port: GraphObject, spot: Spot, from: boolean, ortho: boolean, othernode: Node, otherport: GraphObject): Point;
getLinkDirection(node: Node, port: GraphObject, linkpoint: Point, spot: Spot, from: boolean, ortho: boolean, othernode: Node, otherport: GraphObject): number;
// Path Methods
getPointAlongPath(frac: number): Point;
getAngleAlongPath(frac: number): number;
getLengthAlongPath(point: Point): number;
// Routing Methods
invalidateRoute(): void;
updateRoute(): void;
}Usage Examples:
// Basic link template
const linkTemplate = new go.Link({
routing: go.Routing.AvoidsNodes,
curve: go.Curve.JumpOver,
corner: 5,
toArrow: 'Standard',
relinkableFrom: true,
relinkableTo: true
})
.add(
new go.Shape({ strokeWidth: 2, stroke: 'black' })
.bind('stroke', 'color'),
new go.Shape({ toArrow: 'Standard', strokeWidth: 0, fill: 'black' })
.bind('fill', 'color'),
new go.TextBlock({
segmentIndex: 0,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Orientation.Upright
})
.bind('text', 'text')
);
// Link with custom path geometry
const customLink = new go.Link()
.add(
new go.Shape({
geometryString: 'M0 0 L10 10 L20 0',
strokeWidth: 3,
stroke: 'blue'
})
);Decorative parts that provide user interface elements like selection handles and resize handles.
class Adornment extends Part {
/**
* Creates a new Adornment.
* @param type - Panel type for the adornment's layout
*/
constructor(type?: PanelType | string);
// Association
adornedPart: Part | null;
adornedObject: GraphObject | null;
// Behavior
category: string;
locationSpot: Spot;
placeholder: Placeholder;
// Common Categories (static)
static Selection: string;
static Resize: string;
static Rotation: string;
static Link: string;
static ContextMenu: string;
static ToolTip: string;
}Usage Examples:
// Custom selection adornment
const selectionAdornment = new go.Adornment('Auto')
.add(
new go.Shape({
fill: null,
stroke: 'dodgerblue',
strokeWidth: 2
}),
new go.Placeholder()
);
// Resize adornment with handles
const resizeAdornment = new go.Adornment('Spot')
.add(
new go.Placeholder(),
new go.Shape('Rectangle', {
alignment: go.Spot.TopLeft,
cursor: 'nw-resize',
desiredSize: new go.Size(7, 7),
fill: 'lightblue',
stroke: 'dodgerblue'
}),
new go.Shape('Rectangle', {
alignment: go.Spot.TopRight,
cursor: 'ne-resize',
desiredSize: new go.Size(7, 7),
fill: 'lightblue',
stroke: 'dodgerblue'
})
// ... more handles
);Defines constraints and properties for individual rows and columns in Table Panels.
class RowColumnDefinition {
/**
* Creates a new RowColumnDefinition.
* @param init - Optional initialization properties, can include row or column index numbers
*/
constructor(init?: Partial<RowColumnDefinition & { row?: number; column?: number; }>);
// Basic Properties
panel: Panel | null;
isRow: boolean;
index: number;
// Size Properties
height: number;
width: number;
minimum: number;
maximum: number;
// Layout Properties
alignment: Spot;
stretch: Stretch;
sizing: Sizing;
// Separator Properties
separatorPadding: MarginLike;
separatorStroke: BrushLike;
separatorStrokeWidth: number;
separatorDashArray: number[] | null;
// Appearance Properties
background: BrushLike;
coversSeparators: boolean;
// Layout Results (Read-only after arrangement)
actual: number;
measured: number;
total: number;
position: number;
// Methods
computeEffectiveSpacingTop(first: number): number;
computeEffectiveSpacing(): number;
// Data Binding
bind(targetprop: string, sourceprop?: string, conv?: TargetConversion, backconv?: BackConversion): this;
bind(binding: Binding): this;
bindTwoWay(targetprop: string | Binding, sourceprop?: string, conv?: TargetConversion, backconv?: BackConversion): this;
}Sizing Enum:
enum Sizing {
Default = 1, // Resolves to None or Table Panel's rowSizing/columnSizing
None = 2, // Default if none specified on Table Panel
ProportionalExtra = 3 // Grants extra space proportionally
}Usage Examples:
// Define custom column widths for a table
const tablePanel = new go.Panel('Table');
// Add column definitions
tablePanel.addColumnDefinition(0, { width: 100, alignment: go.Spot.Left });
tablePanel.addColumnDefinition(1, { width: 150, alignment: go.Spot.Center });
tablePanel.addColumnDefinition(2, { sizing: go.Sizing.ProportionalExtra, alignment: go.Spot.Right });
// Add row definition with separator
tablePanel.addRowDefinition(1, {
separatorStroke: 'gray',
separatorStrokeWidth: 1,
background: 'lightgray'
});