From 9039eaea669742e4bee5b7b395ca4dafa2b1b54e Mon Sep 17 00:00:00 2001 From: Antonino Bonanno Date: Sun, 10 Mar 2024 20:02:41 +0100 Subject: [PATCH] fix: use updated dependencies (font-awesome, jquery) --- README.md | 20 +-- example/index.html | 236 +++++++++++++++++++----------------- index.md | 6 +- src/dragDropAnnotate.js | 10 +- src/dragDropAnnotate.min.js | 2 +- 5 files changed, 146 insertions(+), 128 deletions(-) diff --git a/README.md b/README.md index c1d1068..1a2af72 100644 --- a/README.md +++ b/README.md @@ -29,8 +29,8 @@ Are you looking for an image annotation toolkit (not drag and drop) written in J ## Dependencies -* [jQuery](https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js) >= 1.8.2 -* [jQuery UI](https://code.jquery.com/ui/1.12.1/jquery-ui.min.js) +* [jQuery](https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js) >= 1.8.2 +* [jQuery UI](https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js) >= 1.12.1 * [Fontawesome](https://fontawesome.com/) (Optional - you can change the icons) ## Usage @@ -39,11 +39,11 @@ To set up **DragDropAnnotate** on a Web page, add this code to your page head: ```html - - + + - + @@ -93,17 +93,17 @@ var options = { hint: { //hint settings enabled: true, //if false, not show the hint message: "Drag and Drop to Annotate", //hint message - icon: '', //hint icon + icon: '', //hint icon messageMove: "Drag to set new annotation position", //message on mouseover annotation - iconMove: '', //icon on mouseover annotation + iconMove: '', //icon on mouseover annotation messageRotate: "Move to set new annotation rotation", //message on start rotate annotation - iconRotate: '', //icon on start rotate annotation + iconRotate: '', //icon on start rotate annotation }, popup: { //popup settings - buttonRotate: '', //icon or text of rotate button + buttonRotate: '', //icon or text of rotate button tooltipRotate: "Change the rotation of annotation", //tooltip of rotate button - buttonRemove: '', //icon or text of remove button + buttonRemove: '', //icon or text of remove button tooltipRemove: "Remove the annotation", //tooltip of remove button tooltipText: "Text of annotation", //tooltip of annotation text tooltipTextarea: "Text of annotation", //tooltip of annotation textarea input diff --git a/example/index.html b/example/index.html index ca1fd72..e6f0347 100644 --- a/example/index.html +++ b/example/index.html @@ -2,139 +2,157 @@ - DragDrop Annotate - - - - - - - - - - - + DragDrop Annotate + + + + + + + + + + + -
+

Annotations

-
Drag and Drop an annotation to Annotate
+
Drag and Drop an annotation to Annotate
+
1 - Dog
-
2 - - Cat
+ annotation-height="150" annotation-id="1"> + 1 - Dog +
+
+ 2 - Cat +
3 - Full Edit
-
4 - - Disabled Edit
+ annotation-height="150" annotation-id="3"> + 3 - Full Edit +
+
+ 4 - Disabled Edit +

Image Annotations

- - - + dog + blue-eye + yellow-eye - View on - GitHub - + + View on GitHub + + -
-

DragDrop Annotate

+
+

DragDrop Annotate

Plugin Examples

