From a90b692fb5f8cefb417cfe2532c03eb060bf13e7 Mon Sep 17 00:00:00 2001
From: Christophe Le Bars <clb@toort.net>
Date: Thu, 27 Jul 2023 14:57:09 +0200
Subject: [PATCH] draft cropper

---
 package-lock.json                  | 261 +++++++++++++++++++++++++++++
 package.json                       |   1 +
 src/components/Cropper.svelte      |  22 +++
 src/routes/(app)/+layout.svelte    |   2 +-
 src/routes/(app)/test/+page.svelte |   5 +
 update-icons.js                    |  34 ++++
 6 files changed, 324 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Cropper.svelte
 create mode 100644 src/routes/(app)/test/+page.svelte
 create mode 100644 update-icons.js

diff --git a/package-lock.json b/package-lock.json
index 26d727a..5a80d86 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,6 +34,7 @@
         "add-to-calendar-button": "^1.8.7",
         "bulma": "^0.9.4",
         "bulma-switch": "^2.0.4",
+        "cropperjs": "^2.0.0-beta.3",
         "eslint": "^8.45.0",
         "eslint-config-prettier": "^8.8.0",
         "eslint-plugin-svelte": "^2.32.3",
@@ -115,6 +116,126 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@cropper/element": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@cropper/element/-/element-2.0.0-beta.3.tgz",
+      "integrity": "sha512-Ta1QPx6uqO4WtlvWbQanKSdTi0NptfnSk4h93TSk/GTKYTUI6Qa1g5C+2ibdsomcD/bVTTY6cbuGMFfM8E8zQQ==",
+      "dev": true,
+      "dependencies": {
+        "@cropper/utils": "^2.0.0-beta.3"
+      }
+    },
+    "node_modules/@cropper/element-canvas": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@cropper/element-canvas/-/element-canvas-2.0.0-beta.3.tgz",
+      "integrity": "sha512-G4KqpZHAqb2PNY63lt7MxSIXQhYrQUWImDmsQYrXSTVYC5yrMLlk5bT9oEaSTjQZnV4x5EaujFM+gx6lWh/5sg==",
+      "dev": true,
+      "dependencies": {
+        "@cropper/element": "^2.0.0-beta.3",
+        "@cropper/utils": "^2.0.0-beta.3"
+      }
+    },
+    "node_modules/@cropper/element-crosshair": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@cropper/element-crosshair/-/element-crosshair-2.0.0-beta.3.tgz",
+      "integrity": "sha512-SfrzZjO+x7ND/CgAclfwDQ9T/nTlZTKsLtM+dDXfjJQjuqreMaWaLD23isB1kh8H7iqjz1g+VE2ZsdiLB932ww==",
+      "dev": true,
+      "dependencies": {
+        "@cropper/element": "^2.0.0-beta.3",
+        "@cropper/utils": "^2.0.0-beta.3"
+      }
+    },
+    "node_modules/@cropper/element-grid": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@cropper/element-grid/-/element-grid-2.0.0-beta.3.tgz",
+      "integrity": "sha512-/U1/sNcJ9TKcUD7N+yHJqxRfZcW15XHz63LYMLaWQ7Cnnq2uYopopJUqtTiAdIoCh6mwoIWdYvLZ1Vhr6XKJBg==",
+      "dev": true,
+      "dependencies": {
+        "@cropper/element": "^2.0.0-beta.3",
+        "@cropper/utils": "^2.0.0-beta.3"
+      }
+    },
+    "node_modules/@cropper/element-handle": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@cropper/element-handle/-/element-handle-2.0.0-beta.3.tgz",
+      "integrity": "sha512-bjxZfX0rqj4RsTBGxJ1WcxDya1/25dKe9j4+YRZFyASQUOPuUrqVOpWKQcGaQ0PeN+wfwLo3422vjaGSXNA+Pg==",
+      "dev": true,
+      "dependencies": {
+        "@cropper/element": "^2.0.0-beta.3",
+        "@cropper/utils": "^2.0.0-beta.3"
+      }
+    },
+    "node_modules/@cropper/element-image": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@cropper/element-image/-/element-image-2.0.0-beta.3.tgz",
+      "integrity": "sha512-1VjqaJG+IxPDkvEUvnKAfR12zK8fx+C6+ZsC5T4986KLtpltmqccaYiupgGXX8CVHrVyaW5ncBvOXSTGowiC7Q==",
+      "dev": true,
+      "dependencies": {
+        "@cropper/element": "^2.0.0-beta.3",
+        "@cropper/element-canvas": "^2.0.0-beta.3",
+        "@cropper/utils": "^2.0.0-beta.3"
+      }
+    },
+    "node_modules/@cropper/element-selection": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@cropper/element-selection/-/element-selection-2.0.0-beta.3.tgz",
+      "integrity": "sha512-FjcNwUaV5/KzQROoaoNZzOpeRe92PCd8PPTgfl4/b2rGgpYvGcjwpjei5HRsF+uaDJwR2f1MOK8L+3ZkAUw18Q==",
+      "dev": true,
+      "dependencies": {
+        "@cropper/element": "^2.0.0-beta.3",
+        "@cropper/element-canvas": "^2.0.0-beta.3",
+        "@cropper/element-image": "^2.0.0-beta.3",
+        "@cropper/utils": "^2.0.0-beta.3"
+      }
+    },
+    "node_modules/@cropper/element-shade": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@cropper/element-shade/-/element-shade-2.0.0-beta.3.tgz",
+      "integrity": "sha512-WCmGYbmewIF49GUeJyXCXZUBwmLsu7B+G22o5FObhtxoY8pF7mp1SclIZdJU5KfvGFFOzXKHJg4yx1wO9IAfvQ==",
+      "dev": true,
+      "dependencies": {
+        "@cropper/element": "^2.0.0-beta.3",
+        "@cropper/element-canvas": "^2.0.0-beta.3",
+        "@cropper/element-selection": "^2.0.0-beta.3",
+        "@cropper/utils": "^2.0.0-beta.3"
+      }
+    },
+    "node_modules/@cropper/element-viewer": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@cropper/element-viewer/-/element-viewer-2.0.0-beta.3.tgz",
+      "integrity": "sha512-A2yh8ULbxuykJHVvcG3eI81VX2ug/IklDuOAzCP4yRMGSvGb9eK0BQDkOButoViwM2FtleCf2blXPuXjzD1OMA==",
+      "dev": true,
+      "dependencies": {
+        "@cropper/element": "^2.0.0-beta.3",
+        "@cropper/element-canvas": "^2.0.0-beta.3",
+        "@cropper/element-image": "^2.0.0-beta.3",
+        "@cropper/element-selection": "^2.0.0-beta.3",
+        "@cropper/utils": "^2.0.0-beta.3"
+      }
+    },
+    "node_modules/@cropper/elements": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@cropper/elements/-/elements-2.0.0-beta.3.tgz",
+      "integrity": "sha512-oHRnhrFN/S2vadX1/ogaoZQuPUwUxYRoZ+BZjPUxr0kdX4SwumU0pMD2hxVMbveTl0zxFc0S3HdqXx8kcHGPtg==",
+      "dev": true,
+      "dependencies": {
+        "@cropper/element": "^2.0.0-beta.3",
+        "@cropper/element-canvas": "^2.0.0-beta.3",
+        "@cropper/element-crosshair": "^2.0.0-beta.3",
+        "@cropper/element-grid": "^2.0.0-beta.3",
+        "@cropper/element-handle": "^2.0.0-beta.3",
+        "@cropper/element-image": "^2.0.0-beta.3",
+        "@cropper/element-selection": "^2.0.0-beta.3",
+        "@cropper/element-shade": "^2.0.0-beta.3",
+        "@cropper/element-viewer": "^2.0.0-beta.3"
+      }
+    },
+    "node_modules/@cropper/utils": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@cropper/utils/-/utils-2.0.0-beta.3.tgz",
+      "integrity": "sha512-3oBwFN2DZiqfKzkB+fpAa+LV2izRUpbH0MS427p8rgMb7EEOP/UFaKeq/P/Ovs3dhLbiA48aLiV6GmX9piEmlw==",
+      "dev": true
+    },
     "node_modules/@cspotcode/source-map-support": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
