cloudmr-ux 4.3.7 → 4.3.9

package/dist/CmrComponents/niivue-viewer/mro-draw-toolkit/MaskPlatte.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Stack, IconButton, Typography, Box } from "@mui/material";
+import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+import { InvertibleDualSlider, CmrCheckbox } from "cloudmr-ux";
+var __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);
+};
+var MaskPlatte = function (_a) {
+    var expanded = _a.expanded, nv = _a.nv, setMaskColor = _a.setMaskColor, resampleImage = _a.resampleImage, unfocus = _a.unfocus;
+    var _b = useState(0), colorIndex = _b[0], storeColorIndex = _b[1];
+    var _c = useState("red"), maskColor = _c[0], storeMaskColor = _c[1];
+    var _d = useState(false), checked = _d[0], setChecked = _d[1];
+    var _e = useState(undefined), original = _e[0], setOriginal = _e[1];
+    var colors = ["red", "green", "blue", "yellow", "cyan", "#e81ce8"];
+    var filledOptions = colors.map(function (color, i) {
+        return _jsx(FiberManualRecordIcon, { sx: { color: color } }, i);
+    });
+    if (expanded) {
+        setMaskColor(maskColor);
+    }
+    else {
+        setMaskColor(undefined);
+    }
+    var _f = useState(nv.volumes[0] ? nv.volumes[0].vox_min : 0), min = _f[0], setMin = _f[1];
+    var _g = useState(nv.volumes[0] ? nv.volumes[0].vox_max : 1), max = _g[0], setMax = _g[1];
+    var cancelMask = function () {
+        if (original)
+            nv.drawBitmap = new Uint8Array(original);
+        else
+            return;
+        nv.refreshDrawing(true);
+        resampleImage();
+        setOriginal(undefined);
+    };
+    useEffect(function () {
+        if (!expanded) {
+            cancelMask();
+        }
+        else {
+            if (colorIndex !== -1)
+                nv.fillRange(min, max, colorIndex + 1, checked, original, setOriginal);
+            resampleImage();
+        }
+    }, [expanded]);
+    useEffect(function () {
+        if (colorIndex !== -1 && expanded)
+            nv.fillRange(min, max, colorIndex + 1, checked, original, setOriginal);
+    }, [min, max, checked]);
+    return _jsxs(Stack, __assign({
+        style: {
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            zIndex: 1500,
+            border: "".concat(expanded ? "1px" : 0, " solid #bbb"),
+            maxWidth: expanded ? 450 : 0,
+            overflow: expanded ? "visible" : "hidden",
+            borderRadius: "16px",
+            borderTopLeftRadius: "6pt",
+            borderTopRightRadius: "6pt",
+            background: "#333"
+        },
+        direction: "column"
+    }, {
+        children: [
+            _jsx(Stack, __assign({ alignItems: "center" }, {
+                children: _jsx(Typography, __assign({
+                    color: "white",
+                    gutterBottom: true,
+                    width: "100%",
+                    marginLeft: "10pt",
+                    fontSize: "11pt",
+                    alignItems: "start"
+                }, { children: "Mask range:" }))
+            })),
+            _jsxs(Stack, __assign({ direction: "row", flexDirection: "row", justifyContent: "center" }, {
+                children: [
+                    filledOptions.map(function (value, index) {
+                        return _jsx(IconButton, __assign({
+                            onClick: function () {
+                                storeColorIndex(index);
+                                storeMaskColor(colors[index]);
+                                setMaskColor(colors[index]);
+                                nv.fillRange(min, max, index + 1, checked, original, setOriginal);
+                                resampleImage();
+                            }
+                        }, { children: value }), index);
+                    }),
+                    _jsx(CmrCheckbox, __assign({
+                        style: { color: "white" },
+                        onChange: function (e) {
+                            e.stopPropagation();
+                            setChecked(e.target.checked);
+                            resampleImage();
+                        }
+                    }, { children: "Inverted" })),
+                ]
+            })),
+            _jsx(Stack, __assign({ direction: "row", sx: { mb: 1 } }, {
+                children: _jsx(Box, __assign({ width: 400, style: { paddingLeft: "10px", paddingRight: "10px" } }, {
+                    children: _jsx(InvertibleDualSlider, {
+                        name: "",
+                        min: nv.volumes[0] ? nv.volumes[0].vox_min : 0,
+                        max: nv.volumes[0] ? nv.volumes[0].vox_max : 1,
+                        reverse: checked,
+                        setMin: setMin,
+                        setMax: setMax,
+                        onFinalize: function () {
+                            resampleImage();
+                        }
+                    })
+                }))
+            })),
+            _jsxs(Stack, __assign({ direction: "row", flexDirection: "row", justifyContent: "center" }, {
+                children: [
+                    _jsx(IconButton, __assign({
+                        onClick: function () {
+                            setOriginal(undefined);
+                            nv.drawAddUndoBitmapWithHiddenVoxels();
+                            unfocus();
+                        }
+                    }, { children: _jsx(CheckIcon, { style: { color: "green" } }) })),
+                    _jsx(IconButton, __assign({
+                        onClick: function () {
+                            cancelMask();
+                            unfocus();
+                        }
+                    }, { children: _jsx(CloseIcon, { style: { color: "red" } }) })),
+                ]
+            })),
+        ]
+    }));
+};
+export default MaskPlatte;

