@jsenv/dom 0.6.0 → 0.7.0

package/src/transition/transition_playback.js

@@ -1,366 +0,0 @@
-import { EASING } from "./easing.js";
-import {
-  addOnTimeline,
-  getTimelineCurrentTime,
-  removeFromTimeline,
-} from "./transition_timeline.js";
-
-// Default lifecycle methods that do nothing
-const LIFECYCLE_DEFAULT = {
-  setup: () => {},
-  pause: () => {},
-  cancel: () => {},
-  finish: () => {},
-  updateTarget: () => {},
-};
-
-export const createTransition = ({
-  constructor,
-  key,
-  from,
-  to,
-  lifecycle = LIFECYCLE_DEFAULT,
-  onUpdate,
-  minDiff,
-  ...rest
-} = {}) => {
-  const [updateCallbacks, executeUpdateCallbacks] = createCallbackController();
-  const [finishCallbacks, executeFinishCallbacks] = createCallbackController();
-  const channels = {
-    update: updateCallbacks,
-    finish: finishCallbacks,
-  };
-  if (onUpdate) {
-    updateCallbacks.add(onUpdate);
-  }
-
-  let playState = "idle"; // 'idle', 'running', 'paused', 'finished'
-  let isFirstUpdate = false;
-  let resume;
-  let executionLifecycle = null;
-
-  const start = () => {
-    isFirstUpdate = true;
-    playState = "running";
-
-    executionLifecycle = lifecycle.setup(transition);
-
-    // Allow setup to override from value if transition.from is undefined
-    if (
-      transition.from === undefined &&
-      executionLifecycle.from !== undefined
-    ) {
-      transition.from = executionLifecycle.from;
-    }
-
-    const diff = Math.abs(transition.to - transition.from);
-    if (diff === 0) {
-      console.warn(
-        `${constructor.name} transition has identical from and to values (${transition.from}). This transition will have no effect.`,
-      );
-    } else if (typeof minDiff === "number" && diff < minDiff) {
-      console.warn(
-        `${constructor.name} transition difference is very small (${diff}). Consider if this transition is necessary (minimum threshold: ${minDiff}).`,
-      );
-    }
-    transition.update(transition.value);
-  };
-
-  const transition = {
-    constructor,
-    key,
-    from,
-    to,
-    value: from,
-    timing: "",
-    channels,
-    get playState() {
-      return playState;
-    },
-
-    play: () => {
-      if (playState === "idle") {
-        transition.value = transition.from;
-        transition.timing = "";
-        start();
-        return;
-      }
-      if (playState === "running") {
-        console.warn("transition already running");
-        return;
-      }
-      if (playState === "paused") {
-        playState = "running";
-        resume();
-        return;
-      }
-      // "finished"
-      start();
-    },
-
-    update: (value, isLast) => {
-      if (playState === "idle") {
-        console.warn("Cannot update transition that is idle");
-        return;
-      }
-      if (playState === "finished") {
-        console.warn("Cannot update a finished transition");
-        return;
-      }
-
-      transition.value = value;
-      transition.timing = isLast ? "end" : isFirstUpdate ? "start" : "progress";
-      isFirstUpdate = false;
-      executionLifecycle.update(transition);
-      executeUpdateCallbacks(transition);
-    },
-
-    pause: () => {
-      if (playState === "paused") {
-        console.warn("transition already paused");
-        return;
-      }
-      if (playState === "finished") {
-        console.warn("Cannot pause a finished transition");
-        return;
-      }
-      playState = "paused";
-
-      // Let the transition handle its own pause logic
-      resume = lifecycle.pause(transition);
-    },
-
-    cancel: () => {
-      if (executionLifecycle) {
-        lifecycle.cancel(transition);
-        executionLifecycle.teardown();
-        executionLifecycle.restore();
-      }
-      resume = null;
-      playState = "idle";
-    },
-
-    finish: () => {
-      if (playState === "idle") {
-        console.warn("Cannot finish a transition that is idle");
-        return;
-      }
-      if (playState === "finished") {
-        console.warn("transition already finished");
-        return;
-      }
-      // "running" or "paused"
-      lifecycle.finish(transition);
-      executionLifecycle.teardown();
-      resume = null;
-      playState = "finished";
-      executeFinishCallbacks();
-    },
-
-    reverse: () => {
-      if (playState === "idle") {
-        console.warn("Cannot reverse a transition that is idle");
-        return;
-      }
-      if (playState === "finished") {
-        console.warn("Cannot reverse a finished transition");
-        return;
-      }
-
-      // Simply swap from and to values to reverse direction
-      const originalFrom = transition.from;
-      const originalTo = transition.to;
-
-      transition.from = originalTo;
-      transition.to = originalFrom;
-
-      // Let the transition handle its own reverse logic (if any)
-      if (lifecycle.reverse) {
-        lifecycle.reverse(transition);
-      }
-    },
-
-    updateTarget: (newTarget) => {
-      if (
-        typeof newTarget !== "number" ||
-        isNaN(newTarget) ||
-        !isFinite(newTarget)
-      ) {
-        throw new Error(
-          `updateTarget: newTarget must be a finite number, got ${newTarget}`,
-        );
-      }
-      if (playState === "idle") {
-        console.warn("Cannot update target of idle transition");
-        return;
-      }
-      if (playState === "finished") {
-        console.warn("Cannot update target of finished transition");
-        return;
-      }
-      const currentValue = transition.value;
-      transition.from = currentValue;
-      transition.to = newTarget;
-
-      // Let the transition handle its own target update logic
-      lifecycle.updateTarget(transition);
-    },
-
-    ...rest,
-  };
-
-  return transition;
-};
-
-// Timeline-managed transition that adds/removes itself from the animation timeline
-export const createTimelineTransition = ({
-  isVisual,
-  duration,
-  fps = 60,
-  easing = EASING.EASE_OUT,
-  lifecycle,
-  startProgress = 0, // Progress to start from (0-1)
-  ...options
-}) => {
-  if (typeof duration !== "number" || duration <= 0) {
-    throw new Error(
-      `Invalid duration: ${duration}. Duration must be a positive number.`,
-    );
-  }
-
-  let lastUpdateTime = -1;
-
-  const timeChangeCallback = () => {
-    const timelineCurrentTime = getTimelineCurrentTime();
-    const msElapsedSinceStart = timelineCurrentTime - transition.startTime;
-    const msRemaining = transition.duration - msElapsedSinceStart;
-
-    if (
-      // we reach the end, round progress to 1
-      msRemaining < 0 ||
-      // we are very close from the end, round progress to 1
-      msRemaining <= transition.frameDuration
-    ) {
-      transition.frameRemainingCount = 0;
-      transition.progress = 1;
-      transition.update(transition.to, true);
-      transition.finish();
-      return;
-    }
-    if (lastUpdateTime === -1) {
-      // First frame - always allow
-    } else {
-      const timeSinceLastUpdate = timelineCurrentTime - lastUpdateTime;
-      // Allow rendering if we're within 3ms of the target frame duration
-      // This prevents choppy animations when browser timing is slightly off
-      const frameTimeTolerance = 3; // ms
-      const targetFrameTime = transition.frameDuration - frameTimeTolerance;
-
-      // Skip update only if we're significantly early
-      if (timeSinceLastUpdate < targetFrameTime) {
-        return;
-      }
-    }
-    lastUpdateTime = timelineCurrentTime;
-    const rawProgress = Math.min(msElapsedSinceStart / transition.duration, 1);
-    // Apply start progress offset - transition runs from startProgress to 1
-    const progress = startProgress + rawProgress * (1 - startProgress);
-    transition.progress = progress;
-    const easedProgress = transition.easing(progress);
-    const value =
-      transition.from + (transition.to - transition.from) * easedProgress;
-    transition.frameRemainingCount = Math.ceil(
-      msRemaining / transition.frameDuration,
-    );
-    transition.update(value);
-  };
-  const onTimelineNeeded = () => {
-    addOnTimeline(timeChangeCallback, isVisual);
-  };
-  const onTimelineNotNeeded = () => {
-    removeFromTimeline(timeChangeCallback, isVisual);
-  };
-
-  const { setup } = lifecycle;
-  const transition = createTransition({
-    ...options,
-    startTime: null,
-    progress: startProgress, // Initialize with start progress
-    duration,
-    easing,
-    fps,
-    get frameDuration() {
-      return 1000 / fps;
-    },
-    frameRemainingCount: 0,
-    startProgress, // Store for calculations
-    lifecycle: {
-      ...lifecycle,
-      setup: (transition) => {
-        // Handle timeline management
-        lastUpdateTime = -1;
-        transition.startTime = getTimelineCurrentTime();
-        // Calculate remaining frames based on remaining progress
-        const remainingProgress = 1 - startProgress;
-        const remainingDuration = transition.duration * remainingProgress;
-        transition.frameRemainingCount = Math.ceil(
-          remainingDuration / transition.frameDuration,
-        );
-        onTimelineNeeded();
-        // Call the original setup
-        return setup(transition);
-      },
-      pause: (transition) => {
-        const pauseTime = getTimelineCurrentTime();
-        onTimelineNotNeeded();
-        return () => {
-          const pausedDuration = getTimelineCurrentTime() - pauseTime;
-          transition.startTime += pausedDuration;
-          // Only adjust lastUpdateTime if it was set (not -1)
-          if (lastUpdateTime !== -1) {
-            lastUpdateTime += pausedDuration;
-          }
-          onTimelineNeeded();
-        };
-      },
-      updateTarget: (transition) => {
-        transition.startTime = getTimelineCurrentTime();
-        // Don't reset lastUpdateTime - we want visual continuity for smooth target updates
-        // Recalculate remaining frames from current progress
-        const remainingProgress = 1 - transition.progress;
-        const remainingDuration = transition.duration * remainingProgress;
-        transition.frameRemainingCount = Math.ceil(
-          remainingDuration / transition.frameDuration,
-        );
-      },
-      cancel: () => {
-        onTimelineNotNeeded();
-      },
-      finish: () => {
-        onTimelineNotNeeded();
-      },
-    },
-  });
-  return transition;
-};
-
-const createCallbackController = () => {
-  const callbackSet = new Set();
-  const execute = (...args) => {
-    for (const callback of callbackSet) {
-      callback(...args);
-    }
-  };
-  const callbacks = {
-    add: (callback) => {
-      if (typeof callback !== "function") {
-        throw new TypeError("Callback must be a function");
-      }
-      callbackSet.add(callback);
-      return () => {
-        callbackSet.delete(callback);
-      };
-    },
-  };
-  return [callbacks, execute];
-};

