@nebularstreams/libmui 2.0.2 → 2.0.3

package/src/widgets/OverflowUtils.js

@@ -0,0 +1,449 @@
+import m from "mithril";
+import defineWidget from "../util/widgets.utils";
+import * as widget from "../util/widgets";
+import {Icon, Notification, ButtonNew} from "./Basic"
+import {OverflowMenu} from "../util/widgets.core";
+import SwitchWidget from "../widgets/SwitchWidget";
+import InputWidget from "../widgets/InputWidget";
+import Notice from "../widgets/NoticeWidget";
+import clone from "../util/util.clone"
+
+function choose(items, config = {
+    icon: "circle", onSelect: () => {
+    }
+}) {
+
+    const
+        {icon, title, field, onSelect, parser = (v) => v} = config,
+        options = items.map((item, index) => ({
+            icon: field && item.icon || icon,
+            // WARNING !!!!!
+            caption: parser(field ? item[field] : item, item),
+            // caption: idField ? item[idField] : item,
+            onClick: (e) => onSelect(item, e, index)
+        }));
+
+    if (Array.isArray(items) && !items.length) {
+        Notification.add("No items available");
+    } else {
+        OverflowMenu(
+            document.body,
+            {title},
+            options
+        )
+            .then(({action}) => action.onClick());
+    }
+}
+
+function promptOptions(items, onchange, options = {}) {
+
+    const
+        {title, field, icon, textNew, textHint, resolve} = options,
+        dialogOptions = Array.isArray(items)
+            ? items.map((item) => ({
+                icon,
+                // WARNING !!!!!
+                caption: field ? item[field] : item,
+                // caption: idField ? item[idField] : item,
+                onClick: (e) => onchange(item, e)
+            }))
+            : Object.keys(items)
+                .map((key) => ({
+                    icon: items[key].icon || icon,
+                    caption: items[key].caption || key,
+                    onClick: (e) => onchange(
+                        resolve && items[key].value !== undefined
+                            ? items[key].value
+                            : items[key],
+                        e)
+                }));
+
+    if (Array.isArray(items) && !items.length) {
+        Notification.add("No items available");
+    } else {
+        OverflowMenu(
+            document.body,
+            {title},
+            [
+                ...textNew && !field
+                    ? [
+                        {
+                            icon: "plus",
+                            caption: textNew,
+                            onClick: () => promptName(
+                                textNew,
+                                "",
+                                textHint,
+                                (value) => {
+                                    if (value) {
+                                        if (value && value.trim()) {
+                                            onchange(value);
+                                            m.redraw();
+                                        }
+                                    }
+                                }
+                            )
+                        }
+                    ]
+                    : [],
+                ...dialogOptions
+            ]
+        )
+            .then(({action}) => action.onClick())
+            .finally(() => {
+            });
+    }
+}
+
+function promptName(title, value, hint, action, state = {}) {
+    setTimeout(() => OverflowMenu(
+        document.body,
+        {title},
+        [
+            {
+                type: "text",
+                hint,
+                value
+            }
+        ]
+    )
+        .then(({value: val}) => {
+            state.refreshKey = String(Date.now());
+            return action(val);
+        }), 100);
+}
+
+const
+    WHAT_DO_UPDATE_LIGHTS = 0,          // 0
+    WHAT_DO_UPDATE_FACE = 1,            // 1
+    WHAT_DO_UPDATE_PARTICLES = 2,       // 4
+    WHAT_DO_UPDATE_SEGMENTATION = 3,
+    WHAT_DO_UPDATE_VAL_VPLANE = 4,
+    WHAT_DO_UPDATE_VAL_PANO = 5,
+    WHAT_DO_UPDATE_VAL_FREE = 6,
+    WHAT_DO_UPDATE_VAL_DRONE = 7,
+    WHAT_DO_UPDATE_VAL_TRANSITION = 8,
+    WHAT_DO_UPDATE_TVFX = 9,
+    WHAT_DO_UPDATE_VAL_FOLLOW = 10,
+
+    PROPERTIES = [
+        ["Lights and Fog", null, ["amblight", "l0", "l1", "l2", "l3", "fog"], WHAT_DO_UPDATE_LIGHTS],
+        ["Face and Accessories", null, ["facekit"], WHAT_DO_UPDATE_FACE],
+        ["Particle settings", null, ["particles"], WHAT_DO_UPDATE_PARTICLES],
+        ["Video Segmentation", "common", ["segcam", "mask", "green"], WHAT_DO_UPDATE_SEGMENTATION, true],
+        ["Video Effects", null, ["fxconfig"], WHAT_DO_UPDATE_TVFX],
+        ["Video Plane", "val", ["xvideo", "yvideo", "zvideo", "rvideo", "svideo", "video"], WHAT_DO_UPDATE_VAL_VPLANE],
+        ["Main Camera", "val", ["ypos", "xpos", "zoom", "yaw", "pitch", "roll", "ai"], WHAT_DO_UPDATE_VAL_PANO],
+        ["Drone Camera", "val", ["free"], WHAT_DO_UPDATE_VAL_FREE],
+        ["Followed Agent", "val", ["track"], WHAT_DO_UPDATE_VAL_FOLLOW],
+        ["Game Camera", "val", ["orbit", "track", "ocam"], WHAT_DO_UPDATE_VAL_DRONE, undefined, true],
+        ["Transition Speed", "val", ["spd"], WHAT_DO_UPDATE_VAL_TRANSITION]
+    ],
+
+    TitleBarWidget = defineWidget(
+        ({attrs}) => m("h2.marg-2.no-marg-bottom", attrs.title)
+    ),
+    EntityTemplates = defineWidget(
+        ({attrs}) => {
+
+            const
+                {type = "changes", meta, onInput, title, options} = attrs,
+                valid = meta.title?.trim().length && meta.description?.trim().length,
+                embedded = options && options.embedded;
+
+            return m(".flexcol.grows.ohidden.fadein", [
+                ...attrs.title ? [
+                    m(TitleBarWidget, {
+                        title
+                    })] : [],
+                m(".flexrow.wrap.grows.pad-3.propsgroup.scrolly", [
+                    ...attrs.notice ? [
+                        m(Notice, {
+                            class: "marg-1 marg-v withbottommargin font-75 col-12",
+                            size: 1,
+                            icon: "info-circle",
+                            text: attrs.notice
+                        })
+                    ] : [],
+                    m(
+                        ".witharia.col-12.pad-1.pad-v",
+                        {"aria-label": type + " name"},
+                        m(InputWidget, {
+                            class: "pad-2 pad-xh " + (valid ? "valid" : "invalid"),
+                            value: meta.title,
+                            maxlength: 64,
+                            onchange: (newvalue) => {
+                                meta.title = newvalue;
+                                m.redraw();
+                            }
+                        })
+                    ),
+                    ...embedded ? []
+                        : [
+                            m(
+                                ".col-12.witharia.pad-1.pad-v",
+                                {"aria-label": "description"},
+                                m(InputWidget, {
+                                    class: "pad-2 pad-xh " + (meta.description ? "valid" : "invalid"),
+                                    value: meta.description,
+                                    maxlength: 240,
+                                    multi: true,
+                                    alwaysmulti: true,
+                                    onchange: (newvalue) => {
+                                        meta.description = newvalue;
+                                        m.redraw();
+                                    }
+                                })
+                            ),
+                            m(
+                                ".col-8.witharia.pad-1.pad-v",
+                                {"aria-label": "tags"},
+                                m(InputWidget, {
+                                    class: "pad-2 pad-xh",
+                                    value: meta.tags,
+                                    maxlength: 128,
+                                    onchange: (newvalue) => {
+                                        meta.tags = newvalue.toLowerCase()
+                                            .split(" ")
+                                            .join(",")
+                                            .split(",")
+                                            .filter((tag) => tag.length)
+                                            .join(",");
+                                    }
+                                })
+                            ),
+                            m(
+                                ".col-4.witharia.pad-1.pad-v",
+                                {"aria-label": "youtube video"},
+                                m(InputWidget, {
+                                    class: "pad-2 pad-xh",
+                                    value: meta.ytref || "",
+                                    hint: "YouTube ID",
+                                    maxlength: 16,
+                                    onchange: (newvalue) => {
+                                        newvalue = newvalue.trim();
+                                        if (newvalue) {
+                                            if (newvalue.indexOf(" ") === -1) {
+                                                meta.ytref = newvalue.trim();
+                                            }
+                                        } else {
+                                            delete meta.ytref;
+                                        }
+                                    }
+                                })
+                            )
+                        ],
+                    m(
+                        ".col-4.witharia.pad-1.pad-v",
+                        {"aria-label": "content attribution"},
+                        m(InputWidget, {
+                            class: "pad-2 pad-xh",
+                            value: meta.author,
+                            hint: "author name",
+                            maxlength: 128,
+                            onchange: (newvalue) => {
+                                meta.author = newvalue;
+                            }
+                        })
+                    ),
+
+                    m(
+                        ".col-4.witharia.pad-1.pad-v",
+                        {"aria-label": "license or author link"},
+                        m(InputWidget, {
+                            class: "pad-2 pad-xh",
+                            hint: "https://...",
+                            value: meta.link,
+                            maxlength: 128,
+                            onchange: (newvalue) => {
+                                meta.link = newvalue;
+                            }
+                        })
+                    ),
+                    m(
+                        ".col-4.witharia.pad-1.pad-v",
+                        {"aria-label": "source domain"},
+                        m(InputWidget, {
+                            class: "pad-2 pad-xh",
+                            value: meta.source,
+                            hint: "example.com",
+                            maxlength: 128,
+                            onchange: (newvalue) => {
+                                meta.source = newvalue;
+                            }
+                        })
+                    ),
+
+                    m(
+                        ".col-12.al-right.marg-2.marg-v",
+                        m(ButtonNew, {
+                            class: "noshrink accentbutton unitheightsmall col-4",
+                            text: "save " + type,
+                            onClick: () => {
+
+                                const isValid = meta.title?.trim().length && (embedded || meta.description?.trim().length);
+
+                                if (isValid) {
+                                    widget.popupMessage(null);
+                                    onInput(meta);
+                                } else {
+                                    Notification.add("Information is incomplete or invalid");
+                                }
+                            }
+                        })
+                    )
+                ])
+            ]);
+        }
+    ),
+    promptEntity = (meta, title, type, options = {}) => new Promise((resolve, reject) => {
+        widget.popupMessage(
+            m(EntityTemplates, {
+                meta,
+                type,
+                title,
+                options,
+                onInput: (newMeta) => resolve(newMeta)
+            }),
+            () => {
+                reject(new Error("cancelled"));
+            }
+        );
+    }),
+    PresetTemplate = defineWidget(
+        ({attrs}) => {
+
+            const
+
+                {parameters, preset, presetComponents, types, globalData, fetcher} = attrs,
+                available = [],
+                sourceAvailable = [],
+                items = types
+                    ? PROPERTIES
+                    : PROPERTIES.filter((cosa) => {
+
+                        const
+                            [, primaryTarget, elements, index, globalSource] = cosa,
+                            target = primaryTarget ? preset[primaryTarget] : preset,
+                            rootSource = globalSource ? globalData : parameters,
+                            source = primaryTarget ? rootSource[primaryTarget] : rootSource;
+
+                        let found = false;
+
+                        if (elements.length) {
+
+                            for (const element of elements) {
+                                if (target && target[element] !== undefined) {
+                                    found = available[index] = true;
+                                }
+                                if (source[element] !== undefined) {
+                                    found = sourceAvailable[index] = true;
+                                }
+                            }
+                            return found;
+                        } else {
+                            found = true;
+                            sourceAvailable[index] = !!source;
+                            available[index] = !!target;
+                        }
+                        return found;
+
+                    });
+
+            return m(
+                "ul.flexrow.wrap.userdialog",
+                items.length
+                    ? items.map((cosa) => {
+
+                        const
+                            [title, primaryTarget, elements, cosaIndex, globalSource, fetchLive] = cosa,
+                            target = types ? undefined : primaryTarget ? preset[primaryTarget] : preset,
+                            rootSource = globalSource ? globalData : parameters,
+                            source = types ? undefined : primaryTarget ? rootSource[primaryTarget] : rootSource,
+                            deleteCurrent = () => {
+                                if (elements.length) {
+                                    for (const field of elements) {
+                                        delete target[field];
+                                    }
+                                } else if (elements.length === 0 && primaryTarget) {
+                                    delete preset[primaryTarget];
+                                }
+                                attrs.redraw && attrs.redraw();
+                            },
+                            updateCurrent = () => {
+                                if (elements.length) {
+                                    if (primaryTarget && !preset[primaryTarget]) preset[primaryTarget] = {};
+                                    const updatedTarget = primaryTarget ? preset[primaryTarget] : preset;
+                                    for (const field of elements) {
+                                        if (source[field] !== undefined) {
+                                            const finalSource = fetchLive && fetcher ? fetcher(updatedTarget[field], cosaIndex) : source[field];
+                                            updatedTarget[field] = clone(finalSource);
+                                        }
+                                    }
+                                } else if (elements.length === 0 && primaryTarget) {
+                                    if (source !== undefined) {
+                                        const finalSource = fetchLive && fetcher ? fetcher(source, cosaIndex) : source;
+                                        preset[primaryTarget] = clone(finalSource);
+                                    }
+                                }
+                                attrs.redraw && attrs.redraw();
+                                Notification.add(`updated ${title} from current scene`);
+                            },
+                            isAvailable = types || available[cosaIndex],
+                            isSourceAvailable = sourceAvailable[cosaIndex];
+
+                        return [
+                            ...presetComponents ? [
+                                m(SwitchWidget, {
+                                    title: `Include ${cosa[0]} in snapshots`,
+                                    class: "grows unitheightsmall" + (presetComponents[cosaIndex] ? " accent" : ""),
+                                    checked: !!presetComponents[cosaIndex],
+                                    onchange: (status) => {
+                                        presetComponents[cosaIndex] = !presetComponents[cosaIndex];
+                                        m.redraw();
+                                        attrs.redraw && attrs.redraw();
+                                    }
+                                }),
+                                m(".grows", {class: isAvailable ? "avail" : "unavail"}, title)
+                            ] : [],
+                            ...!attrs.types ? [
+                                m(ButtonNew, {
+                                    class: "col-3" + (isSourceAvailable ? "avail" : "unavail"),
+                                    icon: "sync", title: `Copy ${title} from current state`,
+                                    onClick: updateCurrent
+                                }),
+                                m(ButtonNew, {
+                                    class: "col-3 " + (isAvailable ? "" : "disabled text-lo"),
+                                    icon: "trash", title: `Delete ${title} in preset`,
+                                    onClick: () => isAvailable && deleteCurrent()
+                                })
+                            ] : [],
+                            m(".flexbreak")
+                        ];
+
+                    })
+                    : m("h3", "Preset is Empty")
+            );
+        }
+    ),
+    promptPreset = (preset, parameters, options = {}) => new Promise((resolve, reject) => {
+        widget.popupMessage(
+            () => m(PresetTemplate, {
+                ...options,
+                preset,
+                parameters,
+                redraw: () => widget.popupMessage.redraw()
+            }),
+            () => {
+                reject(new Error("cancelled"));
+            }
+        );
+    });
+
+export {
+    promptName,
+    promptEntity,
+    promptPreset,
+    promptOptions,
+    choose
+};

