opentok-whiteboard.min.js

/*!
 *  opentok-whiteboard (http://github.com/aullman/opentok-whiteboard)
 *
 *  Shared Whiteboard that works with OpenTok
 *
 *  @Author: Adam Ullman (http://github.com/aullman)
 *  @Copyright (c) 2014 Adam Ullman
 *  @License: Released under the MIT license (http://opensource.org/licenses/MIT)
**/
var ng,p;ng="undefined"==typeof angular&&"undefined"!=typeof require?require("angular"):angular,p="undefined"==typeof paper&&"undefined"!=typeof require?require("paper"):paper;var OpenTokWhiteboard=ng.module("opentok-whiteboard",["opentok"]).directive("otWhiteboard",["OTSession","$window",function(e,o){return{restrict:"E",template:'<canvas hidpi="off"></canvas><div class="OT_panel"><input type="button" ng-class="{OT_color: true, OT_selected: c[\'background-color\'] === color}" ng-repeat="c in colors" ng-style="c" ng-click="changeColor(c)"></input><input type="button" ng-click="erase()" ng-class="{OT_erase: true, OT_selected: erasing}" value="Eraser"></input><a class="OT_capture" download="whiteboard_capture.png" ng-click="capture()">{{captureText}}</a><input type="button" ng-click="undo()" class="OT_capture" value="Undo"></input><input type="button" ng-click="redo()" class="OT_capture" value="Redo"></input><input type="button" ng-click="clear()" class="OT_clear" value="Clear"></input>',link:function(n,t,i){var a,r=t.context.querySelector("canvas"),c=t.context.querySelector(".OT_capture"),s={dragging:!1},u=0,d=[],l=[],g=[],h=[],f=[],v=/(iPad|iPhone|iPod)/g.test(navigator.userAgent);p.setup(r),r.width=i.width||t.width(),r.height=i.height||t.height(),p.view.viewSize=new p.Size(r.width,r.height),p.view.draw(),n.colors=[{"background-color":"black"},{"background-color":"blue"},{"background-color":"red"},{"background-color":"green"},{"background-color":"orange"},{"background-color":"purple"},{"background-color":"brown"}],n.captureText=v?"Email":"Capture",n.strokeCap="round",n.strokeJoin="round",n.lineWidth=2;var b=function(){p.project.clear(),p.view.update(),h=[],g=[],d=[],l=[],u=0};n.changeColor=function(e){n.color=e["background-color"],n.erasing=!1},n.changeColor(n.colors[Math.floor(Math.random()*n.colors.length)]),n.clear=function(){b(),e.session&&e.session.signal({type:"otWhiteboard_clear"})},n.erase=function(){n.erasing=!0},n.capture=function(){v?o.location.href="mailto:?subject=Whiteboard&Body=<img src='"+r.toDataURL("image/png")+"'>":c.href=r.toDataURL("image/png")},n.undo=function(){if(d.length){var e=d.pop();m(e),E("otWhiteboard_undo",e)}};var m=function(e){l.push(e),g.forEach(function(o){o.uuid===e&&(o.visible=!1,p.view.update())}),h.forEach(function(o){o.uuid===e&&(o.visible=!1)})};n.redo=function(){if(l.length){var e=l.pop();w(e),E("otWhiteboard_redo",e)}};var k,w=function(e){d.push(e),g.forEach(function(o){o.uuid===e&&(o.visible=!0,p.view.update())}),h.forEach(function(o){o.uuid===e&&(o.visible=!0)})},y=function(e){switch(h.push(e),e.event){case"start":var o=new p.Path;o.selected=!1,o.strokeColor=e.color,o.strokeWidth=n.lineWidth,o.strokeCap=n.strokeCap,o.strokeJoin=n.strokeJoin,o.uuid=e.uuid,"eraser"===e.mode&&(o.blendMode="destination-out",o.strokeWidth=50),ng.isDefined(e.visible)&&(o.visible=e.visible);var t=new p.Point(e.fromX,e.fromY);o.moveTo(t),p.view.draw(),g.push(o);break;case"drag":g.forEach(function(o){o.uuid===e.uuid&&(o.add(e.toX,e.toY),p.view.draw())});break;case"end":g.forEach(function(o){o.uuid===e.uuid&&(d.push(o.uuid),o.simplify(),p.view.draw())})}},_=function(e){e.forEach(function(e){y(e)})},W=function(o,n,t){for(var i=n.slice(),a=function(e){e&&TB.error(e)};i.length;){var r=i.splice(0,Math.min(i.length,32)),c={type:o,data:JSON.stringify(r)};t&&(c.to=t),e.session.signal(c,a)}},E=function(o,n,t){e.session&&(f.push(n),k||(k=setTimeout(function(){W(o,f,t),f=[],k=null},100)))},O=function(){e.session.signal({type:"otWhiteboard_request_history"})};ng.element(document).on("keyup",function(e){e.ctrlKey&&(90===e.keyCode&&n.undo(),89===e.keyCode&&n.redo())}),ng.element(r).on("mousedown mousemove mouseup mouseout touchstart touchmove touchend touchcancel",function(o){if("mousemove"!==o.type&&"touchmove"!==o.type&&"mouseout"!==o.type||s.dragging){o.preventDefault();var i,a=ng.element(r).offset(),c=r.width/t.width(),d=r.height/t.height(),p=o.offsetX||o.originalEvent.pageX-a.left||o.originalEvent.touches[0].pageX-a.left,g=o.offsetY||o.originalEvent.pageY-a.top||o.originalEvent.touches[0].pageY-a.top,h=p*c,f=g*d,v=n.erasing?"eraser":"pen";switch(o.type){case"mousedown":case"touchstart":s.dragging=!0,s.lastX=h,s.lastY=f,s.uuid=parseInt(h)+parseInt(f)+Math.random().toString(36).substring(2),i={id:e.session&&e.session.connection&&e.session.connection.connectionId,uuid:s.uuid,fromX:s.lastX,fromY:s.lastY,mode:v,color:n.color,event:"start"},y(i),E("otWhiteboard_update",i);break;case"mousemove":case"touchmove":p=o.offsetX||o.originalEvent.pageX-a.left||o.originalEvent.touches[0].pageX-a.left,g=o.offsetY||o.originalEvent.pageY-a.top||o.originalEvent.touches[0].pageY-a.top,h=p*c,f=g*d,s.dragging&&(i={id:e.session&&e.session.connection&&e.session.connection.connectionId,uuid:s.uuid,fromX:s.lastX,fromY:s.lastY,toX:h,toY:f,event:"drag"},u++,l=[],s.lastX=h,s.lastY=f,y(i),E("otWhiteboard_update",i));break;case"touchcancel":case"mouseup":case"touchend":case"mouseout":u&&(i={id:e.session&&e.session.connection&&e.session.connection.connectionId,uuid:s.uuid,event:"end"},y(i),E("otWhiteboard_update",i)),s.dragging=!1,s.uuid=!1}}}),e.session&&(e.session.isConnected()&&O(),e.session.on({sessionConnected:function(){O()},"signal:otWhiteboard_update":function(o){o.from.connectionId!==e.session.connection.connectionId&&(_(JSON.parse(o.data)),n.$emit("otWhiteboardUpdate"))},"signal:otWhiteboard_undo":function(o){o.from.connectionId!==e.session.connection.connectionId&&(JSON.parse(o.data).forEach(function(e){m(e)}),n.$emit("otWhiteboardUpdate"))},"signal:otWhiteboard_redo":function(o){o.from.connectionId!==e.session.connection.connectionId&&(JSON.parse(o.data).forEach(function(e){w(e)}),n.$emit("otWhiteboardUpdate"))},"signal:otWhiteboard_history":function(e){a&&a!==e.from.connectionId||(a=e.from.connectionId,_(JSON.parse(e.data)),n.$emit("otWhiteboardUpdate"))},"signal:otWhiteboard_clear":function(o){o.from.connectionId!==e.session.connection.connectionId&&b()},"signal:otWhiteboard_request_history":function(e){h.length>0&&W("otWhiteboard_history",h,e.from)}}))}}}]);