Flowscape Core SDK

@flowscape-ui/core-sdk is a high-performance, framework-agnostic 2D canvas engine designed for creating interactive infinite canvases. Built on the versatile Konva.js library, it supports a wide variety of features essential for developing rich, responsive applications.

Features

• Framework-Agnostic: Seamlessly integrates with React, Vue, Svelte, Angular, or vanilla JavaScript applications.
• Extensible Plugin System: Take advantage of a robust plugin architecture that allows for easy enhancement through ready-to-use plugins.
• Comprehensive Toolset: Includes grids, rulers, guides, area selection, and alignment aids to boost design efficiency.
• Keyboard Shortcuts: Enhances user experience with convenient hotkeys for common actions like copying, pasting, and grouping nodes.
• Rich Shapes and Transformations: Supports various shapes (rectangles, circles, text, images, arrows) with options for rotation, scaling, and movement with aspect ratio locks.
• Inline Editing: Users can directly double-click text nodes for instant editing.
• History System: Implemented full undo/redo support to manage and revert changes easily.
• TypeScript-First Design: Comes with built-in TypeScript support for enhanced developer productivity and type safety.
• High Performance: Capable of handling over 1000 nodes without compromising frame rates.
• Addon API: Developers can extend existing components with custom functionalities as needed.

Quick Start Example

Set up the core engine and add shapes with the following TypeScript code:

import { CoreEngine, GridPlugin, SelectionPlugin, NodeHotkeysPlugin } from '@flowscape-ui/core-sdk';

const engine = new CoreEngine({
  container: document.getElementById('canvas-container')!,
  width: 1200,
  height: 800,
  plugins: [
    new GridPlugin({ enabled: true }),
    new SelectionPlugin({ dragEnabled: true }),
    new NodeHotkeysPlugin(),
  ],
});

const rect = engine.nodes.addShape({
  x: 100,
  y: 100,
  width: 200,
  height: 150,
  fill: '#3b82f6',
  cornerRadius: 8,
});

const text = engine.nodes.addText({
  x: 120,
  y: 140,
  text: 'Hello Flowscape!',
  fontSize: 24,
  fill: 'white',
});

Discover the potential of @flowscape-ui/core-sdk for creating intricate and interactive experiences on 2D canvases, leveraging the power of a comprehensive, modular, and efficient architecture.