0
# Scene Graph & Rendering
1

2
Vega's scene graph and rendering system provides multi-backend support for Canvas, SVG, and hybrid rendering with comprehensive visual element management, bounds calculation, and high-performance drawing operations.
3

4
## Capabilities
5

6
### Scene Graph Structure
7

8
Core scene graph classes for hierarchical visual organization.
9

10
```typescript { .api }
11
/**
12
 * Main scene graph structure
13
 */
14
class Scenegraph {
15
  /**
16
   * Create a new scenegraph
17
   * @param root - Optional root group item
18
   */
19
  constructor(root?: GroupItem);
20
  
21
  /** Root group item of the scene graph */
22
  root: GroupItem;
23
  
24
  /**
25
   * Serialize scenegraph to JSON
26
   * @param indent - Optional indentation for pretty printing
27
   * @returns JSON string representation
28
   */
29
  toJSON(indent?: number): string;
30
}
31

32
/**
33
 * Base scene graph item
34
 */
35
interface Item<T = any> {
36
  /** Associated data tuple */
37
  datum: T;
38
  
39
  /** Runtime mark definition */
40
  mark: RuntimeMark;
41
  
42
  /** Item bounds */
43
  bounds?: Bounds;
44
  
45
  /** Item x coordinate */
46
  x?: number;
47
  
48
  /** Item y coordinate */
49
  y?: number;
50
  
51
  /** Item width */
52
  width?: number;
53
  
54
  /** Item height */
55
  height?: number;
56
  
57
  /** Fill color */
58
  fill?: Color;
59
  
60
  /** Stroke color */
61
  stroke?: Color;
62
  
63
  /** Stroke width */
64
  strokeWidth?: number;
65
  
66
  /** Fill opacity */
67
  fillOpacity?: number;
68
  
69
  /** Stroke opacity */
70
  strokeOpacity?: number;
71
}
72

73
/**
74
 * Group item container for nested items
75
 */
76
class GroupItem implements Item {
77
  /** Child items */
78
  items: Item[];
79
  
80
  /** Item count */
81
  count: number;
82
  
83
  /**
84
   * Add child item
85
   * @param item - Item to add
86
   */
87
  add(item: Item): GroupItem;
88
  
89
  /**
90
   * Remove child item
91
   * @param item - Item to remove
92
   */
93
  remove(item: Item): GroupItem;
94
  
95
  /**
96
   * Clear all child items
97
   */
98
  clear(): GroupItem;
99
}
100

101
interface RuntimeMark {
102
  /** Mark type */
103
  marktype: string;
104
  
105
  /** Mark name */
106
  name?: string;
107
  
108
  /** Mark role */
109
  role?: string;
110
  
111
  /** Mark group */
112
  group?: GroupItem;
113
}
114

115
type Color = string;
116

117
interface Bounds {
118
  /** Left coordinate */
119
  x1: number;
120
  
121
  /** Top coordinate */
122
  y1: number;
123
  
124
  /** Right coordinate */
125
  x2: number;
126
  
127
  /** Bottom coordinate */
128
  y2: number;
129
}
130
```
131

132
### Bounds Calculations
133

134
Comprehensive bounds calculation system for visual elements.
135

