@proyecto-viviana/solidaria 0.1.3 → 0.2.0

package/src/interactions/createMove.ts

@@ -1,289 +0,0 @@
-/**
- * createMove - Handles move interactions across mouse, touch, pointer, and keyboard.
- *
- * Port of @react-aria/interactions useMove, adapted for SolidJS.
- */
-
-import { JSX, createSignal, createEffect, onCleanup } from 'solid-js';
-import { disableTextSelection, restoreTextSelection, createGlobalListeners } from '../utils';
-
-export type PointerType = 'mouse' | 'pen' | 'touch' | 'keyboard';
-
-interface BaseMoveEvent {
-  pointerType: PointerType;
-  shiftKey: boolean;
-  ctrlKey: boolean;
-  metaKey: boolean;
-  altKey: boolean;
-}
-
-export interface MoveStartEvent extends BaseMoveEvent {
-  type: 'movestart';
-}
-
-export interface MoveMoveEvent extends BaseMoveEvent {
-  type: 'move';
-  deltaX: number;
-  deltaY: number;
-}
-
-export interface MoveEndEvent extends BaseMoveEvent {
-  type: 'moveend';
-}
-
-export interface MoveEvents {
-  onMoveStart?: (e: MoveStartEvent) => void;
-  onMove?: (e: MoveMoveEvent) => void;
-  onMoveEnd?: (e: MoveEndEvent) => void;
-}
-
-export interface MoveResult {
-  /** Props to spread on the target element. */
-  moveProps: JSX.HTMLAttributes<HTMLElement>;
-}
-
-interface MoveState {
-  didMove: boolean;
-  lastPosition: { pageX: number; pageY: number } | null;
-  id: number | null;
-}
-
-function createBaseEvent(
-  originalEvent: { shiftKey: boolean; ctrlKey: boolean; metaKey: boolean; altKey: boolean },
-  pointerType: PointerType
-): BaseMoveEvent {
-  return {
-    pointerType,
-    shiftKey: originalEvent.shiftKey,
-    ctrlKey: originalEvent.ctrlKey,
-    metaKey: originalEvent.metaKey,
-    altKey: originalEvent.altKey,
-  };
-}
-
-/**
- * Handles move interactions across mouse, touch, pointer, and keyboard.
- */
-export function createMove(props: MoveEvents = {}): MoveResult {
-  const { onMoveStart, onMove, onMoveEnd } = props;
-
-  const state: MoveState = {
-    didMove: false,
-    lastPosition: null,
-    id: null,
-  };
-
-  const { addGlobalListener, removeGlobalListener } = createGlobalListeners();
-  const [pointerDown, setPointerDown] = createSignal<'pointer' | 'mouse' | 'touch' | null>(null);
-
-  const move = (
-    originalEvent: { shiftKey: boolean; ctrlKey: boolean; metaKey: boolean; altKey: boolean },
-    pointerType: PointerType,
-    deltaX: number,
-    deltaY: number
-  ) => {
-    if (deltaX === 0 && deltaY === 0) {
-      return;
-    }
-
-    if (!state.didMove) {
-      state.didMove = true;
-      onMoveStart?.({
-        type: 'movestart',
-        ...createBaseEvent(originalEvent, pointerType),
-      });
-    }
-
-    onMove?.({
-      type: 'move',
-      deltaX,
-      deltaY,
-      ...createBaseEvent(originalEvent, pointerType),
-    });
-  };
-
-  const end = (originalEvent: { shiftKey: boolean; ctrlKey: boolean; metaKey: boolean; altKey: boolean }, pointerType: PointerType) => {
-    restoreTextSelection();
-    if (state.didMove) {
-      onMoveEnd?.({
-        type: 'moveend',
-        ...createBaseEvent(originalEvent, pointerType),
-      });
-    }
-  };
-
-  createEffect(() => {
-    const activePointer = pointerDown();
-    if (!activePointer) return;
-
-    if (activePointer === 'pointer') {
-      const onPointerMove = (e: PointerEvent) => {
-        if (e.pointerId === state.id) {
-          const pointerType = (e.pointerType || 'mouse') as PointerType;
-          move(e, pointerType, e.pageX - (state.lastPosition?.pageX ?? 0), e.pageY - (state.lastPosition?.pageY ?? 0));
-          state.lastPosition = { pageX: e.pageX, pageY: e.pageY };
-        }
-      };
-
-      const onPointerUp = (e: PointerEvent) => {
-        if (e.pointerId === state.id) {
-          const pointerType = (e.pointerType || 'mouse') as PointerType;
-          end(e, pointerType);
-          state.id = null;
-          removeGlobalListener('pointermove', onPointerMove, { isWindow: true });
-          removeGlobalListener('pointerup', onPointerUp, { isWindow: true });
-          removeGlobalListener('pointercancel', onPointerUp, { isWindow: true });
-          setPointerDown(null);
-        }
-      };
-
-      addGlobalListener('pointermove', onPointerMove, { isWindow: true });
-      addGlobalListener('pointerup', onPointerUp, { isWindow: true });
-      addGlobalListener('pointercancel', onPointerUp, { isWindow: true });
-      onCleanup(() => {
-        removeGlobalListener('pointermove', onPointerMove, { isWindow: true });
-        removeGlobalListener('pointerup', onPointerUp, { isWindow: true });
-        removeGlobalListener('pointercancel', onPointerUp, { isWindow: true });
-      });
-    }
-
-    // Mouse/touch listeners are attached directly in their handlers.
-  });
-
-  const start = () => {
-    disableTextSelection();
-    state.didMove = false;
-  };
-
-  const moveProps: JSX.HTMLAttributes<HTMLElement> = {};
-
-  const hasPointerEvents = typeof window !== 'undefined' && typeof window.PointerEvent !== 'undefined';
-
-  moveProps.onMouseDown = (e: MouseEvent) => {
-    if (pointerDown() != null) {
-      return;
-    }
-    if (e.button === 0) {
-      start();
-      e.stopPropagation();
-      e.preventDefault();
-      state.lastPosition = { pageX: e.pageX, pageY: e.pageY };
-      setPointerDown('mouse');
-
-      const onMouseMove = (event: MouseEvent) => {
-        move(
-          event,
-          'mouse',
-          event.pageX - (state.lastPosition?.pageX ?? 0),
-          event.pageY - (state.lastPosition?.pageY ?? 0)
-        );
-        state.lastPosition = { pageX: event.pageX, pageY: event.pageY };
-      };
-      const onMouseUp = (event: MouseEvent) => {
-        end(event, 'mouse');
-        removeGlobalListener('mousemove', onMouseMove);
-        removeGlobalListener('mouseup', onMouseUp);
-        setPointerDown(null);
-      };
-      addGlobalListener('mousemove', onMouseMove);
-      addGlobalListener('mouseup', onMouseUp);
-    }
-  };
-
-  moveProps.onTouchStart = (e: TouchEvent) => {
-    if (pointerDown() != null || e.changedTouches.length === 0 || state.id != null) {
-      return;
-    }
-    const { pageX, pageY, identifier } = e.changedTouches[0];
-    start();
-    e.stopPropagation();
-    e.preventDefault();
-    state.lastPosition = { pageX, pageY };
-    state.id = identifier;
-    setPointerDown('touch');
-
-    const onTouchMove = (event: TouchEvent) => {
-      const touchIndex = [...event.changedTouches].findIndex(
-        ({ identifier: touchId }) => touchId === state.id
-      );
-      if (touchIndex >= 0) {
-        const { pageX: moveX, pageY: moveY } = event.changedTouches[touchIndex];
-        move(event, 'touch', moveX - (state.lastPosition?.pageX ?? 0), moveY - (state.lastPosition?.pageY ?? 0));
-        state.lastPosition = { pageX: moveX, pageY: moveY };
-      }
-    };
-    const onTouchEnd = (event: TouchEvent) => {
-      const touchIndex = [...event.changedTouches].findIndex(
-        ({ identifier: touchId }) => touchId === state.id
-      );
-      if (touchIndex >= 0) {
-        end(event, 'touch');
-        state.id = null;
-        removeGlobalListener('touchmove', onTouchMove);
-        removeGlobalListener('touchend', onTouchEnd);
-        removeGlobalListener('touchcancel', onTouchEnd);
-        setPointerDown(null);
-      }
-    };
-    addGlobalListener('touchmove', onTouchMove);
-    addGlobalListener('touchend', onTouchEnd);
-    addGlobalListener('touchcancel', onTouchEnd);
-  };
-
-  if (hasPointerEvents) {
-    moveProps.onPointerDown = (e: PointerEvent) => {
-      const button = e.button ?? 0;
-      if (button === 0 && state.id == null) {
-        start();
-        e.stopPropagation();
-        e.preventDefault();
-        state.lastPosition = { pageX: e.pageX, pageY: e.pageY };
-        state.id = e.pointerId;
-        setPointerDown('pointer');
-      }
-    };
-  }
-
-  const triggerKeyboardMove = (
-    e: KeyboardEvent,
-    deltaX: number,
-    deltaY: number
-  ) => {
-    start();
-    move(e, 'keyboard', deltaX, deltaY);
-    end(e, 'keyboard');
-  };
-
-  moveProps.onKeyDown = (e: KeyboardEvent) => {
-    switch (e.key) {
-      case 'Left':
-      case 'ArrowLeft':
-        e.preventDefault();
-        e.stopPropagation();
-        triggerKeyboardMove(e, -1, 0);
-        break;
-      case 'Right':
-      case 'ArrowRight':
-        e.preventDefault();
-        e.stopPropagation();
-        triggerKeyboardMove(e, 1, 0);
-        break;
-      case 'Up':
-      case 'ArrowUp':
-        e.preventDefault();
-        e.stopPropagation();
-        triggerKeyboardMove(e, 0, -1);
-        break;
-      case 'Down':
-      case 'ArrowDown':
-        e.preventDefault();
-        e.stopPropagation();
-        triggerKeyboardMove(e, 0, 1);
-        break;
-      default:
-        break;
-    }
-  };
-
-  return { moveProps };
-}