@mathscan/math-exercise-engine 1.1.7 → 1.1.8

package/dist/index.js

@@ -14239,6 +14239,29 @@ function useRotate(options) {
   const [rotation, setRotation] = React.useState(initialRotation);
   return { rotation, setRotation };
 }
+const REPEAT_DELAY_MS = 5e3;
+function useJiggle(isDragging) {
+  const [jiggling, setJiggling] = React.useState(true);
+  const [discovered, setDiscovered] = React.useState(false);
+  const timerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (isDragging && !discovered) {
+      setDiscovered(true);
+      if (timerRef.current) clearTimeout(timerRef.current);
+      setJiggling(false);
+    }
+  }, [isDragging, discovered]);
+  React.useEffect(() => () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+  }, []);
+  const onAnimationEnd = React.useCallback(() => {
+    setJiggling(false);
+    if (!discovered) {
+      timerRef.current = setTimeout(() => setJiggling(true), REPEAT_DELAY_MS);
+    }
+  }, [discovered]);
+  return { jiggling, onAnimationEnd };
+}
 const VW$2 = 320;
 const VH$2 = 44;
 const RULER_ASPECT_RATIO = VH$2 / VW$2;
@@ -14628,6 +14651,7 @@ const DraggableTool = ({
   const [isFlipped, setIsFlipped] = React.useState(false);
   const drag = useDrag({ initialPosition });
   const rotate = useRotate({ initialRotation });
+  const { jiggling, onAnimationEnd } = useJiggle(drag.isDragging);
   const dragRef = React.useRef(drag);
   const rotateRef = React.useRef(rotate);
   dragRef.current = drag;
@@ -14760,7 +14784,15 @@ const DraggableTool = ({
       onMouseMove: handleMouseMove,
       onMouseLeave: handleMouseLeave,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { pointerEvents: "none", display: "block" }, children: /* @__PURE__ */ jsxRuntime.jsx(ToolContent, { type, width, imageSrc, flipped: isFlipped }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: jiggling ? "tool-content-jiggle" : void 0,
+            onAnimationEnd,
+            style: { pointerEvents: "none", display: "block" },
+            children: /* @__PURE__ */ jsxRuntime.jsx(ToolContent, { type, width, imageSrc, flipped: isFlipped })
+          }
+        ),
         type === "set-square" && /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {