Upgrade cropperjs to v2

Author: silverwind

package-lock.json

@@ -21,7 +21,7 @@
     "chartjs-adapter-dayjs-4": "1.0.4",
     "chartjs-plugin-zoom": "2.2.0",
     "clippie": "4.1.5",
-    "cropperjs": "1.6.2",
+    "cropperjs": "2.0.0",
     "css-loader": "7.1.2",
     "dayjs": "1.11.13",
     "dropzone": "6.0.0-beta.2",

package.json

@@ -1,6 +1,8 @@
-@import "cropperjs/dist/cropper.css";
-
 .avatar-file-with-cropper + .cropper-panel .cropper-wrapper {
-  max-width: 400px;
+  width: 400px;
   max-height: 400px;
 }
+
+cropper-canvas {
+  height: 400px;
+}

web_src/css/features/cropper.css

@@ -1,4 +1,5 @@
-import {showElem, type DOMEvent} from '../../utils/dom.ts';
+import {CropperCanvas, CropperImage} from 'cropperjs';
+import {createElementFromHTML, showElem, type DOMEvent} from '../../utils/dom.ts';
 
 type CropperOpts = {
   container: HTMLElement,
@@ -7,33 +8,54 @@ type CropperOpts = {
 }
 
 async function initCompCropper({container, fileInput, imageSource}: CropperOpts) {
-  const {default: Cropper} = await import(/* webpackChunkName: "cropperjs" */'cropperjs');
+  await import(/* webpackChunkName: "cropperjs" */'cropperjs');
   let currentFileName = '';
   let currentFileLastModified = 0;
-  const cropper = new Cropper(imageSource, {
-    aspectRatio: 1,
-    viewMode: 2,
-    autoCrop: false,
-    crop() {
-      const canvas = cropper.getCroppedCanvas();
-      canvas.toBlob((blob) => {
-        const croppedFileName = currentFileName.replace(/\.[^.]{3,4}$/, '.png');
-        const croppedFile = new File([blob], croppedFileName, {type: 'image/png', lastModified: currentFileLastModified});
-        const dataTransfer = new DataTransfer();
-        dataTransfer.items.add(croppedFile);
-        fileInput.files = dataTransfer.files;
-      });
-    },
+
+  const canvasEl = createElementFromHTML<CropperCanvas>(`
+    <cropper-canvas background>
+      <cropper-image src="${imageSource.src}" rotatable scalable skewable translatable></cropper-image>
+      <cropper-shade hidden></cropper-shade>
+      <cropper-handle action="select" plain></cropper-handle>
+      <cropper-selection initial-coverage="0.5" initial-aspect-ratio="1" movable resizable>
+        <cropper-grid role="grid" covered></cropper-grid>
+        <cropper-crosshair centered></cropper-crosshair>
+        <cropper-handle action="move" theme-color="#ffffff23"></cropper-handle>
+        <cropper-handle action="n-resize"></cropper-handle>
+        <cropper-handle action="e-resize"></cropper-handle>
+        <cropper-handle action="s-resize"></cropper-handle>
+        <cropper-handle action="w-resize"></cropper-handle>
+        <cropper-handle action="ne-resize"></cropper-handle>
+        <cropper-handle action="nw-resize"></cropper-handle>
+        <cropper-handle action="se-resize"></cropper-handle>
+        <cropper-handle action="sw-resize"></cropper-handle>
+      </cropper-selection>
+    </cropper-canvas>
+  `);
+
+  const imgEl = canvasEl.querySelector<CropperImage>('cropper-image');
+
+  canvasEl.addEventListener('action', async (e) => {
+    const canvas = await (e.target as CropperCanvas).$toCanvas();
+    canvas.toBlob((blob) => {
+      const croppedFileName = currentFileName.replace(/\.[^.]{3,4}$/, '.png');
+      const croppedFile = new File([blob], croppedFileName, {type: 'image/png', lastModified: currentFileLastModified});
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(croppedFile);
+      fileInput.files = dataTransfer.files;
+    });
   });
 
+  imageSource.replaceWith(canvasEl);
+
   fileInput.addEventListener('input', (e: DOMEvent<Event, HTMLInputElement>) => {
     const files = e.target.files;
     if (files?.length > 0) {
       currentFileName = files[0].name;
       currentFileLastModified = files[0].lastModified;
       const fileURL = URL.createObjectURL(files[0]);
       imageSource.src = fileURL;
-      cropper.replace(fileURL);
+      imgEl.src = fileURL;
       showElem(container);
     }
   });