whiteboard-util

Installation and Use
npm install whiteboard-util --save

Use this code to integrate the utility of the whiteboard

import { Whiteboard, REDO, UNDO } from "whiteboard-util";

To connect and use the methods

const openRoom = () => {
wbRef.current = new Whiteboard();
wbRef.current.socketConnection = isSocketConnected;
wbRef.current.roomId = sessionId;
wbRef.current.readOnly = readOnly;
// wbRef.current.apiHost = "https://whiteboard.thekolony.app/";
wbRef.current.apiHost = "http://localhost:5000/";
wbRef.current.extraData.userId = userId;
wbRef.current.extraData.userType = userType;
wbRef.current.openRoom({ thickness: strokeWidth });
wbRef.current.onObjectSelected = (canvasObject) => {
const { fill, stroke, strokeWidth, type } = canvasObject;
if (type !== "Image") {
setStrokeColor(stroke);
setFillColor(fill);
setStrokeWidth(strokeWidth);
}
setSelectedType(type);
};

wbRef.current.onObjectSelectCleared = () => {
setSelectedType("");
};

onOpenRoom(wbRef.current);
if (Array.isArray(prevResponse)) {
return;
}
if (prevResponse) {
wbRef.current.loadFromJSON(prevResponse);
}
};

Canvas Id

this.canvasId = "drawCanvasId";

To add the object on canvas

wbRef.current.addObject(object);

To Edit the object

wbRef.current.editObject(obj);

To undo the changes

wbRef.current.onUndoRedo(action);

To Close the service

wbRef.current.close();

To connect the socket

wbRef.current.socketConnection = true; // This is boolean,you want to use the whiteboard as share system or not

To set the width of the drawing

wbRef.current.setDrawingWidth(value);

To set the drawing mode

wbRef.current.setDrawingMode(true);