gravity-dnd 1.1.6

package/src/components/Draggable/useDragDropContext.ts

@@ -0,0 +1,310 @@
+import { inject, onBeforeUnmount, provide, reactive, ref, shallowRef, type InjectionKey, type Ref } from 'vue';
+import type {
+  DragDropBoundary,
+  DragDropDropEvent,
+  DragDropHoverTarget,
+  DragDropMode,
+  DragDropSource,
+} from './contracts';
+import { createInternalDropLayer, type InternalDropTargetRegistration } from './internalDropLayer';
+
+export interface ActiveDrag<TItem = unknown> {
+  active: boolean;
+  draggableId: string | null;
+  mode: DragDropMode;
+  item: TItem | null;
+  source: DragDropSource | null;
+  clientX: number;
+  clientY: number;
+  shiftX: number;
+  shiftY: number;
+  previewWidth: number;
+  previewHeight: number;
+  hoverTarget: DragDropHoverTarget | null;
+}
+
+interface DragStartPayload<TItem> {
+  draggableId: string;
+  mode: DragDropMode;
+  item: TItem;
+  source: DragDropSource;
+  shiftX: number;
+  shiftY: number;
+  clientX: number;
+  clientY: number;
+  previewWidth: number;
+  previewHeight: number;
+  boundary: DragDropBoundary | null;
+}
+
+interface DragEndResult<TItem> {
+  event: DragDropDropEvent<TItem>;
+  accepted: boolean;
+}
+
+interface InternalDragDropContext {
+  dragState: ActiveDrag;
+  rawClientX: Ref<number>;
+  rawClientY: Ref<number>;
+  registerTarget: (target: InternalDropTargetRegistration) => () => void;
+  startDrag: <TItem>(payload: DragStartPayload<TItem>) => void;
+  endDrag: <TItem>() => DragEndResult<TItem> | null;
+  cancelDrag: () => void;
+  isDragging: (source: DragDropSource) => boolean;
+  isHovering: (containerId: string, index?: number) => boolean;
+}
+
+const DRAG_DROP_CONTEXT_KEY: InjectionKey<InternalDragDropContext> = Symbol('gravity.dragDropContext');
+
+export function provideDragDropContext() {
+  const dragState = reactive<ActiveDrag>({
+    active: false,
+    draggableId: null,
+    mode: 'target',
+    item: null,
+    source: null,
+    clientX: 0,
+    clientY: 0,
+    shiftX: 0,
+    shiftY: 0,
+    previewWidth: 0,
+    previewHeight: 0,
+    hoverTarget: null,
+  });
+  const activeBoundary = ref<DragDropBoundary | null>(null);
+  const dropLayer = createInternalDropLayer();
+
+  // Raw (non-reactive) coordinates updated every pointermove for preview position.
+  // Only the preview overlay reads these via shallowRef to avoid triggering the
+  // full reactive cascade on every pixel move.
+  const rawClientX = shallowRef(0);
+  const rawClientY = shallowRef(0);
+  let _rafId: number | null = null;
+  let _pendingX = 0;
+  let _pendingY = 0;
+  let _hoverDirty = false;
+
+  function reset() {
+    dragState.active = false;
+    dragState.draggableId = null;
+    dragState.item = null;
+    dragState.mode = 'target';
+    dragState.source = null;
+    dragState.clientX = 0;
+    dragState.clientY = 0;
+    dragState.shiftX = 0;
+    dragState.shiftY = 0;
+    dragState.previewWidth = 0;
+    dragState.previewHeight = 0;
+    dragState.hoverTarget = null;
+    activeBoundary.value = null;
+  }
+
+  function registerTarget(target: InternalDropTargetRegistration) {
+    return dropLayer.registerTarget(target);
+  }
+
+  function withinBoundary(clientX: number, clientY: number): boolean {
+    if (!activeBoundary.value) return true;
+    return (
+      clientX >= activeBoundary.value.left &&
+      clientX <= activeBoundary.value.right &&
+      clientY >= activeBoundary.value.top &&
+      clientY <= activeBoundary.value.bottom
+    );
+  }
+
+  function processFrame() {
+    _rafId = null;
+    if (!dragState.active) return;
+
+    const cx = _pendingX;
+    const cy = _pendingY;
+
+    // Always update preview position (cheap shallowRef trigger)
+    rawClientX.value = cx;
+    rawClientY.value = cy;
+
+    // Only run expensive hover detection when coordinates actually changed
+    if (!_hoverDirty) return;
+    _hoverDirty = false;
+
+    // Update reactive coords (used by endDrag for final position)
+    dragState.clientX = cx;
+    dragState.clientY = cy;
+
+    if (!withinBoundary(cx, cy)) {
+      if (dragState.hoverTarget !== null) dragState.hoverTarget = null;
+      return;
+    }
+    if (!dragState.item || !dragState.source) {
+      if (dragState.hoverTarget !== null) dragState.hoverTarget = null;
+      return;
+    }
+
+    const newTarget = dropLayer.detectHoverTarget(cx, cy, {
+      item: dragState.item,
+      source: dragState.source,
+    });
+
+    // Only trigger reactive update if hover target actually changed
+    const prev = dragState.hoverTarget;
+    if (
+      newTarget?.id !== prev?.id ||
+      newTarget?.index !== prev?.index ||
+      newTarget?.accepts !== prev?.accepts
+    ) {
+      dragState.hoverTarget = newTarget;
+    }
+  }
+
+  function onPointerMove(event: PointerEvent) {
+    if (!dragState.active) return;
+
+    const cx = event.clientX;
+    const cy = event.clientY;
+
+    // Mark dirty if coordinates changed enough to warrant hover re-evaluation
+    if (cx !== _pendingX || cy !== _pendingY) {
+      _hoverDirty = true;
+    }
+    _pendingX = cx;
+    _pendingY = cy;
+
+    // Coalesce into a single RAF — preview moves at display refresh rate,
+    // hover detection runs at most once per frame instead of per pointermove.
+    if (_rafId === null) {
+      _rafId = requestAnimationFrame(processFrame);
+    }
+  }
+
+  function teardownListeners() {
+    document.removeEventListener('pointermove', onPointerMove);
+    if (_rafId !== null) {
+      cancelAnimationFrame(_rafId);
+      _rafId = null;
+    }
+  }
+
+  function startDrag<TItem>(payload: DragStartPayload<TItem>) {
+    dragState.active = true;
+    dragState.draggableId = payload.draggableId;
+    dragState.mode = payload.mode;
+    dragState.item = payload.item;
+    dragState.source = payload.source;
+    dragState.clientX = payload.clientX;
+    dragState.clientY = payload.clientY;
+    dragState.shiftX = payload.shiftX;
+    dragState.shiftY = payload.shiftY;
+    dragState.previewWidth = payload.previewWidth;
+    dragState.previewHeight = payload.previewHeight;
+    dragState.hoverTarget = null;
+    activeBoundary.value = payload.boundary;
+    _pendingX = payload.clientX;
+    _pendingY = payload.clientY;
+    rawClientX.value = payload.clientX;
+    rawClientY.value = payload.clientY;
+    document.addEventListener('pointermove', onPointerMove);
+  }
+
+  function endDrag<TItem>() {
+    if (!dragState.active || !dragState.item || !dragState.source || !dragState.draggableId) {
+      teardownListeners();
+      reset();
+      return null;
+    }
+
+    const hoveredTarget = dropLayer.getTarget(dragState.hoverTarget?.id);
+    const { target, accepted } = dropLayer.resolveDropTarget({
+      mode: dragState.mode,
+      hoverTarget: dragState.hoverTarget,
+      source: dragState.source,
+    });
+    const payload: DragDropDropEvent<TItem> = {
+      draggableId: dragState.draggableId,
+      item: dragState.item as TItem,
+      source: dragState.source,
+      target,
+    };
+
+    if (accepted && hoveredTarget?.onDrop) {
+      hoveredTarget.onDrop(payload as DragDropDropEvent<unknown>);
+    }
+    teardownListeners();
+    reset();
+    return {
+      event: payload,
+      accepted,
+    };
+  }
+
+  function cancelDrag() {
+    teardownListeners();
+    reset();
+  }
+
+  function isDragging(source: DragDropSource): boolean {
+    return (
+      dragState.active &&
+      dragState.source?.containerId === source.containerId &&
+      dragState.source?.index === source.index &&
+      dragState.source?.kind === source.kind
+    );
+  }
+
+  function isHovering(containerId: string, index?: number): boolean {
+    if (!dragState.active || !dragState.hoverTarget) return false;
+    if (dragState.hoverTarget.containerId !== containerId) return false;
+    if (typeof index !== 'number') return true;
+    return dragState.hoverTarget.index === index;
+  }
+
+  provide(DRAG_DROP_CONTEXT_KEY, {
+    dragState,
+    rawClientX,
+    rawClientY,
+    registerTarget,
+    startDrag,
+    endDrag,
+    cancelDrag,
+    isDragging,
+    isHovering,
+  });
+
+  onBeforeUnmount(() => {
+    teardownListeners();
+    dropLayer.clear();
+  });
+
+  return {
+    dragState,
+    cancelDrag,
+  };
+}
+
+export function useDragDropContext() {
+  const ctx = inject(DRAG_DROP_CONTEXT_KEY, null);
+  return ctx;
+}
+
+export function useDropTargetRegistration(target: InternalDropTargetRegistration, enabled: Ref<boolean>) {
+  const ctx = useDragDropContext();
+  if (!ctx) return;
+
+  let unregister = () => {};
+  if (enabled.value) {
+    unregister = ctx.registerTarget(target);
+  }
+  onBeforeUnmount(() => {
+    unregister();
+  });
+
+  return {
+    refresh() {
+      unregister();
+      if (!enabled.value) return;
+      unregister = ctx.registerTarget(target);
+    },
+  };
+}
+

