angular-three-tweakpane 4.2.3 → 4.2.4

package/fesm2022/angular-three-tweakpane-curve.mjs

@@ -0,0 +1,548 @@
+import * as i0 from '@angular/core';
+import { model, input, inject, computed, untracked, effect, DestroyRef, Directive } from '@angular/core';
+import { BladeController, Emitter, BladeApi, createPlugin } from '@tweakpane/core';
+import * as i1 from 'angular-three-tweakpane';
+import { TweakpaneFolder, TweakpanePane, TweakpaneBlade } from 'angular-three-tweakpane';
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const VIEW_WIDTH = 220;
+const VIEW_HEIGHT = 112;
+const VIEW_PADDING = 10;
+const TANGENT_LENGTH = 0.18;
+const CURVE_X_EPSILON = 1e-6;
+const MIN_TANGENT_ANGLE = -Math.PI / 2;
+const MAX_TANGENT_ANGLE = Math.PI / 2;
+const MAX_TANGENT_WEIGHT = 3;
+const DEFAULT_CURVE_PARAMS = {
+    minX: 0,
+    maxX: 1,
+    minY: 0,
+    maxY: 1,
+};
+class CurveView {
+    constructor(document, viewProps) {
+        this.element = document.createElement('div');
+        this.element.classList.add('tweakpane-curve');
+        viewProps.bindClassModifiers(this.element);
+        this.label = document.createElement('div');
+        this.label.classList.add('tweakpane-curve__label');
+        this.element.appendChild(this.label);
+        this.svg = document.createElementNS(SVG_NS, 'svg');
+        this.svg.classList.add('tweakpane-curve__editor');
+        this.svg.setAttribute('viewBox', `0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}`);
+        this.svg.setAttribute('role', 'application');
+        this.svg.setAttribute('aria-label', 'Curve editor');
+        this.svg.setAttribute('tabindex', '0');
+        this.svg.setAttribute('preserveAspectRatio', 'none');
+        this.element.appendChild(this.svg);
+        const grid = document.createElementNS(SVG_NS, 'path');
+        grid.classList.add('tweakpane-curve__grid');
+        grid.setAttribute('d', `M ${VIEW_PADDING} ${VIEW_HEIGHT / 2} H ${VIEW_WIDTH - VIEW_PADDING} M ${VIEW_WIDTH / 2} ${VIEW_PADDING} V ${VIEW_HEIGHT - VIEW_PADDING}`);
+        this.svg.appendChild(grid);
+        this.path = document.createElementNS(SVG_NS, 'path');
+        this.path.classList.add('tweakpane-curve__path');
+        this.svg.appendChild(this.path);
+        this.tangents = document.createElementNS(SVG_NS, 'g');
+        this.svg.appendChild(this.tangents);
+        this.points = document.createElementNS(SVG_NS, 'g');
+        this.svg.appendChild(this.points);
+    }
+    render(value, params, selected) {
+        const points = normalizeCurveData(value, params).points;
+        const commands = [];
+        for (let index = 0; index < 64; index++) {
+            const x = params.minX + ((params.maxX - params.minX) * index) / 63;
+            const y = evaluateCurve(points, x);
+            const screen = toScreen({ x, y }, params);
+            commands.push(`${index === 0 ? 'M' : 'L'} ${screen.x.toFixed(2)} ${screen.y.toFixed(2)}`);
+        }
+        this.path.setAttribute('d', commands.join(' '));
+        this.tangents.replaceChildren();
+        this.points.replaceChildren();
+        for (const [index, point] of points.entries()) {
+            if (index > 0)
+                this.renderTangent(points, index, 'in', params, selected);
+            if (index < points.length - 1)
+                this.renderTangent(points, index, 'out', params, selected);
+            const screen = toScreen(point, params);
+            const circle = this.svg.ownerDocument.createElementNS(SVG_NS, 'circle');
+            circle.classList.add('tweakpane-curve__point');
+            if (selected?.index === index && selected.kind === 'point') {
+                circle.classList.add('tweakpane-curve__point--selected');
+            }
+            circle.dataset['index'] = String(index);
+            circle.setAttribute('cx', String(screen.x));
+            circle.setAttribute('cy', String(screen.y));
+            circle.setAttribute('r', selected?.index === index && selected.kind === 'point' ? '5' : '4');
+            this.points.appendChild(circle);
+        }
+    }
+    renderTangent(points, index, kind, params, selected) {
+        const point = points[index];
+        const handle = getTangentHandle(point, kind, params);
+        const pointScreen = toScreen(point, params);
+        const handleScreen = toScreen(handle, params);
+        const line = this.svg.ownerDocument.createElementNS(SVG_NS, 'line');
+        line.classList.add('tweakpane-curve__tangent-line');
+        line.setAttribute('x1', String(pointScreen.x));
+        line.setAttribute('y1', String(pointScreen.y));
+        line.setAttribute('x2', String(handleScreen.x));
+        line.setAttribute('y2', String(handleScreen.y));
+        this.tangents.appendChild(line);
+        const circle = this.svg.ownerDocument.createElementNS(SVG_NS, 'circle');
+        circle.classList.add('tweakpane-curve__tangent');
+        if (selected?.index === index && selected.kind === kind) {
+            circle.classList.add('tweakpane-curve__tangent--selected');
+        }
+        circle.dataset['index'] = String(index);
+        circle.dataset['tangent'] = kind;
+        circle.setAttribute('cx', String(handleScreen.x));
+        circle.setAttribute('cy', String(handleScreen.y));
+        circle.setAttribute('r', selected?.index === index && selected.kind === kind ? '4' : '3');
+        this.tangents.appendChild(circle);
+    }
+}
+class CurveController extends BladeController {
+    constructor(document, params, blade, viewProps) {
+        const view = new CurveView(document, viewProps);
+        super({ blade, view, viewProps });
+        this.params = params;
+        this.emitter = new Emitter();
+        this.selected = null;
+        this.pointerId = null;
+        this.curveData = normalizeCurveData(params.value, params);
+        this.view.label.textContent = params.label ?? '';
+        this.view.label.hidden = !params.label;
+        this.render();
+        this.onPointerDown = this.onPointerDown.bind(this);
+        this.onPointerMove = this.onPointerMove.bind(this);
+        this.onPointerEnd = this.onPointerEnd.bind(this);
+        this.onDoubleClick = this.onDoubleClick.bind(this);
+        this.onContextMenu = this.onContextMenu.bind(this);
+        this.onKeyDown = this.onKeyDown.bind(this);
+        view.svg.addEventListener('pointerdown', this.onPointerDown);
+        view.svg.addEventListener('pointermove', this.onPointerMove);
+        view.svg.addEventListener('pointerup', this.onPointerEnd);
+        view.svg.addEventListener('pointercancel', this.onPointerEnd);
+        view.svg.addEventListener('lostpointercapture', this.onPointerEnd);
+        view.svg.addEventListener('dblclick', this.onDoubleClick);
+        view.svg.addEventListener('contextmenu', this.onContextMenu);
+        view.svg.addEventListener('keydown', this.onKeyDown);
+        viewProps.handleDispose(() => this.disposeListeners());
+    }
+    getValue() {
+        return cloneCurveData(this.curveData);
+    }
+    setValue(value, emit = false, last = true) {
+        this.curveData = normalizeCurveData(value, this.params);
+        this.render();
+        if (emit)
+            this.emitter.emit('change', { value: this.getValue(), last });
+    }
+    onPointerDown(event) {
+        if (this.viewProps.globalDisabled.rawValue || this.pointerId !== null)
+            return;
+        const target = event.target;
+        const index = target.dataset['index'];
+        if (index === undefined)
+            return;
+        event.preventDefault();
+        const tangent = target.dataset['tangent'];
+        this.selected = {
+            index: Number(index),
+            kind: tangent === 'in' || tangent === 'out' ? tangent : 'point',
+        };
+        this.pointerId = event.pointerId;
+        this.view.svg.setPointerCapture?.(event.pointerId);
+        this.render();
+    }
+    onPointerMove(event) {
+        if (event.pointerId !== this.pointerId || this.selected === null)
+            return;
+        event.preventDefault();
+        this.moveSelected(event, false);
+    }
+    onPointerEnd(event) {
+        if (event.pointerId !== this.pointerId)
+            return;
+        if (this.selected !== null)
+            this.moveSelected(event, true);
+        if (this.view.svg.hasPointerCapture?.(event.pointerId))
+            this.view.svg.releasePointerCapture?.(event.pointerId);
+        this.pointerId = null;
+    }
+    onDoubleClick(event) {
+        if (this.viewProps.globalDisabled.rawValue)
+            return;
+        event.preventDefault();
+        const point = fromClient(event, this.view.svg, this.params);
+        const added = { ...point, r_in: 0, r_out: 0, w_in: 1, w_out: 1 };
+        const points = [...this.curveData.points, added].sort((a, b) => a.x - b.x);
+        this.selected = { index: points.indexOf(added), kind: 'point' };
+        this.setValue({ ...this.curveData, points }, true, true);
+    }
+    onContextMenu(event) {
+        if (this.viewProps.globalDisabled.rawValue || this.curveData.points.length <= 2)
+            return;
+        const target = event.target;
+        if (target.dataset['tangent'])
+            return;
+        const index = target.dataset['index'];
+        if (index === undefined)
+            return;
+        event.preventDefault();
+        const points = this.curveData.points.filter((_, pointIndex) => pointIndex !== Number(index));
+        this.selected = null;
+        this.setValue({ ...this.curveData, points }, true, true);
+    }
+    onKeyDown(event) {
+        if (this.viewProps.globalDisabled.rawValue || this.selected === null)
+            return;
+        if (event.key === 'Delete' || event.key === 'Backspace') {
+            event.preventDefault();
+            if (this.selected.kind === 'point') {
+                if (this.curveData.points.length <= 2)
+                    return;
+                const points = this.curveData.points.filter((_, index) => index !== this.selected?.index);
+                this.selected = null;
+                this.setValue({ ...this.curveData, points }, true, true);
+            }
+            else {
+                const angleKey = this.selected.kind === 'in' ? 'r_in' : 'r_out';
+                const weightKey = this.selected.kind === 'in' ? 'w_in' : 'w_out';
+                const selectedIndex = this.selected.index;
+                const points = this.curveData.points.map((point, index) => {
+                    if (index !== selectedIndex)
+                        return point;
+                    const reset = { ...point };
+                    delete reset[angleKey];
+                    delete reset[weightKey];
+                    return reset;
+                });
+                this.setValue({ ...this.curveData, points }, true, true);
+            }
+            return;
+        }
+        const direction = event.key === 'ArrowLeft' || event.key === 'ArrowDown'
+            ? -1
+            : event.key === 'ArrowRight' || event.key === 'ArrowUp'
+                ? 1
+                : 0;
+        if (direction === 0)
+            return;
+        event.preventDefault();
+        if (this.selected.kind !== 'point') {
+            const current = this.curveData.points[this.selected.index];
+            const angleKey = this.selected.kind === 'in' ? 'r_in' : 'r_out';
+            const weightKey = this.selected.kind === 'in' ? 'w_in' : 'w_out';
+            const points = this.curveData.points.map((point, index) => {
+                if (index !== this.selected?.index)
+                    return point;
+                if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+                    return {
+                        ...point,
+                        [angleKey]: clamp((current[angleKey] ?? 0) + direction * 0.02, MIN_TANGENT_ANGLE, MAX_TANGENT_ANGLE),
+                    };
+                }
+                return {
+                    ...point,
+                    [weightKey]: clamp((current[weightKey] ?? 1) + direction * 0.05, 0, MAX_TANGENT_WEIGHT),
+                };
+            });
+            this.setValue({ ...this.curveData, points }, true, true);
+            return;
+        }
+        const xStep = (this.params.maxX - this.params.minX) / 100;
+        const yStep = (this.params.maxY - this.params.minY) / 100;
+        const current = this.curveData.points[this.selected.index];
+        const next = {
+            ...current,
+            x: current.x + (event.key === 'ArrowLeft' || event.key === 'ArrowRight' ? direction * xStep : 0),
+            y: current.y + (event.key === 'ArrowDown' || event.key === 'ArrowUp' ? direction * yStep : 0),
+        };
+        this.updateSelectedPoint(next, true);
+    }
+    moveSelected(event, last) {
+        if (this.selected?.kind === 'point') {
+            this.updateSelectedPoint(fromClient(event, this.view.svg, this.params), last);
+            return;
+        }
+        if (this.selected) {
+            this.updateSelectedTangent(fromClient(event, this.view.svg, this.params, false), last);
+        }
+    }
+    updateSelectedPoint(point, last) {
+        if (this.selected === null)
+            return;
+        const selectedIndex = this.selected.index;
+        const epsilon = Math.abs(this.params.maxX - this.params.minX) * CURVE_X_EPSILON;
+        const minX = selectedIndex > 0 ? this.curveData.points[selectedIndex - 1].x + epsilon : this.params.minX;
+        const maxX = selectedIndex < this.curveData.points.length - 1
+            ? this.curveData.points[selectedIndex + 1].x - epsilon
+            : this.params.maxX;
+        const points = this.curveData.points.map((candidate, index) => index === selectedIndex
+            ? {
+                ...candidate,
+                x: clamp(point.x, minX, maxX),
+                y: clamp(point.y, this.params.minY, this.params.maxY),
+            }
+            : candidate);
+        this.setValue({ ...this.curveData, points }, true, last);
+    }
+    updateSelectedTangent(cursor, last) {
+        if (this.selected === null || this.selected.kind === 'point')
+            return;
+        const points = updateCurveTangent(this.curveData.points, this.selected.index, this.selected.kind, cursor, this.params);
+        this.setValue({ ...this.curveData, points }, true, last);
+    }
+    render() {
+        this.view.render(this.curveData, this.params, this.selected);
+    }
+    disposeListeners() {
+        const view = this.view.svg;
+        view.removeEventListener('pointerdown', this.onPointerDown);
+        view.removeEventListener('pointermove', this.onPointerMove);
+        view.removeEventListener('pointerup', this.onPointerEnd);
+        view.removeEventListener('pointercancel', this.onPointerEnd);
+        view.removeEventListener('lostpointercapture', this.onPointerEnd);
+        view.removeEventListener('dblclick', this.onDoubleClick);
+        view.removeEventListener('contextmenu', this.onContextMenu);
+        view.removeEventListener('keydown', this.onKeyDown);
+    }
+}
+class TweakpaneCurveApi extends BladeApi {
+    get value() {
+        return this.controller.getValue();
+    }
+    set value(value) {
+        this.controller.setValue(value);
+    }
+    on(eventName, handler) {
+        this.controller.emitter.on(eventName, handler);
+        return this;
+    }
+    off(eventName, handler) {
+        this.controller.emitter.off(eventName, handler);
+        return this;
+    }
+}
+const CurvePlugin = createPlugin({
+    id: 'angular-three-curve',
+    type: 'blade',
+    accept(params) {
+        if (params['view'] !== 'angular-three-curve' || !isCurveData(params['value']))
+            return null;
+        return {
+            params: {
+                view: 'angular-three-curve',
+                value: params['value'],
+                label: typeof params['label'] === 'string' ? params['label'] : undefined,
+                minX: numberParam(params['minX'], 0),
+                maxX: numberParam(params['maxX'], 1),
+                minY: numberParam(params['minY'], 0),
+                maxY: numberParam(params['maxY'], 1),
+            },
+        };
+    },
+    controller(args) {
+        return new CurveController(args.document, args.params, args.blade, args.viewProps);
+    },
+    api(args) {
+        return args.controller instanceof CurveController ? new TweakpaneCurveApi(args.controller) : null;
+    },
+});
+const TWEAKPANE_CURVE_PLUGIN = {
+    id: 'angular-three-tweakpane-curve',
+    plugins: [CurvePlugin],
+    css: `
+		.tweakpane-curve { padding: 4px 0; }
+		.tweakpane-curve__label { color: var(--lbl-fg); font-size: 11px; margin-bottom: 4px; }
+		.tweakpane-curve__editor { background: var(--in-bg); border-radius: var(--bld-br); display: block; height: 112px; touch-action: none; width: 100%; }
+		.tweakpane-curve__grid { fill: none; stroke: var(--in-fg); stroke-opacity: .12; stroke-width: 1; }
+		.tweakpane-curve__path { fill: none; stroke: var(--btn-bg-a); stroke-width: 2; }
+		.tweakpane-curve__tangent-line { pointer-events: none; stroke: var(--in-fg); stroke-opacity: .45; stroke-width: 1; }
+		.tweakpane-curve__tangent { cursor: crosshair; fill: var(--in-bg); stroke: var(--btn-fg); stroke-width: 1.5; }
+		.tweakpane-curve__tangent--selected { fill: var(--btn-bg-a); stroke: var(--btn-fg); }
+		.tweakpane-curve__point { cursor: grab; fill: var(--btn-fg); stroke: var(--btn-bg-a); stroke-width: 2; }
+		.tweakpane-curve__point--selected { fill: var(--btn-bg-a); stroke: var(--btn-fg); }
+	`,
+};
+/** A two-way Tweakpane curve editor compatible with Ecctrl's curve DTO. */
+class TweakpaneCurve {
+    constructor() {
+        this.value = model.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+        this.params = input({}, ...(ngDevMode ? [{ debugName: "params" }] : /* istanbul ignore next */ []));
+        this.folder = inject(TweakpaneFolder);
+        this.pane = inject(TweakpanePane);
+        this.blade = inject(TweakpaneBlade);
+        this.api = computed(() => {
+            const folder = this.folder.folder();
+            if (!folder)
+                return null;
+            const params = this.params();
+            return folder.addBlade({
+                view: 'angular-three-curve',
+                value: untracked(this.value),
+                label: this.label(),
+                ...params,
+            });
+        }, ...(ngDevMode ? [{ debugName: "api" }] : /* istanbul ignore next */ []));
+        this.pane.registerPlugin(TWEAKPANE_CURVE_PLUGIN);
+        this.blade.sync(this.api);
+        effect((onCleanup) => {
+            const api = this.api();
+            if (!api)
+                return;
+            const onChange = (event) => this.value.set(event.value);
+            api.on('change', onChange);
+            onCleanup(() => {
+                api.off('change', onChange);
+                api.dispose();
+            });
+        });
+        effect(() => {
+            const api = this.api();
+            if (api)
+                api.value = this.value();
+        });
+        inject(DestroyRef).onDestroy(() => this.api()?.dispose());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TweakpaneCurve, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: TweakpaneCurve, isStandalone: true, selector: "tweakpane-curve", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, hostDirectives: [{ directive: i1.TweakpaneBlade, inputs: ["hidden", "hidden", "disabled", "disabled"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TweakpaneCurve, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tweakpane-curve',
+                    hostDirectives: [{ directive: TweakpaneBlade, inputs: ['hidden', 'disabled'] }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], params: [{ type: i0.Input, args: [{ isSignal: true, alias: "params", required: false }] }] } });
+function normalizeCurveData(value, params = DEFAULT_CURVE_PARAMS) {
+    const resolvedParams = {
+        minX: numberParam(params.minX, DEFAULT_CURVE_PARAMS.minX),
+        maxX: numberParam(params.maxX, DEFAULT_CURVE_PARAMS.maxX),
+        minY: numberParam(params.minY, DEFAULT_CURVE_PARAMS.minY),
+        maxY: numberParam(params.maxY, DEFAULT_CURVE_PARAMS.maxY),
+    };
+    const points = value.points
+        .map((point) => ({
+        ...point,
+        x: clamp(point.x, resolvedParams.minX, resolvedParams.maxX),
+        y: clamp(point.y, resolvedParams.minY, resolvedParams.maxY),
+    }))
+        .sort((a, b) => a.x - b.x)
+        .map((point, index, sorted) => {
+        const normalized = { ...point };
+        if (index === 0) {
+            delete normalized.r_in;
+            delete normalized.w_in;
+        }
+        if (index === sorted.length - 1) {
+            delete normalized.r_out;
+            delete normalized.w_out;
+        }
+        return normalized;
+    });
+    return {
+        ...value,
+        points,
+    };
+}
+/** @internal Pure tangent update used by the blade controller and focused tests. */
+function updateCurveTangent(points, index, kind, cursor, params) {
+    const point = points[index];
+    if (!point)
+        return points;
+    const direction = kind === 'out' ? 1 : -1;
+    const dx = (cursor.x - point.x) * direction;
+    const dy = (cursor.y - point.y) * direction;
+    const angle = clamp(Math.atan2(dy, dx), MIN_TANGENT_ANGLE, MAX_TANGENT_ANGLE);
+    const weight = clamp(Math.hypot(dx, dy) / tangentUnitLength(params), 0, MAX_TANGENT_WEIGHT);
+    const angleKey = kind === 'in' ? 'r_in' : 'r_out';
+    const weightKey = kind === 'in' ? 'w_in' : 'w_out';
+    return points.map((candidate, candidateIndex) => candidateIndex === index ? { ...candidate, [angleKey]: angle, [weightKey]: weight } : candidate);
+}
+function getTangentHandle(point, kind, params) {
+    const direction = kind === 'out' ? 1 : -1;
+    const angle = kind === 'in' ? (point.r_in ?? 0) : (point.r_out ?? 0);
+    const weight = kind === 'in' ? (point.w_in ?? 1) : (point.w_out ?? 1);
+    const length = tangentUnitLength(params) * weight * direction;
+    return {
+        x: point.x + Math.cos(angle) * length,
+        y: point.y + Math.sin(angle) * length,
+    };
+}
+function tangentUnitLength(params) {
+    const xRange = Math.abs(params.maxX - params.minX);
+    const yRange = Math.abs(params.maxY - params.minY);
+    const ranges = [xRange, yRange].filter((range) => range > 1e-9);
+    return (ranges.length > 0 ? Math.min(...ranges) : 1) * TANGENT_LENGTH;
+}
+function isCurveData(value) {
+    return !!value && typeof value === 'object' && Array.isArray(value.points);
+}
+function cloneCurveData(value) {
+    return { ...value, points: value.points.map((point) => ({ ...point })) };
+}
+function numberParam(value, fallback) {
+    return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, Math.min(min, max)), Math.max(min, max));
+}
+function toScreen(point, params) {
+    const width = VIEW_WIDTH - VIEW_PADDING * 2;
+    const height = VIEW_HEIGHT - VIEW_PADDING * 2;
+    return {
+        x: VIEW_PADDING + ((point.x - params.minX) / Math.max(params.maxX - params.minX, 1e-9)) * width,
+        y: VIEW_HEIGHT - VIEW_PADDING - ((point.y - params.minY) / Math.max(params.maxY - params.minY, 1e-9)) * height,
+    };
+}
+function fromClient(event, element, params, clampToBounds = true) {
+    const rect = element.getBoundingClientRect();
+    const viewX = ((event.clientX - rect.left) / Math.max(rect.width, 1)) * VIEW_WIDTH;
+    const viewY = ((event.clientY - rect.top) / Math.max(rect.height, 1)) * VIEW_HEIGHT;
+    const rawX = (viewX - VIEW_PADDING) / (VIEW_WIDTH - VIEW_PADDING * 2);
+    const rawY = (viewY - VIEW_PADDING) / (VIEW_HEIGHT - VIEW_PADDING * 2);
+    const x = clampToBounds ? clamp(rawX, 0, 1) : rawX;
+    const y = clampToBounds ? clamp(rawY, 0, 1) : rawY;
+    return {
+        x: params.minX + x * (params.maxX - params.minX),
+        y: params.maxY - y * (params.maxY - params.minY),
+    };
+}
+function evaluateCurve(points, value) {
+    if (points.length === 0)
+        return 0;
+    if (points.length === 1 || value <= points[0].x)
+        return points[0].y;
+    for (let index = 1; index < points.length; index++) {
+        const previous = points[index - 1];
+        const next = points[index];
+        if (value > next.x)
+            continue;
+        const width = next.x - previous.x;
+        if (width <= 0)
+            return previous.y;
+        const t = clamp((value - previous.x) / width, 0, 1);
+        const t2 = t * t;
+        const t3 = t2 * t;
+        const linearSlope = (next.y - previous.y) / width;
+        const outgoingSlope = linearSlope +
+            ((previous.r_out === undefined ? 0 : Math.tan(previous.r_out)) - linearSlope) * (previous.w_out ?? 1);
+        const incomingSlope = linearSlope + ((next.r_in === undefined ? 0 : Math.tan(next.r_in)) - linearSlope) * (next.w_in ?? 1);
+        return ((2 * t3 - 3 * t2 + 1) * previous.y +
+            (t3 - 2 * t2 + t) * width * outgoingSlope +
+            (-2 * t3 + 3 * t2) * next.y +
+            (t3 - t2) * width * incomingSlope);
+    }
+    return points[points.length - 1].y;
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TWEAKPANE_CURVE_PLUGIN, TweakpaneCurve, TweakpaneCurveApi, normalizeCurveData };
+//# sourceMappingURL=angular-three-tweakpane-curve.mjs.map