cloudmr-ux 2.0.7 → 3.0.2

package/dist/core/common/components/NiivueTools/components/ColorPicker.d.ts

@@ -0,0 +1,5 @@
+export declare function ColorPicker(props: {
+    title: string;
+    colorRGB01: number[];
+    onSetColor: Function;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/core/common/components/NiivueTools/components/ColorPicker.js

@@ -0,0 +1,68 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from "@mui/material";
+import { Input } from "@mui/material";
+import { Box } from "@mui/material";
+import React from "react";
+export function ColorPicker(props) {
+    var _a = React.useState("#ff0000"), hexColor = _a[0], setHexColor = _a[1];
+    React.useEffect(function () {
+        var rgb255 = rgb01Torgb255(props.colorRGB01);
+        var hex = rgb2Hex(rgb255);
+        console.log(props.title);
+        console.log(rgb255);
+        console.log(hex);
+        console.log("end use effect");
+        setHexColor(hex);
+    }, []);
+    function rgb01Torgb255(rgb01) {
+        return [
+            Math.round(rgb01[0] * 255),
+            Math.round(rgb01[1] * 255),
+            Math.round(rgb01[2] * 255),
+        ];
+    }
+    function componentToHex(c) {
+        var hex = c.toString(16);
+        return hex.length == 1 ? "0" + hex : hex;
+    }
+    function rgb2Hex(rgb255) {
+        return ("#" +
+            componentToHex(rgb255[0]) +
+            componentToHex(rgb255[1]) +
+            componentToHex(rgb255[2]));
+    }
+    function hex2rgb(h) {
+        return [
+            parseInt(h.substring(1, 3), 16),
+            parseInt(h.substring(3, 5), 16),
+            parseInt(h.substring(5), 16),
+        ];
+    }
+    function updateColor(event) {
+        var hex = event.target.value;
+        console.log(hex);
+        setHexColor(hex);
+        var rgb = hex2rgb(hex);
+        var rgb01 = rgb.map(function (val) { return val / 255; });
+        props.onSetColor(rgb01);
+    }
+    return (_jsxs(Box, __assign({ sx: {
+            display: "flex"
+        }, m: 1 }, { children: [_jsx(Typography, __assign({ style: {
+                    marginRight: "auto"
+                } }, { children: props.title })), _jsx(Input, { disableUnderline: false, autoFocus: false, type: "color", style: {
+                    width: "50px",
+                    height: "20px"
+                }, onInput: updateColor, value: hexColor })] })));
+}

package/dist/core/common/components/NiivueTools/components/DrawPlatte.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface DrawPlatteProps {
+    expandDrawOptions: boolean;
+    updateDrawPen: (e: any) => void;
+    setDrawingEnabled: (enabled: boolean) => void;
+    brushSize: number;
+    updateBrushSize: (size: number) => void;
+}
+declare const DrawPlatte: React.FC<DrawPlatteProps>;
+export default DrawPlatte;

package/dist/core/common/components/NiivueTools/components/DrawPlatte.js

@@ -0,0 +1,88 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, IconButton, Slider, Typography } from "@mui/material";
+import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
+import FiberManualRecordOutlinedIcon from "@mui/icons-material/FiberManualRecordOutlined";
+var DrawPlatte = function (_a) {
+    var expandDrawOptions = _a.expandDrawOptions, updateDrawPen = _a.updateDrawPen, setDrawingEnabled = _a.setDrawingEnabled, brushSize = _a.brushSize, updateBrushSize = _a.updateBrushSize;
+    var options = [
+        _jsx(FiberManualRecordOutlinedIcon, { sx: { color: "red" } }),
+        _jsx(FiberManualRecordOutlinedIcon, { sx: { color: "green" } }),
+        _jsx(FiberManualRecordOutlinedIcon, { sx: { color: "blue" } }),
+        _jsx(FiberManualRecordOutlinedIcon, { sx: { color: "yellow" } }),
+        _jsx(FiberManualRecordOutlinedIcon, { sx: { color: "cyan" } }),
+        _jsx(FiberManualRecordOutlinedIcon, { sx: { color: "#e81ce8" } }),
+    ];
+    var filledOptions = [
+        _jsx(FiberManualRecordIcon, { sx: { color: "red" } }),
+        _jsx(FiberManualRecordIcon, { sx: { color: "green" } }),
+        _jsx(FiberManualRecordIcon, { sx: { color: "blue" } }),
+        _jsx(FiberManualRecordIcon, { sx: { color: "yellow" } }),
+        _jsx(FiberManualRecordIcon, { sx: { color: "cyan" } }),
+        _jsx(FiberManualRecordIcon, { sx: { color: "#e81ce8" } }),
+    ];
+    return (_jsxs(Stack, __assign({ style: {
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            zIndex: 10,
+            border: "".concat(expandDrawOptions ? "1px" : 0, " solid #bbb"),
+            maxWidth: expandDrawOptions ? 300 : 0,
+            // transition: 'all 0.5s',
+            overflow: "hidden",
+            borderRadius: "16px",
+            borderTopLeftRadius: "6pt",
+            borderTopRightRadius: "6pt",
+            background: "#333"
+        }, direction: "column" }, { children: [_jsxs(Stack, __assign({ sx: { mb: 1 }, alignItems: "center" }, { children: [_jsx(Typography, __assign({ color: "white", noWrap: true, gutterBottom: true, width: "100%", marginLeft: "10pt", fontSize: "11pt", alignItems: "start" }, { children: "Brush Size: ".concat(brushSize) })), _jsx(Slider, { value: brushSize, sx: {
+                            width: "80%",
+                            color: "#fff",
+                            "& .MuiSlider-track": { backgroundColor: "#fff", border: "none" },
+                            "& .MuiSlider-rail": { backgroundColor: "rgba(255,255,255,0.3)" },
+                            "& .MuiSlider-thumb": {
+                                backgroundColor: "#fff",
+                                border: "2px solid #fff",
+                                "&:hover, &.Mui-focusVisible, &.Mui-active": {
+                                    boxShadow: "0 0 0 8px rgba(255,255,255,0.16)"
+                                }
+                            },
+                            "& .MuiSlider-mark": { backgroundColor: "#fff" },
+                            "& .MuiSlider-markActive": { backgroundColor: "#fff" },
+                            "& .MuiSlider-valueLabel": {
+                                backgroundColor: "#fff",
+                                color: "#000"
+                            }
+                        }, step: 2, min: 1, max: 15, marks: true, onChange: function (event, value) {
+                            updateBrushSize(value);
+                        } })] })), _jsx(Stack
+            // style={{
+            //     border: `${expandDrawOptions ? '1px' : 0} solid #ccc`,
+            //     maxWidth: expandDrawOptions ? 300 : 0,
+            //     transition: 'all 0.5s',
+            //     overflow: 'hidden',
+            //     borderRadius: '16px'
+            // }}
+            , __assign({ 
+                // style={{
+                //     border: `${expandDrawOptions ? '1px' : 0} solid #ccc`,
+                //     maxWidth: expandDrawOptions ? 300 : 0,
+                //     transition: 'all 0.5s',
+                //     overflow: 'hidden',
+                //     borderRadius: '16px'
+                // }}
+                direction: "row" }, { children: filledOptions.map(function (value, index) { return (_jsx(IconButton, __assign({ onClick: function () {
+                        updateDrawPen({ target: { value: index + 1 } });
+                        setDrawingEnabled(true);
+                    } }, { children: value }), index)); }) }))] })));
+};
+export default DrawPlatte;

package/dist/core/common/components/NiivueTools/components/DrawToolKit.d.ts

@@ -0,0 +1,32 @@
+import { CSSProperties } from "react";
+import { ROI } from "../../../../features/rois/roiTypes";
+export interface DrawToolkitProps {
+    nv: any;
+    volumes: {
+        url: string;
+        name: string;
+    }[];
+    selectedVolume: number;
+    updateDrawPen: (e: any) => void;
+    drawPen: number;
+    setDrawingEnabled: (enabled: boolean) => void;
+    drawingEnabled: boolean;
+    rois?: ROI[];
+    selectedROI?: number;
+    setSelectedROI?: (selected: number) => void;
+    saveROI?: () => void;
+    changesMade: boolean;
+    drawUndo: () => void;
+    style?: CSSProperties;
+    brushSize: number;
+    updateBrushSize: (size: number) => void;
+    resampleImage: () => void;
+    roiVisible: boolean;
+    toggleROIVisible: () => void;
+    drawingOpacity: number;
+    setDrawingOpacity: (opacity: number) => void;
+    labelsVisible?: boolean;
+    toggleLabelsVisible?: () => void;
+    setDrawingChanged: (changed: boolean) => void;
+}
+export declare const DrawToolkit: (props: DrawToolkitProps) => import("react/jsx-runtime").JSX.Element;

package/dist/core/common/components/NiivueTools/components/DrawToolKit.js

@@ -0,0 +1,164 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, FormControl, IconButton, Slider, Stack, Tooltip, Typography, FormLabel, } from "@mui/material";
+import BrushIcon from "@mui/icons-material/Brush";
+import AutoFixNormalOutlinedIcon from "@mui/icons-material/AutoFixNormalOutlined";
+import ReplyIcon from "@mui/icons-material/Reply";
+import CameraAltIcon from "@mui/icons-material/CameraAlt";
+import React, { useState } from "react";
+import SvgIcon from "@mui/material/SvgIcon";
+import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
+import FiberManualRecordOutlinedIcon from "@mui/icons-material/FiberManualRecordOutlined";
+import FormatColorFillIcon from "@mui/icons-material/FormatColorFill";
+import DrawPlatte from "./DrawPlatte"; // Adjust the path as per your folder structure
+import DeleteIcon from "@mui/icons-material/Delete";
+import EraserPlatte from "./EraserPlatte";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import OpacityIcon from "@mui/icons-material/Opacity";
+import MaskPlatte from "./MaskPlatte";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+export var DrawToolkit = function (props) {
+    var _a = useState("n"), expandedOption = _a[0], setExpandedOption = _a[1];
+    var _b = React.useState(false), expandOpacityOptions = _b[0], setExpandOpacityOptions = _b[1];
+    var penColor = ["red", "green", "blue", "yellow", "cyan", "#e81ce8"][(props.drawPen & 7) - 1];
+    var filled = props.drawPen > 7;
+    function clickPaintBrush() {
+        if (expandedOption == "d") {
+            setExpandedOption("n");
+        }
+        else {
+            setExpandedOption("d");
+        }
+        props.setDrawingEnabled(expandedOption != "d");
+    }
+    function clickEraser() {
+        if (expandedOption == "e") {
+            setExpandedOption("n");
+        }
+        else {
+            props.updateDrawPen({ target: { value: 8 } });
+            setExpandedOption("e");
+        }
+        props.setDrawingEnabled(expandedOption != "e");
+    }
+    var _c = useState(undefined), maskColor = _c[0], setMaskColor = _c[1];
+    function clickMask() {
+        if (expandedOption == "m") {
+            setExpandedOption("n");
+        }
+        else {
+            setExpandedOption("m");
+        }
+        props.setDrawingEnabled(false);
+    }
+    var options = [
+        _jsx(FiberManualRecordOutlinedIcon, { sx: { color: "red" } }),
+        _jsx(FiberManualRecordOutlinedIcon, { sx: { color: "green" } }),
+        _jsx(FiberManualRecordOutlinedIcon, { sx: { color: "blue" } }),
+        _jsx(FiberManualRecordIcon, { sx: { color: "red" } }),
+        _jsx(FiberManualRecordIcon, { sx: { color: "green" } }),
+        _jsx(FiberManualRecordIcon, { sx: { color: "blue" } }),
+    ];
+    var eraseOptions = [
+        _jsx(FiberManualRecordIcon, {}),
+        _jsx(FiberManualRecordOutlinedIcon, {}),
+    ];
+    return (_jsx(ClickAwayListener, __assign({ onClickAway: function () {
+            // close any open popovers/palettes when clicking outside the ROI Tools
+            setExpandedOption("n");
+            setExpandOpacityOptions(false);
+            // also ensure drawing mode is not unexpectedly left enabled
+            props.setDrawingEnabled(false);
+        } }, { children: _jsxs(Box, __assign({ sx: {
+                display: "flex",
+                width: "100%",
+                flexDirection: "row",
+                justifyItems: "center",
+                alignItems: "center",
+                borderRadius: "4px",
+                height: "20pt",
+                backgroundColor: "#333"
+            }, style: props.style }, { children: [_jsx(FormControl, { children: _jsx(FormLabel, __assign({ component: "legend", className: "ms-2", style: {
+                            width: "100%",
+                            textAlign: "center",
+                            color: "white",
+                            fontSize: 16,
+                            fontWeight: 400
+                        }, sx: {
+                            marginBottom: 0,
+                            marginLeft: 2,
+                            color: "white",
+                            fontWeight: 500,
+                            fontSize: 14
+                        } }, { children: "ROI Tools:" })) }), _jsx(FormControl, { children: _jsxs(Stack, __assign({ direction: "row" }, { children: [_jsx(IconButton, __assign({ "aria-label": "draw", onClick: clickPaintBrush }, { children: _jsx(BrushIcon, { style: {
+                                        color: expandedOption == "d" && penColor != undefined
+                                            ? penColor
+                                            : "white"
+                                    } }) })), _jsx(DrawPlatte, { expandDrawOptions: expandedOption == "d", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled, brushSize: props.brushSize, updateBrushSize: props.updateBrushSize })] })) }), _jsx(FormControl, { children: _jsxs(Stack, __assign({ direction: "row" }, { children: [_jsx(IconButton, __assign({ "aria-label": "erase", onClick: clickEraser }, { children: filled || !(expandedOption == "e") ? (_jsx(EraserIcon, { style: { color: "#ddd" } })) : (_jsx(AutoFixNormalOutlinedIcon, { style: { color: "white" } })) })), _jsx(EraserPlatte, { expandEraseOptions: expandedOption == "e", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled, brushSize: props.brushSize, updateBrushSize: props.updateBrushSize })] })) }), _jsx(FormControl, { children: _jsx(Stack, __assign({ direction: "row" }, { children: _jsx(IconButton, __assign({ "aria-label": "revert", onClick: function () {
+                                props.drawUndo();
+                            } }, { children: _jsx(ReplyIcon, { style: { color: "white" } }) })) })) }), _jsx(FormControl, { children: _jsx(IconButton, __assign({ "aria-label": "capture", onClick: function () {
+                            props.nv.saveScene("".concat(props.volumes[props.selectedVolume].name, "_drawing.png"));
+                        } }, { children: _jsx(CameraAltIcon, { style: { color: "white" } }) })) }), _jsx(FormControl, { children: _jsx(IconButton, __assign({ "aria-label": "delete", onClick: function () {
+                            // props.nv.closeDrawing();
+                            // props.nv.setDrawingEnabled(true);
+                            props.nv.clearDrawing();
+                            props.resampleImage();
+                        } }, { children: _jsx(DeleteIcon, { style: { color: "white" } }) })) }), _jsx(Tooltip, __assign({ title: "Region of interests visibility" }, { children: _jsx(FormControl, { children: _jsx(IconButton, __assign({ "aria-label": "visible", onClick: function () {
+                                props.toggleROIVisible();
+                            } }, { children: props.roiVisible ? (_jsx(VisibilityIcon, { style: { color: "white" } })) : (_jsx(VisibilityOffIcon, { style: { color: "white" } })) })) }) })), _jsxs(FormControl, __assign({ style: { flexDirection: "row", alignItems: "center", color: "white" } }, { children: [_jsx(Tooltip, __assign({ title: "Region of interests opacity" }, { children: _jsx(IconButton, __assign({ "aria-label": "opaque", onClick: function () {
+                                    setExpandOpacityOptions(!expandOpacityOptions);
+                                } }, { children: _jsx(OpacityIcon, { style: { color: "white" } }) })) })), "=", " ".concat(props.drawingOpacity), _jsx(OpacityPlatte, { drawingOpacity: props.drawingOpacity, setDrawingOpacity: props.setDrawingOpacity, expanded: expandOpacityOptions })] })), _jsxs(FormControl, { children: [_jsx(Stack, __assign({ direction: "row" }, { children: _jsx(IconButton, __assign({ "aria-label": "fill", onClick: clickMask }, { children: _jsx(FormatColorFillIcon, { style: {
+                                        color: expandedOption == "m" && maskColor != undefined
+                                            ? maskColor
+                                            : "white"
+                                    } }) })) })), _jsx(MaskPlatte, { resampleImage: function () {
+                                props.resampleImage();
+                                props.setDrawingChanged(true);
+                            }, expanded: expandedOption == "m", nv: props.nv, setMaskColor: setMaskColor, unfocus: function () {
+                                setExpandedOption("n");
+                            } })] })] })) })));
+};
+/*
+<option value="0">Erase</option>
+          <option value="1">Red</option>
+          <option value="2">Green</option>
+          <option value="3">Blue</option>
+          <option value="8">Filled Erase</option>
+          <option value="9">Filled Red</option>
+          <option value="10">Filled Green</option>
+          <option value="11">Filled Blue</option>
+ */
+function EraserIcon(props) {
+    return (_jsxs(SvgIcon, __assign({}, props, { viewBox: "0 0 25 25" }, { children: [_jsx("rect", { x: "6", y: "3", width: "12", height: "22", rx: "2", ry: "2", transform: "rotate(230 12 12)", fill: "currentColor" }), _jsx("rect", { x: "7", y: "4", width: "10", height: "8", rx: "2", ry: "2", transform: "rotate(230 12 12)", fill: "#FFFFFF" })] })));
+}
+var OpacityPlatte = function (_a) {
+    var drawingOpacity = _a.drawingOpacity, setDrawingOpacity = _a.setDrawingOpacity, expanded = _a.expanded;
+    return (_jsx(Stack, __assign({ style: {
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            zIndex: 10,
+            border: "".concat(expanded ? "1px" : 0, " solid #bbb"),
+            maxWidth: expanded ? 300 : 0,
+            // transition: 'all 0.5s',
+            overflow: "hidden",
+            borderRadius: "16px",
+            borderTopLeftRadius: "6pt",
+            borderTopRightRadius: "6pt",
+            background: "#333",
+            width: 150
+        }, direction: "column" }, { children: _jsxs(Stack, __assign({ sx: { mb: 1 }, alignItems: "center" }, { children: [_jsx(Typography, __assign({ color: "white", noWrap: true, gutterBottom: true, width: "100%", marginLeft: "10pt", fontSize: "11pt", alignItems: "start" }, { children: "Opacity: ".concat(drawingOpacity) })), _jsx(Slider, { sx: { width: "80%" }, value: drawingOpacity, step: 0.01, min: 0, max: 1, onChange: function (event, value) {
+                        setDrawingOpacity(value);
+                    } })] })) })));
+};

