gravity-dnd 1.1.6

package/src/components/Draggable/Draggable.vue

@@ -0,0 +1,292 @@
+<template lang="pug">
+.st-gravity-draggable(
+  ref="rootEl"
+  :class="rootClasses"
+  :style="rootStyle"
+  @pointerdown.prevent="onPointerDown"
+)
+  .st-gravity-draggable__content
+    slot(
+      :dragging="dragging"
+      :hovering="hovering"
+      :canDropAtHover="canDropAtHover"
+      :dropMode="dropMode"
+    )
+  DragPreviewOverlay(
+    v-if="dragDrop && dragDrop.dragState.draggableId === props.draggableId"
+    :visible="dragDrop.dragState.active && Boolean(dragDrop.dragState.item)"
+    :item="props.item"
+    :x="dragDrop.rawClientX.value"
+    :y="dragDrop.rawClientY.value"
+    :shiftX="dragDrop.dragState.shiftX"
+    :shiftY="dragDrop.dragState.shiftY"
+    :width="dragDrop.dragState.previewWidth"
+    :height="dragDrop.dragState.previewHeight"
+  )
+    slot(
+      :dragging="true"
+      :hovering="hovering"
+      :canDropAtHover="canDropAtHover"
+      :dropMode="dropMode"
+    )
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref } from 'vue';
+import { useDragDropContext } from './useDragDropContext';
+import DragPreviewOverlay from './DragPreviewOverlay.vue';
+import type {
+  DragDropMode,
+  DragDropSource,
+  DraggableCanDragContext,
+  DraggableDropEvent,
+} from './contracts';
+import './Draggable.scss';
+
+const props = withDefaults(
+  defineProps<{
+    draggableId: string;
+    item: unknown;
+    sourceId: string;
+    sourceKind?: DragDropSource['kind'];
+    sourceIndex: number;
+    dropMode?: DragDropMode;
+    disabled?: boolean;
+    boundarySelector?: string | null;
+    canDrag?: (ctx: DraggableCanDragContext<unknown>) => boolean;
+  }>(),
+  {
+    sourceKind: 'custom',
+    dropMode: 'target',
+    disabled: false,
+    boundarySelector: null,
+    canDrag: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  dragStart: [payload: { draggableId: string; source: DragDropSource; item: unknown }];
+  dragMove: [payload: { draggableId: string; clientX: number; clientY: number }];
+  dragEnd: [payload: DraggableDropEvent<unknown>];
+  drop: [payload: DraggableDropEvent<unknown>];
+  cancel: [payload: { draggableId: string; source: DragDropSource; reason: 'disabled' | 'rejected' | 'out-of-bounds' }];
+}>();
+
+const rootEl = ref<HTMLElement | null>(null);
+const dragDrop = useDragDropContext();
+const isPressed = ref(false);
+const feedback = ref<'none' | 'accepted' | 'rejected' | 'returned'>('none');
+const floatingOffsetX = ref(0);
+const floatingOffsetY = ref(0);
+const dragStartClientX = ref(0);
+const dragStartClientY = ref(0);
+const dragStartOffsetX = ref(0);
+const dragStartOffsetY = ref(0);
+let feedbackTimeout: ReturnType<typeof setTimeout> | null = null;
+
+const source = computed<DragDropSource>(() => ({
+  containerId: props.sourceId,
+  kind: props.sourceKind,
+  index: props.sourceIndex,
+}));
+
+const dragging = computed(() => {
+  if (!dragDrop) return false;
+  return dragDrop.isDragging(source.value);
+});
+
+const hovering = computed(() => {
+  if (!dragging.value) return false;
+  return !!dragDrop?.dragState.hoverTarget;
+});
+
+const canDropAtHover = computed(() => {
+  if (!dragging.value) return false;
+  return !!dragDrop?.dragState.hoverTarget?.accepts;
+});
+
+const dropMode = computed(() => props.dropMode);
+
+const isAcceptingHover = computed(() => dragging.value && hovering.value && canDropAtHover.value);
+const isRejectingHover = computed(() => dragging.value && hovering.value && !canDropAtHover.value);
+const rootClasses = computed(() => ({
+  'st-gravity-draggable--pressed': isPressed.value,
+  'st-gravity-draggable--dragging': dragging.value,
+  'st-gravity-draggable--hover-accept': isAcceptingHover.value,
+  'st-gravity-draggable--hover-reject': isRejectingHover.value,
+  'st-gravity-draggable--feedback-accepted': feedback.value === 'accepted',
+  'st-gravity-draggable--feedback-rejected': feedback.value === 'rejected',
+  'st-gravity-draggable--feedback-returned': feedback.value === 'returned',
+  'st-gravity-draggable--disabled': props.disabled,
+}));
+const rootStyle = computed(() => {
+  const style: Record<string, string> = {};
+  if (props.dropMode === 'floating' && (floatingOffsetX.value || floatingOffsetY.value)) {
+    style.position = 'relative';
+    style.left = `${floatingOffsetX.value}px`;
+    style.top = `${floatingOffsetY.value}px`;
+  }
+  return Object.keys(style).length ? style : undefined;
+});
+
+function clearFeedbackTimer() {
+  if (!feedbackTimeout) return;
+  clearTimeout(feedbackTimeout);
+  feedbackTimeout = null;
+}
+
+function flashFeedback(kind: 'accepted' | 'rejected' | 'returned') {
+  clearFeedbackTimer();
+  feedback.value = kind;
+  feedbackTimeout = setTimeout(() => {
+    feedback.value = 'none';
+    feedbackTimeout = null;
+  }, 220);
+}
+
+function getBoundaryRect(): { left: number; top: number; right: number; bottom: number } | null {
+  if (!props.boundarySelector) return null;
+  const boundaryEl = document.querySelector<HTMLElement>(props.boundarySelector);
+  if (!boundaryEl) return null;
+  const rect = boundaryEl.getBoundingClientRect();
+  return {
+    left: rect.left,
+    top: rect.top,
+    right: rect.right,
+    bottom: rect.bottom,
+  };
+}
+
+function isOutsideBoundary(
+  boundary: { left: number; top: number; right: number; bottom: number },
+  clientX: number,
+  clientY: number
+) {
+  return clientX < boundary.left || clientX > boundary.right || clientY < boundary.top || clientY > boundary.bottom;
+}
+
+function onPointerMove(event: PointerEvent) {
+  if (!dragDrop?.dragState.active || dragDrop.dragState.draggableId !== props.draggableId) return;
+  emit('dragMove', {
+    draggableId: props.draggableId,
+    clientX: event.clientX,
+    clientY: event.clientY,
+  });
+}
+
+function teardownPointerListeners() {
+  document.removeEventListener('pointermove', onPointerMove);
+  document.removeEventListener('pointerup', onPointerUp);
+  document.removeEventListener('pointercancel', onPointerUp);
+}
+
+function onPointerUp(event: PointerEvent) {
+  teardownPointerListeners();
+  isPressed.value = false;
+  if (!dragDrop) return;
+  if (props.boundarySelector) {
+    const boundary = getBoundaryRect();
+    const clientX = Number.isFinite(event.clientX) && event.clientX >= 0 ? event.clientX : dragDrop.dragState.clientX;
+    const clientY = Number.isFinite(event.clientY) && event.clientY >= 0 ? event.clientY : dragDrop.dragState.clientY;
+    if (boundary && isOutsideBoundary(boundary, clientX, clientY)) {
+      dragDrop.cancelDrag();
+      flashFeedback('returned');
+      emit('cancel', {
+        draggableId: props.draggableId,
+        source: source.value,
+        reason: 'out-of-bounds',
+      });
+      return;
+    }
+  }
+  const endClientX = Number.isFinite(event.clientX) && event.clientX >= 0 ? event.clientX : dragDrop.dragState.clientX;
+  const endClientY = Number.isFinite(event.clientY) && event.clientY >= 0 ? event.clientY : dragDrop.dragState.clientY;
+  const result = dragDrop.endDrag<unknown>();
+  if (!result) return;
+
+  const payload: DraggableDropEvent<unknown> = {
+    ...result.event,
+    accepted: result.accepted,
+  };
+  if (result.accepted && result.event.target.kind === 'floating') {
+    floatingOffsetX.value = dragStartOffsetX.value + (endClientX - dragStartClientX.value);
+    floatingOffsetY.value = dragStartOffsetY.value + (endClientY - dragStartClientY.value);
+  }
+  if (result.accepted) {
+    const droppedBackToOrigin =
+      result.event.target.containerId === payload.source.containerId && result.event.target.index === payload.source.index;
+    flashFeedback(droppedBackToOrigin ? 'returned' : 'accepted');
+  } else {
+    flashFeedback('rejected');
+  }
+  emit('dragEnd', payload);
+  if (result.accepted) {
+    emit('drop', payload);
+  } else {
+    emit('cancel', {
+      draggableId: props.draggableId,
+      source: source.value,
+      reason: 'rejected',
+    });
+  }
+}
+
+function onPointerDown(event: PointerEvent) {
+  if (!dragDrop || props.disabled) {
+    emit('cancel', {
+      draggableId: props.draggableId,
+      source: source.value,
+      reason: 'disabled',
+    });
+    return;
+  }
+  if (props.canDrag && !props.canDrag({ item: props.item, source: source.value })) {
+    emit('cancel', {
+      draggableId: props.draggableId,
+      source: source.value,
+      reason: 'rejected',
+    });
+    return;
+  }
+
+  const el = rootEl.value;
+  if (!el) return;
+  /* At-rest box for the cursor clone only — before press scale changes layout */
+  const rectAtRest = el.getBoundingClientRect();
+  isPressed.value = true;
+  const boundary = getBoundaryRect();
+  dragStartClientX.value = event.clientX;
+  dragStartClientY.value = event.clientY;
+  dragStartOffsetX.value = floatingOffsetX.value;
+  dragStartOffsetY.value = floatingOffsetY.value;
+
+  dragDrop.startDrag({
+    draggableId: props.draggableId,
+    mode: props.dropMode,
+    item: props.item,
+    source: source.value,
+    shiftX: event.clientX - rectAtRest.left,
+    shiftY: event.clientY - rectAtRest.top,
+    clientX: event.clientX,
+    clientY: event.clientY,
+    previewWidth: rectAtRest.width,
+    previewHeight: rectAtRest.height,
+    boundary,
+  });
+
+  emit('dragStart', {
+    draggableId: props.draggableId,
+    source: source.value,
+    item: props.item,
+  });
+
+  document.addEventListener('pointermove', onPointerMove);
+  document.addEventListener('pointerup', onPointerUp);
+  document.addEventListener('pointercancel', onPointerUp);
+}
+
+onBeforeUnmount(() => {
+  teardownPointerListeners();
+  clearFeedbackTimer();
+});
+</script>

package/src/components/Draggable/contracts.ts

@@ -0,0 +1,82 @@
+export type GravityContainerKind = 'slot' | 'pool' | 'custom';
+
+export type GravityMode = 'target' | 'floating';
+
+export interface GravitySource {
+  containerId: string;
+  kind: GravityContainerKind;
+  index: number;
+}
+
+export interface GravityBoundary {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+}
+
+export interface GravityCanDragContext<TItem> {
+  item: TItem;
+  source: GravitySource;
+}
+
+export interface GravityHoverTarget {
+  id: string;
+  kind: 'slot' | 'pool';
+  containerId: string;
+  index: number;
+  accepts: boolean;
+}
+
+export interface GravityDropTarget {
+  kind: 'slot' | 'pool' | 'floating';
+  containerId: string | null;
+  index: number;
+}
+
+export interface GravityDropEvent<TItem> {
+  draggableId: string;
+  item: TItem;
+  source: GravitySource;
+  target: GravityDropTarget;
+}
+
+export interface GravityDraggableDropEvent<TItem> extends GravityDropEvent<TItem> {
+  accepted: boolean;
+}
+
+export type GravitySlotCollisionRule = 'replace' | 'swap' | 'reject';
+
+export interface GravitySlotDropEvent<TItem> extends GravityDropEvent<TItem> {
+  slotId: string;
+  swap: boolean;
+  collision: GravitySlotCollisionRule;
+  replacedItem?: TItem;
+}
+
+export interface GravityPoolReorderEvent<TItem> extends GravityDropEvent<TItem> {
+  poolId: string;
+  fromIndex: number;
+  toIndex: number;
+}
+
+export interface GravityPoolReceiveEvent<TItem> extends GravityDropEvent<TItem> {
+  poolId: string;
+  insertIndex: number;
+}
+
+/*
+ * Backwards-compatible aliases while the old DragDrop naming is phased out.
+ */
+export type DragDropContainerKind = GravityContainerKind;
+export type DragDropMode = GravityMode;
+export type DragDropSource = GravitySource;
+export type DragDropBoundary = GravityBoundary;
+export type DraggableCanDragContext<TItem> = GravityCanDragContext<TItem>;
+export type DragDropHoverTarget = GravityHoverTarget;
+export type DragDropDropTarget = GravityDropTarget;
+export type DragDropDropEvent<TItem> = GravityDropEvent<TItem>;
+export type DraggableDropEvent<TItem> = GravityDraggableDropEvent<TItem>;
+export type SlotDropEvent<TItem> = GravitySlotDropEvent<TItem>;
+export type PoolReorderEvent<TItem> = GravityPoolReorderEvent<TItem>;
+export type PoolReceiveEvent<TItem> = GravityPoolReceiveEvent<TItem>;

package/src/components/Draggable/internalDropLayer.ts

@@ -0,0 +1,126 @@
+import type {
+  DragDropDropEvent,
+  DragDropDropTarget,
+  DragDropHoverTarget,
+  DragDropMode,
+  DragDropSource,
+} from './contracts';
+
+export interface InternalDropTargetRegistration {
+  id: string;
+  kind: 'slot' | 'pool';
+  containerId: string;
+  resolveHover: (
+    clientX: number,
+    clientY: number,
+    context: {
+      item: unknown;
+      source: DragDropSource;
+    }
+  ) => Omit<DragDropHoverTarget, 'id' | 'kind' | 'containerId'> | null;
+  onDrop?: (payload: DragDropDropEvent<unknown>) => void;
+}
+
+interface ResolveDropTargetInput {
+  mode: DragDropMode;
+  hoverTarget: DragDropHoverTarget | null;
+  source: DragDropSource | null;
+}
+
+const FLOATING_TARGET: DragDropDropTarget = {
+  kind: 'floating',
+  containerId: null,
+  index: -1,
+};
+
+export function createInternalDropLayer() {
+  const targets = new Map<string, InternalDropTargetRegistration>();
+
+  function registerTarget(target: InternalDropTargetRegistration) {
+    targets.set(target.id, target);
+    return () => {
+      targets.delete(target.id);
+    };
+  }
+
+  function detectHoverTarget(
+    clientX: number,
+    clientY: number,
+    context: {
+      item: unknown;
+      source: DragDropSource;
+    }
+  ): DragDropHoverTarget | null {
+    for (const target of targets.values()) {
+      const resolved = target.resolveHover(clientX, clientY, context);
+      if (!resolved) continue;
+      return {
+        id: target.id,
+        kind: target.kind,
+        containerId: target.containerId,
+        index: resolved.index,
+        accepts: resolved.accepts,
+      };
+    }
+    return null;
+  }
+
+  function resolveDropTarget(input: ResolveDropTargetInput): { target: DragDropDropTarget; accepted: boolean } {
+    if (
+      input.hoverTarget &&
+      input.source &&
+      input.hoverTarget.containerId === input.source.containerId &&
+      input.hoverTarget.kind === input.source.kind &&
+      input.hoverTarget.index === input.source.index
+    ) {
+      return {
+        target: {
+          kind: input.hoverTarget.kind,
+          containerId: input.hoverTarget.containerId,
+          index: input.hoverTarget.index,
+        },
+        accepted: true,
+      };
+    }
+
+    if (input.hoverTarget && input.hoverTarget.accepts) {
+      return {
+        target: {
+          kind: input.hoverTarget.kind,
+          containerId: input.hoverTarget.containerId,
+          index: input.hoverTarget.index,
+        },
+        accepted: true,
+      };
+    }
+
+    if (input.mode === 'floating') {
+      return {
+        target: FLOATING_TARGET,
+        accepted: true,
+      };
+    }
+
+    return {
+      target: FLOATING_TARGET,
+      accepted: false,
+    };
+  }
+
+  function getTarget(targetId: string | null | undefined) {
+    if (!targetId) return null;
+    return targets.get(targetId) ?? null;
+  }
+
+  function clear() {
+    targets.clear();
+  }
+
+  return {
+    registerTarget,
+    detectHoverTarget,
+    resolveDropTarget,
+    getTarget,
+    clear,
+  };
+}