@easemate/web-kit 0.1.0

package/build/components/curve/toolbar.js

@@ -0,0 +1,364 @@
+import { html } from 'lit-html';
+import { toolbarStyles } from "./styles.js";
+import { EasingType, MAX_LINEAR_POINTS, MIN_LINEAR_POINTS } from "./types.js";
+import { clampPoint, normalizeLinearPoints } from "./utils.js";
+import { Component } from '~/decorators/Component';
+import { Prop } from '~/decorators/Prop';
+import { dispatchControlEvent } from '~/elements/shared';
+import '~/elements/icons/interface/minus';
+import '~/elements/icons/interface/plus';
+import '~/elements/button';
+import '~/elements/tooltip';
+const HOST_HANDLER_MAP = {
+    'grid-toggle': 'handleGridToggle',
+    'snap-toggle': 'handleSnapToggle',
+    'grid-size-change': 'handleGridSizeChange',
+    'points-change': 'handlePointsChange',
+    'linear-point-focus': 'handleLinearPointFocus',
+    'simplify-change': 'handleSimplifyChange',
+    'round-change': 'handleRoundChange'
+};
+@Component({
+    tag: 'ease-curve-toolbar',
+    styles: toolbarStyles,
+    template() {
+        const isGridAtMinimum = this.gridSize <= 1;
+        const isGridAtMaximum = this.gridSize >= 24;
+        const isLinear = this.easingType === EasingType.LINEAR;
+        const points = isLinear && Array.isArray(this.points) ? this.points : null;
+        return html `
+      <div class="toolbar-container">
+        <div class="toolbar-group">
+
+          <ease-tooltip placement="top-center">
+            <button
+              type="button"
+              class="toolbar-button ${this.showGrid ? 'active' : ''}"
+              @click=${this.toggleGrid}
+              slot="trigger"
+            >
+              <ease-icon-grid state=${this.showGrid ? 'hide' : 'show'}></ease-icon-grid>
+            </button>
+            Toggle Grid
+          </ease-tooltip>
+
+          <ease-tooltip placement="top-center">
+            <button
+              type="button"
+              class="toolbar-button ${this.snapToGrid ? 'active' : ''}"
+              @click=${this.toggleSnapToGrid}
+              slot="trigger"
+            >
+              <ease-icon-snap state=${this.snapToGrid ? 'active' : 'default'}></ease-icon-snap>
+            </button>
+            Snap to Grid
+          </ease-tooltip>
+
+          <ease-tooltip placement="top-center">
+            <button
+              type="button"
+              class="toolbar-button"
+              @click=${this.resetCurve}
+              slot="trigger"
+            >
+              <ease-icon-clear></ease-icon-clear>
+            </button>
+            Reset Curve
+          </ease-tooltip>
+
+          <ease-tooltip placement="top-center">
+            <button
+              type="button"
+              class="toolbar-button"
+              @click=${this.addLinearPoint}
+              ?disabled=${(points && points.length >= MAX_LINEAR_POINTS) || !isLinear}
+              slot="trigger"
+            >
+              <ease-icon-anchor-add></ease-icon-anchor-add>
+            </button>
+            Add Point
+          </ease-tooltip>
+
+          <ease-tooltip placement="top-center">
+            <button
+              type="button"
+              class="toolbar-button"
+              @click=${this.removeLinearPoint}
+              ?disabled=${(points && points.length <= MIN_LINEAR_POINTS) || !isLinear}
+              slot="trigger"
+            >
+              <ease-icon-anchor-remove></ease-icon-anchor-remove>
+            </button>
+            Remove Point
+          </ease-tooltip>
+
+          <ease-tooltip placement="top-center">
+            <button
+              type="button"
+              class="toolbar-button"
+              @click=${this.distributeLinearPoints}
+              ?disabled=${!isLinear}
+              slot="trigger"
+            >
+              <ease-icon-bezier-distribute></ease-icon-bezier-distribute>
+            </button>
+            Distribute Points
+          </ease-tooltip>
+
+          <div class="grid-size-controls">
+            <ease-button
+              class="grid-size-button minus"
+              type="button"
+              block="icon"
+              pill="true"
+              variant="headless"
+              @click=${this.decrementGridSize}
+              ?disabled=${isGridAtMinimum}
+            >
+              <ease-icon-minus></ease-icon-minus>
+            </ease-button>
+            <div class="grid-size-value">
+              ${this.gridSize}x
+            </div>
+            <ease-button
+              class="grid-size-button plus"
+              type="button"
+              block="icon"
+              pill="true"
+              variant="headless"
+              @click=${this.incrementGridSize}
+              ?disabled=${isGridAtMaximum}
+            >
+              <ease-icon-plus></ease-icon-plus>
+            </ease-button>
+          </div>
+        </div>
+
+        <ease-field label="Simplify">
+          <ease-slider .value=${this.simplify} .min=${0} .max=${0.05} .step=${0.001} @input=${this.handleSimplifyInput}></ease-slider>
+        </ease-field>
+
+        <ease-field label="Round">
+          <ease-slider .value=${this.round} .min=${0} .max=${5} .step=${1} @input=${this.handleRoundInput}></ease-slider>
+        </ease-field>
+
+      </div>
+    `;
+    }
+})
+export class CurveToolbar extends HTMLElement {
+    @Prop({ reflect: true })
+    accessor easingType;
+    @Prop({ type: Object, reflect: false })
+    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 = 8;
+    @Prop({ type: Number, reflect: true, defaultValue: 0 })
+    accessor simplify = 0;
+    @Prop({ type: Number, reflect: true, defaultValue: 5 })
+    accessor round = 5;
+    #getEventTarget = () => {
+        const root = this.getRootNode();
+        if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
+            return root.host;
+        }
+        return this;
+    };
+    #getLinearPoints = () => {
+        if (!Array.isArray(this.points)) {
+            return null;
+        }
+        return this.points;
+    };
+    #notifyHost = (type, value, event) => {
+        const target = this.#getEventTarget();
+        const detail = { value, event };
+        dispatchControlEvent(target, type, detail);
+    };
+    #emitPoints = (points, event) => {
+        this.points = points;
+        this.#notifyHost('points-change', points, event);
+    };
+    toggleGrid = (event) => {
+        event.preventDefault();
+        const nextValue = !this.showGrid;
+        this.showGrid = nextValue;
+        this.#notifyHost('grid-toggle', nextValue, event);
+    };
+    toggleSnapToGrid = (event) => {
+        event.preventDefault();
+        const nextValue = !this.snapToGrid;
+        this.snapToGrid = nextValue;
+        this.#notifyHost('snap-toggle', nextValue, event);
+    };
+    resetCurve = (event) => {
+        event.preventDefault();
+        if (this.easingType === EasingType.CUBIC_BEZIER) {
+            const defaults = {
+                p1: { x: 0.25, y: 0.1 },
+                p2: { x: 0.25, y: 1 }
+            };
+            this.points = defaults;
+            this.#notifyHost('points-change', defaults, event);
+            return;
+        }
+        const defaults = [
+            { x: 0, y: 0 },
+            { x: 1, y: 1 }
+        ];
+        this.points = defaults;
+        this.#notifyHost('points-change', defaults, event);
+        this.#notifyHost('linear-point-focus', null, event);
+    };
+    distributeLinearPoints = (event) => {
+        event.preventDefault();
+        const points = this.#getLinearPoints();
+        if (!points || points.length <= MIN_LINEAR_POINTS) {
+            return;
+        }
+        const lastIndex = points.length - 1;
+        const step = lastIndex > 0 ? 1 / lastIndex : 0;
+        const distributed = points.map((point, index) => {
+            const updated = { ...point };
+            if (index === 0) {
+                updated.x = 0;
+            }
+            else if (index === lastIndex) {
+                updated.x = 1;
+            }
+            else {
+                updated.x = Number.parseFloat((step * index).toFixed(4));
+            }
+            delete updated.cpInX;
+            delete updated.cpInY;
+            delete updated.cpOutX;
+            delete updated.cpOutY;
+            delete updated.isLinked;
+            return updated;
+        });
+        const normalizedPoints = normalizeLinearPoints(distributed);
+        this.#emitPoints(normalizedPoints, event);
+    };
+    addLinearPoint = (event) => {
+        event.preventDefault();
+        if (this.easingType !== EasingType.LINEAR) {
+            return;
+        }
+        const points = this.#getLinearPoints();
+        if (!points || points.length >= MAX_LINEAR_POINTS) {
+            return;
+        }
+        let insertIndex = 0;
+        let largestGap = -Infinity;
+        for (let index = 0; index < points.length - 1; index += 1) {
+            const start = points[index];
+            const end = points[index + 1];
+            if (!start || !end) {
+                continue;
+            }
+            const gap = end.x - start.x;
+            if (gap > largestGap) {
+                largestGap = gap;
+                insertIndex = index;
+            }
+        }
+        const startPoint = points[insertIndex];
+        const endPoint = points[insertIndex + 1];
+        if (!startPoint || !endPoint) {
+            return;
+        }
+        const newPointPosition = clampPoint({
+            x: (startPoint.x + endPoint.x) / 2,
+            y: (startPoint.y + endPoint.y) / 2
+        }, { minY: -2, maxY: 3 });
+        const newPoint = {
+            x: newPointPosition.x,
+            y: newPointPosition.y,
+            cpInX: -0.1,
+            cpInY: 0,
+            cpOutX: 0.1,
+            cpOutY: 0,
+            isLinked: true,
+            mirrorLength: true
+        };
+        const updatedPoints = [
+            ...points.slice(0, insertIndex + 1),
+            newPoint,
+            ...points.slice(insertIndex + 1)
+        ];
+        const insertedIndex = insertIndex + 1;
+        const normalizedPoints = normalizeLinearPoints(updatedPoints);
+        this.#emitPoints(normalizedPoints, event);
+        this.#notifyHost('linear-point-focus', insertedIndex, event);
+    };
+    removeLinearPoint = (event) => {
+        event.preventDefault();
+        if (this.easingType !== EasingType.LINEAR) {
+            return;
+        }
+        const points = this.#getLinearPoints();
+        if (!points || points.length <= MIN_LINEAR_POINTS) {
+            return;
+        }
+        let removeIndex = 1;
+        let smallestSpan = Number.POSITIVE_INFINITY;
+        for (let index = 1; index < points.length - 1; index += 1) {
+            const previous = points[index - 1];
+            const next = points[index + 1];
+            if (!previous || !next) {
+                continue;
+            }
+            const span = next.x - previous.x;
+            if (span < smallestSpan) {
+                smallestSpan = span;
+                removeIndex = index;
+            }
+        }
+        if (removeIndex > 0 && removeIndex < points.length - 1) {
+            const updatedPoints = points
+                .filter((_, pointIndex) => pointIndex !== removeIndex)
+                .map((point) => {
+                return { ...point };
+            });
+            const normalizedPoints = normalizeLinearPoints(updatedPoints);
+            this.#emitPoints(normalizedPoints, event);
+            const nextIndex = removeIndex - 1;
+            this.#notifyHost('linear-point-focus', nextIndex, event);
+        }
+    };
+    incrementGridSize = (event) => {
+        event.preventDefault();
+        this.#commitGridSize(this.gridSize + 1, event);
+    };
+    decrementGridSize = (event) => {
+        event.preventDefault();
+        this.#commitGridSize(this.gridSize - 1, event);
+    };
+    handleSimplifyInput = (event) => {
+        const customEvent = event;
+        const value = customEvent.detail?.value ?? 0;
+        this.simplify = Number(value);
+        this.#notifyHost('simplify-change', this.simplify, event);
+    };
+    handleRoundInput = (event) => {
+        const customEvent = event;
+        const value = customEvent.detail?.value ?? 0;
+        this.round = Number(value);
+        this.#notifyHost('round-change', this.round, event);
+    };
+    #clampGridSize = (value) => Math.max(1, Math.min(24, Math.round(value)));
+    #commitGridSize = (value, event) => {
+        const nextValue = this.#clampGridSize(value);
+        if (this.gridSize === nextValue) {
+            this.requestRender();
+            return;
+        }
+        this.gridSize = nextValue;
+        this.#notifyHost('grid-size-change', this.gridSize, event);
+        this.requestRender();
+    };
+}

