Architecture Overview

This chapter provides a detailed introduction to the overall architecture of WebCAD, helping you understand how the system works.

System Architecture Diagram

Layered Architecture

User Interface Layer (UI Layer)

The user interface layer handles all user interaction and display.

Component	Responsibility	Main Features
MainView	Main view container	Integrates all UI components, manages layout
RibbonBar	Ribbon menu	Command buttons, tool groups
CommandLine	Command line	Command input, prompt messages, history
SidePalettes	Side panels	Collapsible functional panel container
PropertiesPanel	Properties panel	Display and edit properties of selected entities
LayerPanel	Layer panel	Layer list, layer operations

Core Layer

The core layer is the central hub, coordinating all modules.

Component	Responsibility	Key API
Engine	Global entry point	addEntities(), getPoint(), currentDoc
CadDocument	Document model	layers, blocks, save(), load()
Editor	Edit control	Input handling, state management
UndoManager	Undo management	undo(), redo(), added_undoMark()
CoordinateSystem	Coordinate system	WcsToUcs(), UcsToWcs(), WcsToDcs()

Entity Layer

The entity layer defines data structures and behaviors for all graphical objects.

System Layer

The system layer provides various system-level functionality.

Component	Responsibility	Description
CommandRegistry	Command management	Register, find, execute commands
PluginManager	Plugin management	Load, activate, unload plugins
CadEventManager	Event management	Event subscribe, publish, cancel
EntityReactorManager	Reactor management	Entity-linked updates
SelectionManager	Selection management	Entity selection, selection set operations

Rendering Layer

The rendering layer converts entity data into visual graphics.

Component	Responsibility	Description
CanvasController	Canvas control	View transformations, zoom and pan
EntityRenderer	Entity rendering	Converts entities to graphics
CadGraphics	Graphics drawing	Low-level drawing API
BucketManager	Bucket management	Optimized rendering for large datasets

Data Layer

The data layer manages various data collections in a document.

Collection	Description	Main Operations
Layers	Layer collection	add(), get(), remove(), has()
Blocks	Block definition collection	add(), get(), remove()
TextStyles	Text styles	Font, height, width factor
LineTypes	Linetype definitions	Dash patterns, scale

Core Module Details

Engine Module

Engine is the core entry point for the entire system, providing static methods to access all functionality:

class Engine {
  // === Document Access ===
  static get currentDoc(): CadDocument;
  static get pcanvas(): CanvasController;
  static get undoManager(): UndoManager;
  static get eventManager(): CadEventManager;
  
  // === System Variables ===
  static CECOLOR: number;     // Current drawing color
  static CLAYER: string;      // Current layer
  static CELTSCALE: number;   // Current linetype scale
  static OSMODE: number;      // Object snap mode
  static ORTHOMODE: boolean;  // Orthogonal mode
  
  // === Entity Operations ===
  static addEntities(entities): void;
  static eraseEntities(entities): void;
  
  // === User Input ===
  static getPoint(options): Promise<InputResult>;
  static getSelections(options): Promise<InputResult>;
  static getReal(options): Promise<InputResult>;
  static getInteger(options): Promise<InputResult>;
  
  // === View Operations ===
  static zoomExtents(): void;
  static zoomToEntities(entities): void;
  static regen(): void;
}

CadDocument Module

CadDocument represents a CAD document:

class CadDocument {
  // === Basic Properties ===
  name: string;           // Document name
  filePath: string;       // File path
  isModified: boolean;    // Whether modified
  
  // === Data Collections ===
  layers: Layers;         // Layer collection
  blocks: Blocks;         // Block collection
  layouts: Layouts;       // Layout collection
  textStyles: TextStyles; // Text styles
  dimStyles: DimStyles;   // Dimension styles
  lineTypes: LineTypes;   // Linetype definitions
  
  // === Methods ===
  save(): Promise<void>;
  load(path: string): Promise<void>;
  newDocument(): void;
}

Command Execution Flow

Event Flow

Event Types

WebCAD events follow the -ing (before, cancellable) and -ed (after) naming convention:

Event Category	Before Event (-ing)	After Event (-ed)
Document	DocumentOpening	DocumentOpened
Entity Add	EntityAdding	EntityAdded
Entity Delete	EntityErasing	EntityErased
Entity Modify	-	EntityModified
Command	CommandStarting	CommandEnded
Selection	-	SelectionChanged
Layer	LayerAdding	LayerAdded

Plugin Lifecycle

Lifecycle Hooks

interface Plugin {
  manifest: PluginManifest;
  
  onLoad?(context: PluginContext): Promise<void>;
  onActivate?(context: PluginContext): Promise<void>;
  onDeactivate?(context: PluginContext): Promise<void>;
  onUnload?(context: PluginContext): Promise<void>;
}

Reactor System

The reactor system implements entity-linked updates, typically used for associative dimensions.

Reactor Events

Event	Trigger	Purpose
Modified	Owner modified	Update dependent entity
Erased	Owner deleted	Clean up dependencies or delete dependent
Copied	Owner copied	Handle dependency copying
Transformed	Owner transformed	Synchronize dependent entity transformation

Coordinate System

Coordinate Transformation

const wcsPoint = new Point2D(100, 100);

// WCS -> UCS (for user interface display)
const ucsPoint = Engine.trans.WcsToUcs(wcsPoint);

// WCS -> DCS (for screen drawing)
const dcsPoint = Engine.trans.WcsToDcs(wcsPoint);

// Mouse coordinates to WCS
const mousePoint = new Point2D(event.clientX, event.clientY);
const worldPoint = Engine.canvasToWcs(mousePoint);

Rendering Pipeline

Rendering Optimization Strategies

Strategy	Description	Effect
Viewport Culling	Only render entities within the viewport	Reduces vertex binding
Bucket Rendering	Group entities by region	Improves cache hit rate
Level of Detail	Simplified display when zoomed out	Reduces vertex count
Incremental Updates	Only update changed entities	Reduces redraw scope
Batch Drawing	Merge drawing calls with same style	Reduces state switches

Data Flow

Next Steps

• Engine System - Dive into the Engine API
• Document Model - Learn about CadDocument
• Entity Base Class - Learn about EntityBase
• Command System - Learn about command development
• Plugin System - Learn about plugin development