[!CAUTION] UNDER ACTIVE DEVELOPMENT. COMING SOON!

json-canvas-renderer

A JavaScript library for rendering JSON Canvas format.

Overview

json-canvas-renderer is an NPM library designed to render the open source JSON Canvas format. JSON Canvas is a versatile format that represents nodes and edges within a canvas. Nodes can be text, files, links, or groups, and edges define connections between these nodes. This library makes it easy to visualize and interact with JSON Canvas data.

Features

• Supports rendering of all node types: text, file, link, and group.
• Handles edges with customizable start and end points.
• Easy integration into web applications.
• Customizable color schemes.

Installation

Install the library using npm:

npm install json-canvas-renderer

Usage

Here's a basic example of how to use json-canvas-renderer:

import { renderCanvas } from 'json-canvas-renderer';

// Sample JSON Canvas data
const jsonData = {
  nodes: [
    {
      id: "1",
      type: "text",
      x: 50,
      y: 50,
      width: 100,
      height: 50,
      color: "#FF0000",
      text: "Hello, World!"
    },
    // More nodes...
  ],
  edges: [
    {
      id: "1",
      fromNode: "1",
      toNode: "2",
      color: "#00FF00"
    },
    // More edges...
  ]
};

// Render the canvas
renderCanvas(document.getElementById('canvas-container'), jsonData);

JSON Canvas Specification

Top Level

The top level of JSON Canvas contains two arrays:

• nodes (optional, array of nodes)
• edges (optional, array of edges)

Nodes

Nodes are objects within the canvas. Nodes may be text, files, links, or groups.

Nodes are placed in the array in ascending order by z-index. The first node in the array should be displayed below all other nodes, and the last node in the array should be displayed on top of all other nodes.

Generic Node Attributes

• id (required, string): A unique ID for the node.
• type (required, string): The node type. (text, file, link, group)
• x (required, integer): The x position of the node in pixels.
• y (required, integer): The y position of the node in pixels.
• width (required, integer): The width of the node in pixels.
• height (required, integer): The height of the node in pixels.
• color (optional, canvasColor): The color of the node.

Specific Node Types

Text Type Nodes

• text (required, string): Plain text with Markdown syntax.

File Type Nodes

• file (required, string): Path to the file within the system.
• subpath (optional, string): A subpath that may link to a heading or a block.

Link Type Nodes

• url (required, string): The URL of the link.

Group Type Nodes

• label (optional, string): Text label for the group.
• background (optional, string): Path to the background image.
• backgroundStyle (optional, string): Rendering style of the background image. (cover, ratio, repeat)

Edges

Edges are lines that connect one node to another.

• id (required, string): A unique ID for the edge.
• fromNode (required, string): The node id where the connection starts.
• fromSide (optional, string): The side where this edge starts. (top, right, bottom, left)
• fromEnd (optional, string): The shape of the endpoint at the edge start. (none, arrow)
• toNode (required, string): The node id where the connection ends.
• toSide (optional, string): The side where this edge ends. (top, right, bottom, left)
• toEnd (optional, string): The shape of the endpoint at the edge end. (none, arrow)
• color (optional, canvasColor): The color of the line.
• label (optional, string): Text label for the edge.

Color

The canvasColor type is used to encode color data for nodes and edges. Colors can be specified in hex format (e.g., "#FF0000"), or using one of the preset colors:

• "1": Red
• "2": Orange
• "3": Yellow
• "4": Green
• "5": Cyan
• "6": Purple

Documentation

For more detailed documentation, visit JSON Canvas Documentation.

Contributing

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

License

This project is licensed under the MIT License.

This README provides a comprehensive overview of your library, its installation, usage, and the JSON Canvas specification. Adjust the URLs and specific details as necessary for your project.