thisbeyond / solid-dnd

A lightweight, performant, extensible drag and drop toolkit for Solid JS.
https://solid-dnd.com
MIT License
516 stars 34 forks source link

Arbitrary drag move don't work with latest SolidJS version #71

Closed TiagoCavalcante closed 1 year ago

TiagoCavalcante commented 1 year ago

The code from the arbitrary drag move (copied below) doesn't work with the latest SolidJS version

import { render } from "solid-js/web";

import {
  DragDropProvider,
  DragDropSensors,
  DragEventHandler,
  DragOverlay,
  createDraggable,
} from "@thisbeyond/solid-dnd";

const Draggable = (props: { id: number }) => {
  const draggable = createDraggable(props.id);
  return (
    <div
      use:draggable
      class="draggable absolute"
      classList={{ "opacity-25": draggable.isActiveDraggable }}
      style={{ top: 0, left: (props.id === 1 ? 0 : 125) + "px" }}
    >
      Draggable {props.id}
    </div>
  );
};

const DragMoveExample = () => {
  let transform = { x: 0, y: 0 };

  const onDragMove: DragEventHandler = ({ overlay }) => {
    if (overlay) {
      transform = { ...overlay.transform };
    }
  };

  const onDragEnd: DragEventHandler = ({ draggable }) => {
    const node = draggable.node;
    node.style.setProperty("top", node.offsetTop + transform.y + "px");
    node.style.setProperty("left", node.offsetLeft + transform.x + "px");
  };

  return (
    <DragDropProvider onDragMove={onDragMove} onDragEnd={onDragEnd}>
      <DragDropSensors />
      <div class="min-h-15 w-full h-full relative">
        <Draggable id={1} />
        <Draggable id={2} />
      </div>
      <DragOverlay>
        {(draggable) => <div class="draggable">Draggable {draggable.id}</div>}
      </DragOverlay>
    </DragDropProvider>
  );
};

render(DragMoveExample, document.getElementById("app")!);

This gives the following error:

Uncaught TypeError: (intermediate value)() is null
    createPointerSensor create-pointer-sensor.js:4
    DragDropSensors drag-drop-sensors.jsx:3
    c dev.js:516
    untrack dev.js:421
    c dev.js:512
    runComputation dev.js:696
    updateComputation dev.js:679
    devComponent dev.js:523
    createComponent dev.js:1231
    get children index.tsx:40
    get dev.js:1302
    get children drag-drop-context.jsx:503
    res dev.js:971
    runComputation dev.js:696
    updateComputation dev.js:679
    createMemo dev.js:238
    children dev.js:577
    res dev.js:971
    untrack dev.js:421
    provider dev.js:967
    runComputation dev.js:696
    updateComputation dev.js:679
    createRenderEffect dev.js:205
    provider dev.js:967
    c dev.js:516
    untrack dev.js:421
    c dev.js:512
    runComputation dev.js:696
    updateComputation dev.js:679
    devComponent dev.js:523
    createComponent dev.js:1231
    DragDropProvider drag-drop-context.jsx:503
    c dev.js:516
    untrack dev.js:421
    c dev.js:512
    runComputation dev.js:696
    updateComputation dev.js:679
    devComponent dev.js:523
    createComponent dev.js:1231
    _Hot$$DragMoveExample index.tsx:39
    hmrCompWrapper @solid-refresh:16
    render dev.js:93
    updateFn dev.js:168
    runUpdates dev.js:788
    createRoot dev.js:176
    render dev.js:91
    <anonymous> index.tsx:5
create-pointer-sensor.js:4:108
martinpengellyphillips commented 1 year ago

See #67 and let me know if it's the same issue.

TiagoCavalcante commented 1 year ago

Sorry for the delay, it was the same issue