main

This is the main application bootstrap file demonstrating how to initialize and configure the JSCircuit Editor using the hexagonal architecture API.

Architecture Example: This file serves as a practical example of how the different architectural layers work together in the hexagonal architecture pattern:

  1. Domain Layer: Circuit aggregate and domain entities
  2. Application Layer: CircuitService for use case orchestration
  3. GUI Layer: GUIAdapter as the primary adapter for user interactions
  4. Infrastructure Layer: Renderers and configuration adapters

Extension Points Demonstrated:

  • Element registration through ElementRegistry
  • Renderer registration through RendererFactory
  • Command registration through GUICommandRegistry
  • Event-driven architecture through CircuitService

Performance Optimizations:

  • HiDPI canvas setup for crisp rendering on high-resolution displays
  • Resize observer pattern for efficient canvas management
  • Performance monitoring for development debugging
Description:

  • This is the main application bootstrap file demonstrating how to initialize and configure the JSCircuit Editor using the hexagonal architecture API.

    Architecture Example: This file serves as a practical example of how the different architectural layers work together in the hexagonal architecture pattern:

    1. Domain Layer: Circuit aggregate and domain entities
    2. Application Layer: CircuitService for use case orchestration
    3. GUI Layer: GUIAdapter as the primary adapter for user interactions
    4. Infrastructure Layer: Renderers and configuration adapters

    Extension Points Demonstrated:

    • Element registration through ElementRegistry
    • Renderer registration through RendererFactory
    • Command registration through GUICommandRegistry
    • Event-driven architecture through CircuitService

    Performance Optimizations:

    • HiDPI canvas setup for crisp rendering on high-resolution displays
    • Resize observer pattern for efficient canvas management
    • Performance monitoring for development debugging
Source:
Example
// To extend with a new element type:
ElementRegistry.register('CustomElement', (id, nodes, label, properties) => {
  return new CustomElement(id, nodes, label, properties);
});

// To add a new renderer:
rendererFactory.register('custom', CustomRenderer);

// To add a new command:
GUICommandRegistry.register('customAction', (services) => {
  return new CustomCommand(services.circuitService, services.circuitRenderer);
});

Requires

  • module:Circuit
  • module:CircuitService
  • module:GUIAdapter
  • module:ElementRegistry
  • module:RendererFactory
  • module:GUICommandRegistry

Members

(inner, constant) circuit

Domain and Application Layer Initialization

Following hexagonal architecture, we initialize from the inside-out:

  1. Domain aggregate (Circuit)
  2. Application service (CircuitService)
  3. Primary adapter (GUIAdapter)
.

Description:

  • Domain and Application Layer Initialization

    Following hexagonal architecture, we initialize from the inside-out:

    1. Domain aggregate (Circuit)
    2. Application service (CircuitService)
    3. Primary adapter (GUIAdapter)
Source:

Domain and Application Layer Initialization

Following hexagonal architecture, we initialize from the inside-out:

  1. Domain aggregate (Circuit)
  2. Application service (CircuitService)
  3. Primary adapter (GUIAdapter)

(inner, constant) stage

Application Bootstrap - Hexagonal Architecture Initialization

This section demonstrates the proper initialization sequence for a hexagonal architecture application with dependency injection and event-driven design.

Description:

  • Application Bootstrap - Hexagonal Architecture Initialization

    This section demonstrates the proper initialization sequence for a hexagonal architecture application with dependency injection and event-driven design.

Source:

Application Bootstrap - Hexagonal Architecture Initialization

This section demonstrates the proper initialization sequence for a hexagonal architecture application with dependency injection and event-driven design.

Methods

(inner) fitCanvasHiDPIOnce(canvas)

Fits canvas to HiDPI display once during initialization.

Description:

  • Fits canvas to HiDPI display once during initialization.

Source:
Parameters:
Name Type Description
canvas HTMLCanvasElement

The canvas element to configure

(inner) setupHiDPICanvas(canvas, onResize) → {function}

Sets up responsive HiDPI canvas with automatic resizing.

Description:

  • Sets up responsive HiDPI canvas with automatic resizing.

Source:
Parameters:
Name Type Description
canvas HTMLCanvasElement

The canvas element to configure
onResize function

Callback function to execute after resize
Returns:

Cleanup function to remove observers

Type
function