package/dist/CmrComponents/niivue-viewer/mro-draw-toolkit/MroDrawToolkit.d.ts

@@ -0,0 +1 @@
+export function MroDrawToolkit(props: any): import("react/jsx-runtime").JSX.Element;

package/dist/CmrComponents/niivue-viewer/mro-draw-toolkit/MroDrawToolkit.js

@@ -0,0 +1,177 @@
+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";
+/**
+ * MROptimum fork of cloudmr-ux DrawToolkit.
+ * Click-away exits drawing mode when you focus elsewhere (slice controls, histogram, etc.),
+ * but clicks on `#niiCanvas` are ignored so you can keep drawing on the viewer.
+ *
+ * Layout matches {@link NiivueSlicePosition}: outer wrapper → `.title` → `Card` + `CardContent` (no custom fill).
+ */
+import React, { useState } from "react";
+import { Box, Card, CardContent, IconButton, Slider, Stack, Tooltip, Typography, } from "@mui/material";
+import DrawIcon from "@mui/icons-material/Draw";
+import CropSquareOutlinedIcon from "@mui/icons-material/CropSquareOutlined";
+import CircleOutlinedIcon from "@mui/icons-material/CircleOutlined";
+import AutoFixNormalOutlinedIcon from "@mui/icons-material/AutoFixNormalOutlined";
+import ReplyIcon from "@mui/icons-material/Reply";
+import CameraAltIcon from "@mui/icons-material/CameraAlt";
+import SvgIcon from "@mui/material/SvgIcon";
+import FormatColorFillIcon from "@mui/icons-material/FormatColorFill";
+import DeleteIcon from "@mui/icons-material/Delete";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import OpacityIcon from "@mui/icons-material/Opacity";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+import DrawColorPlatte from "./DrawColorPlatte";
+import EraserPlatte from "./EraserPlatte";
+import MaskPlatte from "./MaskPlatte";
+/** True if the event target is the main NiiVue canvas (drawing surface). Clicks there must not exit draw mode. */
+function clickTargetIsNiivueCanvas(target) {
+    if (typeof document === "undefined" || !(target instanceof Element))
+        return false;
+    return !!target.closest("#niiCanvas");
+}
+/** Same icon tone as typical MUI on-paper controls (matches slice panel body). */
+var ICON_COLOR = "#212121";
+function EraserIcon(props) {
+    return (_jsxs(SvgIcon, __assign({}, props, { viewBox: "0 0 25 25", sx: { color: "inherit" } }, { 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" })] })));
+}
+function OpacityPlatte(_a) {
+    var drawingOpacity = _a.drawingOpacity, setDrawingOpacity = _a.setDrawingOpacity, expanded = _a.expanded;
+    return (_jsx(Stack, __assign({ style: {
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            zIndex: 1500,
+            border: "".concat(expanded ? "1px" : 0, " solid #bbb"),
+            maxWidth: expanded ? 300 : 0,
+            overflow: expanded ? "visible" : "hidden",
+            borderRadius: "16px",
+            borderTopLeftRadius: "6pt",
+            borderTopRightRadius: "6pt",
+            background: "#333",
+            width: 150
+        }, direction: "column" }, { children: _jsxs(Stack, __assign({ sx: { mb: 1 }, alignItems: "center" }, { children: [_jsxs(Typography, __assign({ color: "white", noWrap: true, gutterBottom: true, width: "100%", marginLeft: "10pt", fontSize: "11pt", alignItems: "start" }, { children: ["Opacity: ", drawingOpacity] })), _jsx(Slider, { sx: { width: "80%" }, value: drawingOpacity, step: 0.01, min: 0, max: 1, onChange: function (_e, value) { return setDrawingOpacity(value); } })] })) })));
+}
+export function MroDrawToolkit(props) {
+    var _a;
+    var drawShapeTool = props.drawShapeTool, onDrawShapeToolChange = props.onDrawShapeToolChange;
+    var _b = useState("n"), expandedOption = _b[0], setExpandedOption = _b[1];
+    var _c = useState(false), expandOpacityOptions = _c[0], setExpandOpacityOptions = _c[1];
+    var _d = useState(undefined), setMaskColor = _d[1];
+    var filled = props.drawPen > 7;
+    var shapeSelectedSx = function (shape) {
+        return drawShapeTool === shape
+            ? { backgroundColor: "rgba(88, 15, 139, 0.12)", color: "#580f8b" }
+            : {};
+    };
+    function clickPen() {
+        onDrawShapeToolChange === null || onDrawShapeToolChange === void 0 ? void 0 : onDrawShapeToolChange("pen");
+        if (expandedOption === "d") {
+            setExpandedOption("n");
+            props.setDrawingEnabled(false);
+        }
+        else {
+            setExpandedOption("d");
+            setExpandOpacityOptions(false);
+            props.setDrawingEnabled(true);
+        }
+    }
+    function clickRectangle() {
+        onDrawShapeToolChange === null || onDrawShapeToolChange === void 0 ? void 0 : onDrawShapeToolChange("rectangle");
+        if (expandedOption === "r") {
+            setExpandedOption("n");
+            props.setDrawingEnabled(false);
+        }
+        else {
+            setExpandedOption("r");
+            setExpandOpacityOptions(false);
+            props.setDrawingEnabled(true);
+        }
+    }
+    function clickEllipse() {
+        onDrawShapeToolChange === null || onDrawShapeToolChange === void 0 ? void 0 : onDrawShapeToolChange("ellipse");
+        if (expandedOption === "l") {
+            setExpandedOption("n");
+            props.setDrawingEnabled(false);
+        }
+        else {
+            setExpandedOption("l");
+            setExpandOpacityOptions(false);
+            props.setDrawingEnabled(true);
+        }
+    }
+    function clickEraser() {
+        if (expandedOption === "e") {
+            setExpandedOption("n");
+        }
+        else {
+            props.updateDrawPen({ target: { value: 8 } });
+            setExpandedOption("e");
+        }
+        props.setDrawingEnabled(expandedOption !== "e");
+    }
+    function clickMask() {
+        if (expandedOption === "m") {
+            setExpandedOption("n");
+        }
+        else {
+            setExpandedOption("m");
+        }
+        props.setDrawingEnabled(false);
+    }
+    var vol = (_a = props.volumes) === null || _a === void 0 ? void 0 : _a[props.selectedVolume];
+    var toolBtnSx = {
+        color: ICON_COLOR,
+        p: 0.5,
+        "&:hover": { backgroundColor: "rgba(0,0,0,0.04)" },
+        "&.Mui-disabled": { color: "rgba(0,0,0,0.26)" }
+    };
+    return (_jsx(ClickAwayListener, __assign({ onClickAway: function (event) {
+            var _a;
+            if (clickTargetIsNiivueCanvas(event.target))
+                return;
+            setExpandedOption("n");
+            setExpandOpacityOptions(false);
+            props.setDrawingEnabled(false);
+            (_a = props.onExitDrawMode) === null || _a === void 0 ? void 0 : _a.call(props);
+        } }, { children: _jsxs("div", __assign({ style: __assign({ width: "100%", position: "relative", zIndex: 1080 }, props.style) }, { children: [_jsx("div", __assign({ className: "title", style: { width: "100%" } }, { children: "ROI Tools" })), _jsx(Card, __assign({ variant: "outlined", sx: {
+                        mb: 2,
+                        borderTopLeftRadius: 0,
+                        borderTopRightRadius: 0,
+                        overflow: "visible"
+                    } }, { children: _jsx(CardContent, __assign({ sx: {
+                            overflow: "visible",
+                            "&:last-child": { paddingBottom: 2 }
+                        } }, { children: _jsx("div", __assign({ style: { display: "flex", flexDirection: "column", overflow: "visible" } }, { children: _jsxs("div", __assign({ style: {
+                                    display: "flex",
+                                    flexDirection: "row",
+                                    flexWrap: "wrap",
+                                    alignItems: "center",
+                                    gap: 4,
+                                    overflow: "visible"
+                                } }, { children: [_jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "d" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Pen" }, { children: _jsx(IconButton, __assign({ "aria-label": "pen", size: "small", onClick: clickPen, sx: __assign(__assign({}, toolBtnSx), shapeSelectedSx("pen")) }, { children: _jsx(DrawIcon, { sx: { color: "inherit" } }) })) })), _jsx(DrawColorPlatte, { expanded: expandedOption === "d", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled })] })), _jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "r" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Rectangle" }, { children: _jsx(IconButton, __assign({ "aria-label": "rectangle", size: "small", onClick: clickRectangle, sx: __assign(__assign({}, toolBtnSx), shapeSelectedSx("rectangle")) }, { children: _jsx(CropSquareOutlinedIcon, { sx: { color: "inherit" } }) })) })), _jsx(DrawColorPlatte, { expanded: expandedOption === "r", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled })] })), _jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "l" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Ellipse" }, { children: _jsx(IconButton, __assign({ "aria-label": "ellipse", size: "small", onClick: clickEllipse, sx: __assign(__assign({}, toolBtnSx), shapeSelectedSx("ellipse")) }, { children: _jsx(CircleOutlinedIcon, { sx: { color: "inherit" } }) })) })), _jsx(DrawColorPlatte, { expanded: expandedOption === "l", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled })] })), _jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "e" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Eraser" }, { children: _jsx(IconButton, __assign({ "aria-label": "erase", size: "small", onClick: clickEraser, sx: toolBtnSx }, { children: filled || expandedOption !== "e" ? (_jsx(EraserIcon, {})) : (_jsx(AutoFixNormalOutlinedIcon, { sx: { color: ICON_COLOR } })) })) })), _jsx(EraserPlatte, { expandEraseOptions: expandedOption === "e", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled })] })), _jsx(Tooltip, __assign({ title: "Undo" }, { children: _jsx(IconButton, __assign({ "aria-label": "revert", size: "small", onClick: function () { return props.drawUndo(); }, sx: toolBtnSx }, { children: _jsx(ReplyIcon, { sx: { color: ICON_COLOR } }) })) })), _jsx(Tooltip, __assign({ title: "Save screenshot" }, { children: _jsx("span", { children: _jsx(IconButton, __assign({ "aria-label": "capture", size: "small", disabled: !vol, onClick: function () { return vol && props.nv.saveScene("".concat(vol.name, "_drawing.png")); }, sx: toolBtnSx }, { children: _jsx(CameraAltIcon, { sx: { color: ICON_COLOR } }) })) }) })), _jsx(Tooltip, __assign({ title: "Clear drawing" }, { children: _jsx(IconButton, __assign({ "aria-label": "delete", size: "small", onClick: function () {
+                                                props.nv.clearDrawing();
+                                                props.resampleImage();
+                                                props.setDrawingChanged(false);
+                                            }, sx: toolBtnSx }, { children: _jsx(DeleteIcon, { sx: { color: ICON_COLOR } }) })) })), _jsx(Tooltip, __assign({ title: "ROI visibility" }, { children: _jsx(IconButton, __assign({ "aria-label": "visible", size: "small", onClick: function () { return props.toggleROIVisible(); }, sx: toolBtnSx }, { children: props.roiVisible ? (_jsx(VisibilityIcon, { sx: { color: ICON_COLOR } })) : (_jsx(VisibilityOffIcon, { sx: { color: ICON_COLOR, opacity: 0.45 } })) })) })), _jsxs(Box, __assign({ sx: {
+                                            position: "relative",
+                                            zIndex: expandOpacityOptions ? 1600 : "auto",
+                                            display: "inline-flex",
+                                            alignItems: "center",
+                                            color: ICON_COLOR
+                                        } }, { children: [_jsx(Tooltip, __assign({ title: "Drawing opacity" }, { children: _jsx(IconButton, __assign({ "aria-label": "opaque", size: "small", onClick: function () { return setExpandOpacityOptions(!expandOpacityOptions); }, sx: toolBtnSx }, { children: _jsx(OpacityIcon, { sx: { color: ICON_COLOR } }) })) })), _jsx(Typography, __assign({ component: "span", sx: { fontSize: "0.7rem", mr: 0.25, userSelect: "none", color: ICON_COLOR } }, { children: props.drawingOpacity.toFixed(2) })), _jsx(OpacityPlatte, { drawingOpacity: props.drawingOpacity, setDrawingOpacity: props.setDrawingOpacity, expanded: expandOpacityOptions })] })), _jsxs(Box, __assign({ sx: { position: "relative", zIndex: expandedOption === "m" ? 1600 : "auto", display: "inline-flex", alignItems: "center" } }, { children: [_jsx(Tooltip, __assign({ title: "Mask by intensity range" }, { children: _jsx(IconButton, __assign({ "aria-label": "fill", size: "small", onClick: clickMask, sx: toolBtnSx }, { children: _jsx(FormatColorFillIcon, { sx: { color: ICON_COLOR } }) })) })), _jsx(MaskPlatte, { resampleImage: function () {
+                                                    props.resampleImage();
+                                                    props.setDrawingChanged(true);
+                                                }, expanded: expandedOption === "m", nv: props.nv, setMaskColor: setMaskColor, unfocus: function () { return setExpandedOption("n"); } })] }))] })) })) })) }))] })) })));
+}

