Smart Canvas Library Overview

Comprehensive canvas system for Angular applications with drag & drop, connections, theming, and mobile support

Smart Canvas Library Overview

🎯 What is Smart Canvas?

Smart Canvas (@smart-canvas) is a comprehensive, intelligent canvas system designed to replace multiple canvas implementations across the GoGrab Space monorepo. It provides a unified, feature-rich solution for building interactive node-based interfaces, flow composers, and visual editors.

✨ Key Features

🎨 Multi-Theme Ready

🖱️ Advanced Interactions

📱 Mobile Optimized

🔗 Node Connectivity

💾 Intelligent Storage

🎛️ Rich Configuration

🏗️ Architecture

Core Components

@smart-canvas/
├── SmartCanvasComponent     # Main canvas container
├── CanvasNodeComponent      # Individual node rendering
├── CanvasConnectionComponent # SVG connection rendering
├── CanvasGridComponent      # Background grid system
├── CanvasToolbarComponent   # Action toolbar
├── CanvasConfigPanel        # Configuration UI
└── CanvasMinimapComponent   # Navigation minimap

Core Services

@smart-canvas/services/
├── SmartCanvasService       # State management & persistence
├── CanvasInteractionService # User interaction handling
└── CanvasDragDropService    # Drag & drop operations

Type System

interface SmartCanvasConfig {
  viewport: CanvasViewport;
  transform: CanvasTransform;
  features: CanvasFeatures;
  interactions: CanvasInteractionConfig;
  appearance: CanvasAppearanceConfig;
  performance: CanvasPerformanceConfig;
  content: CanvasContentConfig;
}

🚀 Quick Start

Installation

# Smart Canvas is part of the monorepo
yarn install

Basic Usage

import { SmartCanvasComponent } from '@smart-canvas';

@Component({
  template: `
    <lib-smart-canvas
      [nodes]="nodes"
      [connections]="connections"
      [config]="canvasConfig">
    </lib-smart-canvas>
  `
})
export class MyCanvasComponent {
  nodes: CanvasNode[] = [
    {
      id: 'node-1',
      type: 'process',
      position: { x: 100, y: 100, z: 1 },
      size: { width: 120, height: 80 },
      data: { title: 'Start Process' },
      ports: [
        { id: 'out-1', type: 'output', position: { x: 1, y: 0.5 } }
      ]
    }
  ];

  canvasConfig: Partial<SmartCanvasConfig> = {
    features: {
      enablePanning: true,
      enableZooming: true,
      enableSelection: true,
      showGrid: true
    }
  };
}

Advanced Configuration

canvasConfig: SmartCanvasConfig = {
  appearance: {
    theme: 'modern',
    grid: {
      enabled: true,
      type: 'dots',
      size: 40,
      color: '#e5e5e5',
      opacity: 0.4
    }
  },
  interactions: {
    panSensitivity: 1,
    zoomSensitivity: 0.8,
    selectionRectangle: true,
    panWithSpace: false
  },
  features: {
    enableMultiSelection: true,
    enableConnectionCreation: true,
    showToolbar: true,
    showConfigPanel: true
  }
};

🎮 User Interactions

Mouse Controls

Keyboard Shortcuts

Touch Gestures

🔧 Integration Examples

Flow Composer Integration

// Replace existing canvas with Smart Canvas
@Component({
  template: `
    <lib-smart-canvas
      [nodes]="flowNodes"
      [connections]="flowConnections"
      [config]="flowConfig"
      (nodeUpdate)="onNodeUpdate($event)"
      (connectionCreate)="onConnectionCreate($event)"
      (contextMenu)="onContextMenu($event)">
    </lib-smart-canvas>
  `
})
export class FlowComposerComponent {
  // Migrate existing flow data to Smart Canvas format
}

Logic Builder Integration

// Convert logic blocks to Smart Canvas nodes
const logicNodes = logicBlocks.map(block => ({
  id: block.id,
  type: 'logic',
  position: block.position,
  size: block.size,
  data: block.config,
  ports: block.inputs.concat(block.outputs)
}));

📊 Performance Features

Optimization Strategies

Performance Monitoring

canvasConfig.performance = {
  enableVirtualScrolling: true,
  maxVisibleNodes: 1000,
  debounceMs: 16,
  updateStrategy: 'frame-aligned'
};

🎨 Theming System

Built-in Themes

Custom Themes

canvasConfig.appearance.customTheme = {
  primary: '#your-primary-color',
  background: '#your-bg-color',
  grid: '#your-grid-color',
  nodes: {
    default: '#your-node-color',
    selected: '#your-selection-color'
  }
};

🔗 API Reference

Core Interfaces

Event System

🧪 Testing

Unit Tests

# Run Smart Canvas tests
yarn test smart-canvas

Integration Tests

# Test with Flow Composer
yarn test flow-composer-integration

📈 Migration Guide

From Space Canvas

  1. Replace <space-canvas> with <lib-smart-canvas>
  2. Update node data structure to include ports
  3. Configure theme to 'space' for consistent appearance

From Logic Builder

  1. Convert logic blocks to CanvasNode format
  2. Map input/output connections to ports
  3. Update event handlers for new API

From Flow Composer

  1. Migrate flow data to Smart Canvas format
  2. Update connection creation logic
  3. Integrate with new toolbar and config panel

🎯 Best Practices

Performance

Accessibility

User Experience

🔮 Future Roadmap

Planned Features

Performance Improvements

Smart Canvas represents the next generation of canvas systems in the GoGrab Space ecosystem, providing a unified, powerful, and extensible foundation for all visual editing needs.