@easemate/web-kit 0.2.0 → 0.3.0

package/build/components/curve/index.cjs

@@ -1,335 +0,0 @@
-"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

@@ -1,31 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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";