package/dist/core/common/components/NiivueTools/components/EraserPlatte.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface EraserPlatteProps {
+    expandEraseOptions: boolean;
+    updateDrawPen: (e: any) => void;
+    setDrawingEnabled: (enabled: boolean) => void;
+    brushSize: number;
+    updateBrushSize: (size: number) => void;
+}
+declare const DrawPlatte: React.FC<EraserPlatteProps>;
+export default DrawPlatte;

package/dist/core/common/components/NiivueTools/components/EraserPlatte.js

@@ -0,0 +1,43 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, IconButton, Slider, Typography } from "@mui/material";
+import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
+import FiberManualRecordOutlinedIcon from "@mui/icons-material/FiberManualRecordOutlined";
+var DrawPlatte = function (_a) {
+    var expandEraseOptions = _a.expandEraseOptions, updateDrawPen = _a.updateDrawPen, setDrawingEnabled = _a.setDrawingEnabled, brushSize = _a.brushSize, updateBrushSize = _a.updateBrushSize;
+    var eraseOptions = [
+        _jsx(FiberManualRecordIcon, { style: { color: "white" } }),
+        _jsx(FiberManualRecordOutlinedIcon, { style: { color: "white" } }),
+    ];
+    return (_jsxs(Stack, __assign({ style: {
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            zIndex: 10,
+            border: "".concat(expandEraseOptions ? "1px" : 0, " solid #bbb"),
+            maxWidth: expandEraseOptions ? 300 : 0,
+            // transition: 'all 0.5s',
+            overflow: "hidden",
+            borderRadius: "16px",
+            borderTopLeftRadius: "6pt",
+            borderTopRightRadius: "6pt",
+            background: "#333",
+            width: 150
+        }, direction: "column" }, { children: [_jsxs(Stack, __assign({ sx: { mb: 1 }, alignItems: "center" }, { children: [_jsx(Typography, __assign({ color: "white", noWrap: true, gutterBottom: true, width: "100%", marginLeft: "10pt", fontSize: "11pt", alignItems: "start" }, { children: "Eraser Size: ".concat(brushSize) })), _jsx(Slider, { sx: { width: "80%" }, value: brushSize, step: 2, min: 1, max: 15, marks: true, onChange: function (event, value) {
+                            updateBrushSize(value);
+                        } })] })), _jsx(Stack, __assign({ direction: "row", style: { justifyContent: "center" } }, { children: eraseOptions.map(function (value, index) { return (_jsx(IconButton, __assign({ onClick: function () {
+                        updateDrawPen({ target: { value: index == 0 ? 8 : 0 } });
+                        setDrawingEnabled(true);
+                    } }, { children: value }), index)); }) }))] })));
+};
+export default DrawPlatte;