@@ -5581,6 +5702,16 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/cropperjs": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-2.0.0-beta.3.tgz",
+      "integrity": "sha512-FmrQfDsyK/zgKd3ripivqw8XpthWd5k8TczmiA1JarXKvcC5GBzRnX9CBFls5MmkzW9WPHuX0B1TMQ1j7xP54Q==",
+      "dev": true,
+      "dependencies": {
+        "@cropper/elements": "^2.0.0-beta.3",
+        "@cropper/utils": "^2.0.0-beta.3"
+      }
+    },
     "node_modules/cross-fetch": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
@@ -9573,6 +9704,126 @@
         "regenerator-runtime": "^0.13.4"
       }
     },
+    "@cropper/element": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@cropper/element/-/element-2.0.0-beta.3.tgz",
+      "integrity": "sha512-Ta1QPx6uqO4WtlvWbQanKSdTi0NptfnSk4h93TSk/GTKYTUI6Qa1g5C+2ibdsomcD/bVTTY6cbuGMFfM8E8zQQ==",
+      "dev": true,
+      "requires": {
+        "@cropper/utils": "^2.0.0-beta.3"
+      }
+    },
+    "@cropper/element-canvas": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@cropper/element-canvas/-/element-canvas-2.0.0-beta.3.tgz",
+      "integrity": "sha512-G4KqpZHAqb2PNY63lt7MxSIXQhYrQUWImDmsQYrXSTVYC5yrMLlk5bT9oEaSTjQZnV4x5EaujFM+gx6lWh/5sg==",
+      "dev": true,
+      "requires": {
+        "@cropper/element": "^2.0.0-beta.3",
+        "@cropper/utils": "^2.0.0-beta.3"
+      }
+    },
+    "@cropper/element-crosshair": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@cropper/element-crosshair/-/element-crosshair-2.0.0-beta.3.tgz",
+      "integrity": "sha512-SfrzZjO+x7ND/CgAclfwDQ9T/nTlZTKsLtM+dDXfjJQjuqreMaWaLD23isB1kh8H7iqjz1g+VE2ZsdiLB932ww==",
+      "dev": true,
+      "requires": {
+        "@cropper/element": "^2.0.0-beta.3",
+        "@cropper/utils": "^2.0.0-beta.3"
+      }
+    },
+    "@cropper/element-grid": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@cropper/element-grid/-/element-grid-2.0.0-beta.3.tgz",
+      "integrity": "sha512-/U1/sNcJ9TKcUD7N+yHJqxRfZcW15XHz63LYMLaWQ7Cnnq2uYopopJUqtTiAdIoCh6mwoIWdYvLZ1Vhr6XKJBg==",
+      "dev": true,
+      "requires": {
+        "@cropper/element": "^2.0.0-beta.3",
+        "@cropper/utils": "^2.0.0-beta.3"
+      }
+    },
+    "@cropper/element-handle": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@cropper/element-handle/-/element-handle-2.0.0-beta.3.tgz",
+      "integrity": "sha512-bjxZfX0rqj4RsTBGxJ1WcxDya1/25dKe9j4+YRZFyASQUOPuUrqVOpWKQcGaQ0PeN+wfwLo3422vjaGSXNA+Pg==",
+      "dev": true,
+      "requires": {
+        "@cropper/element": "^2.0.0-beta.3",
+        "@cropper/utils": "^2.0.0-beta.3"
+      }
+    },
+    "@cropper/element-image": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@cropper/element-image/-/element-image-2.0.0-beta.3.tgz",
+      "integrity": "sha512-1VjqaJG+IxPDkvEUvnKAfR12zK8fx+C6+ZsC5T4986KLtpltmqccaYiupgGXX8CVHrVyaW5ncBvOXSTGowiC7Q==",
+      "dev": true,
+      "requires": {
+        "@cropper/element": "^2.0.0-beta.3",
+        "@cropper/element-canvas": "^2.0.0-beta.3",
+        "@cropper/utils": "^2.0.0-beta.3"
+      }
+    },
+    "@cropper/element-selection": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@cropper/element-selection/-/element-selection-2.0.0-beta.3.tgz",
+      "integrity": "sha512-FjcNwUaV5/KzQROoaoNZzOpeRe92PCd8PPTgfl4/b2rGgpYvGcjwpjei5HRsF+uaDJwR2f1MOK8L+3ZkAUw18Q==",
+      "dev": true,
+      "requires": {
+        "@cropper/element": "^2.0.0-beta.3",
+        "@cropper/element-canvas": "^2.0.0-beta.3",
+        "@cropper/element-image": "^2.0.0-beta.3",
+        "@cropper/utils": "^2.0.0-beta.3"
+      }
+    },
+    "@cropper/element-shade": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@cropper/element-shade/-/element-shade-2.0.0-beta.3.tgz",
+      "integrity": "sha512-WCmGYbmewIF49GUeJyXCXZUBwmLsu7B+G22o5FObhtxoY8pF7mp1SclIZdJU5KfvGFFOzXKHJg4yx1wO9IAfvQ==",
+      "dev": true,
+      "requires": {
+        "@cropper/element": "^2.0.0-beta.3",
+        "@cropper/element-canvas": "^2.0.0-beta.3",
+        "@cropper/element-selection": "^2.0.0-beta.3",
+        "@cropper/utils": "^2.0.0-beta.3"
+      }
+    },
+    "@cropper/element-viewer": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@cropper/element-viewer/-/element-viewer-2.0.0-beta.3.tgz",
+      "integrity": "sha512-A2yh8ULbxuykJHVvcG3eI81VX2ug/IklDuOAzCP4yRMGSvGb9eK0BQDkOButoViwM2FtleCf2blXPuXjzD1OMA==",
+      "dev": true,
+      "requires": {
+        "@cropper/element": "^2.0.0-beta.3",
+        "@cropper/element-canvas": "^2.0.0-beta.3",
+        "@cropper/element-image": "^2.0.0-beta.3",
+        "@cropper/element-selection": "^2.0.0-beta.3",
+        "@cropper/utils": "^2.0.0-beta.3"
+      }
+    },
+    "@cropper/elements": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@cropper/elements/-/elements-2.0.0-beta.3.tgz",
+      "integrity": "sha512-oHRnhrFN/S2vadX1/ogaoZQuPUwUxYRoZ+BZjPUxr0kdX4SwumU0pMD2hxVMbveTl0zxFc0S3HdqXx8kcHGPtg==",
+      "dev": true,
+      "requires": {
+        "@cropper/element": "^2.0.0-beta.3",
+        "@cropper/element-canvas": "^2.0.0-beta.3",
+        "@cropper/element-crosshair": "^2.0.0-beta.3",
+        "@cropper/element-grid": "^2.0.0-beta.3",
+        "@cropper/element-handle": "^2.0.0-beta.3",
+        "@cropper/element-image": "^2.0.0-beta.3",
+        "@cropper/element-selection": "^2.0.0-beta.3",
+        "@cropper/element-shade": "^2.0.0-beta.3",
+        "@cropper/element-viewer": "^2.0.0-beta.3"
+      }
+    },
+    "@cropper/utils": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@cropper/utils/-/utils-2.0.0-beta.3.tgz",
+      "integrity": "sha512-3oBwFN2DZiqfKzkB+fpAa+LV2izRUpbH0MS427p8rgMb7EEOP/UFaKeq/P/Ovs3dhLbiA48aLiV6GmX9piEmlw==",
+      "dev": true
+    },
     "@cspotcode/source-map-support": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
