@easemate/web-kit 0.1.0

package/build/components/curve/index.js

@@ -0,0 +1,330 @@
+import { html } from 'lit-html';
+import { cubicBezierToLinearPoints } from "./bezier-conversion.js";
+import { containerStyles } from "./styles.js";
+import { EasingType, MIN_LINEAR_POINTS } from "./types.js";
+import { MIN_LINEAR_DELTA, normalizeLinearPoints } from "./utils.js";
+import { Component } from '~/decorators/Component';
+import { Listen } from '~/decorators/Listen';
+import { Prop } from '~/decorators/Prop';
+@Component({
+    tag: 'ease-curve',
+    styles: containerStyles,
+    template() {
+        return 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>
+    `;
+    }
+})
+export class Curve extends HTMLElement {
+    @Prop({ reflect: true, defaultValue: 'ease-custom' })
+    accessor name;
+    @Prop({
+        reflect: true,
+        defaultValue: EasingType.CUBIC_BEZIER,
+        onChange(next, previous) {
+            if (next !== previous) {
+                this.points = this.getDefaultPointsForType(next);
+                this.focusedLinearIndex = null;
+            }
+        }
+    })
+    accessor easingType;
+    @Prop({
+        type: Object,
+        reflect: false,
+        defaultValue: () => {
+            return { p1: { x: 0.25, y: 0.1 }, p2: { x: 0.25, y: 1 } };
+        }
+    })
+    accessor points;
+    @Prop({ type: Boolean, reflect: true, defaultValue: true })
+    accessor showGrid;
+    @Prop({ type: Boolean, reflect: true, defaultValue: false })
+    accessor snapToGrid;
+    @Prop({ type: Number, reflect: true, defaultValue: 8 })
+    accessor gridSize;
+    @Prop({ type: Number, reflect: true, defaultValue: 0 })
+    accessor simplify;
+    @Prop({ type: Number, reflect: true, defaultValue: 5 })
+    accessor round;
+    @Prop({ type: Number, reflect: false, defaultValue: null })
+    accessor focusedLinearIndex = null;
+    getDefaultPointsForType(type) {
+        return type === EasingType.CUBIC_BEZIER
+            ? { p1: { x: 0.25, y: 0.1 }, p2: { x: 0.25, y: 1 } }
+            : [
+                { x: 0, y: 0 },
+                { x: 1, y: 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 === EasingType.CUBIC_BEZIER && value === EasingType.LINEAR) {
+            if (previousPoints && !Array.isArray(previousPoints)) {
+                const bezierPoints = previousPoints;
+                const linearPoints = 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 === EasingType.LINEAR && value === 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;
+        }
+    }
+    @Listen('grid-toggle', { target: 'light' })
+    handleGridToggle(event) {
+        const { value } = event.detail;
+        if (this.showGrid === value) {
+            return;
+        }
+        this.showGrid = value;
+    }
+    @Listen('snap-toggle', { target: 'light' })
+    handleSnapToggle(event) {
+        const { value } = event.detail;
+        if (this.snapToGrid === value) {
+            return;
+        }
+        this.snapToGrid = value;
+    }
+    @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();
+    }
+    @Listen('simplify-change', { target: 'light' })
+    handleSimplifyChange(event) {
+        const { value } = event.detail;
+        if (this.simplify === value) {
+            return;
+        }
+        this.simplify = value;
+        this.requestRender();
+    }
+    @Listen('round-change', { target: 'light' })
+    handleRoundChange(event) {
+        const { value } = event.detail;
+        if (this.round === value) {
+            return;
+        }
+        this.round = value;
+        this.requestRender();
+    }
+    @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;
+        }
+    }
+    @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 !== 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 + MIN_LINEAR_DELTA;
+                const maxX = next.x - 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 + MIN_LINEAR_DELTA;
+                const maxX = next.x - 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 <= MIN_LINEAR_POINTS || index <= 0 || index >= lastIndex) {
+                    break;
+                }
+                clonedPoints.splice(index, 1);
+                const normalized = 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 = normalizeLinearPoints(clonedPoints);
+            this.points = normalized;
+            this.emitPointsChange(normalized, event);
+            this.focusedLinearIndex = index;
+        }
+        if (handled) {
+            event.preventDefault();
+        }
+    }
+    @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
+        }));
+    }
+}
+import "./canvas.js";
+import "./canvas-controls.js";
+import "./controls.js";
+import "./output.js";
+import "./toolbar.js";
+export { EasingType } from "./types.js";

package/build/components/curve/output.cjs

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CurveOutput = void 0;
+const lit_html_1 = require("lit-html");
+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 Prop_1 = require("~/decorators/Prop");
+require("~/components/code");
+@(0, Component_1.Component)({
+    tag: 'ease-curve-output',
+    styles: styles_1.outputStyles,
+    template() {
+        return (0, lit_html_1.html) `
+      <div class="output-container">
+        <div class="output-group">
+          <h4 class="output-label">CSS Easing Function</h4>
+          <ease-code language="css">${this.generatedCSS.code}</ease-code>
+          <button class="copy-button" @click=${this.handleCopyClick}>
+            ${this.copyStatus}
+          </button>
+        </div>
+      </div>
+    `;
+    }
+})
+class CurveOutput extends HTMLElement {
+    @(0, Prop_1.Prop)({ type: String, reflect: true })
+    accessor easingType;
+    @(0, Prop_1.Prop)({ type: Object, reflect: false })
+    accessor points;
+    @(0, Prop_1.Prop)({ reflect: true, defaultValue: 'ease-custom' })
+    accessor name;
+    @(0, Prop_1.Prop)({ reflect: true, defaultValue: 'animation' })
+    accessor variant;
+    @(0, Prop_1.Prop)({ type: Number, reflect: true, defaultValue: 0 })
+    accessor simplify;
+    @(0, Prop_1.Prop)({ type: Number, reflect: true, defaultValue: 5 })
+    accessor round;
+    #copyTimeout = null;
+    #animationTimeout = null;
+    #isAnimating = false;
+    get timingFunction() {
+        const { timingFunction } = this.generatedCSS;
+        return timingFunction;
+    }
+    get generatedCSS() {
+        if (this.easingType === types_1.EasingType.CUBIC_BEZIER) {
+            if (!this.points || Array.isArray(this.points)) {
+                const timingFunction = 'cubic-bezier(0.25, 0.1, 0.25, 1)';
+                const code = `
+          .${this.name} {
+            ${this.variant}-timing-function: ${timingFunction};
+          }
+        `;
+                return { code, timingFunction };
+            }
+            return (0, utils_1.generateCubicBezierCSS)(this.points, this.name, this.variant);
+        }
+        if (this.easingType === types_1.EasingType.LINEAR) {
+            if (Array.isArray(this.points)) {
+                return (0, utils_1.generateLinearCSS)(this.points, this.name, this.variant, {
+                    simplify: this.simplify,
+                    round: this.round
+                });
+            }
+            const timingFunction = 'linear(0, 1)';
+            const code = `
+        .${this.name} {
+          ${this.variant}-timing-function: ${timingFunction};
+        }
+      `;
+            return { code, timingFunction };
+        }
+        const timingFunction = 'ease';
+        const code = `
+      .${this.name} {
+        ${this.variant}-timing-function: ${timingFunction};
+      }
+    `;
+        return { code, timingFunction };
+    }
+    get copyStatus() {
+        return this.#copyTimeout ? 'Copied!' : 'Copy CSS';
+    }
+    get isAnimating() {
+        return this.#isAnimating;
+    }
+    #copyToClipboard = async (event) => {
+        event.preventDefault();
+        try {
+            await navigator.clipboard.writeText(this.timingFunction);
+            if (this.#copyTimeout) {
+                clearTimeout(this.#copyTimeout);
+            }
+            this.#copyTimeout = window.setTimeout(() => {
+                this.#copyTimeout = null;
+                this.requestRender();
+            }, 2000);
+            this.requestRender();
+        }
+        catch (error) {
+            console.error('Failed to copy to clipboard:', error);
+        }
+    };
+    #playPreview = (event) => {
+        event.preventDefault();
+        if (this.#isAnimating) {
+            this.#isAnimating = false;
+            this.requestRender();
+            void this.offsetHeight;
+        }
+        if (this.#animationTimeout) {
+            clearTimeout(this.#animationTimeout);
+        }
+        this.#isAnimating = true;
+        this.requestRender();
+        this.#animationTimeout = window.setTimeout(() => {
+            this.#isAnimating = false;
+            this.requestRender();
+        }, 2000);
+    };
+    handleCopyClick = (event) => {
+        void this.#copyToClipboard(event);
+    };
+    handlePreviewClick(event) {
+        this.#playPreview(event);
+    }
+    disconnectedCallback() {
+        if (this.#copyTimeout) {
+            clearTimeout(this.#copyTimeout);
+            this.#copyTimeout = null;
+        }
+        if (this.#animationTimeout) {
+            clearTimeout(this.#animationTimeout);
+            this.#animationTimeout = null;
+        }
+    }
+}
+exports.CurveOutput = CurveOutput;

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

@@ -0,0 +1,19 @@
+import { type CSSCode, type CubicBezierPoints, EasingType, type LinearPoints } from "./types.cjs";
+import '~/components/code';
+export declare class CurveOutput extends HTMLElement {
+    #private;
+    requestRender: () => void;
+    accessor easingType: EasingType;
+    accessor points: CubicBezierPoints | LinearPoints;
+    accessor name: string;
+    accessor variant: 'animation' | 'transition';
+    accessor simplify: number;
+    accessor round: number;
+    get timingFunction(): string;
+    get generatedCSS(): CSSCode;
+    get copyStatus(): string;
+    get isAnimating(): boolean;
+    readonly handleCopyClick: (event: Event) => void;
+    handlePreviewClick(event: Event): void;
+    disconnectedCallback(): void;
+}

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

@@ -0,0 +1,19 @@
+import { type CSSCode, type CubicBezierPoints, EasingType, type LinearPoints } from "./types.js";
+import '~/components/code';
+export declare class CurveOutput extends HTMLElement {
+    #private;
+    requestRender: () => void;
+    accessor easingType: EasingType;
+    accessor points: CubicBezierPoints | LinearPoints;
+    accessor name: string;
+    accessor variant: 'animation' | 'transition';
+    accessor simplify: number;
+    accessor round: number;
+    get timingFunction(): string;
+    get generatedCSS(): CSSCode;
+    get copyStatus(): string;
+    get isAnimating(): boolean;
+    readonly handleCopyClick: (event: Event) => void;
+    handlePreviewClick(event: Event): void;
+    disconnectedCallback(): void;
+}

package/build/components/curve/output.js

@@ -0,0 +1,137 @@
+import { html } from 'lit-html';
+import { outputStyles } from "./styles.js";
+import { EasingType } from "./types.js";
+import { generateCubicBezierCSS, generateLinearCSS } from "./utils.js";
+import { Component } from '~/decorators/Component';
+import { Prop } from '~/decorators/Prop';
+import '~/components/code';
+@Component({
+    tag: 'ease-curve-output',
+    styles: outputStyles,
+    template() {
+        return html `
+      <div class="output-container">
+        <div class="output-group">
+          <h4 class="output-label">CSS Easing Function</h4>
+          <ease-code language="css">${this.generatedCSS.code}</ease-code>
+          <button class="copy-button" @click=${this.handleCopyClick}>
+            ${this.copyStatus}
+          </button>
+        </div>
+      </div>
+    `;
+    }
+})
+export class CurveOutput extends HTMLElement {
+    @Prop({ type: String, reflect: true })
+    accessor easingType;
+    @Prop({ type: Object, reflect: false })
+    accessor points;
+    @Prop({ reflect: true, defaultValue: 'ease-custom' })
+    accessor name;
+    @Prop({ reflect: true, defaultValue: 'animation' })
+    accessor variant;
+    @Prop({ type: Number, reflect: true, defaultValue: 0 })
+    accessor simplify;
+    @Prop({ type: Number, reflect: true, defaultValue: 5 })
+    accessor round;
+    #copyTimeout = null;
+    #animationTimeout = null;
+    #isAnimating = false;
+    get timingFunction() {
+        const { timingFunction } = this.generatedCSS;
+        return timingFunction;
+    }
+    get generatedCSS() {
+        if (this.easingType === EasingType.CUBIC_BEZIER) {
+            if (!this.points || Array.isArray(this.points)) {
+                const timingFunction = 'cubic-bezier(0.25, 0.1, 0.25, 1)';
+                const code = `
+          .${this.name} {
+            ${this.variant}-timing-function: ${timingFunction};
+          }
+        `;
+                return { code, timingFunction };
+            }
+            return generateCubicBezierCSS(this.points, this.name, this.variant);
+        }
+        if (this.easingType === EasingType.LINEAR) {
+            if (Array.isArray(this.points)) {
+                return generateLinearCSS(this.points, this.name, this.variant, {
+                    simplify: this.simplify,
+                    round: this.round
+                });
+            }
+            const timingFunction = 'linear(0, 1)';
+            const code = `
+        .${this.name} {
+          ${this.variant}-timing-function: ${timingFunction};
+        }
+      `;
+            return { code, timingFunction };
+        }
+        const timingFunction = 'ease';
+        const code = `
+      .${this.name} {
+        ${this.variant}-timing-function: ${timingFunction};
+      }
+    `;
+        return { code, timingFunction };
+    }
+    get copyStatus() {
+        return this.#copyTimeout ? 'Copied!' : 'Copy CSS';
+    }
+    get isAnimating() {
+        return this.#isAnimating;
+    }
+    #copyToClipboard = async (event) => {
+        event.preventDefault();
+        try {
+            await navigator.clipboard.writeText(this.timingFunction);
+            if (this.#copyTimeout) {
+                clearTimeout(this.#copyTimeout);
+            }
+            this.#copyTimeout = window.setTimeout(() => {
+                this.#copyTimeout = null;
+                this.requestRender();
+            }, 2000);
+            this.requestRender();
+        }
+        catch (error) {
+            console.error('Failed to copy to clipboard:', error);
+        }
+    };
+    #playPreview = (event) => {
+        event.preventDefault();
+        if (this.#isAnimating) {
+            this.#isAnimating = false;
+            this.requestRender();
+            void this.offsetHeight;
+        }
+        if (this.#animationTimeout) {
+            clearTimeout(this.#animationTimeout);
+        }
+        this.#isAnimating = true;
+        this.requestRender();
+        this.#animationTimeout = window.setTimeout(() => {
+            this.#isAnimating = false;
+            this.requestRender();
+        }, 2000);
+    };
+    handleCopyClick = (event) => {
+        void this.#copyToClipboard(event);
+    };
+    handlePreviewClick(event) {
+        this.#playPreview(event);
+    }
+    disconnectedCallback() {
+        if (this.#copyTimeout) {
+            clearTimeout(this.#copyTimeout);
+            this.#copyTimeout = null;
+        }
+        if (this.#animationTimeout) {
+            clearTimeout(this.#animationTimeout);
+            this.#animationTimeout = null;
+        }
+    }
+}