@stanko/ctrls 0.1.0

package/dist/ctrls/ctrl-easing.js

@@ -0,0 +1,288 @@
+import random from "../utils/random";
+import BezierEasing from "bezier-easing";
+const easings = {
+    EASE: [0.25, 0.1, 0.25, 1],
+    LINEAR: [0, 0, 1, 1],
+    EASE_IN: [0.42, 0, 1, 1],
+    EASE_OUT: [0, 0, 0.58, 1],
+    EASE_IN_OUT: [0.42, 0, 0.58, 1],
+};
+const w = 100;
+const h = 40;
+const getPath = (x1, y1, x2, y2) => {
+    return `M 0 ${h} C ${x1} ${y1} ${x2} ${y2} ${w} 0`;
+};
+export class EasingCtrl {
+    constructor(config, onChange, onInput) {
+        this.type = "easing";
+        this.parse = (string) => {
+            return string.split(",").map(Number);
+        };
+        this.getRandomValue = () => {
+            const min = 0;
+            const max = 1;
+            const value = [
+                random(min, max, null, 2),
+                random(min, max, null, 2),
+                random(min, max, null, 2),
+                random(min, max, null, 2),
+            ];
+            return value;
+        };
+        this.getDefaultValue = () => {
+            return easings.LINEAR;
+        };
+        this.valueToString = (value = this.value) => {
+            return value.join(",");
+        };
+        this.getRelativeValues = (value = this.value) => {
+            let [x1, y1, x2, y2] = value;
+            // Cap x values
+            x1 = Math.max(Math.min(x1, 1), 0);
+            x2 = Math.max(Math.min(x2, 1), 0);
+            const px = [x1 * w, h - y1 * h, x2 * w, h - y2 * h];
+            const percentage = [
+                x1 * 100,
+                100 - y1 * 100,
+                x2 * 100,
+                100 - y2 * 100,
+            ];
+            return { px, percentage };
+        };
+        this.buildUI = () => {
+            const { value } = this;
+            const line1 = document.createElementNS("http://www.w3.org/2000/svg", "line");
+            line1.setAttribute("class", "ctrls__easing-line ctrls__easing-line--1");
+            line1.setAttribute("x1", "0");
+            line1.setAttribute("y1", `${h}`);
+            const line2 = document.createElementNS("http://www.w3.org/2000/svg", "line");
+            line2.setAttribute("class", "ctrls__easing-line ctrls__easing-line--2");
+            line2.setAttribute("x1", `${w}`);
+            line2.setAttribute("y1", "0");
+            const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            path.setAttribute("class", "ctrls__easing-path");
+            const borders = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            borders.classList.add("easing-borders");
+            borders.setAttribute("d", `M 0 0 h ${w} M 0 ${h} h ${w}`);
+            const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
+            svg.appendChild(borders);
+            svg.appendChild(path);
+            svg.appendChild(line1);
+            svg.appendChild(line2);
+            const handle1 = document.createElement("button");
+            handle1.className = "ctrls__easing-handle ctrls__easing-handle--1";
+            handle1.innerHTML = "";
+            const handle2 = document.createElement("button");
+            handle2.className = "ctrls__easing-handle ctrls__easing-handle--2";
+            handle2.innerHTML = "";
+            const control = document.createElement("div");
+            control.className = "ctrls__easing";
+            control.appendChild(svg);
+            control.appendChild(handle1);
+            control.appendChild(handle2);
+            const addListeners = (handle, index) => {
+                let dragging = false;
+                let dragStart = { x: 0, y: 0 };
+                let positionStart = { x: 0, y: 0 };
+                const getNewValue = (clientX, clientY) => {
+                    const ratio = w / this.control.clientWidth;
+                    const leftOffset = clientX - dragStart.x;
+                    const topOffset = clientY - dragStart.y;
+                    const x = positionStart.x + leftOffset * ratio;
+                    const y = positionStart.y + topOffset * ratio;
+                    const attr = element.getAttribute("data-value").split(",");
+                    const newValue = attr.map(Number);
+                    newValue[index] = parseFloat((x / w).toFixed(2));
+                    newValue[index + 1] = parseFloat((1 - y / h).toFixed(2));
+                    // Cap x values
+                    newValue[index] = Math.max(Math.min(newValue[index], 1), 0);
+                    return newValue;
+                };
+                // Mouse dragging
+                handle.addEventListener("mousedown", (e) => {
+                    dragStart = { x: e.clientX, y: e.clientY };
+                    positionStart = {
+                        x: (parseFloat(handle.style.left) * w) / 100,
+                        y: (parseFloat(handle.style.top) * h) / 100,
+                    };
+                    dragging = true;
+                    document.body.style.userSelect = "none";
+                });
+                document.addEventListener("mouseup", (e) => {
+                    if (dragging) {
+                        document.body.style.userSelect = "";
+                        dragging = false;
+                        const newValue = getNewValue(e.clientX, e.clientY);
+                        this.value = newValue;
+                        this.onChange(this.name, this.value);
+                        this.update();
+                    }
+                });
+                document.addEventListener("mousemove", (e) => {
+                    if (dragging) {
+                        const newValue = getNewValue(e.clientX, e.clientY);
+                        this.onInput(this.name, this.value);
+                        this.updateUI(newValue);
+                    }
+                });
+                // Touch dragging
+                handle.addEventListener("touchstart", (e) => {
+                    if (e.touches.length > 1) {
+                        return;
+                    }
+                    dragStart = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+                    positionStart = {
+                        x: (parseFloat(handle.style.left) * w) / 100,
+                        y: (parseFloat(handle.style.top) * h) / 100,
+                    };
+                    dragging = true;
+                    document.body.style.userSelect = "none";
+                });
+                document.addEventListener("touchmove", (e) => {
+                    if (dragging) {
+                        e.preventDefault();
+                        const newValue = getNewValue(e.touches[0].clientX, e.touches[0].clientY);
+                        this.onInput(this.name, this.value);
+                        this.updateUI(newValue);
+                    }
+                });
+                document.addEventListener("touchend", (e) => {
+                    if (dragging) {
+                        document.body.style.userSelect = "";
+                        dragging = false;
+                        const newValue = getNewValue(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
+                        this.value = newValue;
+                        this.onChange(this.name, this.value);
+                        this.update();
+                    }
+                });
+                // Arrow keys
+                handle.addEventListener("keydown", (e) => {
+                    const offsets = {
+                        ArrowLeft: [-0.03, 0],
+                        ArrowRight: [0.03, 0],
+                        ArrowUp: [0, 0.03],
+                        ArrowDown: [0, -0.03],
+                    };
+                    if (offsets[e.key]) {
+                        e.preventDefault();
+                        const newValue = [...this.value];
+                        newValue[index] = parseFloat((newValue[index] + offsets[e.key][0]).toFixed(2));
+                        newValue[index + 1] = parseFloat((newValue[index + 1] + offsets[e.key][1]).toFixed(2));
+                        // Cap x values
+                        newValue[index] = Math.max(Math.min(newValue[index], 1), 0);
+                        this.value = newValue;
+                        this.onChange(this.name, this.value);
+                        this.update();
+                    }
+                });
+            };
+            addListeners(handle1, 0);
+            addListeners(handle2, 2);
+            // Presets
+            let presetButtons = null;
+            if (Object.keys(this.presets).length > 0) {
+                presetButtons = document.createElement("div");
+                presetButtons.classList.add("ctrls__easing-buttons");
+                for (const key of Object.keys(this.presets)) {
+                    const button = document.createElement("button");
+                    button.textContent = key.toLowerCase().replace("ease_", "");
+                    button.addEventListener("click", () => {
+                        this.value = this.presets[key];
+                        this.onChange(this.name, this.value);
+                        this.update();
+                    });
+                    presetButtons.appendChild(button);
+                }
+            }
+            const ticks = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            ticks.classList.add("ctrls__easing-ticks");
+            ticks.setAttribute("viewBox", `0 0 ${w} 5`);
+            ticks.setAttribute("preserveAspectRatio", "none");
+            const tickCount = 30;
+            const ticksElements = [];
+            for (let i = 0; i < tickCount; i++) {
+                const tick = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                tick.setAttribute("y1", "0");
+                tick.setAttribute("y2", "5");
+                ticksElements.push(tick);
+                ticks.appendChild(tick);
+            }
+            const controlWrapper = document.createElement("div");
+            controlWrapper.classList.add("ctrls__easing-wrapper");
+            controlWrapper.appendChild(ticks);
+            controlWrapper.appendChild(control);
+            const right = document.createElement("div");
+            right.classList.add("ctrls__control-right");
+            right.appendChild(controlWrapper);
+            if (presetButtons) {
+                right.appendChild(presetButtons);
+            }
+            const label = document.createElement("span");
+            label.textContent = this.label;
+            label.classList.add("ctrls__control-label");
+            const element = document.createElement("div");
+            element.classList.add("ctrls__control", "ctrls__control--easing");
+            element.setAttribute("data-value", value.join(","));
+            element.appendChild(label);
+            element.appendChild(right);
+            return {
+                element,
+                ticks: ticksElements,
+                control,
+                handles: [handle1, handle2],
+                lines: [line1, line2],
+                path,
+            };
+        };
+        this.updateUI = (value = this.value) => {
+            const { handles, lines, path, ticks } = this;
+            const { px, percentage } = this.getRelativeValues(value);
+            // Helper lines
+            lines[0].setAttribute("x2", px[0].toString());
+            lines[0].setAttribute("y2", px[1].toString());
+            lines[1].setAttribute("x2", px[2].toString());
+            lines[1].setAttribute("y2", px[3].toString());
+            // Handles
+            handles[0].style.left = `${percentage[0]}%`;
+            handles[0].style.top = `${percentage[1]}%`;
+            handles[1].style.left = `${percentage[2]}%`;
+            handles[1].style.top = `${percentage[3]}%`;
+            // Path
+            path.setAttribute("d", getPath(...px));
+            // Ticks
+            const e = BezierEasing(...value);
+            ticks.forEach((tick, i) => {
+                // Subtracting 1 to get 0-1 range (including 1)
+                const x = i / (ticks.length - 1);
+                const t = (e(x) * w).toString();
+                tick.setAttribute("x1", t);
+                tick.setAttribute("x2", t);
+            });
+        };
+        this.update = (value = this.value) => {
+            this.value = value;
+            this.updateUI();
+            this.element.setAttribute("data-value", value.join(","));
+        };
+        this.name = config.name;
+        this.label = config.label || config.name;
+        this.value =
+            config.defaultValue === undefined
+                ? this.getDefaultValue()
+                : config.defaultValue;
+        this.isRandomizationDisabled = config.isRandomizationDisabled || false;
+        this.onChange = onChange;
+        this.onInput = onInput;
+        this.presets = config.presets || easings;
+        const { element, ticks, control, handles, lines, path } = this.buildUI();
+        this.element = element;
+        this.ticks = ticks;
+        this.control = control;
+        this.handles = handles;
+        this.lines = lines;
+        this.path = path;
+        this.updateUI();
+    }
+}

package/dist/ctrls/ctrl-radio.d.ts

@@ -0,0 +1,28 @@
+import type { Ctrl, CtrlChangeHandler, CtrlType, CtrlTypeRegistry } from ".";
+type Option = {
+    label: string;
+    value: string;
+};
+export type RadioControlOptions = {
+    items: Option[];
+};
+export declare class RadioCtrl implements Ctrl<string> {
+    type: CtrlType;
+    name: string;
+    label: string;
+    value: string;
+    isRandomizationDisabled: boolean;
+    onChange: CtrlChangeHandler<string>;
+    onInput: CtrlChangeHandler<string>;
+    items: Option[];
+    element: HTMLElement;
+    columns: 1 | 2 | 3 | 4 | 5;
+    constructor(config: CtrlTypeRegistry["radio"]["config"], onChange: CtrlChangeHandler<string>, onInput: CtrlChangeHandler<string>);
+    parse: (string: string) => string;
+    getRandomValue: () => string;
+    getDefaultValue: () => string;
+    valueToString: (value?: string) => string;
+    buildUI: () => HTMLDivElement;
+    update: (value: string) => void;
+}
+export {};

package/dist/ctrls/ctrl-radio.js

@@ -0,0 +1,83 @@
+import random from "../utils/random";
+export class RadioCtrl {
+    constructor(config, onChange, onInput) {
+        this.type = "radio";
+        this.parse = (string) => {
+            const item = this.items.find((item) => item.value === string);
+            return item?.value || this.getDefaultValue();
+        };
+        this.getRandomValue = () => {
+            const index = random(0, this.items.length - 1, null, 0);
+            return this.items[index].value;
+        };
+        this.getDefaultValue = () => {
+            return this.items[0].value;
+        };
+        this.valueToString = (value = this.value) => {
+            return value;
+        };
+        this.buildUI = () => {
+            const { items, value } = this;
+            const inputs = items.map((item) => {
+                const input = document.createElement("input");
+                input.setAttribute("type", "radio");
+                input.setAttribute("name", this.name);
+                input.setAttribute("value", item.value);
+                input.checked = item.value === value;
+                input.addEventListener("change", () => {
+                    this.value = this.parse(input.value);
+                    this.onChange(this.name, this.value);
+                });
+                input.addEventListener("input", () => {
+                    this.value = this.parse(input.value);
+                    this.onInput(this.name, this.value);
+                });
+                const label = document.createElement("span");
+                label.textContent = item.label;
+                const option = document.createElement("label");
+                option.classList.add("ctrls__radio-label");
+                option.appendChild(input);
+                option.appendChild(label);
+                return option;
+            });
+            const right = document.createElement("div");
+            right.classList.add("ctrls__control-right");
+            right.style.gridTemplateColumns = `repeat(${this.columns}, 1fr)`;
+            right.append(...inputs);
+            const label = document.createElement("span");
+            label.textContent = this.label;
+            label.classList.add("ctrls__control-label");
+            const element = document.createElement("div");
+            element.classList.add("ctrls__control", "ctrls__control--radio");
+            element.appendChild(label);
+            element.appendChild(right);
+            return element;
+        };
+        this.update = (value) => {
+            const item = this.items.find((item) => item.value === value);
+            this.value = item?.value || this.getDefaultValue();
+            // Unselect previous option
+            const prev = this.element.querySelector(`input:checked`);
+            prev.checked = false;
+            // Select new option
+            const next = this.element.querySelector(`[value="${this.value}"]`);
+            next.checked = true;
+        };
+        this.items = [];
+        Object.keys(config.items).forEach((key) => {
+            this.items.push({
+                label: key,
+                value: config.items[key],
+            });
+        });
+        this.columns = config.columns || 3;
+        this.name = config.name;
+        this.label = config.label || config.name;
+        const defaultValue = this.items.find((item) => item.value === config.defaultValue);
+        this.value = defaultValue?.value || this.getDefaultValue();
+        this.isRandomizationDisabled = config.isRandomizationDisabled || false;
+        this.onChange = onChange;
+        this.onInput = onInput;
+        this.element = this.buildUI();
+    }
+}

package/dist/ctrls/ctrl-range.d.ts

@@ -0,0 +1,25 @@
+import type { Ctrl, CtrlChangeHandler, CtrlType, CtrlTypeRegistry } from ".";
+export declare class RangeCtrl implements Ctrl<number> {
+    type: CtrlType;
+    name: string;
+    label: string;
+    value: number;
+    isRandomizationDisabled: boolean;
+    onChange: CtrlChangeHandler<number>;
+    onInput: CtrlChangeHandler<number>;
+    min: number;
+    max: number;
+    step: number;
+    element: HTMLElement;
+    input: HTMLInputElement;
+    constructor(config: CtrlTypeRegistry["range"]["config"], onChange: CtrlChangeHandler<number>, onInput: CtrlChangeHandler<number>);
+    parse: (string: string) => number;
+    getRandomValue: () => number;
+    getDefaultValue: () => number;
+    valueToString: (value?: number) => string;
+    buildUI: () => {
+        element: HTMLLabelElement;
+        input: HTMLInputElement;
+    };
+    update: (value: number) => void;
+}

package/dist/ctrls/ctrl-range.js

@@ -0,0 +1,83 @@
+import random from "../utils/random";
+import { roundToStep } from "../utils/round-to-step";
+// TODO
+// Add a span with the current value
+export class RangeCtrl {
+    constructor(config, onChange, onInput) {
+        this.type = "range";
+        this.parse = (string) => {
+            return parseFloat(string);
+        };
+        this.getRandomValue = () => {
+            const { min, max, step } = this;
+            const value = random(min, max);
+            return roundToStep(value, step);
+        };
+        this.getDefaultValue = () => {
+            return this.min;
+        };
+        this.valueToString = (value = this.value) => {
+            return value.toString();
+        };
+        this.buildUI = () => {
+            const { min, max, step, value } = this;
+            const input = document.createElement("input");
+            input.classList.add("ctrls__range-input");
+            input.setAttribute("type", "range");
+            input.setAttribute("min", min.toString());
+            input.setAttribute("max", max.toString());
+            input.setAttribute("step", step.toString());
+            input.setAttribute("value", value.toString());
+            input.addEventListener("input", () => {
+                this.value = this.parse(input.value);
+                this.onInput(this.name, this.value);
+            });
+            input.addEventListener("change", () => {
+                this.value = this.parse(input.value);
+                this.onChange(this.name, this.value);
+            });
+            input.addEventListener("input", () => {
+                const value = this.parse(input.value);
+                const percentage = ((value - min) / (max - min)) * 100;
+                this.element.style.setProperty("--gradient-position", `${percentage.toFixed(2)}%`);
+            });
+            const right = document.createElement("div");
+            right.classList.add("ctrls__control-right");
+            right.append(input);
+            const label = document.createElement("span");
+            label.textContent = this.label;
+            label.classList.add("ctrls__control-label");
+            const element = document.createElement("label");
+            element.classList.add("ctrls__control", "ctrls__control--range");
+            element.appendChild(label);
+            element.appendChild(right);
+            return {
+                element,
+                input,
+            };
+        };
+        this.update = (value) => {
+            const { min, max } = this;
+            this.value = value;
+            this.input.value = value.toString();
+            const percentage = ((this.value - min) / (max - min)) * 100;
+            this.element.style.setProperty("--gradient-position", `${percentage.toFixed(2)}%`);
+        };
+        this.name = config.name;
+        this.label = config.label || config.name;
+        this.isRandomizationDisabled = config.isRandomizationDisabled || false;
+        this.onChange = onChange;
+        this.onInput = onInput;
+        this.min = config.min;
+        this.max = config.max;
+        this.step = config.step || 1;
+        this.value =
+            config.defaultValue === undefined
+                ? this.getDefaultValue()
+                : config.defaultValue;
+        const { input, element } = this.buildUI();
+        this.input = input;
+        this.element = element;
+        this.update(this.value);
+    }
+}

package/dist/ctrls/ctrl-seed.d.ts

@@ -0,0 +1,22 @@
+import type { Ctrl, CtrlChangeHandler, CtrlConfig, CtrlType } from ".";
+export declare class SeedCtrl implements Ctrl<string> {
+    type: CtrlType;
+    name: string;
+    label: string;
+    value: string;
+    isRandomizationDisabled: boolean;
+    onChange: CtrlChangeHandler<string>;
+    onInput: CtrlChangeHandler<string>;
+    element: HTMLElement;
+    input: HTMLInputElement;
+    constructor(config: CtrlConfig<string>, onChange: CtrlChangeHandler<string>, onInput: CtrlChangeHandler<string>);
+    parse: (string: string) => string;
+    getRandomValue: () => string;
+    getDefaultValue: () => string;
+    valueToString: (value?: string) => string;
+    buildUI: () => {
+        element: HTMLDivElement;
+        input: HTMLInputElement;
+    };
+    update: (value?: string) => void;
+}

package/dist/ctrls/ctrl-seed.js

@@ -0,0 +1,79 @@
+import generateSeed from "../utils/generate-seed";
+import { refreshIcon } from "../utils/icons";
+export class SeedCtrl {
+    constructor(config, onChange, onInput) {
+        this.type = "seed";
+        this.parse = (string) => {
+            return string;
+        };
+        this.getRandomValue = () => {
+            return generateSeed();
+        };
+        this.getDefaultValue = () => {
+            return generateSeed();
+        };
+        this.valueToString = (value = this.value) => {
+            if (value.trim() === "") {
+                return this.getRandomValue();
+            }
+            return value;
+        };
+        this.buildUI = () => {
+            const { value } = this;
+            const id = `control-${this.name}`;
+            const input = document.createElement("input");
+            input.classList.add("ctrls__seed-input");
+            input.setAttribute("type", "text");
+            input.setAttribute("value", value.toString());
+            input.setAttribute("id", id);
+            input.addEventListener("change", () => {
+                this.value = this.parse(input.value);
+                this.onChange(this.name, this.value);
+            });
+            input.addEventListener("input", () => {
+                this.value = this.parse(input.value);
+                this.onInput(this.name, this.value);
+            });
+            const reload = document.createElement("button");
+            reload.innerHTML = refreshIcon;
+            reload.classList.add("ctrls__seed-new-button", "ctrls__btn");
+            reload.addEventListener("click", () => {
+                this.value = this.getRandomValue();
+                this.update();
+                this.onChange(this.name, this.getRandomValue());
+            });
+            const right = document.createElement("div");
+            right.classList.add("ctrls__control-right");
+            right.append(input);
+            right.append(reload);
+            const label = document.createElement("label");
+            label.textContent = this.label;
+            label.setAttribute("for", id);
+            label.classList.add("ctrls__control-label");
+            const element = document.createElement("div");
+            element.classList.add("ctrls__control", "ctrls__control--seed");
+            element.appendChild(label);
+            element.appendChild(right);
+            return {
+                element,
+                input,
+            };
+        };
+        this.update = (value = this.value) => {
+            this.value = value;
+            this.input.value = value;
+        };
+        this.name = config.name;
+        this.label = config.label || config.name;
+        this.value =
+            config.defaultValue === undefined
+                ? this.getDefaultValue()
+                : config.defaultValue;
+        this.isRandomizationDisabled = config.isRandomizationDisabled || false;
+        this.onChange = onChange;
+        this.onInput = onInput;
+        const { input, element } = this.buildUI();
+        this.input = input;
+        this.element = element;
+    }
+}