package/dist/core/common/components/NiivueTools/components/Layer.d.ts

@@ -0,0 +1,10 @@
+export default function Layer(props: {
+    image: any;
+    nii: any;
+    nv: any;
+    getColorMapValues: Function;
+    onOpacityChange: Function;
+    onRemoveLayer: Function;
+    onColorMapChange: Function;
+    colorMapValues: any;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/core/common/components/NiivueTools/components/Layer.js

@@ -0,0 +1,117 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, MenuItem } from "@mui/material";
+import { CmrLabel } from "../../../../../index";
+import { Select } from "@mui/material";
+import { InputLabel } from "@mui/material";
+import { FormControl } from "@mui/material";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import React from "react";
+function makeColorGradients(colorMapValues) {
+    var gradients = "";
+    var c = colorMapValues;
+    var n = c.R.length;
+    gradients += "rgba(".concat(c.R[n - 1], ",").concat(c.G[n - 1], ",").concat(c.B[n - 1], ",").concat(1, ")");
+    gradients += "linear-gradient(90deg,";
+    for (var j = 0; j < n; j++) {
+        gradients += "rgba(".concat(c.R[j], ",").concat(c.G[j], ",").concat(c.B[j], ",").concat(1, ") ").concat((j / (n - 1)) * 100, "%,");
+    }
+    gradients = gradients.slice(0, -1);
+    gradients += ")";
+    return gradients;
+}
+export default function Layer(props) {
+    var allowedColorMaps = [
+        "bone",
+        "gray",
+        "hot",
+        "hsv",
+        "jet",
+        "plasma",
+        "turbo",
+        "viridis",
+    ];
+    var image = props.image;
+    var nii = props.nii;
+    var _a = React.useState(true), detailsOpen = _a[0], setDetailsOpen = _a[1];
+    var _b = React.useState(image.colormap), color = _b[0], setColor = _b[1];
+    var _c = React.useState(1.0), opacity = _c[0], setOpacity = _c[1];
+    var ArrowIcon = detailsOpen ? (_jsx(KeyboardArrowUpIcon, {})) : (_jsx(KeyboardArrowDownIcon, {}));
+    // console.log(props.colorMapValues)
+    var allColors = props.nv
+        .colormaps()
+        .filter(function (colorName) { return allowedColorMaps.includes(colorName); })
+        .map(function (colorName) {
+        return (_jsx(MenuItem, __assign({ value: colorName }, { children: _jsxs(Box, __assign({ sx: {
+                    display: "flex",
+                    flexDirection: "row",
+                    width: "100%"
+                } }, { children: [_jsx(Box, __assign({ sx: {
+                            display: "flex",
+                            flexDirection: "row"
+                        } }, { children: colorName })), _jsx(Box, { sx: {
+                            display: "flex",
+                            flexDirection: "row",
+                            width: "20%",
+                            ml: "auto"
+                        }, style: {
+                            background: makeColorGradients(props.getColorMapValues(colorName))
+                        } })] })) }), colorName));
+    });
+    function handleDetails() {
+        setDetailsOpen(!detailsOpen);
+    }
+    function handleColorChange(event) {
+        var clr = event.target.value;
+        var id = image.id;
+        console.log(clr);
+        console.log(id);
+        props.onColorMapChange(id, clr);
+        setColor(clr);
+    }
+    function handleDelete() {
+        props.onRemoveLayer(image);
+    }
+    function handleOpacityChanged(a) {
+        setOpacity(a);
+        image.opacity = a;
+        props.onOpacityChange(a);
+    }
+    return (_jsx(Box, __assign({ sx: {
+            display: "flex",
+            flexDirection: "column"
+        } }, { children: _jsxs(Box, __assign({ sx: {
+                display: detailsOpen ? "flex" : "none",
+                flexDirection: "column"
+            } }, { children: [_jsxs(Box, __assign({ sx: {
+                        display: "flex",
+                        flexDirection: "column",
+                        height: "100%",
+                        width: "100%",
+                        marginBottom: "10px"
+                    } }, { children: [_jsxs(CmrLabel, __assign({ marginLeft: 2 }, { children: ["Opacity: ", opacity.toFixed(2)] })), _jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: opacity, onChange: function (e) {
+                                var v = Math.max(0, Math.min(1, parseFloat(e.target.value) || 0));
+                                handleOpacityChanged(v); // updates local state, image.opacity, and notifies parent
+                            }, style: {
+                                width: "100%",
+                                alignSelf: "center",
+                                margin: "8px 0 16px 0",
+                                accentColor: "#580f8b"
+                            } })] })), _jsx(Box, __assign({ sx: {
+                        display: "flex",
+                        flexDirection: "row",
+                        justifyContent: "space-between",
+                        width: "100%"
+                    } }, { children: _jsxs(FormControl, { children: [_jsx(InputLabel, { children: "Colormap" }), _jsx(Select, __assign({ style: { width: "200px" }, value: color, label: "Colormap", size: "small", onChange: handleColorChange }, { children: allColors }))] }) }))] })) })));
+}

package/dist/core/common/components/NiivueTools/components/LayersPanel.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare function LayersPanel(props: {
+    onAddLayer: Function;
+    open: boolean;
+    children: React.ReactNode;
+    onToggleMenu?: React.MouseEventHandler<HTMLButtonElement>;
+    width: number;
+}): import("react/jsx-runtime").JSX.Element;