locusing 0.1.0 → 0.1.1

package/dist/chunk-Y4M467JV.mjs

@@ -0,0 +1,607 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/animate/animations/transform.ts
+import { gsap as gsap2 } from "gsap";
+
+// src/animate/timeline.ts
+import { gsap } from "gsap";
+var Timeline = class {
+  constructor(options = {}) {
+    this._status = "pending";
+    this.timeline = gsap.timeline({
+      paused: true,
+      onStart: () => {
+        var _a;
+        this._status = "running";
+        (_a = options.onStart) == null ? void 0 : _a.call(options);
+      },
+      onComplete: () => {
+        var _a;
+        this._status = "completed";
+        (_a = options.onComplete) == null ? void 0 : _a.call(options);
+      },
+      onUpdate: () => {
+        var _a;
+        (_a = options.onUpdate) == null ? void 0 : _a.call(options, this.progress);
+      }
+    });
+  }
+  /** 当前状态 */
+  get status() {
+    return this._status;
+  }
+  /** 当前进度 (0-1) */
+  get progress() {
+    return this.timeline.progress();
+  }
+  /** 总时长 */
+  get duration() {
+    return this.timeline.duration();
+  }
+  /** 当前时间 */
+  get time() {
+    return this.timeline.time();
+  }
+  /**
+   * 添加动画到时间线
+   */
+  add(target, vars, position) {
+    this.timeline.to(target, vars, position);
+    return this;
+  }
+  /**
+   * 添加回调函数
+   */
+  call(callback, position) {
+    this.timeline.call(callback, void 0, position);
+    return this;
+  }
+  /**
+   * 添加延迟
+   */
+  delay(seconds, position) {
+    this.timeline.to({}, { duration: seconds }, position);
+    return this;
+  }
+  /**
+   * 添加标签
+   */
+  label(name, position) {
+    this.timeline.addLabel(name, position);
+    return this;
+  }
+  /**
+   * 播放
+   */
+  play() {
+    this._status = "running";
+    this.timeline.play();
+    return this;
+  }
+  /**
+   * 暂停
+   */
+  pause() {
+    this._status = "paused";
+    this.timeline.pause();
+    return this;
+  }
+  /**
+   * 恢复
+   */
+  resume() {
+    this._status = "running";
+    this.timeline.resume();
+    return this;
+  }
+  /**
+   * 停止并重置
+   */
+  restart() {
+    this._status = "pending";
+    this.timeline.restart();
+    return this;
+  }
+  /**
+   * 跳转到指定时间
+   */
+  seek(time) {
+    this.timeline.seek(time);
+    return this;
+  }
+  /**
+   * 设置进度
+   */
+  setProgress(progress) {
+    this.timeline.progress(progress);
+    return this;
+  }
+  /**
+   * 设置速度
+   */
+  setSpeed(speed) {
+    this.timeline.timeScale(speed);
+    return this;
+  }
+  /**
+   * 反向播放
+   */
+  reverse() {
+    this.timeline.reverse();
+    return this;
+  }
+  /**
+   * 销毁
+   */
+  kill() {
+    this.timeline.kill();
+  }
+  /**
+   * 等待完成
+   */
+  async finished() {
+    return new Promise((resolve) => {
+      this.timeline.eventCallback("onComplete", resolve);
+    });
+  }
+};
+function createTimeline(options) {
+  return new Timeline(options);
+}
+var easingMap = {
+  linear: "none",
+  easeIn: "power2.in",
+  easeOut: "power2.out",
+  easeInOut: "power2.inOut",
+  easeInQuad: "power1.in",
+  easeOutQuad: "power1.out",
+  easeInOutQuad: "power1.inOut",
+  easeInCubic: "power2.in",
+  easeOutCubic: "power2.out",
+  easeInOutCubic: "power2.inOut",
+  easeInQuart: "power3.in",
+  easeOutQuart: "power3.out",
+  easeInOutQuart: "power3.inOut",
+  easeInQuint: "power4.in",
+  easeOutQuint: "power4.out",
+  easeInOutQuint: "power4.inOut",
+  easeInSine: "sine.in",
+  easeOutSine: "sine.out",
+  easeInOutSine: "sine.inOut",
+  easeInExpo: "expo.in",
+  easeOutExpo: "expo.out",
+  easeInOutExpo: "expo.inOut",
+  easeInCirc: "circ.in",
+  easeOutCirc: "circ.out",
+  easeInOutCirc: "circ.inOut",
+  easeInBack: "back.in",
+  easeOutBack: "back.out",
+  easeInOutBack: "back.inOut",
+  easeInElastic: "elastic.in",
+  easeOutElastic: "elastic.out",
+  easeInOutElastic: "elastic.inOut",
+  easeInBounce: "bounce.in",
+  easeOutBounce: "bounce.out",
+  easeInOutBounce: "bounce.inOut"
+};
+function getGSAPEasing(easing) {
+  return easingMap[easing] || easing;
+}
+
+// src/animate/animations/utils.ts
+function querySelectorAllIncludingSelf(element, selector) {
+  const results = Array.from(element.querySelectorAll(selector));
+  if (element.matches(selector)) {
+    results.unshift(element);
+  }
+  return results;
+}
+
+// src/animate/animations/transform.ts
+function Transform(source, target, options = {}) {
+  const { duration = 1, easing = "easeInOut", delay = 0 } = options;
+  return {
+    duration,
+    target: source,
+    execute(scene, timeline, startTime) {
+      var _a, _b;
+      const sourceElement = scene.getElement(source);
+      const targetElement = scene.getOrCreateElement(target);
+      if (!sourceElement || !targetElement) return;
+      gsap2.set(targetElement, { opacity: 0 });
+      const sourceBBox = ((_a = sourceElement.getBBox) == null ? void 0 : _a.call(sourceElement)) || { x: 0, y: 0, width: 0, height: 0 };
+      const targetBBox = ((_b = targetElement.getBBox) == null ? void 0 : _b.call(targetElement)) || { x: 0, y: 0, width: 0, height: 0 };
+      const scaleX = targetBBox.width / (sourceBBox.width || 1);
+      const scaleY = targetBBox.height / (sourceBBox.height || 1);
+      const translateX = targetBBox.x + targetBBox.width / 2 - (sourceBBox.x + sourceBBox.width / 2);
+      const translateY = targetBBox.y + targetBBox.height / 2 - (sourceBBox.y + sourceBBox.height / 2);
+      const originX = sourceBBox.x + sourceBBox.width / 2;
+      const originY = sourceBBox.y + sourceBBox.height / 2;
+      gsap2.set(sourceElement, {
+        transformOrigin: `${originX}px ${originY}px`
+      });
+      timeline.add(sourceElement, {
+        scaleX,
+        scaleY,
+        x: translateX,
+        y: translateY,
+        duration,
+        ease: getGSAPEasing(easing),
+        delay,
+        onComplete: () => {
+          sourceElement.remove();
+          gsap2.set(targetElement, { opacity: 1 });
+        }
+      }, startTime);
+    }
+  };
+}
+function ReplacementTransform(source, target, options = {}) {
+  const { duration = 1, easing = "easeInOut", delay = 0, replace = true } = options;
+  return {
+    duration,
+    target: source,
+    execute(scene, timeline, startTime) {
+      var _a, _b;
+      const sourceElement = scene.getElement(source);
+      const targetElement = scene.getOrCreateElement(target);
+      if (!sourceElement || !targetElement) return;
+      gsap2.set(targetElement, { opacity: 0, visibility: "hidden" });
+      const sourceBBox = ((_a = sourceElement.getBBox) == null ? void 0 : _a.call(sourceElement)) || { x: 0, y: 0, width: 0, height: 0 };
+      const targetBBox = ((_b = targetElement.getBBox) == null ? void 0 : _b.call(targetElement)) || { x: 0, y: 0, width: 0, height: 0 };
+      const scaleX = targetBBox.width / (sourceBBox.width || 1);
+      const scaleY = targetBBox.height / (sourceBBox.height || 1);
+      const sourceCenterX = sourceBBox.x + sourceBBox.width / 2;
+      const sourceCenterY = sourceBBox.y + sourceBBox.height / 2;
+      const targetCenterX = targetBBox.x + targetBBox.width / 2;
+      const targetCenterY = targetBBox.y + targetBBox.height / 2;
+      timeline.add(sourceElement, {
+        transformOrigin: `${sourceCenterX}px ${sourceCenterY}px`,
+        scaleX,
+        scaleY,
+        x: targetCenterX - sourceCenterX,
+        y: targetCenterY - sourceCenterY,
+        opacity: 0,
+        duration,
+        ease: getGSAPEasing(easing),
+        delay,
+        onComplete: () => {
+          if (replace) {
+            sourceElement.remove();
+          }
+        }
+      }, startTime);
+      timeline.add(targetElement, {
+        visibility: "visible",
+        opacity: 1,
+        duration: duration * 0.5,
+        ease: "power2.out",
+        delay: delay + duration * 0.5
+      }, startTime);
+    }
+  };
+}
+function MoveToTarget(target, options = {}) {
+  const { duration = 1, easing = "easeInOut", delay = 0 } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      const element = scene.getElement(target);
+      if (!element) return;
+      const targetState = target._targetState;
+      if (targetState) {
+        timeline.add(element, __spreadProps(__spreadValues({}, targetState), {
+          duration,
+          ease: getGSAPEasing(easing),
+          delay
+        }), startTime);
+      }
+    }
+  };
+}
+function Morphing(source, target, options = {}) {
+  const { duration = 1, easing = "easeInOut", delay = 0 } = options;
+  return {
+    duration,
+    target: source,
+    execute(scene, timeline, startTime) {
+      var _a;
+      const sourceElement = scene.getElement(source);
+      const targetElement = scene.getOrCreateElement(target);
+      if (!sourceElement || !targetElement) return;
+      const sourcePath = sourceElement.querySelector("path") || sourceElement;
+      const targetPath = targetElement.querySelector("path") || targetElement;
+      gsap2.set(targetElement, { opacity: 0 });
+      if ((_a = gsap2.plugins) == null ? void 0 : _a.morphSVG) {
+        const targetD = targetPath.getAttribute("d");
+        if (targetD) {
+          timeline.add(sourcePath, {
+            morphSVG: targetD,
+            duration,
+            ease: getGSAPEasing(easing),
+            delay,
+            onComplete: () => {
+              sourceElement.remove();
+              gsap2.set(targetElement, { opacity: 1 });
+            }
+          }, startTime);
+        }
+      } else {
+        Transform(source, target, options).execute(scene, timeline, startTime);
+      }
+    }
+  };
+}
+function TransformMatchingShapes(source, target, options = {}) {
+  const { duration = 1, easing = "easeInOut", delay = 0 } = options;
+  return {
+    duration,
+    target: source,
+    execute(scene, timeline, startTime) {
+      var _a, _b;
+      const sourceElement = scene.getElement(source);
+      const targetElement = scene.getOrCreateElement(target);
+      if (!sourceElement || !targetElement) return;
+      const sourceChildren = Array.from(sourceElement.children);
+      const targetChildren = Array.from(targetElement.children);
+      gsap2.set(targetElement, { opacity: 0 });
+      const pairs = Math.min(sourceChildren.length, targetChildren.length);
+      for (let i = 0; i < pairs; i++) {
+        const sourceChild = sourceChildren[i];
+        const targetChild = targetChildren[i];
+        const sourceBBox = ((_a = sourceChild.getBBox) == null ? void 0 : _a.call(sourceChild)) || { x: 0, y: 0, width: 0, height: 0 };
+        const targetBBox = ((_b = targetChild.getBBox) == null ? void 0 : _b.call(targetChild)) || { x: 0, y: 0, width: 0, height: 0 };
+        const scaleX = targetBBox.width / (sourceBBox.width || 1);
+        const scaleY = targetBBox.height / (sourceBBox.height || 1);
+        const translateX = targetBBox.x - sourceBBox.x;
+        const translateY = targetBBox.y - sourceBBox.y;
+        timeline.add(sourceChild, {
+          scaleX,
+          scaleY,
+          x: translateX,
+          y: translateY,
+          duration,
+          ease: getGSAPEasing(easing),
+          delay
+        }, startTime);
+      }
+      for (let i = pairs; i < sourceChildren.length; i++) {
+        const child = sourceChildren[i];
+        if (child) {
+          timeline.add(child, {
+            opacity: 0,
+            duration: duration * 0.5,
+            ease: "power2.in"
+          }, startTime);
+        }
+      }
+      timeline.call(() => {
+        sourceElement.remove();
+        gsap2.set(targetElement, { opacity: 1 });
+      }, startTime + duration);
+    }
+  };
+}
+function TransformMatchingTex(source, target, options = {}) {
+  const { duration = 1, easing = "easeInOut", delay = 0 } = options;
+  return {
+    duration,
+    target: source,
+    execute(scene, timeline, startTime) {
+      var _a, _b;
+      const sourceElement = scene.getElement(source);
+      const targetElement = scene.getOrCreateElement(target);
+      if (!sourceElement || !targetElement) return;
+      gsap2.set(targetElement, { opacity: 0 });
+      const sourceTexParts = querySelectorAllIncludingSelf(sourceElement, "path, use, text");
+      const targetTexParts = querySelectorAllIncludingSelf(targetElement, "path, use, text");
+      const pairs = Math.min(sourceTexParts.length, targetTexParts.length);
+      for (let i = 0; i < pairs; i++) {
+        const sourcePart = sourceTexParts[i];
+        const targetPart = targetTexParts[i];
+        const sourceBBox = ((_a = sourcePart.getBBox) == null ? void 0 : _a.call(sourcePart)) || { x: 0, y: 0, width: 0, height: 0 };
+        const targetBBox = ((_b = targetPart.getBBox) == null ? void 0 : _b.call(targetPart)) || { x: 0, y: 0, width: 0, height: 0 };
+        const scaleX = targetBBox.width / (sourceBBox.width || 1);
+        const scaleY = targetBBox.height / (sourceBBox.height || 1);
+        const translateX = targetBBox.x + targetBBox.width / 2 - (sourceBBox.x + sourceBBox.width / 2);
+        const translateY = targetBBox.y + targetBBox.height / 2 - (sourceBBox.y + sourceBBox.height / 2);
+        timeline.add(sourcePart, {
+          scaleX: isFinite(scaleX) ? scaleX : 1,
+          scaleY: isFinite(scaleY) ? scaleY : 1,
+          x: translateX,
+          y: translateY,
+          duration,
+          ease: getGSAPEasing(easing),
+          delay
+        }, startTime);
+      }
+      for (let i = pairs; i < sourceTexParts.length; i++) {
+        const part = sourceTexParts[i];
+        if (part) {
+          timeline.add(part, {
+            opacity: 0,
+            duration: duration * 0.5,
+            ease: "power2.in"
+          }, startTime);
+        }
+      }
+      timeline.call(() => {
+        sourceElement.remove();
+        gsap2.set(targetElement, { opacity: 1 });
+      }, startTime + duration);
+    }
+  };
+}
+function ClockwiseTransform(source, target, options = {}) {
+  const { duration = 1, easing = "easeInOut", delay = 0 } = options;
+  return {
+    duration,
+    target: source,
+    execute(scene, timeline, startTime) {
+      var _a, _b;
+      const sourceElement = scene.getElement(source);
+      const targetElement = scene.getOrCreateElement(target);
+      if (!sourceElement || !targetElement) return;
+      gsap2.set(targetElement, { opacity: 0 });
+      const sourceBBox = ((_a = sourceElement.getBBox) == null ? void 0 : _a.call(sourceElement)) || { x: 0, y: 0, width: 0, height: 0 };
+      const targetBBox = ((_b = targetElement.getBBox) == null ? void 0 : _b.call(targetElement)) || { x: 0, y: 0, width: 0, height: 0 };
+      const sourceCenterX = sourceBBox.x + sourceBBox.width / 2;
+      const sourceCenterY = sourceBBox.y + sourceBBox.height / 2;
+      const targetCenterX = targetBBox.x + targetBBox.width / 2;
+      const targetCenterY = targetBBox.y + targetBBox.height / 2;
+      const scaleX = targetBBox.width / (sourceBBox.width || 1);
+      const scaleY = targetBBox.height / (sourceBBox.height || 1);
+      gsap2.set(sourceElement, {
+        transformOrigin: `${sourceCenterX}px ${sourceCenterY}px`
+      });
+      timeline.add(sourceElement, {
+        rotation: 180,
+        scaleX: isFinite(scaleX) ? scaleX : 1,
+        scaleY: isFinite(scaleY) ? scaleY : 1,
+        x: targetCenterX - sourceCenterX,
+        y: targetCenterY - sourceCenterY,
+        opacity: 0,
+        duration,
+        ease: getGSAPEasing(easing),
+        delay,
+        onComplete: () => {
+          sourceElement.remove();
+          gsap2.set(targetElement, { opacity: 1 });
+        }
+      }, startTime);
+    }
+  };
+}
+function CounterclockwiseTransform(source, target, options = {}) {
+  const { duration = 1, easing = "easeInOut", delay = 0 } = options;
+  return {
+    duration,
+    target: source,
+    execute(scene, timeline, startTime) {
+      var _a, _b;
+      const sourceElement = scene.getElement(source);
+      const targetElement = scene.getOrCreateElement(target);
+      if (!sourceElement || !targetElement) return;
+      gsap2.set(targetElement, { opacity: 0 });
+      const sourceBBox = ((_a = sourceElement.getBBox) == null ? void 0 : _a.call(sourceElement)) || { x: 0, y: 0, width: 0, height: 0 };
+      const targetBBox = ((_b = targetElement.getBBox) == null ? void 0 : _b.call(targetElement)) || { x: 0, y: 0, width: 0, height: 0 };
+      const sourceCenterX = sourceBBox.x + sourceBBox.width / 2;
+      const sourceCenterY = sourceBBox.y + sourceBBox.height / 2;
+      const targetCenterX = targetBBox.x + targetBBox.width / 2;
+      const targetCenterY = targetBBox.y + targetBBox.height / 2;
+      const scaleX = targetBBox.width / (sourceBBox.width || 1);
+      const scaleY = targetBBox.height / (sourceBBox.height || 1);
+      gsap2.set(sourceElement, {
+        transformOrigin: `${sourceCenterX}px ${sourceCenterY}px`
+      });
+      timeline.add(sourceElement, {
+        rotation: -180,
+        scaleX: isFinite(scaleX) ? scaleX : 1,
+        scaleY: isFinite(scaleY) ? scaleY : 1,
+        x: targetCenterX - sourceCenterX,
+        y: targetCenterY - sourceCenterY,
+        opacity: 0,
+        duration,
+        ease: getGSAPEasing(easing),
+        delay,
+        onComplete: () => {
+          sourceElement.remove();
+          gsap2.set(targetElement, { opacity: 1 });
+        }
+      }, startTime);
+    }
+  };
+}
+function TransformFromCopy(source, target, options = {}) {
+  const { duration = 1, easing = "easeInOut", delay = 0 } = options;
+  return {
+    duration,
+    target: source,
+    execute(scene, timeline, startTime) {
+      var _a, _b, _c;
+      const sourceElement = scene.getElement(source);
+      const targetElement = scene.getOrCreateElement(target);
+      if (!sourceElement || !targetElement) return;
+      gsap2.set(targetElement, { opacity: 0 });
+      const copyElement = sourceElement.cloneNode(true);
+      copyElement.setAttribute("id", `${sourceElement.id}-copy-${Date.now()}`);
+      (_a = sourceElement.parentNode) == null ? void 0 : _a.appendChild(copyElement);
+      const sourceBBox = ((_b = sourceElement.getBBox) == null ? void 0 : _b.call(sourceElement)) || { x: 0, y: 0, width: 0, height: 0 };
+      const targetBBox = ((_c = targetElement.getBBox) == null ? void 0 : _c.call(targetElement)) || { x: 0, y: 0, width: 0, height: 0 };
+      const sourceCenterX = sourceBBox.x + sourceBBox.width / 2;
+      const sourceCenterY = sourceBBox.y + sourceBBox.height / 2;
+      const targetCenterX = targetBBox.x + targetBBox.width / 2;
+      const targetCenterY = targetBBox.y + targetBBox.height / 2;
+      const scaleX = targetBBox.width / (sourceBBox.width || 1);
+      const scaleY = targetBBox.height / (sourceBBox.height || 1);
+      gsap2.set(copyElement, {
+        transformOrigin: `${sourceCenterX}px ${sourceCenterY}px`
+      });
+      timeline.add(copyElement, {
+        scaleX: isFinite(scaleX) ? scaleX : 1,
+        scaleY: isFinite(scaleY) ? scaleY : 1,
+        x: targetCenterX - sourceCenterX,
+        y: targetCenterY - sourceCenterY,
+        opacity: 0,
+        duration,
+        ease: getGSAPEasing(easing),
+        delay,
+        onComplete: () => {
+          copyElement.remove();
+          gsap2.set(targetElement, { opacity: 1 });
+        }
+      }, startTime);
+    }
+  };
+}
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __objRest,
+  Timeline,
+  createTimeline,
+  easingMap,
+  getGSAPEasing,
+  querySelectorAllIncludingSelf,
+  Transform,
+  ReplacementTransform,
+  MoveToTarget,
+  Morphing,
+  TransformMatchingShapes,
+  TransformMatchingTex,
+  ClockwiseTransform,
+  CounterclockwiseTransform,
+  TransformFromCopy
+};