package/dist/CmrComponents/niivue-viewer/niivuePenType.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Values match @niivue/niivue PEN_TYPE. Import them locally because Vite's
+ * optimizeDeps pre-bundle for @niivue/niivue currently omits the PEN_TYPE export
+ * (see node_modules/.vite/deps/@niivue_niivue.js export list).
+ */
+export declare const NI_PEN_TYPE: {
+    readonly PEN: 0;
+    readonly RECTANGLE: 1;
+    readonly ELLIPSE: 2;
+};

package/dist/CmrComponents/niivue-viewer/niivuePenType.js

@@ -0,0 +1,10 @@
+/**
+ * Values match @niivue/niivue PEN_TYPE. Import them locally because Vite's
+ * optimizeDeps pre-bundle for @niivue/niivue currently omits the PEN_TYPE export
+ * (see node_modules/.vite/deps/@niivue_niivue.js export list).
+ */
+export var NI_PEN_TYPE = {
+    PEN: 0,
+    RECTANGLE: 1,
+    ELLIPSE: 2
+};

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

@@ -0,0 +1,2 @@
+export { Niivue };
+import { Niivue } from "@niivue/niivue";

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,123 @@
+import { make, container } from './kitchen-sink.js';
+var Default = {};
+var themes = {
+    Default: Default,
+    Light: {
+        '--background-color': '#f6f6f6',
+        '--text-color': '#3d3d3d',
+        '--title-background-color': '#efefef',
+        '--title-text-color': '#3d3d3d',
+        '--widget-color': '#eaeaea',
+        '--hover-color': '#f0f0f0',
+        '--focus-color': '#fafafa',
+        '--number-color': '#07aacf',
+        '--string-color': '#8da300'
+    },
+    'Solarized~ Light': {
+        '--background-color': '#fdf6e3',
+        '--text-color': '#657b83',
+        '--title-background-color': '#f5efdc',
+        '--title-text-color': '#657b83',
+        '--widget-color': '#eee8d5',
+        '--hover-color': '#e7e1cf',
+        '--focus-color': '#e6ddc7',
+        '--number-color': '#2aa0f3',
+        '--string-color': '#97ad00'
+    },
+    'Solarized~ Dark': {
+        '--background-color': '#002b36',
+        '--text-color': '#b2c2c2',
+        '--title-background-color': '#001f27',
+        '--title-text-color': '#b2c2c2',
+        '--widget-color': '#094e5f',
+        '--hover-color': '#0a6277',
+        '--focus-color': '#0b6c84',
+        '--number-color': '#2aa0f2',
+        '--string-color': '#97ad00'
+    },
+    'Tennis': {
+        '--background-color': '#32405e',
+        '--text-color': '#ebe193',
+        '--title-background-color': '#713154',
+        '--title-text-color': '#ffffff',
+        '--widget-color': '#057170',
+        '--hover-color': '#057170',
+        '--focus-color': '#b74f88',
+        '--number-color': '#ddfcff',
+        '--string-color': '#ffbf00'
+    }
+};
+var colorGUI = make({ title: 'Customization' }, function (gui) {
+    gui.add({ theme: Default }, 'theme', themes)
+        .name('Themes')
+        .onChange(function (v) {
+        if (v === Default) {
+            colorGUI.reset();
+            allVarGUI.reset();
+        }
+        else {
+            colorGUI.load({ controllers: v });
+        }
+    });
+    return gui.addFolder('Colors');
+});
+var allVarGUI = make({ title: 'All CSS Vars' });
+var customDisplay = document.createElement('pre');
+customDisplay.id = 'custom-css';
+container.appendChild(customDisplay);
+var customStyleTag = document.createElement('style');
+document.head.appendChild(customStyleTag);
+var originalStyles = {};
+var stylesheet = new Proxy({}, {
+    set: function (target, property, value) {
+        if (!(property in target)) {
+            originalStyles[property] = value;
+        }
+        target[property] = value;
+        updateStylesheet();
+        return true;
+    }
+});
+function updateStylesheet() {
+    var style = '';
+    for (var prop in stylesheet) {
+        var value = stylesheet[prop];
+        if (value === originalStyles[prop])
+            continue;
+        style += "\t".concat(prop, ": ").concat(value, ";\n");
+    }
+    if (style) {
+        style = '.lil-gui {\n' + style + '}';
+        customDisplay.innerHTML = style;
+        customStyleTag.innerHTML = style;
+    }
+    else {
+        customDisplay.innerHTML = '';
+        customStyleTag.innerHTML = '';
+    }
+}
+var defaultStyleTag = Array.from(document.querySelectorAll('style'))
+    .find(function (tag) { return tag.innerHTML.includes('lil-gui'); });
+defaultStyleTag.innerHTML.replace(/(--[a-z0-9-]+)\s*:\s*([^;}]*)[;}]/ig, function (_, property, value) {
+    if (property in stylesheet)
+        return;
+    stylesheet[property] = value;
+    if (/color$/.test(property)) {
+        colorGUI.addColor(stylesheet, property);
+    }
+    else if (/^\d+px$/.test(value)) {
+        var obj = {};
+        var initial = parseFloat(value.replace('px', ''));
+        obj[property] = initial;
+        allVarGUI.add(obj, property, 0, undefined, 1).onChange(function (v) { return stylesheet[property] = v + 'px'; });
+    }
+    else if (/%$/.test(value)) {
+        var obj = {};
+        var initial = parseFloat(value.replace('%', ''));
+        obj[property] = initial;
+        allVarGUI.add(obj, property, 0).onChange(function (v) { return stylesheet[property] = v + '%'; });
+    }
+    else {
+        allVarGUI.add(stylesheet, property);
+    }
+});

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

@@ -0,0 +1,10 @@
+declare function handleIntensityChange(data: any): void;
+declare function toggleGroup(id: any): void;
+declare function onButtonClick(event: any): Promise<void>;
+declare const isTouchDevice: boolean;
+declare var isFilled: boolean;
+declare var nv1: any;
+declare var volumeList1: {
+    url: string;
+}[];
+declare var buttons: HTMLCollectionOf<Element>;