package/src/transition/transition_timeline.js

@@ -1,79 +0,0 @@
-export const getTimelineCurrentTime = () => {
-  return document.timeline.currentTime;
-};
-
-const visualCallbackSet = new Set();
-const backgroundCallbackSet = new Set();
-export const addOnTimeline = (callback, isVisual) => {
-  if (isVisual) {
-    visualCallbackSet.add(callback);
-  } else {
-    backgroundCallbackSet.add(callback);
-  }
-};
-export const removeFromTimeline = (callback, isVisual) => {
-  if (isVisual) {
-    visualCallbackSet.delete(callback);
-  } else {
-    backgroundCallbackSet.delete(callback);
-  }
-};
-
-// We need setTimeout to animate things like volume because requestAnimationFrame would be killed when tab is not visible
-// while we might want to fadeout volumn when leaving the page for instance
-const createBackgroundUpdateLoop = () => {
-  let timeout;
-  const update = () => {
-    for (const backgroundCallback of backgroundCallbackSet) {
-      backgroundCallback();
-    }
-    timeout = setTimeout(update, 16); // roughly 60fps
-  };
-  return {
-    start: () => {
-      timeout = setTimeout(update, 16);
-    },
-    stop: () => {
-      clearTimeout(timeout);
-    },
-  };
-};
-// For visual things we use animation frame which is more performant and made for this
-const createAnimationFrameLoop = () => {
-  let animationFrame = null;
-  const update = () => {
-    for (const visualCallback of visualCallbackSet) {
-      visualCallback();
-    }
-    animationFrame = requestAnimationFrame(update);
-  };
-  return {
-    start: () => {
-      animationFrame = requestAnimationFrame(update);
-    },
-    stop: () => {
-      cancelAnimationFrame(animationFrame);
-    },
-  };
-};
-const backgroundUpdateLoop = createBackgroundUpdateLoop();
-const animationUpdateLoop = createAnimationFrameLoop();
-
-let timelineIsRunning = false;
-export const stopTimeline = () => {
-  if (!timelineIsRunning) {
-    return;
-  }
-  timelineIsRunning = false;
-  backgroundUpdateLoop.stop();
-  animationUpdateLoop.stop();
-};
-export const startTimeline = () => {
-  if (timelineIsRunning) {
-    return;
-  }
-  timelineIsRunning = true;
-  backgroundUpdateLoop.start();
-  animationUpdateLoop.start();
-};
-startTimeline();

