@zklogic/draw.io
Version:
Draw.IO - Graph Editor integration in Angular-cli
1 lines • 3.34 kB
JavaScript
function P2PCollab(e){socket=io(App.SOCKET_IO_SRV);var t,o=e.editor.graph,n=0,s=["#e6194b","#3cb44b","#ffe119","#4363d8","#f58231","#911eb4","#46f0f0","#f032e6","#bcf60c","#fabebe","#008080","#e6beff","#9a6324","#fffac8","#800000","#aaffc3","#808000","#ffd8b1","#000075","#808080","#000000"],i={},r=1,a={},l={},c={},f=!0,d=!1;function u(o,n){var s=e.getCurrentUser();if(d&&null!=s&&null!=s.email){var i=JSON.stringify({from:t,id:r,type:o,userId:s.id,username:s.displayName,data:n});for(p2pId in r++,f&&socket.emit("message",i),c)c[p2pId].send(i)}}function m(t){if(t=JSON.parse(t),!(a[t.from]>=t.id)){a[t.from]=t.id;var r,l=t.username?t.username:"Anonymous",c=t.userId;if(null==i[c]){var f=s[n];i[c]={cursor:document.createElement("div"),index:n,color:f},n++,(r=i[c].cursor).style.position="absolute",r.style.zIndex=5e3;var d="data:image/svg+xml;base64,"+btoa('<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="684.000000pt" height="1024.000000pt" viewBox="0 0 684.000000 1024.000000" preserveAspectRatio="xMidYMid meet"><g transform="translate(0.000000,1024.000000) scale(0.100000,-0.100000)" stroke="none" fill="'+f+'"><path d="M0 5305 l0 -4940 568 567 c1170 1168 1637 1627 1644 1613 4 -7 242 -579 529 -1271 286 -693 523 -1262 527 -1266 4 -3 368 175 809 395 l802 402 -539 1294 c-297 712 -540 1296 -540 1298 0 2 682 3 1515 3 833 0 1515 3 1515 8 0 4 -1537 1544 -3415 3422 l-3415 3415 0 -4940z m3091 1175 l2604 -2599 -1304 -1 c-1236 0 -1303 -1 -1299 -17 3 -10 265 -641 582 -1402 318 -761 582 -1395 587 -1408 8 -22 -3 -29 -366 -210 -241 -121 -378 -184 -384 -178 -5 6 -262 622 -572 1370 -309 748 -564 1362 -566 1365 -2 2 -428 -420 -946 -938 -518 -518 -945 -942 -950 -942 -4 0 -7 1701 -7 3780 0 2224 4 3780 9 3780 5 0 1181 -1170 2612 -2600z"/></g></svg>');r.innerHTML='<img src="'+d+'" style="width:16px"><div style="color:'+f+'">'+l+"</div>",e.container.appendChild(r)||document.body.appendChild(r)}else r=i[c].cursor;var u=t.data;switch(t.type){case"cursor":var m=o.view.translate,p=o.view.scale,g=e.diagramContainer,v=mxUtils.getOffset(g);u.x=(m.x+u.x)*p-g.scrollLeft+v.x,u.y=(m.y+u.y)*p-g.scrollTop+v.y,r.style.left=u.x+"px",r.style.top=u.y+"px";break;case"diff":var y=e.getCurrentFile();null!=y.sync&&y.sync.p2pCatchup(u.data,u.from,u.to,u.id,y.getDescriptor(),(function(){console.log("Diff Synced")}),(function(){console.log("Diff Error")}))}}}function p(e,o){if(SimplePeer.WEBRTC_SUPPORT){var n=new SimplePeer({initiator:o});return n.on("signal",(function(o){socket.emit("sendSignal",{to:e,from:t,signal:o})})),n.on("error",(function(t){delete l[e],console.log("error",t)})),n.on("connect",(function(){c[e]=n,delete l[e],0==Object.keys(l).length&&(f=!1,socket.emit("movedToP2P",""))})),n.on("close",(function(){delete c[e]})),n.on("data",m),l[e]=n,n}}this.sendMessage=u,o.addMouseListener({startX:0,startY:0,scrollLeft:0,scrollTop:0,mouseDown:function(e,t){},mouseMove:function(e,t){var n=o.view.translate,s=o.view.scale;u("cursor",{x:t.graphX/s-n.x,y:t.graphY/s-n.y})},mouseUp:function(e,t){}}),socket.on("message",m),socket.on("clientsList",(function(e){t=e.cId;for(var o=0;o<e.list.length;o++)p(e.list[o],!0)})),socket.on("signal",(function(e){var t;l[e.from]?t=l[e.from]:(t=p(e.from,!1),f=!0),t.signal(e.signal)})),socket.on("newClient",(function(e){f=!0})),this.joinFile=function(e){socket.emit("join",{name:e}),d=!0}}