@easemate/web-kit 0.1.0

package/build/components/curve/index.cjs

@@ -0,0 +1,335 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EasingType = exports.Curve = void 0;
+const lit_html_1 = require("lit-html");
+const bezier_conversion_1 = require("./bezier-conversion.cjs");
+const styles_1 = require("./styles.cjs");
+const types_1 = require("./types.cjs");
+const utils_1 = require("./utils.cjs");
+const Component_1 = require("~/decorators/Component");
+const Listen_1 = require("~/decorators/Listen");
+const Prop_1 = require("~/decorators/Prop");
+@(0, Component_1.Component)({
+    tag: 'ease-curve',
+    styles: styles_1.containerStyles,
+    template() {
+        return (0, lit_html_1.html) `
+      <div class="curve-container">
+        <div class="curve-header">
+          <ease-curve-controls
+            .easingType=${this.easingType}
+            .points=${this.points}
+            .showGrid=${this.showGrid}
+            .snapToGrid=${this.snapToGrid}
+            .gridSize=${this.gridSize}
+            .focusedLinearIndex=${this.focusedLinearIndex}
+          ></ease-curve-controls>
+        </div>
+
+        <div class="curve-canvas-wrapper">
+          <div class="curve-canvas">
+            <ease-curve-canvas
+              .easingType=${this.easingType}
+              .points=${this.points}
+              .showGrid=${this.showGrid}
+              .snapToGrid=${this.snapToGrid}
+              .gridSize=${this.gridSize}
+              .focusedLinearIndex=${this.focusedLinearIndex}
+              .simplify=${this.simplify}
+              .round=${this.round}
+            ></ease-curve-canvas>
+          </div>
+          <ease-curve-canvas-controls
+            .easingType=${this.easingType}
+            .points=${this.points}
+            .focusedLinearIndex=${this.focusedLinearIndex}
+          ></ease-curve-canvas-controls>
+        </div>
+
+        <div class="curve-toolbar">
+          <ease-curve-toolbar
+            .easingType=${this.easingType}
+            .points=${this.points}
+            .showGrid=${this.showGrid}
+            .snapToGrid=${this.snapToGrid}
+            .gridSize=${this.gridSize}
+            .simplify=${this.simplify}
+            .round=${this.round}
+          ></ease-curve-toolbar>
+        </div>
+
+        <!-- <div class="curve-footer">
+          <ease-curve-output
+            .easingType=${this.easingType}
+            .points=${this.points}
+            .name=${this.name}
+            .simplify=${this.simplify}
+            .round=${this.round}
+          ></ease-curve-output>
+        </div> -->
+      </div>
+    `;
+    }
+})
+class Curve extends HTMLElement {
+    @(0, Prop_1.Prop)({ reflect: true, defaultValue: 'ease-custom' })
+    accessor name;
+    @(0, Prop_1.Prop)({
+        reflect: true,
+        defaultValue: types_1.EasingType.CUBIC_BEZIER,
+        onChange(next, previous) {
+            if (next !== previous) {
+                this.points = this.getDefaultPointsForType(next);
+                this.focusedLinearIndex = null;
+            }
+        }
+    })
+    accessor easingType;
+    @(0, Prop_1.Prop)({
+        type: Object,
+        reflect: false,
+        defaultValue: () => {
+            return { p1: { x: 0.25, y: 0.1 }, p2: { x: 0.25, y: 1 } };
+        }
+    })
+    accessor points;
+    @(0, Prop_1.Prop)({ type: Boolean, reflect: true, defaultValue: true })
+    accessor showGrid;
+    @(0, Prop_1.Prop)({ type: Boolean, reflect: true, defaultValue: false })
+    accessor snapToGrid;
+    @(0, Prop_1.Prop)({ type: Number, reflect: true, defaultValue: 8 })
+    accessor gridSize;
+    @(0, Prop_1.Prop)({ type: Number, reflect: true, defaultValue: 0 })
+    accessor simplify;
+    @(0, Prop_1.Prop)({ type: Number, reflect: true, defaultValue: 5 })
+    accessor round;
+    @(0, Prop_1.Prop)({ type: Number, reflect: false, defaultValue: null })
+    accessor focusedLinearIndex = null;
+    getDefaultPointsForType(type) {
+        return type === types_1.EasingType.CUBIC_BEZIER
+            ? { p1: { x: 0.25, y: 0.1 }, p2: { x: 0.25, y: 1 } }
+            : [
+                { x: 0, y: 0 },
+                { x: 1, y: 1 }
+            ];
+    }
+    @(0, Listen_1.Listen)('easing-type-change', { target: 'light' })
+    handleEasingTypeChange(event) {
+        const { value } = event.detail;
+        if (this.easingType === value) {
+            return;
+        }
+        const previousType = this.easingType;
+        const previousPoints = this.points;
+        this.easingType = value;
+        this.focusedLinearIndex = null;
+        if (previousType === types_1.EasingType.CUBIC_BEZIER && value === types_1.EasingType.LINEAR) {
+            if (previousPoints && !Array.isArray(previousPoints)) {
+                const bezierPoints = previousPoints;
+                const linearPoints = (0, bezier_conversion_1.cubicBezierToLinearPoints)(bezierPoints);
+                this.points = linearPoints;
+                this.emitPointsChange(linearPoints, event.detail.event);
+                return;
+            }
+            else {
+                this.points = this.getDefaultPointsForType(value);
+                this.emitPointsChange(this.points, event.detail.event);
+                return;
+            }
+        }
+        else if (previousType === types_1.EasingType.LINEAR && value === types_1.EasingType.CUBIC_BEZIER) {
+            this.points = this.getDefaultPointsForType(value);
+            this.emitPointsChange(this.points, event.detail.event);
+            return;
+        }
+        else {
+            this.points = this.getDefaultPointsForType(value);
+            this.emitPointsChange(this.points, event.detail.event);
+            return;
+        }
+    }
+    @(0, Listen_1.Listen)('grid-toggle', { target: 'light' })
+    handleGridToggle(event) {
+        const { value } = event.detail;
+        if (this.showGrid === value) {
+            return;
+        }
+        this.showGrid = value;
+    }
+    @(0, Listen_1.Listen)('snap-toggle', { target: 'light' })
+    handleSnapToggle(event) {
+        const { value } = event.detail;
+        if (this.snapToGrid === value) {
+            return;
+        }
+        this.snapToGrid = value;
+    }
+    @(0, Listen_1.Listen)('grid-size-change', { target: 'light' })
+    handleGridSizeChange(event) {
+        let { value } = event.detail;
+        value = Math.max(1, Math.min(24, value));
+        if (this.gridSize === value) {
+            return;
+        }
+        this.gridSize = value;
+        this.requestRender();
+    }
+    @(0, Listen_1.Listen)('simplify-change', { target: 'light' })
+    handleSimplifyChange(event) {
+        const { value } = event.detail;
+        if (this.simplify === value) {
+            return;
+        }
+        this.simplify = value;
+        this.requestRender();
+    }
+    @(0, Listen_1.Listen)('round-change', { target: 'light' })
+    handleRoundChange(event) {
+        const { value } = event.detail;
+        if (this.round === value) {
+            return;
+        }
+        this.round = value;
+        this.requestRender();
+    }
+    @(0, Listen_1.Listen)('points-change', {
+        target: 'light'
+    })
+    handlePointsChange(event) {
+        const { value } = event.detail;
+        this.points = value;
+        if (Array.isArray(value)) {
+            if (this.focusedLinearIndex !== null) {
+                if (this.focusedLinearIndex >= value.length) {
+                    this.focusedLinearIndex = value.length - 1;
+                }
+            }
+        }
+        else {
+            this.focusedLinearIndex = null;
+        }
+    }
+    @(0, Listen_1.Listen)('keydown', { target: 'window', passive: false })
+    handleKeyboardShortcuts(event) {
+        if (event.defaultPrevented) {
+            return;
+        }
+        const activeElement = event.target;
+        if (activeElement instanceof HTMLInputElement ||
+            activeElement instanceof HTMLTextAreaElement ||
+            (activeElement instanceof HTMLElement && activeElement.isContentEditable)) {
+            return;
+        }
+        if (this.easingType !== types_1.EasingType.LINEAR || !Array.isArray(this.points)) {
+            return;
+        }
+        const index = this.focusedLinearIndex;
+        if (index === null) {
+            return;
+        }
+        const lastIndex = this.points.length - 1;
+        const clonedPoints = this.points.map((point) => {
+            return { ...point };
+        });
+        const point = clonedPoints[index];
+        if (!point) {
+            return;
+        }
+        const step = event.shiftKey ? 0.05 : 0.01;
+        let handled = false;
+        switch (event.key) {
+            case 'ArrowLeft': {
+                if (index <= 0 || index >= lastIndex) {
+                    break;
+                }
+                const previous = clonedPoints[index - 1];
+                const next = clonedPoints[index + 1];
+                if (!previous || !next) {
+                    break;
+                }
+                const minX = previous.x + utils_1.MIN_LINEAR_DELTA;
+                const maxX = next.x - utils_1.MIN_LINEAR_DELTA;
+                point.x = Math.min(Math.max(point.x - step, minX), maxX);
+                handled = true;
+                break;
+            }
+            case 'ArrowRight': {
+                if (index <= 0 || index >= lastIndex) {
+                    break;
+                }
+                const previous = clonedPoints[index - 1];
+                const next = clonedPoints[index + 1];
+                if (!previous || !next) {
+                    break;
+                }
+                const minX = previous.x + utils_1.MIN_LINEAR_DELTA;
+                const maxX = next.x - utils_1.MIN_LINEAR_DELTA;
+                point.x = Math.min(Math.max(point.x + step, minX), maxX);
+                handled = true;
+                break;
+            }
+            case 'ArrowUp': {
+                point.y = Math.min(Math.max(point.y + step, 0), 1);
+                handled = true;
+                break;
+            }
+            case 'ArrowDown': {
+                point.y = Math.min(Math.max(point.y - step, 0), 1);
+                handled = true;
+                break;
+            }
+            case 'Delete':
+            case 'Backspace': {
+                if (clonedPoints.length <= types_1.MIN_LINEAR_POINTS || index <= 0 || index >= lastIndex) {
+                    break;
+                }
+                clonedPoints.splice(index, 1);
+                const normalized = (0, utils_1.normalizeLinearPoints)(clonedPoints);
+                this.points = normalized;
+                this.emitPointsChange(normalized, event);
+                const nextFocus = index - 1;
+                this.focusedLinearIndex = nextFocus;
+                handled = true;
+                break;
+            }
+            default:
+                break;
+        }
+        if (handled && event.key !== 'Delete' && event.key !== 'Backspace') {
+            const normalized = (0, utils_1.normalizeLinearPoints)(clonedPoints);
+            this.points = normalized;
+            this.emitPointsChange(normalized, event);
+            this.focusedLinearIndex = index;
+        }
+        if (handled) {
+            event.preventDefault();
+        }
+    }
+    @(0, Listen_1.Listen)('linear-point-focus', { target: 'light' })
+    handleLinearPointFocus(event) {
+        const { value } = event.detail;
+        if (this.focusedLinearIndex === value) {
+            return;
+        }
+        this.focusedLinearIndex = value ?? null;
+    }
+    emitPointsChange(value, sourceEvent) {
+        const detail = {
+            value,
+            event: sourceEvent ?? new Event('points-change')
+        };
+        this.dispatchEvent(new CustomEvent('points-change', {
+            detail,
+            bubbles: true,
+            composed: true
+        }));
+    }
+}
+exports.Curve = Curve;
+require("./canvas.cjs");
+require("./canvas-controls.cjs");
+require("./controls.cjs");
+require("./output.cjs");
+require("./toolbar.cjs");
+var types_2 = require("./types.cjs");
+Object.defineProperty(exports, "EasingType", { enumerable: true, get: function () { return types_2.EasingType; } });