136
```typescript { .api }
137
/**
138
 * Bounding box calculations for scene graph items
139
 */
140
class Bounds {
141
  /**
142
   * Create new bounds
143
   * @param bounds - Optional initial bounds
144
   */
145
  constructor(bounds?: Bounds);
146
  
147
  /** Left coordinate */
148
  x1: number;
149
  
150
  /** Top coordinate */
151
  y1: number;
152
  
153
  /** Right coordinate */
154
  x2: number;
155
  
156
  /** Bottom coordinate */
157
  y2: number;
158
  
159
  /**
160
   * Set bounds coordinates
161
   * @param x1 - Left coordinate
162
   * @param y1 - Top coordinate
163
   * @param x2 - Right coordinate
164
   * @param y2 - Bottom coordinate
165
   * @returns The bounds instance
166
   */
167
  set(x1: number, y1: number, x2: number, y2: number): Bounds;
168
  
169
  /**
170
   * Add coordinates to bounds
171
   * @param x - X coordinate to include
172
   * @param y - Y coordinate to include
173
   * @returns The bounds instance
174
   */
175
  add(x: number, y: number): Bounds;
176
  
177
  /**
178
   * Expand bounds by specified amounts
179
   * @param d - Expansion amount (all sides)
180
   * @returns The bounds instance
181
   */
182
  expand(d: number): Bounds;
183
  
184
  /**
185
   * Round bounds to integer coordinates
186
   * @returns The bounds instance
187
   */
188
  round(): Bounds;
189
  
190
  /**
191
   * Translate bounds by offset
192
   * @param dx - X offset
193
   * @param dy - Y offset
194
   * @returns The bounds instance
195
   */
196
  translate(dx: number, dy: number): Bounds;
197
  
198
  /**
199
   * Union with another bounds
200
   * @param bounds - Bounds to union with
201
   * @returns The bounds instance
202
   */
203
  union(bounds: Bounds): Bounds;
204
  
205
  /**
206
   * Intersect with another bounds
207
   * @param bounds - Bounds to intersect with
208
   * @returns The bounds instance
209
   */
210
  intersect(bounds: Bounds): Bounds;
211
  
212
  /**
213
   * Check if bounds contains point
214
   * @param x - X coordinate
215
   * @param y - Y coordinate
216
   * @returns True if point is contained
217
   */
218
  contains(x: number, y: number): boolean;
219
  
220
  /**
221
   * Check if bounds intersects with another
222
   * @param bounds - Bounds to test intersection
223
   * @returns True if bounds intersect
224
   */
225
  intersects(bounds: Bounds): boolean;
226
  
227
  /**
228
   * Get bounds width
229
   * @returns Width value
230
   */
231
  width(): number;
232
  
233
  /**
234
   * Get bounds height
235
   * @returns Height value
236
   */
237
  height(): number;
238
  
239
  /**
240
   * Check if bounds is empty
241
   * @returns True if bounds is empty
242
   */
243
  empty(): boolean;
244
  
245
  /**
246
   * Clone the bounds
247
   * @returns New bounds instance
248
   */
249
  clone(): Bounds;
250
  
251
  /**
252
   * Clear the bounds
253
   * @returns The bounds instance
254
   */
255
  clear(): Bounds;
256
}
257

258
/**
259
 * Calculate bounds for a scene graph item
260
 * @param item - Scene graph item
261
 * @param bounds - Optional bounds to update
262
 * @returns Updated bounds
263
 */
264
function boundItem(item: Item, bounds?: Bounds): Bounds;
265

266
/**
267
 * Calculate bounds for a mark
268
 * @param mark - Mark definition
269
 * @param bounds - Optional bounds to update
270
 * @returns Updated bounds
271
 */
272
function boundMark(mark: RuntimeMark, bounds?: Bounds): Bounds;
273

274
/**
275
 * Calculate bounds with clipping
276
 * @param item - Scene graph item
277
 * @param clip - Clipping bounds
278
 * @param bounds - Optional bounds to update
279
 * @returns Updated bounds
280
 */
281
function boundClip(item: Item, clip: Bounds, bounds?: Bounds): Bounds;
282

283
/**
284
 * Calculate stroke bounds
285
 * @param item - Scene graph item
286
 * @param bounds - Optional bounds to update
287
 * @returns Updated bounds
288
 */
289
function boundStroke(item: Item, bounds?: Bounds): Bounds;
290

291
/**
292
 * Calculate bounds for rendering context
293
 * @param item - Scene graph item
294
 * @param context - Rendering context
295
 * @returns Updated bounds
296
 */
297
function boundContext(item: Item, context: any): Bounds;
298
```
299

300
### Rendering System
301

302
Multi-backend rendering with Canvas, SVG, and hybrid support.
303

