Can remove all attributes added to the DOM elements and reset the state when destroying?

[tuantv49]

Is there a way to ensure that when destroying Swapy, all attributes added to the DOM elements are completely removed, and all states of Swapy are reset?
Currently, when calling swapy.destroy(), the added attributes still exist in the DOM elements.

[TahaSh]

This is now the default behavior of Swapy v1.0. Let me know if you have questions :)

[tuantv49]

@TahaSh Thanks for your updates.
By the way, in Reactjs, when i tried creating swapy by setting manualSwap: false, the dynamic animation works as in the demo, but when I change it to manualSwap: true, the dynamic animation no longer works as in the demo.
Is there any reason that could affect the animation?

[TahaSh]

manualSwap is needed for use cases where you're adding or removing items or slots using a framework. It’s unrelated to animation. You can learn about it in the docs. Let me know if you have any questions. Thanks!

[tuantv49]

@TahaSh I saw in the React Dynamic docs that we should not display data directly, but instead, use slottedItems. Is this a strict requirement?
I tried displaying the data directly, and indeed it caused issues, with the onSwap function being called continuously as the cursor position moved. Is there a way to display data directly without using slottedItems while still ensuring that swapy works correctly?

In my case, I am using React Mosaic to split the display windows, and the display depends on the configuration (an example below). I want to combine using swapy to swap between the windows. Do you have any ideas for this scenario?

const App = () => {
  const { tiles } = useTilesContext();
  const [tileConfigs, setTileConfigs] = useState<any>(null);

  const swapyRef = useRef<Swapy | null>(null);
  const [slotItemMap, setSlotItemMap] = useState<SlotItemMapArray>([]);

  const slottedItems = useMemo(() => {
    return utils.toSlottedItems(tiles, 'tileId', slotItemMap);
  }, [tiles, slotItemMap]);

  useEffect(() => {
    utils.dynamicSwapy(swapyRef.current, tiles, 'tileId', slotItemMap, setSlotItemMap, true);
  }, [tiles]);

  useEffect(() => {
    const mosaicRoot = document.querySelector('.mosaic-root') as HTMLElement;
    if (mosaicRoot && tiles.length > 1) {

      swapyRef.current = createSwapy(mosaicRoot, {
        manualSwap: true,
        // animation: 'dynamic',
        // autoScrollOnDrag: true,
        // swapMode: 'drop',
        // enabled: true,
        // dragAxis: 'x',
        // dragOnHold: true
      });

      swapyRef.current.onSwap((event) => {
        console.log('onSwap ==> ', event); // this is being called continuously as the cursor position moved
        setSlotItemMap(event.newSlotItemMap.asArray);
      });

      swapyRef.current.onSwapEnd((event) => {
        console.log('onSwapEnd ==> ', event);
      });
  
    }
    return () => {
      swapyRef.current?.destroy();
    };
  }, [tiles]);

  useEffect(() => {
    let initialConfig = null;
    const [firstTile, secondTile, thirdTile] = tiles;

    const tileLength = tiles?.length || 0;

    if (tileLength === 1) {
      initialConfig = firstTile?.tileId;
    } else if (tileLength === 2) {
      initialConfig = {
        splitPercentage: 50,
        direction: 'row',
        first: firstTile?.tileId,
        second: secondTile?.tileId,
      };
    } else if (tileLength === 3) {
      initialConfig = {
        splitPercentage: 66.6,
        direction: 'row',
        first: firstTile?.tileId,
        second: {
          direction: 'column',
          first: secondTile?.tileId,
          second: thirdTile?.tileId,
          splitPercentage: 50,
        },
      };
    } else {
      initialConfig = null;
    }

    setTileConfigs(initialConfig);
  }, [tiles]);

  return (
    <Mosaic
      renderTile={(id, path) => {
        const tileItem = tiles?.find((t) => t?.tileId === id);
        const indexOfTile = tiles?.findIndex((t) => t?.tileId === id);
        if (!tileItem) {
          return <></>;
        }
        return (
          <div className="data-slot" data-swapy-slot={tileItem.tileId}>
            <div className="data-item" data-swapy-item={tileItem.tileId}>
              <MosaicWindow
                path={path}
                title={tileItem.title}
                draggable={false}
                renderToolbar={({ title }) => {
                  return (
                    <div className="tile-toolbar">
                      <span className="title">
                        {title}
                      </span>
                    </div>
                  );
                }}
              >
                <div className="tile-content">{tileItem.content}</div>
              </MosaicWindow>
              </div>
            </div>
        );
      }}
      value={tileConfigs}
    />
  );
};