package/build/components/curve/index.d.cts

@@ -0,0 +1,31 @@
+import type { ControlEventDetail } from '~/elements/shared';
+import { type CubicBezierPoints, EasingType, type LinearPoints } from "./types.cjs";
+export declare class Curve extends HTMLElement {
+    requestRender: () => void;
+    accessor name: string;
+    accessor easingType: EasingType;
+    accessor points: CubicBezierPoints | LinearPoints;
+    accessor showGrid: boolean;
+    accessor snapToGrid: boolean;
+    accessor gridSize: number;
+    accessor simplify: number;
+    accessor round: number;
+    accessor focusedLinearIndex: number | null;
+    private getDefaultPointsForType;
+    handleEasingTypeChange(event: CustomEvent<ControlEventDetail<EasingType>>): void;
+    handleGridToggle(event: CustomEvent<ControlEventDetail<boolean>>): void;
+    handleSnapToggle(event: CustomEvent<ControlEventDetail<boolean>>): void;
+    handleGridSizeChange(event: CustomEvent<ControlEventDetail<number>>): void;
+    handleSimplifyChange(event: CustomEvent<ControlEventDetail<number>>): void;
+    handleRoundChange(event: CustomEvent<ControlEventDetail<number>>): void;
+    handlePointsChange(event: CustomEvent<ControlEventDetail<CubicBezierPoints | LinearPoints>>): void;
+    handleKeyboardShortcuts(event: KeyboardEvent): void;
+    handleLinearPointFocus(event: CustomEvent<ControlEventDetail<number | null>>): void;
+    private emitPointsChange;
+}
+import "./canvas.cjs";
+import "./canvas-controls.cjs";
+import "./controls.cjs";
+import "./output.cjs";
+import "./toolbar.cjs";
+export { type CubicBezierPoints, type EasingData, EasingType, type LinearPoints, type Point } from "./types.cjs";

