ui color picker

3 files changed, 42 insertions, 5 deletions

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 => {