agentation-vue 0.2.0

package/dist/composables/useToolbarDragSnap.js

@@ -0,0 +1,296 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToolbarDragSnap = useToolbarDragSnap;
+var _vueDemi = require("vue-demi");
+var _math = require("../utils/math");
+const TOOLBAR_SIZE = 42;
+const EDGE_OFFSET = 20;
+const LONG_PRESS_MS = 350;
+const HALF_TOOLBAR_SIZE = TOOLBAR_SIZE / 2;
+const TOOLBAR_ANCHORS = ["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"];
+function isToolbarAnchor(value) {
+  return typeof value === "string" && TOOLBAR_ANCHORS.includes(value);
+}
+function useToolbarDragSnap(options) {
+  const {
+    expanded,
+    initialPlacement,
+    onDragStart,
+    onDragEnd
+  } = options;
+  const placement = (0, _vueDemi.ref)(isToolbarAnchor(initialPlacement) ? initialPlacement : "bottom-right");
+  const isDragging = (0, _vueDemi.ref)(false);
+  const dragPosition = (0, _vueDemi.ref)(null);
+  const suppressNextClick = (0, _vueDemi.ref)(false);
+  const activePointerId = (0, _vueDemi.ref)(null);
+  const toolbarEl = (0, _vueDemi.ref)(null);
+  const dragOffset = (0, _vueDemi.ref)({
+    x: HALF_TOOLBAR_SIZE,
+    y: HALF_TOOLBAR_SIZE
+  });
+  const dragSize = (0, _vueDemi.ref)({
+    width: TOOLBAR_SIZE,
+    height: TOOLBAR_SIZE
+  });
+  const dragSource = (0, _vueDemi.ref)(null);
+  const dragRotation = (0, _vueDemi.ref)(0);
+  let longPressTimer = null;
+  const snapAnchors = TOOLBAR_ANCHORS;
+  const isExpandedDrag = (0, _vueDemi.computed)(() => isDragging.value && dragSource.value === "handle");
+  const toolbarStyle = (0, _vueDemi.computed)(() => {
+    if (!isDragging.value || !dragPosition.value) {
+      return void 0;
+    }
+    return {
+      left: `${dragPosition.value.x}px`,
+      top: `${dragPosition.value.y}px`,
+      transform: `rotate(${dragRotation.value}deg)`
+    };
+  });
+  const activeSnapAnchor = (0, _vueDemi.computed)(() => {
+    const current = dragPosition.value;
+    if (!current) {
+      return null;
+    }
+    return findClosestAnchor(current.x + dragSize.value.width / 2, current.y + dragSize.value.height / 2);
+  });
+  function getAnchorRects(size) {
+    const top = EDGE_OFFSET;
+    const bottom = window.innerHeight - EDGE_OFFSET - size.height;
+    const left = EDGE_OFFSET;
+    const right = window.innerWidth - EDGE_OFFSET - size.width;
+    const centerX = (window.innerWidth - size.width) / 2;
+    return {
+      "top-left": {
+        x: left,
+        y: top,
+        width: size.width,
+        height: size.height
+      },
+      "top-center": {
+        x: centerX,
+        y: top,
+        width: size.width,
+        height: size.height
+      },
+      "top-right": {
+        x: right,
+        y: top,
+        width: size.width,
+        height: size.height
+      },
+      "bottom-left": {
+        x: left,
+        y: bottom,
+        width: size.width,
+        height: size.height
+      },
+      "bottom-center": {
+        x: centerX,
+        y: bottom,
+        width: size.width,
+        height: size.height
+      },
+      "bottom-right": {
+        x: right,
+        y: bottom,
+        width: size.width,
+        height: size.height
+      }
+    };
+  }
+  function getSnapPoints(size) {
+    const rects = getAnchorRects(size);
+    const result = {};
+    for (const anchor of snapAnchors) {
+      const r = rects[anchor];
+      result[anchor] = {
+        x: r.x + r.width / 2,
+        y: r.y + r.height / 2
+      };
+    }
+    return result;
+  }
+  function findClosestAnchor(x, y) {
+    const points = getSnapPoints(dragSize.value);
+    let closest = "bottom-right";
+    let bestDistance = Number.POSITIVE_INFINITY;
+    for (const [anchor, point] of Object.entries(points)) {
+      const dx = point.x - x;
+      const dy = point.y - y;
+      const distance = dx * dx + dy * dy;
+      if (distance < bestDistance) {
+        bestDistance = distance;
+        closest = anchor;
+      }
+    }
+    return closest;
+  }
+  function captureDragMetrics(clientX, clientY) {
+    const rect = toolbarEl.value?.getBoundingClientRect();
+    if (!rect) {
+      return;
+    }
+    dragOffset.value = {
+      x: clientX - rect.left,
+      y: clientY - rect.top
+    };
+    dragSize.value = {
+      width: rect.width,
+      height: rect.height
+    };
+  }
+  function updateDragPosition(clientX, clientY) {
+    const {
+      width,
+      height
+    } = dragSize.value;
+    dragPosition.value = {
+      x: (0, _math.clamp)(clientX - dragOffset.value.x, 0, window.innerWidth - width),
+      y: (0, _math.clamp)(clientY - dragOffset.value.y, 0, window.innerHeight - height)
+    };
+  }
+  function clearLongPressTimer() {
+    if (longPressTimer) {
+      clearTimeout(longPressTimer);
+      longPressTimer = null;
+    }
+  }
+  function finishDrag(clientX, clientY) {
+    updateDragPosition(clientX, clientY);
+    const current = dragPosition.value;
+    if (current) {
+      placement.value = findClosestAnchor(current.x + dragSize.value.width / 2, current.y + dragSize.value.height / 2);
+    }
+    isDragging.value = false;
+    dragPosition.value = null;
+    onDragEnd?.();
+  }
+  function getSnapStyle(anchor) {
+    const rect = getAnchorRects(dragSize.value)[anchor];
+    if (isExpandedDrag.value) {
+      return {
+        left: `${rect.x}px`,
+        top: `${rect.y}px`,
+        width: `${rect.width}px`,
+        height: `${rect.height}px`
+      };
+    }
+    return {
+      left: `${rect.x + rect.width / 2}px`,
+      top: `${rect.y + rect.height / 2}px`
+    };
+  }
+  function startDragPointer(e, source, options2) {
+    if (e.button !== 0) {
+      return;
+    }
+    activePointerId.value = e.pointerId;
+    dragSource.value = source;
+    captureDragMetrics(e.clientX, e.clientY);
+    const target = e.currentTarget;
+    target?.setPointerCapture?.(e.pointerId);
+    clearLongPressTimer();
+    dragRotation.value = (2 + Math.random() * 3) * (Math.random() < 0.5 ? -1 : 1);
+    if (options2.immediate) {
+      dragRotation.value = (Math.random() * 4 + 1) * (Math.random() < 0.5 ? -1 : 1);
+      isDragging.value = true;
+      onDragStart?.();
+      updateDragPosition(e.clientX, e.clientY);
+      return;
+    }
+    longPressTimer = setTimeout(() => {
+      if (activePointerId.value !== e.pointerId || expanded.value) {
+        return;
+      }
+      dragRotation.value = (Math.random() * 4 + 1) * (Math.random() < 0.5 ? -1 : 1);
+      isDragging.value = true;
+      onDragStart?.();
+      updateDragPosition(e.clientX, e.clientY);
+    }, LONG_PRESS_MS);
+  }
+  function onTogglePointerDown(e) {
+    if (expanded.value) {
+      return;
+    }
+    startDragPointer(e, "toggle", {
+      immediate: false
+    });
+  }
+  function onHandlePointerDown(e) {
+    if (!expanded.value) {
+      return;
+    }
+    startDragPointer(e, "handle", {
+      immediate: true
+    });
+  }
+  function onPointerMove(e) {
+    if (!isDragging.value || activePointerId.value !== e.pointerId) {
+      return;
+    }
+    updateDragPosition(e.clientX, e.clientY);
+  }
+  function onPointerUp(e) {
+    if (activePointerId.value !== e.pointerId) {
+      return;
+    }
+    clearLongPressTimer();
+    if (isDragging.value) {
+      finishDrag(e.clientX, e.clientY);
+      if (dragSource.value === "toggle") {
+        suppressNextClick.value = true;
+      }
+    }
+    activePointerId.value = null;
+    dragSource.value = null;
+    const target = e.currentTarget;
+    target?.releasePointerCapture?.(e.pointerId);
+  }
+  function onPointerCancel() {
+    if (isDragging.value) {
+      onDragEnd?.();
+    }
+    clearLongPressTimer();
+    isDragging.value = false;
+    dragPosition.value = null;
+    activePointerId.value = null;
+    dragSource.value = null;
+  }
+  function consumeToggleClickSuppression() {
+    if (!suppressNextClick.value) {
+      return false;
+    }
+    suppressNextClick.value = false;
+    return true;
+  }
+  function cleanup() {
+    clearLongPressTimer();
+    if (isDragging.value) {
+      isDragging.value = false;
+      onDragEnd?.();
+    }
+    activePointerId.value = null;
+    dragSource.value = null;
+  }
+  return {
+    placement,
+    isDragging,
+    toolbarStyle,
+    toolbarEl,
+    snapAnchors,
+    activeSnapAnchor,
+    isExpandedDrag,
+    getSnapStyle,
+    onTogglePointerDown,
+    onHandlePointerDown,
+    onPointerMove,
+    onPointerUp,
+    onPointerCancel,
+    consumeToggleClickSuppression,
+    cleanup
+  };
+}

