From efc6f726d98559c76bbaebcdd5ef9ad59306dc64 Mon Sep 17 00:00:00 2001 From: Guilherme Catini Date: Wed, 4 Oct 2017 16:54:45 -0300 Subject: [PATCH] Implemented new functionalities --- demo-with-events.html | 28 ++++++++++++++++++++++++++++ js/jquery.annotate.js | 35 +++++++++++++++++++++++++++++++++-- 2 files changed, 61 insertions(+), 2 deletions(-) create mode 100644 demo-with-events.html diff --git a/demo-with-events.html b/demo-with-events.html new file mode 100644 index 0000000..7c6cfd0 --- /dev/null +++ b/demo-with-events.html @@ -0,0 +1,28 @@ + + + Image Annotations + + + + + + + + +
+ Trafalgar Square +
+ + \ No newline at end of file diff --git a/js/jquery.annotate.js b/js/jquery.annotate.js index 6bc541e..1340291 100644 --- a/js/jquery.annotate.js +++ b/js/jquery.annotate.js @@ -19,6 +19,10 @@ this.editable = opts.editable; this.useAjax = opts.useAjax; this.notes = opts.notes; + this.onCreate = opts.onCreate != null ? opts.onCreate : function() {} + this.onUpdate = opts.onUpdate != null ? opts.onUpdate : function() {} + this.onDelete = opts.onDelete != null ? opts.onDelete : function() {} + this.onChange = opts.onChange != null ? opts.onChange : function() {} // Add the canvas this.canvas = $('
'); @@ -167,11 +171,15 @@ // Add to canvas if (note) { note.resetPosition(editable, text); + image.onUpdate() + image.onChange() } else { editable.note.editable = true; note = new $.fn.annotateView(image, editable.note) note.resetPosition(editable, text); image.notes.push(editable.note); + image.onCreate() + image.onChange() } editable.destroy(); @@ -214,11 +222,19 @@ /// this.image = image; + // generate randomic guid + function guidGenerator() { + var S4 = function() { + return (((1+Math.random())*0x10000)|0).toString(16).substring(1); + }; + return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4()); + } + if (note) { this.note = note; } else { var newNote = new Object(); - newNote.id = "new"; + newNote.id = guidGenerator(); newNote.top = 30; newNote.left = 30; newNote.width = 30; @@ -366,7 +382,10 @@ this.form.remove(); } - $.fn.annotateView.prototype.edit = function() { + $.fn.annotateView.prototype.edit = function(img) { + + var selfNote = this.note + /// /// Edits the annotation. /// @@ -382,6 +401,15 @@ // Add the delete button var del = $('Delete'); del.click(function() { + + let aux = [] + img.notes.forEach(function(value,index){ + if ( value.id != selfNote.id ) { + aux.push(img.notes[index]) + } + }) + img.notes = aux + var form = $('#image-annotate-edit-form form'); $.fn.annotateImage.appendPosition(form, editable) @@ -394,6 +422,9 @@ }); } + annotation.image.onDelete() + annotation.image.onChange() + annotation.image.mode = 'view'; editable.destroy(); annotation.destroy();