@easemate/web-kit 0.1.5 → 0.3.0

package/build/components/curve/toolbar.js

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

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

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

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

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