package/dist/composables/useToolbarDragSnap.mjs

@@ -0,0 +1,245 @@
+import { computed, ref } from "vue-demi";
+import { clamp } from "../utils/math.mjs";
+const TOOLBAR_SIZE = 42;
+const EDGE_OFFSET = 20;
+const LONG_PRESS_MS = 350;
+const HALF_TOOLBAR_SIZE = TOOLBAR_SIZE / 2;
+const TOOLBAR_ANCHORS = ["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"];
+function isToolbarAnchor(value) {
+  return typeof value === "string" && TOOLBAR_ANCHORS.includes(value);
+}
+export function useToolbarDragSnap(options) {
+  const { expanded, initialPlacement, onDragStart, onDragEnd } = options;
+  const placement = ref(isToolbarAnchor(initialPlacement) ? initialPlacement : "bottom-right");
+  const isDragging = ref(false);
+  const dragPosition = ref(null);
+  const suppressNextClick = ref(false);
+  const activePointerId = ref(null);
+  const toolbarEl = ref(null);
+  const dragOffset = ref({ x: HALF_TOOLBAR_SIZE, y: HALF_TOOLBAR_SIZE });
+  const dragSize = ref({ width: TOOLBAR_SIZE, height: TOOLBAR_SIZE });
+  const dragSource = ref(null);
+  const dragRotation = ref(0);
+  let longPressTimer = null;
+  const snapAnchors = TOOLBAR_ANCHORS;
+  const isExpandedDrag = computed(() => isDragging.value && dragSource.value === "handle");
+  const toolbarStyle = computed(() => {
+    if (!isDragging.value || !dragPosition.value) {
+      return void 0;
+    }
+    return {
+      left: `${dragPosition.value.x}px`,
+      top: `${dragPosition.value.y}px`,
+      transform: `rotate(${dragRotation.value}deg)`
+    };
+  });
+  const activeSnapAnchor = computed(() => {
+    const current = dragPosition.value;
+    if (!current) {
+      return null;
+    }
+    return findClosestAnchor(
+      current.x + dragSize.value.width / 2,
+      current.y + dragSize.value.height / 2
+    );
+  });
+  function getAnchorRects(size) {
+    const top = EDGE_OFFSET;
+    const bottom = window.innerHeight - EDGE_OFFSET - size.height;
+    const left = EDGE_OFFSET;
+    const right = window.innerWidth - EDGE_OFFSET - size.width;
+    const centerX = (window.innerWidth - size.width) / 2;
+    return {
+      "top-left": { x: left, y: top, width: size.width, height: size.height },
+      "top-center": { x: centerX, y: top, width: size.width, height: size.height },
+      "top-right": { x: right, y: top, width: size.width, height: size.height },
+      "bottom-left": { x: left, y: bottom, width: size.width, height: size.height },
+      "bottom-center": { x: centerX, y: bottom, width: size.width, height: size.height },
+      "bottom-right": { x: right, y: bottom, width: size.width, height: size.height }
+    };
+  }
+  function getSnapPoints(size) {
+    const rects = getAnchorRects(size);
+    const result = {};
+    for (const anchor of snapAnchors) {
+      const r = rects[anchor];
+      result[anchor] = { x: r.x + r.width / 2, y: r.y + r.height / 2 };
+    }
+    return result;
+  }
+  function findClosestAnchor(x, y) {
+    const points = getSnapPoints(dragSize.value);
+    let closest = "bottom-right";
+    let bestDistance = Number.POSITIVE_INFINITY;
+    for (const [anchor, point] of Object.entries(points)) {
+      const dx = point.x - x;
+      const dy = point.y - y;
+      const distance = dx * dx + dy * dy;
+      if (distance < bestDistance) {
+        bestDistance = distance;
+        closest = anchor;
+      }
+    }
+    return closest;
+  }
+  function captureDragMetrics(clientX, clientY) {
+    const rect = toolbarEl.value?.getBoundingClientRect();
+    if (!rect) {
+      return;
+    }
+    dragOffset.value = {
+      x: clientX - rect.left,
+      y: clientY - rect.top
+    };
+    dragSize.value = {
+      width: rect.width,
+      height: rect.height
+    };
+  }
+  function updateDragPosition(clientX, clientY) {
+    const { width, height } = dragSize.value;
+    dragPosition.value = {
+      x: clamp(clientX - dragOffset.value.x, 0, window.innerWidth - width),
+      y: clamp(clientY - dragOffset.value.y, 0, window.innerHeight - height)
+    };
+  }
+  function clearLongPressTimer() {
+    if (longPressTimer) {
+      clearTimeout(longPressTimer);
+      longPressTimer = null;
+    }
+  }
+  function finishDrag(clientX, clientY) {
+    updateDragPosition(clientX, clientY);
+    const current = dragPosition.value;
+    if (current) {
+      placement.value = findClosestAnchor(
+        current.x + dragSize.value.width / 2,
+        current.y + dragSize.value.height / 2
+      );
+    }
+    isDragging.value = false;
+    dragPosition.value = null;
+    onDragEnd?.();
+  }
+  function getSnapStyle(anchor) {
+    const rect = getAnchorRects(dragSize.value)[anchor];
+    if (isExpandedDrag.value) {
+      return {
+        left: `${rect.x}px`,
+        top: `${rect.y}px`,
+        width: `${rect.width}px`,
+        height: `${rect.height}px`
+      };
+    }
+    return {
+      left: `${rect.x + rect.width / 2}px`,
+      top: `${rect.y + rect.height / 2}px`
+    };
+  }
+  function startDragPointer(e, source, options2) {
+    if (e.button !== 0) {
+      return;
+    }
+    activePointerId.value = e.pointerId;
+    dragSource.value = source;
+    captureDragMetrics(e.clientX, e.clientY);
+    const target = e.currentTarget;
+    target?.setPointerCapture?.(e.pointerId);
+    clearLongPressTimer();
+    dragRotation.value = (2 + Math.random() * 3) * (Math.random() < 0.5 ? -1 : 1);
+    if (options2.immediate) {
+      dragRotation.value = (Math.random() * 4 + 1) * (Math.random() < 0.5 ? -1 : 1);
+      isDragging.value = true;
+      onDragStart?.();
+      updateDragPosition(e.clientX, e.clientY);
+      return;
+    }
+    longPressTimer = setTimeout(() => {
+      if (activePointerId.value !== e.pointerId || expanded.value) {
+        return;
+      }
+      dragRotation.value = (Math.random() * 4 + 1) * (Math.random() < 0.5 ? -1 : 1);
+      isDragging.value = true;
+      onDragStart?.();
+      updateDragPosition(e.clientX, e.clientY);
+    }, LONG_PRESS_MS);
+  }
+  function onTogglePointerDown(e) {
+    if (expanded.value) {
+      return;
+    }
+    startDragPointer(e, "toggle", { immediate: false });
+  }
+  function onHandlePointerDown(e) {
+    if (!expanded.value) {
+      return;
+    }
+    startDragPointer(e, "handle", { immediate: true });
+  }
+  function onPointerMove(e) {
+    if (!isDragging.value || activePointerId.value !== e.pointerId) {
+      return;
+    }
+    updateDragPosition(e.clientX, e.clientY);
+  }
+  function onPointerUp(e) {
+    if (activePointerId.value !== e.pointerId) {
+      return;
+    }
+    clearLongPressTimer();
+    if (isDragging.value) {
+      finishDrag(e.clientX, e.clientY);
+      if (dragSource.value === "toggle") {
+        suppressNextClick.value = true;
+      }
+    }
+    activePointerId.value = null;
+    dragSource.value = null;
+    const target = e.currentTarget;
+    target?.releasePointerCapture?.(e.pointerId);
+  }
+  function onPointerCancel() {
+    if (isDragging.value) {
+      onDragEnd?.();
+    }
+    clearLongPressTimer();
+    isDragging.value = false;
+    dragPosition.value = null;
+    activePointerId.value = null;
+    dragSource.value = null;
+  }
+  function consumeToggleClickSuppression() {
+    if (!suppressNextClick.value) {
+      return false;
+    }
+    suppressNextClick.value = false;
+    return true;
+  }
+  function cleanup() {
+    clearLongPressTimer();
+    if (isDragging.value) {
+      isDragging.value = false;
+      onDragEnd?.();
+    }
+    activePointerId.value = null;
+    dragSource.value = null;
+  }
+  return {
+    placement,
+    isDragging,
+    toolbarStyle,
+    toolbarEl,
+    snapAnchors,
+    activeSnapAnchor,
+    isExpandedDrag,
+    getSnapStyle,
+    onTogglePointerDown,
+    onHandlePointerDown,
+    onPointerMove,
+    onPointerUp,
+    onPointerCancel,
+    consumeToggleClickSuppression,
+    cleanup
+  };
+}

