From 6e9761b892d510ea19270294b14e461a639e93af Mon Sep 17 00:00:00 2001 From: ninobonanno Date: Tue, 17 Mar 2020 01:20:10 +0100 Subject: [PATCH] fix foreground bug --- src/dragDropAnnotate.js | 8 ++++++-- src/dragDropAnnotate.min.js | 2 +- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/dragDropAnnotate.js b/src/dragDropAnnotate.js index 93ea491..1aecb0f 100644 --- a/src/dragDropAnnotate.js +++ b/src/dragDropAnnotate.js @@ -466,8 +466,12 @@ var foregroundAnno = undefined; _annotations.forEach(annotation => { var isEqual = (!annotationToHighlight) ? false : ((annotationToHighlight instanceof Object) ? (annotation == annotationToHighlight) : annotation.id === annotationToHighlight); - if (isEqual && opts["annotationStyle"]["foreground"]) foregroundAnno = annotation; - else _drawAnnotation(annotation, isEqual); + if (isEqual && opts["annotationStyle"]["foreground"]) { + if (foregroundAnno) _drawAnnotation(foregroundAnno, true); + foregroundAnno = annotation; + return; + } + _drawAnnotation(annotation, isEqual); }); if (foregroundAnno) _drawAnnotation(foregroundAnno, true); }; diff --git a/src/dragDropAnnotate.min.js b/src/dragDropAnnotate.min.js index 0dfbfb7..6774e24 100644 --- a/src/dragDropAnnotate.min.js +++ b/src/dragDropAnnotate.min.js @@ -1 +1 @@ -"use strict";!function(t){var e="onMouseMoveOverItem",o="onAnnotationRemoved",n="onAnnotationCreated",i="onAnnotationUpdated";function a(t){return{x:t.x,y:t.y}}var r=function(t,e=50,o=50,n=0){this.center=t,this.width=e,this.height=o,this.rotation=n,this.area=e*o;var i=void 0,r=this,s=function(){var t=r.rotation*Math.PI/180,e=Math.sin(t),o=Math.cos(t),n=r.width/2,a=r.height/2,s=n*o,d=a*e,h=n*e,c=a*o;(i={}).topR={x:r.center.x+s-d,y:r.center.y-h-c},i.topL={x:r.center.x-s-d,y:r.center.y+h-c},i.botL={x:r.center.x-s+d,y:r.center.y+h+c},i.botR={x:r.center.x+s+d,y:r.center.y-h+c}};this.intersect=function(t,e){i||s();var o=Math.abs(t*i.topL.y-i.topL.x*e+(i.botR.x*e-t*i.botR.y)+(i.topL.x*i.botR.y-i.botR.x*i.topL.y))/2;return o+=Math.abs(t*i.botR.y-i.botR.x*e+(i.botL.x*e-t*i.botL.y)+(i.botR.x*i.botL.y-i.botL.x*i.botR.y))/2,o+=Math.abs(t*i.botL.y-i.botL.x*e+(i.topR.x*e-t*i.topR.y)+(i.botL.x*i.topR.y-i.topR.x*i.botL.y))/2,(o+=Math.abs(t*i.topR.y-i.topR.x*e+(i.topL.x*e-t*i.topL.y)+(i.topR.x*i.topL.y-i.topL.x*i.topR.y))/2)<=r.area},this.getLowerVertex=function(){return i||s(),i.lowerVertex||(i.lowerVertex={x:i.botL.x,y:i.botL.y},Object.keys(i).forEach(t=>{i.lowerVertex.y360;)e-=360;r.rotation=e}i=void 0},this.print=function(){return i||s(),{position:{center:a(r.center),topL:a(i.topL),topR:a(i.topR),botL:a(i.botL),botR:a(i.botR)},rotation:r.rotation,width:e,height:o}}},s=function(t,e,o,n,i=!0){this.id=t,this.text=o,e instanceof Image&&(this.image=e),this.geometry=n,this.editable=i,this.created_at=Date.now();var a=this;this.print=function(){return{id:a.id,image:a.image?a.image.src:void 0,text:a.text,...a.geometry.print(),editable:a.editable,created_at:a.created_at}},this.isEqualPrint=function(t){return!(!t instanceof Object)&&t.created_at==a.created_at}},d=function(e,o){if(o.hint.enabled){var n=t('
'+o.hint.message+"
"),i=t('
'+o.hint.icon+"
"),a=t('
');a.append(n),a.append(i),e.append(a);var r=void 0,s=this;i.mouseover(function(){s.show()}),i.mouseout(function(){s.hide()}),t(o.draggable).mouseover(function(){s.show()}),this.show=function(t,e){clearTimeout(r),t&&i.html(t),e&&n.html(e),n.css("opacity",1),r=setTimeout(function(){s.hide()},3e3)},this.hide=function(){clearTimeout(r),n.css("opacity",0),n.html(o.hint.message),i.html(o.hint.icon)}}},h=function(e,o,n){var i=t('
'),a=t('"),r=t('");i.append(a),i.append(r);var s=t('
').hide();s.append(t('
')),s.append(i),o.append(s);var d=!1,h=void 0,c=this;s.mouseover(function(t){d=!0}),s.mouseout(function(t){d=!1}),a.click(function(t){h.editable&&e.startRotateAnnotation(h)}),r.click(function(t){h.editable&&e.removeAnnotation(h)}),this.show=function(t,e){(h=t).text?s.children(".dda-popup-text").show().html(h.text):s.children(".dda-popup-text").hide(),h.editable?i.show():i.hide(),s.css({top:e.y,left:e.x}).show()},this.hide=function(t=!1){if(!(c.isHidden()||d&&!t))var e=setTimeout(function(){d&&!t||(h=void 0,s.hide()),clearTimeout(e)},300)},this.isHidden=function(){return s.is(":hidden")}},c=function(c,u,l){var f=t('');c.append(f);var p=new h(this,c,u),g=new d(c,u),m=[],v=void 0,y=void 0,b=void 0,x=f[0].getContext("2d"),w=this;f.droppable({drop:function(t,e){y.geometry.update(R(e.offset.left,e.offset.top)),w.addAnnotation(y),y=void 0},over:function(t,e){e.helper.is(":hidden")||e.helper.hide(),y=new s(e.draggable.attr("annotation-id"),e.draggable[0],e.draggable.attr("annotation-text"),new r(R(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")))},out:function(t,e){e.helper.is(":hidden")&&e.helper.show(),y=void 0,w.redrawAnnotations()}}),f.mousemove(function(t){var o=A(t.offsetX,t.offsetY);if(l(e,a(o)),y)return w.redrawAnnotations(),y.geometry.update(o),void M(y);if(v)v(o);else{var n=I(o);if(0==n.length)return b=n=void 0,f.css("cursor","default"),p.hide(),void w.redrawAnnotations();(p.isHidden()||b!=n[0])&&(b!=n[0]&&(b=n[0],g.show&&g.show(u.hint.iconMove,u.hint.messageMove),f.css("cursor","move"),w.redrawAnnotations(b)),p.show(b,L()))}}),f.mouseup(function(t){if(v){var e=v();l(i,[e.new.print(),e.old_print]),v=void 0}}),f.mousedown(function(t){if(b&&!v){p.hide(!0);var e=b.print(),o=A(t.offsetX,t.offsetY);o={x:o.x-b.geometry.center.x,y:o.y-b.geometry.center.y},v=function(t){return t&&(b.geometry.update({x:t.x-o.x,y:t.y-o.y}),w.redrawAnnotations(b)),{new:b,old_print:e}}}});var A=function(t,e){return{x:parseInt(t/f.width()*f[0].width),y:parseInt(e/f.height()*f[0].height)}},R=function(t,e){return A(t-f.offset().left,e-f.offset().top)},L=function(){if(b){var t,e,o=b.geometry.getLowerVertex();return t=o.x,e=o.y,{x:parseInt(t*f.width()/f[0].width),y:parseInt(e*f.height()/f[0].height)}}},M=function(t,e=!1){var o,n,i=-t.geometry.width/2,a=-t.geometry.height/2;(x.save(),x.beginPath(),x.translate(t.geometry.center.x,t.geometry.center.y),x.rotate(-t.geometry.rotation*Math.PI/180),t.image&&x.drawImage(t.image,i,a,t.geometry.width,t.geometry.height),!t.image||u.annotationStyle.imageBorder)&&(e?(n=u.annotationStyle.hiBorderColor,o=u.annotationStyle.hiBorderSize):(n=u.annotationStyle.borderColor,o=u.annotationStyle.borderSize),x.lineJoin="round",x.lineWidth=1,x.strokeStyle="#000000",x.strokeRect(i+.5,a+.5,t.geometry.width-1,t.geometry.height-1),x.lineJoin="miter",x.lineWidth=o,x.strokeStyle=n,x.strokeRect(i+1+o/2,a+1+o/2,t.geometry.width-2-o,t.geometry.height-2-o));x.restore()},I=function(t){var e=[];return m.forEach(o=>{o.geometry.intersect(t.x,t.y)&&e.push(o)}),e=e.reverse()};this.resize=function(t,e){f[0].width=t,f[0].height=e},this.clear=function(){x.clearRect(0,0,f[0].width,f[0].height)},this.redrawAnnotations=function(t){w.clear();var e=void 0;m.forEach(o=>{var n=!!t&&(t instanceof Object?o==t:o.id===t);n&&u.annotationStyle.foreground?e=o:M(o,n)}),e&&M(e,!0)},this.getAnnotations=function(){return m},this.addAnnotation=function(t,e,o=!0){if(e){var i=m.indexOf(e);i>-1&&(m[i]=t,w.redrawAnnotations())}else{var a=!0;for(let e=0;ee.id!==t),void w.redrawAnnotations();m=[],w.clear()}},u=function(e,o){this.image=e instanceof t?e:t(e),!this.image[0]instanceof Image&&t.error("Annotable it must be an image."),this.image.wrap(t('
'));var n=this,i=new c(this.image.parent(),o,function(t,e){n.image.trigger(t,e)});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)};var a=function(t,e,o){var n=o?d(o):void 0;i.addAnnotation(new s(t.id,e,t.text,new r(t.position.center,t.width||e.naturalWidth,t.height||e.naturalHeight,t.rotation),t.editable),n,!1)},d=function(e){var o=i.getAnnotations().find(function(t){return t.isEqualPrint(e)});return o||t.error("Annotation not found."),o};this.addAnnotation=function(e,o){if(e.position&&e.position.center&&e.position.center.x&&e.position.center.y||t.error("Invalid annotation."),e.image)if(e.image instanceof Image)a(e,e.image,o);else{(!e.image instanceof String||!e.image.includes("http"))&&t.error("Image must be a URL or an instance of Image.");var n=new Image;n.src=e.image,n.onload=function(){a(e,this,o)}}else a(e,{},o)},this.getAnnotations=function(){var t=[];return i.getAnnotations().forEach(e=>{t.push(e.print())}),t},this.removeAnnotation=function(t){i.removeAnnotation(d(t),!1)},this.removeAll=function(t){i.removeAll(t)},this.hideAnnotations=function(){i.clear()},this.showAnnotations=function(){i.redrawAnnotations()},this.highlightAnnotation=function(t){i.redrawAnnotations(t instanceof Object?d(t):t)},this.on=function(t,e){this.image.on(t,e)}};t.fn.annotable=function(e){if("object"==typeof e||!e){var o=t.extend(!0,{},t.fn.annotable.defaults,e),n=this.length>1?[]:void 0;t(o.draggable).is(":ui-draggable")||t(o.draggable).draggable({helper:"clone",ghosting:!0,cursorAt:{top:0,left:0},revert:"invalid"})}var i=Array.prototype.slice.call(arguments,1);return this.each(function(){var a=t(this),r=a.data("annotable");if(r){if("string"==typeof e&&r[e])return r[e].apply(r,i);t.error("Method "+e+" does not exist on Annotable")}else o?(r=new u(this,o),a.data("annotable",r),n?n.push(r):n=r):t.error("Annotable is not initialized.")}),n},t.fn.annotable.defaults={draggable:".draggable-annotation",hint:{enabled:!0,message:"Drag and Drop to Annotate",icon:'',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"},annotationStyle:{borderColor:"#ffffff",borderSize:2,hiBorderColor:"#fff000",hiBorderSize:2.2,imageBorder:!0,foreground:!0}}}(jQuery); \ No newline at end of file +"use strict";!function(t){var e="onMouseMoveOverItem",o="onAnnotationRemoved",n="onAnnotationCreated",i="onAnnotationUpdated";function a(t){return{x:t.x,y:t.y}}var r=function(t,e=50,o=50,n=0){this.center=t,this.width=e,this.height=o,this.rotation=n,this.area=e*o;var i=void 0,r=this,s=function(){var t=r.rotation*Math.PI/180,e=Math.sin(t),o=Math.cos(t),n=r.width/2,a=r.height/2,s=n*o,d=a*e,h=n*e,c=a*o;(i={}).topR={x:r.center.x+s-d,y:r.center.y-h-c},i.topL={x:r.center.x-s-d,y:r.center.y+h-c},i.botL={x:r.center.x-s+d,y:r.center.y+h+c},i.botR={x:r.center.x+s+d,y:r.center.y-h+c}};this.intersect=function(t,e){i||s();var o=Math.abs(t*i.topL.y-i.topL.x*e+(i.botR.x*e-t*i.botR.y)+(i.topL.x*i.botR.y-i.botR.x*i.topL.y))/2;return o+=Math.abs(t*i.botR.y-i.botR.x*e+(i.botL.x*e-t*i.botL.y)+(i.botR.x*i.botL.y-i.botL.x*i.botR.y))/2,o+=Math.abs(t*i.botL.y-i.botL.x*e+(i.topR.x*e-t*i.topR.y)+(i.botL.x*i.topR.y-i.topR.x*i.botL.y))/2,(o+=Math.abs(t*i.topR.y-i.topR.x*e+(i.topL.x*e-t*i.topL.y)+(i.topR.x*i.topL.y-i.topL.x*i.topR.y))/2)<=r.area},this.getLowerVertex=function(){return i||s(),i.lowerVertex||(i.lowerVertex={x:i.botL.x,y:i.botL.y},Object.keys(i).forEach(t=>{i.lowerVertex.y360;)e-=360;r.rotation=e}i=void 0},this.print=function(){return i||s(),{position:{center:a(r.center),topL:a(i.topL),topR:a(i.topR),botL:a(i.botL),botR:a(i.botR)},rotation:r.rotation,width:e,height:o}}},s=function(t,e,o,n,i=!0){this.id=t,this.text=o,e instanceof Image&&(this.image=e),this.geometry=n,this.editable=i,this.created_at=Date.now();var a=this;this.print=function(){return{id:a.id,image:a.image?a.image.src:void 0,text:a.text,...a.geometry.print(),editable:a.editable,created_at:a.created_at}},this.isEqualPrint=function(t){return!(!t instanceof Object)&&t.created_at==a.created_at}},d=function(e,o){if(o.hint.enabled){var n=t('
'+o.hint.message+"
"),i=t('
'+o.hint.icon+"
"),a=t('
');a.append(n),a.append(i),e.append(a);var r=void 0,s=this;i.mouseover(function(){s.show()}),i.mouseout(function(){s.hide()}),t(o.draggable).mouseover(function(){s.show()}),this.show=function(t,e){clearTimeout(r),t&&i.html(t),e&&n.html(e),n.css("opacity",1),r=setTimeout(function(){s.hide()},3e3)},this.hide=function(){clearTimeout(r),n.css("opacity",0),n.html(o.hint.message),i.html(o.hint.icon)}}},h=function(e,o,n){var i=t('
'),a=t('"),r=t('");i.append(a),i.append(r);var s=t('
').hide();s.append(t('
')),s.append(i),o.append(s);var d=!1,h=void 0,c=this;s.mouseover(function(t){d=!0}),s.mouseout(function(t){d=!1}),a.click(function(t){h.editable&&e.startRotateAnnotation(h)}),r.click(function(t){h.editable&&e.removeAnnotation(h)}),this.show=function(t,e){(h=t).text?s.children(".dda-popup-text").show().html(h.text):s.children(".dda-popup-text").hide(),h.editable?i.show():i.hide(),s.css({top:e.y,left:e.x}).show()},this.hide=function(t=!1){if(!(c.isHidden()||d&&!t))var e=setTimeout(function(){d&&!t||(h=void 0,s.hide()),clearTimeout(e)},300)},this.isHidden=function(){return s.is(":hidden")}},c=function(c,u,l){var f=t('');c.append(f);var p=new h(this,c,u),g=new d(c,u),v=[],m=void 0,y=void 0,b=void 0,x=f[0].getContext("2d"),w=this;f.droppable({drop:function(t,e){y.geometry.update(R(e.offset.left,e.offset.top)),w.addAnnotation(y),y=void 0},over:function(t,e){e.helper.is(":hidden")||e.helper.hide(),y=new s(e.draggable.attr("annotation-id"),e.draggable[0],e.draggable.attr("annotation-text"),new r(R(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")))},out:function(t,e){e.helper.is(":hidden")&&e.helper.show(),y=void 0,w.redrawAnnotations()}}),f.mousemove(function(t){var o=A(t.offsetX,t.offsetY);if(l(e,a(o)),y)return w.redrawAnnotations(),y.geometry.update(o),void M(y);if(m)m(o);else{var n=I(o);if(0==n.length)return b=n=void 0,f.css("cursor","default"),p.hide(),void w.redrawAnnotations();(p.isHidden()||b!=n[0])&&(b!=n[0]&&(b=n[0],g.show&&g.show(u.hint.iconMove,u.hint.messageMove),f.css("cursor","move"),w.redrawAnnotations(b)),p.show(b,L()))}}),f.mouseup(function(t){if(m){var e=m();l(i,[e.new.print(),e.old_print]),m=void 0}}),f.mousedown(function(t){if(b&&!m){p.hide(!0);var e=b.print(),o=A(t.offsetX,t.offsetY);o={x:o.x-b.geometry.center.x,y:o.y-b.geometry.center.y},m=function(t){return t&&(b.geometry.update({x:t.x-o.x,y:t.y-o.y}),w.redrawAnnotations(b)),{new:b,old_print:e}}}});var A=function(t,e){return{x:parseInt(t/f.width()*f[0].width),y:parseInt(e/f.height()*f[0].height)}},R=function(t,e){return A(t-f.offset().left,e-f.offset().top)},L=function(){if(b){var t,e,o=b.geometry.getLowerVertex();return t=o.x,e=o.y,{x:parseInt(t*f.width()/f[0].width),y:parseInt(e*f.height()/f[0].height)}}},M=function(t,e=!1){var o,n,i=-t.geometry.width/2,a=-t.geometry.height/2;(x.save(),x.beginPath(),x.translate(t.geometry.center.x,t.geometry.center.y),x.rotate(-t.geometry.rotation*Math.PI/180),t.image&&x.drawImage(t.image,i,a,t.geometry.width,t.geometry.height),!t.image||u.annotationStyle.imageBorder)&&(e?(n=u.annotationStyle.hiBorderColor,o=u.annotationStyle.hiBorderSize):(n=u.annotationStyle.borderColor,o=u.annotationStyle.borderSize),x.lineJoin="round",x.lineWidth=1,x.strokeStyle="#000000",x.strokeRect(i+.5,a+.5,t.geometry.width-1,t.geometry.height-1),x.lineJoin="miter",x.lineWidth=o,x.strokeStyle=n,x.strokeRect(i+1+o/2,a+1+o/2,t.geometry.width-2-o,t.geometry.height-2-o));x.restore()},I=function(t){var e=[];return v.forEach(o=>{o.geometry.intersect(t.x,t.y)&&e.push(o)}),e=e.reverse()};this.resize=function(t,e){f[0].width=t,f[0].height=e},this.clear=function(){x.clearRect(0,0,f[0].width,f[0].height)},this.redrawAnnotations=function(t){w.clear();var e=void 0;v.forEach(o=>{var n=!!t&&(t instanceof Object?o==t:o.id===t);if(n&&u.annotationStyle.foreground)return e&&M(e,!0),void(e=o);M(o,n)}),e&&M(e,!0)},this.getAnnotations=function(){return v},this.addAnnotation=function(t,e,o=!0){if(e){var i=v.indexOf(e);i>-1&&(v[i]=t,w.redrawAnnotations())}else{var a=!0;for(let e=0;ee.id!==t),void w.redrawAnnotations();v=[],w.clear()}},u=function(e,o){this.image=e instanceof t?e:t(e),!this.image[0]instanceof Image&&t.error("Annotable it must be an image."),this.image.wrap(t('
'));var n=this,i=new c(this.image.parent(),o,function(t,e){n.image.trigger(t,e)});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)};var a=function(t,e,o){var n=o?d(o):void 0;i.addAnnotation(new s(t.id,e,t.text,new r(t.position.center,t.width||e.naturalWidth,t.height||e.naturalHeight,t.rotation),t.editable),n,!1)},d=function(e){var o=i.getAnnotations().find(function(t){return t.isEqualPrint(e)});return o||t.error("Annotation not found."),o};this.addAnnotation=function(e,o){if(e.position&&e.position.center&&e.position.center.x&&e.position.center.y||t.error("Invalid annotation."),e.image)if(e.image instanceof Image)a(e,e.image,o);else{(!e.image instanceof String||!e.image.includes("http"))&&t.error("Image must be a URL or an instance of Image.");var n=new Image;n.src=e.image,n.onload=function(){a(e,this,o)}}else a(e,{},o)},this.getAnnotations=function(){var t=[];return i.getAnnotations().forEach(e=>{t.push(e.print())}),t},this.removeAnnotation=function(t){i.removeAnnotation(d(t),!1)},this.removeAll=function(t){i.removeAll(t)},this.hideAnnotations=function(){i.clear()},this.showAnnotations=function(){i.redrawAnnotations()},this.highlightAnnotation=function(t){i.redrawAnnotations(t instanceof Object?d(t):t)},this.on=function(t,e){this.image.on(t,e)}};t.fn.annotable=function(e){if("object"==typeof e||!e){var o=t.extend(!0,{},t.fn.annotable.defaults,e),n=this.length>1?[]:void 0;t(o.draggable).is(":ui-draggable")||t(o.draggable).draggable({helper:"clone",ghosting:!0,cursorAt:{top:0,left:0},revert:"invalid"})}var i=Array.prototype.slice.call(arguments,1);return this.each(function(){var a=t(this),r=a.data("annotable");if(r){if("string"==typeof e&&r[e])return r[e].apply(r,i);t.error("Method "+e+" does not exist on Annotable")}else o?(r=new u(this,o),a.data("annotable",r),n?n.push(r):n=r):t.error("Annotable is not initialized.")}),n},t.fn.annotable.defaults={draggable:".draggable-annotation",hint:{enabled:!0,message:"Drag and Drop to Annotate",icon:'',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"},annotationStyle:{borderColor:"#ffffff",borderSize:2,hiBorderColor:"#fff000",hiBorderSize:2.2,imageBorder:!0,foreground:!0}}}(jQuery); \ No newline at end of file