@easemate/web-kit 0.1.0

package/build/components/curve/canvas-controls.js

@@ -0,0 +1,296 @@
+import { html } from 'lit-html';
+import { DEFAULT_HANDLE_LENGTH } from "./constants.js";
+import { canvasControlsStyles } from "./styles.js";
+import { EasingType } from "./types.js";
+import { normalizeLinearPoints, normalizeVector, vectorLength } from "./utils.js";
+import { Component } from '~/decorators/Component';
+import { Prop } from '~/decorators/Prop';
+import { dispatchControlEvent } from '~/elements/shared';
+const HOST_HANDLER_MAP = {
+    'points-change': 'handlePointsChange',
+    'linear-point-focus': 'handleLinearPointFocus'
+};
+@Component({
+    tag: 'ease-curve-canvas-controls',
+    styles: canvasControlsStyles,
+    template() {
+        if (this.easingType !== EasingType.LINEAR || !Array.isArray(this.points)) {
+            return null;
+        }
+        const focusedIndex = this.focusedLinearIndex;
+        if (focusedIndex === null) {
+            return null;
+        }
+        const points = this.points;
+        const selectedPoint = points[focusedIndex];
+        if (!selectedPoint) {
+            return null;
+        }
+        const isInnerPoint = focusedIndex > 0 && focusedIndex < points.length - 1;
+        if (!isInnerPoint) {
+            return null;
+        }
+        const hasInHandle = selectedPoint.cpInX !== undefined || selectedPoint.cpInY !== undefined;
+        const hasOutHandle = selectedPoint.cpOutX !== undefined || selectedPoint.cpOutY !== undefined;
+        const hasAnyHandle = hasInHandle || hasOutHandle;
+        return html `
+      <div class="overlay-controls">
+        <button
+          type="button"
+          class="overlay-button ${selectedPoint.isLinked ? 'active' : 'inactive'}"
+          @click=${this.handleToggleMirrorAngle}
+        >
+          <ease-icon-bezier-angle></ease-icon-bezier-angle>
+        </button>
+        <button
+          type="button"
+          class="overlay-button ${selectedPoint.mirrorLength !== false && selectedPoint.isLinked ? 'active' : 'inactive'}"
+          @click=${this.handleToggleMirrorLength}
+          ?disabled=${!selectedPoint.isLinked}
+        >
+          <ease-icon-bezier-length></ease-icon-bezier-length>
+        </button>
+        ${hasAnyHandle
+            ? html `
+            <button
+              type="button"
+              class="overlay-button"
+              @click=${this.handleRemoveSmoothing}
+            >
+              <ease-icon-bezier></ease-icon-bezier>
+            </button>
+          `
+            : html `
+            <button
+              type="button"
+              class="overlay-button"
+              @click=${this.handleAddSmoothing}
+            >
+              <ease-icon-bezier-mirror></ease-icon-bezier-mirror>
+            </button>
+          `}
+      </div>
+    `;
+    }
+})
+export class CanvasControls extends HTMLElement {
+    @Prop({ reflect: true })
+    accessor easingType;
+    @Prop({ type: Object, reflect: false })
+    accessor points;
+    @Prop({ type: Number, reflect: false, defaultValue: null })
+    accessor focusedLinearIndex = null;
+    #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);
+    };
+    handleToggleMirrorAngle = (event) => {
+        event.preventDefault();
+        const points = this.#getLinearPoints();
+        if (!points) {
+            return;
+        }
+        const index = this.focusedLinearIndex;
+        if (index === null) {
+            return;
+        }
+        const point = points[index];
+        if (!point) {
+            return;
+        }
+        const updatedPoints = [...points];
+        const updatedPoint = { ...point };
+        updatedPoints[index] = updatedPoint;
+        const nextState = !updatedPoint.isLinked;
+        if (nextState) {
+            this.#ensureSmoothHandles(updatedPoint, index, points);
+            updatedPoint.mirrorLength = true;
+            this.#alignMirrorLength(updatedPoint);
+        }
+        else {
+            updatedPoint.mirrorLength = false;
+        }
+        updatedPoint.isLinked = nextState;
+        const normalizedPoints = normalizeLinearPoints(updatedPoints);
+        this.#emitPoints(normalizedPoints, event);
+        this.focusedLinearIndex = index;
+        this.#notifyHost('linear-point-focus', index, event);
+    };
+    handleToggleMirrorLength = (event) => {
+        event.preventDefault();
+        const points = this.#getLinearPoints();
+        if (!points) {
+            return;
+        }
+        const index = this.focusedLinearIndex;
+        if (index === null) {
+            return;
+        }
+        const point = points[index];
+        if (!point || !point.isLinked) {
+            return;
+        }
+        const updatedPoints = [...points];
+        const updatedPoint = { ...point };
+        updatedPoints[index] = updatedPoint;
+        const nextState = updatedPoint.mirrorLength === false;
+        updatedPoint.mirrorLength = nextState;
+        if (nextState) {
+            this.#ensureSmoothHandles(updatedPoint, index, points);
+            this.#alignMirrorLength(updatedPoint);
+        }
+        const normalizedPoints = normalizeLinearPoints(updatedPoints);
+        this.#emitPoints(normalizedPoints, event);
+        this.focusedLinearIndex = index;
+        this.#notifyHost('linear-point-focus', index, event);
+    };
+    handleRemoveSmoothing = (event) => {
+        event.preventDefault();
+        const points = this.#getLinearPoints();
+        if (!points) {
+            return;
+        }
+        const index = this.focusedLinearIndex;
+        if (index === null) {
+            return;
+        }
+        const existingPoint = points[index];
+        if (!existingPoint) {
+            return;
+        }
+        const updatedPoints = [...points];
+        const updatedPoint = { ...existingPoint };
+        updatedPoints[index] = updatedPoint;
+        delete updatedPoint.cpInX;
+        delete updatedPoint.cpInY;
+        delete updatedPoint.cpOutX;
+        delete updatedPoint.cpOutY;
+        delete updatedPoint.isLinked;
+        delete updatedPoint.mirrorLength;
+        const normalizedPoints = normalizeLinearPoints(updatedPoints);
+        this.#emitPoints(normalizedPoints, event);
+        this.focusedLinearIndex = index;
+        this.#notifyHost('linear-point-focus', index, event);
+    };
+    handleAddSmoothing = (event) => {
+        event.preventDefault();
+        const points = this.#getLinearPoints();
+        if (!points) {
+            return;
+        }
+        const index = this.focusedLinearIndex;
+        if (index === null) {
+            return;
+        }
+        const point = points[index];
+        if (!point) {
+            return;
+        }
+        const updatedPoints = [...points];
+        const updatedPoint = { ...point };
+        updatedPoints[index] = updatedPoint;
+        this.#ensureSmoothHandles(updatedPoint, index, points);
+        updatedPoint.isLinked = true;
+        updatedPoint.mirrorLength = true;
+        this.#alignMirrorLength(updatedPoint);
+        const normalizedPoints = normalizeLinearPoints(updatedPoints);
+        this.#emitPoints(normalizedPoints, event);
+        this.focusedLinearIndex = index;
+        this.#notifyHost('linear-point-focus', index, event);
+    };
+    #ensureSmoothHandles(point, index, points) {
+        const prev = points[index - 1];
+        const next = points[index + 1];
+        let refDx = point.cpOutX ?? -(point.cpInX ?? 0);
+        let refDy = point.cpOutY ?? -(point.cpInY ?? 0);
+        if (refDx === 0 && refDy === 0) {
+            let dirX = 0;
+            let dirY = 0;
+            if (prev && next) {
+                dirX = next.x - prev.x;
+                dirY = next.y - prev.y;
+            }
+            else if (next) {
+                dirX = next.x - point.x;
+                dirY = next.y - point.y;
+            }
+            else if (prev) {
+                dirX = point.x - prev.x;
+                dirY = point.y - prev.y;
+            }
+            else {
+                dirX = 1;
+                dirY = 0;
+            }
+            const direction = normalizeVector(dirX, dirY);
+            const length = DEFAULT_HANDLE_LENGTH;
+            point.cpInX = -direction.dx * length;
+            point.cpInY = -direction.dy * length;
+            point.cpOutX = direction.dx * length;
+            point.cpOutY = direction.dy * length;
+            refDx = point.cpOutX;
+            refDy = point.cpOutY;
+        }
+        if (refDx === 0 && refDy === 0) {
+            return;
+        }
+        const normalized = normalizeVector(refDx, refDy);
+        const referenceLength = vectorLength(refDx, refDy);
+        const inLength = vectorLength(point.cpInX ?? 0, point.cpInY ?? 0) || referenceLength;
+        point.cpInX = -normalized.dx * inLength;
+        point.cpInY = -normalized.dy * inLength;
+        const outLength = vectorLength(point.cpOutX ?? 0, point.cpOutY ?? 0) || referenceLength;
+        point.cpOutX = normalized.dx * outLength;
+        point.cpOutY = normalized.dy * outLength;
+    }
+    #alignMirrorLength(point) {
+        if (!point.isLinked) {
+            point.mirrorLength = false;
+            return;
+        }
+        const outLength = vectorLength(point.cpOutX ?? 0, point.cpOutY ?? 0);
+        const inLength = vectorLength(point.cpInX ?? 0, point.cpInY ?? 0);
+        const targetLength = Math.max(outLength, inLength);
+        if (targetLength <= 0) {
+            return;
+        }
+        if (outLength > 0) {
+            const outDirection = normalizeVector(point.cpOutX ?? 0, point.cpOutY ?? 0);
+            point.cpOutX = outDirection.dx * targetLength;
+            point.cpOutY = outDirection.dy * targetLength;
+        }
+        else if (inLength > 0) {
+            const inDirection = normalizeVector(point.cpInX ?? 0, point.cpInY ?? 0);
+            point.cpOutX = -inDirection.dx * targetLength;
+            point.cpOutY = -inDirection.dy * targetLength;
+        }
+        if (inLength > 0) {
+            const inDirection = normalizeVector(point.cpInX ?? 0, point.cpInY ?? 0);
+            point.cpInX = inDirection.dx * targetLength;
+            point.cpInY = inDirection.dy * targetLength;
+        }
+        else if (outLength > 0) {
+            const outDirection = normalizeVector(point.cpOutX ?? 0, point.cpOutY ?? 0);
+            point.cpInX = -outDirection.dx * targetLength;
+            point.cpInY = -outDirection.dy * targetLength;
+        }
+    }
+}