package/build/components/curve/index.d.ts

@@ -0,0 +1,31 @@
+import type { ControlEventDetail } from '~/elements/shared';
+import { type CubicBezierPoints, EasingType, type LinearPoints } from "./types.js";
+export declare class Curve extends HTMLElement {
+    requestRender: () => void;
+    accessor name: string;
+    accessor easingType: EasingType;
+    accessor points: CubicBezierPoints | LinearPoints;
+    accessor showGrid: boolean;
+    accessor snapToGrid: boolean;
+    accessor gridSize: number;
+    accessor simplify: number;
+    accessor round: number;
+    accessor focusedLinearIndex: number | null;
+    private getDefaultPointsForType;
+    handleEasingTypeChange(event: CustomEvent<ControlEventDetail<EasingType>>): void;
+    handleGridToggle(event: CustomEvent<ControlEventDetail<boolean>>): void;
+    handleSnapToggle(event: CustomEvent<ControlEventDetail<boolean>>): void;
+    handleGridSizeChange(event: CustomEvent<ControlEventDetail<number>>): void;
+    handleSimplifyChange(event: CustomEvent<ControlEventDetail<number>>): void;
+    handleRoundChange(event: CustomEvent<ControlEventDetail<number>>): void;
+    handlePointsChange(event: CustomEvent<ControlEventDetail<CubicBezierPoints | LinearPoints>>): void;
+    handleKeyboardShortcuts(event: KeyboardEvent): void;
+    handleLinearPointFocus(event: CustomEvent<ControlEventDetail<number | null>>): void;
+    private emitPointsChange;
+}
+import "./canvas.js";
+import "./canvas-controls.js";
+import "./controls.js";
+import "./output.js";
+import "./toolbar.js";
+export { type CubicBezierPoints, type EasingData, EasingType, type LinearPoints, type Point } from "./types.js";