Plait Drawing Framework

@plait/draw is a plugin that provides the core logic for drawing flowcharts. It includes support for:

• Basic shapes: Fundamental geometric primitives.
• Standard flowchart shapes: Specialized shapes used in standard flowcharting (e.g., decision diamonds, process rectangles).

@plait/text is a package designed to handle text within the Plait framework. It provides unified management for displaying, updating, and editing text, with support for rich text formats.

Key Dependencies:

• It depends on @plait/core.
• Other Plait plugins that require text capabilities should depend on @plait/text.

Plait is a drawing framework designed with a plugin-based architecture. It provides a foundational drawing whiteboard with core capabilities like zooming, scaling, and canvas movement, but does not include built-in business logic. Instead, all business functionality (such as mind maps or flowcharts) must be added via plugins.

Key Features:

• Core Board Capabilities: Basic zooming, scaling, and scrolling.
• Plugin Mechanism: Extensible architecture for adding new drawing features.
• Data Model: Provides a foundational data model and transformation functions (supporting collaboration).
• Component-based: Business logic is organized into components (currently supports the Angular framework).

Plait's architecture is inspired by the Slate rich-text editor framework and is optimized for interactive drawing scenarios.

The @plait/core package is the central library of the Plait framework. It provides the core data model, data transformation functions, and the plugin mechanism. It also includes the base class for plugin element rendering and board components that handle basic whiteboard interactions.

Key capabilities include:

• Whiteboard Functions: Zooming (in/out), canvas dragging, integrated canvas scrolling, undo/redo, element selection (click/drag), and element positioning (drag).
• Data Model: An immutable data model based on Immer that provides atomic-based data change methods (Transforms) and a Change mechanism for data-driven rendering.
• Plugin Mechanism: An extension bridge that allows developers to implement custom interactions (via primitive DOM events like PointerDown, pointerUp, pointerMove, keyDown, keyUp) and custom rendering (via Angular components).

The @plait/mind package provides the core logic and implementation for mind mapping functionality within the Plait ecosystem. It handles data rendering and core interactions but follows a headless design principle: it does not include UI components like toolbars or property settings panels. This allows developers to implement their own user interfaces while relying on the plugin for event support and configuration.

Core Features:

• Layouts: Supports logical layout, standard layout, and indentation layout.
• Node Management: Quick creation (via Tab, Enter), deletion (via Delete, Backspace), copying, and pasting.
• Content Editing: Text editing for node themes, image insertion, and Emoji insertion.
• Node Interaction: Expand/collapse nodes, adjust node width, and view node summaries.
• Styling: Color themes and multi-theme support.

The @plait/pen package is a drawing plugin designed to implement whiteboard-like capabilities and freehand drawing features. It is intended to support tools such as:

• Standard brushes (normal pens)
• Highlighter pens
• Erasers
• Lasso tools

Note: This plugin is currently under development (🚧) and its API/features are still being planned.

@plait/layouts is a library designed to implement automatic layout algorithms for mind maps. It decouples the layout logic from other mind map functionalities, allowing the algorithms to focus exclusively on the spatial distribution of nodes.

Supported layout types include:

• Logical Layouts
• Standard Layouts
• Indented Layouts
• Nested Layouts

Note: Timelines and Fishbone diagrams are currently not supported.

The implementation is based on the concepts from the paper [Drawing Non-layered Tidy Trees in Linear Time], with modifications to the node abstractions to fit the library's needs.

Plait is a modern drawing framework designed for building integrated whiteboard tools. It provides a plugin-based architecture that allows developers to extend drawing capabilities, making it suitable for creating interactive features like mind maps, flowcharts, and freehand drawing.

Key features include:

• UI Framework Agnostic: The core does not depend on any specific frontend UI framework.
• Plugin Mechanism: Extends drawing functionality via plugins.
• Core Board Capabilities: Built-in support for zooming (in/out) and panning (moving).
• Data Model: Provides a foundational data model and transformation functions (supporting collaboration).
• Text Rendering: Uses the Slate framework for rich text rendering and editing within the board.

The @plait/common package provides shared logic intended for developers building drawing plugins. Instead of duplicating code across different plugins, you should implement reusable logic within @plait/common for features such as:

• Text processing
• Graphics rendering
• Image rendering
• Resize interactions
• Creation interactions

Package Structure

• core: Contains core logic, primarily housing the base classes for plugin components.
• generators: Implements the Generator abstraction, which is used for managing drawing elements and plugin component rendering.
• plugins: Contains reusable plugin logic.
• transforms: Contains common data processing logic.

Dependencies

• @plait/core