package/src/widgets/RangeWidget.js

@@ -0,0 +1,200 @@
+import m from "mithril";
+import MithrilRange from "../util/mithril-range";
+
+let
+    __timer;
+
+const
+    resetMultiplier = (state) => {
+        /*
+        if (state.curMultiplier > 1 && state.value < state.curMax * (state.curMultiplier - 1)) {
+            state.curMultiplier = Math.ceil(state.value / state.curMax);
+            m.redraw();
+        }
+        */
+
+        const
+            // req multiplier to show value within negative bounds
+            maxMultiplier = state.value > state.curMax ? Math.ceil(state.value / state.curMax) : 1,
+            // req multiplier to show value within positive bounds
+            minMultiplier = (state.curMin < 0 && state.value < state.curMin) ? Math.abs(Math.ceil(state.value / state.curMin)) : 1,
+            // chosen
+            multiplier = Math.min(Math.max(minMultiplier, maxMultiplier), state.maxMultiplier);
+
+        if (state.curMultiplier !== multiplier) {
+            state.curMultiplier = multiplier;
+            m.redraw();
+        }
+    },
+    increaseMultiplier = (state) => {
+        if (
+            state.value >= (state.curMax * state.curMultiplier) * 0.9
+            && state.maxMultiplier > 1
+            && state.curMultiplier <= state.maxMultiplier - 1
+        ) {
+            state.curMultiplier++;
+            return true;
+        }
+        if (state.curMin < 0) return increaseMinMultiplier(state);
+    },
+    increaseMinMultiplier = (state) => {
+        if (state.value <= (state.curMin * state.curMultiplier) * 0.9
+            && state.maxMultiplier > 1
+            && state.curMultiplier <= state.maxMultiplier - 1
+        ) {
+            state.curMultiplier++;
+            return true;
+        }
+    },
+    RangeSlider = {
+
+        oninit: ({attrs, state}) => {
+            Object.assign(state, {
+                value: attrs.value || 0,
+                initial: attrs.value || 0,
+                curMax: attrs.max,
+                curMin: attrs.min,
+                curMultiplier: 1,
+                maxMultiplier: attrs.multiplier || 1,
+                id: "I" + Date.now()
+            });
+            // adjust initial multiplier
+            if (state.maxMultiplier > 1) {
+                if (state.value > attrs.max) {
+                    state.curMultiplier = Math.ceil(state.value / attrs.max);
+                } else if (attrs.min < 0 && state.value < attrs.min) {
+                    state.curMultiplier = Math.abs(Math.ceil(state.value / attrs.min));
+                }
+            }
+        },
+        onupdate: ({attrs, state}) => {
+            const
+                attrsMultiplier = attrs.multiplier || 1,
+                attrsValue = attrs.value || 0;
+
+            if (state.curMax !== attrs.max || state.maxMultiplier !== attrsMultiplier) {
+
+                Object.assign(state, {
+                    curMax: attrs.max,
+                    curMin: attrs.min,
+                    maxMultiplier: attrsMultiplier,
+                    value: attrs.value,
+                    initial: attrsValue
+                });
+                if (!increaseMultiplier(state)) {
+                    clearTimeout(state.timer);
+                    state.timer = setTimeout(resetMultiplier, 1000, state);
+                }
+
+                m.redraw();
+
+            } else if (state.initial !== attrsValue) {
+
+                Object.assign(state, {
+                    value: attrsValue,
+                    initial: attrsValue
+                });
+
+                clearTimeout(__timer);
+                __timer = setTimeout(() => m.redraw(), 50);
+
+                /*
+                                if (!increaseMultiplier(state)) {
+                                    state.timer = setTimeout(resetMultiplier, 1000, state);
+                                    clearTimeout(state.timer);
+                                }
+                 */
+            }
+        },
+        view: ({attrs, state}) => m(
+            ".range.flexcol.control.relative" + (attrs.multiplier > 1 ? ".withmultiplier" : ""),
+            {
+                ...attrs.class && {class: attrs.class},
+                title: attrs.hint || "Click, then use arrows to finetune value if needed"
+            },
+            [
+                ...attrs.title ? [m("label", {class: "rangelabel", htmlFor: state.id}, attrs.title)] : [],
+                m(MithrilRange, {
+                    onchange: (value) => {
+
+                        state.value = value;
+
+                        const increased = increaseMultiplier(state);
+
+                        if (!increased && state.curMultiplier > 1) {
+                            clearTimeout(state.timer);
+                            state.timer = setTimeout(resetMultiplier, 1000, state);
+                        }
+
+                        if (attrs.onchange) {
+                            attrs.onchange(value);
+                        } else {
+                            m.redraw();
+                        }
+                    },
+                    ondrag: (value) => {
+                        if (value !== state.value) {
+                            state.value = value;
+                            if (attrs.ondrag) attrs.ondrag(value);
+                            return true;
+                        }
+                        return false;
+                    },
+                    value: state.value || 0,
+                    min: (attrs.min || 0) * state.curMultiplier,
+                    max: (state.curMax * state.curMultiplier) || 100,
+                    step: attrs.step || 1,
+                    relative: attrs.relative,
+                    factor: attrs.factor
+                }, [
+                    m(".currentval", attrs.parser
+                        ? attrs.parser(state.value, attrs.step < 1)
+                        : state.value
+                            ? attrs.step < 1
+                                ? state.value.toFixed(2)
+                                : ("" + Math.floor(state.value)) : "")
+                ])
+                /*
+                m(".datalist.flexrow", [
+                    m("div", attrs.getLabel(0)),
+                    m(".ismax", attrs.getLabel(attrs.max || 100))
+                ])
+                 */
+            ]
+        )
+    },
+    RangeWidget = {
+        view: ({attrs, state}) => m(RangeSlider, {
+            value: attrs.value || 0,
+            min: attrs.min || 0,
+            max: attrs.max || 100,
+            step: attrs.step || 0.1,
+            class: (attrs.disabled ? "disabled " : "") + (attrs.class || ""),
+            title: attrs.title,
+            multiplier: attrs.multiplier,
+            hint: attrs.hint,
+            parser: attrs.parser,
+            relative: attrs.relative,
+            factor: attrs.factor,
+
+            // values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+            getLabel: (value) => (value ? "" + value : "default"),
+            ondrag: (value) => {
+                state.changed = true;
+                state.value = value;
+                if (attrs.onchange) attrs.onchange(value, true);
+                return true;
+            },
+            onchange: (value) => {
+                if (attrs.auto0) {
+                    value = 0;
+                } else if (attrs.autoValue) value = attrs.autoValue;
+                state.changed = true;
+                state.value = value;
+                if (attrs.onchange) attrs.onchange(value, false);
+                return true;
+            }
+        })
+    };
+
+export default RangeWidget;

package/src/widgets/Separator.js

@@ -0,0 +1,21 @@
+import m from "mithril";
+import defineWidget from "../util/widgets.utils";
+
+
+const
+
+	Separator = defineWidget(
+		({ attrs, children }) => m(
+			".separator",
+			{
+				class: attrs.class || "mini",
+				...attrs.onClick && { onclick: attrs.onClick }
+			},
+			[
+				m("span.grows", attrs.text),
+				...(children || [])
+			]
+		)
+	);
+
+export default Separator;