Icon Color Select Dropdown

vite/src/pipedal/App.tsx

@@ -28,6 +28,7 @@ import { isDarkMode } from './DarkMode';
 import Tone3000AuthComplete from './Tone3000AuthComplete';
 import FontTest from './FontTest';
 
+import IconTest from './IconTest';
 
 declare module '@mui/material/styles' {
     interface Theme {
@@ -235,6 +236,11 @@ function isFontTest() {
     let param = url.searchParams.get("fontTest");
     return (param !== null)
 }
+function isIconTest() {
+    let url = new URL(window.location.href);
+    let param = url.searchParams.get("iconTest");
+    return (param !== null)
+}
 
 const App = (class extends React.Component {
     // Before the component mounts, we initialise our state
@@ -258,6 +264,7 @@ const App = (class extends React.Component {
                     {
                         isTone3000Auth() && (<Tone3000AuthComplete />)
                         || isFontTest() && (<FontTest />)
+                        || isIconTest() && (<IconTest />)
                         || (<AppThemed />)
                     }
                 </ThemeProvider>

vite/src/pipedal/IconColorDropdownButton.tsx

@@ -0,0 +1,142 @@
+/*
+ * MIT License
+ * 
+ * Copyright (c) Robin E. R. Davies
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+ * of the Software, and to permit persons to whom the Software is furnished to do
+ * so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { useState, useEffect } from 'react';
+import ButtonBase from '@mui/material/ButtonBase';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import { useTheme } from '@mui/material/styles';
+import { getIconColorSelections,getIconColor,IconColorSelect } from './PluginIcon';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+
+
+export enum DropdownAlignment {
+    SE, SW
+}
+
+interface ColorListDropdownButtonProps {
+    colorKey: string;
+    colorList?: IconColorSelect[];
+
+    onColorChange: (selection: IconColorSelect) => void;
+    dropdownAlignment: DropdownAlignment;
+}
+
+const IconColorDropdownButton: React.FC<ColorListDropdownButtonProps> = (props: ColorListDropdownButtonProps) => {
+    let { colorList, colorKey, onColorChange, dropdownAlignment } = props;
+    if (!colorList) colorList = getIconColorSelections();
+    const theme = useTheme();
+
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+    let selectedColor = getIconColor(colorKey);
+    if (selectedColor === undefined) {
+        selectedColor = theme.palette.text.secondary;
+    }
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    const handleColorSelect = (selection: IconColorSelect) => {
+        handleClose();
+        onColorChange(selection);
+    };
+    return (
+        <div>
+            <ButtonBase
+                onClick={handleClick}
+                style={{
+                    height: 48, padding: 12, borderRadius: 18
+                }}
+            >
+                <div style={{ display: "flex", flexFlow: "row nowrap", alignItems: "center", gap: 0 }} >
+                    <div style={{
+                        width: 24, height: 24,
+                        background: selectedColor,
+                        borderRadius: 6,
+                        borderColor: theme.palette.text.secondary,
+                        borderWidth: 1,
+                        borderStyle: "solid"
+                    }} />
+                    <ArrowDropDownIcon  />
+                </div>
+
+            </ButtonBase>
+            <Menu
+                anchorEl={anchorEl}
+                open={anchorEl !== null}
+                onClose={handleClose}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: (dropdownAlignment === DropdownAlignment.SW ?  'right' : 'left')
+                }}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: (dropdownAlignment === DropdownAlignment.SW ?  'right' : 'left'),
+                }}
+            >
+                <div style={{display: "flex", flexFlow: "row nowrap", columnGap: 8,padding: 8}}>
+
+                    <MenuItem key={"default"} onClick={() => handleColorSelect({key: "default", value: undefined})}
+                        style={{
+                            width: 48, height: 48, borderRadius: 6, margin: 4,
+                            borderStyle: "solid",
+                            borderWidth: colorKey ==="default" ? 2 : 0.25,
+                            borderColor: colorKey == "default" ?
+                                theme.palette.text.primary
+                                : theme.palette.text.secondary,
+                            backgroundColor: theme.palette.text.secondary
+                        }}
+                    ></MenuItem>
+
+                    <div style={{ display: "flex", flexFlow: "row wrap", width: 56 * 4 + 2 }}>
+                        {colorList.map((color) => {
+                            let selected = color.key === selectedColor;
+                            return (
+                                <MenuItem key={color.key} onClick={() => handleColorSelect(color)}
+                                    style={{
+                                        width: 48, height: 48, borderRadius: 6, margin: 4,
+                                        borderStyle: "solid",
+                                        borderWidth: selected ? 2 : 0.25,
+                                        borderColor: color.key === selectedColor ?
+                                            theme.palette.text.primary
+                                            : theme.palette.text.secondary,
+                                        backgroundColor: color.value
+                                    }}
+                                ></MenuItem>
+                            )
+                        }
+                        )}
+                    </div>
+                </div>
+            </Menu>
+        </div>
+    );
+};
+
+export default IconColorDropdownButton;

vite/src/pipedal/IconTest.tsx

@@ -0,0 +1,73 @@
+
+import { useState } from "react";
+import { PluginType } from "./Lv2Plugin";
+import PluginIcon, { getIconColorSelections } from './PluginIcon';
+import IconColorDropdownButton, {DropdownAlignment} from "./IconColorDropdownButton";
+
+function IconTest() {
+    const [selectedColor, setSelectedColor] = useState<string | undefined>(undefined);
+    const [selectedKey, setSelectedKey] = useState<string>("");
+    return (
+        <>
+            <div style={{ display: "flex", flexFlow: "row wrap", rowGap: 8, columnGap: 8, padding: 16, background: "#282828" }}>
+                {
+                    getIconColorSelections().map((color) => {
+                        return (
+                            <div key={color.key} style={{ width: 48, height: 48, background: color.value, borderRadius: 4,opacity: 0.8 }} 
+                                onClick={() => { 
+                                    setSelectedColor(color.value ); 
+                                }}
+                            />
+                        );
+
+                    })
+                }
+
+            </div>
+            <div style={{ display: "flex", flexFlow: "row wrap", rowGap: 8, columnGap: 8, padding: 16, background: "#E8E8E8" }}>
+                {
+                    getIconColorSelections(false).map((color) => {
+                        return (
+                            <div key={color.key} style={{ width: 48, height: 48, background: color.value, borderRadius: 4,opacity: 0.8 }} 
+                                onClick={() => { setSelectedColor(color.value ); }}
+                            />
+                        );
+
+                    })
+                }
+
+            </div>
+            <div>
+                <IconColorDropdownButton 
+                    colorKey={selectedKey} 
+                    onColorChange={(selection) => 
+                        {
+                            setSelectedColor(selection.value);
+                            setSelectedKey(selection.key);
+                        } 
+                    }
+                    dropdownAlignment={DropdownAlignment.SE} />
+            </div>
+            <div style={{ display: "flex", flexFlow: "row wrap", rowGap: 8, columnGap: 8, padding: 16 }}>
+                {
+                    Object.values(PluginType).map((pluginType) => (
+                        <div key={pluginType}>
+                            <PluginIcon pluginType={pluginType} size={32} opacity={0.8} color={selectedColor} />
+                        </div>
+                    ))
+                }
+            </div>
+            <div style={{ display: "flex", flexFlow: "row wrap", rowGap: 8, columnGap: 8, padding: 16, background: "#E8E8E8" }}>
+                {
+                    Object.values(PluginType).map((pluginType) => (
+                        <div key={pluginType}>
+                            <PluginIcon pluginType={pluginType} size={32} opacity={0.8} color={selectedColor} />
+                        </div>
+                    ))
+                }
+            </div>
+        </>
+    );
+}
+
+export default IconTest;

vite/src/pipedal/PluginIcon.tsx

@@ -68,6 +68,59 @@ import FxTerminalIcon from './svg/fx_terminal.svg?react';
 
 import { isDarkMode } from './DarkMode';
 
+export interface IconColorSelect {
+    key: string, 
+    value: string | undefined,
+};
+
+export const getIconColorSelections = (darkMode?: boolean): IconColorSelect[] => {
+    if (darkMode === undefined) darkMode = isDarkMode();
+    let result: IconColorSelect[] = [];
+
+    let l: number;
+    let c: number;
+    if (darkMode) {
+        l = 0.8;
+        c = 0.25;
+    } else {
+        l = 0.5;
+        c = 0.25;
+    }
+
+    for (let angle = 0; angle < 360; angle += 22.5) {
+        result.push(
+            {
+                key: "oklch" + Math.round(angle*10).toString(), 
+                value: ("oklch("  + l.toString() + " " + c.toString() + " " + (angle).toString() + ")")
+
+            }
+        );
+    }
+    return result;
+
+};
+
+
+function makeDefaultColorMap(): {[key:string]: string} {
+    let result: {[key:string]: string} = {};
+    for (let selection  of getIconColorSelections())
+    {
+        result[selection.key] = selection.value??"";
+    }
+    return result;
+}
+    
+const iconColors: {[key:string]: string} = makeDefaultColorMap();
+
+export const getIconColor = (key?: string): string| undefined => {
+    if (iconColors.hasOwnProperty(key!))
+    {
+        return iconColors[key!];
+    }
+    return undefined;
+}
+
+
 
 
 const styles = (theme: Theme) =>
@@ -86,13 +139,13 @@ const styles = (theme: Theme) =>
 export interface PluginIconProps extends WithStyles<typeof styles> {
     size?: number;
     opacity?: number;
+    color?: string;
     offsetY?: number;
     pluginType: PluginType;
     pluginMissing?: boolean;
 }
 
-export function SelectSvgIcon(plugin_type: PluginType, className: string, size: number = 24, opacity: number = 1.0, missingPlugin: boolean = false) {
+export function SelectSvgIcon(plugin_type: PluginType, className: string, size: number = 24, opacity: number = 1.0, missingPlugin: boolean = false, color = "") {
-    let color = "";
     if (missingPlugin) {
         color = isDarkMode() ? "#C00000" : "#B00000";
     }
@@ -268,7 +321,7 @@ export function SelectIconUri(plugin_type: PluginType) {
 }
 
 const PluginIcon = withStyles((props: PluginIconProps) => {
-    const { pluginType, opacity, pluginMissing } = props;
+    const { pluginType, opacity, pluginMissing,color } = props;
     const classes = withStyles.getClasses(props);
 
     let pluginMissing_: boolean = pluginMissing ?? false;
@@ -277,7 +330,7 @@ const PluginIcon = withStyles((props: PluginIconProps) => {
     if (props.size) size = props.size;
     let topVal: number = (props.offsetY ?? 0);
 
-    let svgIcon = SelectSvgIcon(pluginType, classes.icon, size, opacity, pluginMissing_);
+    let svgIcon = SelectSvgIcon(pluginType, classes.icon, size, opacity, pluginMissing_,color? color: "" );
     if (svgIcon) {
         return svgIcon;
     }

vite/src/pipedal/svg/fx_spectral.svg

@@ -1,25 +1,28 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+<svg
-	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+   version="1.1"
-<g id="x">
+   x="0px"
-</g>
+   y="0px"
-<g id="Layer_1">
+   width="48px"
-	<path d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
+   height="48px"
-	<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square" x1="10.167" y1="32.584" x2="38.584" y2="32.584"/>
+   viewBox="0 0 48 48"
-	<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square" x1="12.5" y1="32.584" x2="12.5" y2="12"/>
+   enable-background="new 0 0 48 48"
-	<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square" x1="20.5" y1="32.584" x2="20.5" y2="19"/>
+   xml:space="preserve"
-	<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square" x1="28.5" y1="32.584" x2="28.5" y2="15"/>
+   id="svg870"
-	<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square" x1="36.5" y1="32.584" x2="36.5" y2="23"/>
+   xmlns="http://www.w3.org/2000/svg"
-</g>
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
-<g id="Compound" display="none">
+   id="defs874">
-	<g display="inline">
+	
-		<path d="M41,1H7C3.687,1,1,3.687,1,7v34c0,3.313,2.687,6,6,6h34c3.313,0,6-2.688,6-6V7C47,3.687,44.313,1,41,1z M24,40.928
+	
-			c-9.334,0-16.928-7.594-16.928-16.928S14.666,7.072,24,7.072S40.928,14.666,40.928,24S33.334,40.928,24,40.928z"/>
+	
-		<path d="M24,9.072C15.769,9.072,9.072,15.769,9.072,24c0,8.231,6.697,14.928,14.928,14.928c8.231,0,14.928-6.696,14.928-14.928
+	
-			C38.928,15.769,32.231,9.072,24,9.072z M31.296,20.515l-2.568-1.528l-4.205,7.069l-2.579-1.533l4.206-7.07l-2.567-1.527
+	
-			l7.831-4.384L31.296,20.515z"/>
+	
-	</g>
+</defs>
-</g>
+<path
-</svg>
+   id="path850"
+   d="M 7 1 C 3.6870033 1 1 3.6870033 1 7 L 1 41 C 1 44.311997 3.6870033 47 7 47 L 41 47 C 44.311997 47 47 44.312997 47 41 L 47 7 C 47 3.6870033 44.312997 1 41 1 L 7 1 z M 11 10.5 L 14 10.5 L 14 12 L 14 31.083984 L 19 31.083984 L 19 19 L 19 17.5 L 22 17.5 L 22 19 L 22 31.083984 L 27 31.083984 L 27 15 L 27 13.5 L 30 13.5 L 30 15 L 30 31.083984 L 35 31.083984 L 35 23 L 35 21.5 L 38 21.5 L 38 23 L 38 31.083984 L 38.583984 31.083984 L 40.083984 31.083984 L 40.083984 34.083984 L 38.583984 34.083984 L 38 34.083984 L 35 34.083984 L 10.167969 34.083984 L 8.6679688 34.083984 L 8.6679688 31.083984 L 10.167969 31.083984 L 11 31.083984 L 11 12 L 11 10.5 z " />
+
+</svg>