304
```typescript { .api }
305
/**
306
 * Base renderer class
307
 */
308
abstract class Renderer {
309
  /**
310
   * Create new renderer
311
   * @param loader - Optional resource loader
312
   */
313
  constructor(loader?: ResourceLoader);
314
  
315
  /** Resource loader for images, fonts, etc. */
316
  loader: ResourceLoader;
317
  
318
  /**
319
   * Initialize the renderer
320
   * @param el - Container element
321
   * @param width - Canvas width
322
   * @param height - Canvas height
323
   * @param origin - Drawing origin coordinates
324
   * @param scaleFactor - Scale factor for high DPI
325
   * @returns The renderer instance
326
   */
327
  initialize(el: Element, width: number, height: number, origin: [number, number], scaleFactor?: number): Renderer;
328
  
329
  /**
330
   * Resize the renderer
331
   * @param width - New width
332
   * @param height - New height
333
   * @param origin - New origin coordinates
334
   * @param scaleFactor - New scale factor
335
   * @returns The renderer instance
336
   */
337
  resize(width: number, height: number, origin: [number, number], scaleFactor?: number): Renderer;
338
  
339
  /**
340
   * Render a scene graph
341
   * @param scene - Scene graph to render
342
   * @returns The renderer instance
343
   */
344
  render(scene: Scene): Renderer;
345
  
346
  /**
347
   * Get the rendered element
348
   * @returns DOM element containing the rendered output
349
   */
350
  element(): Element;
351
  
352
  /**
353
   * Get the rendered canvas (Canvas renderer only)
354
   * @returns Canvas element or null
355
   */
356
  canvas(): HTMLCanvasElement | null;
357
  
358
  /**
359
   * Clean up renderer resources
360
   */
361
  cleanup(): void;
362
}
363

364
/**
365
 * Canvas-based renderer
366
 */
367
class CanvasRenderer extends Renderer {
368
  constructor(loader?: ResourceLoader);
369
  
370
  /**
371
   * Get the canvas element
372
   * @returns Canvas element
373
   */
374
  canvas(): HTMLCanvasElement;
375
  
376
  /**
377
   * Get the 2D rendering context
378
   * @returns Canvas 2D context
379
   */
380
  context(): CanvasRenderingContext2D;
381
}
382

383
/**
384
 * SVG-based renderer
385
 */
386
class SVGRenderer extends Renderer {
387
  constructor(loader?: ResourceLoader);
388
  
389
  /**
390
   * Get the SVG element
391
   * @returns SVG element
392
   */
393
  svg(): SVGSVGElement;
394
}
395

396
/**
397
 * SVG string renderer (no DOM)
398
 */
399
class SVGStringRenderer extends Renderer {
400
  constructor(loader?: ResourceLoader);
401
  
402
  /**
403
   * Get SVG markup string
404
   * @returns SVG markup as string
405
   */
406
  svg(): string;
407
}
408

409
/**
410
 * Hybrid Canvas/SVG renderer
411
 */
412
class HybridRenderer extends Renderer {
413
  constructor(loader?: ResourceLoader);
414
  
415
  /**
416
   * Get the canvas element
417
   * @returns Canvas element
418
   */
419
  canvas(): HTMLCanvasElement;
420
  
421
  /**
422
   * Get the SVG element
423
   * @returns SVG element
424
   */
425
  svg(): SVGSVGElement;
426
}
427

428
interface Scene {
429
  /** Mark type */
430
  marktype: string;
431
  
432
  /** Scene items */
433
  items: Item[];
434
  
435
  /** Scene bounds */
436
  bounds: Bounds;
437
}
438

439
/** Available rendering types */
440
const RenderType: {
441
  Canvas: 'canvas';
442
  SVG: 'svg';
443
  Hybrid: 'hybrid';
444
  None: 'none';
445
};
446

447
/**
448
 * Get renderer module by type
449
 * @param type - Renderer type
450
 * @returns Renderer constructor
451
 */
452
function renderModule(type: string): typeof Renderer;
453

454
/**
455
 * Configure hybrid renderer options
456
 * @param options - Hybrid renderer configuration
457
 */
458
function setHybridRendererOptions(options: HybridRendererOptions): void;
459

460
interface HybridRendererOptions {
461
  /** Canvas marks to render on canvas */
462
  canvas?: string[];
463
  
464
  /** SVG marks to render as SVG */
465
  svg?: string[];
466
  
467
  /** Default renderer for unspecified marks */
468
  default?: 'canvas' | 'svg';
469
}
470
```
471

472
### Event Handling
473

474
Event handlers for interactive scene graphs.
475

