From 89a032b1937f3f9b8e2732cf371c78942eb53613 Mon Sep 17 00:00:00 2001
From: saschamuellercerpro <sascha.mueller@cerpro.io>
Date: Wed, 19 Jun 2024 19:11:50 +0200
Subject: [PATCH] color support

---
 package-lock.json              | 17 +++++++++++++++++
 package.json                   |  1 +
 src/components/Board/Board.tsx |  7 ++++++-
 src/components/Board/types.tsx |  1 +
 4 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 45a87b8..403c22a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.0.2-alpha",
       "license": "MIT",
       "dependencies": {
+        "color-parse": "^2.0.2",
         "fabric": "^5.3.0",
         "fabricjs-react": "^1.2.2",
         "uuid": "^10.0.0"
@@ -8155,6 +8156,22 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/color-parse": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/color-parse/-/color-parse-2.0.2.tgz",
+      "integrity": "sha512-eCtOz5w5ttWIUcaKLiktF+DxZO1R9KLNY/xhbV6CkhM7sR3GhVghmt6X6yOnzeaM24po+Z9/S1apbXMwA3Iepw==",
+      "dependencies": {
+        "color-name": "^2.0.0"
+      }
+    },
+    "node_modules/color-parse/node_modules/color-name": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-2.0.0.tgz",
+      "integrity": "sha512-SbtvAMWvASO5TE2QP07jHBMXKafgdZz8Vrsrn96fiL+O92/FN/PLARzUW5sKt013fjAprK2d2iCn2hk2Xb5oow==",
+      "engines": {
+        "node": ">=12.20"
+      }
+    },
     "node_modules/color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
diff --git a/package.json b/package.json
index fbb1c8c..3131710 100644
--- a/package.json
+++ b/package.json
@@ -83,6 +83,7 @@
     "react-canvas-annotator"
   ],
   "dependencies": {
+    "color-parse": "^2.0.2",
     "fabric": "^5.3.0",
     "fabricjs-react": "^1.2.2",
     "uuid": "^10.0.0"
diff --git a/src/components/Board/Board.tsx b/src/components/Board/Board.tsx
index 905a9ff..dc8a021 100644
--- a/src/components/Board/Board.tsx
+++ b/src/components/Board/Board.tsx
@@ -6,6 +6,7 @@ import { CanvasObject } from "./types";
 import * as fabricUtils from "../../fabric/utils";
 import * as fabricActions from "../../fabric/actions";
 import * as fabricTypes from "../../fabric/types";
+import parse from "color-parse";
 
 export type BoardProps = {
   items: CanvasObject[];
@@ -458,7 +459,11 @@ const Board = React.forwardRef<BoardActions, BoardProps>(
         const polygon = fabricUtils.createControllableCustomObject(
           fabric.Polygon,
           scaledCoords,
-          { name: `ID_${item.id}` },
+          {
+            name: `ID_${item.id}`,
+            stroke: item.color,
+            fill: `rgba(${parse(item.color).values.join(",")},${item.opacity ?? 0.4})`,
+          },
           scaledCoords.length === 4, // Is a rectangle
         );
         canvas.add(polygon);
diff --git a/src/components/Board/types.tsx b/src/components/Board/types.tsx
index a315322..37f9b99 100644
--- a/src/components/Board/types.tsx
+++ b/src/components/Board/types.tsx
@@ -4,4 +4,5 @@ export type CanvasObject = {
   color: string;
   value: string;
   coords: { x: number; y: number }[];
+  opacity?: number;
 };