- +
diff --git a/index.md b/index.md index 9bd1091..1d685f1 100644 --- a/index.md +++ b/index.md @@ -28,11 +28,11 @@ Supports rectangle, and image annotations. The drag and drop functionality based ### Imports ```html - - + + - + diff --git a/src/dragDropAnnotate.js b/src/dragDropAnnotate.js index faee613..574f3ec 100644 --- a/src/dragDropAnnotate.js +++ b/src/dragDropAnnotate.js @@ -1121,16 +1121,16 @@ import "./dragDropAnnotate.scss"; "hint": { //hint settings "enabled": true, //if false, not show the hint "message": "Drag and Drop to Annotate", //hint message - "icon": '', //hint icon + "icon": '', //hint icon "messageMove": "Drag to set new annotation position", //message on mouseover annotation - "iconMove": '', //icon on mouseover annotation + "iconMove": '', //icon on mouseover annotation "messageRotate": "Move to set new annotation rotation", //message on start rotate annotation - "iconRotate": '', //icon on start rotate annotation + "iconRotate": '', //icon on start rotate annotation }, "popup": { //popup settings - "buttonRotate": '', //icon or text of rotate button + "buttonRotate": '', //icon or text of rotate button "tooltipRotate": "Change the rotation of annotation", //tooltip of rotate button - "buttonRemove": '', //icon or text of remove button + "buttonRemove": '', //icon or text of remove button "tooltipRemove": "Remove the annotation", //tooltip of remove button "tooltipText": "Text of annotation", //tooltip of annotation text "tooltipTextarea": "Text of annotation", //tooltip of annotation textarea input diff --git a/src/dragDropAnnotate.min.js b/src/dragDropAnnotate.min.js index f205d65..2ced106 100644 --- a/src/dragDropAnnotate.min.js +++ b/src/dragDropAnnotate.min.js @@ -10,4 +10,4 @@ * DragDropAnnotate is a lightweight image annotation tool that make it easy to add custom markers, comments, hotspots to images via drag and drop. * Supports rectangle, and image annotations. The drag and drop functionality based on jQuery UI draggable widget. */ -{var T=jQuery;const R={MOUSE_MOVE_ANNOTATABLE_ITEM:"onMouseMoveOverItem",ANNOTATION_REMOVED:"onAnnotationRemoved",ANNOTATION_CREATED:"onAnnotationCreated",ANNOTATION_UPDATED:"onAnnotationUpdated"},L={DISABLED:"disabled",NO_TEXT:"noText",FULL:"full"},I={ID:"id",TEXT:"text",TIMESTAMP:"timestamp",PROGRESSIVE:"progressive"};let A=!1,w=!1;function E(t){return{x:t.x,y:t.y}}function t(t){var e=t.changedTouches[0],o=(w=!0,document.createEvent("MouseEvent"));o.initMouseEvent({touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"}[t.type],!0,!0,window,1,e.screenX,e.screenY,e.clientX,e.clientY,!1,!1,!1,!1,0,null),e.target.dispatchEvent(o),A&&(t.preventDefault(),(t=document.elementFromPoint(e.clientX,e.clientY))instanceof HTMLCanvasElement)&&t.dispatchEvent(o)}function r(t,d,i){const a=T(''),r=(t.append(a),new N(this,t,d)),s=new S(t,d);let c=[],l=0,h=void 0,o=void 0,n=void 0;const p=a[0].getContext("2d");let u=d.metadata.position.split("-");2!==u.length&&(u=["bottom","right"]);const f=this,g=(a.droppable({drop:function(t,e){o.geometry.update(m(e.offset.left,e.offset.top)),f.addAnnotation(o),o=void 0},over:function(t,e){e.helper.is(":hidden")||e.helper.hide(),o=new M(e.draggable.attr("annotation-id"),e.draggable[0],e.draggable.attr("annotation-text"),new O(m(e.offset.left,e.offset.top),e.draggable.attr("annotation-width")||e.draggable[0].naturalWidth,e.draggable.attr("annotation-height")||e.draggable[0].naturalHeight,e.draggable.attr("annotation-rotation")),e.draggable.attr("annotation-editable"),l+1)},out:function(t,e){e.helper.is(":hidden")&&e.helper.show(),o=void 0,f.redrawAnnotations()}}),a.mousemove(t=>{var t=g(t.offsetX,t.offsetY);i(R.MOUSE_MOVE_ANNOTATABLE_ITEM,E(t)),o?(f.redrawAnnotations(),o.geometry.update(t),b(o)):h?h(t):0===(t=x(t)).length?(n=void 0,a.css("cursor","default"),r.hide(),f.redrawAnnotations()):!r.isHidden()&&n===t[0]||(n!==t[0]&&(n=t[0],s.show&&s.show(d.hint.iconMove,d.hint.messageMove),a.css("cursor","move"),f.redrawAnnotations(n)),r.show(n,v()))}),a.mouseup(()=>{var t;h&&(t=h(),i(R.ANNOTATION_UPDATED,[t.new.print(),t.old_print]),h=void 0),A=!1}),a.mousedown(t=>{if(w&&!A&&(A=!0,t.type="mousemove",a.trigger(t)),n&&!h){w||r.hide(!0);const o=n.print();let e=g(t.offsetX,t.offsetY);e={x:e.x-n.geometry.center.x,y:e.y-n.geometry.center.y},h=function(t){return t&&(t={x:t.x-e.x,y:t.y-e.y},w&&t.x!==n.geometry.center.x&&t.y!==n.geometry.center.y&&r.hide(),n.geometry.update({x:t.x,y:t.y}),f.redrawAnnotations(n)),{new:n,old_print:o}}}}),function(t,e){return{x:parseInt(t/a.width()*a[0].width),y:parseInt(e/a.height()*a[0].height)}}),e=function(t,e){return{x:parseInt(t*a.width()/a[0].width),y:parseInt(e*a.height()/a[0].height)}},m=function(t,e){return g(t-a.offset().left,e-a.offset().top)},v=function(){var t;if(n)return t=n.geometry.getLowerVertex(),e(t.x,t.y)},b=function(t,o=!1){var n=+t.geometry.width,i=+t.geometry.height,a=-n/2,r=-i/2;if(p.save(),p.beginPath(),p.translate(t.geometry.center.x,t.geometry.center.y),p.rotate(-t.geometry.rotation*Math.PI/180),t.image&&p.drawImage(t.image,a,r,n,i),!t.image||d.annotationStyle.imageBorder){let t,e;t=o?(e=d.annotationStyle.hiBorderColor,d.annotationStyle.hiBorderSize):(e=d.annotationStyle.borderColor,d.annotationStyle.borderSize),p.lineJoin="round",p.lineWidth=1,p.strokeStyle="#000000",p.strokeRect(.5+a,.5+r,n-1,i-1),p.lineJoin="miter",p.lineWidth=t,p.strokeStyle=e,p.strokeRect(1+a+t/2,1+r+t/2,n-2-t,i-2-t)}d.metadata.enabled&&y(t,a,r,n,i),p.restore()},y=function(t,n,i,a,r){var s=d.metadata;if(s.enabled){let o;if("function"==typeof s.value)o=s.value(t);else switch(s.value){case I.ID:o=t.id?.toString();break;case I.TEXT:o=t.text;break;case I.TIMESTAMP:o=new Date(t.created_at)?.toLocaleString();break;default:I.PROGRESSIVE;o=t.progressive}if(""!==o&&void 0!==o){let t;switch(u[0]){case"top":t=i;break;case"middle":t=i+r/2;break;default:t=i+r}let e;switch(u[1]){case"left":e=n;break;case"center":e=n+a/2;break;default:e=n+a}t+=parseInt(s.offsetY)??0,e+=parseInt(s.offsetX)??0,p.font=s.fontSize+" "+s.fontFamily,p.fillStyle=s.color,p.textAlign="center",p.fillText(o,e,t)}}},x=function(e){let o=[];return c.forEach(t=>{t.geometry.intersect(e.x,e.y)&&o.push(t)}),o=o.reverse()};this.resize=function(t,e){a[0].width=t,a[0].height=e},this.clear=function(){p.clearRect(0,0,a[0].width,a[0].height)},this.redrawAnnotations=function(o=void 0){f.clear();let n=void 0;c.forEach(t=>{var e=!!o&&(o instanceof Object?t===o:t.id===o);e&&d.annotationStyle.foreground?(n&&b(n,!0),n=t):b(t,e)}),n&&b(n,!0)},this.getAnnotations=function(){return c},this.addAnnotation=function(o,t=void 0,n=!0){if(l++,o.progressive=l,t)-1<(t=c.indexOf(t))&&(c[t]=o,f.redrawAnnotations());else{let e=!0;for(let t=0;tt.id!==e),f.redrawAnnotations()):(c=[],f.clear())},this.editTextAnnotation=function(t,e,o=!0){var n;t.editable===L.FULL&&(n=t.print(),t.text=e,o)&&i(R.ANNOTATION_UPDATED,[t.print(),n])}}function s(t,e){function n(t,e,o){o=o?a(o):void 0,i.addAnnotation(new M(t.id,e,t.text,new O(t.position.center,t.width||e.naturalWidth,t.height||e.naturalHeight,t.rotation),t.editable),o,!1)}this.image=t instanceof T?t:T(t),!this.image[0]instanceof Image&&T.error("Annotable it must be an image."),this.image.wrap(T('
'));const o=this,i=new r(this.image.parent(),e,function(t,e){o.image.trigger(t,e)}),a=(this.image[0].complete?i.resize(this.image[0].naturalWidth,this.image[0].naturalHeight):this.image[0].onload=function(){i.resize(this.naturalWidth,this.naturalHeight)},function(e){var t=i.getAnnotations().find(t=>t.isEqualPrint(e));return t||T.error("Annotation not found."),t});this.addAnnotation=function(t,e=void 0){var o;t.position&&t.position.center&&t.position.center.x&&t.position.center.y||T.error("Invalid annotation."),t.image?t.image instanceof Image?n(t,t.image,e):((!t.image instanceof String||!t.image.includes("http"))&&T.error("Image must be a URL or an instance of Image."),(o=new Image).src=t.image,o.onload=function(){n(t,this,e)}):n(t,{},e)},this.getAnnotations=function(){const e=[];return i.getAnnotations().forEach(t=>{e.push(t.print())}),e},this.removeAnnotation=function(t){i.removeAnnotation(a(t),!1)},this.removeAll=function(t=void 0){i.removeAll(t)},this.hideAnnotations=function(){i.clear()},this.showAnnotations=function(){i.redrawAnnotations()},this.highlightAnnotation=function(t){i.redrawAnnotations(t instanceof Object?a(t):t)},this.on=function(t,e){this.image.on(t,e)}}document.addEventListener("touchstart",t,{passive:!1}),document.addEventListener("touchmove",t,{passive:!1}),document.addEventListener("touchend",t,{passive:!1}),document.addEventListener("touchcancel",t,{passive:!1});const O=function(t,e=50,o=50,n=0){this.center=t,this.width=e,this.height=o,this.rotation=n,this.area=e*o;let r=void 0;function i(){var t=s.rotation*Math.PI/180,e=Math.sin(t),t=Math.cos(t),o=s.width/2,n=s.height/2,i=o*t,a=n*e,o=o*e,e=n*t;(r={}).topR={x:s.center.x+i-a,y:s.center.y-o-e},r.topL={x:s.center.x-i-a,y:s.center.y+o-e},r.botL={x:s.center.x-i+a,y:s.center.y+o+e},r.botR={x:s.center.x+i+a,y:s.center.y-o+e}}const s=this;this.intersect=function(t,e){r||i();var o=Math.abs(t*r.topL.y-r.topL.x*e+(r.botR.x*e-t*r.botR.y)+(r.topL.x*r.botR.y-r.botR.x*r.topL.y))/2;return(o+=Math.abs(t*r.botR.y-r.botR.x*e+(r.botL.x*e-t*r.botL.y)+(r.botR.x*r.botL.y-r.botL.x*r.botR.y))/2)+Math.abs(t*r.botL.y-r.botL.x*e+(r.topR.x*e-t*r.topR.y)+(r.botL.x*r.topR.y-r.topR.x*r.botL.y))/2+Math.abs(t*r.topR.y-r.topR.x*e+(r.topL.x*e-t*r.topL.y)+(r.topR.x*r.topL.y-r.topL.x*r.topR.y))/2<=s.area},this.getLowerVertex=function(){return r||i(),r.lowerVertex||(r.lowerVertex={x:r.botL.x,y:r.botL.y},Object.keys(r).forEach(t=>{r.lowerVertex.y'+e.hint.message+"
"),a=T('
'+e.hint.icon+"
");var n=T('
');n.append(i),n.append(a),t.append(n);let o=void 0;const r=this;a.mouseover(()=>{r.show()}),a.mouseout(()=>{r.hide()}),T(e.draggable).mouseover(()=>{r.show()}),this.show=function(t,e){clearTimeout(o),t&&a.html(t),e&&i.html(e),i.css("opacity",1),o=setTimeout(()=>{r.hide()},3e3)},this.hide=function(){clearTimeout(o),i.css("opacity",0),i.html(e.hint.message),a.html(e.hint.icon)}}},N=function(t,e,o){const n=T('
');var i=T('"),a=T('");n.append(i),n.append(a);const r=T('
').hide(),s=T(''),d=T('
');r.append(T("
").append(s)),r.append(d),r.append(n),e.append(r);let c=!1,l=void 0;const h=this;r.mouseover(()=>c=!0),r.mouseout(()=>c=!1),i.click(()=>{t.startRotateAnnotation(l)}),a.click(()=>{t.removeAnnotation(l)}),s.keyup(()=>{t.editTextAnnotation(l,s.val())}),this.show=function(t,e){(l=t).text?d.show().html(l.text):d.hide(),l.editable===L.FULL?(d.hide(),s.show().prop("disabled",!1).removeAttr("style").val(l.text)):s.hide().prop("disabled",!0),l.editable!==L.DISABLED?n.show():n.hide(),r.css({top:e.y,left:e.x}).show()},this.hide=function(t=!1){if(!h.isHidden()&&(w||!c||t)){const e=setTimeout(()=>{!w&&c&&!t||(l=void 0,r.hide()),clearTimeout(e)},300)}},this.isHidden=function(){return r.is(":hidden")}};T.fn.annotable=function(o){let n={},i=void 0;"object"!=typeof o&&o||(n=T.extend(!0,{},T.fn.annotable.defaults,o),i=1',messageMove:"Drag to set new annotation position",iconMove:'',messageRotate:"Move to set new annotation rotation",iconRotate:''},popup:{buttonRotate:'',tooltipRotate:"Change the rotation of annotation",buttonRemove:'',tooltipRemove:"Remove the annotation",tooltipText:"Text of annotation",tooltipTextarea:"Text of annotation",placeholderTextarea:"Enter Text"},annotationStyle:{borderColor:"#ffffff",borderSize:2,hiBorderColor:"#fff000",hiBorderSize:2.2,imageBorder:!0,foreground:!0},metadata:{enabled:!1,value:I.PROGRESSIVE,fontSize:"40px",fontFamily:"sans-serif",color:"#ff0000",position:"bottom-right",offsetX:-20,offsetY:-10}}}})(); \ No newline at end of file +{var T=jQuery;const R={MOUSE_MOVE_ANNOTATABLE_ITEM:"onMouseMoveOverItem",ANNOTATION_REMOVED:"onAnnotationRemoved",ANNOTATION_CREATED:"onAnnotationCreated",ANNOTATION_UPDATED:"onAnnotationUpdated"},L={DISABLED:"disabled",NO_TEXT:"noText",FULL:"full"},I={ID:"id",TEXT:"text",TIMESTAMP:"timestamp",PROGRESSIVE:"progressive"};let A=!1,w=!1;function E(t){return{x:t.x,y:t.y}}function t(t){var e=t.changedTouches[0],o=(w=!0,document.createEvent("MouseEvent"));o.initMouseEvent({touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"}[t.type],!0,!0,window,1,e.screenX,e.screenY,e.clientX,e.clientY,!1,!1,!1,!1,0,null),e.target.dispatchEvent(o),A&&(t.preventDefault(),(t=document.elementFromPoint(e.clientX,e.clientY))instanceof HTMLCanvasElement)&&t.dispatchEvent(o)}function r(t,d,i){const a=T(''),r=(t.append(a),new N(this,t,d)),s=new S(t,d);let l=[],c=0,h=void 0,o=void 0,n=void 0;const p=a[0].getContext("2d");let u=d.metadata.position.split("-");2!==u.length&&(u=["bottom","right"]);const f=this,g=(a.droppable({drop:function(t,e){o.geometry.update(m(e.offset.left,e.offset.top)),f.addAnnotation(o),o=void 0},over:function(t,e){e.helper.is(":hidden")||e.helper.hide(),o=new M(e.draggable.attr("annotation-id"),e.draggable[0],e.draggable.attr("annotation-text"),new O(m(e.offset.left,e.offset.top),e.draggable.attr("annotation-width")||e.draggable[0].naturalWidth,e.draggable.attr("annotation-height")||e.draggable[0].naturalHeight,e.draggable.attr("annotation-rotation")),e.draggable.attr("annotation-editable"),c+1)},out:function(t,e){e.helper.is(":hidden")&&e.helper.show(),o=void 0,f.redrawAnnotations()}}),a.mousemove(t=>{var t=g(t.offsetX,t.offsetY);i(R.MOUSE_MOVE_ANNOTATABLE_ITEM,E(t)),o?(f.redrawAnnotations(),o.geometry.update(t),b(o)):h?h(t):0===(t=x(t)).length?(n=void 0,a.css("cursor","default"),r.hide(),f.redrawAnnotations()):!r.isHidden()&&n===t[0]||(n!==t[0]&&(n=t[0],s.show&&s.show(d.hint.iconMove,d.hint.messageMove),a.css("cursor","move"),f.redrawAnnotations(n)),r.show(n,v()))}),a.mouseup(()=>{var t;h&&(t=h(),i(R.ANNOTATION_UPDATED,[t.new.print(),t.old_print]),h=void 0),A=!1}),a.mousedown(t=>{if(w&&!A&&(A=!0,t.type="mousemove",a.trigger(t)),n&&!h){w||r.hide(!0);const o=n.print();let e=g(t.offsetX,t.offsetY);e={x:e.x-n.geometry.center.x,y:e.y-n.geometry.center.y},h=function(t){return t&&(t={x:t.x-e.x,y:t.y-e.y},w&&t.x!==n.geometry.center.x&&t.y!==n.geometry.center.y&&r.hide(),n.geometry.update({x:t.x,y:t.y}),f.redrawAnnotations(n)),{new:n,old_print:o}}}}),function(t,e){return{x:parseInt(t/a.width()*a[0].width),y:parseInt(e/a.height()*a[0].height)}}),e=function(t,e){return{x:parseInt(t*a.width()/a[0].width),y:parseInt(e*a.height()/a[0].height)}},m=function(t,e){return g(t-a.offset().left,e-a.offset().top)},v=function(){var t;if(n)return t=n.geometry.getLowerVertex(),e(t.x,t.y)},b=function(t,o=!1){var n=+t.geometry.width,i=+t.geometry.height,a=-n/2,r=-i/2;if(p.save(),p.beginPath(),p.translate(t.geometry.center.x,t.geometry.center.y),p.rotate(-t.geometry.rotation*Math.PI/180),t.image&&p.drawImage(t.image,a,r,n,i),!t.image||d.annotationStyle.imageBorder){let t,e;t=o?(e=d.annotationStyle.hiBorderColor,d.annotationStyle.hiBorderSize):(e=d.annotationStyle.borderColor,d.annotationStyle.borderSize),p.lineJoin="round",p.lineWidth=1,p.strokeStyle="#000000",p.strokeRect(.5+a,.5+r,n-1,i-1),p.lineJoin="miter",p.lineWidth=t,p.strokeStyle=e,p.strokeRect(1+a+t/2,1+r+t/2,n-2-t,i-2-t)}d.metadata.enabled&&y(t,a,r,n,i),p.restore()},y=function(t,n,i,a,r){var s=d.metadata;if(s.enabled){let o;if("function"==typeof s.value)o=s.value(t);else switch(s.value){case I.ID:o=t.id?.toString();break;case I.TEXT:o=t.text;break;case I.TIMESTAMP:o=new Date(t.created_at)?.toLocaleString();break;default:I.PROGRESSIVE;o=t.progressive}if(""!==o&&void 0!==o){let t;switch(u[0]){case"top":t=i;break;case"middle":t=i+r/2;break;default:t=i+r}let e;switch(u[1]){case"left":e=n;break;case"center":e=n+a/2;break;default:e=n+a}t+=parseInt(s.offsetY)??0,e+=parseInt(s.offsetX)??0,p.font=s.fontSize+" "+s.fontFamily,p.fillStyle=s.color,p.textAlign="center",p.fillText(o,e,t)}}},x=function(e){let o=[];return l.forEach(t=>{t.geometry.intersect(e.x,e.y)&&o.push(t)}),o=o.reverse()};this.resize=function(t,e){a[0].width=t,a[0].height=e},this.clear=function(){p.clearRect(0,0,a[0].width,a[0].height)},this.redrawAnnotations=function(o=void 0){f.clear();let n=void 0;l.forEach(t=>{var e=!!o&&(o instanceof Object?t===o:t.id===o);e&&d.annotationStyle.foreground?(n&&b(n,!0),n=t):b(t,e)}),n&&b(n,!0)},this.getAnnotations=function(){return l},this.addAnnotation=function(o,t=void 0,n=!0){if(c++,o.progressive=c,t)-1<(t=l.indexOf(t))&&(l[t]=o,f.redrawAnnotations());else{let e=!0;for(let t=0;tt.id!==e),f.redrawAnnotations()):(l=[],f.clear())},this.editTextAnnotation=function(t,e,o=!0){var n;t.editable===L.FULL&&(n=t.print(),t.text=e,o)&&i(R.ANNOTATION_UPDATED,[t.print(),n])}}function s(t,e){function n(t,e,o){o=o?a(o):void 0,i.addAnnotation(new M(t.id,e,t.text,new O(t.position.center,t.width||e.naturalWidth,t.height||e.naturalHeight,t.rotation),t.editable),o,!1)}this.image=t instanceof T?t:T(t),!this.image[0]instanceof Image&&T.error("Annotable it must be an image."),this.image.wrap(T('
'));const o=this,i=new r(this.image.parent(),e,function(t,e){o.image.trigger(t,e)}),a=(this.image[0].complete?i.resize(this.image[0].naturalWidth,this.image[0].naturalHeight):this.image[0].onload=function(){i.resize(this.naturalWidth,this.naturalHeight)},function(e){var t=i.getAnnotations().find(t=>t.isEqualPrint(e));return t||T.error("Annotation not found."),t});this.addAnnotation=function(t,e=void 0){var o;t.position&&t.position.center&&t.position.center.x&&t.position.center.y||T.error("Invalid annotation."),t.image?t.image instanceof Image?n(t,t.image,e):((!t.image instanceof String||!t.image.includes("http"))&&T.error("Image must be a URL or an instance of Image."),(o=new Image).src=t.image,o.onload=function(){n(t,this,e)}):n(t,{},e)},this.getAnnotations=function(){const e=[];return i.getAnnotations().forEach(t=>{e.push(t.print())}),e},this.removeAnnotation=function(t){i.removeAnnotation(a(t),!1)},this.removeAll=function(t=void 0){i.removeAll(t)},this.hideAnnotations=function(){i.clear()},this.showAnnotations=function(){i.redrawAnnotations()},this.highlightAnnotation=function(t){i.redrawAnnotations(t instanceof Object?a(t):t)},this.on=function(t,e){this.image.on(t,e)}}document.addEventListener("touchstart",t,{passive:!1}),document.addEventListener("touchmove",t,{passive:!1}),document.addEventListener("touchend",t,{passive:!1}),document.addEventListener("touchcancel",t,{passive:!1});const O=function(t,e=50,o=50,n=0){this.center=t,this.width=e,this.height=o,this.rotation=n,this.area=e*o;let r=void 0;function i(){var t=s.rotation*Math.PI/180,e=Math.sin(t),t=Math.cos(t),o=s.width/2,n=s.height/2,i=o*t,a=n*e,o=o*e,e=n*t;(r={}).topR={x:s.center.x+i-a,y:s.center.y-o-e},r.topL={x:s.center.x-i-a,y:s.center.y+o-e},r.botL={x:s.center.x-i+a,y:s.center.y+o+e},r.botR={x:s.center.x+i+a,y:s.center.y-o+e}}const s=this;this.intersect=function(t,e){r||i();var o=Math.abs(t*r.topL.y-r.topL.x*e+(r.botR.x*e-t*r.botR.y)+(r.topL.x*r.botR.y-r.botR.x*r.topL.y))/2;return(o+=Math.abs(t*r.botR.y-r.botR.x*e+(r.botL.x*e-t*r.botL.y)+(r.botR.x*r.botL.y-r.botL.x*r.botR.y))/2)+Math.abs(t*r.botL.y-r.botL.x*e+(r.topR.x*e-t*r.topR.y)+(r.botL.x*r.topR.y-r.topR.x*r.botL.y))/2+Math.abs(t*r.topR.y-r.topR.x*e+(r.topL.x*e-t*r.topL.y)+(r.topR.x*r.topL.y-r.topL.x*r.topR.y))/2<=s.area},this.getLowerVertex=function(){return r||i(),r.lowerVertex||(r.lowerVertex={x:r.botL.x,y:r.botL.y},Object.keys(r).forEach(t=>{r.lowerVertex.y'+e.hint.message+""),a=T('
'+e.hint.icon+"
");var n=T('
');n.append(i),n.append(a),t.append(n);let o=void 0;const r=this;a.mouseover(()=>{r.show()}),a.mouseout(()=>{r.hide()}),T(e.draggable).mouseover(()=>{r.show()}),this.show=function(t,e){clearTimeout(o),t&&a.html(t),e&&i.html(e),i.css("opacity",1),o=setTimeout(()=>{r.hide()},3e3)},this.hide=function(){clearTimeout(o),i.css("opacity",0),i.html(e.hint.message),a.html(e.hint.icon)}}},N=function(t,e,o){const n=T('
');var i=T('"),a=T('");n.append(i),n.append(a);const r=T('
').hide(),s=T(''),d=T('
');r.append(T("
").append(s)),r.append(d),r.append(n),e.append(r);let l=!1,c=void 0;const h=this;r.mouseover(()=>l=!0),r.mouseout(()=>l=!1),i.click(()=>{t.startRotateAnnotation(c)}),a.click(()=>{t.removeAnnotation(c)}),s.keyup(()=>{t.editTextAnnotation(c,s.val())}),this.show=function(t,e){(c=t).text?d.show().html(c.text):d.hide(),c.editable===L.FULL?(d.hide(),s.show().prop("disabled",!1).removeAttr("style").val(c.text)):s.hide().prop("disabled",!0),c.editable!==L.DISABLED?n.show():n.hide(),r.css({top:e.y,left:e.x}).show()},this.hide=function(t=!1){if(!h.isHidden()&&(w||!l||t)){const e=setTimeout(()=>{!w&&l&&!t||(c=void 0,r.hide()),clearTimeout(e)},300)}},this.isHidden=function(){return r.is(":hidden")}};T.fn.annotable=function(o){let n={},i=void 0;"object"!=typeof o&&o||(n=T.extend(!0,{},T.fn.annotable.defaults,o),i=1',messageMove:"Drag to set new annotation position",iconMove:'',messageRotate:"Move to set new annotation rotation",iconRotate:''},popup:{buttonRotate:'',tooltipRotate:"Change the rotation of annotation",buttonRemove:'',tooltipRemove:"Remove the annotation",tooltipText:"Text of annotation",tooltipTextarea:"Text of annotation",placeholderTextarea:"Enter Text"},annotationStyle:{borderColor:"#ffffff",borderSize:2,hiBorderColor:"#fff000",hiBorderSize:2.2,imageBorder:!0,foreground:!0},metadata:{enabled:!1,value:I.PROGRESSIVE,fontSize:"40px",fontFamily:"sans-serif",color:"#ff0000",position:"bottom-right",offsetX:-20,offsetY:-10}}}})(); \ No newline at end of file