package/dist/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const VA_DATA_ATTR = "data-agentation-vue";
+export declare const VA_DATA_ATTR_SELECTOR = "[data-agentation-vue]";

package/dist/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VA_DATA_ATTR_SELECTOR = exports.VA_DATA_ATTR = void 0;
+const VA_DATA_ATTR = exports.VA_DATA_ATTR = "data-agentation-vue";
+const VA_DATA_ATTR_SELECTOR = exports.VA_DATA_ATTR_SELECTOR = "[data-agentation-vue]";

package/dist/constants.mjs

@@ -0,0 +1,2 @@
+export const VA_DATA_ATTR = "data-agentation-vue";
+export const VA_DATA_ATTR_SELECTOR = "[data-agentation-vue]";

package/dist/directives/vaTooltip.d.ts

@@ -0,0 +1,22 @@
+export type VaTooltipPlacement = 'top' | 'bottom';
+export interface VaTooltipOptions {
+    text: string;
+    shortcut?: string;
+    placement?: VaTooltipPlacement;
+    offset?: number;
+    showDelay?: number;
+    disabled?: boolean;
+}
+export type VaTooltipValue = string | VaTooltipOptions | null | undefined;
+interface DirectiveBindingLike {
+    value: VaTooltipValue;
+}
+export declare const vaTooltipDirective: {
+    beforeMount(el: HTMLElement, binding: DirectiveBindingLike): void;
+    updated(el: HTMLElement, binding: DirectiveBindingLike): void;
+    unmounted(el: HTMLElement): void;
+    bind(el: HTMLElement, binding: DirectiveBindingLike): void;
+    componentUpdated(el: HTMLElement, binding: DirectiveBindingLike): void;
+    unbind(el: HTMLElement): void;
+};
+export default vaTooltipDirective;