@pathscale/ui 0.0.148 → 0.0.149

package/dist/index.js

@@ -10431,68 +10431,8 @@ const FloatingDock_DockItem = (props)=>{
     let iconRef;
     const [hovered, setHovered] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
     const cfg = props.cfg;
-    const sW = createSpring(cfg.baseSize, cfg.springOpts);
-    const sH = createSpring(cfg.baseSize, cfg.springOpts);
-    const sIW = createSpring(cfg.iconSize, cfg.springOpts);
-    const sIH = createSpring(cfg.iconSize, cfg.springOpts);
-    let rafId;
-    let prevTime = 0;
-    let lastMousePos = 1 / 0;
-    let loopRunning = false;
-    const startLoop = ()=>{
-        if (loopRunning || !cfg.magnify) return;
-        loopRunning = true;
-        prevTime = 0;
-        rafId = requestAnimationFrame(tick);
-    };
-    const stopLoop = ()=>{
-        if (void 0 !== rafId) cancelAnimationFrame(rafId);
-        rafId = void 0;
-        loopRunning = false;
-    };
-    const tick = (time)=>{
-        const dt = prevTime ? Math.min((time - prevTime) / 1000, 0.05) : 1 / 60;
-        prevTime = time;
-        const mp = props.mousePos();
-        if (mp !== lastMousePos) {
-            lastMousePos = mp;
-            if (wrapRef) {
-                const b = wrapRef.getBoundingClientRect();
-                const isH = "horizontal" === cfg.orientation;
-                const center = isH ? b.x + b.width / 2 : b.y + b.height / 2;
-                const dist = Math.abs(mp - center);
-                const ts = mp === 1 / 0 ? cfg.baseSize : mapRange(dist, 0, cfg.magnifyRange, cfg.hoverSize, cfg.baseSize);
-                const ti = mp === 1 / 0 ? cfg.iconSize : mapRange(dist, 0, cfg.magnifyRange, cfg.hoverIconSize, cfg.iconSize);
-                sW.set(ts);
-                sH.set(ts);
-                sIW.set(ti);
-                sIH.set(ti);
-            }
-        }
-        sW.step(dt);
-        sH.step(dt);
-        sIW.step(dt);
-        sIH.step(dt);
-        if (wrapRef) {
-            wrapRef.style.width = `${sW.get()}px`;
-            wrapRef.style.height = `${sH.get()}px`;
-        }
-        if (iconRef) {
-            iconRef.style.width = `${sIW.get()}px`;
-            iconRef.style.height = `${sIH.get()}px`;
-        }
-        if (sW.settled() && sH.settled() && sIW.settled() && sIH.settled()) return void stopLoop();
-        rafId = requestAnimationFrame(tick);
-    };
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
-        if (!cfg.magnify) return;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
-            props.mousePos();
-            startLoop();
-        });
-    });
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
-        stopLoop();
+        if (wrapRef && iconRef) props.registerRefs(wrapRef, iconRef);
     });
     const handleClick = (e)=>{
         if (props.item.onClick) {
@@ -10503,10 +10443,7 @@ const FloatingDock_DockItem = (props)=>{
     const inner = (()=>{
         var _el$ = FloatingDock_tmpl$2(), _el$3 = _el$.firstChild;
         _el$.addEventListener("mouseleave", ()=>setHovered(false));
-        _el$.addEventListener("mouseenter", ()=>{
-            setHovered(true);
-            startLoop();
-        });
+        _el$.addEventListener("mouseenter", ()=>setHovered(true));
         var _ref$ = wrapRef;
         "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : wrapRef = _el$;
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
@@ -10574,6 +10511,82 @@ const FloatingDock_DockItem = (props)=>{
 const FloatingDockDesktop = (props)=>{
     const [mousePos, setMousePos] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(1 / 0);
     const isH = ()=>"horizontal" === props.cfg.orientation;
+    const cfg = props.cfg;
+    const itemSprings = [];
+    let rafId;
+    let prevTime = 0;
+    let lastMousePos = 1 / 0;
+    let loopRunning = false;
+    const startLoop = ()=>{
+        if (loopRunning || !cfg.magnify) return;
+        loopRunning = true;
+        prevTime = 0;
+        rafId = requestAnimationFrame(tick);
+    };
+    const stopLoop = ()=>{
+        if (void 0 !== rafId) cancelAnimationFrame(rafId);
+        rafId = void 0;
+        loopRunning = false;
+    };
+    const tick = (time)=>{
+        const dt = prevTime ? Math.min((time - prevTime) / 1000, 0.05) : 1 / 60;
+        prevTime = time;
+        const mp = mousePos();
+        if (mp !== lastMousePos) {
+            lastMousePos = mp;
+            const centers = [];
+            for(let i = 0; i < itemSprings.length; i++){
+                const wrap = itemSprings[i].wrapRef;
+                if (wrap) {
+                    const b = wrap.getBoundingClientRect();
+                    centers[i] = isH() ? b.x + b.width / 2 : b.y + b.height / 2;
+                } else centers[i] = 0;
+            }
+            for(let i = 0; i < itemSprings.length; i++){
+                const s = itemSprings[i];
+                if (!s.wrapRef) continue;
+                const dist = Math.abs(mp - centers[i]);
+                const ts = mp === 1 / 0 ? cfg.baseSize : mapRange(dist, 0, cfg.magnifyRange, cfg.hoverSize, cfg.baseSize);
+                const ti = mp === 1 / 0 ? cfg.iconSize : mapRange(dist, 0, cfg.magnifyRange, cfg.hoverIconSize, cfg.iconSize);
+                s.sW.set(ts);
+                s.sH.set(ts);
+                s.sIW.set(ti);
+                s.sIH.set(ti);
+            }
+        }
+        let allSettled = true;
+        for(let i = 0; i < itemSprings.length; i++){
+            const s = itemSprings[i];
+            s.sW.step(dt);
+            s.sH.step(dt);
+            s.sIW.step(dt);
+            s.sIH.step(dt);
+            if (allSettled && !(s.sW.settled() && s.sH.settled() && s.sIW.settled() && s.sIH.settled())) allSettled = false;
+        }
+        for(let i = 0; i < itemSprings.length; i++){
+            const s = itemSprings[i];
+            if (s.wrapRef) {
+                s.wrapRef.style.width = `${s.sW.get()}px`;
+                s.wrapRef.style.height = `${s.sH.get()}px`;
+            }
+            if (s.iconRef) {
+                s.iconRef.style.width = `${s.sIW.get()}px`;
+                s.iconRef.style.height = `${s.sIH.get()}px`;
+            }
+        }
+        if (allSettled) return void stopLoop();
+        rafId = requestAnimationFrame(tick);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        if (!cfg.magnify) return;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+            mousePos();
+            startLoop();
+        });
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        stopLoop();
+    });
     return (()=>{
         var _el$6 = FloatingDock_tmpl$5();
         _el$6.addEventListener("mouseleave", ()=>setMousePos(1 / 0));
@@ -10582,23 +10595,33 @@ const FloatingDockDesktop = (props)=>{
             get each () {
                 return props.items;
             },
-            children: (item)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FloatingDock_DockItem, {
+            children: (item, idx)=>{
+                const springs = {
+                    sW: createSpring(cfg.baseSize, cfg.springOpts),
+                    sH: createSpring(cfg.baseSize, cfg.springOpts),
+                    sIW: createSpring(cfg.iconSize, cfg.springOpts),
+                    sIH: createSpring(cfg.iconSize, cfg.springOpts)
+                };
+                itemSprings[idx()] = springs;
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FloatingDock_DockItem, {
                     item: item,
-                    mousePos: mousePos,
-                    get cfg () {
-                        return props.cfg;
+                    cfg: cfg,
+                    registerRefs: (wrap, icon)=>{
+                        springs.wrapRef = wrap;
+                        springs.iconRef = icon;
                     }
-                })
+                });
+            }
         }));
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
             var _v$6 = twMerge("mx-auto", "items-center", props.showContainer && "rounded-2xl bg-base-100 shadow-[0px_1px_0px_0px_var(--color-base-300)_inset,0px_1px_0px_0px_var(--color-base-100)]", isH() && props.showContainer && "px-4 py-2", !isH() && props.showContainer && "py-4 px-2", props.class), _v$7 = {
                 display: "flex",
                 "flex-direction": isH() ? "row" : "column",
-                gap: `${props.cfg.gap}px`,
+                gap: `${cfg.gap}px`,
                 ...isH() ? {
-                    height: `${props.cfg.baseSize + 16}px`
+                    height: `${cfg.baseSize + 16}px`
                 } : {
-                    width: `${props.cfg.baseSize + 16}px`
+                    width: `${cfg.baseSize + 16}px`
                 },
                 overflow: "visible"
             };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "0.0.148",
+  "version": "0.0.149",
   "author": "pathscale",
   "repository": {
     "type": "git",