add color picker

Author: krmanik

package.json

@@ -66,6 +66,7 @@
         "@fluent/bundle": "^0.17.0",
         "@mdi/svg": "^7.0.96",
         "@popperjs/core": "^2.9.2",
+        "@simonwep/pickr": "^1.8.2",
         "@types/lodash-es": "^4.17.4",
         "@types/marked": "^4.0.1",
         "bootstrap": "=5.0.2",

ts/image-occlusion/color-picker.ts

@@ -0,0 +1,79 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+import "@simonwep/pickr/dist/themes/nano.min.css"; // 'nano' theme
+
+import Pickr from "@simonwep/pickr";
+import * as tr from "@tslib/ftl";
+import type fabric from "fabric";
+
+import { getShapeColor } from "./tools/lib";
+
+export const colorPicker = (canvas: fabric.Canvas, elem: string, isFillShape: boolean): Pickr => {
+    const pickr = Pickr.create({
+        el: elem,
+        theme: "nano",
+        useAsButton: true,
+        autoReposition: true,
+        comparison: false,
+        default: getShapeColor(),
+        swatches: [
+            "rgba(244, 67, 54, 1)", // Red 500
+            "rgba(233, 30, 99, 1)", // Pink 500
+            "rgba(156, 39, 176, 1)", // Purple 500
+            "rgba(103, 58, 183, 1)", // Deep Purple 500
+            "rgba(63, 81, 181, 1)", // Indigo 500
+            "rgba(33, 150, 243, 1)", // Blue 500
+            "rgba(3, 169, 244, 1)", // Light Blue 500
+            "rgba(0, 188, 212, 1)", // Cyan 500
+            "rgba(0, 150, 136, 1)", // Teal 500
+            "rgba(76, 175, 80, 1)", // Green 500
+            "rgba(139, 195, 74, 1)", // Light Green 500
+            "rgba(205, 220, 57, 1)", // Lime 500
+            "rgba(255, 235, 59, 1)", // Yellow 500
+            "rgba(255, 193, 7, 1)", // Amber 500
+        ],
+        components: {
+            preview: true,
+            opacity: true,
+            hue: true,
+            interaction: {
+                hex: true,
+                rgba: true,
+                input: true,
+            },
+        },
+    });
+
+    pickr
+        .on("init", () => {
+            if (isFillShape) {
+                setTiltle(pickr, tr.editingChangeShapeColor());
+            } else {
+                setTiltle(pickr, tr.editingQuestionMaskColor());
+            }
+        });
+    pickr
+        .on("change", (color) => {
+            const clr = color.toHEXA().toString();
+            if (isFillShape) {
+                localStorage.setItem("shape-color", clr);
+            } else {
+                localStorage.setItem("ques-color", clr);
+            }
+        });
+
+    return pickr;
+};
+
+const setTiltle = (pickr: Pickr, title: string): void => {
+    const firstElem = pickr._root.app.firstChild;
+    const titleElem = document.createElement("div");
+    globalThis.pickr = pickr;
+    titleElem.className = "pickr-title";
+    titleElem.innerHTML = title;
+
+    if (firstElem) {
+        pickr.getRoot().app.insertBefore(titleElem, firstElem);
+    }
+};

ts/licenses.json

@@ -124,6 +124,14 @@
         "path": "node_modules/@protobufjs/utf8",
         "licenseFile": "node_modules/@protobufjs/utf8/LICENSE"
     },
+    "@simonwep/pickr@1.8.2": {
+        "licenses": "MIT",
+        "repository": "https://github.com/Simonwep/pickr",
+        "publisher": "Simon Reinisch",
+        "email": "trash@reinisch.io",
+        "path": "node_modules/@simonwep/pickr",
+        "licenseFile": "node_modules/@simonwep/pickr/LICENSE"
+    },
     "@tootallnate/once@2.0.0": {
         "licenses": "MIT",
         "repository": "https://github.com/TooTallNate/once",
@@ -373,6 +381,15 @@
         "path": "node_modules/console-control-strings",
         "licenseFile": "node_modules/console-control-strings/LICENSE"
     },
+    "core-js@3.27.2": {
+        "licenses": "MIT",
+        "repository": "https://github.com/zloirock/core-js",
+        "publisher": "Denis Pushkarev",
+        "email": "zloirock@zloirock.ru",
+        "url": "http://zloirock.ru",
+        "path": "node_modules/core-js",
+        "licenseFile": "node_modules/core-js/LICENSE"
+    },
     "css-browser-selector@0.6.5": {
         "licenses": "CC-BY-SA-2.5",
         "repository": "https://github.com/verbatim/css_browser_selector",
@@ -1087,6 +1104,14 @@
         "path": "node_modules/nan",
         "licenseFile": "node_modules/nan/LICENSE.md"
     },
+    "nanopop@2.2.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/Simonwep/nanopop",
+        "publisher": "Simon Reinisch",
+        "email": "trash@reinisch.io",
+        "path": "node_modules/nanopop",
+        "licenseFile": "node_modules/nanopop/LICENSE"
+    },
     "ngraph.events@1.2.2": {
         "licenses": "BSD-3-Clause",
         "repository": "https://github.com/anvaka/ngraph.events",

yarn.lock

@@ -729,6 +729,14 @@
   resolved "https://registry.yarnpkg.com/@pyoner/svelte-types/-/svelte-types-3.4.4-2.tgz#0bc64255d56e82a5e7f3d0b31b324551a77da6b0"
   integrity sha512-5oQsFCU9pxu1mdA72e2XOqVmheSQfpaQnsmvO4FTEd6D3k3Wx3Nr4s2m0gfqjGLHoGGEo9FOK4xQXXX7D5Uz6A==
 
+"@simonwep/pickr@^1.8.2":
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/@simonwep/pickr/-/pickr-1.8.2.tgz#96dc86675940d7cad63d69c22083dd1cbb9797cb"
+  integrity sha512-/l5w8BIkrpP6n1xsetx9MWPWlU6OblN5YgZZphxan0Tq4BByTCETL6lyIeY8lagalS2Nbt4F2W034KHLIiunKA==
+  dependencies:
+    core-js "^3.15.1"
+    nanopop "^2.1.0"
+
 "@sinclair/typebox@^0.23.3":
   version "0.23.4"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.23.4.tgz#6ff93fd2585ce44f7481c9ff6af610fbb5de98a4"
@@ -1810,6 +1818,11 @@ convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   dependencies:
     safe-buffer "~5.1.1"
 
+core-js@^3.15.1:
+  version "3.27.2"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.27.2.tgz#85b35453a424abdcacb97474797815f4d62ebbf7"
+  integrity sha512-9ashVQskuh5AZEZ1JdQWp1GqSoC1e1G87MzRqg2gIfVAQ7Qn9K+uFj8EcniUFA4P2NLZfV+TOlX1SzoKfo+s7w==
+
 core-js@^3.16.2:
   version "3.21.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.21.1.tgz#f2e0ddc1fc43da6f904706e8e955bc19d06a0d94"
@@ -4233,6 +4246,11 @@ nan@^2.17.0:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.17.0.tgz#c0150a2368a182f033e9aa5195ec76ea41a199cb"
   integrity sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==
 
+nanopop@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/nanopop/-/nanopop-2.2.0.tgz#bd1c25588a7beaf68865bc2df19db4c58c77dcc9"
+  integrity sha512-E9JaHcxh3ere8/BEZHAcnuD10RluTSPyTToBvoFWS9/7DcCx6gyKjbn7M7Bx7E1veCxCuY1iO6h4+gdAf1j73Q==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"