dotjem-angular-measure.min.js

!function(){function e(n,t){this.x=n,this.y=t,this.add=function(n,t){return"number"==typeof n?new e(this.x+n,this.y+t):void this.add(n.x,n.y)}}function n(t,i){this.start=t,this.end=i,this.visible=!0,this.length=Math.sqrt((i.x-t.x)*(i.x-t.x)+(i.y-t.y)*(i.y-t.y)),this.moveEnd=function(i,r){return new n(t,new e(i,r))},this.flip=function(){return new n(i,t)}}function t(){var t=this;t.lines=[],t.toggle=function(e,n){t.current?t.commit(e,n):t.start(e,n)},t.start=function(i,r){t.current=new n(new e(i,r),new e(i,r))},t.move=function(e,n){t.current&&(t.current=t.current.moveEnd(e,n))},t.commit=function(e,n){t.lines.push(t.current.moveEnd(e,n)),delete t.current},t.all=function(){var e=t.lines.slice();return t.current&&e.push(t.current),e}}function i(n,t){var i=this,r=t.getContext("2d");i.paint=function(){var e=n.all();return e.length<0?i:e.reduce(function(e,n){return e.paintLine(n)},i.clear())},i.paintTest=function(){r.beginPath(),r.rect(20,20,40,40),r.fill()},i.paintLine=function(e){return e.visible?(r.beginPath(),r.strokeStyle="#000000",r.lineWidth=1,r.moveTo(e.start.x,e.start.y),r.lineTo(e.end.x,e.end.y),e.length>0&&(i.paintLineStop(e),i.paintLineStop(e.flip())),i.stroke().paintLabel(e.end.add(15,0),e.length.toFixed(1)+"m"),i):i},i.paintLineStop=function(e){var n=e.start.x-e.end.x,t=e.start.y-e.end.y;return r.moveTo(e.start.x-5*t/e.length,e.start.y+5*n/e.length),r.lineTo(e.start.x+5*t/e.length,e.start.y-5*n/e.length),i},i.paintLabel=function(n,t){r.font="11px sans-serif",r.textBaseline="middle",r.textAlign="center",r.fillStyle="#0066ff",r.beginPath();var o=r.measureText(t).width,a=8,u=new e(n.x,n.y-a),l=new e(n.x+o,n.y-a),s=new e(n.x,n.y+a),c=new e(n.x+o,n.y+a),f=new e(n.x-a,n.y),d=new e(n.x-a,n.y),v=new e(n.x+a+o,n.y),x=new e(n.x+a+o,n.y),h=new e(n.x-a,n.y-a),y=new e(n.x-a,n.y+a),g=new e(n.x+a+o,n.y-a),m=new e(n.x+a+o,n.y+a);i.moveTo(u),i.lineTo(l),i.quadraticCurveTo(g,v),i.lineTo(x),i.quadraticCurveTo(m,c),i.lineTo(s),i.quadraticCurveTo(y,d),i.lineTo(f),i.quadraticCurveTo(h,u),r.fill(),r.fillStyle="#ffffff",r.fillText(t,u.x+a+6,u.y+a)},i.quadraticCurveTo=function(e,n){return r.quadraticCurveTo(e.x,e.y,n.x,n.y),i},i.lineTo=function(e){return r.lineTo(e.x,e.y),i},i.moveTo=function(e){return r.moveTo(e.x,e.y),i},i.stroke=function(){return r.stroke(),i},i.clear=function(){return r.clearRect(0,0,t.width,t.height),i}}var r=angular.module("dotjem.angular.measure",["dotjem.angular.events"]);r.component("dxMeasure",{template:'<canvas class="dx-overlay"     ng-mousemove="$ctrl.onMouseMove($event)"     ng-mousedown="$ctrl.onMouseDown($event)"></canvas><div class="dx-m-box" ng-style="$ctrl.boxStyles" ng-if="$ctrl.show"></div><div><img ng-src="{{ $ctrl.image }}" dx-image-ready="$ctrl.imageReady($event)" style="width: 100%;"></div>',bindings:{image:"@",enabled:"="},controller:function(e,n,r){var o=this,a=e.children("canvas").first()[0],u=new t,l=new i(u,a);o.imageReady=function(e){var n=e.element[0];a.width=n.clientWidth,a.height=n.clientHeight},o.onMouseMove=function(e){u.move(e.offsetX,e.offsetY),u.current&&l.paint()},o.onMouseDown=function(e){u.toggle(e.offsetX,e.offsetY),l.paint()}}})}();