Diagram Engine library

Description

This library allows application developers to create collaborative drawing tools. This library is a ReactJS component library with pre-defined building blocks like a Canvas and Palette.

This library supports shapes that have been created by using Konva.js, and functionality to work collaborative through running operations on a ShareDB server. For this library to work collaborative, a ShareDB server has been made. It uses websockets to connect to clients and uses a mongo database to persist its data.

Supported models

• C4 model

Installation

The diagram-library is available on NPM and can be installed with either npm or yarn. This will allow you to use it in your own collaborative diagram drawing application.

Install with NPM:

$ npm install @hanica-dwa/diagram-library

Install with Yarn:

$ yarn add @hanica-dwa/diagram-library

Reference

Use Diagram engine

Diagram engine

To use the diagram engine, import the Diagram Engine and call the React component <DiagramEngine />. This will render a Canvas and a Palette. The diagram needs three arguments: width, height and an id. From here it is possible to create a local diagram.

import DiagramEngine from '@hanica-dwa/diagram-library';

const app = () => {
  return (
    <DiagramEngine width={1000} height={750} id={`UUID`}/>  
  )
}

Import and export data structure

It is possible to import and export the state of the shapes in a diagram from the library.

• importDataStructure | Import the shapes from the library and render them in the canvas.
• exportDataStructure | Export the shapes from the application to the library. Useful when create and subscribe to a diagram

import { importDataStructure, exportDataStructure } from '@hanica-dwa/diagram-library';

Sample of data structure which is validated in the library

{
shapes: {
  kjasdkl: {
    id: 'kjasdkl',
    type: 'rectangle',
    top: 0,
    left: 0,
    height: 400,
    width: 600,
    relation: undefined,
    customData: {},
    {shapeOwner: null, transformLock: false, contentOwner: null, contentLock: false}  },
},
};

Subscriptions

Subscribing to a document will allow the diagram library to process changes made by the user and allow the library to process updates from other collaborators.

import {
  subscribeAndCreateOnDocument,
  subscribeOnDocument,
  unsubscribeOnDocument,
  copyDocument,
} from '@hanica-dwa/diagram-library';

• subscribeAndCreateOnDocument('UUID') | Create a diagram and subscribe on a document to make it possible for collaboration. From this moment multiple users can editing on that diagram. The UUID parameter, provided by the application is the ID of a canvas.

• subscribeOnDocument('UUID') | Subscribe on document with a given UUID. When a user is subscribed, he can start editing the diagram collaborative with other users.

• copyDocument('UUID') | The copyDocument function allows you to create a local copy of a shared diagram.

• unsubscribeOnDocument | Unsubscribe on a document. This will close the connection to shareDB and changes will not be saved by the library.

This library is still in development.