@econic/graph-morph

Meta-graph management, projection, animated transitions, and layout algorithms for hierarchical graph visualisation.

This is Layer 3 of the Econic graph framework. It understands graph hierarchy and drives @econic/graph-3d with smooth animated transitions during expand/collapse operations.

Installation

pnpm add @econic/graph-morph

Usage

import { GraphMorph } from '@econic/graph-morph';
import { Graph3D } from '@econic/graph-3d';

const renderer = new Graph3D({ canvas });
const morph = new GraphMorph(renderer);

// Define hierarchical structure
morph.defineNodes([
  { id: 'root', type: 'group', position: [0, 0, 0] },
  { id: 'child1', type: 'leaf', parent: 'root', position: [-1, 0, 0] },
  { id: 'child2', type: 'leaf', parent: 'root', position: [1, 0, 0] },
]);

// Animated expand/collapse
await morph.expand('root', { duration: 300 });
await morph.collapse('root');

Key Features

• Hierarchical Meta-Graph: Tree structure with group and leaf nodes
• Projection: Visible graph derived from expansion state
• Animated Transitions: Smooth expand/collapse with configurable easing
• Layout Algorithms: Force-directed, hierarchical, radial, grid

Documentation

See the full documentation for architecture details and API specifications.

License

MIT