# HG changeset patch
# User Alexandre Segura <mex.zktk@gmail.com>
# Date 1487612016 -3600
# Node ID 8f158a4c7759ae4908db81faebc722ce373591dd
# Parent  8f19067caeecdb7b1fdb3f419e7c596a8ce939c0
Use props to update annotation in components.

diff -r 8f19067caeec -r 8f158a4c7759 src/iconolab/templates/iconolab/detail_image.html
--- a/src/iconolab/templates/iconolab/detail_image.html	Mon Feb 20 17:46:45 2017 +0100
+++ b/src/iconolab/templates/iconolab/detail_image.html	Mon Feb 20 18:33:36 2017 +0100
@@ -31,7 +31,9 @@
   </div>
   <div class="annotation-navigator-canvas">
     {% with image.media as img %}
-    <image-annotator ref="annotator" image="{{ img.url }}"></image-annotator>
+    <image-annotator v-bind:annotation="annotation"
+      ref="annotator"
+      image="{{ img.url }}"></image-annotator>
     {% endwith %}
     <form id="form-annotation" action="{% url 'annotation_create' collection_name image.image_guid %}" method="POST">
       {% csrf_token %}
@@ -44,7 +46,7 @@
   <div class="annotation-navigator-panel">
     <div class="panel panel-default">
       <div class="panel-body">
-        <annotation-form ref="panel"
+        <annotation-form v-bind:annotation="annotation"
           action="{% url 'annotation_edit' collection_name image_guid ':annotation_guid' %}">
           {% csrf_token %}
         </annotation-form>
@@ -68,10 +70,12 @@
 <script>
 
   var currentPath = "{{ request.path }}";
-  var annotationEditURL = "{% url 'annotation_edit' collection_name image_guid ':annotation_guid' %}";
 
   var vm = new Vue({
-    el: '.annotation-navigator'
+    el: '.annotation-navigator',
+    data: function() {
+      return { annotation: null };
+    }
   });
 
   var annotations = {};
@@ -97,8 +101,7 @@
             $('.list-group a[data-annotation-id]').removeClass('active');
             $el.addClass('active');
 
-            vm.$refs.annotator.annotation = annotations[revision];
-            vm.$refs.panel.setAnnotation(annotations[revision]);
+            vm.annotation = annotations[revision];
             vm.$refs.commentList.comments = comments;
 
             location.hash = '#' + annotation;
@@ -137,8 +140,7 @@
     var $target = $(e.currentTarget);
     $target.closest('.list-group-item').removeClass('active');
 
-    vm.$refs.annotator.annotation = null;
-    vm.$refs.panel.reset();
+    vm.annotation = null;
     vm.$refs.commentList.comments = [];
 
     $('#form-comment form').find('textarea, [type="submit"]').attr('disabled', true);
diff -r 8f19067caeec -r 8f158a4c7759 src_js/iconolab-bundle/src/components/editor/AnnotationForm.vue
--- a/src_js/iconolab-bundle/src/components/editor/AnnotationForm.vue	Mon Feb 20 17:46:45 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/AnnotationForm.vue	Mon Feb 20 18:33:36 2017 +0100
@@ -30,7 +30,7 @@
     import TagList from '../tagform/TagList.vue'
 
     export default {
-        props: ['action'],
+        props: ['action', 'annotation'],
         components: {
             'tag-list': TagList
         },
@@ -40,7 +40,15 @@
                 'description': '',
                 'fragment': '',
                 'tags': [],
-                'annotation': null,
+            }
+        },
+        watch: {
+            annotation: function(annotation) {
+                if (annotation) {
+                    Object.assign(this, annotation);
+                } else {
+                    this.reset();
+                }
             }
         },
         computed: {
@@ -63,12 +71,6 @@
             }
         },
         methods: {
-            setAnnotation: function(annotation) {
-                const clone = annotation;
-                this.annotation = clone;
-
-                Object.assign(this, annotation);
-            },
             onTagsChange: function(tags) {
                 this.tags = tags;
             },
@@ -76,8 +78,8 @@
                 Object.assign(this, {
                     'title': '',
                     'description': '',
-                    'tags': [],
-                    'annotation': null
+                    'fragment': '',
+                    'tags': []
                 });
             },
             hasChanged: function() {
diff -r 8f19067caeec -r 8f158a4c7759 src_js/iconolab-bundle/src/components/editor/Canvas.vue
--- a/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Mon Feb 20 17:46:45 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Mon Feb 20 18:33:36 2017 +0100
@@ -41,6 +41,12 @@
     export default {
         props: {
             image: String,
+            annotation: {
+                type: Object,
+                default: function () {
+                    return null;
+                }
+            },
             tooltip: {
                 type: Boolean,
                 default: function () {
@@ -64,7 +70,6 @@
                 imgMinSize: 0,
                 imageWidth: 0,
                 imageHeight: 0,
-                annotation: null
             }
         },
         watch: {
@@ -165,10 +170,6 @@
                 this.paper.unclick();
             },
 
-            setAnnotation: function(annotation) {
-                this.annotation = annotation;
-            },
-
             loadAnnotation: function() {
                 if (this.annotation.fragment.length > 0) {
                     var pieces = this.annotation.fragment.split(';');