@@ -13537,6 +13788,16 @@
       "optional": true,
       "peer": true
     },
+    "cropperjs": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-2.0.0-beta.3.tgz",
+      "integrity": "sha512-FmrQfDsyK/zgKd3ripivqw8XpthWd5k8TczmiA1JarXKvcC5GBzRnX9CBFls5MmkzW9WPHuX0B1TMQ1j7xP54Q==",
+      "dev": true,
+      "requires": {
+        "@cropper/elements": "^2.0.0-beta.3",
+        "@cropper/utils": "^2.0.0-beta.3"
+      }
+    },
     "cross-fetch": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
diff --git a/package.json b/package.json
index 53f0bb4..8b5b6a9 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "add-to-calendar-button": "^1.8.7",
     "bulma": "^0.9.4",
     "bulma-switch": "^2.0.4",
+    "cropperjs": "^2.0.0-beta.3",
     "eslint": "^8.45.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-svelte": "^2.32.3",
diff --git a/src/components/Cropper.svelte b/src/components/Cropper.svelte
new file mode 100644
index 0000000..7eaf796
--- /dev/null
+++ b/src/components/Cropper.svelte
@@ -0,0 +1,22 @@
+<script>
+  import { onMount } from 'svelte'
+
+  import Cropper from 'cropperjs'
+
+  const init = () => {
+    const image = new Image()
+
+    image.src = '/rouge-ticket-black.png'
+    image.alt = 'Picture'
+
+    const cropper = new Cropper(image, {
+      container: '.cropper-container'
+    })
+
+    console.log(cropper)
+  }
+
+  onMount(init)
+</script>
+
+<div class="cropper-container">XXX</div>
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index a96aa42..3aba7b6 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -145,7 +145,7 @@
         {#if dev}
           <div class="xis-flex-grow-1 has-text-centered">
             <span class="icon-text">
-              <a href="/explorer/">Explorer</a>
+              <a href="/test/">test</a>
             </span>
           </div>
           <div class="xis-flex-grow-1 has-text-centered">
diff --git a/src/routes/(app)/test/+page.svelte b/src/routes/(app)/test/+page.svelte
new file mode 100644
index 0000000..4523957
--- /dev/null
+++ b/src/routes/(app)/test/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+  import Cropper from '$components/Cropper.svelte'
+</script>
+
+<Cropper />
diff --git a/update-icons.js b/update-icons.js
new file mode 100644
index 0000000..da292f9
--- /dev/null
+++ b/update-icons.js
@@ -0,0 +1,34 @@
+import { promisify } from 'util'
+import fs from 'fs'
+
+import { exec as execCallback } from 'child_process'
+
+const exec = promisify(execCallback)
+
+const run = async () => {
+  const names = []
+  let output = ''
+
+  const { stdout } = await exec(`find src -type f -name *.svelte | xargs cat `)
+
+  for await (const line of stdout.split('\n')) {
+    // non tablers icons
+    if (/<Icon name="([a-z][a-zA-Z-]*)"/.test(line)) continue
+    const match = line.match(/<Icon name="([A-Z][a-zA-Z]*)"/)
+    if (match) {
+      if (names.includes('Icon' + match[1])) continue
+      output += `import { Icon${match[1]} } from '@tabler/icons-svelte'\n`
+      names.push('Icon' + match[1])
+    } else if (/<Icon/.test(line)) {
+      if (/{(entry.icon|selector|channel.amount) ?/.test(line)) continue
+
+      console.warn('potential unformatted Icon', line)
+    }
+  }
+
+  output += `\nexport {\n  ${names.join(',\n  ')}\n}\n`
+
+  fs.writeFileSync('src/icons/tabler-icons.js', output)
+}
+
+run()