From b30f25ce51621d62edc422a4b0743e6e8c1179d1 Mon Sep 17 00:00:00 2001
From: "bozo.kopic" <bozo@kopic.xyz>
Date: Sun, 13 Nov 2022 21:36:08 +0100
Subject: ui color picker

---
 src_js/common.ts    |  6 +++++-
 src_js/vt/input.ts  | 16 ++++++++++++++++
 src_js/vt/result.ts | 20 ++++++++++++++++++++
 src_js/vt/svg.ts    | 11 ++++++-----
 4 files changed, 47 insertions(+), 6 deletions(-)

(limited to 'src_js')

diff --git a/src_js/common.ts b/src_js/common.ts
index 793ce7a..2675438 100644
--- a/src_js/common.ts
+++ b/src_js/common.ts
@@ -81,7 +81,11 @@ export const defaultState = {
     svg: {
         font_size: '1',
         show_names: true,
-        show_dimensions: false
+        show_dimensions: false,
+        cut_color: '#646464',
+        item_color: '#fafafa',
+        selected_color: '#c88c8c',
+        unused_color: '#eeeeee'
     },
     calculating: false
 };
diff --git a/src_js/vt/input.ts b/src_js/vt/input.ts
index 749edbb..c7358ba 100644
--- a/src_js/vt/input.ts
+++ b/src_js/vt/input.ts
@@ -84,3 +84,19 @@ export function select(
         ])
     ];
 }
+
+
+export function color(
+    value: string,
+    onChange: (val: string) => void
+): u.VNode {
+    return ['input', {
+        props: {
+            type: 'color',
+            value: value
+        },
+        on: {
+            change: (evt: Event) => onChange((evt.target as HTMLInputElement).value)
+        }
+    }];
+}
diff --git a/src_js/vt/result.ts b/src_js/vt/result.ts
index fc23089..f49f823 100644
--- a/src_js/vt/result.ts
+++ b/src_js/vt/result.ts
@@ -41,6 +41,26 @@ export function main(): u.VNodeChild[] {
                 'Show dimensions',
                 r.get('svg', 'show_dimensions') as boolean,
                 val => r.set(['svg', 'show_dimensions'], val)
+            ),
+            ['label', 'Cut color'],
+            input.color(
+                r.get('svg', 'cut_color') as string,
+                val => r.set(['svg', 'cut_color'], val)
+            ),
+            ['label', 'Item color'],
+            input.color(
+                r.get('svg', 'item_color') as string,
+                val => r.set(['svg', 'item_color'], val)
+            ),
+            ['label', 'Selected color'],
+            input.color(
+                r.get('svg', 'selected_color') as string,
+                val => r.set(['svg', 'selected_color'], val)
+            ),
+            ['label', 'Unused color'],
+            input.color(
+                r.get('svg', 'unused_color') as string,
+                val => r.set(['svg', 'unused_color'], val)
             )
         ],
         Object.keys(result.params.panels).map(panelResult)
diff --git a/src_js/vt/svg.ts b/src_js/vt/svg.ts
index 1108e87..73406fd 100644
--- a/src_js/vt/svg.ts
+++ b/src_js/vt/svg.ts
@@ -16,16 +16,17 @@ export function main(): u.VNode | null {
     const panel = result.params.panels[selected.panel];
     const used = u.filter(i => i.panel == selected.panel, result.used);
     const unused = u.filter(i => i.panel == selected.panel, result.unused);
-    const panelColor = 'rgb(100,100,100)';
-    const itemColor = 'rgb(250,250,250)';
-    const selectedItemColor = 'rgb(200,140,140)';
-    const unusedColor = 'rgb(238,238,238)';
+
     const fontSize = String(
         Math.max(panel.height, panel.width) * 0.02 *
         u.strictParseFloat(r.get('svg', 'font_size') as string)
     );
     const showNames = r.get('svg', 'show_names');
     const showDimensions = r.get('svg', 'show_dimensions');
+    const cutColor = r.get('svg', 'cut_color');
+    const itemColor = r.get('svg', 'item_color');
+    const selectedItemColor = r.get('svg', 'selected_color');
+    const unusedColor = r.get('svg', 'unused_color');
 
     return ['svg', {
         attrs: {
@@ -41,7 +42,7 @@ export function main(): u.VNode | null {
                 width: String(panel.width),
                 height: String(panel.height),
                 'stroke-width': '0',
-                fill: panelColor
+                fill: cutColor
             }}
         ],
         used.map(used => {
-- 
cgit v1.2.3-70-g09d2