@micromag/screen-game-sort 0.4.55 → 0.4.56

package/es/index.js

@@ -8,7 +8,7 @@ import { useDrag } from '@use-gesture/react';
 import classNames from 'classnames';
 import isString from 'lodash/isString';
 import shuffle from 'lodash/shuffle';
-import { useMemo, useState, useRef, useEffect, useCallback } from 'react';
+import { useMemo, useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
 import { ScreenElement } from '@micromag/core/components';
 import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
 import { useDimensionObserver, useTrackScreenEvent } from '@micromag/core/hooks';
@@ -138,7 +138,7 @@ function GameSort(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     validated = _useState6[0],
     setValidated = _useState6[1];
-  var initialSortedItemsRef = useRef(sortedItems);
+  useRef(sortedItems);
   var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
     resultsVisible = _useState8[0],
@@ -169,7 +169,7 @@ function GameSort(_ref) {
   }, [sortedItems, getNewSortedItems]);
   var _useSprings = useSprings((items || []).length, function () {
       return {
-        y: "0%",
+        y: 0,
         scale: 1
       };
     }, []),
@@ -211,7 +211,7 @@ function GameSort(_ref) {
       if (item === dragItem) {
         var _deltaY = dragY - currentY;
         return {
-          y: "".concat(_deltaY / currentHeight * 100, "%"),
+          y: currentHeight !== 0 ? _deltaY / currentHeight * 100 : 0,
           scale: 1.02,
           immediate: true
         };
@@ -230,7 +230,7 @@ function GameSort(_ref) {
       }, 0);
       var deltaY = newY - currentY;
       return {
-        y: "".concat(deltaY / currentHeight * 100, "%"),
+        y: currentHeight !== 0 ? deltaY / currentHeight * 100 : 0,
         scale: 1,
         immediate: initial
       };
@@ -239,14 +239,57 @@ function GameSort(_ref) {
       setInitialSorted(true);
     }
   }, [api]);
-  useEffect(function () {
-    if (!isView) {
+
+  // useLayoutEffect runs AFTER react-spring's internal layout effect which
+  // resets springs to {y:0, scale:1}. We api.stop() the reset, then immediately
+  // re-apply the correct shuffled positions before the browser paints.
+  var springsReady = useRef(false);
+  useLayoutEffect(function () {
+    if (!isView || itemsHeight === 0) {
       return;
     }
-    updateSpring(sortedItems, {
-      initial: initialSortedItemsRef.current === sortedItems
+    api.stop();
+    var refs = sortedItems.map(function (it) {
+      return elementsRef.current[it.id] || null;
+    });
+    var initialRefs = (items || []).map(function (it) {
+      return elementsRef.current[it.id] || null;
+    });
+    var initialHeights = initialRefs.map(function (it) {
+      var _it$getBoundingClient3;
+      return (it === null || it === void 0 || (_it$getBoundingClient3 = it.getBoundingClientRect()) === null || _it$getBoundingClient3 === void 0 ? void 0 : _it$getBoundingClient3.height) || 0;
+    });
+    var heights = refs.map(function (it) {
+      var _it$getBoundingClient4;
+      return (it === null || it === void 0 || (_it$getBoundingClient4 = it.getBoundingClientRect()) === null || _it$getBoundingClient4 === void 0 ? void 0 : _it$getBoundingClient4.height) || 0;
+    });
+    if (!heights.some(function (h) {
+      return h > 0;
+    })) return;
+    api.start(function (itemIndex) {
+      var item = (items || [])[itemIndex] || null;
+      var sortedIndex = sortedItems.findIndex(function (it) {
+        return it.id === item.id;
+      });
+      var currentHeight = initialHeights[itemIndex] || 0;
+      var currentY = initialHeights.slice(0, itemIndex).reduce(function (acc, h) {
+        return acc + h;
+      }, 0);
+      var newY = heights.slice(0, sortedIndex).reduce(function (acc, h) {
+        return acc + h;
+      }, 0);
+      var deltaY = newY - currentY;
+      return {
+        y: currentHeight !== 0 ? deltaY / currentHeight * 100 : 0,
+        scale: 1,
+        immediate: true
+      };
     });
-  }, [sortedItems, itemsHeight]);
+    if (!springsReady.current) {
+      springsReady.current = true;
+      setInitialSorted(true);
+    }
+  });
   var bind = useDrag(function (_ref3) {
     var _ref3$args = _slicedToArray(_ref3.args, 1),
       itemIndex = _ref3$args[0],
@@ -279,8 +322,8 @@ function GameSort(_ref) {
       return elementsRef.current[it.id] || null;
     });
     var heights = refs.map(function (it) {
-      var _it$getBoundingClient3;
-      return (it === null || it === void 0 || (_it$getBoundingClient3 = it.getBoundingClientRect()) === null || _it$getBoundingClient3 === void 0 ? void 0 : _it$getBoundingClient3.height) || 0;
+      var _it$getBoundingClient5;
+      return (it === null || it === void 0 || (_it$getBoundingClient5 = it.getBoundingClientRect()) === null || _it$getBoundingClient5 === void 0 ? void 0 : _it$getBoundingClient5.height) || 0;
     });
     var ys = heights.map(function (itemHeight, heightIndex) {
       var endY = itemHeight + heights.slice(0, heightIndex).reduce(function (acc, h) {
@@ -413,6 +456,7 @@ function GameSort(_ref) {
               var y = _ref6.y,
                 scale = _ref6.scale;
               var item = items[itemIndex] || {};
+              // console.log('item', item, itemIndex);
               var _ref7 = item || {},
                 _ref7$id = _ref7.id,
                 id = _ref7$id === void 0 ? null : _ref7$id,
@@ -441,7 +485,7 @@ function GameSort(_ref) {
                 },
                 style: _objectSpread(_objectSpread({
                   transform: y.to(function (yValue) {
-                    return "translateY(".concat(yValue, ")");
+                    return "translateY(".concat(yValue, "%)");
                   })
                 }, getStyleFromText(itemsTextStyle)), getStyleFromText(labelTextStyle))
               }, bind(itemIndex)), {}, {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-game-sort",
-    "version": "0.4.55",
+    "version": "0.4.56",
     "private": false,
     "description": "",
     "keywords": [
@@ -87,6 +87,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "9708f0016de0cf18dcd6a6aa5bc70d7f00b86d9f",
+    "gitHead": "8d1c7dca724abbc01da7cebbe6913c77ee27f0b7",
     "types": "es/index.d.ts"
 }