togetherjs with paperjs in react component -

i trying integrate togetherjs collaboration paperjs canvas. below code setting paperjs & togetherjs (added global object in window)

componentdidmount() {     this.canvas = reactdom.finddomnode(this.refs.canvascontainer);     this.paper = new paperjs.paperscope();     this.paper.setup(this.canvas);     this.view = this.paper.view;     this.tool = new this.paper.tool();     this.tool.mindistance = 5;     this.tool.onmousedown = this.onmousedown;     this.tool.onmousedrag = this.ondrag;     this.tool.onmouseup = this.onmouseup;     this.raster = new this.paper.raster({       source: null,       position: this.view.center     });     this.raster.scale(0.4);     this.raster.size = this.paper.view.size;     this.view.draw();     this.project = this.paper.project;     this.drawinglayer = new this.paper.layer();     this.drawinglayer.activate();   } 

togetherjs events added below in constructor,

window.togetherjs.hub.on('draw', this.collabdraw); window.togetherjs.hub.on('drawstart', this.collabdrawstart); window.togetherjs.hub.on('drawend', this.collabdrawfinish); 

however drawing of new path not working when collaborate mode on. property this.colabpath 1 holding path data sent peer , triggered events, drawstart, draw , drawend (as shown above)

  setcollabusername() {     return this.props.profilename;   }    newcollabpathstart(point, width, color) {     this.collabpath = new this.paper.path();     this.collabpath.strokewidth = width;     this.collabpath.strokecolor = color;     this.collabpath.add(point);     this.patharray.push(this.collabpath);     return;   }    newcollabpathdraw(point) {     this.collabpath.add(point);     return;   }    newcollabpathfinish() {     this.collabpath.simplify();     return;   }    collabdrawstart(msg) {     if (!msg.sameurl) {       return;     }     this.newcollabpathstart(msg.point, msg.color, msg.width);     this.view.draw();     return;   }    collabdraw(msg) {     if (!msg.sameurl) {       return;     }     this.newcollabpathdraw(msg.point);     this.view.draw();     return;   }    collabdrawfinish(msg) {     if (!msg.sameurl) {       return;     }     this.newcollabpathfinish(msg.event);     this.view.draw();     return;   }    onmouseup(event) {     event.preventdefault();     if (!this.props.panstatus) {       this.path.simplify();       if (window.togetherjs.running) {         window.togetherjs.send({           type: 'drawend'         });       }     } else {       // check collab status       this.canvas.style.cursor = 'grab';       this.canvas.style.cursor = '-moz-grab';       this.canvas.style.cursor = '-webkit-grab';       this.lastx = event.point.x;       this.lasty = event.point.y;     }     this.view.draw();     threedrutils.exportjson(this.project.activelayer).then(       (jsonstring) => {         this.props.addannotation(jsonstring);       }     );   }    onmousedown(event) {     event.preventdefault();     if (this.props.importannotation) {       this.project.activelayer.clear();       this.props.clearimport(null);     }     if (!this.props.isstrokeopen) {       this.props.togglestrokewindow();     }     if (!this.props.panstatus) {       this.canvas.style.cursor = 'default';       this.path = new this.paper.path();       this.path.strokewidth = this.props.strokewidth;       this.path.strokecolor = this.props.strokecolor;       this.path.add(event.point);       this.patharray.push(this.path);       if (window.togetherjs.running) {         window.togetherjs.send({           type: 'drawstart',           point: event.point,           color: this.props.strokecolor,           width: this.props.strokewidth         });       }     } else {       // check collab status       this.canvas.style.cursor = 'grab';       this.canvas.style.cursor = '-moz-grab';       this.canvas.style.cursor = '-webkit-grab';       this.lastx = event.point.x;       this.lasty = event.point.y;     }     this.view.draw();   }   ondrag(event) {     event.preventdefault();     if (!this.props.panstatus) {       this.path.add(event.point);       if (window.togetherjs.running) {         window.togetherjs.send({           type: 'draw',           point: event.point         });       }     } else {       // check collab status       event.tool.mindistance = 1;       this.canvas.style.cursor = 'grabbing';       this.canvas.style.cursor = '-moz-grabbing';       this.canvas.style.cursor = '-webkit-grabbing';       const deltax =  this.lastx -  math.ceil(event.point.x);       const deltay =  this.lasty -  math.ceil(event.point.y);       this.project.view.scrollby(deltax, deltay);     }     this.view.draw();   } 

it lot of code there no other way can explain issue :|