Overview

The @inditextech/weave-js package is the core of the Weave.js ecosystem, implementing the foundational Weave class, along with the default nodes, plugins, and actions that power real-time collaborative visual applications.

This package provides the low-level engine that handles canvas rendering, event handling, plugin orchestration, and action dispatching—forming the backbone for building and extending Weave.js-based apps.

Weave.js is UI agnostic so you can instantiate the Weave class on any UI framework.

Usage

To use the Weave.js SDK on a UI project just follow this steps:

Install the dependencies on the project

First lets install the Weave.js dependencies on the project:

npm install @inditextech/weave-types @inditextech/weave-sdk

Instantiate the Weave class

Instantiate the Weave class, for example:

import {
  Weave,
  WeaveStageNode,
  WeaveLayerNode,
  WeaveGroupNode,
  WeaveRectangleNode,
  WeaveLineNode,
  WeaveTextNode,
  WeaveImageNode,
  WeaveFrameNode,
  WeaveBrushToolAction,
  WeaveFrameToolAction,
  WeaveImageToolAction,
  WeavePenToolAction,
  WeaveRectangleToolAction,
  WeaveMoveToolAction,
  WeaveSelectionToolAction,
  WeaveTextToolAction,
  WeaveZoomOutToolAction,
  WeaveZoomInToolAction,
  WeaveExportNodeToolAction,
  WeaveExportStageToolAction,
  WeaveFitToScreenToolAction,
  WeaveFitToSelectionToolAction,
  WeaveNodesSnappingPlugin,
  WeaveContextMenuPlugin,
  WeaveCopyPasteNodesPlugin,
} from "@inditextech/weave-sdk";
import { WeaveUser } from "@inditextech/weave-types";
import { WeaveStoreWebsockets} from "@inditextech/weave-store-websockets/client";
...

const containerId = "weaveContainer"; // Assuming you have on an HTML a <div id="weaveContainer" />
const roomId = "MyRoom";

// Instantiate your store
const store = new WeaveStoreAzureWebPubsub(
  {
    getUser: () => {
      return user as WeaveUser;
    },
    undoManagerOptions: {
      captureTimeout: 500,
    },
  },
  {
    roomId,
    url: "http://localhost:1234",
  }
);

// Setup the fonts to be used by the Weave.js instance
const fonts = [
  {
    id: "Arial",
    name: "Arial, sans-serif",
  },
  {
    id: "Helvetica",
    name: "Helvetica, sans-serif",
  },
  {
    id: "TimesNewRoman",
    name: "Times New Roman, serif",
  }
];

// Instantiate the nodes to register on the Weave.js instance
const nodes = [
  new WeaveStageNode(),
  new WeaveLayerNode(),
  new WeaveGroupNode(),
  new WeaveRectangleNode(),
  new WeaveLineNode(),
  new WeaveTextNode(),
  new WeaveImageNode(),
  new WeaveFrameNode(),
];

// Instantiate the actions to register on the Weave.js instance
const actions = [
  new WeaveMoveToolAction(),
  new WeaveSelectionToolAction(),
  new WeaveRectangleToolAction(),
  new WeavePenToolAction(),
  new WeaveImageToolAction(config), // Setup the Image Tool callbacks
  new WeaveTextToolAction(),
  new WeaveFrameToolAction(),
  new WeaveZoomOutToolAction(),
  new WeaveZoomInToolAction(),
  new WeaveFitToScreenToolAction(),
  new WeaveFitToSelectionToolAction(),
  new AlignElementsToolAction(),
  new WeaveExportNodeToolAction(),
  new WeaveExportStageToolAction(),
];

// Instantiate the plugin to register on the Weave.js instance
const plugins = [
  new WeaveNodesSnappingPlugin(),
  new WeaveContextMenuPlugin(),
  new WeaveCopyPasteNodesPlugin(),
]

// Instantiate the Weave class
const instance = new Weave(
  {
    store,
    nodes,
    actions,
    plugins,
    fonts,
  },
  {
    container: containerId,
    width: 1920,
    height: 1080,
  }
);

Access the instantiated the Weave class methods

Now you can call any of the methods of the Weave class.

Overview

Usage

Install the dependencies on the project

Instantiate the Weave class

Access the instantiated the Weave class methods

On this page