package/build/components/curve/types.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAX_LINEAR_POINTS = exports.MIN_LINEAR_POINTS = exports.EasingType = void 0;
+var EasingType;
+(function (EasingType) {
+    EasingType["CUBIC_BEZIER"] = "cubic-bezier";
+    EasingType["LINEAR"] = "linear";
+})(EasingType || (exports.EasingType = EasingType = {}));
+exports.MIN_LINEAR_POINTS = 2;
+exports.MAX_LINEAR_POINTS = 30;

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

@@ -0,0 +1,33 @@
+export declare enum EasingType {
+    CUBIC_BEZIER = "cubic-bezier",
+    LINEAR = "linear"
+}
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface CSSCode {
+    code: string;
+    timingFunction: string;
+}
+export interface LinearPoint extends Point {
+    cpInX?: number;
+    cpInY?: number;
+    cpOutX?: number;
+    cpOutY?: number;
+    isLinked?: boolean;
+    mirrorLength?: boolean;
+    id?: string;
+}
+export interface CubicBezierPoints {
+    p1: Point;
+    p2: Point;
+}
+export type LinearPoints = LinearPoint[];
+export interface EasingData {
+    type: EasingType;
+    points: CubicBezierPoints | LinearPoints;
+    name: string;
+}
+export declare const MIN_LINEAR_POINTS = 2;
+export declare const MAX_LINEAR_POINTS = 30;

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