package/src/components/Pool/Pool.scss

@@ -0,0 +1,107 @@
+.st-gravity-pool {
+  border-radius: 8px;
+  min-height: 76px;
+  padding: 8px;
+  transform-origin: center;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease,
+    transform 120ms ease;
+}
+
+.st-gravity-pool--hovering {
+  transform: translateY(-1px);
+}
+
+.st-gravity-pool--accepting {
+  animation: gravity-pool-accepting 170ms ease-out;
+}
+
+.st-gravity-pool--rejecting {
+  animation: gravity-pool-rejecting 190ms ease-out;
+}
+
+.st-gravity-pool__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.st-gravity-pool__entry {
+  display: inline-flex;
+}
+
+.st-gravity-pool__drop-indicator {
+  position: relative;
+  display: inline-flex;
+  width: 56px;
+  min-height: 30px;
+  border-radius: 6px;
+  pointer-events: none;
+  animation: gravity-pool-insert-indicator 130ms ease-out;
+}
+
+.st-gravity-pool__drop-indicator::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 999px;
+}
+
+.gravity-pool-reorder-move {
+  transition: transform 180ms ease;
+}
+
+.gravity-pool-reorder-enter-active {
+  transition: opacity 170ms ease, transform 170ms ease;
+}
+
+.gravity-pool-reorder-leave-active {
+  position: absolute;
+  opacity: 0;
+}
+
+.gravity-pool-reorder-enter-from,
+.gravity-pool-reorder-leave-to {
+  opacity: 0;
+  transform: scale(0.92);
+}
+
+@keyframes gravity-pool-accepting {
+  0% {
+    transform: translateY(0);
+  }
+  60% {
+    transform: translateY(-1px) scale(1.005);
+  }
+  100% {
+    transform: translateY(-1px);
+  }
+}
+
+@keyframes gravity-pool-rejecting {
+  0% {
+    transform: translateX(0);
+  }
+  30% {
+    transform: translateX(-2px);
+  }
+  60% {
+    transform: translateX(2px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes gravity-pool-insert-indicator {
+  0% {
+    opacity: 0;
+    transform: scaleY(0.65);
+  }
+  100% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}

package/src/components/Pool/Pool.stories.ts

@@ -0,0 +1,155 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
+import GravityProvider from '../Draggable/DragDropProvider.vue';
+import Draggable from '../Draggable/Draggable.vue';
+import Pool from './Pool.vue';
+import type { GravityPoolReceiveEvent, GravityPoolReorderEvent } from '../Draggable/contracts';
+
+interface DemoItem {
+  id: string;
+  label: string;
+}
+
+const meta: Meta<typeof Pool> = {
+  title: 'Gravity/Pool',
+  component: Pool,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+};
+
+export default meta;
+type Story = StoryObj<typeof Pool>;
+
+export const ReorderAndReceive: Story = {
+  render: () => ({
+    setup() {
+      const pool = ref<DemoItem[]>([
+        { id: 'pool-a', label: 'A' },
+        { id: 'pool-b', label: 'B' },
+        { id: 'pool-c', label: 'C' },
+        { id: 'pool-d', label: 'D' },
+        { id: 'pool-e', label: 'E' },
+        { id: 'pool-f', label: 'F' },
+        { id: 'pool-g', label: 'G' },
+        { id: 'pool-h', label: 'H' },
+        { id: 'pool-i', label: 'I' },
+        { id: 'pool-j', label: 'J' },
+        { id: 'pool-k', label: 'K' },
+        { id: 'pool-l', label: 'L' },
+      ]);
+      const stash = ref<DemoItem[]>([
+        { id: 'stash-m', label: 'M' },
+        { id: 'stash-n', label: 'N' },
+      ]);
+
+      function takeFromSource(sourceContainerId: string, sourceIndex: number): DemoItem | null {
+        if (sourceContainerId === 'pool-main') {
+          const [moved] = pool.value.splice(sourceIndex, 1);
+          return moved || null;
+        }
+        if (sourceContainerId === 'stash-main') {
+          const [moved] = stash.value.splice(sourceIndex, 1);
+          return moved || null;
+        }
+        return null;
+      }
+
+      function onPoolReorder(event: GravityPoolReorderEvent<unknown>) {
+        if (event.fromIndex === event.toIndex) return;
+        const [moved] = pool.value.splice(event.fromIndex, 1);
+        if (!moved) return;
+        let insertIndex = event.toIndex;
+        if (event.fromIndex < event.toIndex) insertIndex -= 1;
+        pool.value.splice(Math.max(0, Math.min(insertIndex, pool.value.length)), 0, moved as DemoItem);
+      }
+
+      function onPoolReceive(event: GravityPoolReceiveEvent<unknown>) {
+        const moved = takeFromSource(event.source.containerId, event.source.index);
+        if (!moved) return;
+        const insertIndex = Math.max(0, Math.min(event.insertIndex, pool.value.length));
+        pool.value.splice(insertIndex, 0, moved);
+      }
+
+      return {
+        pool,
+        stash,
+        onPoolReorder,
+        onPoolReceive,
+      };
+    },
+    components: { GravityProvider, Draggable, Pool },
+    template: `
+      <div style="width: 560px; max-width: 96vw; font-family: system-ui, sans-serif;">
+        <GravityProvider>
+          <div style="display: grid; gap: 16px;">
+            <div>
+              <div style="font-size: 14px; font-weight: 600; margin-bottom: 8px;">External source</div>
+              <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+                <Draggable
+                  v-for="(item, index) in stash"
+                  :key="item.id"
+                  :draggable-id="'stash-item-' + item.id"
+                  :item="item"
+                  source-id="stash-main"
+                  source-kind="custom"
+                  :source-index="index"
+                >
+                  <template #default="{ dragging }">
+                    <div
+                      :style="{
+                        padding: '6px 10px',
+                        borderRadius: '6px',
+                        border: '1px solid #d1d5db',
+                        background: '#f9fafb',
+                        opacity:  dragging ? .9 : 1
+                      }"
+                    >
+                      {{ item.label }}
+                    </div>
+                  </template>
+                </Draggable>
+              </div>
+            </div>
+
+            <div>
+              <div style="font-size: 14px; font-weight: 600; margin-bottom: 8px;">Pool (reorderable + receives)</div>
+              <Pool
+                pool-id="pool-main"
+                :items="pool"
+                @reorder="onPoolReorder"
+                @receive="onPoolReceive"
+              >
+                <template #item="{ item, index }">
+                  <Draggable
+                    :draggable-id="'pool-item-' + item.id"
+                    :item="item"
+                    source-id="pool-main"
+                    source-kind="pool"
+                    :source-index="index"
+                  >
+                    <template #default="{ dragging }">
+                      <div
+                        :style="{
+                          padding: '6px 10px',
+                          minWidth: '56px',
+                          textAlign: 'center',
+                          borderRadius: '6px',
+                          border: '1px solid #d1d5db',
+                          background: '#f9fafb',
+                          opacity:  dragging ? .9 : 1
+                        }"
+                      >
+                        {{ item.label }}
+                      </div>
+                    </template>
+                  </Draggable>
+                </template>
+              </Pool>
+            </div>
+          </div>
+
+        </GravityProvider>
+      </div>
+    `,
+  }),
+};

package/src/components/Pool/Pool.visuals.css

@@ -0,0 +1,25 @@
+.st-gravity-pool {
+  border: 1px solid #d1d5db;
+}
+
+.st-gravity-pool--accepting {
+  background: #f0fdf4;
+  border-color: #86efac;
+  box-shadow: 0 0 0 2px rgb(134 239 172 / 22%);
+}
+
+.st-gravity-pool--rejecting {
+  background: #fef2f2;
+  border-color: #f87171;
+  box-shadow: 0 0 0 2px rgb(248 113 113 / 22%);
+}
+
+.st-gravity-pool__drop-indicator {
+  border: 1px solid #22c55e;
+  background: rgb(255 255 255 / 35%);
+  box-shadow: 0 0 0 2px rgb(34 197 94 / 35%);
+}
+
+.st-gravity-pool__drop-indicator::before {
+  background: transparent;
+}