refactor(cropper): drop the cropped preview — the cleaned image is the only preview

The extra cropped-result panel duplicated what the crop pad already shows and
the cleaned image supersedes it. Removes the panel, its state, the pointer-
release refresh handlers and the app.js plumbing. The crop result is still
uploaded (croppa stays the source when nothing is cleaned).

tools/public/assets/cropper/app.js

@@ -22,7 +22,6 @@ Vue.config.ignoredElements = [/^cds-/];
       reviewed: false,
       accepted: false,
       cleanedImage: null,
-      cropPreview: '',
       requiresCleaning: '',
       otp: '',
       reviewOptions: [
@@ -109,30 +108,7 @@ Vue.config.ignoredElements = [/^cds-/];
         this.toasts = this.toasts.filter(function (t) { return t.id !== id; });
       },
 
-      /**
-       * Current crop result — the operator should see what will be uploaded.
-       * croppa loads its source image asynchronously, so retry briefly until
-       * the canvas can produce a URL.
-       */
-      refreshCropPreview: function (attempt) {
-        var self = this;
-        var tries = attempt || 0;
-        this.$nextTick(function () {
-          try {
-            var croppa = self.croppaInstance;
-            self.cropPreview =
-              croppa && croppa.generateDataUrl ? croppa.generateDataUrl('image/jpeg') || '' : '';
-          } catch (error) {
-            self.cropPreview = '';
-          }
-          if (!self.cropPreview && tries < 12) {
-            setTimeout(function () { self.refreshCropPreview(tries + 1); }, 200);
-          }
-        });
-      },
-
       reset: function () {
-        this.cropPreview = '';
         this.message = null;
         this.agent = null;
         this.process = null;
@@ -173,8 +149,6 @@ Vue.config.ignoredElements = [/^cds-/];
           }
           this.message.message.file_url = image.data.data;
           this.cleanedImage = null;
-          this.cropPreview = '';
-          this.$nextTick(this.refreshCropPreview); // croppa needs the image first
           this.agent = null;
           this.process = this.message.message.process || null;
           if (this.message.message.upload_id) {
@@ -212,7 +186,6 @@ Vue.config.ignoredElements = [/^cds-/];
           var fr = new FileReader();
           fr.onload = function () { self.cleanedImage = fr.result; };
           fr.readAsDataURL(blob);
-          this.refreshCropPreview();
         } catch ({ message }) {
           this.toast('error', 'Image Cleanup Failed', message);
         } finally {

tools/public/assets/cropper/index.html

@@ -80,17 +80,11 @@
       <div class="editor-grid mt-2">
         <div class="editor-media">
           <label class="cds--label">Original — crop it</label>
-          <div class="croppa-pad mt-1" v-on:mouseup="refreshCropPreview" v-on:touchend="refreshCropPreview">
+          <div class="croppa-pad mt-1">
             <croppa ref="croppa" v-model="myCroppa" :show-remove-button="false" :width="250" :height="267.44" :quality="2">
               <img slot="initial" crossOrigin="anonymous" :src="message.message.file_url" style="width: 300px">
             </croppa>
           </div>
-          <template v-if="cropPreview">
-            <label class="cds--label mt-2" style="display:block;">Cropped preview</label>
-            <div class="croppa-pad mt-1">
-              <img :src="cropPreview" alt="cropped preview">
-            </div>
-          </template>
           <template v-if="cleanedImage">
             <label class="cds--label mt-2" style="display:block;">Cleaned preview</label>
             <div class="croppa-pad mt-1">