opentok-annotation
Advanced tools
opentok-annotation - npm Package Compare versions
Comparing version 1.0.8 to 1.0.9
@@ -1,1 +0,1 @@ | ||
| window.OTSolution=window.OTSolution||{},OTSolution.Annotations=function(t){function e(t,e,n){for(var i=e.split(" "),o=0,s=i.length;o<s;o++)t.addEventListener(i[o],n,!0)}function n(t,e){0===s.width&&(s.width=o.parent.getBoundingClientRect().width),0===s.height&&(s.height=o.parent.getBoundingClientRect().height);var n,i=e?t.canvas.width:o.parent.clientWidth,a=e?t.canvas.height:o.parent.clientHeight,l=e?t.canvas.offsetLeft:s.offsetLeft,c=e?t.canvas.offsetTop:s.offsetTop,d=s.width/i,h=s.height/a,g=t.offsetX||t.pageX-l||t.changedTouches&&t.changedTouches[0].pageX-l,m=t.offsetY||t.pageY-c||t.changedTouches&&t.changedTouches[0].pageY-c,f=g*d,v=m*h,y=e?t.selectedItem:o.selectedItem;if(y)if("OT_pen"===y.id)switch(t.type){case"mousedown":case"touchstart":p.dragging=!0,p.lastX=f,p.lastY=v,o.isStartPoint=!0;break;case"mousemove":case"touchmove":p.dragging&&(n={id:o.videoFeed.stream.connection.connectionId,fromId:o.session.connection.connectionId,fromX:p.lastX,fromY:p.lastY,toX:f,toY:v,color:e?t.userColor:o.userColor,lineWidth:o.lineWidth,videoWidth:o.videoFeed.videoElement().clientWidth,videoHeight:o.videoFeed.videoElement().clientHeight,canvasWidth:s.width,canvasHeight:s.height,mirrored:r,startPoint:o.isStartPoint,endPoint:!1,selectedItem:y},M(n,!0),p.lastX=f,p.lastY=v,!e&&S(n),o.isStartPoint=!1);break;case"mouseup":case"touchend":case"mouseout":p.dragging=!1,OTSolution.Annotations.Analytics.logEvent({widgetVersion:o.widgetVersion,guid:OTSolution.Annotations.Analytics.get_uuid(),source:window.location.href,logVersion:"1",clientSystemTime:(new Date).getTime(),action:"an_draw",variation:"an_pen",sessionId:o.session.sessionId,partnerId:o.videoFeed.session.apiKey,connectionId:o.session.connection.connectionId,selectedItem:y})}else if("OT_text"===y.id)n={id:o.videoFeed.stream.connection.connectionId,fromId:o.session.connection.connectionId,fromX:f,fromY:v+t.inputHeight,color:t.userColor,font:t.font,text:t.text,videoWidth:o.videoFeed.videoElement().clientWidth,videoHeight:o.videoFeed.videoElement().clientHeight,canvasWidth:s.width,canvasHeight:s.height,mirrored:r,selectedItem:y},M(n),!e&&S(n);else if(y&&y.points)switch(p.mX=f,p.mY=v,t.type){case"mousedown":case"touchstart":p.isDrawing=!0,p.dragging=!0,p.startX=f,p.startY=v;break;case"mousemove":case"touchmove":p.dragging&&(n={color:e?t.userColor:o.userColor,lineWidth:e?t.lineWidth:o.lineWidth,selectedItem:y},M(n,!0));break;case"mouseup":case"touchend":p.isDrawing=!1,OTSolution.Annotations.Analytics.logEvent({widgetVersion:o.widgetVersion,guid:OTSolution.Annotations.Analytics.get_uuid(),source:window.location.href,logVersion:"1",clientSystemTime:(new Date).getTime(),action:"an_draw",variation:"an_shape",sessionId:o.session.sessionId,partnerId:o.videoFeed.session.apiKey,connectionId:o.session.connection.connectionId});var w=y.points;if(2===w.length)n={id:o.videoFeed.stream.connection.connectionId,fromId:o.session.connection.connectionId,fromX:p.startX,fromY:p.startY,toX:p.mX,toY:p.mY,color:e?t.userColor:o.userColor,lineWidth:e?t.lineWidth:o.lineWidth,videoWidth:o.videoFeed.videoElement().clientWidth,videoHeight:o.videoFeed.videoElement().clientHeight,canvasWidth:s.width,canvasHeight:s.height,mirrored:r,smoothed:!1,startPoint:!0,endPoint:!0,selectedItem:y},u.push(n),!e&&S(n);else{for(var b=O(w),I=0;I<w.length;I++){var x=!1,T=!1,_=p.startX+b.x*w[I][0],W=p.startY+b.y*w[I][1];0===I?(p.lastX=_,p.lastY=W,x=!0):I===w.length-1&&(T=!0),n={id:o.videoFeed.stream.connection.connectionId,fromId:o.session.connection.connectionId,fromX:p.lastX,fromY:p.lastY,toX:_,toY:W,color:e?t.userColor:o.userColor,lineWidth:e?t.lineWidth:o.lineWidth,videoWidth:o.videoFeed.videoElement().clientWidth,videoHeight:o.videoFeed.videoElement().clientHeight,canvasWidth:s.width,canvasHeight:s.height,mirrored:r,smoothed:y.enableSmoothing,startPoint:x,endPoint:T},u.push(n),!e&&S(n),p.lastX=_,p.lastY=W}M(null)}p.dragging=!1}}t=t||{},this.widgetVersion="js-1.0.0-beta",this.parent=t.container,this.videoFeed=t.feed;var i=t.externalWindow?t.externalWindow.document:window.document,o=this;if(this.parent){var s=document.createElement("canvas");s.setAttribute("id","opentok_canvas"),s.style.position="absolute",this.parent.appendChild(s),s.setAttribute("width",this.parent.clientWidth+"px"),s.style.width=window.getComputedStyle(this.parent).width,s.setAttribute("height",this.parent.clientHeight+"px"),s.style.height=window.getComputedStyle(this.parent).height}var a,r,l,c,o=this,d=[],h=[],u=[],g=[],m=[],p={dragging:!1};r=(" "+o.videoFeed.element.className+" ").indexOf(" OT_mirrored ")>-1,l=(" "+o.videoFeed.element.className+" ").indexOf(" OT_fit-mode-cover ")>-1,this.canvas=function(){return s},this.link=function(t){this.session=t},this.changeColor=function(t){o.userColor=t,o.lineWidth||(o.lineWidth=2)},this.changeLineWidth=function(t){this.lineWidth=t},this.selectItem=function(t){o.overlay&&(o.overlay.style.display="none",o.overlay=null),"OT_capture"===t.id?(o.selectedItem=t,o.overlay?o.overlay.style="inline":(o.overlay=document.createElement("div"),o.overlay.style.position="absolute",o.overlay.style.width=o.parent.clientWidth+"px",o.overlay.style.height=o.parent.clientHeight+"px",o.overlay.style.background='rgba(0,0,0,0.4) url("../images/annotation/camera.png") no-repeat center',o.overlay.style.backgroundSize="50px 50px",o.overlay.style.cursor="pointer",o.overlay.style.opacity=0,o.parent.appendChild(o.overlay),o.parent.onmouseover=function(){o.overlay.style.opacity=1},o.parent.onmouseout=function(){o.overlay.style.opacity=0},o.overlay.onclick=function(){o.captureScreenshot()})):t.id.indexOf("OT_line_width")!==-1?t.size&&o.changeLineWidth(t.size):o.selectedItem=t},this.colors=function(t){this.colors=t,this.changeColor(t[0])},this.clear=function(){C(!1,o.session.connection.connectionId),o.session&&o.session.signal({type:"otAnnotation_clear"})},this.captureScreenshot=function(){OTSolution.Annotations.Analytics.logEvent({widgetVersion:o.widgetVersion,guid:OTSolution.Annotations.Analytics.get_uuid(),source:window.location.href,logVersion:"1",clientSystemTime:(new Date).getTime(),action:"an_capture",variation:"",sessionId:o.session.sessionId,partnerId:o.videoFeed.session.apiKey,connectionId:o.session.connection.connectionId});var t=document.createElement("canvas");t.width=s.width,t.height=s.height;var e=o.videoFeed.videoWidth(),n=o.videoFeed.videoHeight(),i=1,a=0,c=0;l?(e<n?(i=s.width/e,e=s.width,n*=i):(i=s.height/n,n=s.height,e*=i),a=(e-s.width)/2,c=(n-s.height)/2):e>n?(i=s.width/e,e=s.width,n*=i):(i=s.height/n,n=s.height,e*=i);var h=new Image;h.onload=function(){var i=t.getContext("2d");r&&(i.translate(e,0),i.scale(-1,1)),i.drawImage(h,a,c,e,n),r&&(i.translate(e,0),i.scale(-1,1)),i.drawImage(s,0,0),d.forEach(function(e){e.call(o,t.toDataURL())}),t=null},h.src="data:image/png;base64,"+o.videoFeed.getImgData()},this.onScreenCapture=function(t){d.push(t)},this.onResize=function(){u=[],A(g,!0),m.forEach(function(t){n(t,!0)})},e(s,"mousedown mousemove mouseup mouseout touchstart touchmove touchend",function(t){var e=o.selectedItem&&"OT_text"===o.selectedItem.id,i="mousemove"===t.type&&!p.dragging;e||i||(t.preventDefault(),t.selectedItem=o.selectedItem,t.selectedItem&&(t.canvas={width:s.width,height:s.height,offsetLeft:s.offsetLeft,offsetTop:s.offsetTop},t.userColor=o.userColor,t.lineWidth=o.lineWidth,m.push(t)),n(t))});var f,v="textAnnotation",y=!1,w=function(t){t.preventDefault(),o.selectedItem&&"OT_text"!==o.selectedItem.id||y||(y=!0,t.selectedItem=o.selectedItem,_(t))},b=function(t){13===t.which&&T(),27===t.which&&(i.getElementById(v).remove(),f=null),y=!1},I=function(){i.addEventListener("keydown",b)},x=function(){i.removeEventListener("keydown",b)},T=function(){var t=i.getElementById(v);t.clientHeight;return t.value?(t.remove(),x(),f.text=t.value,f.font="16px Arial",f.userColor=o.userColor,f.canvas={width:s.width,height:s.height,offsetLeft:s.offsetLeft,offsetTop:s.offsetTop},m.push(f),void n(f)):void(f=null)},_=function(t){var e=i.createElement("input");e.setAttribute("type","text"),e.style.position="absolute",e.style.top=t.clientY+"px",e.style.left=t.clientX+"px",e.style.background="rgba(255,255,255, .5)",e.style.width="100px",e.style.maxWidth="200px",e.style.border="1px dashed red",e.style.fontSize="16px",e.style.color=o.userColor,e.style.fontFamily="Arial",e.style.zIndex="1001",e.setAttribute("data-canvas-origin",JSON.stringify({x:t.offsetX,y:t.offsetY})),e.id=v,i.body.appendChild(e),e.focus(),f=t,f.inputHeight=e.clientHeight,I()};e(s,"click",w);var M=function(t,e){a||(a=s.getContext("2d"),a.lineCap="round",a.lineJoin="round",a.fillStyle="solid"),a.clearRect(0,0,s.width,s.height),u.forEach(function(t){a.strokeStyle=t.color,a.lineWidth=t.lineWidth,t.smoothed=!!t.smoothed,t.startPoint=!!t.startPoint;var e=!1,n=!!t.selectedItem&&"Text"===t.selectedItem.title&&t.text;n?(a.font=t.font,a.fillStyle=t.color,a.fillText(t.text,t.fromX,t.fromY)):t.smoothed?(t.startPoint?o.isStartPoint=!0:o.isStartPoint&&(e=!0,o.isStartPoint=!1),t.startPoint?(a.closePath(),a.beginPath()):e?a.moveTo((t.fromX+t.toX)/2,(t.fromY+t.toY)/2):(a.quadraticCurveTo(t.fromX,t.fromY,(t.fromX+t.toX)/2,(t.fromY+t.toY)/2),a.stroke())):(a.beginPath(),a.moveTo(t.fromX,t.fromY),a.lineTo(t.toX,t.toY),a.stroke(),a.closePath())});var n=e?t.selectedItem:o.selectedItem;!n||"Pen"!==n.title&&"Text"!==n.title?p.isDrawing&&(t&&(a.strokeStyle=t.color,a.lineWidth=t.lineWidth),n&&n.points&&W(a,o.selectedItem.points)):t&&("Pen"===n.title&&(a.strokeStyle=t.color,a.lineWidth=t.lineWidth,a.beginPath(),a.moveTo(t.fromX,t.fromY),a.lineTo(t.toX,t.toY),a.stroke(),a.closePath()),"Text"===n.title&&(a.font=t.font,a.fillStyle=t.color,a.fillText(t.text,t.fromX,t.fromY)),u.push(t))},W=function(t,e){var n=O(e);if(t.beginPath(),2===e.length)t.moveTo(p.startX,p.startY),t.lineTo(p.mX,p.mY);else for(var i=0;i<e.length;i++){var s=p.startX+n.x*e[i][0],a=p.startY+n.y*e[i][1];o.selectedItem.enableSmoothing?0===i||(1===i?(t.moveTo((s+p.lastX)/2,(a+p.lastY)/2),p.lastX=(s+p.lastX)/2,p.lastX=(a+p.lastY)/2):(t.quadraticCurveTo(p.lastX,p.lastY,(s+p.lastX)/2,(a+p.lastY)/2),p.lastX=(s+p.lastX)/2,p.lastY=(a+p.lastY)/2)):0===i?t.moveTo(s,a):t.lineTo(s,a),p.lastX=s,p.lastY=a}t.stroke(),t.closePath()},O=function(t){for(var e=Number.MAX_VALUE,n=Number.MAX_VALUE,i=0,o=0,s=0;s<t.length;s++)t[s][0]<e?e=t[s][0]:t[s][0]>i&&(i=t[s][0]),t[s][1]<n?n=t[s][1]:t[s][1]>o&&(o=t[s][1]);var a=Math.abs(i-e),r=Math.abs(o-n),l=(p.mX-p.startX)/a,c=(p.mY-p.startY)/r;return{x:l,y:c}},P=function(t,e,n){var i={width:t.canvasWidth,height:t.canvasHeight},a={width:t.videoWidth,height:t.videoHeight},l={width:o.videoFeed.videoElement().clientWidth,height:o.videoFeed.videoElement().clientHeight},c=1,d=s.width/s.height;l.width/l.height,i.width/i.height,a.width/a.height;c=d<0?s.width/i.width:s.height/i.height;var h=s.width/2,m=s.height/2,p=i.width/2,f=i.height/2;t.fromX=h-c*(p-t.fromX),t.fromY=m-c*(f-t.fromY),t.toX=h-c*(p-t.toX),t.toY=m-c*(f-t.toY),t.mirrored=!!t.mirrored,t.mirrored&&(t.fromX=s.width-t.fromX,t.toX=s.width-t.toX),r&&(t.fromX=s.width-t.fromX,t.toX=s.width-t.toX);var v=JSON.parse(JSON.stringify(t));v.canvasWidth=s.width,v.canvasHeight=s.height,v.videoWidth=l.width,v.videoHeight=l.height,e?g[n]=v:g.push(v),u.push(t),M(null)},A=function(t,e){t.forEach(function(t,n){t.id===o.videoFeed.stream.connection.connectionId&&P(t,e,n)})},C=function(t,e){u=u.filter(function(t){return console.log(t.fromId),t.fromId!==e}),t?g=[]:(o.session&&o.session.signal({type:"otAnnotation_clear"}),m=[]),M()};o.videoFeed.session&&o.videoFeed.session.on({"signal:otAnnotation_pen":function(t){t.from.connectionId!==o.session.connection.connectionId&&A(JSON.parse(t.data))},"signal:otAnnotation_text":function(t){t.from.connectionId!==o.session.connection.connectionId&&A(JSON.parse(t.data))},"signal:otAnnotation_history":function(t){c&&c!==t.from.connectionId||(c=t.from.connectionId,A(JSON.parse(t.data)))},"signal:otAnnotation_clear":function(t){t.from.connectionId!==o.session.connection.connectionId&&C(!0,t.from.connectionId)},connectionCreated:function(t){u.length>0&&t.connection.connectionId!==o.session.connection.connectionId&&E("otWhiteboard_history",u,t.connection)}});var k,E=function(t,e,n){for(var i=e.slice(),s=function(t){t&&TB.error(t)};i.length;){var a=i.splice(0,Math.min(i.length,32)),r={type:t,data:JSON.stringify(a)};n&&(r.to=n),o.session.signal(r,s)}},S=function(t){o.session&&(h.push(t),k||(k=setTimeout(function(){E("otAnnotation_pen",h),h=[],k=null},100)))}},OTSolution.Annotations.Toolbar=function(t){var e=this,n=this;t||(t={}),this.session=t.session,this.parent=t.container,this.externalWindow=t.externalWindow,this.backgroundColor=t.backgroundColor||"rgba(0, 0, 0, 0.7)",this.buttonWidth=t.buttonWidth||"40px",this.buttonHeight=t.buttonHeight||"40px",this.iconWidth=t.iconWidth||"30px",this.iconHeight=t.iconHeight||"30px",this.items=t.items||[{id:"OT_pen",title:"Pen",icon:"../images/annotation/freehand.png",selectedIcon:"../images/annotation/freehand_selected.png"},{id:"OT_line",title:"Line",icon:"../images/annotation/line.png",selectedIcon:"../images/annotation/line_selected.png",points:[[0,0],[0,1]]},{id:"OT_shapes",title:"Shapes",icon:"../images/annotation/shapes.png",items:[{id:"OT_arrow",title:"Arrow",icon:"../images/annotation/arrow.png",points:[[0,1],[3,1],[3,0],[5,2],[3,4],[3,3],[0,3],[0,1]]},{id:"OT_rect",title:"Rectangle",icon:"../images/annotation/rectangle.png",points:[[0,0],[1,0],[1,1],[0,1],[0,0]]},{id:"OT_oval",title:"Oval",icon:"../images/annotation/oval.png",enableSmoothing:!0,points:[[0,.5],[.5+.5*Math.cos(5*Math.PI/4),.5+.5*Math.sin(5*Math.PI/4)],[.5,0],[.5+.5*Math.cos(7*Math.PI/4),.5+.5*Math.sin(7*Math.PI/4)],[1,.5],[.5+.5*Math.cos(Math.PI/4),.5+.5*Math.sin(Math.PI/4)],[.5,1],[.5+.5*Math.cos(3*Math.PI/4),.5+.5*Math.sin(3*Math.PI/4)],[0,.5],[.5+.5*Math.cos(5*Math.PI/4),.5+.5*Math.sin(5*Math.PI/4)]]}]},{id:"OT_text",title:"Text",icon:"../images/annotation/text.png",selectedIcon:"../images/annotation/text.png"},{id:"OT_colors",title:"Colors",icon:"",items:{}},{id:"OT_line_width",title:"Line Width",icon:"../images/annotation/line_width.png",items:{}},{id:"OT_clear",title:"Clear",icon:"../images/annotation/clear.png"},{id:"OT_capture",title:"Capture",icon:"../images/annotation/camera.png",selectedIcon:"../images/annotation/camera_selected.png"}],this.colors=t.colors||["#1abc9c","#2ecc71","#3498db","#9b59b6","#34495e","#16a085","#27ae60","#2980b9","#8e44ad","#2c3e50","#f1c40f","#e67e22","#e74c3c","#ecf0f1","#95a5a6","#f39c12","#d35400","#c0392b","#bdc3c7","#7f8c8d"],this.cbs=[];var i,o=[],s=function(t,e,i){var o=this,s=n.externalWindow?n.externalWindow.document:document;this.getElm=function(t){return"string"==typeof t?s.querySelector(t):t},this.render=function(){var t=this,e="";t.colors.forEach(function(n){e+=t.options.template.replace(/\{color\}/g,n)}),t.elm.innerHTML=e},this.close=function(){this.elm.style.display="none"},this.open=function(){this.elm.style.display=this.options.style.display},this.colorChosen=function(t){this.cbs.push(t)},this.set=function(t,e){var n=this;n.color=t,e!==!1&&n.cbs.forEach(function(e){e.call(n,t)})},i=i||{},i.openEvent=i.openEvent||"click",i.style=Object(i.style),i.style.display=i.style.display||"block",i.template=i.template||'<div class="color-choice" data-col="{color}" style="background-color: {color}"></div>',o.elm=o.getElm(t),o.cbs=[],o.colors=e,o.options=i,o.render(),o.elm.addEventListener("click",function(t){var e=t.target.getAttribute("data-col");e&&(o.set(e),o.close())}),i.autoclose!==!1&&o.close()};this.createPanel=function(t){if(n.parent){var r=t?t.document:document;i=r.createElement("div"),i.setAttribute("id","OT_toolbar"),i.setAttribute("class","OT_panel"),i.style.width="100%",i.style.height="100%",i.style.backgroundColor=this.backgroundColor,this.parent.appendChild(i),this.parent.style.position="relative",this.parent.zIndex=1e3;for(var l=[],c=r.createElement("div"),d=0,h=this.items.length;d<h;d++){var u=this.items[d],g=r.createElement("input");if(g.setAttribute("type","button"),g.setAttribute("id",u.id),g.style.position="relative",g.style.top="50%",g.style.transform="translateY(-50%)","OT_colors"===u.id){g.style.webkitTransform="translateY(-85%)";var m=r.createElement("div");m.setAttribute("class","color-picker"),m.style.backgroundColor=this.backgroundColor,this.parent.appendChild(m);var p=new s(".color-picker",this.colors,{externalWindow:n.externalWindow});p.colorChosen(function(t){var e=r.getElementById("OT_colors");e.style.backgroundColor=t,o.forEach(function(e){e.changeColor(t)})});for(var f=r.querySelectorAll(".color-choice"),v=0;v<f.length;v++)f[v].style.display="inline-block",f[v].style.width="30px",f[v].style.height="30px",f[v].style.margin="5px",f[v].style.cursor="pointer",f[v].style.borderRadius="100%",f[v].style.opacity=.7,f[v].onmouseover=function(){this.style.opacity=1},f[v].onmouseout=function(){this.style.opacity=.7};g.setAttribute("class","OT_color"),g.style.marginLeft="10px",g.style.marginRight="10px",g.style.borderRadius="50%",g.style.backgroundColor=this.colors[0],g.style.width=this.iconWidth,g.style.height=this.iconHeight,g.style.paddingTop=this.buttonHeight.replace("px","")-this.iconHeight.replace("px","")+"px"}else g.style.background='url("'+u.icon+'") no-repeat',g.style.backgroundSize=this.iconWidth+" "+this.iconHeight,g.style.backgroundPosition="center",g.style.width=this.buttonWidth,g.style.height=this.buttonHeight;"Line Width"!==u.title||Array.isArray(u.items)||(u.items=[{id:"OT_line_width_2",title:"Line Width 2",size:2},{id:"OT_line_width_4",title:"Line Width 4",size:4},{id:"OT_line_width_6",title:"Line Width 6",size:6},{id:"OT_line_width_8",title:"Line Width 8",size:8},{id:"OT_line_width_10",title:"Line Width 10",size:10},{id:"OT_line_width_12",title:"Line Width 12",size:12},{id:"OT_line_width_14",title:"Line Width 14",size:14}]),u.items&&g.setAttribute("data-type","group"),g.setAttribute("data-col",u.title),g.style.border="none",g.style.cursor="pointer",l.push(g.outerHTML)}i.innerHTML=l.join(""),i.onclick=function(t){var n="group"===t.target.getAttribute("data-type"),i=t.target.getAttribute("data-col"),s=t.target.getAttribute("id");n?e.items.forEach(function(t){if(t.title===i){if(e.selectedGroup=t,t.items&&(c.setAttribute("class","OT_subpanel"),c.style.backgroundColor=e.backgroundColor,c.style.width="100%",c.style.height="100%",c.style.paddingLeft="15px",c.style.display="none",e.parent.appendChild(c),Array.isArray(t.items))){var n=[];"OT_line_width"===t.id?t.items.forEach(function(t){var i=r.createElement("div");i.setAttribute("data-col",t.title),i.setAttribute("id",t.id),i.style.position="relative",i.style.top="50%",i.style.transform="translateY(-50%)",i.style["float"]="left",i.style.width=e.buttonWidth,i.style.height=e.buttonHeight,i.style.border="none",i.style.cursor="pointer";var o=r.createElement("div");o.style.backgroundColor="#FFFFFF",o.style.width="80%",o.style.height=t.size+"px",o.style.position="relative",o.style.left="50%",o.style.top="50%",o.style.transform="translateX(-50%) translateY(-50%)",o.style.pointerEvents="none",i.appendChild(o),n.push(i.outerHTML)}):t.items.forEach(function(t){var i=r.createElement("input");i.setAttribute("type","button"),i.setAttribute("data-col",t.title),i.setAttribute("id",t.id),i.style.background='url("'+t.icon+'") no-repeat',i.style.position="relative",i.style.top="50%",i.style.transform="translateY(-50%)",i.style.backgroundSize=e.iconWidth+" "+e.iconHeight,i.style.backgroundPosition="center",i.style.width=e.buttonWidth,i.style.height=e.buttonHeight,i.style.border="none",i.style.cursor="pointer",n.push(i.outerHTML)}),c.innerHTML=n.join("")}"OT_shapes"===s||"OT_line_width"===s?(c&&(c.style.display="block"),p.close()):"OT_colors"===s&&(c&&(c.style.display="none"),p.open())}}):(e.items.forEach(function(t){if("Clear"!==t.title&&t.title===i){if(e.selectedItem){var n=r.getElementById(e.selectedItem.id);n&&(n.style.background='url("'+e.selectedItem.icon+'") no-repeat',n.style.backgroundSize=e.iconWidth+" "+e.iconHeight,n.style.backgroundPosition="center")}if(t.selectedIcon){var s=r.getElementById(t.id);s&&(s.style.background='url("'+t.selectedIcon+'") no-repeat',s.style.backgroundSize=e.iconWidth+" "+e.iconHeight,s.style.backgroundPosition="center")}return e.selectedItem=t,a(t),o.forEach(function(t){t.selectItem(e.selectedItem)}),!1}}),c.style.display="none"),e.cbs.forEach(function(t){t.call(e,s)})},c.onclick=function(t){var n="group"===t.target.getAttribute("data-type"),i=(t.target.getAttribute("data-col"),t.target.getAttribute("id"));c.style.display="none",n||e.selectedGroup.items.forEach(function(t){if("OT_clear"!==t.id&&t.id===i){if(e.selectedItem){var n=document.getElementById(e.selectedItem.id);n&&(n.style.background='url("'+e.selectedItem.icon+'") no-repeat',n.style.backgroundSize=e.iconWidth+" "+e.iconHeight,n.style.backgroundPosition="center")}if(t.selectedIcon){var s=document.getElementById(t.id);n&&(s.style.background='url("'+t.selectedIcon+'") no-repeat',s.style.backgroundSize=e.iconWidth+" "+e.iconHeight,s.style.backgroundPosition="center")}return e.selectedItem=t,a(t),o.forEach(function(t){t.selectItem(e.selectedItem)}),!1}}),e.cbs.forEach(function(t){t.call(e,i)})},r.getElementById("OT_clear").onclick=function(){o.forEach(function(t){t.clear()})}}},!this.externalWindow&&this.createPanel();var a=function(t){t.points||("OT_line"===t.id?e.selectedItem.points=[[0,0],[0,1]]:"OT_arrow"===t.id?e.selectedItem.points=[[0,1],[3,1],[3,0],[5,2],[3,4],[3,3],[0,3],[0,1]]:"OT_rect"===t.id?e.selectedItem.points=[[0,0],[1,0],[1,1],[0,1],[0,0]]:"OT_oval"===t.id&&(e.selectedItem.enableSmoothing=!0,e.selectedItem.points=[[0,.5],[.5+.5*Math.cos(5*Math.PI/4),.5+.5*Math.sin(5*Math.PI/4)],[.5,0],[.5+.5*Math.cos(7*Math.PI/4),.5+.5*Math.sin(7*Math.PI/4)],[1,.5],[.5+.5*Math.cos(Math.PI/4),.5+.5*Math.sin(Math.PI/4)],[.5,1],[.5+.5*Math.cos(3*Math.PI/4),.5+.5*Math.sin(3*Math.PI/4)],[0,.5],[.5+.5*Math.cos(5*Math.PI/4),.5+.5*Math.sin(5*Math.PI/4)]]))};this.itemClicked=function(t){this.cbs.push(t)},this.addCanvas=function(t){var e=this;t.link(e.session),t.colors(e.colors),o.push(t)},this.removeCanvas=function(t){o.forEach(function(e){var n=e.canvas();e.videoFeed.stream.connection.connectionId===t&&n.parentNode&&n.parentNode.removeChild(n)}),o=o.filter(function(e){return e.videoFeed.stream.connection.connectionId!==t})},this.remove=function(){try{i.parentNode.removeChild(i)}catch(t){console.log(t)}o.forEach(function(t){var e=t.canvas();e.parentNode&&e.parentNode.removeChild(e)}),o=[]}},OTSolution.Annotations.Analytics=function(){},OTSolution.Annotations.Analytics.logEvent=function(t){var e=t.payload||"";"object"==typeof e&&(e=JSON.stringify(e)),t.payload=e;var n=JSON.stringify(t),i=new XMLHttpRequest;i.open("POST","https://hlg.tokbox.com/prod/logging/ClientEvent",!0),i.setRequestHeader("Content-type","application/json"),i.send(n)},OTSolution.Annotations.Analytics.get_uuid=function(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(t){var e=16*Math.random()|0,n="x"==t?e:3&e|8;return n.toString(16)})},function(){var t,e,n,i={},o=function(t,n){e&&e.triggerEvent(t,n)},s=function(){var t=["startAnnotation","linkAnnotation","resizeCanvas","annotationWindowClosed","endAnnotation"];e.registerEvents(t)},a=function(){var t=['<div id="toolbar"></div>'].join("\n");$("body").append(t)},r=[{id:"OT_pen",title:"Pen",icon:"../images/annotation/freehand.png",selectedIcon:"../images/annotation/freehand_selected.png"},{id:"OT_line",title:"Line",icon:"../images/annotation/line.png",selectedIcon:"../images/annotation/line_selected.png"},{id:"OT_text",title:"Text",icon:"../images/annotation/text.png",selectedIcon:"../images/annotation/text.png"},{id:"OT_shapes",title:"Shapes",icon:"../images/annotation/shapes.png",items:[{id:"OT_arrow",title:"Arrow",icon:"../images/annotation/arrow.png"},{id:"OT_rect",title:"Rectangle",icon:"../images/annotation/rectangle.png"},{id:"OT_oval",title:"Oval",icon:"../images/annotation/oval.png"},{id:"OT_star",title:"Star",icon:"../images/annotation/star.png",points:[[.5+.5*Math.cos(90*(Math.PI/180)),.5+.5*Math.sin(90*(Math.PI/180))],[.5+.25*Math.cos(126*(Math.PI/180)),.5+.25*Math.sin(126*(Math.PI/180))],[.5+.5*Math.cos(162*(Math.PI/180)),.5+.5*Math.sin(162*(Math.PI/180))],[.5+.25*Math.cos(198*(Math.PI/180)),.5+.25*Math.sin(198*(Math.PI/180))],[.5+.5*Math.cos(234*(Math.PI/180)),.5+.5*Math.sin(234*(Math.PI/180))],[.5+.25*Math.cos(270*(Math.PI/180)),.5+.25*Math.sin(270*(Math.PI/180))],[.5+.5*Math.cos(306*(Math.PI/180)),.5+.5*Math.sin(306*(Math.PI/180))],[.5+.25*Math.cos(342*(Math.PI/180)),.5+.25*Math.sin(342*(Math.PI/180))],[.5+.5*Math.cos(18*(Math.PI/180)),.5+.5*Math.sin(18*(Math.PI/180))],[.5+.25*Math.cos(54*(Math.PI/180)),.5+.25*Math.sin(54*(Math.PI/180))],[.5+.5*Math.cos(90*(Math.PI/180)),.5+.5*Math.sin(90*(Math.PI/180))]]}]},{id:"OT_colors",title:"Colors",icon:"",items:{}},{id:"OT_line_width",title:"Line Width",icon:"../images/annotation/line_width.png",items:{}},{id:"OT_clear",title:"Clear",icon:"../images/annotation/clear.png"}],l=["#1abc9c","#2ecc71","#3498db","#9b59b6","#8e44ad","#f1c40f","#e67e22","#e74c3c","#ded5d5"],c=10/6,d=_.throttle(function(){n.onResize()},1e3),h=function(){var t,e;if(i.externalWindow){var n={width:i.externalWindow.innerWidth,height:i.externalWindow.innerHeight},s=n.width/c;s<=n.height?(t=n.width,e=s):(e=n.height,t=e*c)}else{var a=i.absoluteParent||i.canvasContainer;t=$(a).width(),e=$(a).height()}$(i.canvasContainer).css({width:t,height:e}),$(i.canvas).css({width:t,height:e}),$(i.canvas).attr({width:t,height:e}),d(),o("resizeCanvas")},u=function(){$(i.resizeSubject).on("resize",_.throttle(function(){h()},500))},g=function(t,e,n){var i=_.property("toolbarId")(e)||"toolbar",o=_.property("toolbarItems")(e)||r,s=_.property("colors")(e)||l,a=function(){var t=n?n:window;return t.document.getElementById(i)};toolbar=new OTSolution.Annotations.Toolbar({session:t,container:a(),colors:s,items:o,externalWindow:n||null})},m=function(){var t=$.Deferred(),e=.8*screen.width|0,n=e/c,i=["templates/screenshare.html?opentok-annotation"].join(""),s=["toolbar=no","location=no","directories=no","status=no","menubar=no","scrollbars=no","resizable=no","copyhistory=no",["width=",e].join(""),["height=",n].join(""),["left=",screen.width/2-e/2].join(""),["top=",screen.height/2-n/2].join("")].join(","),a=window.open(i,"",s);window.onbeforeunload=function(){a.close()},a.toolbar=toolbar,a.OT=OT,a.$=$,a.triggerCloseEvent=function(){o("annotationWindowClosed")};var r=function(){a.createContainerElements?$(a.document).ready(function(){t.resolve(a)}):setTimeout(r,100)};return r(),t.promise()},p=function(){$(i.resizeSubject).off("resize",h),toolbar.remove()},f=function(t,e){var n=$.Deferred();return _.property("screensharing")(e)?m().then(function(i){g(t,e,i),toolbar.createPanel(i),o("startAnnotation",i),n.resolve(i)}):(g(t,e),o("startAnnotation"),n.resolve()),n.promise()},v=function(t,e,s){i.resizeSubject=_.property("externalWindow")(s)||window,i.externalWindow=_.property("externalWindow")(s)||null,i.absoluteParent=_.property("absoluteParent")(s)||null,i.canvasContainer=e,n=new OTSolution.Annotations({feed:t,container:e,externalWindow:i.externalWindow}),toolbar.addCanvas(n),n.onScreenCapture(function(t){var e=window.open(t,"_blank");e.focus()});var a=i.externalWindow?i.externalWindow:window;i.canvas=$(_.first(a.document.getElementsByTagName("canvas"))),u(),h(),o("linkAnnotation")},y=function(){h()},w=function(t){p(),i.canvas=null,t&&(i.externalWindow&&(i.externalWindow.close(),i.externalWindow=null,i.resizeSubject=null),o("endAnnotation"))},b=function(n){t=this,t.options=_.omit(n,"accPack"),e=_.property("accPack")(n),s(),a()};b.prototype={constructor:b,start:f,linkCanvas:v,resizeCanvas:y,end:w},"object"==typeof exports?module.exports=b:"function"==typeof define&&define.amd?define(function(){return b}):this.AnnotationAccPack=b}.call(this); | ||
| window.OTSolution=window.OTSolution||{},OTSolution.Annotations=function(t){function e(t,e,n){for(var i=e.split(" "),o=0,a=i.length;o<a;o++)t.addEventListener(i[o],n,!0)}function n(t,e){0===a.width&&(a.width=o.parent.getBoundingClientRect().width),0===a.height&&(a.height=o.parent.getBoundingClientRect().height);var n,i=e?t.canvas.width:o.parent.clientWidth,s=e?t.canvas.height:o.parent.clientHeight,c=e?t.canvas.offsetLeft:a.offsetLeft,l=e?t.canvas.offsetTop:a.offsetTop,d=a.width/i,h=a.height/s,g=t.offsetX||t.pageX-c||t.changedTouches&&t.changedTouches[0].pageX-c,p=t.offsetY||t.pageY-l||t.changedTouches&&t.changedTouches[0].pageY-l,f=g*d,v=p*h,y=e?t.selectedItem:o.selectedItem;if(y)if("OT_pen"===y.id)switch(t.type){case"mousedown":case"touchstart":m.dragging=!0,m.lastX=f,m.lastY=v,o.isStartPoint=!0;break;case"mousemove":case"touchmove":m.dragging&&(n={id:o.videoFeed.stream.connection.connectionId,fromId:o.session.connection.connectionId,fromX:m.lastX,fromY:m.lastY,toX:f,toY:v,color:e?t.userColor:o.userColor,lineWidth:o.lineWidth,videoWidth:o.videoFeed.videoElement().clientWidth,videoHeight:o.videoFeed.videoElement().clientHeight,canvasWidth:a.width,canvasHeight:a.height,mirrored:r,startPoint:o.isStartPoint,endPoint:!1,selectedItem:y},M(n,!0),m.lastX=f,m.lastY=v,!e&&E(n),o.isStartPoint=!1);break;case"mouseup":case"touchend":case"mouseout":m.dragging=!1,OTSolution.Annotations.Analytics.logEvent({widgetVersion:o.widgetVersion,guid:OTSolution.Annotations.Analytics.get_uuid(),source:window.location.href,logVersion:"1",clientSystemTime:(new Date).getTime(),action:"an_draw",variation:"an_pen",sessionId:o.session.sessionId,partnerId:o.videoFeed.session.apiKey,connectionId:o.session.connection.connectionId,selectedItem:y})}else if("OT_text"===y.id)n={id:o.videoFeed.stream.connection.connectionId,fromId:o.session.connection.connectionId,fromX:f,fromY:v+t.inputHeight,color:t.userColor,font:t.font,text:t.text,videoWidth:o.videoFeed.videoElement().clientWidth,videoHeight:o.videoFeed.videoElement().clientHeight,canvasWidth:a.width,canvasHeight:a.height,mirrored:r,selectedItem:y},M(n),!e&&E(n);else if(y&&y.points)switch(m.mX=f,m.mY=v,t.type){case"mousedown":case"touchstart":m.isDrawing=!0,m.dragging=!0,m.startX=f,m.startY=v;break;case"mousemove":case"touchmove":m.dragging&&(n={color:e?t.userColor:o.userColor,lineWidth:e?t.lineWidth:o.lineWidth,selectedItem:y},M(n,!0));break;case"mouseup":case"touchend":m.isDrawing=!1,OTSolution.Annotations.Analytics.logEvent({widgetVersion:o.widgetVersion,guid:OTSolution.Annotations.Analytics.get_uuid(),source:window.location.href,logVersion:"1",clientSystemTime:(new Date).getTime(),action:"an_draw",variation:"an_shape",sessionId:o.session.sessionId,partnerId:o.videoFeed.session.apiKey,connectionId:o.session.connection.connectionId});var w=y.points;if(2===w.length)n={id:o.videoFeed.stream.connection.connectionId,fromId:o.session.connection.connectionId,fromX:m.startX,fromY:m.startY,toX:m.mX,toY:m.mY,color:e?t.userColor:o.userColor,lineWidth:e?t.lineWidth:o.lineWidth,videoWidth:o.videoFeed.videoElement().clientWidth,videoHeight:o.videoFeed.videoElement().clientHeight,canvasWidth:a.width,canvasHeight:a.height,mirrored:r,smoothed:!1,startPoint:!0,endPoint:!0,selectedItem:y},u.push(n),!e&&E(n);else{for(var I=O(w),b=0;b<w.length;b++){var T=!1,x=!1,_=m.startX+I.x*w[b][0],W=m.startY+I.y*w[b][1];0===b?(m.lastX=_,m.lastY=W,T=!0):b===w.length-1&&(x=!0),n={id:o.videoFeed.stream.connection.connectionId,fromId:o.session.connection.connectionId,fromX:m.lastX,fromY:m.lastY,toX:_,toY:W,color:e?t.userColor:o.userColor,lineWidth:e?t.lineWidth:o.lineWidth,videoWidth:o.videoFeed.videoElement().clientWidth,videoHeight:o.videoFeed.videoElement().clientHeight,canvasWidth:a.width,canvasHeight:a.height,mirrored:r,smoothed:y.enableSmoothing,startPoint:T,endPoint:x},u.push(n),!e&&E(n),m.lastX=_,m.lastY=W}M(null)}m.dragging=!1}}t=t||{},this.widgetVersion="js-1.0.0-beta",this.parent=t.container,this.videoFeed=t.feed;var i=t.externalWindow?t.externalWindow.document:window.document,o=this;if(this.parent){var a=document.createElement("canvas");a.setAttribute("id","opentok_canvas"),a.style.position="absolute",this.parent.appendChild(a),a.setAttribute("width",this.parent.clientWidth+"px"),a.style.width=window.getComputedStyle(this.parent).width,a.setAttribute("height",this.parent.clientHeight+"px"),a.style.height=window.getComputedStyle(this.parent).height}var s,r,c,l,o=this,d=[],h=[],u=[],g=[],p=[],m={dragging:!1};r=(" "+o.videoFeed.element.className+" ").indexOf(" OT_mirrored ")>-1,c=(" "+o.videoFeed.element.className+" ").indexOf(" OT_fit-mode-cover ")>-1,this.canvas=function(){return a},this.link=function(t){this.session=t},this.changeColor=function(t){o.userColor=t,o.lineWidth||(o.lineWidth=2)},this.changeLineWidth=function(t){this.lineWidth=t},this.selectItem=function(t){o.overlay&&(o.overlay.style.display="none",o.overlay=null),"OT_capture"===t.id?(o.selectedItem=t,o.overlay?o.overlay.style="inline":(o.overlay=document.createElement("div"),o.overlay.style.position="absolute",o.overlay.style.width=o.parent.clientWidth+"px",o.overlay.style.height=o.parent.clientHeight+"px",o.overlay.style.background='rgba(0,0,0,0.4) url("../images/annotation/camera.png") no-repeat center',o.overlay.style.backgroundSize="50px 50px",o.overlay.style.cursor="pointer",o.overlay.style.opacity=0,o.parent.appendChild(o.overlay),o.parent.onmouseover=function(){o.overlay.style.opacity=1},o.parent.onmouseout=function(){o.overlay.style.opacity=0},o.overlay.onclick=function(){o.captureScreenshot()})):t.id.indexOf("OT_line_width")!==-1?t.size&&o.changeLineWidth(t.size):o.selectedItem=t},this.colors=function(t){this.colors=t,this.changeColor(t[0])},this.clear=function(){S(!1,o.session.connection.connectionId),o.session&&o.session.signal({type:"otAnnotation_clear"})},this.captureScreenshot=function(){OTSolution.Annotations.Analytics.logEvent({widgetVersion:o.widgetVersion,guid:OTSolution.Annotations.Analytics.get_uuid(),source:window.location.href,logVersion:"1",clientSystemTime:(new Date).getTime(),action:"an_capture",variation:"",sessionId:o.session.sessionId,partnerId:o.videoFeed.session.apiKey,connectionId:o.session.connection.connectionId});var t=document.createElement("canvas");t.width=a.width,t.height=a.height;var e=o.videoFeed.videoWidth(),n=o.videoFeed.videoHeight(),i=1,s=0,l=0;c?(e<n?(i=a.width/e,e=a.width,n*=i):(i=a.height/n,n=a.height,e*=i),s=(e-a.width)/2,l=(n-a.height)/2):e>n?(i=a.width/e,e=a.width,n*=i):(i=a.height/n,n=a.height,e*=i);var h=new Image;h.onload=function(){var i=t.getContext("2d");r&&(i.translate(e,0),i.scale(-1,1)),i.drawImage(h,s,l,e,n),r&&(i.translate(e,0),i.scale(-1,1)),i.drawImage(a,0,0),d.forEach(function(e){e.call(o,t.toDataURL())}),t=null},h.src="data:image/png;base64,"+o.videoFeed.getImgData()},this.onScreenCapture=function(t){d.push(t)},this.onResize=function(){u=[],A(g,!0),p.forEach(function(t){n(t,!0)})},e(a,"mousedown mousemove mouseup mouseout touchstart touchmove touchend",function(t){var e=o.selectedItem&&"OT_text"===o.selectedItem.id,i="mousemove"===t.type&&!m.dragging;e||i||(t.preventDefault(),t.selectedItem=o.selectedItem,t.selectedItem&&(t.canvas={width:a.width,height:a.height,offsetLeft:a.offsetLeft,offsetTop:a.offsetTop},t.userColor=o.userColor,t.lineWidth=o.lineWidth,p.push(t)),n(t))});var f,v="textAnnotation",y=!1,w=function(t){t.preventDefault(),o.selectedItem&&"OT_text"!==o.selectedItem.id||y||(y=!0,t.selectedItem=o.selectedItem,_(t))},I=function(t){13===t.which&&x(),27===t.which&&(i.getElementById(v).remove(),f=null),y=!1},b=function(){i.addEventListener("keydown",I)},T=function(){i.removeEventListener("keydown",I)},x=function(){var t=i.getElementById(v);t.clientHeight;return t.value?(t.remove(),T(),f.text=t.value,f.font="16px Arial",f.userColor=o.userColor,f.canvas={width:a.width,height:a.height,offsetLeft:a.offsetLeft,offsetTop:a.offsetTop},p.push(f),void n(f)):void(f=null)},_=function(t){var e=i.createElement("input");e.setAttribute("type","text"),e.style.position="absolute",e.style.top=t.clientY+"px",e.style.left=t.clientX+"px",e.style.background="rgba(255,255,255, .5)",e.style.width="100px",e.style.maxWidth="200px",e.style.border="1px dashed red",e.style.fontSize="16px",e.style.color=o.userColor,e.style.fontFamily="Arial",e.style.zIndex="1001",e.setAttribute("data-canvas-origin",JSON.stringify({x:t.offsetX,y:t.offsetY})),e.id=v,i.body.appendChild(e),e.focus(),f=t,f.inputHeight=e.clientHeight,b()};e(a,"click",w);var M=function(t,e){s||(s=a.getContext("2d"),s.lineCap="round",s.lineJoin="round",s.fillStyle="solid"),s.clearRect(0,0,a.width,a.height),u.forEach(function(t){s.strokeStyle=t.color,s.lineWidth=t.lineWidth,t.smoothed=!!t.smoothed,t.startPoint=!!t.startPoint;var e=!1,n=!!t.selectedItem&&"Text"===t.selectedItem.title&&t.text;n?(s.font=t.font,s.fillStyle=t.color,s.fillText(t.text,t.fromX,t.fromY)):t.smoothed?(t.startPoint?o.isStartPoint=!0:o.isStartPoint&&(e=!0,o.isStartPoint=!1),t.startPoint?(s.closePath(),s.beginPath()):e?s.moveTo((t.fromX+t.toX)/2,(t.fromY+t.toY)/2):(s.quadraticCurveTo(t.fromX,t.fromY,(t.fromX+t.toX)/2,(t.fromY+t.toY)/2),s.stroke())):(s.beginPath(),s.moveTo(t.fromX,t.fromY),s.lineTo(t.toX,t.toY),s.stroke(),s.closePath())});var n=e?t.selectedItem:o.selectedItem;!n||"Pen"!==n.title&&"Text"!==n.title?m.isDrawing&&(t&&(s.strokeStyle=t.color,s.lineWidth=t.lineWidth),n&&n.points&&W(s,o.selectedItem.points)):t&&("Pen"===n.title&&(s.strokeStyle=t.color,s.lineWidth=t.lineWidth,s.beginPath(),s.moveTo(t.fromX,t.fromY),s.lineTo(t.toX,t.toY),s.stroke(),s.closePath()),"Text"===n.title&&(s.font=t.font,s.fillStyle=t.color,s.fillText(t.text,t.fromX,t.fromY)),u.push(t))},W=function(t,e){var n=O(e);if(t.beginPath(),2===e.length)t.moveTo(m.startX,m.startY),t.lineTo(m.mX,m.mY);else for(var i=0;i<e.length;i++){var a=m.startX+n.x*e[i][0],s=m.startY+n.y*e[i][1];o.selectedItem.enableSmoothing?0===i||(1===i?(t.moveTo((a+m.lastX)/2,(s+m.lastY)/2),m.lastX=(a+m.lastX)/2,m.lastX=(s+m.lastY)/2):(t.quadraticCurveTo(m.lastX,m.lastY,(a+m.lastX)/2,(s+m.lastY)/2),m.lastX=(a+m.lastX)/2,m.lastY=(s+m.lastY)/2)):0===i?t.moveTo(a,s):t.lineTo(a,s),m.lastX=a,m.lastY=s}t.stroke(),t.closePath()},O=function(t){for(var e=Number.MAX_VALUE,n=Number.MAX_VALUE,i=0,o=0,a=0;a<t.length;a++)t[a][0]<e?e=t[a][0]:t[a][0]>i&&(i=t[a][0]),t[a][1]<n?n=t[a][1]:t[a][1]>o&&(o=t[a][1]);var s=Math.abs(i-e),r=Math.abs(o-n),c=(m.mX-m.startX)/s,l=(m.mY-m.startY)/r;return{x:c,y:l}},P=function(t,e,n){var i={width:t.canvasWidth,height:t.canvasHeight},s={width:t.videoWidth,height:t.videoHeight},c={width:o.videoFeed.videoElement().clientWidth,height:o.videoFeed.videoElement().clientHeight},l=1,d=a.width/a.height;c.width/c.height,i.width/i.height,s.width/s.height;l=d<0?a.width/i.width:a.height/i.height;var h=a.width/2,p=a.height/2,m=i.width/2,f=i.height/2;t.fromX=h-l*(m-t.fromX),t.fromY=p-l*(f-t.fromY),t.toX=h-l*(m-t.toX),t.toY=p-l*(f-t.toY),t.mirrored=!!t.mirrored,t.mirrored&&(t.fromX=a.width-t.fromX,t.toX=a.width-t.toX),r&&(t.fromX=a.width-t.fromX,t.toX=a.width-t.toX);var v=JSON.parse(JSON.stringify(t));v.canvasWidth=a.width,v.canvasHeight=a.height,v.videoWidth=c.width,v.videoHeight=c.height,e?g[n]=v:g.push(v),u.push(t),M(null)},A=function(t,e){t.forEach(function(t,n){t.id===o.videoFeed.stream.connection.connectionId&&P(t,e,n)})},S=function(t,e){u=u.filter(function(t){return console.log(t.fromId),t.fromId!==e}),t?g=[]:(o.session&&o.session.signal({type:"otAnnotation_clear"}),p=[]),M()};o.videoFeed.session&&o.videoFeed.session.on({"signal:otAnnotation_pen":function(t){t.from.connectionId!==o.session.connection.connectionId&&A(JSON.parse(t.data))},"signal:otAnnotation_text":function(t){t.from.connectionId!==o.session.connection.connectionId&&A(JSON.parse(t.data))},"signal:otAnnotation_history":function(t){l&&l!==t.from.connectionId||(l=t.from.connectionId,A(JSON.parse(t.data)))},"signal:otAnnotation_clear":function(t){t.from.connectionId!==o.session.connection.connectionId&&S(!0,t.from.connectionId)},connectionCreated:function(t){u.length>0&&t.connection.connectionId!==o.session.connection.connectionId&&k("otWhiteboard_history",u,t.connection)}});var C,k=function(t,e,n){for(var i=e.slice(),a=function(t){t&&TB.error(t)};i.length;){var s=i.splice(0,Math.min(i.length,32)),r={type:t,data:JSON.stringify(s)};n&&(r.to=n),o.session.signal(r,a)}},E=function(t){o.session&&(h.push(t),C||(C=setTimeout(function(){k("otAnnotation_pen",h),h=[],C=null},100)))}},OTSolution.Annotations.Toolbar=function(t){var e=this,n=this;t||(t={}),this.session=t.session,this.parent=t.container,this.externalWindow=t.externalWindow,this.backgroundColor=t.backgroundColor||"rgba(0, 0, 0, 0.7)",this.buttonWidth=t.buttonWidth||"40px",this.buttonHeight=t.buttonHeight||"40px",this.iconWidth=t.iconWidth||"30px",this.iconHeight=t.iconHeight||"30px",this.items=t.items||[{id:"OT_pen",title:"Pen",icon:"../images/annotation/freehand.png",selectedIcon:"../images/annotation/freehand_selected.png"},{id:"OT_line",title:"Line",icon:"../images/annotation/line.png",selectedIcon:"../images/annotation/line_selected.png",points:[[0,0],[0,1]]},{id:"OT_shapes",title:"Shapes",icon:"../images/annotation/shapes.png",items:[{id:"OT_arrow",title:"Arrow",icon:"../images/annotation/arrow.png",points:[[0,1],[3,1],[3,0],[5,2],[3,4],[3,3],[0,3],[0,1]]},{id:"OT_rect",title:"Rectangle",icon:"../images/annotation/rectangle.png",points:[[0,0],[1,0],[1,1],[0,1],[0,0]]},{id:"OT_oval",title:"Oval",icon:"../images/annotation/oval.png",enableSmoothing:!0,points:[[0,.5],[.5+.5*Math.cos(5*Math.PI/4),.5+.5*Math.sin(5*Math.PI/4)],[.5,0],[.5+.5*Math.cos(7*Math.PI/4),.5+.5*Math.sin(7*Math.PI/4)],[1,.5],[.5+.5*Math.cos(Math.PI/4),.5+.5*Math.sin(Math.PI/4)],[.5,1],[.5+.5*Math.cos(3*Math.PI/4),.5+.5*Math.sin(3*Math.PI/4)],[0,.5],[.5+.5*Math.cos(5*Math.PI/4),.5+.5*Math.sin(5*Math.PI/4)]]}]},{id:"OT_text",title:"Text",icon:"../images/annotation/text.png",selectedIcon:"../images/annotation/text.png"},{id:"OT_colors",title:"Colors",icon:"",items:{}},{id:"OT_line_width",title:"Line Width",icon:"../images/annotation/line_width.png",items:{}},{id:"OT_clear",title:"Clear",icon:"../images/annotation/clear.png"},{id:"OT_capture",title:"Capture",icon:"../images/annotation/camera.png",selectedIcon:"../images/annotation/camera_selected.png"}],this.colors=t.colors||["#1abc9c","#2ecc71","#3498db","#9b59b6","#34495e","#16a085","#27ae60","#2980b9","#8e44ad","#2c3e50","#f1c40f","#e67e22","#e74c3c","#ecf0f1","#95a5a6","#f39c12","#d35400","#c0392b","#bdc3c7","#7f8c8d"],this.cbs=[];var i,o=[],a=function(t,e,i){var o=this,a=n.externalWindow?n.externalWindow.document:document;this.getElm=function(t){return"string"==typeof t?a.querySelector(t):t},this.render=function(){var t=this,e="";t.colors.forEach(function(n){e+=t.options.template.replace(/\{color\}/g,n)}),t.elm.innerHTML=e},this.close=function(){this.elm.style.display="none"},this.open=function(){this.elm.style.display=this.options.style.display},this.colorChosen=function(t){this.cbs.push(t)},this.set=function(t,e){var n=this;n.color=t,e!==!1&&n.cbs.forEach(function(e){e.call(n,t)})},i=i||{},i.openEvent=i.openEvent||"click",i.style=Object(i.style),i.style.display=i.style.display||"block",i.template=i.template||'<div class="color-choice" data-col="{color}" style="background-color: {color}"></div>',o.elm=o.getElm(t),o.cbs=[],o.colors=e,o.options=i,o.render(),o.elm.addEventListener("click",function(t){var e=t.target.getAttribute("data-col");e&&(o.set(e),o.close())}),i.autoclose!==!1&&o.close()};this.createPanel=function(t){if(n.parent){var r=t?t.document:document;i=r.createElement("div"),i.setAttribute("id","OT_toolbar"),i.setAttribute("class","OT_panel"),i.style.width="100%",i.style.height="100%",i.style.backgroundColor=this.backgroundColor,this.parent.appendChild(i),this.parent.style.position="relative",this.parent.zIndex=1e3;for(var c=[],l=r.createElement("div"),d=0,h=this.items.length;d<h;d++){var u=this.items[d],g=r.createElement("input");if(g.setAttribute("type","button"),g.setAttribute("id",u.id),g.style.position="relative",g.style.top="50%",g.style.transform="translateY(-50%)","OT_colors"===u.id){g.style.webkitTransform="translateY(-85%)";var p=r.createElement("div");p.setAttribute("class","color-picker"),p.style.backgroundColor=this.backgroundColor,this.parent.appendChild(p);var m=new a(".color-picker",this.colors,{externalWindow:n.externalWindow});m.colorChosen(function(t){var e=r.getElementById("OT_colors");e.style.backgroundColor=t,o.forEach(function(e){e.changeColor(t)})});for(var f=r.querySelectorAll(".color-choice"),v=0;v<f.length;v++)f[v].style.display="inline-block",f[v].style.width="30px",f[v].style.height="30px",f[v].style.margin="5px",f[v].style.cursor="pointer",f[v].style.borderRadius="100%",f[v].style.opacity=.7,f[v].onmouseover=function(){this.style.opacity=1},f[v].onmouseout=function(){this.style.opacity=.7};g.setAttribute("class","OT_color"),g.style.marginLeft="10px",g.style.marginRight="10px",g.style.borderRadius="50%",g.style.backgroundColor=this.colors[0],g.style.width=this.iconWidth,g.style.height=this.iconHeight,g.style.paddingTop=this.buttonHeight.replace("px","")-this.iconHeight.replace("px","")+"px"}else g.style.background='url("'+u.icon+'") no-repeat',g.style.backgroundSize=this.iconWidth+" "+this.iconHeight,g.style.backgroundPosition="center",g.style.width=this.buttonWidth,g.style.height=this.buttonHeight;"Line Width"!==u.title||Array.isArray(u.items)||(u.items=[{id:"OT_line_width_2",title:"Line Width 2",size:2},{id:"OT_line_width_4",title:"Line Width 4",size:4},{id:"OT_line_width_6",title:"Line Width 6",size:6},{id:"OT_line_width_8",title:"Line Width 8",size:8},{id:"OT_line_width_10",title:"Line Width 10",size:10},{id:"OT_line_width_12",title:"Line Width 12",size:12},{id:"OT_line_width_14",title:"Line Width 14",size:14}]),u.items&&g.setAttribute("data-type","group"),g.setAttribute("data-col",u.title),g.style.border="none",g.style.cursor="pointer",c.push(g.outerHTML)}i.innerHTML=c.join(""),i.onclick=function(t){var n="group"===t.target.getAttribute("data-type"),i=t.target.getAttribute("data-col"),a=t.target.getAttribute("id");n?e.items.forEach(function(t){if(t.title===i){if(e.selectedGroup=t,t.items&&(l.setAttribute("class","OT_subpanel"),l.style.backgroundColor=e.backgroundColor,l.style.width="100%",l.style.height="100%",l.style.paddingLeft="15px",l.style.display="none",e.parent.appendChild(l),Array.isArray(t.items))){var n=[];"OT_line_width"===t.id?t.items.forEach(function(t){var i=r.createElement("div");i.setAttribute("data-col",t.title),i.setAttribute("id",t.id),i.style.position="relative",i.style.top="50%",i.style.transform="translateY(-50%)",i.style["float"]="left",i.style.width=e.buttonWidth,i.style.height=e.buttonHeight,i.style.border="none",i.style.cursor="pointer";var o=r.createElement("div");o.style.backgroundColor="#FFFFFF",o.style.width="80%",o.style.height=t.size+"px",o.style.position="relative",o.style.left="50%",o.style.top="50%",o.style.transform="translateX(-50%) translateY(-50%)",o.style.pointerEvents="none",i.appendChild(o),n.push(i.outerHTML)}):t.items.forEach(function(t){var i=r.createElement("input");i.setAttribute("type","button"),i.setAttribute("data-col",t.title),i.setAttribute("id",t.id),i.style.background='url("'+t.icon+'") no-repeat',i.style.position="relative",i.style.top="50%",i.style.transform="translateY(-50%)",i.style.backgroundSize=e.iconWidth+" "+e.iconHeight,i.style.backgroundPosition="center",i.style.width=e.buttonWidth,i.style.height=e.buttonHeight,i.style.border="none",i.style.cursor="pointer",n.push(i.outerHTML)}),l.innerHTML=n.join("")}"OT_shapes"===a||"OT_line_width"===a?(l&&(l.style.display="block"),m.close()):"OT_colors"===a&&(l&&(l.style.display="none"),m.open())}}):(e.items.forEach(function(t){if("Clear"!==t.title&&t.title===i){if(e.selectedItem){var n=r.getElementById(e.selectedItem.id);n&&(n.style.background='url("'+e.selectedItem.icon+'") no-repeat',n.style.backgroundSize=e.iconWidth+" "+e.iconHeight,n.style.backgroundPosition="center")}if(t.selectedIcon){var a=r.getElementById(t.id);a&&(a.style.background='url("'+t.selectedIcon+'") no-repeat',a.style.backgroundSize=e.iconWidth+" "+e.iconHeight,a.style.backgroundPosition="center")}return e.selectedItem=t,s(t),o.forEach(function(t){t.selectItem(e.selectedItem)}),!1}}),l.style.display="none"),e.cbs.forEach(function(t){t.call(e,a)})},l.onclick=function(t){var n="group"===t.target.getAttribute("data-type"),i=(t.target.getAttribute("data-col"),t.target.getAttribute("id"));l.style.display="none",n||e.selectedGroup.items.forEach(function(t){if("OT_clear"!==t.id&&t.id===i){if(e.selectedItem){var n=document.getElementById(e.selectedItem.id);n&&(n.style.background='url("'+e.selectedItem.icon+'") no-repeat',n.style.backgroundSize=e.iconWidth+" "+e.iconHeight,n.style.backgroundPosition="center")}if(t.selectedIcon){var a=document.getElementById(t.id);n&&(a.style.background='url("'+t.selectedIcon+'") no-repeat',a.style.backgroundSize=e.iconWidth+" "+e.iconHeight,a.style.backgroundPosition="center")}return e.selectedItem=t,s(t),o.forEach(function(t){t.selectItem(e.selectedItem)}),!1}}),e.cbs.forEach(function(t){t.call(e,i)})},r.getElementById("OT_clear").onclick=function(){o.forEach(function(t){t.clear()})}}},!this.externalWindow&&this.createPanel();var s=function(t){t.points||("OT_line"===t.id?e.selectedItem.points=[[0,0],[0,1]]:"OT_arrow"===t.id?e.selectedItem.points=[[0,1],[3,1],[3,0],[5,2],[3,4],[3,3],[0,3],[0,1]]:"OT_rect"===t.id?e.selectedItem.points=[[0,0],[1,0],[1,1],[0,1],[0,0]]:"OT_oval"===t.id&&(e.selectedItem.enableSmoothing=!0,e.selectedItem.points=[[0,.5],[.5+.5*Math.cos(5*Math.PI/4),.5+.5*Math.sin(5*Math.PI/4)],[.5,0],[.5+.5*Math.cos(7*Math.PI/4),.5+.5*Math.sin(7*Math.PI/4)],[1,.5],[.5+.5*Math.cos(Math.PI/4),.5+.5*Math.sin(Math.PI/4)],[.5,1],[.5+.5*Math.cos(3*Math.PI/4),.5+.5*Math.sin(3*Math.PI/4)],[0,.5],[.5+.5*Math.cos(5*Math.PI/4),.5+.5*Math.sin(5*Math.PI/4)]]))};this.itemClicked=function(t){this.cbs.push(t)},this.addCanvas=function(t){var e=this;t.link(e.session),t.colors(e.colors),o.push(t)},this.removeCanvas=function(t){o.forEach(function(e){var n=e.canvas();e.videoFeed.stream.connection.connectionId===t&&n.parentNode&&n.parentNode.removeChild(n)}),o=o.filter(function(e){return e.videoFeed.stream.connection.connectionId!==t})},this.remove=function(){try{i.parentNode.removeChild(i)}catch(t){console.log(t)}o.forEach(function(t){var e=t.canvas();e.parentNode&&e.parentNode.removeChild(e)}),o=[]}},OTSolution.Annotations.Analytics=function(){},OTSolution.Annotations.Analytics.logEvent=function(t){var e=t.payload||"";"object"==typeof e&&(e=JSON.stringify(e)),t.payload=e;var n=JSON.stringify(t),i=new XMLHttpRequest;i.open("POST","https://hlg.tokbox.com/prod/logging/ClientEvent",!0),i.setRequestHeader("Content-type","application/json"),i.send(n)},OTSolution.Annotations.Analytics.get_uuid=function(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(t){var e=16*Math.random()|0,n="x"==t?e:3&e|8;return n.toString(16)})},function(){var t,e,n,i,o,a={},s={clientVersion:"js-vsol-1.0.0",componentId:"annotationsKit",name:"guidAnnotationsKit",actionInitialize:"Init",actionStart:"Start",actionEnd:"Done",actionFreeHand:"FreeHand",actionPickerColor:"PickerColor",actionText:"Text",actionScreenCapture:"ScreenCapture",actionErase:"Erase",variationAttempt:"Attempt",variationError:"Failure",variationSuccess:"Success"},r=function(){var t=window.location.href,e={clientVersion:s.clientVersion,source:t,componentId:s.componentId,name:s.name};o=new OTKAnalytics(e);var i={sessionId:n.id,connectionId:n.connection.connectionId,partnerId:n.apiKey};o.addSessionInfo(i)},c=function(t,e){var n={action:t,variation:e};o.logEvent(n)},l=function(t,n){e&&e.triggerEvent(t,n)},d=function(){var t=["startAnnotation","linkAnnotation","resizeCanvas","annotationWindowClosed","endAnnotation"];e.registerEvents(t)},h=function(){var t=['<div id="toolbar"></div>'].join("\n");$("body").append(t)},u=[{id:"OT_pen",title:"Pen",icon:"../images/annotation/freehand.png",selectedIcon:"../images/annotation/freehand_selected.png"},{id:"OT_line",title:"Line",icon:"../images/annotation/line.png",selectedIcon:"../images/annotation/line_selected.png"},{id:"OT_text",title:"Text",icon:"../images/annotation/text.png",selectedIcon:"../images/annotation/text.png"},{id:"OT_shapes",title:"Shapes",icon:"../images/annotation/shapes.png",items:[{id:"OT_arrow",title:"Arrow",icon:"../images/annotation/arrow.png"},{id:"OT_rect",title:"Rectangle",icon:"../images/annotation/rectangle.png"},{id:"OT_oval",title:"Oval",icon:"../images/annotation/oval.png"},{id:"OT_star",title:"Star",icon:"../images/annotation/star.png",points:[[.5+.5*Math.cos(90*(Math.PI/180)),.5+.5*Math.sin(90*(Math.PI/180))],[.5+.25*Math.cos(126*(Math.PI/180)),.5+.25*Math.sin(126*(Math.PI/180))],[.5+.5*Math.cos(162*(Math.PI/180)),.5+.5*Math.sin(162*(Math.PI/180))],[.5+.25*Math.cos(198*(Math.PI/180)),.5+.25*Math.sin(198*(Math.PI/180))],[.5+.5*Math.cos(234*(Math.PI/180)),.5+.5*Math.sin(234*(Math.PI/180))],[.5+.25*Math.cos(270*(Math.PI/180)),.5+.25*Math.sin(270*(Math.PI/180))],[.5+.5*Math.cos(306*(Math.PI/180)),.5+.5*Math.sin(306*(Math.PI/180))],[.5+.25*Math.cos(342*(Math.PI/180)),.5+.25*Math.sin(342*(Math.PI/180))],[.5+.5*Math.cos(18*(Math.PI/180)),.5+.5*Math.sin(18*(Math.PI/180))],[.5+.25*Math.cos(54*(Math.PI/180)),.5+.25*Math.sin(54*(Math.PI/180))],[.5+.5*Math.cos(90*(Math.PI/180)),.5+.5*Math.sin(90*(Math.PI/180))]]}]},{id:"OT_colors",title:"Colors",icon:"",items:{}},{id:"OT_line_width",title:"Line Width",icon:"../images/annotation/line_width.png",items:{}},{id:"OT_clear",title:"Clear",icon:"../images/annotation/clear.png"}],g=["#1abc9c","#2ecc71","#3498db","#9b59b6","#8e44ad","#f1c40f","#e67e22","#e74c3c","#ded5d5"],p=10/6,m=_.throttle(function(){i.onResize()},1e3),f=function(){var t,e;if(a.externalWindow){var n={width:a.externalWindow.innerWidth,height:a.externalWindow.innerHeight},i=n.width/p;i<=n.height?(t=n.width,e=i):(e=n.height,t=e*p)}else{var o=a.absoluteParent||a.canvasContainer;t=$(o).width(),e=$(o).height()}$(a.canvasContainer).css({width:t,height:e}),$(a.canvas).css({width:t,height:e}),$(a.canvas).attr({width:t,height:e}),m(),l("resizeCanvas")},v=function(){$(a.resizeSubject).on("resize",_.throttle(function(){f()},500))},y=function(t,e,n){var i=_.property("toolbarId")(e)||"toolbar",o=_.property("toolbarItems")(e)||u,a=_.property("colors")(e)||g,r=function(){var t=n?n:window;return t.document.getElementById(i)};toolbar=new OTSolution.Annotations.Toolbar({session:t,container:r(),colors:a,items:o,externalWindow:n||null}),toolbar.itemClicked(function(t){var e={OT_pen:s.actionFreeHand,OT_colors:s.actionPickerColor,OT_text:s.actionText,OT_clear:s.actionErase},n=e[t];n&&(c(n,s.variationAttempt),c(n,s.variationSuccess))})},w=function(){var t=$.Deferred(),e=.8*screen.width|0,n=e/p,i=["templates/screenshare.html?opentok-annotation"].join(""),o=["toolbar=no","location=no","directories=no","status=no","menubar=no","scrollbars=no","resizable=no","copyhistory=no",["width=",e].join(""),["height=",n].join(""),["left=",screen.width/2-e/2].join(""),["top=",screen.height/2-n/2].join("")].join(","),a=window.open(i,"",o);window.onbeforeunload=function(){a.close()},a.toolbar=toolbar,a.OT=OT,a.$=$,a.triggerCloseEvent=function(){l("annotationWindowClosed")};var s=function(){a.createContainerElements?$(a.document).ready(function(){t.resolve(a)}):setTimeout(s,100)};return s(),t.promise()},I=function(){$(a.resizeSubject).off("resize",f),toolbar.remove()},b=function(t,e){var n=$.Deferred();return c(s.actionStart,s.variationAttempt),_.property("screensharing")(e)?w().then(function(i){y(t,e,i),toolbar.createPanel(i),l("startAnnotation",i),c(s.actionStart,s.variationSuccess),n.resolve(i)}):(y(t,e),l("startAnnotation"),c(s.actionStart,s.variationSuccess),n.resolve()),n.promise()},T=function(t,e,n){a.resizeSubject=_.property("externalWindow")(n)||window,a.externalWindow=_.property("externalWindow")(n)||null,a.absoluteParent=_.property("absoluteParent")(n)||null,a.canvasContainer=e,i=new OTSolution.Annotations({feed:t,container:e,externalWindow:a.externalWindow}),toolbar.addCanvas(i),i.onScreenCapture(function(t){var e=window.open(t,"_blank");e.focus()});var o=a.externalWindow?a.externalWindow:window;a.canvas=$(_.first(o.document.getElementsByTagName("canvas"))),v(),f(),l("linkAnnotation")},x=function(){f()},M=function(t){c(s.actionEnd,s.variationAttempt),I(),a.canvas=null,t&&(a.externalWindow&&(a.externalWindow.close(),a.externalWindow=null,a.resizeSubject=null),l("endAnnotation")),c(s.actionEnd,s.variationSuccess)},W=function(i){if(t=this,t.options=_.omit(i,"accPack","session"),e=_.property("accPack")(i),n=_.property("session")(i),!n)throw new Error("OpenTok Annotation Accelerator Pack requires an OpenTok session");d(),h(),r(),c(s.actionInitialize,s.variationAttempt),c(s.actionInitialize,s.variationSuccess)};W.prototype={constructor:W,start:b,linkCanvas:T,resizeCanvas:x,end:M},"object"==typeof exports?module.exports=W:"function"==typeof define&&define.amd?define(function(){return W}):this.AnnotationAccPack=W}.call(this); |
| { | ||
| "name": "opentok-annotation", | ||
| "version": "1.0.8", | ||
| "version": "1.0.9", | ||
| "description": "OpenTok annotation accelerator pack", | ||
@@ -5,0 +5,0 @@ "main": "dist/opentok-annotation.js", |
@@ -15,3 +15,3 @@ /*! | ||
| OTSolution.Annotations = function(options) { | ||
| OTSolution.Annotations = function (options) { | ||
@@ -59,3 +59,3 @@ options = options || {}; | ||
| this.canvas = function() { | ||
| this.canvas = function () { | ||
| return canvas; | ||
@@ -69,3 +69,3 @@ }; | ||
| */ | ||
| this.link = function(session) { | ||
| this.link = function (session) { | ||
| this.session = session; | ||
@@ -78,3 +78,3 @@ }; | ||
| */ | ||
| this.changeColor = function(color) { | ||
| this.changeColor = function (color) { | ||
| self.userColor = color; | ||
@@ -90,3 +90,3 @@ if (!self.lineWidth) { | ||
| */ | ||
| this.changeLineWidth = function(size) { | ||
| this.changeLineWidth = function (size) { | ||
| this.lineWidth = size; | ||
@@ -100,3 +100,3 @@ }; | ||
| */ | ||
| this.selectItem = function(item) { | ||
| this.selectItem = function (item) { | ||
| if (self.overlay) { | ||
@@ -122,11 +122,11 @@ self.overlay.style.display = 'none'; | ||
| self.parent.onmouseover = function() { | ||
| self.parent.onmouseover = function () { | ||
| self.overlay.style.opacity = 1; | ||
| }; | ||
| self.parent.onmouseout = function() { | ||
| self.parent.onmouseout = function () { | ||
| self.overlay.style.opacity = 0; | ||
| }; | ||
| self.overlay.onclick = function() { | ||
| self.overlay.onclick = function () { | ||
| self.captureScreenshot(); | ||
@@ -150,3 +150,3 @@ }; | ||
| */ | ||
| this.colors = function(colors) { | ||
| this.colors = function (colors) { | ||
| this.colors = colors; | ||
@@ -160,3 +160,3 @@ this.changeColor(colors[0]); | ||
| */ | ||
| this.clear = function() { | ||
| this.clear = function () { | ||
| clearCanvas(false, self.session.connection.connectionId); | ||
@@ -174,17 +174,4 @@ if (self.session) { | ||
| */ | ||
| this.captureScreenshot = function() { | ||
| this.captureScreenshot = function () { | ||
| OTSolution.Annotations.Analytics.logEvent({ | ||
| widgetVersion: self.widgetVersion, | ||
| guid: OTSolution.Annotations.Analytics.get_uuid(), | ||
| source: window.location.href, | ||
| logVersion: '1', | ||
| clientSystemTime: new Date().getTime(), | ||
| action: 'an_capture', | ||
| variation: '', | ||
| sessionId: self.session.sessionId, | ||
| partnerId: self.videoFeed.session.apiKey, | ||
| connectionId: self.session.connection.connectionId | ||
| }); | ||
| var canvasCopy = document.createElement('canvas'); | ||
@@ -230,3 +217,3 @@ canvasCopy.width = canvas.width; | ||
| var image = new Image(); | ||
| image.onload = function() { | ||
| image.onload = function () { | ||
| var ctxCopy = canvasCopy.getContext('2d'); | ||
@@ -246,3 +233,3 @@ if (mirrored) { | ||
| cbs.forEach(function(cb) { | ||
| cbs.forEach(function (cb) { | ||
| cb.call(self, canvasCopy.toDataURL()); | ||
@@ -258,7 +245,7 @@ }); | ||
| this.onScreenCapture = function(cb) { | ||
| this.onScreenCapture = function (cb) { | ||
| cbs.push(cb); | ||
| }; | ||
| this.onResize = function() { | ||
| this.onResize = function () { | ||
| drawHistory = []; | ||
@@ -268,3 +255,3 @@ | ||
| eventHistory.forEach(function(history) { | ||
| eventHistory.forEach(function (history) { | ||
| updateCanvas(history, true); | ||
@@ -353,18 +340,29 @@ }); | ||
| case 'touchend': | ||
| client.dragging = false; | ||
| update = { | ||
| id: self.videoFeed.stream.connection.connectionId, | ||
| fromId: self.session.connection.connectionId, | ||
| fromX: client.lastX, | ||
| fromY: client.lastY, | ||
| toX: x, | ||
| toY: y, | ||
| color: resizeEvent ? event.userColor : self.userColor, | ||
| lineWidth: self.lineWidth, | ||
| videoWidth: self.videoFeed.videoElement().clientWidth, | ||
| videoHeight: self.videoFeed.videoElement().clientHeight, | ||
| canvasWidth: canvas.width, | ||
| canvasHeight: canvas.height, | ||
| mirrored: mirrored, | ||
| startPoint: self.isStartPoint, // Each segment is treated as a new set of points | ||
| endPoint: false, | ||
| selectedItem: selectedItem | ||
| }; | ||
| draw(update, true); | ||
| client.lastX = x; | ||
| client.lastY = y; | ||
| !resizeEvent && sendUpdate(update); | ||
| self.isStartPoint = false; | ||
| break; | ||
| case 'mouseout': | ||
| client.dragging = false; | ||
| OTSolution.Annotations.Analytics.logEvent({ | ||
| widgetVersion: self.widgetVersion, | ||
| guid: OTSolution.Annotations.Analytics.get_uuid(), | ||
| source: window.location.href, | ||
| logVersion: '1', | ||
| clientSystemTime: new Date().getTime(), | ||
| action: 'an_draw', | ||
| variation: 'an_pen', | ||
| sessionId: self.session.sessionId, | ||
| partnerId: self.videoFeed.session.apiKey, | ||
| connectionId: self.session.connection.connectionId, | ||
| selectedItem: selectedItem | ||
| }); | ||
| } | ||
@@ -422,15 +420,2 @@ } else if (selectedItem.id === 'OT_text') { | ||
| OTSolution.Annotations.Analytics.logEvent({ | ||
| widgetVersion: self.widgetVersion, | ||
| guid: OTSolution.Annotations.Analytics.get_uuid(), | ||
| source: window.location.href, | ||
| logVersion: '1', | ||
| clientSystemTime: new Date().getTime(), | ||
| action: 'an_draw', | ||
| variation: 'an_shape', | ||
| sessionId: self.session.sessionId, | ||
| partnerId: self.videoFeed.session.apiKey, | ||
| connectionId: self.session.connection.connectionId | ||
| }); | ||
| var points = selectedItem.points; | ||
@@ -518,3 +503,3 @@ | ||
| addEventListeners(canvas, 'mousedown mousemove mouseup mouseout touchstart touchmove touchend', function(event) { | ||
| addEventListeners(canvas, 'mousedown mousemove mouseup mouseout touchstart touchmove touchend', function (event) { | ||
@@ -566,3 +551,3 @@ // Handle text annotation separately and ignore mouse movements if we're not dragging. | ||
| var ignoreClicks = false; | ||
| var handleClick = function(event) { | ||
| var handleClick = function (event) { | ||
@@ -586,3 +571,3 @@ event.preventDefault(); | ||
| // Listen for keydown on 'Enter' once the text input is appended | ||
| var handleKeyDown = function(event) { | ||
| var handleKeyDown = function (event) { | ||
@@ -603,7 +588,7 @@ // Enter | ||
| var addKeyDownListener = function() { | ||
| var addKeyDownListener = function () { | ||
| context.addEventListener('keydown', handleKeyDown); | ||
| }; | ||
| var removeKeyDownListener = function() { | ||
| var removeKeyDownListener = function () { | ||
| context.removeEventListener('keydown', handleKeyDown); | ||
@@ -615,3 +600,3 @@ }; | ||
| */ | ||
| var processTextEvent = function() { | ||
| var processTextEvent = function () { | ||
@@ -644,3 +629,3 @@ var textInput = context.getElementById(textInputId); | ||
| var createTextInput = function(event) { | ||
| var createTextInput = function (event) { | ||
@@ -682,3 +667,3 @@ var textInput = context.createElement('input'); | ||
| var draw = function(update, resizeEvent) { | ||
| var draw = function (update, resizeEvent) { | ||
@@ -696,3 +681,3 @@ if (!ctx) { | ||
| // Repopulate the canvas with items from drawHistory | ||
| drawHistory.forEach(function(history) { | ||
| drawHistory.forEach(function (history) { | ||
@@ -788,3 +773,3 @@ ctx.strokeStyle = history.color; | ||
| var drawPoints = function(ctx, points) { | ||
| var drawPoints = function (ctx, points) { | ||
| var scale = scaleForPoints(points); | ||
@@ -833,3 +818,3 @@ | ||
| var scaleForPoints = function(points) { | ||
| var scaleForPoints = function (points) { | ||
| // mX and mY refer to the end point of the enclosing rectangle (touch up) | ||
@@ -865,3 +850,3 @@ var minX = Number.MAX_VALUE; | ||
| var drawTextUpdate = function(update) { | ||
| var drawTextUpdate = function (update) { | ||
@@ -874,3 +859,3 @@ | ||
| var drawIncoming = function(update, resizeEvent, index) { | ||
| var drawIncoming = function (update, resizeEvent, index) { | ||
@@ -960,5 +945,5 @@ var iCanvas = { | ||
| var drawUpdates = function(updates, resizeEvent) { | ||
| var drawUpdates = function (updates, resizeEvent) { | ||
| updates.forEach(function(update, index) { | ||
| updates.forEach(function (update, index) { | ||
| if (update.id === self.videoFeed.stream.connection.connectionId) { | ||
@@ -970,6 +955,6 @@ drawIncoming(update, resizeEvent, index); | ||
| var clearCanvas = function(incoming, cid) { | ||
| var clearCanvas = function (incoming, cid) { | ||
| // console.log('cid: ' + cid); | ||
| // Remove all elements from history that were drawn by the sender | ||
| drawHistory = drawHistory.filter(function(history) { | ||
| drawHistory = drawHistory.filter(function (history) { | ||
| console.log(history.fromId); | ||
@@ -997,3 +982,3 @@ return history.fromId !== cid; | ||
| self.videoFeed.session.on({ | ||
| 'signal:otAnnotation_pen': function(event) { | ||
| 'signal:otAnnotation_pen': function (event) { | ||
| if (event.from.connectionId !== self.session.connection.connectionId) { | ||
@@ -1003,3 +988,3 @@ drawUpdates(JSON.parse(event.data)); | ||
| }, | ||
| 'signal:otAnnotation_text': function(event) { | ||
| 'signal:otAnnotation_text': function (event) { | ||
| if (event.from.connectionId !== self.session.connection.connectionId) { | ||
@@ -1009,3 +994,3 @@ drawUpdates(JSON.parse(event.data)); | ||
| }, | ||
| 'signal:otAnnotation_history': function(event) { | ||
| 'signal:otAnnotation_history': function (event) { | ||
| // We will receive these from everyone in the room, only listen to the first | ||
@@ -1018,3 +1003,3 @@ // person. Also the data is chunked together so we need all of that person's | ||
| }, | ||
| 'signal:otAnnotation_clear': function(event) { | ||
| 'signal:otAnnotation_clear': function (event) { | ||
| if (event.from.connectionId !== self.session.connection.connectionId) { | ||
@@ -1025,3 +1010,3 @@ // Only clear elements drawn by the sender's (from) Id | ||
| }, | ||
| connectionCreated: function(event) { | ||
| connectionCreated: function (event) { | ||
| if (drawHistory.length > 0 && event.connection.connectionId !== self.session.connection.connectionId) { | ||
@@ -1034,7 +1019,7 @@ batchSignal('otWhiteboard_history', drawHistory, event.connection); | ||
| var batchSignal = function(type, data, toConnection) { | ||
| var batchSignal = function (type, data, toConnection) { | ||
| // We send data in small chunks so that they fit in a signal | ||
| // Each packet is maximum ~250 chars, we can fit 8192/250 ~= 32 updates per signal | ||
| var dataCopy = data.slice(); | ||
| var signalError = function(err) { | ||
| var signalError = function (err) { | ||
| if (err) { | ||
@@ -1056,7 +1041,7 @@ TB.error(err); | ||
| var updateTimeout; | ||
| var sendUpdate = function(update) { | ||
| var sendUpdate = function (update) { | ||
| if (self.session) { | ||
| batchUpdates.push(update); | ||
| if (!updateTimeout) { | ||
| updateTimeout = setTimeout(function() { | ||
| updateTimeout = setTimeout(function () { | ||
| batchSignal('otAnnotation_pen', batchUpdates); | ||
@@ -1075,3 +1060,3 @@ batchUpdates = []; | ||
| OTSolution.Annotations.Toolbar = function(options) { | ||
| OTSolution.Annotations.Toolbar = function (options) { | ||
| var self = this; | ||
@@ -1219,7 +1204,7 @@ var _toolbar = this; | ||
| */ | ||
| var ColorPicker = function(parent, colors, options) { | ||
| var ColorPicker = function (parent, colors, options) { | ||
| var self = this; | ||
| var context = _toolbar.externalWindow ? _toolbar.externalWindow.document : document; | ||
| this.getElm = function(el) { | ||
| this.getElm = function (el) { | ||
| if (typeof el === 'string') { | ||
@@ -1231,7 +1216,7 @@ return context.querySelector(el); | ||
| this.render = function() { | ||
| this.render = function () { | ||
| var self = this, | ||
| html = ''; | ||
| self.colors.forEach(function(c) { | ||
| self.colors.forEach(function (c) { | ||
| html += self.options.template.replace(/\{color\}/g, c); | ||
@@ -1243,15 +1228,15 @@ }); | ||
| this.close = function() { | ||
| this.close = function () { | ||
| this.elm.style.display = 'none'; | ||
| }; | ||
| this.open = function() { | ||
| this.open = function () { | ||
| this.elm.style.display = this.options.style.display; | ||
| }; | ||
| this.colorChosen = function(cb) { | ||
| this.colorChosen = function (cb) { | ||
| this.cbs.push(cb); | ||
| }; | ||
| this.set = function(c, p) { | ||
| this.set = function (c, p) { | ||
| var self = this; | ||
@@ -1262,3 +1247,3 @@ self.color = c; | ||
| } | ||
| self.cbs.forEach(function(cb) { | ||
| self.cbs.forEach(function (cb) { | ||
| cb.call(self, c); | ||
@@ -1280,3 +1265,3 @@ }); | ||
| // Click on colors | ||
| self.elm.addEventListener('click', function(ev) { | ||
| self.elm.addEventListener('click', function (ev) { | ||
| var color = ev.target.getAttribute('data-col'); | ||
@@ -1296,3 +1281,3 @@ if (!color) { | ||
| var panel; | ||
| this.createPanel = function(externalWindow) { | ||
| this.createPanel = function (externalWindow) { | ||
| if (_toolbar.parent) { | ||
@@ -1337,7 +1322,7 @@ var context = externalWindow ? externalWindow.document : document; | ||
| pk.colorChosen(function(color) { | ||
| pk.colorChosen(function (color) { | ||
| var colorGroup = context.getElementById('OT_colors'); | ||
| colorGroup.style.backgroundColor = color; | ||
| canvases.forEach(function(canvas) { | ||
| canvases.forEach(function (canvas) { | ||
| canvas.changeColor(color); | ||
@@ -1357,6 +1342,6 @@ }); | ||
| colorChoices[j].style.opacity = 0.7; | ||
| colorChoices[j].onmouseover = function() { | ||
| colorChoices[j].onmouseover = function () { | ||
| this.style.opacity = 1; | ||
| }; | ||
| colorChoices[j].onmouseout = function() { | ||
| colorChoices[j].onmouseout = function () { | ||
| this.style.opacity = 0.7; | ||
@@ -1430,3 +1415,3 @@ }; | ||
| panel.onclick = function(ev) { | ||
| panel.onclick = function (ev) { | ||
| var group = ev.target.getAttribute('data-type') === 'group'; | ||
@@ -1438,3 +1423,3 @@ var itemName = ev.target.getAttribute('data-col'); | ||
| if (!group) { | ||
| self.items.forEach(function(item) { | ||
| self.items.forEach(function (item) { | ||
| if (item.title !== 'Clear' && item.title === itemName) { | ||
@@ -1463,3 +1448,3 @@ if (self.selectedItem) { | ||
| canvases.forEach(function(canvas) { | ||
| canvases.forEach(function (canvas) { | ||
| canvas.selectItem(self.selectedItem); | ||
@@ -1473,3 +1458,3 @@ }); | ||
| } else { | ||
| self.items.forEach(function(item) { | ||
| self.items.forEach(function (item) { | ||
| if (item.title === itemName) { | ||
@@ -1492,3 +1477,3 @@ self.selectedGroup = item; | ||
| // We want to dynamically create icons for the list of possible line widths | ||
| item.items.forEach(function(subItem) { | ||
| item.items.forEach(function (subItem) { | ||
| // INFO Using a div here - not input to create an inner div representing the line width - better option? | ||
@@ -1524,3 +1509,3 @@ var itemButton = context.createElement('div'); | ||
| } else { | ||
| item.items.forEach(function(subItem) { | ||
| item.items.forEach(function (subItem) { | ||
| var itemButton = context.createElement('input'); | ||
@@ -1564,3 +1549,3 @@ itemButton.setAttribute('type', 'button'); | ||
| self.cbs.forEach(function(cb) { | ||
| self.cbs.forEach(function (cb) { | ||
| cb.call(self, id); | ||
@@ -1570,3 +1555,3 @@ }); | ||
| subPanel.onclick = function(ev) { | ||
| subPanel.onclick = function (ev) { | ||
| var group = ev.target.getAttribute('data-type') === 'group'; | ||
@@ -1578,3 +1563,3 @@ var itemName = ev.target.getAttribute('data-col'); | ||
| if (!group) { | ||
| self.selectedGroup.items.forEach(function(item) { | ||
| self.selectedGroup.items.forEach(function (item) { | ||
| if (item.id !== 'OT_clear' && item.id === id) { | ||
@@ -1603,3 +1588,3 @@ if (self.selectedItem) { | ||
| canvases.forEach(function(canvas) { | ||
| canvases.forEach(function (canvas) { | ||
| canvas.selectItem(self.selectedItem); | ||
@@ -1613,3 +1598,3 @@ }); | ||
| self.cbs.forEach(function(cb) { | ||
| self.cbs.forEach(function (cb) { | ||
| cb.call(self, id); | ||
@@ -1619,4 +1604,4 @@ }); | ||
| context.getElementById('OT_clear').onclick = function() { | ||
| canvases.forEach(function(canvas) { | ||
| context.getElementById('OT_clear').onclick = function () { | ||
| canvases.forEach(function (canvas) { | ||
| canvas.clear(); | ||
@@ -1630,3 +1615,3 @@ }); | ||
| var attachDefaultAction = function(item) { | ||
| var attachDefaultAction = function (item) { | ||
| if (!item.points) { | ||
@@ -1680,3 +1665,3 @@ // Attach default actions | ||
| */ | ||
| this.itemClicked = function(cb) { | ||
| this.itemClicked = function (cb) { | ||
| this.cbs.push(cb); | ||
@@ -1689,3 +1674,3 @@ }; | ||
| */ | ||
| this.addCanvas = function(canvas) { | ||
| this.addCanvas = function (canvas) { | ||
| var self = this; | ||
@@ -1702,4 +1687,4 @@ canvas.link(self.session); | ||
| */ | ||
| this.removeCanvas = function(connectionId) { | ||
| canvases.forEach(function(annotationView) { | ||
| this.removeCanvas = function (connectionId) { | ||
| canvases.forEach(function (annotationView) { | ||
| var canvas = annotationView.canvas(); | ||
@@ -1713,3 +1698,3 @@ if (annotationView.videoFeed.stream.connection.connectionId === connectionId) { | ||
| canvases = canvases.filter(function(annotationView) { | ||
| canvases = canvases.filter(function (annotationView) { | ||
| return annotationView.videoFeed.stream.connection.connectionId !== connectionId; | ||
@@ -1722,3 +1707,3 @@ }); | ||
| */ | ||
| this.remove = function() { | ||
| this.remove = function () { | ||
@@ -1731,3 +1716,3 @@ try { | ||
| canvases.forEach(function(annotationView) { | ||
| canvases.forEach(function (annotationView) { | ||
| var canvas = annotationView.canvas(); | ||
@@ -1743,31 +1728,1 @@ if (canvas.parentNode) { | ||
| //-------------------------------------- | ||
| // ANALYTICS | ||
| //-------------------------------------- | ||
| OTSolution.Annotations.Analytics = function() {}; | ||
| OTSolution.Annotations.Analytics.logEvent = function(data) { | ||
| var payload = data.payload || ''; | ||
| if (typeof(payload) === 'object') { | ||
| payload = JSON.stringify(payload); | ||
| } | ||
| data.payload = payload; | ||
| var url_encoded_data = JSON.stringify(data); | ||
| var http = new XMLHttpRequest(); | ||
| http.open('POST', 'https://hlg.tokbox.com/prod/logging/ClientEvent', true); | ||
| http.setRequestHeader('Content-type', 'application/json'); | ||
| http.send(url_encoded_data); | ||
| }; | ||
| OTSolution.Annotations.Analytics.get_uuid = function() { | ||
| return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { | ||
| var r = Math.random() * 16 | 0, | ||
| v = c == 'x' ? r : (r & 0x3 | 0x8); | ||
| return v.toString(16); | ||
| }); | ||
| }; |
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.56%
259143
- Lines of code
- decreased by-1.78%
3806
No dependency changes