476
```typescript { .api }
477
/**
478
 * Base event handler
479
 */
480
class Handler {
481
  /**
482
   * Create new event handler
483
   * @param loader - Resource loader
484
   * @param tooltip - Optional tooltip handler
485
   */
486
  constructor(loader?: ResourceLoader, tooltip?: Function);
487
  
488
  /**
489
   * Initialize event handling
490
   * @param element - DOM element to attach events
491
   * @param origin - Coordinate origin
492
   * @param obj - Handler context object
493
   * @returns The handler instance
494
   */
495
  initialize(element: Element, origin: [number, number], obj: any): Handler;
496
  
497
  /**
498
   * Set scene graph for event targeting
499
   * @param scene - Scene graph root
500
   * @returns The handler instance
501
   */
502
  scene(scene: Scene): Handler;
503
  
504
  /**
505
   * Enable or disable event handling
506
   * @param enable - Whether to enable events
507
   * @returns The handler instance
508
   */
509
  events(enable: boolean): Handler;
510
}
511

512
/**
513
 * Canvas-specific event handler
514
 */
515
class CanvasHandler extends Handler {
516
  constructor(loader?: ResourceLoader, tooltip?: Function);
517
}
518

519
/**
520
 * SVG-specific event handler
521
 */
522
class SVGHandler extends Handler {
523
  constructor(loader?: ResourceLoader, tooltip?: Function);
524
}
525

526
/**
527
 * Hybrid renderer event handler
528
 */
529
class HybridHandler extends Handler {
530
  constructor(loader?: ResourceLoader, tooltip?: Function);
531
}
532
```
533

534
### Resource Loading
535

536
Resource loader for external assets.
537

538
```typescript { .api }
539
/**
540
 * Resource loader for images, fonts, and other assets
541
 */
542
class ResourceLoader {
543
  /**
544
   * Create new resource loader
545
   * @param loader - Optional base loader
546
   */
547
  constructor(loader?: any);
548
  
549
  /**
550
   * Load an image resource
551
   * @param url - Image URL
552
   * @returns Promise resolving to image element
553
   */
554
  loadImage(url: string): Promise<HTMLImageElement>;
555
  
556
  /**
557
   * Load a font resource
558
   * @param name - Font name
559
   * @param url - Font URL
560
   * @returns Promise resolving when font is loaded
561
   */
562
  loadFont(name: string, url: string): Promise<void>;
563
  
564
  /**
565
   * Preload resources
566
   * @param resources - Array of resource URLs
567
   * @returns Promise resolving when all resources are loaded
568
   */
569
  preload(resources: string[]): Promise<void>;
570
  
571
  /**
572
   * Sanitize URL for loading
573
   * @param url - URL to sanitize
574
   * @returns Sanitized URL
575
   */
576
  sanitizeURL(url: string): string;
577
}
578
```
579

580
### Gradients
581

582
Gradient definition and rendering support.
583

584
```typescript { .api }
585
/**
586
 * Gradient definition for fill and stroke
587
 */
588
class Gradient {
589
  /**
590
   * Create new gradient
591
   * @param type - Gradient type ('linear' or 'radial')
592
   * @param stops - Color stops array
593
   */
594
  constructor(type: 'linear' | 'radial', stops: GradientStop[]);
595
  
596
  /** Gradient type */
597
  type: 'linear' | 'radial';
598
  
599
  /** Color stops */
600
  stops: GradientStop[];
601
  
602
  /** Start coordinates (linear gradients) */
603
  x1?: number;
604
  y1?: number;
605
  
606
  /** End coordinates (linear gradients) */
607
  x2?: number;
608
  y2?: number;
609
  
610
  /** Center coordinates (radial gradients) */
611
  cx?: number;
612
  cy?: number;
613
  
614
  /** Radius (radial gradients) */
615
  r?: number;
616
  
617
  /**
618
   * Add color stop
619
   * @param offset - Stop position (0-1)
620
   * @param color - Stop color
621
   * @returns The gradient instance
622
   */
623
  addStop(offset: number, color: string): Gradient;
624
}
625

626
interface GradientStop {
627
  /** Stop position (0-1) */
628
  offset: number;
629
  
630
  /** Stop color */
631
  color: string;
632
  
633
  /** Stop opacity */
634
  opacity?: number;
635
}
636
```
637