@@ -0,0 +1,33 @@
+export declare enum EasingType {
+    CUBIC_BEZIER = "cubic-bezier",
+    LINEAR = "linear"
+}
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface CSSCode {
+    code: string;
+    timingFunction: string;
+}
+export interface LinearPoint extends Point {
+    cpInX?: number;
+    cpInY?: number;
+    cpOutX?: number;
+    cpOutY?: number;
+    isLinked?: boolean;
+    mirrorLength?: boolean;
+    id?: string;
+}
+export interface CubicBezierPoints {
+    p1: Point;
+    p2: Point;
+}
+export type LinearPoints = LinearPoint[];
+export interface EasingData {
+    type: EasingType;
+    points: CubicBezierPoints | LinearPoints;
+    name: string;
+}
+export declare const MIN_LINEAR_POINTS = 2;
+export declare const MAX_LINEAR_POINTS = 30;

package/build/components/curve/types.js

@@ -0,0 +1,7 @@
+export var EasingType;
+(function (EasingType) {
+    EasingType["CUBIC_BEZIER"] = "cubic-bezier";
+    EasingType["LINEAR"] = "linear";
+})(EasingType || (EasingType = {}));
+export const MIN_LINEAR_POINTS = 2;
+export const MAX_LINEAR_POINTS = 30;