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);