638
### Path Operations
639

640
Path generation and manipulation utilities.
641

642
```typescript { .api }
643
/**
644
 * Parse SVG path string
645
 * @param path - SVG path string
646
 * @returns Parsed path commands
647
 */
648
function pathParse(path: string): PathCommand[];
649

650
/**
651
 * Render path to context
652
 * @param context - Rendering context
653
 * @param item - Path item to render
654
 */
655
function pathRender(context: any, item: Item): void;
656

657
/**
658
 * Get path for symbol marks
659
 * @param symbol - Symbol type
660
 * @returns Path generator function
661
 */
662
function pathSymbols(symbol: string): Function;
663

664
/**
665
 * Get path for curve interpolation
666
 * @param curve - Curve type
667
 * @returns Curve generator function
668
 */
669
function pathCurves(curve: string): Function;
670

671
/**
672
 * Generate rectangle path
673
 * @param x - X coordinate
674
 * @param y - Y coordinate
675
 * @param width - Rectangle width
676
 * @param height - Rectangle height
677
 * @returns Path string
678
 */
679
function pathRectangle(x: number, y: number, width: number, height: number): string;
680

681
/**
682
 * Generate trail path
683
 * @param points - Array of points
684
 * @returns Path string
685
 */
686
function pathTrail(points: [number, number][]): string;
687

688
interface PathCommand {
689
  /** Command type */
690
  type: string;
691
  
692
  /** Command arguments */
693
  args: number[];
694
}
695
```
696

697
### Intersection Detection
698

699
Advanced intersection detection for interactive features.
700

701
```typescript { .api }
702
/**
703
 * Test intersection between shapes
704
 * @param item1 - First item
705
 * @param item2 - Second item
706
 * @returns True if items intersect
707
 */
708
function intersect(item1: Item, item2: Item): boolean;
709

710
/**
711
 * Test path intersection with point
712
 * @param path - Path commands
713
 * @param x - X coordinate
714
 * @param y - Y coordinate
715
 * @returns True if point intersects path
716
 */
717
function intersectPath(path: PathCommand[], x: number, y: number): boolean;
718

719
/**
720
 * Test point intersection
721
 * @param item - Scene graph item
722
 * @param x - X coordinate
723
 * @param y - Y coordinate
724
 * @returns True if point intersects item
725
 */
726
function intersectPoint(item: Item, x: number, y: number): boolean;
727

728
/**
729
 * Test intersection using fill rule
730
 * @param item - Scene graph item
731
 * @param x - X coordinate
732
 * @param y - Y coordinate
733
 * @param rule - Fill rule ('nonzero' or 'evenodd')
734
 * @returns True if point intersects using rule
735
 */
736
function intersectRule(item: Item, x: number, y: number, rule: 'nonzero' | 'evenodd'): boolean;
737

738
/**
739
 * Test box-line intersection
740
 * @param x1 - Box left
741
 * @param y1 - Box top
742
 * @param x2 - Box right
743
 * @param y2 - Box bottom
744
 * @param ax - Line start X
745
 * @param ay - Line start Y
746
 * @param bx - Line end X
747
 * @param by - Line end Y
748
 * @returns True if box and line intersect
749
 */
750
function intersectBoxLine(x1: number, y1: number, x2: number, y2: number, ax: number, ay: number, bx: number, by: number): boolean;
751
```
752

753
### Scene Operations
754

755
Scene graph traversal and manipulation utilities.
756