package/src/traversal.js

@@ -1,247 +0,0 @@
-export const findAncestor = (node, predicate) => {
-  let ancestor = node.parentNode;
-  while (ancestor) {
-    if (predicate(ancestor)) {
-      return ancestor;
-    }
-    ancestor = ancestor.parentNode;
-  }
-  return null;
-};
-
-export const findDescendant = (rootNode, fn, { skipRoot } = {}) => {
-  const iterator = createNextNodeIterator(rootNode, rootNode, skipRoot);
-  let { done, value: node } = iterator.next();
-  while (done === false) {
-    let skipChildren = false;
-    if (node === skipRoot) {
-      skipChildren = true;
-    } else {
-      const skip = () => {
-        skipChildren = true;
-      };
-      if (fn(node, skip)) {
-        return node;
-      }
-    }
-    ({ done, value: node } = iterator.next(skipChildren));
-  }
-  return null;
-};
-
-export const findLastDescendant = (rootNode, fn, { skipRoot } = {}) => {
-  const deepestNode = getDeepestNode(rootNode, skipRoot);
-  if (deepestNode) {
-    const iterator = createPreviousNodeIterator(
-      deepestNode,
-      rootNode,
-      skipRoot,
-    );
-    let { done, value: node } = iterator.next();
-    while (done === false) {
-      if (fn(node)) {
-        return node;
-      }
-      ({ done, value: node } = iterator.next());
-    }
-  }
-  return null;
-};
-
-export const findAfter = (
-  from,
-  predicate,
-  { root = null, skipRoot = null, skipChildren = false } = {},
-) => {
-  const iterator = createAfterNodeIterator(from, root, skipChildren, skipRoot);
-  let { done, value: node } = iterator.next();
-  while (done === false) {
-    if (predicate(node)) {
-      return node;
-    }
-    ({ done, value: node } = iterator.next());
-  }
-  return null;
-};
-
-export const findBefore = (
-  from,
-  predicate,
-  { root = null, skipRoot = null } = {},
-) => {
-  const iterator = createPreviousNodeIterator(from, root, skipRoot);
-  let { done, value: node } = iterator.next();
-  while (done === false) {
-    if (predicate(node)) {
-      return node;
-    }
-    ({ done, value: node } = iterator.next());
-  }
-  return null;
-};
-
-const getNextNode = (node, rootNode, skipChild = false, skipRoot = null) => {
-  if (!skipChild) {
-    const firstChild = node.firstChild;
-    if (firstChild) {
-      // If the first child is skipRoot or inside skipRoot, skip it
-      if (
-        skipRoot &&
-        (firstChild === skipRoot || skipRoot.contains(firstChild))
-      ) {
-        // Skip this entire subtree by going to next sibling or up
-        return getNextNode(node, rootNode, true, skipRoot);
-      }
-      return firstChild;
-    }
-  }
-
-  const nextSibling = node.nextSibling;
-  if (nextSibling) {
-    // If next sibling is skipRoot, skip it entirely
-    if (skipRoot && nextSibling === skipRoot) {
-      return getNextNode(nextSibling, rootNode, true, skipRoot);
-    }
-    return nextSibling;
-  }
-
-  const parentNode = node.parentNode;
-  if (parentNode && parentNode !== rootNode) {
-    return getNextNode(parentNode, rootNode, true, skipRoot);
-  }
-
-  return null;
-};
-
-const createNextNodeIterator = (node, rootNode, skipRoot = null) => {
-  let current = node;
-  const next = (innerSkipChildren = false) => {
-    const nextNode = getNextNode(
-      current,
-      rootNode,
-      innerSkipChildren,
-      skipRoot,
-    );
-    current = nextNode;
-    return {
-      done: Boolean(nextNode) === false,
-      value: nextNode,
-    };
-  };
-  return { next };
-};
-
-const createAfterNodeIterator = (
-  fromNode,
-  rootNode,
-  skipChildren = false,
-  skipRoot = null,
-) => {
-  let current = fromNode;
-  let childrenSkipped = false;
-
-  // If we're inside skipRoot, we need to start searching after skipRoot entirely
-  if (skipRoot && (fromNode === skipRoot || skipRoot.contains(fromNode))) {
-    current = skipRoot;
-    childrenSkipped = true; // Mark that we've already "processed" this node
-    skipChildren = true; // Force skip children to exit the skipRoot subtree
-  }
-
-  const next = (innerSkipChildren = false) => {
-    const nextNode = getNextNode(
-      current,
-      rootNode,
-      (skipChildren && childrenSkipped === false) || innerSkipChildren,
-      skipRoot,
-    );
-    childrenSkipped = true;
-    current = nextNode;
-    return {
-      done: Boolean(nextNode) === false,
-      value: nextNode,
-    };
-  };
-  return { next };
-};
-
-const getDeepestNode = (node, skipRoot = null) => {
-  let deepestNode = node.lastChild;
-  while (deepestNode) {
-    // If we hit skipRoot or enter its subtree, stop going deeper
-    if (
-      skipRoot &&
-      (deepestNode === skipRoot || skipRoot.contains(deepestNode))
-    ) {
-      // Try the previous sibling instead
-      const previousSibling = deepestNode.previousSibling;
-      if (previousSibling) {
-        return getDeepestNode(previousSibling, skipRoot);
-      }
-      // If no previous sibling, return the parent (which should be safe)
-      return deepestNode.parentNode === node ? null : deepestNode.parentNode;
-    }
-
-    const lastChild = deepestNode.lastChild;
-    if (lastChild) {
-      deepestNode = lastChild;
-    } else {
-      break;
-    }
-  }
-  return deepestNode;
-};
-
-const getPreviousNode = (node, rootNode, skipRoot = null) => {
-  const previousSibling = node.previousSibling;
-  if (previousSibling) {
-    // If previous sibling is skipRoot, skip it entirely
-    if (skipRoot && previousSibling === skipRoot) {
-      return getPreviousNode(previousSibling, rootNode, skipRoot);
-    }
-
-    const deepestChild = getDeepestNode(previousSibling, skipRoot);
-
-    // Check if deepest child is inside skipRoot (shouldn't happen with updated getDeepestNode, but safe check)
-    if (
-      skipRoot &&
-      deepestChild &&
-      (deepestChild === skipRoot || skipRoot.contains(deepestChild))
-    ) {
-      // Skip this sibling entirely and try the next one
-      return getPreviousNode(previousSibling, rootNode, skipRoot);
-    }
-
-    if (deepestChild) {
-      return deepestChild;
-    }
-    return previousSibling;
-  }
-  if (node !== rootNode) {
-    const parentNode = node.parentNode;
-    if (parentNode && parentNode !== rootNode) {
-      return parentNode;
-    }
-  }
-  return null;
-};
-
-const createPreviousNodeIterator = (fromNode, rootNode, skipRoot = null) => {
-  let current = fromNode;
-
-  // If we're inside skipRoot, we need to start searching before skipRoot entirely
-  if (skipRoot && (fromNode === skipRoot || skipRoot.contains(fromNode))) {
-    current = skipRoot;
-  }
-
-  const next = () => {
-    const previousNode = getPreviousNode(current, rootNode, skipRoot);
-    current = previousNode;
-    return {
-      done: Boolean(previousNode) === false,
-      value: previousNode,
-    };
-  };
-  return {
-    next,
-  };
-};