GraphObject Hierarchy

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;
}

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;
}

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
}

// 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 })
);

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;
}

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>;
}

// 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
  })
);

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;
}

// 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
      })
    )
);

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;
}

// 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'
  })
);

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;
}

// 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
);

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;
}

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
}

// 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'
});