Depict

Depict is a JavaScript library for building canvas-based user interfaces.

• Declarative: Depict makes it painless to create complex, animation and event-driven graphs without mental overhead.
• Maintainable: Organize simple and clear nodes to create complex shapes. There's no need for specific positioning or layout engines—just focus on offsets. No need to manage complex relationships or application state communication.
• Performance: Includes automatic performance tuning, but if you need even better performance, optional tools are available. You can quickly demonstrate your app and optimize later. It's fast enough for most cases.
• Multi-pattern: You can build your graph driven by function variables, simple state, or even React, Vue, or Svelte state. The graph will be driven as expected, with no need for complex communication between shapes and elements.

---

Installation

npm install @challenai/depict --save

Examples

You can create a graph application with any framework you prefer. The following demo applications are available, which include examples using React, Vue, Svelte, or vanilla javascript:

• React graph example
• Vue graph example
• Svelte graph example
• HTML + Javascript example
• Web Worker example

To run any application from the examples directory, follow these steps:

cd exmaples/xxx

# install packages
npm install

# run the application
npm run dev

Quick Guide

import { NonWorkerDepict } from "@challenai/depict/nonworker";

// Create a depict instance to hold the graph canvas DOM
const depict = new NonWorkerDepict({
  root: root_div_element, // root_div_element = <div></div>
  maxLayers: 1,
  graph: graph,
});

// Start your graph
depict.start();

// Now, you can build your graph with an array of nodes.
// You can add events, animations, or even a state system for larger applications.
const node = {
  x: 150,
  y: 145,
  shapes: [
    {
      path: "M 20 20 l 0 100",
      opts: {
        stroke: "#666",
        fill: "#333",
      },
    },
  ],
};

// Update the first layer with our shapes
depict.graph.updateQueue(0, [node]);
// Request to render the new elements
depict.graph.renderAll();

Features

To-do list:

• Support single-thread version.
• Provide API to get text rectangle information.
• Support text alignment.
• Support changing element render priority.
• Support text bounding box.
• Provide a new animated renderer?
• More examples: rendering images, animations.

License

MIT