utilisation de l'api rest pour preview crop/rotate + correctif remplacement de ressource

src/components/JamaResource.vue

@@ -400,7 +400,10 @@ export default {
         replaceId = r[0].id
       }
       if(replaceId){
-        await this.$store.dispatch('replaceResource', {from : this.resource.id, to  : replaceId});
+        await this.$store.dispatch('replaceResource', {
+          from : replaceId,
+          to : this.resource.id
+        });
         EventBus.$emit('goto-resource', this.currentCollection.id, replaceId);
       }
       else {
@@ -410,7 +413,7 @@ export default {
     },
 
     collectionLinkClick(collection) {
-      this.$emit('collection-selected', collection/*, this.ancestorPath(ancestor)*/);
+      this.$emit('collection-selected', collection);
     },
 
     tagAdded(tag) {

src/components/editors/ImageResourceEditor.vue

@@ -2,15 +2,23 @@
   <v-card class="jama-image-editor ma-0 pa-0 flex justify-center">
     <v-card-actions class="flex justify-center pa-0 pt-2">
       <template v-if="!preview">
-        <v-btn @click="preview=true; drawPreview()" :disabled="loading">Aperçu</v-btn>
+        <v-btn @click="preview=true;" :disabled="loading">Aperçu</v-btn>
         <v-btn color="primary" @click="doIt()" :loading="loading" :disabled="loading">
           VALIDER
         </v-btn>
         <v-btn color="secondary" @click="reset();resetZoom();$emit('close')" :disabled="loading">ANNULER</v-btn>
       </template>
+      <template v-else>
+        <v-progress-circular
+            v-if="loading"
+            indeterminate
+            color="primary"
+        ></v-progress-circular>
         <v-btn v-else @click="preview=false">
           Quitter l'aperçu
         </v-btn>
+      </template>
+
     </v-card-actions>
     <v-card-text v-if="this.imageDimensions && this.maxWidth" class="text-center ma-0 pa-0 d-flex justify-center"
                  @mousemove="mouseMove($event)"
@@ -50,7 +58,10 @@
 
         <!--        <div v-else id="img-preview" :style="getPreviewImageCSS"></div>-->
 
-        <canvas v-else id="preview-canvas" class="mt-2"></canvas>
+        <v-container v-else>
+          <img :src="previewImage" />
+        </v-container>
+<!--        <canvas v-else id="preview-canvas" class="mt-2"></canvas>-->
 
         <v-card v-if="!preview" id="form" class="d-flex flex-column caption" width="80px" color="#272727">
           <v-card-text>
@@ -182,6 +193,19 @@ export default {
 
     normalizedRotation(){
       return this.rotation >=0 ? this.rotation : Number(this.rotation) + 360;
+    },
+
+    previewImage(){
+      return this.endPoint + this.resource.hash
+          + '/rotate/'
+          + this.normalizedRotation
+          + '/scale/'
+          + this.scale
+          + '/crop/'
+          + this.cropTop +','
+          + this.cropRight +','
+          + this.cropBottom +','
+          + this.cropLeft
     }
   },
 
@@ -252,6 +276,11 @@ export default {
     },
 
     doIt() {
+
+      this.$jamaConfirm(
+          this.$t('confirm'),
+          (res) => {
+            if (res) {
               this.loading = true;
               this.$jamaClient.pictureRotateCrop(this.resource.id, this.normalizedRotation, this.cropTop, this.cropRight, this.cropBottom, this.cropLeft).then((res) => {
                 if (res)
@@ -264,6 +293,11 @@ export default {
                 this.resetZoom();
                 this.loading = false;
               })
+            }
+          }
+      )
+
+
     },
 
     updateRenderedDimensions() {
@@ -430,19 +464,25 @@ export default {
     },
 
     drawPreview() {
-      setTimeout(() => {
-        let canvas = document.getElementById('preview-canvas');
-        const w = this.renderedImageDimensions.width - (this.cropLeft + this.cropRight) * this.scale;
-        const h = this.renderedImageDimensions.height - (this.cropTop + this.cropBottom) * this.scale
-        canvas.width = w;
-        canvas.height = h;
-        let ctx = canvas.getContext('2d');
-        let img = new Image();
-        img.onload = () => {
-          ctx.drawImage(img, this.cropLeft * this.scale, this.cropTop * this.scale, w, h, 0, 0, w, h);
-        };
-        img.src = this.scaledAndRotatedImageUrl;
-      }, 500)//waiting for canvas dom injection
+      // console.log("PREVIEW");
+      // console.log('cleft ->' + this.cropLeft);
+      // console.log('scale ->' + this.scale);
+      // this.loading = true;
+      // setTimeout(() => {
+      //   let canvas = document.getElementById('preview-canvas');
+      //   const w = this.renderedImageDimensions.width - (this.cropLeft + this.cropRight) * this.scale;
+      //   const h = this.renderedImageDimensions.height - (this.cropTop + this.cropBottom) * this.scale
+      //   canvas.width = w;
+      //   canvas.height = h;
+      //   let ctx = canvas.getContext('2d');
+      //   ctx.clearRect(0, 0, canvas.width, canvas.height);
+      //   let img = new Image();
+      //   img.onload = () => {
+      //     ctx.drawImage(img, this.cropLeft * this.scale, this.cropTop * this.scale, w, h, 0, 0, w, h);
+      //     this.loading = false;
+      //   };
+      //   img.src = this.scaledAndRotatedImageUrl;
+      // }, 1000)//waiting for canvas dom injection
 
     },
 
@@ -594,3 +634,16 @@ input[type=color] {
   top: -3px;
 }
 </style>
+
+
+<i18n>
+{
+  "en": {
+    "confirm": "confirm ?"
+  },
+  "fr": {
+    "confirm": "Confirmer la modification de la ressource ?"
+
+  }
+}
+</i18n>
\ No newline at end of file