757
```typescript { .api }
758
/**
759
 * Test scene graph equality
760
 * @param scene1 - First scene
761
 * @param scene2 - Second scene
762
 * @returns True if scenes are equal
763
 */
764
function sceneEqual(scene1: Scene, scene2: Scene): boolean;
765

766
/**
767
 * Test path equality
768
 * @param path1 - First path
769
 * @param path2 - Second path
770
 * @returns True if paths are equal
771
 */
772
function pathEqual(path1: string, path2: string): boolean;
773

774
/**
775
 * Convert scene graph to JSON
776
 * @param scene - Scene graph to serialize
777
 * @param indent - Optional indentation
778
 * @returns JSON string
779
 */
780
function sceneToJSON(scene: Scene, indent?: number): string;
781

782
/**
783
 * Parse scene graph from JSON
784
 * @param json - JSON string to parse
785
 * @returns Parsed scene graph
786
 */
787
function sceneFromJSON(json: string): Scene;
788

789
/**
790
 * Visit scene graph nodes
791
 * @param scene - Root scene
792
 * @param visitor - Visitor function
793
 */
794
function sceneVisit(scene: Scene, visitor: (item: Item) => void): void;
795

796
/**
797
 * Visit scene graph for picking
798
 * @param scene - Root scene
799
 * @param visitor - Visitor function
800
 * @param filter - Optional filter function
801
 */
802
function scenePickVisit(scene: Scene, visitor: (item: Item) => void, filter?: (item: Item) => boolean): void;
803

804
/**
805
 * Set Z-order for scene items
806
 * @param scene - Scene to reorder
807
 * @param zorder - Z-order comparison function
808
 */
809
function sceneZOrder(scene: Scene, zorder: (a: Item, b: Item) => number): void;
810
```
811

812
### Mark System
813

814
Mark type definitions and configuration.
815

816
```typescript { .api }
817
/** Mark type registry and definitions */
818
const Marks: {
819
  /** Arc mark */
820
  arc: MarkDefinition;
821
  
822
  /** Area mark */
823
  area: MarkDefinition;
824
  
825
  /** Image mark */
826
  image: MarkDefinition;
827
  
828
  /** Line mark */
829
  line: MarkDefinition;
830
  
831
  /** Path mark */
832
  path: MarkDefinition;
833
  
834
  /** Rectangle mark */
835
  rect: MarkDefinition;
836
  
837
  /** Rule (line segment) mark */
838
  rule: MarkDefinition;
839
  
840
  /** Shape mark */
841
  shape: MarkDefinition;
842
  
843
  /** Symbol mark */
844
  symbol: MarkDefinition;
845
  
846
  /** Text mark */
847
  text: MarkDefinition;
848
  
849
  /** Trail mark */
850
  trail: MarkDefinition;
851
  
852
  /** Group mark */
853
  group: MarkDefinition;
854
};
855

856
interface MarkDefinition {
857
  /** Mark type name */
858
  type: string;
859
  
860
  /** Mark drawing function */
861
  draw: (context: any, scene: Scene) => void;
862
  
863
  /** Mark bounds calculation function */
864
  bounds: (item: Item, bounds: Bounds) => Bounds;
865
  
866
  /** Mark picking function */
867
  pick: (context: any, item: Item, x: number, y: number) => boolean;
868
}
869
```
870

871
### Text Operations
872

873
Text measurement and styling utilities.
874

875
```typescript { .api }
876
/**
877
 * Get font specification string
878
 * @param item - Text item
879
 * @returns Font specification
880
 */
881
function font(item: Item): string;
882

883
/**
884
 * Get font family
885
 * @param item - Text item
886
 * @returns Font family string
887
 */
888
function fontFamily(item: Item): string;
889

890
/**
891
 * Get font size
892
 * @param item - Text item
893
 * @returns Font size in pixels
894
 */
895
function fontSize(item: Item): number;
896

897
/**
898
 * Calculate line height
899
 * @param item - Text item
900
 * @returns Line height in pixels
901
 */
902
function lineHeight(item: Item): number;
903

904
/**
905
 * Calculate multi-line text offset
906
 * @param item - Text item
907
 * @param dy - Line offset
908
 * @returns Calculated offset
909
 */
910
function multiLineOffset(item: Item, dy: number): number;
911

912
/**
913
 * Measure text metrics
914
 * @param item - Text item
915
 * @param text - Text to measure
916
 * @param context - Optional rendering context
917
 * @returns Text measurement object
918
 */
919
function textMetrics(item: Item, text: string, context?: any): TextMetrics;
920

921
interface TextMetrics {
922
  /** Text width */
923
  width: number;
924
  
925
  /** Text height */
926
  height: number;
927
  
928
  /** Baseline offset */
929
  baseline: number;
930
}
931
```
932

