simultaneous updates bug fixed

adnan-td · Jul 2, 2023 · ef4d44e · ef4d44e
1 parent c03a1d7
commit ef4d44e
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -24,8 +24,10 @@
     "build-storybook": "storybook build",
     "chromatic": "chromatic --exit-zero-on-changes"
   },
+  "dependencies": {
+    "framer-motion": "^10.12.18"
+  },
   "peerDependencies": {
-    "framer-motion": "^10.12.17",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -47,7 +49,6 @@
     "@types/react-dom": "^18.0.11",
     "babel-loader": "^9.1.2",
     "chromatic": "^6.19.9",
-    "framer-motion": "^10.12.17",
     "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -76,7 +77,6 @@
   "bugs": {
     "url": "https://github.com/Adnan-S-Husain/react-mouse-follower/issues"
   },
-  "readme": "ERROR: No README data found!",
-  "homepage": "https://github.com/Adnan-S-Husain/react-mouse-follower#readme",
-  "_id": "react-mouse-follower@1.0.6"
+  "readme": "README.md",
+  "homepage": "https://github.com/Adnan-S-Husain/react-mouse-follower#readme"
 }
diff --git a/src/component/follower_div.tsx b/src/component/follower_div.tsx
@@ -71,7 +71,7 @@ export function FollowerDiv({ pos, options }: { pos: MousePosition; options: Mou
             overflow: 'hidden',
           }}
         >
-          {options.text ? (
+          {options.text && !options.backgroundElement ? (
             <p
               style={{
                 width: '85%',

diff --git a/src/context/mouse.context.tsx b/src/context/mouse.context.tsx
@@ -18,8 +18,7 @@ export const MousePropertiesContext = createContext<ContextInterface>(null);
 export const FollowerProvider = ({ children }: Props) => {
   const layerStack = useStack(defaultMouseProperties);
   const addLayer = (layerOptions: MouseSettings) => {
-    const properties = { ...layerStack.peek(), ...layerOptions };
-    layerStack.push(properties);
+    layerStack.push(layerOptions);
   };
 
   const removeLayer = () => {

diff --git a/src/stories/FollowerBasic.stories.tsx b/src/stories/FollowerBasic.stories.tsx
@@ -17,7 +17,11 @@ const meta: Meta = {
   argTypes: {
     backgroundColor: { control: 'color', defaultValue: 'black' },
     scale: { control: 'number', min: 0.1, max: 2, step: 0.1, defaultValue: 1 },
-    inverted: { control: 'boolean', defaultValue: false },
+    radius: { control: 'number', min: 12, max: 200, step: 1, defaultValue: 12 },
+    speed: { control: 'number', min: 0, max: 10, step: 0.1, defaultValue: 1 },
+    text: { control: 'text', defaultValue: '' },
+    textColor: { control: 'color', defaultValue: 'white' },
+    textFontSize: { control: 'text', defaultValue: '12px' },
   },
   parameters: {
     layout: 'fullscreen',

diff --git a/src/stories/UpdateFollower.stories.tsx b/src/stories/UpdateFollower.stories.tsx
@@ -7,7 +7,7 @@ import './css/update_follower.css';
 
 const meta: Meta = {
   title: 'Components/UpdateFollower',
-  component: UpdateFollower,
+  component: undefined,
   parameters: {
     layout: 'fullscreen',
   },

diff --git a/src/util/stack_hook.ts b/src/util/stack_hook.ts
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import type { MouseSettings } from '../types/index.js';
 
 export const useStack = (
@@ -16,10 +16,13 @@ export const useStack = (
   const [stack, setStack] = useState<MouseSettings[]>([defaultMouseProperties]);
 
   const push = (options: MouseSettings): void => {
-    const item: MouseSettings = {
-      ...options,
-    };
-    setStack((prevStack) => [...prevStack, item]);
+    setStack((prevStack) => {
+      const item: MouseSettings = {
+        ...prevStack[prevStack.length - 1],
+        ...options,
+      };
+      return [...prevStack, item];
+    });
   };
 
   const pop = (): MouseSettings | undefined => {
@@ -48,9 +51,16 @@ export const useStack = (
   };
 
   const logStack = (): void => {
-    console.log(stack);
+    console.log('logging stack');
+    stack.forEach((item, i) => {
+      console.log(i, item);
+    });
   };
 
+  useEffect(() => {
+    logStack();
+  }, [stack]);
+
   return {
     stack,
     push,

diff --git a/yarn.lock b/yarn.lock
@@ -4357,10 +4357,10 @@ forwarded@0.2.0:
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
   integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
 
-framer-motion@^10.12.17:
-  version "10.12.17"
-  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.12.17.tgz#0e891aaddbe6049267c413449945af95585cbc87"
-  integrity sha512-IR+aAYntsyu6ofyxqQV4QYotmOqzcuKxhqNpfc3DXJjNWOPpOeSyH0A+In3IEBu49Yx/+PNht+YMeZSdCNaYbw==
+framer-motion@^10.12.18:
+  version "10.12.18"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.12.18.tgz#92015860b6468a82e76c4739fcae81e1f6723b3f"
+  integrity sha512-cfhiUpPbj+0eEWKjuD+5cz5cMqH71xOtMxGiS/cSGfHn2OlHIEAqFnFyzEMENw5PxWR9bMVhatzzpD6lexmHZQ==
   dependencies:
     tslib "^2.4.0"
   optionalDependencies: