opentok-annotation
Advanced tools
opentok-annotation - npm Package Compare versions
Comparing version 1.0.48 to 2.0.0
@@ -1,2 +0,2 @@ | ||
| (function(){var t,e,n,o={clientVersion:"js-vsol-1.0.0",componentId:"annotationsAccPack",name:"guidAnnotationsKit",actionStartDrawing:"StartDrawing",actionEndDrawing:"EndDrawing",variationSuccess:"Success"},i=function(){var i=window.location.href,a={clientVersion:o.clientVersion,source:i,componentId:o.componentId,name:o.name};e=new t(a);var r={sessionId:n.id,connectionId:n.connection.connectionId,partnerId:n.apiKey};e.addSessionInfo(r)},a=function(t,n){var o={action:t,variation:n};e.logEvent(o)},r="https://assets.tokbox.com/solutions/images/";OTSolution=this.OTSolution||{},OTSolution.Annotations=function(n){function s(t,e,n){for(var o=e.split(" "),i=0,a=o.length;i<a;i++)t.addEventListener(o[i],n,!0)}function c(t,e){0===h.width&&(h.width=d.parent.getBoundingClientRect().width),0===h.height&&(h.height=d.parent.getBoundingClientRect().height);var n,i=e?t.canvas.width:d.parent.clientWidth,r=e?t.canvas.height:d.parent.clientHeight,s=e?t.canvas.offsetLeft:h.offsetLeft,c=e?t.canvas.offsetTop:h.offsetTop,l=h.width/i,u=h.height/r,p=t.offsetX||t.pageX-s||t.changedTouches&&t.changedTouches[0].pageX-s,g=t.offsetY||t.pageY-c||t.changedTouches&&t.changedTouches[0].pageY-c,m=p*l,v=g*u,b=e?t.selectedItem:d.selectedItem;if(b)if("OT_pen"===b.id)switch(t.type){case"mousedown":case"touchstart":x.dragging=!0,x.lastX=m,x.lastY=v,d.isStartPoint=!0,!e&&a(o.actionStartDrawing,o.variationSuccess);break;case"mousemove":case"touchmove":x.dragging&&(n={id:d.videoFeed.stream.connection.connectionId,fromId:d.session.connection.connectionId,fromX:x.lastX,fromY:x.lastY,toX:m,toY:v,color:e?t.userColor:d.userColor,lineWidth:d.lineWidth,videoWidth:d.videoFeed.videoElement().clientWidth,videoHeight:d.videoFeed.videoElement().clientHeight,canvasWidth:h.width,canvasHeight:h.height,mirrored:f,startPoint:d.isStartPoint,endPoint:!1,selectedItem:b},S(n,!0),x.lastX=m,x.lastY=v,!e&&L(n),d.isStartPoint=!1);break;case"mouseup":case"touchend":x.dragging=!1,n={id:d.videoFeed.stream.connection.connectionId,fromId:d.session.connection.connectionId,fromX:x.lastX,fromY:x.lastY,toX:m,toY:v,color:e?t.userColor:d.userColor,lineWidth:d.lineWidth,videoWidth:d.videoFeed.videoElement().clientWidth,videoHeight:d.videoFeed.videoElement().clientHeight,canvasWidth:h.width,canvasHeight:h.height,mirrored:f,startPoint:d.isStartPoint,endPoint:!0,selectedItem:b},S(n,!0),x.lastX=m,x.lastY=v,!e&&L(n),d.isStartPoint=!1,!e&&a(o.actionEndDrawing,o.variationSuccess);break;case"mouseout":x.dragging=!1}else if("OT_text"===b.id)n={id:d.videoFeed.stream.connection.connectionId,fromId:d.session.connection.connectionId,fromX:m,fromY:v+t.inputHeight,color:t.userColor,font:t.font,text:t.text,videoWidth:d.videoFeed.videoElement().clientWidth,videoHeight:d.videoFeed.videoElement().clientHeight,canvasWidth:h.width,canvasHeight:h.height,mirrored:f,selectedItem:b},S(n),!e&&L(n);else if(b&&b.points)switch(x.mX=m,x.mY=v,t.type){case"mousedown":case"touchstart":x.isDrawing=!0,x.dragging=!0,x.startX=m,x.startY=v;break;case"mousemove":case"touchmove":x.dragging&&(n={color:e?t.userColor:d.userColor,lineWidth:e?t.lineWidth:d.lineWidth,selectedItem:b},S(n,!0));break;case"mouseup":case"touchend":x.isDrawing=!1;var w=b.points;if(2===w.length)n={id:d.videoFeed.stream.connection.connectionId,fromId:d.session.connection.connectionId,fromX:x.startX,fromY:x.startY,toX:x.mX,toY:x.mY,color:e?t.userColor:d.userColor,lineWidth:e?t.lineWidth:d.lineWidth,videoWidth:d.videoFeed.videoElement().clientWidth,videoHeight:d.videoFeed.videoElement().clientHeight,canvasWidth:h.width,canvasHeight:h.height,mirrored:f,smoothed:!1,startPoint:!0,endPoint:!0,selectedItem:b},y.push(n),!e&&L(n);else{for(var I=X(w),T=0;T<w.length;T++){var W=!1,k=!1,C=x.startX+I.x*w[T][0],M=x.startY+I.y*w[T][1];0===T?(x.lastX=C,x.lastY=M,W=!0):T===w.length-1&&(k=!0),n={id:d.videoFeed.stream.connection.connectionId,fromId:d.session.connection.connectionId,fromX:x.lastX,fromY:x.lastY,toX:C,toY:M,color:e?t.userColor:d.userColor,lineWidth:e?t.lineWidth:d.lineWidth,videoWidth:d.videoFeed.videoElement().clientWidth,videoHeight:d.videoFeed.videoElement().clientHeight,canvasWidth:h.width,canvasHeight:h.height,mirrored:f,smoothed:b.enableSmoothing,startPoint:W,endPoint:k},y.push(n),!e&&L(n),x.lastX=C,x.lastY=M}S(null)}x.dragging=!1}}n=n||{},this.widgetVersion="js-1.0.0-beta",this.parent=n.container,this.videoFeed=n.feed,this.imageAssets=n.imageAssets||r,t=t||n.OTKAnalytics,e||i();var l=n.externalWindow?n.externalWindow.document:window.document,d=this;if(this.parent){var h=document.createElement("canvas");h.setAttribute("id","opentok_canvas"),h.style.position="absolute",this.parent.appendChild(h),h.setAttribute("width",this.parent.clientWidth+"px"),h.style.width=window.getComputedStyle(this.parent).width,h.setAttribute("height",this.parent.clientHeight+"px"),h.style.height=window.getComputedStyle(this.parent).height}var u,p,f,g,m,d=this,v=[],b=[],y=[],w=[],I=[],x={dragging:!1};p=(" "+d.videoFeed.element.className+" ").indexOf(" OT_publisher ")>-1,f=!!p&&(" "+d.videoFeed.element.className+" ").indexOf(" OT_mirrored ")>-1,g=(" "+d.videoFeed.element.className+" ").indexOf(" OT_fit-mode-cover ")>-1,this.canvas=function(){return h},this.link=function(t){this.session=t},this.changeColor=function(t){d.userColor=t,d.lineWidth||(d.lineWidth=2)},this.changeLineWidth=function(t){this.lineWidth=t},this.selectItem=function(t){d.overlay&&(d.parent.removeChild(d.overlay),d.overlay=null),"OT_capture"===t.id?(d.selectedItem=t,d.overlay?d.overlay.style="inline":(d.overlay=document.createElement("div"),d.overlay.id="captureOverlay",d.overlay.style.position="absolute",d.overlay.style.top="0px",d.overlay.style.width=d.parent.clientWidth+"px",d.overlay.style.height=d.parent.clientHeight+"px",d.overlay.style.background='rgba(0,0,0,0.4) url("'+d.imageAssets+'annotation-camera.png") no-repeat center',d.overlay.style.backgroundSize="50px 50px",d.overlay.style.cursor="pointer",d.overlay.style.opacity=0,d.parent.appendChild(d.overlay),d.parent.onmouseover=function(){d.overlay.style.opacity=1,d.overlay.style.zIndex=1010},d.parent.onmouseout=function(){d.overlay.style.opacity=0},d.overlay.onclick=function(){d.captureScreenshot(),d.parent.removeChild(d.overlay),d.overlay=null,d.parent.onmouseover=null,d.parent.onmouseout=null})):t.id.indexOf("OT_line_width")!==-1?t.size&&d.changeLineWidth(t.size):d.selectedItem=t},this.colors=function(t){this.colors=t,this.changeColor(t[0])},this.clear=function(){F(!1,d.session.connection.connectionId),d.session&&d.session.signal({type:"otAnnotation_clear"})},this.captureScreenshot=function(){var t=document.createElement("canvas");t.width=h.width,t.height=h.height;var e=d.videoFeed.videoWidth(),n=d.videoFeed.videoHeight(),o=1,i=0,a=0;g?e<n?(o=h.width/e,e=h.width,n*=o):(o=h.height/n,n=h.height,e*=o):e>n?(o=h.width/e,e=h.width,n*=o):(o=h.height/n,n=h.height,e*=o),i=(e-h.width)/2,a=(n-h.height)/2;var r=new Image;r.onload=function(){var o=t.getContext("2d");f&&(o.translate(e,0),o.scale(-1,1)),o.drawImage(r,i,a,e,n),f&&(o.translate(e,0),o.scale(-1,1)),o.drawImage(h,0,0),v.forEach(function(e){e.call(d,t.toDataURL())}),t=null},r.src="data:image/png;base64,"+d.videoFeed.getImgData()},this.onScreenCapture=function(t){v.push(t)},this.onResize=function(){y=[],H(w,!0),I.forEach(function(t){c(t,!0)})},s(h,"mousedown mousemove mouseup mouseout touchstart touchmove touchend",function(t){var e=d.selectedItem&&"OT_text"===d.selectedItem.id,n="mousemove"===t.type&&!x.dragging;e||n||(t.preventDefault(),t.selectedItem=d.selectedItem,t.selectedItem&&(t.canvas={width:h.width,height:h.height,offsetLeft:h.offsetLeft,offsetTop:h.offsetTop},t.userColor=d.userColor,t.lineWidth=d.lineWidth,I.push(t)),c(t))});var T,W="textAnnotation",k=!1,C=function(t){t.preventDefault(),d.selectedItem&&"OT_text"===d.selectedItem.id&&!k&&(k=!0,t.selectedItem=d.selectedItem,E(t))},M=function(t){13===t.which&&_(),27===t.which&&(l.getElementById(W).remove(),T=null),k=!1},P=function(){l.addEventListener("keydown",M)},O=function(){l.removeEventListener("keydown",M)},_=function(){var t=l.getElementById(W);t.clientHeight;return t.value?(t.remove(),O(),T.text=t.value,T.font="16px Arial",T.userColor=d.userColor,T.canvas={width:h.width,height:h.height,offsetLeft:h.offsetLeft,offsetTop:h.offsetTop},I.push(T),void c(T)):void(T=null)},E=function(t){var e=l.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=d.userColor,e.style.fontFamily="Arial",e.style.zIndex="1001",e.setAttribute("data-canvas-origin",JSON.stringify({x:t.offsetX,y:t.offsetY})),e.id=W,l.body.appendChild(e),e.focus(),T=t,T.inputHeight=e.clientHeight,P()};s(h,"click",C);var S=function(t,e){u||(u=h.getContext("2d"),u.lineCap="round",u.lineJoin="round",u.fillStyle="solid"),u.clearRect(0,0,h.width,h.height),y.forEach(function(t){u.strokeStyle=t.color,u.lineWidth=t.lineWidth,t.smoothed=!!t.smoothed,t.startPoint=!!t.startPoint;var e=!1,n=!!t.selectedItem&&"Text"===t.selectedItem.title&&t.text;n?(u.font=t.font,u.fillStyle=t.color,u.fillText(t.text,t.fromX,t.fromY)):t.smoothed?(t.startPoint?d.isStartPoint=!0:d.isStartPoint&&(e=!0,d.isStartPoint=!1),t.startPoint?(u.closePath(),u.beginPath()):e?u.moveTo((t.fromX+t.toX)/2,(t.fromY+t.toY)/2):(u.quadraticCurveTo(t.fromX,t.fromY,(t.fromX+t.toX)/2,(t.fromY+t.toY)/2),u.stroke())):(u.beginPath(),u.moveTo(t.fromX,t.fromY),u.lineTo(t.toX,t.toY),u.stroke(),u.closePath())});var n=e?t.selectedItem:d.selectedItem;!n||"Pen"!==n.title&&"Text"!==n.title?x.isDrawing&&(t&&(u.strokeStyle=t.color,u.lineWidth=t.lineWidth),n&&n.points&&A(u,d.selectedItem.points)):t&&("Pen"===n.title&&(u.strokeStyle=t.color,u.lineWidth=t.lineWidth,u.beginPath(),u.moveTo(t.fromX,t.fromY),u.lineTo(t.toX,t.toY),u.stroke(),u.closePath()),"Text"===n.title&&(u.font=t.font,u.fillStyle=t.color,u.fillText(t.text,t.fromX,t.fromY)),y.push(t))},A=function(t,e){var n=X(e);if(t.beginPath(),2===e.length)t.moveTo(x.startX,x.startY),t.lineTo(x.mX,x.mY);else for(var o=0;o<e.length;o++){var i=x.startX+n.x*e[o][0],a=x.startY+n.y*e[o][1];d.selectedItem.enableSmoothing?0===o||(1===o?(t.moveTo((i+x.lastX)/2,(a+x.lastY)/2),x.lastX=(i+x.lastX)/2,x.lastX=(a+x.lastY)/2):(t.quadraticCurveTo(x.lastX,x.lastY,(i+x.lastX)/2,(a+x.lastY)/2),x.lastX=(i+x.lastX)/2,x.lastY=(a+x.lastY)/2)):0===o?t.moveTo(i,a):t.lineTo(i,a),x.lastX=i,x.lastY=a}t.stroke(),t.closePath()},X=function(t){for(var e=Number.MAX_VALUE,n=Number.MAX_VALUE,o=0,i=0,a=0;a<t.length;a++)t[a][0]<e?e=t[a][0]:t[a][0]>o&&(o=t[a][0]),t[a][1]<n?n=t[a][1]:t[a][1]>i&&(i=t[a][1]);var r=Math.abs(o-e),s=Math.abs(i-n),c=(x.mX-x.startX)/r,l=(x.mY-x.startY)/s;return{x:c,y:l}},Y=function(t,e,n){var o={width:t.canvasWidth,height:t.canvasHeight},i={width:t.videoWidth,height:t.videoHeight},a={width:d.videoFeed.videoElement().clientWidth,height:d.videoFeed.videoElement().clientHeight},r=1,s=h.width/h.height;a.width/a.height,o.width/o.height,i.width/i.height;r=s<0?h.width/o.width:h.height/o.height;var c=h.width/2,l=h.height/2,u=o.width/2,p=o.height/2;t.fromX=c-r*(u-t.fromX),t.fromY=l-r*(p-t.fromY),t.toX=c-r*(u-t.toX),t.toY=l-r*(p-t.toY),t.mirrored=!!t.mirrored,t.mirrored&&(t.fromX=h.width-t.fromX,t.toX=h.width-t.toX),f&&(t.fromX=h.width-t.fromX,t.toX=h.width-t.toX);var g=JSON.parse(JSON.stringify(t));g.canvasWidth=h.width,g.canvasHeight=h.height,g.videoWidth=a.width,g.videoHeight=a.height,e?w[n]=g:w.push(g),y.push(t),S(null)},H=function(t,e){t.forEach(function(t,n){d.videoFeed.stream&&t.id===d.videoFeed.stream.connection.connectionId&&Y(t,e,n)})},F=function(t,e){y=y.filter(function(t){return console.log(t.fromId),t.fromId!==e}),t?w=[]:(d.session&&d.session.signal({type:"otAnnotation_clear"}),I=[]),S()};d.videoFeed.session&&d.videoFeed.session.on({"signal:otAnnotation_pen":function(t){t.from.connectionId!==d.session.connection.connectionId&&H(JSON.parse(t.data))},"signal:otAnnotation_text":function(t){t.from.connectionId!==d.session.connection.connectionId&&H(JSON.parse(t.data))},"signal:otAnnotation_history":function(t){m&&m!==t.from.connectionId||(m=t.from.connectionId,H(JSON.parse(t.data)))},"signal:otAnnotation_clear":function(t){t.from.connectionId!==d.session.connection.connectionId&&F(!0,t.from.connectionId)},connectionCreated:function(t){y.length>0&&t.connection.connectionId!==d.session.connection.connectionId&&j("otWhiteboard_history",y,t.connection)}});var z,j=function(t,e){for(var n=t.slice(),o=function(t){t&&TB.error(t)},i="otAnnotation_pen",a=function(t){if(t&&t[0]&&t[0].selectedItem&&t[0].selectedItem.id){var e=t[0].selectedItem.id;i="OT_text"===e?"otAnnotation_text":"otAnnotation_pen"}};n.length;){var r=n.splice(0,Math.min(n.length,32));a(r);var s={type:i,data:JSON.stringify(r)};e&&(s.to=e),d.session.signal(s,o)}},L=function(t){d.session&&(b.push(t),z||(z=setTimeout(function(){j(b),b=[],z=null},100)))}},OTSolution.Annotations.Toolbar=function(o){var a=this,s=this;if(o||(o={}),!o.session)throw new Error("OpenTok Annotation Widget requires an OpenTok session");if(n=o.session,!t&&!o.OTKAnalytics)throw new Error("OpenTok Annotation Widget requires an OpenTok Solution");t=t||o.OTKAnalytics,e||i(),this.session=o.session,this.parent=o.container,this.externalWindow=o.externalWindow,this.backgroundColor=o.backgroundColor||"rgba(0, 0, 0, 0.7)",this.buttonWidth=o.buttonWidth||"40px",this.buttonHeight=o.buttonHeight||"40px",this.iconWidth=o.iconWidth||"30px",this.iconHeight=o.iconHeight||"30px";var c=o.imageAssets||r,l=[{id:"OT_pen",title:"Pen",icon:[c,"annotation-freehand.png"].join(""),selectedIcon:[c,"annotation-freehand_selected.png"].join("")},{id:"OT_line",title:"Line",icon:[c,"annotation-line.png"].join(""),selectedIcon:[c,"annotation-line_selected.png"].join(""),points:[[0,0],[0,1]]},{id:"OT_shapes",title:"Shapes",icon:[c,"annotation-shapes.png"].join(""),items:[{id:"OT_arrow",title:"Arrow",icon:[c,"annotation-arrow.png"].join(""),points:[[0,1],[3,1],[3,0],[5,2],[3,4],[3,3],[0,3],[0,1]]},{id:"OT_rect",title:"Rectangle",icon:[c,"annotation-rectangle.png"].join(""),points:[[0,0],[1,0],[1,1],[0,1],[0,0]]},{id:"OT_oval",title:"Oval",icon:[c,"annotation-oval.png"].join(""),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_star",title:"Star",icon:[c,"annotation-star.png"].join(""),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_text",title:"Text",icon:[c,"annotation-text.png"].join(""),selectedIcon:[c,"annotation-text.png"].join("")},{id:"OT_colors",title:"Colors",icon:"",items:{}},{id:"OT_line_width",title:"Line Width",icon:[c,"annotation-line_width.png"].join(""),items:{}},{id:"OT_clear",title:"Clear",icon:[c,"annotation-clear.png"].join("")},{id:"OT_capture",title:"Capture",icon:[c,"annotation-camera.png"].join(""),selectedIcon:[c,"annotation-camera_selected.png"].join("")}],d=function(){var t=["pen","line","shapes","text","colors","line-width","clear","capture"],e=function(e,n){var o=t.indexOf(n);return o!==-1&&e.push(l[o]),e};return o.items&&o.items.length?o.items.reduce(e,[]):l};this.items=d(),this.colors=o.colors||["#1abc9c","#2ecc71","#3498db","#9b59b6","#34495e","#16a085","#27ae60","#2980b9","#8e44ad","#2c3e50","#f1c40f","#e67e22","#e74c3c","#ecf0f1","#95a5a6","#f39c12","#d35400","#c0392b","#bdc3c7","#7f8c8d"],this.cbs=[];var h,u=[],p=function(t,e,n){var o=this,i=s.externalWindow?s.externalWindow.document:document;this.getElm=function(t){return"string"==typeof t?i.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)})},n=n||{},n.openEvent=n.openEvent||"click",n.style=Object(n.style),n.style.display=n.style.display||"block",n.template=n.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=n,o.render(),o.elm.addEventListener("click",function(t){var e=t.target.getAttribute("data-col");e&&(o.set(e),o.close())}),n.autoclose!==!1&&o.close()};this.createPanel=function(t){if(s.parent){var e=t?t.document:document;h=e.createElement("div"),h.setAttribute("id","OT_toolbar"),h.setAttribute("class","OT_panel"),h.style.width="100%",h.style.height="100%",h.style.backgroundColor=this.backgroundColor,this.parent.appendChild(h),this.parent.style.position="relative",this.parent.zIndex=1e3;for(var n=[],o=e.createElement("div"),i=0,r=this.items.length;i<r;i++){var c=this.items[i],l=e.createElement("input");if(l.setAttribute("type","button"),l.setAttribute("id",c.id),l.style.position="relative",l.style.top="50%",l.style.transform="translateY(-50%)","OT_colors"===c.id){l.style.webkitTransform="translateY(-85%)";var d=e.createElement("div");d.setAttribute("class","color-picker"),d.style.backgroundColor=this.backgroundColor,this.parent.appendChild(d);var g=new p(".color-picker",this.colors,{externalWindow:s.externalWindow});g.colorChosen(function(t){var n=e.getElementById("OT_colors");n.style.backgroundColor=t,u.forEach(function(e){e.changeColor(t)})});for(var m=e.querySelectorAll(".color-choice"),v=0;v<m.length;v++)m[v].style.display="inline-block",m[v].style.width="30px",m[v].style.height="30px",m[v].style.margin="5px",m[v].style.cursor="pointer",m[v].style.borderRadius="100%",m[v].style.opacity=.7,m[v].onmouseover=function(){this.style.opacity=1},m[v].onmouseout=function(){this.style.opacity=.7};l.setAttribute("class","OT_color"),l.style.marginLeft="10px",l.style.marginRight="10px",l.style.borderRadius="50%",l.style.backgroundColor=this.colors[0],l.style.width=this.iconWidth,l.style.height=this.iconHeight,l.style.paddingTop=this.buttonHeight.replace("px","")-this.iconHeight.replace("px","")+"px"}else l.style.background='url("'+c.icon+'") no-repeat',l.style.backgroundSize=this.iconWidth+" "+this.iconHeight,l.style.backgroundPosition="center",l.style.width=this.buttonWidth,l.style.height=this.buttonHeight;"Line Width"!==c.title||Array.isArray(c.items)||(c.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}]),c.items&&l.setAttribute("data-type","group"),l.setAttribute("data-col",c.title),l.style.border="none",l.style.cursor="pointer",n.push(l.outerHTML)}h.innerHTML=n.join(""),h.onclick=function(t){var n="group"===t.target.getAttribute("data-type"),i=t.target.getAttribute("data-col"),r=t.target.getAttribute("id");n?a.items.forEach(function(t){if(t.title===i){if(a.selectedGroup=t,t.items&&(o.setAttribute("class","OT_subpanel"),o.style.backgroundColor=a.backgroundColor,o.style.width="100%",o.style.height="100%",o.style.paddingLeft="15px",o.style.display="none",a.parent.appendChild(o),Array.isArray(t.items))){var n=[];"OT_line_width"===t.id?t.items.forEach(function(t){var o=e.createElement("div");o.setAttribute("data-col",t.title),o.setAttribute("id",t.id),o.style.position="relative",o.style.top="50%",o.style.transform="translateY(-50%)",o.style["float"]="left",o.style.width=a.buttonWidth,o.style.height=a.buttonHeight,o.style.border="none",o.style.cursor="pointer";var i=e.createElement("div");i.style.backgroundColor="#FFFFFF",i.style.width="80%",i.style.height=t.size+"px",i.style.position="relative",i.style.left="50%",i.style.top="50%",i.style.transform="translateX(-50%) translateY(-50%)",i.style.pointerEvents="none",o.appendChild(i),n.push(o.outerHTML)}):t.items.forEach(function(t){var o=e.createElement("input");o.setAttribute("type","button"),o.setAttribute("data-col",t.title),o.setAttribute("id",t.id),o.style.background='url("'+t.icon+'") no-repeat',o.style.position="relative",o.style.top="50%",o.style.transform="translateY(-50%)",o.style.backgroundSize=a.iconWidth+" "+a.iconHeight,o.style.backgroundPosition="center",o.style.width=a.buttonWidth,o.style.height=a.buttonHeight,o.style.border="none",o.style.cursor="pointer",n.push(o.outerHTML)}),o.innerHTML=n.join("")}"OT_shapes"===r||"OT_line_width"===r?(o&&(o.style.display="block"),g.close()):"OT_colors"===r&&(o&&(o.style.display="none"),g.open())}}):(a.items.forEach(function(t){if("Clear"!==t.title&&t.title===i){if(a.selectedItem){var n=e.getElementById(a.selectedItem.id);n&&(n.style.background='url("'+a.selectedItem.icon+'") no-repeat',n.style.backgroundSize=a.iconWidth+" "+a.iconHeight,n.style.backgroundPosition="center")}if(t.selectedIcon){var o=e.getElementById(t.id);o&&(o.style.background='url("'+t.selectedIcon+'") no-repeat',o.style.backgroundSize=a.iconWidth+" "+a.iconHeight,o.style.backgroundPosition="center")}return a.selectedItem=t,f(t),u.forEach(function(t){t.selectItem(a.selectedItem)}),!1}}),o.style.display="none"),a.cbs.forEach(function(t){t.call(a,r)})},o.onclick=function(t){var e="group"===t.target.getAttribute("data-type"),n=(t.target.getAttribute("data-col"),t.target.getAttribute("id"));o.style.display="none",e||a.selectedGroup.items.forEach(function(t){if("OT_clear"!==t.id&&t.id===n){if(a.selectedItem){var e=document.getElementById(a.selectedItem.id);e&&(e.style.background='url("'+a.selectedItem.icon+'") no-repeat',e.style.backgroundSize=a.iconWidth+" "+a.iconHeight,e.style.backgroundPosition="center")}if(t.selectedIcon){var o=document.getElementById(t.id);e&&(o.style.background='url("'+t.selectedIcon+'") no-repeat',o.style.backgroundSize=a.iconWidth+" "+a.iconHeight,o.style.backgroundPosition="center")}return a.selectedItem=t,f(t),u.forEach(function(t){t.selectItem(a.selectedItem)}),!1}}),a.cbs.forEach(function(t){t.call(a,n)})},e.getElementById("OT_clear").onclick=function(){u.forEach(function(t){t.clear()})}}},!this.externalWindow&&this.createPanel();var f=function(t){t.points||("OT_line"===t.id?a.selectedItem.points=[[0,0],[0,1]]:"OT_arrow"===t.id?a.selectedItem.points=[[0,1],[3,1],[3,0],[5,2],[3,4],[3,3],[0,3],[0,1]]:"OT_rect"===t.id?a.selectedItem.points=[[0,0],[1,0],[1,1],[0,1],[0,0]]:"OT_oval"===t.id&&(a.selectedItem.enableSmoothing=!0,a.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),u.push(t)},this.removeCanvas=function(t){u.forEach(function(e){var n=e.canvas();e.videoFeed.stream.connection.connectionId===t&&n.parentNode&&n.parentNode.removeChild(n)}),u=u.filter(function(e){return e.videoFeed.stream.connection.connectionId!==t})},this.remove=function(){try{h.parentNode.removeChild(h)}catch(t){console.log(t)}u.forEach(function(t){var e=t.canvas();e.parentNode&&e.parentNode.removeChild(e)}),u=[]}}}).call(this),function(){var t,e,n;"object"==typeof module&&"object"==typeof module.exports?(t=require("underscore"),e=require("jquery"),n=require("opentok-solutions-logging")):(t=this._,e=this.$,n=this.OTKAnalytics);var o,i,a,r,s,c={},l={clientVersion:"js-vsol-1.0.0",componentId:"annotationsAccPack",name:"guidAnnotationsKit",actionInitialize:"Init",actionStart:"Start",actionEnd:"End",actionFreeHand:"FreeHand",actionPickerColor:"PickerColor",actionText:"Text",actionScreenCapture:"ScreenCapture",actionErase:"Erase",actionUseToolbar:"UseToolbar",variationAttempt:"Attempt",variationError:"Failure",variationSuccess:"Success"},d=function(){var t=window.location.href,e={clientVersion:l.clientVersion,source:t,componentId:l.componentId,name:l.name};s=new n(e);var o={sessionId:a.id,connectionId:a.connection.connectionId,partnerId:a.apiKey};s.addSessionInfo(o)},h=function(t,e){var n={action:t,variation:e};s.logEvent(n)},u=function(t,e){i&&i.triggerEvent(t,e)},p=function(){if(i){var t=["startAnnotation","linkAnnotation","resizeCanvas","annotationWindowClosed","endAnnotation"];i.registerEvents(t)}},f=function(){var t=['<div id="annotationToolbarContainer" class="ots-annotation-toolbar-container">','<div id="toolbar"></div>',"</div>"].join("\n");e("body").append(t),h(l.actionUseToolbar,l.variationSuccess)},g=["#1abc9c","#2ecc71","#3498db","#9b59b6","#8e44ad","#f1c40f","#e67e22","#e74c3c","#ded5d5"],m=10/6,v=t.throttle(function(){r.onResize()},1e3),b=function(){var t,n;if(c.externalWindow){var o={width:c.externalWindow.innerWidth,height:c.externalWindow.innerHeight},i=o.width/m;i<=o.height?(t=o.width,n=i):(n=o.height,t=n*m)}else{var a=c.absoluteParent||c.canvasContainer;t=a.clientWidth,n=t/m,a.clientHeight<t/m&&(n=a.clientHeight,t=n*m)}e(c.canvasContainer).css({width:t,height:n}),e(c.canvasContainer).find("canvas").css({width:t,height:n}),e(c.canvasContainer).find("canvas").attr({width:t,height:n}),v(),u("resizeCanvas")},y=function(){e(c.resizeSubject).on("resize",t.throttle(function(){b()},500))},w=function(e,o,i){var a=t.property("toolbarId")(o)||"toolbar",r=t.property("toolbarItems")(o),s=t.property("colors")(o)||g,c=t.property("imageAssets")(o)||null,d=function(){var t=i?i:window;return t.document.getElementById(a)};toolbar=new OTSolution.Annotations.Toolbar({session:e,container:d(),colors:s,items:r&&r.length?o.items:null,externalWindow:i||null,imageAssets:c,OTKAnalytics:n}),toolbar.itemClicked(function(t){var e={OT_pen:l.actionFreeHand,OT_colors:l.actionPickerColor,OT_text:l.actionText,OT_clear:l.actionErase},n=e[t];n&&h(n,l.variationSuccess)})},I=function(){var t=e.Deferred(),n=.8*screen.width|0,o=n/m,i='<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>OpenTok Screen Sharing Solution Annotation</title><style type="text/css" media="screen"> body{margin: 0; background-color: rgba(0, 153, 203, 0.7); box-sizing: border-box; height: 100vh;}canvas{top: 0; z-index: 1000;}.hidden{display: none;}.main-wrap{width: 100%; height: 100%; -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center;}.inner-wrap{position: relative; border-radius: 8px; overflow: hidden;}.fixed-container{position: fixed; top: 275px; right: 0; width: 40px; z-index: 1001;}.fixed-container .toolbar-wrap{position: absolute; top: 0; left: 0;}.fixed-container .toolbar-wrap input{display: block; top: 0 !important; transform: none !important;}.fixed-container .toolbar-wrap .OT_color{width: 30px; margin-right: 5px !important; margin-left: 5px !important; padding: 0;}.fixed-container .toolbar-wrap .OT_subpanel, .fixed-container .toolbar-wrap .color-picker{position: absolute; top: 0; right: 40px; padding-left: 0 !important; overflow: hidden;}.fixed-container .toolbar-wrap .OT_subpanel> div{top: 0 !important; transform: none !important;}.fixed-container .toolbar-wrap .color-picker{left: -30px;}.fixed-container .toolbar-wrap .color-picker .color-choice{display: block !important; height: 20px !important; width: 20px !important;}.publisherContainer{display: block; background-color: #000000; position: absolute;}.publisher-wrap{height: 100%; width: 100%;}.subscriberContainer{position: absolute; top: 20px; left: 20px; width: 200px; height: 120px; background-color: #000000; border: 2px solid white; border-radius: 6px;}.subscriberContainer .OT_video-poster{width: 100%; height: 100%; opacity: .25; background-repeat: no-repeat; background-image: url(https://static.opentok.com/webrtc/v2.8.2/images/rtc/audioonly-silhouette.svg); background-size: 50%; background-position: center;}.OT_video-element{height: 100%; width: 100%;}.OT_edge-bar-item{display: none;}</style></head><body> <div class="main-wrap"> <div id="annotationContainer" class="inner-wrap"></div></div><div id="toolbarContainer" class="fixed-container"> <div id="toolbar" class="toolbar-wrap"></div></div><div id="subscriberVideo" class="subscriberContainer hidden"></div><script type="text/javascript" charset="utf-8"> /** Must use double-quotes since everything must be converted to a string */ var opener; var canvas; if (!toolbar){alert("Something went wrong: You must pass an OpenTok annotation toolbar object into the window.")}else{opener=window.opener; window.onbeforeunload=window.triggerCloseEvent;}var localScreenProperties={insertMode: "append", width: "100%", height: "100%", videoSource: "window", showControls: false, style:{buttonDisplayMode: "off"}, fitMode: "contain"}; var createContainerElements=function(){var parentDiv=document.getElementById("annotationContainer"); var publisherContainer=document.createElement("div"); publisherContainer.setAttribute("id", "screenshare_publisher"); publisherContainer.classList.add("publisher-wrap"); parentDiv.appendChild(publisherContainer); return{annotation: parentDiv, publisher: publisherContainer};}; var addSubscriberVideo=function(stream){var container=document.getElementById("subscriberVideo"); var subscriber=session.subscribe(stream, container, localScreenProperties, function(error){if (error){console.log("Failed to add subscriber video", error);}container.classList.remove("hidden");}); console.log("subscriber", subscriber); subscriber.subscribeToAudio(false);}; if (navigator.userAgent.indexOf("Firefox") !==-1){var ghost=window.open("about:blank"); ghost.focus(); ghost.close();}</script></body></html>',r=["toolbar=no","location=no","directories=no","status=no","menubar=no","scrollbars=no","resizable=no","copyhistory=no",["width=",n].join(""),["height=",o].join(""),["left=",screen.width/2-n/2].join(""),["top=",screen.height/2-o/2].join("")].join(","),s=window.open("about:blank","",r);s.document.write(i),window.onbeforeunload=function(){s.close()},s.toolbar=toolbar,s.OT=OT,s.session=a,s.$=e,s.triggerCloseEvent=function(){u("annotationWindowClosed")},s.onbeforeunload=function(){u("annotationWindowClosed")};var c=function(){s.createContainerElements?e(s.document).ready(function(){t.resolve(s)}):setTimeout(c,100)};return c(),t.promise()},x=function(){e(c.resizeSubject).off("resize",b),toolbar.remove(),c.externalWindow||e("#annotationToolbarContainer").remove()},T=function(n,o){var i=e.Deferred();return t.property("screensharing")(o)?I().then(function(t){w(n,o,t),toolbar.createPanel(t),u("startAnnotation",t),h(l.actionStart,l.variationSuccess),i.resolve(t)}):(w(n,o),u("startAnnotation"),h(l.actionStart,l.variationSuccess),i.resolve()),i.promise()},W=function(n,i,a){c.resizeSubject=t.property("externalWindow")(a)||window,c.externalWindow=t.property("externalWindow")(a)||null, | ||
| c.absoluteParent=t.property("absoluteParent")(a)||null,c.canvasContainer=i,r=new OTSolution.Annotations({feed:n,container:i,externalWindow:c.externalWindow}),toolbar.addCanvas(r);var s=o.options.onScreenCapture?o.options.onScreenCapture:function(t){var e=window.open(t,"_blank");e.focus()};r.onScreenCapture(s);var l=c.externalWindow?c.externalWindow:window;c.canvas=e(t.first(l.document.getElementsByTagName("canvas"))),y(),b(),u("linkAnnotation")},k=function(){b()},C=function(t){c.externalWindow?c.externalWindow.addSubscriberVideo(t):console.log("OT Annotation: External window does not exist. Cannot add subscriber video.")},M=function(){x(),c.canvas=null,c.externalWindow&&(c.externalWindow.close(),c.externalWindow=null,c.resizeSubject=null),u("endAnnotation"),h(l.actionEnd,l.variationSuccess)},P=function(e){if(o=this,o.options=t.omit(e,"accPack","session"),i=t.property("accPack")(e),a=t.property("session")(e),!a)throw new Error("OpenTok Annotation Accelerator Pack requires an OpenTok session");p(),d(),h(l.actionInitialize,l.variationSuccess),f()};P.prototype={constructor:P,start:T,linkCanvas:W,resizeCanvas:k,addSubscriberToExternalWindow:C,end:M},"object"==typeof exports?module.exports=P:"function"==typeof define&&define.amd?define(function(){return P}):this.AnnotationAccPack=P}.call(this); | ||
| (function(){var t,e,n,o={clientVersion:"js-vsol-1.0.0",componentId:"annotationsAccPack",name:"guidAnnotationsKit",actionStartDrawing:"StartDrawing",actionEndDrawing:"EndDrawing",variationSuccess:"Success"},i=function(){var i=window.location.href,a={clientVersion:o.clientVersion,source:i,componentId:o.componentId,name:o.name};e=new t(a);var s={sessionId:n.id,connectionId:n.connection.connectionId,partnerId:n.apiKey};e.addSessionInfo(s)},a=function(t,n){var o={action:t,variation:n};e.logEvent(o)},s="https://assets.tokbox.com/solutions/images/";OTSolution=this.OTSolution||{},OTSolution.Annotations=function(n){function r(t,e,n){for(var o=e.split(" "),i=0,a=o.length;i<a;i++)t.addEventListener(o[i],n,!0)}function c(t,e){0===u.width&&(u.width=h.parent.getBoundingClientRect().width),0===u.height&&(u.height=h.parent.getBoundingClientRect().height);var n,i=e?t.canvas.width:h.parent.clientWidth,s=e?t.canvas.height:h.parent.clientHeight,r=e?t.canvas.offsetLeft:u.offsetLeft,c=e?t.canvas.offsetTop:u.offsetTop,l=u.width/i,d=u.height/s,p=t.offsetX||t.pageX-r||t.changedTouches&&t.changedTouches[0].pageX-r,f=t.offsetY||t.pageY-c||t.changedTouches&&t.changedTouches[0].pageY-c,g=p*l,v=f*d,b=e?t.selectedItem:h.selectedItem;if(b)if("OT_pen"===b.id)switch(t.type){case"mousedown":case"touchstart":T.dragging=!0,T.lastX=g,T.lastY=v,h.isStartPoint=!0,!e&&a(o.actionStartDrawing,o.variationSuccess);break;case"mousemove":case"touchmove":T.dragging&&(n={id:h.videoFeed.stream.connection.connectionId,fromId:h.session.connection.connectionId,fromX:T.lastX,fromY:T.lastY,toX:g,toY:v,color:e?t.userColor:h.userColor,lineWidth:h.lineWidth,videoWidth:h.videoFeed.videoElement().clientWidth,videoHeight:h.videoFeed.videoElement().clientHeight,canvasWidth:u.width,canvasHeight:u.height,mirrored:m,startPoint:h.isStartPoint,endPoint:!1,selectedItem:b,guid:t.guid},k(n,!0),T.lastX=g,T.lastY=v,!e&&B(n),h.isStartPoint=!1);break;case"mouseup":case"touchend":T.dragging=!1,n={id:h.videoFeed.stream.connection.connectionId,fromId:h.session.connection.connectionId,fromX:T.lastX,fromY:T.lastY,toX:g,toY:v,color:e?t.userColor:h.userColor,lineWidth:h.lineWidth,videoWidth:h.videoFeed.videoElement().clientWidth,videoHeight:h.videoFeed.videoElement().clientHeight,canvasWidth:u.width,canvasHeight:u.height,mirrored:m,startPoint:h.isStartPoint,endPoint:!0,selectedItem:b,guid:t.guid},k(n,!0),T.lastX=g,T.lastY=v,!e&&B(n),h.isStartPoint=!1,!e&&a(o.actionEndDrawing,o.variationSuccess);break;case"mouseout":T.dragging=!1}else if("OT_text"===b.id)n={id:h.videoFeed.stream.connection.connectionId,fromId:h.session.connection.connectionId,fromX:g,fromY:v+t.inputHeight,color:t.userColor,font:t.font,text:t.text,videoWidth:h.videoFeed.videoElement().clientWidth,videoHeight:h.videoFeed.videoElement().clientHeight,canvasWidth:u.width,canvasHeight:u.height,mirrored:m,selectedItem:b,guid:t.guid},k(n),!e&&B(n);else{var w=2;if(b&&b.points)switch(T.mX=g,T.mY=v,t.type){case"mousedown":case"touchstart":T.isDrawing=!0,T.dragging=!0,T.startX=g,T.startY=v;break;case"mousemove":case"touchmove":T.dragging&&(n={color:e?t.userColor:h.userColor,lineWidth:e?t.lineWidth:w,selectedItem:b},k(n,!0));break;case"mouseup":case"touchend":T.isDrawing=!1;var x=b.points;if(2===x.length)n={id:h.videoFeed.stream.connection.connectionId,fromId:h.session.connection.connectionId,fromX:T.startX,fromY:T.startY,toX:T.mX,toY:T.mY,color:e?t.userColor:h.userColor,lineWidth:e?t.lineWidth:w,videoWidth:h.videoFeed.videoElement().clientWidth,videoHeight:h.videoFeed.videoElement().clientHeight,canvasWidth:u.width,canvasHeight:u.height,mirrored:m,smoothed:!1,startPoint:!0,selectedItem:b,guid:t.guid},I.push(n),!e&&B(n);else{for(var y=Y(x),M=0;M<x.length;M++){var C=!1,P=!1,O=T.startX+y.x*x[M][0],_=T.startY+y.y*x[M][1];0===M?(T.lastX=O,T.lastY=_,C=!0):M===x.length-1&&(P=!0),n={id:h.videoFeed.stream.connection.connectionId,fromId:h.session.connection.connectionId,fromX:T.lastX,fromY:T.lastY,toX:O,toY:_,color:e?t.userColor:h.userColor,lineWidth:e?t.lineWidth:w,videoWidth:h.videoFeed.videoElement().clientWidth,videoHeight:h.videoFeed.videoElement().clientHeight,canvasWidth:u.width,canvasHeight:u.height,mirrored:m,smoothed:b.enableSmoothing,startPoint:C,endPoint:P,guid:t.guid},I.push(n),!e&&B(n),T.lastX=O,T.lastY=_}k(null)}T.dragging=!1}}}function l(){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)})}n=n||{},this.widgetVersion="js-1.0.0-beta",this.parent=n.container,this.videoFeed=n.feed,this.imageAssets=n.imageAssets||s,t=t||n.OTKAnalytics,e||i();var d=n.externalWindow?n.externalWindow.document:window.document,h=this;if(this.parent){var u=document.createElement("canvas");u.setAttribute("id","opentok_canvas"),u.style.position="absolute",this.parent.appendChild(u),u.setAttribute("width",this.parent.clientWidth+"px"),u.style.width=window.getComputedStyle(this.parent).width,u.setAttribute("height",this.parent.clientHeight+"px"),u.style.height=window.getComputedStyle(this.parent).height}var p,f,m,g,v,h=this,b=[],w=[],I=[],x=[],y=[],T={dragging:!1};f=(" "+h.videoFeed.element.className+" ").indexOf(" OT_publisher ")>-1,m=!!f&&(" "+h.videoFeed.element.className+" ").indexOf(" OT_mirrored ")>-1,g=(" "+h.videoFeed.element.className+" ").indexOf(" OT_fit-mode-cover ")>-1,this.canvas=function(){return u},this.link=function(t){this.session=t},this.changeColor=function(t){h.userColor=t,h.lineWidth||(h.lineWidth=2)},this.changeLineWidth=function(t){this.lineWidth=t},this.selectItem=function(t){h.overlay&&(h.parent.removeChild(h.overlay),h.overlay=null),"OT_capture"===t.id?h.captureScreenshot():t.id.indexOf("OT_line_width")!==-1?t.size&&h.changeLineWidth(t.size):h.selectedItem=t},this.colors=function(t){this.colors=t,this.changeColor(t[0])},this.clear=function(){L(!1,h.session.connection.connectionId),h.session&&h.session.signal({type:"otAnnotation_clear"})},this.undo=function(){H(!1,h.session.connection.connectionId),h.session&&h.session.signal({type:"otAnnotation_undo"})},this.captureScreenshot=function(){var t=document.createElement("canvas");t.width=u.width,t.height=u.height;var e=h.videoFeed.videoWidth(),n=h.videoFeed.videoHeight(),o=1,i=0,a=0;g?e<n?(o=u.width/e,e=u.width,n*=o):(o=u.height/n,n=u.height,e*=o):e>n?(o=u.width/e,e=u.width,n*=o):(o=u.height/n,n=u.height,e*=o),i=(e-u.width)/2,a=(n-u.height)/2;var s=new Image;s.onload=function(){var o=t.getContext("2d");m&&(o.translate(e,0),o.scale(-1,1)),o.drawImage(s,i,a,e,n),m&&(o.translate(e,0),o.scale(-1,1)),o.drawImage(u,0,0),b.forEach(function(e){e.call(h,t.toDataURL())}),t=null},s.src="data:image/png;base64,"+h.videoFeed.getImgData()},this.onScreenCapture=function(t){b.push(t)},this.onResize=function(){I=[],F(x,!0),y.forEach(function(t){c(t,!0)})},r(u,"mousedown mousemove mouseup mouseout touchstart touchmove touchend",function(t){var e=h.selectedItem&&"OT_text"===h.selectedItem.id,n="mousemove"===t.type&&!T.dragging;e||n||(t.preventDefault(),t.selectedItem=h.selectedItem,t.selectedItem&&(t.canvas={width:u.width,height:u.height,offsetLeft:u.offsetLeft,offsetTop:u.offsetTop},t.userColor=h.userColor,t.lineWidth=h.lineWidth,t.guid=l(),y.push(t)),c(t))});var M,C="textAnnotation",P=!1,O=function(t){t.preventDefault(),h.selectedItem&&"OT_text"===h.selectedItem.id&&!P&&(P=!0,t.selectedItem=h.selectedItem,S(t))},_=function(t){13===t.which&&W(),27===t.which&&(d.getElementById(C).remove(),M=null),P=!1},A=function(){d.addEventListener("keydown",_)},E=function(){d.removeEventListener("keydown",_)},W=function(){var t=d.getElementById(C);t.clientHeight;return t.value?(t.remove(),E(),M.text=t.value,M.font="16px Arial",M.userColor=h.userColor,M.canvas={width:u.width,height:u.height,offsetLeft:u.offsetLeft,offsetTop:u.offsetTop},y.push(M),void c(M)):void(M=null)},S=function(t){var e=d.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=h.userColor,e.style.fontFamily="Arial",e.style.zIndex="1001",e.setAttribute("data-canvas-origin",JSON.stringify({x:t.offsetX,y:t.offsetY})),e.id=C,d.body.appendChild(e),e.focus(),M=t,M.inputHeight=e.clientHeight,A()};r(u,"click",O);var k=function(t,e){p||(p=u.getContext("2d"),p.lineCap="round",p.lineJoin="round",p.fillStyle="solid"),p.clearRect(0,0,u.width,u.height),I.forEach(function(t){p.strokeStyle=t.color,p.lineWidth=t.lineWidth,t.smoothed=!!t.smoothed,t.startPoint=!!t.startPoint;var e=!1,n=!!t.selectedItem&&"Text"===t.selectedItem.title&&t.text;n?(p.font=t.font,p.fillStyle=t.color,p.fillText(t.text,t.fromX,t.fromY)):t.smoothed?(t.startPoint?h.isStartPoint=!0:h.isStartPoint&&(e=!0,h.isStartPoint=!1),t.startPoint?(p.closePath(),p.beginPath()):e?p.moveTo((t.fromX+t.toX)/2,(t.fromY+t.toY)/2):(p.quadraticCurveTo(t.fromX,t.fromY,(t.fromX+t.toX)/2,(t.fromY+t.toY)/2),p.stroke())):(p.beginPath(),p.moveTo(t.fromX,t.fromY),p.lineTo(t.toX,t.toY),p.stroke(),p.closePath())});var n=e?t.selectedItem:h.selectedItem;!n||"Pen"!==n.title&&"Text"!==n.title?T.isDrawing&&(t&&(p.strokeStyle=t.color,p.lineWidth=t.lineWidth),n&&n.points&&X(p,h.selectedItem.points)):t&&("Pen"===n.title&&(p.strokeStyle=t.color,p.lineWidth=t.lineWidth,p.beginPath(),p.moveTo(t.fromX,t.fromY),p.lineTo(t.toX,t.toY),p.stroke(),p.closePath()),"Text"===n.title&&(p.font=t.font,p.fillStyle=t.color,p.fillText(t.text,t.fromX,t.fromY)),I.push(t))},X=function(t,e){var n=Y(e);if(t.beginPath(),2===e.length)t.moveTo(T.startX,T.startY),t.lineTo(T.mX,T.mY);else for(var o=0;o<e.length;o++){var i=T.startX+n.x*e[o][0],a=T.startY+n.y*e[o][1];h.selectedItem.enableSmoothing?0===o||(1===o?(t.moveTo((i+T.lastX)/2,(a+T.lastY)/2),T.lastX=(i+T.lastX)/2,T.lastX=(a+T.lastY)/2):(t.quadraticCurveTo(T.lastX,T.lastY,(i+T.lastX)/2,(a+T.lastY)/2),T.lastX=(i+T.lastX)/2,T.lastY=(a+T.lastY)/2)):0===o?t.moveTo(i,a):t.lineTo(i,a),T.lastX=i,T.lastY=a}t.stroke(),t.closePath()},Y=function(t){for(var e=Number.MAX_VALUE,n=Number.MAX_VALUE,o=0,i=0,a=0;a<t.length;a++)t[a][0]<e?e=t[a][0]:t[a][0]>o&&(o=t[a][0]),t[a][1]<n?n=t[a][1]:t[a][1]>i&&(i=t[a][1]);var s=Math.abs(o-e),r=Math.abs(i-n),c=(T.mX-T.startX)/s,l=(T.mY-T.startY)/r;return{x:c,y:l}},j=function(t,e,n){var o={width:t.canvasWidth,height:t.canvasHeight},i={width:t.videoWidth,height:t.videoHeight},a={width:h.videoFeed.videoElement().clientWidth,height:h.videoFeed.videoElement().clientHeight},s=1,r=u.width/u.height;a.width/a.height,o.width/o.height,i.width/i.height;s=r<0?u.width/o.width:u.height/o.height;var c=u.width/2,l=u.height/2,d=o.width/2,p=o.height/2;t.fromX=c-s*(d-t.fromX),t.fromY=l-s*(p-t.fromY),t.toX=c-s*(d-t.toX),t.toY=l-s*(p-t.toY),t.mirrored=!!t.mirrored,t.mirrored&&(t.fromX=u.width-t.fromX,t.toX=u.width-t.toX),m&&(t.fromX=u.width-t.fromX,t.toX=u.width-t.toX);var f=JSON.parse(JSON.stringify(t));f.canvasWidth=u.width,f.canvasHeight=u.height,f.videoWidth=a.width,f.videoHeight=a.height,e?x[n]=f:x.push(f),I.push(t),console.log(I),k(null)},F=function(t,e){t.forEach(function(t,n){h.videoFeed.stream&&t.id===h.videoFeed.stream.connection.connectionId&&j(t,e,n)})},L=function(t,e){I=I.filter(function(t){return t.fromId!==e}),t?x=[]:(h.session&&h.session.signal({type:"otAnnotation_clear"}),y=[]),k()},H=function(t,e,n){for(var o,i,a=!1,s=[],r=I.length-1;r>=0&&(o=I[r],o.fromId!==e||(a=a||o.endPoint,i=I.splice(r,1)[0],s.push(i.guid),a&&(!a||i.startPoint!==!0)));r--);t?x=x.filter(function(t){return!n.includes(t.guid)}):(y=y.filter(function(t){return!s.includes(t.guid)}),h.session.signal({type:"otAnnotation_undo",data:JSON.stringify(s)})),k()},z=0;h.videoFeed.session&&h.videoFeed.session.on({"signal:otAnnotation_pen":function(t){console.log("signal here",z++),t.from.connectionId!==h.session.connection.connectionId&&F(JSON.parse(t.data))},"signal:otAnnotation_text":function(t){console.log("signal here",z++),t.from.connectionId!==h.session.connection.connectionId&&F(JSON.parse(t.data))},"signal:otAnnotation_history":function(t){v&&v!==t.from.connectionId||(v=t.from.connectionId,F(JSON.parse(t.data)))},"signal:otAnnotation_clear":function(t){t.from.connectionId!==h.session.connection.connectionId&&L(!0,t.from.connectionId)},"signal:otAnnotation_undo":function(t){t.from.connectionId!==h.session.connection.connectionId&&H(!0,t.from.connectionId,JSON.parse(t.data))},connectionCreated:function(t){I.length>0&&t.connection.connectionId!==h.session.connection.connectionId&&D("otWhiteboard_history",I,t.connection)}});var N,D=function(t,e){for(var n=t.slice(),o=function(t){t&&TB.error(t)},i="otAnnotation_pen",a=function(t){if(t&&t[0]&&t[0].selectedItem&&t[0].selectedItem.id){var e=t[0].selectedItem.id;i="OT_text"===e?"otAnnotation_text":"otAnnotation_pen"}};n.length;){var s=n.splice(0,Math.min(n.length,32));a(s);var r={type:i,data:JSON.stringify(s)};e&&(r.to=e),console.log("TO?",r),h.session.signal(r,o)}},B=function(t){h.session&&(w.push(t),N||(N=setTimeout(function(){D(w),w=[],N=null},100)))}},OTSolution.Annotations.Toolbar=function(o){var a=this,r=this;if(o||(o={}),!o.session)throw new Error("OpenTok Annotation Widget requires an OpenTok session");if(n=o.session,!t&&!o.OTKAnalytics)throw new Error("OpenTok Annotation Widget requires an OpenTok Solution");t=t||o.OTKAnalytics,e||i(),this.session=o.session,this.parent=o.container,this.externalWindow=o.externalWindow,this.backgroundColor=o.backgroundColor||"rgba(102, 102, 102, 0.90)",this.subpanelBackgroundColor=o.subpanelBackgroundColor||"#323232";var c=o.imageAssets||s,l=[{id:"OT_pen",title:"Pen",icon:[c,"annotation-pencil.png"].join(""),selectedIcon:[c,"annotation-pencil.png"].join(""),items:{}},{id:"OT_colors",title:"Colors",icon:"",items:{}},{id:"OT_shapes",title:"Shapes",icon:[c,"annotation-shapes.png"].join(""),items:[{id:"OT_rect",title:"Rectangle",icon:[c,"annotation-rectangle.png"].join(""),points:[[0,0],[1,0],[1,1],[0,1],[0,0]]},{id:"OT_rect_fill",title:"Rectangle-Fill",icon:[c,"annotation-rectangle.png"].join(""),points:[[0,0],[1,0],[1,1],[0,1],[0,0]]},{id:"OT_oval",title:"Oval",icon:[c,"annotation-oval.png"].join(""),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_oval_fill",title:"Oval-Fill",icon:[c,"annotation-oval-fill.png"].join(""),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_star",title:"Star",icon:[c,"annotation-star.png"].join(""),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_arrow",title:"Arrow",icon:[c,"annotation-arrow.png"].join(""),points:[[0,1],[3,1],[3,0],[5,2],[3,4],[3,3],[0,3],[0,1]]},{id:"OT_line",title:"Line",icon:[c,"annotation-line.png"].join(""),selectedIcon:[c,"annotation-line.png"].join(""),points:[[0,0],[0,1]]}]},{id:"OT_text",title:"Text",icon:[c,"annotation-text.png"].join(""),selectedIcon:[c,"annotation-text.png"].join("")},{id:"OT_clear",title:"Clear",icon:[c,"annotation-clear.png"].join("")},{id:"OT_undo",title:"Undo",icon:[c,"annotation-undo.png"].join("")},{id:"OT_capture",title:"Capture",icon:[c,"annotation-camera.png"].join(""),selectedIcon:[c,"annotation-camera.png"].join("")}],d=function(){var t=["pen","colors","shapes","text","clear","undo","capture"],e=["rectangle","rectangle-fill","oval","oval-fill","star","arrow","line"],n=function(n,i){var a=t.indexOf(i);if(a!==-1){var s=l[a];if("Shapes"===s.title&&o.shapes){var r=o.shapes.reduce(function(t,n){var o=e.indexOf(n);return o!==-1?t.concat(s.items[o]):t},[]);s.items=r}n.push(s)}return n};if(o.items&&o.items.length){var i="*"===o.items[0]?t:o.items;return i.reduce(n,[])}return l};this.items=d(),this.colors=o.colors||["#1abc9c","#2ecc71","#3498db","#9b59b6","#34495e","#16a085","#27ae60","#2980b9","#8e44ad","#2c3e50","#f1c40f","#e67e22","#e74c3c","#ecf0f1","#95a5a6","#f39c12","#d35400","#c0392b","#bdc3c7","#7f8c8d"],this.cbs=[];var h,u=[],p=function(t,e,n){var o=this,i=r.externalWindow?r.externalWindow.document:document;this.getElm=function(t){return"string"==typeof t?i.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.classList.add("ots-hidden")},this.open=function(){this.elm.classList.remove("ots-hidden")},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)})},n=n||{},n.openEvent=n.openEvent||"click",n.style=Object(n.style),n.template=n.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=n,o.render(),o.elm.addEventListener("click",function(t){var e=t.target.getAttribute("data-col");if(e){var n=Array.from(document.getElementsByClassName("color-choice"));n.forEach(function(t){t.classList.remove("active")}),t.target.classList.add("active"),o.set(e),o.close()}}),n.autoclose!==!1&&o.close()};this.createPanel=function(t){if(r.parent){var e=t?t.document:document;h=e.createElement("div"),h.setAttribute("id","OT_toolbar"),h.setAttribute("class","OT_panel"),h.style.width="100%",h.style.height="100%",this.parent.appendChild(h),this.parent.style.position="relative",this.parent.zIndex=1e3;for(var n=[],o=e.createElement("div"),i=0,s=this.items.length;i<s;i++){var c=this.items[i],l=e.createElement("input");if(l.setAttribute("type","button"),l.setAttribute("id",c.id),l.classList.add("annotation-btn"),l.classList.add(c.title.split(" ").join("-").toLowerCase()),"OT_colors"===c.id){var d=e.createElement("div");d.setAttribute("class","color-picker"),this.parent.appendChild(d);var m=new p(".color-picker",this.colors,{externalWindow:r.externalWindow});m.colorChosen(function(t){var n=e.getElementById("OT_colors");n.style.backgroundColor=t,u.forEach(function(e){e.changeColor(t)})});var g=e.querySelectorAll(".color-choice");g[0].classList.add("active"),l.setAttribute("class","OT_color annotation-btn colors"),l.style.borderRadius="50%",l.style.backgroundColor=this.colors[0]}"Pen"!==c.title||Array.isArray(c.items)||(c.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}]),c.items&&l.setAttribute("data-type","group"),l.setAttribute("data-col",c.title),n.push(l.outerHTML)}h.innerHTML=n.join(""),h.onclick=function(t){var n="group"===t.target.getAttribute("data-type"),i=t.target.getAttribute("data-col"),s=t.target.getAttribute("id");n?a.items.forEach(function(t){if(t.title===i){if(a.selectedGroup=t,t.items&&(o.setAttribute("class",["OT_subpanel","ots-hidden",t.title.toLowerCase()].join(" ")),a.parent.appendChild(o),Array.isArray(t.items))){var n=[];"OT_pen"===t.id?t.items.forEach(function(t){var o=e.createElement("div");o.setAttribute("data-col",t.title),o.setAttribute("class",["line-width-option",t.size].join(" ")),o.setAttribute("id",t.id);var i=e.createElement("div");i.setAttribute("class","line-width-icon"),i.style.backgroundColor="#FFFFFF",i.style.width="80%",i.style.height=t.size+"px",i.style.position="relative",i.style.left="50%",i.style.top="50%",i.style.transform="translateX(-50%) translateY(-50%)",i.style.pointerEvents="none",o.appendChild(i),n.push(o.outerHTML)}):t.items.forEach(function(t){var o=e.createElement("input");o.setAttribute("type","button"),o.setAttribute("data-col",t.title),o.setAttribute("id",t.id),o.setAttribute("class",["annotation-btn",t.title.toLowerCase()].join(" ")),n.push(o.outerHTML)}),o.innerHTML=n.join("")}"OT_shapes"===s||"OT_pen"===s?(o&&o.classList.remove("ots-hidden"),m.close()):"OT_colors"===s&&(o&&o.classList.add("ots-hidden"),m.open())}}):(a.items.forEach(function(t){if(("Clear"!==t.title||"Undo"!==t.title)&&t.title===i)return a.selectedItem=t,f(t),u.forEach(function(t){t.selectItem(a.selectedItem)}),!1}),o.classList.add("ots-hidden")),a.cbs.forEach(function(t){t.call(a,s)})},o.onclick=function(t){var e="group"===t.target.getAttribute("data-type"),n=(t.target.getAttribute("data-col"),t.target.getAttribute("id"));n&&"linewidth"===n.replace(/[^a-z]/g,"")&&u.forEach(function(t){t.selectItem(a.selectedGroup)}),o.classList.add("ots-hidden"),e||a.selectedGroup.items.forEach(function(t){if("OT_clear"!==t.id&&t.id===n){if(a.selectedItem)var e=document.getElementById(a.selectedItem.id);if(t.selectedIcon){var o=document.getElementById(t.id);e&&(o.style.background='url("'+t.selectedIcon+'") no-repeat',o.style.backgroundSize=a.iconWidth+" "+a.iconHeight,o.style.backgroundPosition="center")}return a.selectedItem=t,f(t),u.forEach(function(t){t.selectItem(a.selectedItem)}),!1}}),a.cbs.forEach(function(t){t.call(a,n)})},e.getElementById("OT_clear").onclick=function(){u.forEach(function(t){t.clear()})},e.getElementById("OT_undo").onclick=function(){u.forEach(function(t){t.undo()})}}},!this.externalWindow&&this.createPanel();var f=function(t){t.points||("OT_line"===t.id?a.selectedItem.points=[[0,0],[0,1]]:"OT_arrow"===t.id?a.selectedItem.points=[[0,1],[3,1],[3,0],[5,2],[3,4],[3,3],[0,3],[0,1]]:"OT_rect"===t.id?a.selectedItem.points=[[0,0],[1,0],[1,1],[0,1],[0,0]]:"OT_oval"===t.id&&(a.selectedItem.enableSmoothing=!0,a.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),u.push(t),u.forEach(function(t){t.selectedItem=t.selectedItem||e.items[0]})},this.removeCanvas=function(t){u.forEach(function(e){var n=e.canvas();e.videoFeed.stream.connection.connectionId===t&&n.parentNode&&n.parentNode.removeChild(n)}),u=u.filter(function(e){return e.videoFeed.stream.connection.connectionId!==t})},this.remove=function(){try{h.parentNode.removeChild(h)}catch(t){console.log(t)}u.forEach(function(t){var e=t.canvas();e.parentNode&&e.parentNode.removeChild(e)}),u=[]}}}).call(this),function(){var t,e,n;"object"==typeof module&&"object"==typeof module.exports?(t=require("underscore"),e=require("jquery"),n=require("opentok-solutions-logging")):(t=this._,e=this.$,n=this.OTKAnalytics);var o,i,a,s,r,c={},l={clientVersion:"js-vsol-1.0.0",componentId:"annotationsAccPack",name:"guidAnnotationsKit",actionInitialize:"Init",actionStart:"Start",actionEnd:"End",actionFreeHand:"FreeHand",actionPickerColor:"PickerColor",actionText:"Text",actionScreenCapture:"ScreenCapture",actionErase:"Erase",actionUseToolbar:"UseToolbar",variationAttempt:"Attempt",variationError:"Failure",variationSuccess:"Success"},d=function(){var t=window.location.href,e={clientVersion:l.clientVersion,source:t,componentId:l.componentId,name:l.name};r=new n(e);var o={sessionId:a.id,connectionId:a.connection.connectionId,partnerId:a.apiKey};r.addSessionInfo(o)},h=function(t,e){var n={action:t,variation:e};r.logEvent(n)},u=function(t,e){i&&i.triggerEvent(t,e)},p=function(){if(i){var t=["startAnnotation","linkAnnotation","resizeCanvas","annotationWindowClosed","endAnnotation"];i.registerEvents(t)}},f=function(){var t=['<div id="annotationToolbarContainer" class="ots-annotation-toolbar-container">','<div id="toolbar"></div>',"</div>"].join("\n");e("body").append(t),h(l.actionUseToolbar,l.variationSuccess)},m=["#1abc9c","#2ecc71","#3498db","#9b59b6","#8e44ad","#f1c40f","#e67e22","#e74c3c","#ded5d5"],g=10/6,v=t.throttle(function(){s.onResize()},1e3),b=function(){var t,n;if(c.externalWindow){var o={width:c.externalWindow.innerWidth,height:c.externalWindow.innerHeight},i=o.width/g;i<=o.height?(t=o.width,n=i):(n=o.height,t=n*g)}else{var a=c.absoluteParent||c.canvasContainer;t=a.clientWidth,n=t/g,a.clientHeight<t/g&&(n=a.clientHeight,t=n*g)}e(c.canvasContainer).css({width:t,height:n}),e(c.canvasContainer).find("canvas").css({width:t,height:n}),e(c.canvasContainer).find("canvas").attr({width:t,height:n}),v(),u("resizeCanvas")},w=function(){e(c.resizeSubject).on("resize",t.throttle(function(){b()},500))},I=function(e,o,i){var a=t.property("toolbarId")(o)||"toolbar",s=t.property("toolbarItems")(o)||[],r=t.property("toolbarShapes")(o)||[],c=t.property("colors")(o)||m,d=t.property("imageAssets")(o)||null,u=function(){var t=i?i:window;return t.document.getElementById(a)};toolbar=new OTSolution.Annotations.Toolbar({session:e,container:u(),colors:c,items:s.length?s:["*"],shapes:r.length?r:["rectangle","oval","star","line"],externalWindow:i||null,imageAssets:d,OTKAnalytics:n}),toolbar.itemClicked(function(t){var e={OT_pen:l.actionFreeHand,OT_colors:l.actionPickerColor,OT_text:l.actionText,OT_clear:l.actionErase},n=e[t];n&&h(n,l.variationSuccess)})},x=function(){var t=e.Deferred(),n=.8*screen.width|0,o=n/g,i='<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>OpenTok Screen Sharing Solution Annotation</title><style type="text/css" media="screen"> body{margin: 0; background-color: rgba(0, 153, 203, 0.7); box-sizing: border-box; height: 100vh;}canvas{top: 0; z-index: 1000;}.hidden{display: none;}.main-wrap{width: 100%; height: 100%; -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center;}.inner-wrap{position: relative; border-radius: 8px; overflow: hidden;}.fixed-container{position: fixed; top: 275px; right: 0; width: 40px; z-index: 1001;}.fixed-container .toolbar-wrap{position: absolute; top: 0; left: 0;}.fixed-container .toolbar-wrap input{display: block; top: 0 !important; transform: none !important;}.fixed-container .toolbar-wrap .OT_color{width: 30px; margin-right: 5px !important; margin-left: 5px !important; padding: 0;}.fixed-container .toolbar-wrap .OT_subpanel, .fixed-container .toolbar-wrap .color-picker{position: absolute; top: 0; right: 40px; padding-left: 0 !important; overflow: hidden;}.fixed-container .toolbar-wrap .OT_subpanel> div{top: 0 !important; transform: none !important;}.fixed-container .toolbar-wrap .color-picker{left: -30px;}.fixed-container .toolbar-wrap .color-picker .color-choice{display: block !important; height: 20px !important; width: 20px !important;}.publisherContainer{display: block; background-color: #000000; position: absolute;}.publisher-wrap{height: 100%; width: 100%;}.subscriberContainer{position: absolute; top: 20px; left: 20px; width: 200px; height: 120px; background-color: #000000; border: 2px solid white; border-radius: 6px;}.subscriberContainer .OT_video-poster{width: 100%; height: 100%; opacity: .25; background-repeat: no-repeat; background-image: url(https://static.opentok.com/webrtc/v2.8.2/images/rtc/audioonly-silhouette.svg); background-size: 50%; background-position: center;}.OT_video-element{height: 100%; width: 100%;}.OT_edge-bar-item{display: none;}</style></head><body> <div class="main-wrap"> <div id="annotationContainer" class="inner-wrap"></div></div><div id="toolbarContainer" class="fixed-container"> <div id="toolbar" class="toolbar-wrap"></div></div><div id="subscriberVideo" class="subscriberContainer hidden"></div><script type="text/javascript" charset="utf-8"> /** Must use double-quotes since everything must be converted to a string */ var opener; var canvas; if (!toolbar){alert("Something went wrong: You must pass an OpenTok annotation toolbar object into the window.")}else{opener=window.opener; window.onbeforeunload=window.triggerCloseEvent;}var localScreenProperties={insertMode: "append", width: "100%", height: "100%", videoSource: "window", showControls: false, style:{buttonDisplayMode: "off"}, subscribeToVideo: "true", subscribeToAudio: "false", fitMode: "contain"}; var createContainerElements=function(){var parentDiv=document.getElementById("annotationContainer"); var publisherContainer=document.createElement("div"); publisherContainer.setAttribute("id", "screenshare_publisher"); publisherContainer.classList.add("publisher-wrap"); parentDiv.appendChild(publisherContainer); return{annotation: parentDiv, publisher: publisherContainer};}; var addSubscriberVideo=function(stream){var container=document.getElementById("subscriberVideo"); var subscriber=session.subscribe(stream, container, localScreenProperties, function(error){if (error){console.log("Failed to add subscriber video", error);}container.classList.remove("hidden");});}; if (navigator.userAgent.indexOf("Firefox") !==-1){var ghost=window.open("about:blank"); ghost.focus(); ghost.close();}</script></body></html>',s=["toolbar=no","location=no","directories=no","status=no","menubar=no","scrollbars=no","resizable=no","copyhistory=no",["width=",n].join(""),["height=",o].join(""),["left=",screen.width/2-n/2].join(""),["top=",screen.height/2-o/2].join("")].join(","),r=window.open("about:blank","",s);r.document.write(i),window.onbeforeunload=function(){r.close()},r.toolbar=toolbar,r.OT=OT,r.session=a,r.$=e,r.triggerCloseEvent=function(){u("annotationWindowClosed")},r.onbeforeunload=function(){u("annotationWindowClosed")};var c=function(){r.createContainerElements?e(r.document).ready(function(){t.resolve(r)}):setTimeout(c,100)};return c(),t.promise()},y=function(){e(c.resizeSubject).off("resize",b),toolbar.remove(),c.externalWindow||e("#annotationToolbarContainer").remove()},T=function(n,o){var i=e.Deferred();return t.property("screensharing")(o)?x().then(function(t){I(n,o,t),toolbar.createPanel(t),u("startAnnotation",t),h(l.actionStart,l.variationSuccess),i.resolve(t)}):(I(n,o),u("startAnnotation"),h(l.actionStart,l.variationSuccess),i.resolve()),i.promise()},M=function(n,i,a){c.resizeSubject=t.property("externalWindow")(a)||window,c.externalWindow=t.property("externalWindow")(a)||null,c.absoluteParent=t.property("absoluteParent")(a)||null,c.canvasContainer=i,s=new OTSolution.Annotations({feed:n,container:i,externalWindow:c.externalWindow}),toolbar.addCanvas(s);var r=o.options.onScreenCapture?o.options.onScreenCapture:function(t){var e=window.open(t,"_blank");e.focus()};s.onScreenCapture(r);var l=c.externalWindow?c.externalWindow:window;c.canvas=e(t.first(l.document.getElementsByTagName("canvas"))),w(),b(),u("linkAnnotation")},C=function(){b()},P=function(t){c.externalWindow?c.externalWindow.addSubscriberVideo(t):console.log("OT Annotation: External window does not exist. Cannot add subscriber video."); | ||
| },O=function(){y(),c.canvas=null,c.externalWindow&&(c.externalWindow.close(),c.externalWindow=null,c.resizeSubject=null),u("endAnnotation"),h(l.actionEnd,l.variationSuccess)},_=function(e){if(o=this,o.options=t.omit(e,"accPack","session"),i=t.property("accPack")(e),a=t.property("session")(e),!a)throw new Error("OpenTok Annotation Accelerator Pack requires an OpenTok session");p(),d(),h(l.actionInitialize,l.variationSuccess),f()};_.prototype={constructor:_,start:T,linkCanvas:M,resizeCanvas:C,addSubscriberToExternalWindow:P,end:O},"object"==typeof exports?module.exports=_:"function"==typeof define&&define.amd?define(function(){return _}):this.AnnotationAccPack=_}.call(this); |
@@ -52,3 +52,3 @@ var gulp = require('gulp'); | ||
| ], { base: 'dist/' }) | ||
| .pipe(zip('opentok-js-annotation-1.0.0.zip')) | ||
| .pipe(zip('opentok-js-annotation-1.1.0.zip')) | ||
| .pipe(gulp.dest(dist)); | ||
@@ -55,0 +55,0 @@ }); |
| { | ||
| "name": "opentok-annotation", | ||
| "version": "1.0.48", | ||
| "version": "2.0.0", | ||
| "description": "OpenTok annotation accelerator pack", | ||
@@ -5,0 +5,0 @@ "main": "dist/opentok-annotation.js", |
@@ -32,3 +32,3 @@ /* global OT OTSolution OTKAnalytics ScreenSharingAccPack define */ | ||
| var _logEventData = { | ||
| clientVersion: 'js-vsol-1.0.0', | ||
| clientVersion: 'js-vsol-1.1.0', | ||
| componentId: 'annotationsAccPack', | ||
@@ -157,5 +157,5 @@ name: 'guidAnnotationsKit', | ||
| height = width / (_aspectRatio); | ||
| if (el.clientHeight < (width/ _aspectRatio)) { | ||
| if (el.clientHeight < (width / _aspectRatio)) { | ||
| height = el.clientHeight; | ||
| width = height * _aspectRatio; | ||
| width = height * _aspectRatio; | ||
| } | ||
@@ -191,5 +191,7 @@ } | ||
| var toolbarId = _.property('toolbarId')(options) || 'toolbar'; | ||
| var items = _.property('toolbarItems')(options); | ||
| var items = _.property('toolbarItems')(options) || []; | ||
| var shapes = _.property('toolbarShapes')(options) || []; | ||
| var colors = _.property('colors')(options) || _palette; | ||
| var imageAssets = _.property('imageAssets')(options) || null; | ||
| var backgroundColor = _.property('backgroundColor')(options) || null; | ||
@@ -206,5 +208,7 @@ var container = function () { | ||
| colors: colors, | ||
| items: !!items && !!items.length ? options.items : null, | ||
| items: items.length ? items : ['*'], | ||
| shapes: shapes.length ? shapes : ['rectangle', 'oval', 'star', 'line'], | ||
| externalWindow: externalWindow || null, | ||
| imageAssets: imageAssets, | ||
| backgroundColor: backgroundColor, | ||
| OTKAnalytics: OTKAnalytics | ||
@@ -211,0 +215,0 @@ }); |
@@ -20,3 +20,3 @@ /*! | ||
| var _logEventData = { | ||
| clientVersion: 'js-vsol-1.0.0', | ||
| clientVersion: 'js-vsol-1.1.0', | ||
| componentId: 'annotationsAccPack', | ||
@@ -165,38 +165,3 @@ name: 'guidAnnotationsKit', | ||
| if (item.id === 'OT_capture') { | ||
| self.selectedItem = item; | ||
| if (!self.overlay) { | ||
| self.overlay = document.createElement('div'); | ||
| self.overlay.id = 'captureOverlay'; | ||
| self.overlay.style.position = 'absolute'; | ||
| self.overlay.style.top = '0px'; | ||
| self.overlay.style.width = self.parent.clientWidth + 'px'; | ||
| self.overlay.style.height = self.parent.clientHeight + 'px'; | ||
| self.overlay.style.background = 'rgba(0,0,0,0.4) url("' + | ||
| self.imageAssets +'annotation-camera.png") no-repeat center'; | ||
| self.overlay.style.backgroundSize = '50px 50px'; | ||
| self.overlay.style.cursor = 'pointer'; | ||
| self.overlay.style.opacity = 0; | ||
| self.parent.appendChild(self.overlay); | ||
| self.parent.onmouseover = function () { | ||
| self.overlay.style.opacity = 1; | ||
| self.overlay.style.zIndex = 1010; | ||
| }; | ||
| self.parent.onmouseout = function () { | ||
| self.overlay.style.opacity = 0; | ||
| }; | ||
| self.overlay.onclick = function () { | ||
| self.captureScreenshot(); | ||
| self.parent.removeChild(self.overlay); | ||
| self.overlay = null; | ||
| self.parent.onmouseover = null; | ||
| self.parent.onmouseout = null; | ||
| }; | ||
| } else { | ||
| self.overlay.style = 'inline'; | ||
| } | ||
| self.captureScreenshot(); | ||
| } else if (item.id.indexOf('OT_line_width') !== -1) { | ||
@@ -233,2 +198,11 @@ if (item.size) { | ||
| this.undo = function () { | ||
| undoLast(false, self.session.connection.connectionId); | ||
| if (self.session) { | ||
| self.session.signal({ | ||
| type: 'otAnnotation_undo' | ||
| }); | ||
| } | ||
| } | ||
| // TODO Allow the user to choose the image type? (jpg, png) Also allow size? | ||
@@ -391,3 +365,4 @@ /** | ||
| endPoint: false, | ||
| selectedItem: selectedItem | ||
| selectedItem: selectedItem, | ||
| guid: event.guid | ||
| }; | ||
@@ -420,3 +395,4 @@ draw(update, true); | ||
| endPoint: true, | ||
| selectedItem: selectedItem | ||
| selectedItem: selectedItem, | ||
| guid: event.guid | ||
| }; | ||
@@ -448,3 +424,4 @@ draw(update, true); | ||
| mirrored: mirrored, | ||
| selectedItem: selectedItem | ||
| selectedItem: selectedItem, | ||
| guid: event.guid | ||
| }; | ||
@@ -456,2 +433,6 @@ | ||
| // We have a shape or custom object | ||
| // We are currently using a constant default width for shapes | ||
| var shapeLineWidth = 2; | ||
| if (selectedItem && selectedItem.points) { | ||
@@ -474,3 +455,3 @@ client.mX = x; | ||
| color: resizeEvent ? event.userColor : self.userColor, | ||
| lineWidth: resizeEvent ? event.lineWidth : self.lineWidth, | ||
| lineWidth: resizeEvent ? event.lineWidth : shapeLineWidth, | ||
| selectedItem: selectedItem | ||
@@ -498,3 +479,3 @@ // INFO The points for scaling will get added when drawing is complete | ||
| color: resizeEvent ? event.userColor : self.userColor, | ||
| lineWidth: resizeEvent ? event.lineWidth : self.lineWidth, | ||
| lineWidth: resizeEvent ? event.lineWidth : shapeLineWidth, | ||
| videoWidth: self.videoFeed.videoElement().clientWidth, | ||
@@ -507,4 +488,4 @@ videoHeight: self.videoFeed.videoElement().clientHeight, | ||
| startPoint: true, | ||
| endPoint: true, | ||
| selectedItem: selectedItem | ||
| selectedItem: selectedItem, | ||
| guid: event.guid | ||
| }; | ||
@@ -542,3 +523,3 @@ | ||
| color: resizeEvent ? event.userColor : self.userColor, | ||
| lineWidth: resizeEvent ? event.lineWidth : self.lineWidth, | ||
| lineWidth: resizeEvent ? event.lineWidth : shapeLineWidth, | ||
| videoWidth: self.videoFeed.videoElement().clientWidth, | ||
@@ -551,3 +532,5 @@ videoHeight: self.videoFeed.videoElement().clientHeight, | ||
| startPoint: firstPoint, | ||
| endPoint: endPoint | ||
| endPoint: endPoint, | ||
| guid: event.guid | ||
| }; | ||
@@ -573,2 +556,10 @@ | ||
| function guid() { | ||
| 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); | ||
| }); | ||
| } | ||
| addEventListeners(canvas, 'mousedown mousemove mouseup mouseout touchstart touchmove touchend', function (event) { | ||
@@ -599,2 +590,3 @@ | ||
| event.lineWidth = self.lineWidth; | ||
| event.guid = guid(); | ||
| eventHistory.push(event); | ||
@@ -759,3 +751,2 @@ } | ||
| if (isText) { | ||
| ctx.font = history.font; | ||
@@ -788,2 +779,3 @@ ctx.fillStyle = history.color; | ||
| ctx.quadraticCurveTo(history.fromX, history.fromY, (history.fromX + history.toX) / 2, (history.fromY + history.toY) / 2); | ||
| ctx.stroke(); | ||
@@ -914,10 +906,2 @@ } | ||
| var drawTextUpdate = function (update) { | ||
| }; | ||
| var drawIncoming = function (update, resizeEvent, index) { | ||
@@ -1020,4 +1004,4 @@ | ||
| // Remove all elements from history that were drawn by the sender | ||
| drawHistory = drawHistory.filter(function (history) { | ||
| console.log(history.fromId); | ||
| return history.fromId !== cid; | ||
@@ -1037,2 +1021,4 @@ }); | ||
| // Refresh the canvas | ||
@@ -1042,2 +1028,40 @@ draw(); | ||
| var undoLast = function (incoming, cid, itemsToRemove) { | ||
| var historyItem; | ||
| var removed; | ||
| var endPoint = false; | ||
| var removedItems = []; | ||
| for (var i = drawHistory.length - 1; i >= 0; i--) { | ||
| historyItem = drawHistory[i]; | ||
| if (historyItem.fromId === cid) { | ||
| endPoint = endPoint || historyItem.endPoint; | ||
| removed = drawHistory.splice(i, 1)[0]; | ||
| removedItems.push(removed.guid); | ||
| if (!endPoint || (endPoint && removed.startPoint === true)) { | ||
| break; | ||
| } | ||
| } | ||
| } | ||
| if (incoming) { | ||
| updateHistory = updateHistory.filter(function (history) { | ||
| return !itemsToRemove.includes(history.guid); | ||
| }); | ||
| } else { | ||
| eventHistory = eventHistory.filter(function (history) { | ||
| return !removedItems.includes(history.guid); | ||
| }); | ||
| self.session.signal({ | ||
| type: 'otAnnotation_undo', | ||
| data: JSON.stringify(removedItems) | ||
| }); | ||
| } | ||
| draw(); | ||
| } | ||
| var count = 0; | ||
| /** Signal Handling **/ | ||
@@ -1070,2 +1094,8 @@ if (self.videoFeed.session) { | ||
| }, | ||
| 'signal:otAnnotation_undo': function (event) { | ||
| if (event.from.connectionId !== self.session.connection.connectionId) { | ||
| // Only clear elements drawn by the sender's (from) Id | ||
| undoLast(true, event.from.connectionId, JSON.parse(event.data)); | ||
| } | ||
| }, | ||
| connectionCreated: function (event) { | ||
@@ -1156,114 +1186,143 @@ if (drawHistory.length > 0 && event.connection.connectionId !== self.session.connection.connectionId) { | ||
| // TODO Allow 'style' objects to be passed in for buttons, menu toolbar, etc? | ||
| this.backgroundColor = options.backgroundColor || 'rgba(0, 0, 0, 0.7)'; | ||
| this.buttonWidth = options.buttonWidth || '40px'; | ||
| this.buttonHeight = options.buttonHeight || '40px'; | ||
| this.iconWidth = options.iconWidth || '30px'; | ||
| this.iconHeight = options.iconHeight || '30px'; | ||
| this.backgroundColor = options.backgroundColor || 'rgba(102, 102, 102, 0.90)'; | ||
| this.subpanelBackgroundColor = options.subpanelBackgroundColor || '#323232'; | ||
| var imageAssets = options.imageAssets || DEFAULT_ASSET_URL; | ||
| var toolbarItems = [{ | ||
| id: 'OT_pen', | ||
| title: 'Pen', | ||
| icon: [imageAssets, 'annotation-freehand.png'].join(''), | ||
| selectedIcon: [imageAssets, 'annotation-freehand_selected.png'].join('') | ||
| }, { | ||
| id: 'OT_line', | ||
| title: 'Line', | ||
| icon: [imageAssets, 'annotation-line.png'].join(''), | ||
| selectedIcon: [imageAssets, 'annotation-line_selected.png'].join(''), | ||
| points: [ | ||
| [0, 0], | ||
| [0, 1] | ||
| ] | ||
| }, { | ||
| id: 'OT_shapes', | ||
| title: 'Shapes', | ||
| icon: [imageAssets, 'annotation-shapes.png'].join(''), | ||
| items: [{ | ||
| id: 'OT_arrow', | ||
| title: 'Arrow', | ||
| icon: [imageAssets, 'annotation-arrow.png'].join(''), | ||
| points: [ | ||
| [0, 1], | ||
| [3, 1], | ||
| [3, 0], | ||
| [5, 2], | ||
| [3, 4], | ||
| [3, 3], | ||
| [0, 3], | ||
| [0, 1] // Reconnect point | ||
| ] | ||
| id: 'OT_pen', | ||
| title: 'Pen', | ||
| icon: [imageAssets, 'annotation-pencil.png'].join(''), | ||
| selectedIcon: [imageAssets, 'annotation-pencil.png'].join(''), | ||
| items: { /* Built dynamically */ } | ||
| }, { | ||
| id: 'OT_rect', | ||
| title: 'Rectangle', | ||
| icon: [imageAssets, 'annotation-rectangle.png'].join(''), | ||
| points: [ | ||
| [0, 0], | ||
| [1, 0], | ||
| [1, 1], | ||
| [0, 1], | ||
| [0, 0] // Reconnect point | ||
| ] | ||
| id: 'OT_colors', | ||
| title: 'Colors', | ||
| icon: '', | ||
| items: { /* Built dynamically */ } | ||
| }, { | ||
| id: 'OT_oval', | ||
| title: 'Oval', | ||
| icon: [imageAssets, 'annotation-oval.png'].join(''), | ||
| enableSmoothing: true, | ||
| points: [ | ||
| [0, 0.5], | ||
| [0.5 + 0.5 * Math.cos(5 * Math.PI / 4), 0.5 + 0.5 * Math.sin(5 * Math.PI / 4)], | ||
| [0.5, 0], | ||
| [0.5 + 0.5 * Math.cos(7 * Math.PI / 4), 0.5 + 0.5 * Math.sin(7 * Math.PI / 4)], | ||
| [1, 0.5], | ||
| [0.5 + 0.5 * Math.cos(Math.PI / 4), 0.5 + 0.5 * Math.sin(Math.PI / 4)], | ||
| [0.5, 1], | ||
| [0.5 + 0.5 * Math.cos(3 * Math.PI / 4), 0.5 + 0.5 * Math.sin(3 * Math.PI / 4)], | ||
| [0, 0.5], | ||
| [0.5 + 0.5 * Math.cos(5 * Math.PI / 4), 0.5 + 0.5 * Math.sin(5 * Math.PI / 4)] | ||
| ] | ||
| id: 'OT_shapes', | ||
| title: 'Shapes', | ||
| icon: [imageAssets, 'annotation-shapes.png'].join(''), | ||
| items: [{ | ||
| id: 'OT_rect', | ||
| title: 'Rectangle', | ||
| icon: [imageAssets, 'annotation-rectangle.png'].join(''), | ||
| points: [ | ||
| [0, 0], | ||
| [1, 0], | ||
| [1, 1], | ||
| [0, 1], | ||
| [0, 0] // Reconnect point | ||
| ] | ||
| }, | ||
| { | ||
| id: 'OT_rect_fill', | ||
| title: 'Rectangle-Fill', | ||
| icon: [imageAssets, 'annotation-rectangle.png'].join(''), | ||
| points: [ | ||
| [0, 0], | ||
| [1, 0], | ||
| [1, 1], | ||
| [0, 1], | ||
| [0, 0] // Reconnect point | ||
| ] | ||
| }, { | ||
| id: 'OT_oval', | ||
| title: 'Oval', | ||
| icon: [imageAssets, 'annotation-oval.png'].join(''), | ||
| enableSmoothing: true, | ||
| points: [ | ||
| [0, 0.5], | ||
| [0.5 + 0.5 * Math.cos(5 * Math.PI / 4), 0.5 + 0.5 * Math.sin(5 * Math.PI / 4)], | ||
| [0.5, 0], | ||
| [0.5 + 0.5 * Math.cos(7 * Math.PI / 4), 0.5 + 0.5 * Math.sin(7 * Math.PI / 4)], | ||
| [1, 0.5], | ||
| [0.5 + 0.5 * Math.cos(Math.PI / 4), 0.5 + 0.5 * Math.sin(Math.PI / 4)], | ||
| [0.5, 1], | ||
| [0.5 + 0.5 * Math.cos(3 * Math.PI / 4), 0.5 + 0.5 * Math.sin(3 * Math.PI / 4)], | ||
| [0, 0.5], | ||
| [0.5 + 0.5 * Math.cos(5 * Math.PI / 4), 0.5 + 0.5 * Math.sin(5 * Math.PI / 4)] | ||
| ] | ||
| }, { | ||
| id: 'OT_oval_fill', | ||
| title: 'Oval-Fill', | ||
| icon: [imageAssets, 'annotation-oval-fill.png'].join(''), | ||
| enableSmoothing: true, | ||
| points: [ | ||
| [0, 0.5], | ||
| [0.5 + 0.5 * Math.cos(5 * Math.PI / 4), 0.5 + 0.5 * Math.sin(5 * Math.PI / 4)], | ||
| [0.5, 0], | ||
| [0.5 + 0.5 * Math.cos(7 * Math.PI / 4), 0.5 + 0.5 * Math.sin(7 * Math.PI / 4)], | ||
| [1, 0.5], | ||
| [0.5 + 0.5 * Math.cos(Math.PI / 4), 0.5 + 0.5 * Math.sin(Math.PI / 4)], | ||
| [0.5, 1], | ||
| [0.5 + 0.5 * Math.cos(3 * Math.PI / 4), 0.5 + 0.5 * Math.sin(3 * Math.PI / 4)], | ||
| [0, 0.5], | ||
| [0.5 + 0.5 * Math.cos(5 * Math.PI / 4), 0.5 + 0.5 * Math.sin(5 * Math.PI / 4)] | ||
| ] | ||
| },{ | ||
| id: 'OT_star', | ||
| title: 'Star', | ||
| icon: [imageAssets, 'annotation-star.png'].join(''), | ||
| points: [ | ||
| /* eslint-disable max-len */ | ||
| [0.5 + 0.5 * Math.cos(90 * (Math.PI / 180)), 0.5 + 0.5 * Math.sin(90 * (Math.PI / 180))], | ||
| [0.5 + 0.25 * Math.cos(126 * (Math.PI / 180)), 0.5 + 0.25 * Math.sin(126 * (Math.PI / 180))], | ||
| [0.5 + 0.5 * Math.cos(162 * (Math.PI / 180)), 0.5 + 0.5 * Math.sin(162 * (Math.PI / 180))], | ||
| [0.5 + 0.25 * Math.cos(198 * (Math.PI / 180)), 0.5 + 0.25 * Math.sin(198 * (Math.PI / 180))], | ||
| [0.5 + 0.5 * Math.cos(234 * (Math.PI / 180)), 0.5 + 0.5 * Math.sin(234 * (Math.PI / 180))], | ||
| [0.5 + 0.25 * Math.cos(270 * (Math.PI / 180)), 0.5 + 0.25 * Math.sin(270 * (Math.PI / 180))], | ||
| [0.5 + 0.5 * Math.cos(306 * (Math.PI / 180)), 0.5 + 0.5 * Math.sin(306 * (Math.PI / 180))], | ||
| [0.5 + 0.25 * Math.cos(342 * (Math.PI / 180)), 0.5 + 0.25 * Math.sin(342 * (Math.PI / 180))], | ||
| [0.5 + 0.5 * Math.cos(18 * (Math.PI / 180)), 0.5 + 0.5 * Math.sin(18 * (Math.PI / 180))], | ||
| [0.5 + 0.25 * Math.cos(54 * (Math.PI / 180)), 0.5 + 0.25 * Math.sin(54 * (Math.PI / 180))], | ||
| [0.5 + 0.5 * Math.cos(90 * (Math.PI / 180)), 0.5 + 0.5 * Math.sin(90 * (Math.PI / 180))] | ||
| /* eslint-enable max-len */ | ||
| ] | ||
| }, { | ||
| id: 'OT_arrow', | ||
| title: 'Arrow', | ||
| icon: [imageAssets, 'annotation-arrow.png'].join(''), | ||
| points: [ | ||
| [0, 1], | ||
| [3, 1], | ||
| [3, 0], | ||
| [5, 2], | ||
| [3, 4], | ||
| [3, 3], | ||
| [0, 3], | ||
| [0, 1] // Reconnect point | ||
| ] | ||
| }, { | ||
| id: 'OT_line', | ||
| title: 'Line', | ||
| icon: [imageAssets, 'annotation-line.png'].join(''), | ||
| selectedIcon: [imageAssets, 'annotation-line.png'].join(''), | ||
| points: [ | ||
| [0, 0], | ||
| [0, 1] | ||
| ] | ||
| }] | ||
| }, { | ||
| id: 'OT_star', | ||
| title: 'Star', | ||
| icon: [imageAssets, 'annotation-star.png'].join(''), | ||
| points: [ | ||
| /* eslint-disable max-len */ | ||
| [0.5 + 0.5 * Math.cos(90 * (Math.PI / 180)), 0.5 + 0.5 * Math.sin(90 * (Math.PI / 180))], | ||
| [0.5 + 0.25 * Math.cos(126 * (Math.PI / 180)), 0.5 + 0.25 * Math.sin(126 * (Math.PI / 180))], | ||
| [0.5 + 0.5 * Math.cos(162 * (Math.PI / 180)), 0.5 + 0.5 * Math.sin(162 * (Math.PI / 180))], | ||
| [0.5 + 0.25 * Math.cos(198 * (Math.PI / 180)), 0.5 + 0.25 * Math.sin(198 * (Math.PI / 180))], | ||
| [0.5 + 0.5 * Math.cos(234 * (Math.PI / 180)), 0.5 + 0.5 * Math.sin(234 * (Math.PI / 180))], | ||
| [0.5 + 0.25 * Math.cos(270 * (Math.PI / 180)), 0.5 + 0.25 * Math.sin(270 * (Math.PI / 180))], | ||
| [0.5 + 0.5 * Math.cos(306 * (Math.PI / 180)), 0.5 + 0.5 * Math.sin(306 * (Math.PI / 180))], | ||
| [0.5 + 0.25 * Math.cos(342 * (Math.PI / 180)), 0.5 + 0.25 * Math.sin(342 * (Math.PI / 180))], | ||
| [0.5 + 0.5 * Math.cos(18 * (Math.PI / 180)), 0.5 + 0.5 * Math.sin(18 * (Math.PI / 180))], | ||
| [0.5 + 0.25 * Math.cos(54 * (Math.PI / 180)), 0.5 + 0.25 * Math.sin(54 * (Math.PI / 180))], | ||
| [0.5 + 0.5 * Math.cos(90 * (Math.PI / 180)), 0.5 + 0.5 * Math.sin(90 * (Math.PI / 180))] | ||
| /* eslint-enable max-len */ | ||
| ] | ||
| }] | ||
| }, { | ||
| id: 'OT_text', | ||
| title: 'Text', | ||
| icon: [imageAssets, 'annotation-text.png'].join(''), | ||
| selectedIcon: [imageAssets, 'annotation-text.png'].join('') | ||
| }, { | ||
| id: 'OT_colors', | ||
| title: 'Colors', | ||
| icon: '', | ||
| items: { /* Built dynamically */ } | ||
| }, { | ||
| id: 'OT_line_width', | ||
| title: 'Line Width', | ||
| icon: [imageAssets, 'annotation-line_width.png'].join(''), | ||
| items: { /* Built dynamically */ } | ||
| }, { | ||
| id: 'OT_clear', | ||
| title: 'Clear', | ||
| icon: [imageAssets, 'annotation-clear.png'].join('') | ||
| }, { | ||
| id: 'OT_capture', | ||
| title: 'Capture', | ||
| icon: [imageAssets, 'annotation-camera.png'].join(''), | ||
| selectedIcon: [imageAssets, 'annotation-camera_selected.png'].join('') | ||
| }]; | ||
| id: 'OT_text', | ||
| title: 'Text', | ||
| icon: [imageAssets, 'annotation-text.png'].join(''), | ||
| selectedIcon: [imageAssets, 'annotation-text.png'].join('') | ||
| }, { | ||
| id: 'OT_clear', | ||
| title: 'Clear', | ||
| icon: [imageAssets, 'annotation-clear.png'].join('') | ||
| }, | ||
| { | ||
| id: 'OT_undo', | ||
| title: 'Undo', | ||
| icon: [imageAssets, 'annotation-undo.png'].join('') | ||
| }, { | ||
| id: 'OT_capture', | ||
| title: 'Capture', | ||
| icon: [imageAssets, 'annotation-camera.png'].join(''), | ||
| selectedIcon: [imageAssets, 'annotation-camera.png'].join('') | ||
| } | ||
| ]; | ||
@@ -1277,7 +1336,16 @@ | ||
| var getItems = function () { | ||
| var itemNames = ['pen', 'line', 'shapes', 'text', 'colors', 'line-width', 'clear', 'capture']; | ||
| var itemNames = ['pen', 'colors', 'shapes', 'text', 'clear', 'undo', 'capture']; | ||
| var shapeNames = ['rectangle', 'rectangle-fill', 'oval', 'oval-fill', 'star', 'arrow', 'line']; | ||
| var addItem = function (acc, item) { | ||
| var index = itemNames.indexOf(item); | ||
| if (index !== -1) { | ||
| acc.push(toolbarItems[index]); | ||
| var toolbarItem = toolbarItems[index]; | ||
| if (toolbarItem.title === 'Shapes' && !!options.shapes) { | ||
| var shapes = options.shapes.reduce(function(shapeAcc, shape) { | ||
| var shapeIndex = shapeNames.indexOf(shape); | ||
| return shapeIndex !== -1 ? shapeAcc.concat(toolbarItem.items[shapeIndex]) : shapeAcc; | ||
| }, []); | ||
| toolbarItem.items = shapes; | ||
| } | ||
| acc.push(toolbarItem); | ||
| } | ||
@@ -1288,3 +1356,4 @@ return acc; | ||
| if (!!options.items && !!options.items.length) { | ||
| return options.items.reduce(addItem, []); | ||
| var itemsToBuild = options.items[0] === '*' ? itemNames : options.items; | ||
| return itemsToBuild.reduce(addItem, []); | ||
| } else { | ||
@@ -1297,3 +1366,2 @@ return toolbarItems; | ||
| this.colors = options.colors || [ | ||
@@ -1364,7 +1432,10 @@ '#1abc9c', | ||
| this.close = function () { | ||
| this.elm.style.display = 'none'; | ||
| // this.elm.style.display = 'none'; | ||
| this.elm.classList.add('ots-hidden'); | ||
| }; | ||
| this.open = function () { | ||
| this.elm.style.display = this.options.style.display; | ||
| // this.elm.style.display = this.options.style.display; | ||
| this.elm.classList.remove('ots-hidden') | ||
| }; | ||
@@ -1390,3 +1461,3 @@ | ||
| options.style = Object(options.style); | ||
| options.style.display = options.style.display || 'block'; | ||
| // options.style.display = options.style.display || 'block'; | ||
| options.template = options.template || '<div class=\"color-choice\" data-col=\"{color}\" style=\"background-color: {color}\"></div>'; | ||
@@ -1405,2 +1476,7 @@ self.elm = self.getElm(parent); | ||
| } | ||
| var colors = Array.from(document.getElementsByClassName('color-choice')); | ||
| colors.forEach(function (el) { | ||
| el.classList.remove('active'); | ||
| }); | ||
| ev.target.classList.add('active'); | ||
| self.set(color); | ||
@@ -1424,4 +1500,2 @@ self.close(); | ||
| panel.style.height = '100%'; | ||
| panel.style.backgroundColor = this.backgroundColor; | ||
| // panel.style.paddingLeft = '15px'; | ||
| this.parent.appendChild(panel); | ||
@@ -1440,13 +1514,10 @@ this.parent.style.position = 'relative'; | ||
| button.setAttribute('id', item.id); | ||
| button.classList.add('annotation-btn'); | ||
| button.classList.add(item.title.split(' ').join('-').toLowerCase()); | ||
| button.style.position = 'relative'; | ||
| button.style.top = '50%'; | ||
| button.style.transform = 'translateY(-50%)'; | ||
| if (item.id === 'OT_colors') { | ||
| button.style.webkitTransform = 'translateY(-85%)'; | ||
| var colorPicker = context.createElement('div'); | ||
| colorPicker.setAttribute('class', 'color-picker'); | ||
| colorPicker.style.backgroundColor = this.backgroundColor; | ||
| // colorPicker.style.backgroundColor = this.subpanelBackgroundColor; | ||
| this.parent.appendChild(colorPicker); | ||
@@ -1468,37 +1539,10 @@ | ||
| var colorChoices = context.querySelectorAll('.color-choice'); | ||
| for (var j = 0; j < colorChoices.length; j++) { | ||
| colorChoices[j].style.display = 'inline-block'; | ||
| colorChoices[j].style.width = '30px'; | ||
| colorChoices[j].style.height = '30px'; | ||
| colorChoices[j].style.margin = '5px'; | ||
| colorChoices[j].style.cursor = 'pointer'; | ||
| colorChoices[j].style.borderRadius = '100%'; | ||
| colorChoices[j].style.opacity = 0.7; | ||
| colorChoices[j].onmouseover = function () { | ||
| this.style.opacity = 1; | ||
| }; | ||
| colorChoices[j].onmouseout = function () { | ||
| this.style.opacity = 0.7; | ||
| }; | ||
| } | ||
| button.setAttribute('class', 'OT_color'); | ||
| button.style.marginLeft = '10px'; | ||
| button.style.marginRight = '10px'; | ||
| colorChoices[0].classList.add('active'); | ||
| button.setAttribute('class', 'OT_color annotation-btn colors'); | ||
| button.style.borderRadius = '50%'; | ||
| button.style.backgroundColor = this.colors[0]; | ||
| button.style.width = this.iconWidth; | ||
| button.style.height = this.iconHeight; | ||
| button.style.paddingTop = this.buttonHeight.replace('px', '') - this.iconHeight.replace('px', '') + 'px'; | ||
| } else { | ||
| button.style.background = 'url("' + item.icon + '") no-repeat'; | ||
| button.style.backgroundSize = this.iconWidth + ' ' + this.iconHeight; | ||
| button.style.backgroundPosition = 'center'; | ||
| button.style.width = this.buttonWidth; | ||
| button.style.height = this.buttonHeight; | ||
| } | ||
| // If we have an object as item.items, it was never set by the user | ||
| if (item.title === 'Line Width' && !Array.isArray(item.items)) { | ||
| if (item.title === 'Pen' && !Array.isArray(item.items)) { | ||
| // Add defaults | ||
@@ -1542,5 +1586,4 @@ item.items = [{ | ||
| button.setAttribute('data-col', item.title); | ||
| button.style.border = 'none'; | ||
| button.style.cursor = 'pointer'; | ||
| toolbarItems.push(button.outerHTML); | ||
@@ -1556,24 +1599,8 @@ } | ||
| // Close the submenu if we are clicking on an item and not a group button | ||
| if (!group) { | ||
| self.items.forEach(function (item) { | ||
| if (item.title !== 'Clear' && item.title === itemName) { | ||
| if (self.selectedItem) { | ||
| var lastBtn = context.getElementById(self.selectedItem.id); | ||
| if (lastBtn) { | ||
| lastBtn.style.background = 'url("' + self.selectedItem.icon + '") no-repeat'; | ||
| lastBtn.style.backgroundSize = self.iconWidth + ' ' + self.iconHeight; | ||
| lastBtn.style.backgroundPosition = 'center'; | ||
| } | ||
| } | ||
| if ((item.title !== 'Clear' || item.title !== 'Undo') && item.title === itemName) { | ||
| if (item.selectedIcon) { | ||
| var selBtn = context.getElementById(item.id); | ||
| if (selBtn) { | ||
| selBtn.style.background = 'url("' + item.selectedIcon + '") no-repeat'; | ||
| selBtn.style.backgroundSize = self.iconWidth + ' ' + self.iconHeight; | ||
| selBtn.style.backgroundPosition = 'center'; | ||
| } | ||
| } | ||
| self.selectedItem = item; | ||
@@ -1590,3 +1617,3 @@ | ||
| }); | ||
| subPanel.style.display = 'none'; | ||
| subPanel.classList.add('ots-hidden') | ||
| } else { | ||
@@ -1598,8 +1625,4 @@ self.items.forEach(function (item) { | ||
| if (item.items) { | ||
| subPanel.setAttribute('class', 'OT_subpanel'); | ||
| subPanel.style.backgroundColor = self.backgroundColor; | ||
| subPanel.style.width = '100%'; | ||
| subPanel.style.height = '100%'; | ||
| subPanel.style.paddingLeft = '15px'; | ||
| subPanel.style.display = 'none'; | ||
| subPanel.setAttribute('class', ['OT_subpanel', 'ots-hidden', item.title.toLowerCase()].join(' ')); | ||
| self.parent.appendChild(subPanel); | ||
@@ -1610,3 +1633,3 @@ | ||
| if (item.id === 'OT_line_width') { | ||
| if (item.id === 'OT_pen') { | ||
| // We want to dynamically create icons for the list of possible line widths | ||
@@ -1617,13 +1640,7 @@ item.items.forEach(function (subItem) { | ||
| itemButton.setAttribute('data-col', subItem.title); | ||
| itemButton.setAttribute('class', ['line-width-option', subItem.size].join(' ')); | ||
| itemButton.setAttribute('id', subItem.id); | ||
| itemButton.style.position = 'relative'; | ||
| itemButton.style.top = '50%'; | ||
| itemButton.style.transform = 'translateY(-50%)'; | ||
| itemButton.style['float'] = 'left'; | ||
| itemButton.style.width = self.buttonWidth; | ||
| itemButton.style.height = self.buttonHeight; | ||
| itemButton.style.border = 'none'; | ||
| itemButton.style.cursor = 'pointer'; | ||
| var lineIcon = context.createElement('div'); | ||
| lineIcon.setAttribute('class', 'line-width-icon') | ||
| // TODO Allow devs to change this? | ||
@@ -1650,12 +1667,13 @@ lineIcon.style.backgroundColor = '#FFFFFF'; | ||
| itemButton.setAttribute('id', subItem.id); | ||
| itemButton.style.background = 'url("' + subItem.icon + '") no-repeat'; | ||
| itemButton.style.position = 'relative'; | ||
| itemButton.style.top = '50%'; | ||
| itemButton.style.transform = 'translateY(-50%)'; | ||
| itemButton.style.backgroundSize = self.iconWidth + ' ' + self.iconHeight; | ||
| itemButton.style.backgroundPosition = 'center'; | ||
| itemButton.style.width = self.buttonWidth; | ||
| itemButton.style.height = self.buttonHeight; | ||
| itemButton.style.border = 'none'; | ||
| itemButton.style.cursor = 'pointer'; | ||
| itemButton.setAttribute('class', ['annotation-btn', subItem.title.toLowerCase()].join(' ')); | ||
| // itemButton.style.backgroundImage = 'url("' + subItem.icon + '")'; | ||
| // itemButton.style.position = 'relative'; | ||
| // itemButton.style.top = '50%'; | ||
| // itemButton.style.transform = 'translateY(-50%)'; | ||
| // itemButton.style.backgroundSize = self.iconWidth + ' ' + self.iconHeight; | ||
| // itemButton.style.backgroundPosition = 'center'; | ||
| // itemButton.style.width = self.buttonWidth; | ||
| // itemButton.style.height = self.buttonHeight; | ||
| // itemButton.style.border = 'none'; | ||
| // itemButton.style.cursor = 'pointer'; | ||
@@ -1670,5 +1688,5 @@ submenuItems.push(itemButton.outerHTML); | ||
| if (id === 'OT_shapes' || id === 'OT_line_width') { | ||
| if (id === 'OT_shapes' || id === 'OT_pen') { | ||
| if (subPanel) { | ||
| subPanel.style.display = 'block'; | ||
| subPanel.classList.remove('ots-hidden'); | ||
| } | ||
@@ -1678,3 +1696,3 @@ pk.close(); | ||
| if (subPanel) { | ||
| subPanel.style.display = 'none'; | ||
| subPanel.classList.add('ots-hidden'); | ||
| } | ||
@@ -1696,4 +1714,12 @@ pk.open(); | ||
| var id = ev.target.getAttribute('id'); | ||
| subPanel.style.display = 'none'; | ||
| if (!!id && id.replace(/[^a-z]/g, '') === 'linewidth') { | ||
| canvases.forEach(function (canvas) { | ||
| canvas.selectItem(self.selectedGroup); | ||
| }); | ||
| } | ||
| subPanel.classList.add('ots-hidden'); | ||
| if (!group) { | ||
@@ -1705,5 +1731,5 @@ self.selectedGroup.items.forEach(function (item) { | ||
| if (lastBtn) { | ||
| lastBtn.style.background = 'url("' + self.selectedItem.icon + '") no-repeat'; | ||
| lastBtn.style.backgroundSize = self.iconWidth + ' ' + self.iconHeight; | ||
| lastBtn.style.backgroundPosition = 'center'; | ||
| // lastBtn.style.background = 'url("' + self.selectedItem.icon + '") no-repeat'; | ||
| // lastBtn.style.backgroundSize = self.iconWidth + ' ' + self.iconHeight; | ||
| // lastBtn.style.backgroundPosition = 'center'; | ||
| } | ||
@@ -1744,2 +1770,8 @@ } | ||
| }; | ||
| context.getElementById('OT_undo').onclick = function () { | ||
| canvases.forEach(function (canvas) { | ||
| canvas.undo(); | ||
| }); | ||
| }; | ||
| } | ||
@@ -1812,2 +1844,5 @@ }; | ||
| canvases.push(canvas); | ||
| canvases.forEach(function(canvas) { | ||
| canvas.selectedItem = canvas.selectedItem || self.items[0]; | ||
| }); | ||
| }; | ||
@@ -1857,2 +1892,2 @@ | ||
| }.call(this)); | ||
| }.call(this)); |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
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
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.18%
351917
- Lines of code
- increased by1.46%
4229
No dependency changes