933
### DOM Utilities
934

935
DOM manipulation and SVG utilities.
936

937
```typescript { .api }
938
/**
939
 * Create DOM element
940
 * @param tag - Element tag name
941
 * @param ns - Optional namespace
942
 * @returns Created element
943
 */
944
function domCreate(tag: string, ns?: string): Element;
945

946
/**
947
 * Find DOM element by selector
948
 * @param selector - CSS selector
949
 * @param root - Optional root element
950
 * @returns Found element or null
951
 */
952
function domFind(selector: string, root?: Element): Element | null;
953

954
/**
955
 * Get child element
956
 * @param parent - Parent element
957
 * @param tag - Child tag name
958
 * @param ns - Optional namespace
959
 * @returns Child element
960
 */
961
function domChild(parent: Element, tag: string, ns?: string): Element;
962

963
/**
964
 * Clear element contents
965
 * @param element - Element to clear
966
 */
967
function domClear(element: Element): void;
968

969
/**
970
 * Create coordinate point
971
 * @param x - X coordinate
972
 * @param y - Y coordinate
973
 * @returns Point object
974
 */
975
function point(x: number, y: number): Point;
976

977
/**
978
 * Create markup element
979
 * @param markup - HTML/SVG markup string
980
 * @returns Created element
981
 */
982
function markup(markup: string): Element;
983

984
/**
985
 * Serialize element to XML
986
 * @param element - Element to serialize
987
 * @returns XML string
988
 */
989
function serializeXML(element: Element): string;
990

991
/**
992
 * Reset SVG definition IDs
993
 */
994
function resetSVGDefIds(): void;
995

996
interface Point {
997
  /** X coordinate */
998
  x: number;
999
  
1000
  /** Y coordinate */
1001
  y: number;
1002
}
1003
```
1004

1005
## Usage Examples
1006

1007
### Basic Scene Graph
1008

1009
```typescript
1010
import { Scenegraph, GroupItem, Bounds } from "vega";
1011

1012
// Create scene graph
1013
const scenegraph = new Scenegraph();
1014
const root = scenegraph.root;
1015

1016
// Add items
1017
const item = {
1018
  marktype: 'rect',
1019
  x: 10,
1020
  y: 10,
1021
  width: 100,
1022
  height: 50,
1023
  fill: 'blue'
1024
};
1025

1026
root.add(item);
1027

1028
// Calculate bounds
1029
const bounds = new Bounds();
1030
boundItem(item, bounds);
1031
console.log(bounds); // {x1: 10, y1: 10, x2: 110, y2: 60}
1032
```
1033

1034
### Canvas Rendering
1035

1036
```typescript
1037
import { CanvasRenderer, parse, View } from "vega";
1038

1039
const renderer = new CanvasRenderer();
1040
const view = new View(runtime, { renderer: 'canvas' });
1041

1042
// Initialize and render
1043
view.initialize('#chart');
1044
view.run();
1045

1046
// Get canvas for export
1047
const canvas = view.toCanvas().then(canvas => {
1048
  document.body.appendChild(canvas);
1049
});
1050
```
1051

1052
### Custom Path Generation
1053

1054
```typescript
1055
import { pathParse, pathRender } from "vega";
1056

1057
// Parse SVG path
1058
const commands = pathParse('M10,10 L50,50 Z');
1059

1060
// Create path item
1061
const pathItem = {
1062
  marktype: 'path',
1063
  path: 'M10,10 L50,50 Z',
1064
  stroke: 'red',
1065
  strokeWidth: 2
1066
};
1067

1068
// Render to canvas context
1069
pathRender(context, pathItem);
1070
```
1071

1072
### Intersection Testing
1073

1074
```typescript
1075
import { intersectPoint, intersectPath } from "vega";
1076

1077
// Test point intersection
1078
const item = {
1079
  marktype: 'rect',
1080
  x: 0, y: 0,
1081
  width: 100, height: 50
1082
};
1083

1084
const hit = intersectPoint(item, 25, 25); // true
1085

1086
// Test path intersection
1087
const path = pathParse('M0,0 L100,100 Z');
1088
const pathHit = intersectPath(path, 50, 50); // depends on path
1089
```