fix: widget d&d, resizing, snapping and improve widget UI and overall UX

pivanov · Dec 17, 2024 · d3fc41a · d3fc41a
1 parent 6d5d88e
commit d3fc41a
Show file tree

Hide file tree

Showing 15 changed files with 767 additions and 571 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,5 +2,17 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "typescript.preferences.importModuleSpecifier": "non-relative",
-  "typescript.preferences.includePackageJsonAutoImports": "on"
+  "typescript.preferences.includePackageJsonAutoImports": "on",
+  "files.associations": {
+    "*.css": "css"
+  },
+  "editor.quickSuggestions": {
+    "strings": true
+  },
+  "css.validate": false,
+  "tailwindCSS.validate": true,
+  "editor.colorDecorators": true,
+  "[css]": {
+    "editor.formatOnSave": false,
+  }
 }
diff --git a/packages/scan/src/core/web/assets/css/styles.tailwind.css b/packages/scan/src/core/web/assets/css/styles.tailwind.css
@@ -147,13 +147,11 @@ button {
 }
 
 .react-scan-header {
-  padding: 8px 12px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  justify-content: space-between;
-  background: #000;
+  @apply flex items-center justify-between gap-x-4;
+  @apply rounded-t-lg;
+  @apply overflow-hidden;
+  @apply py-2 px-4;
+  @apply border-b-1 border-white/10;
 }
 
 .react-scan-header-left {

diff --git a/packages/scan/src/core/web/assets/svgs/svgs.ts b/packages/scan/src/core/web/assets/svgs/svgs.ts
@@ -74,22 +74,13 @@ export const ICONS = `
     <path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/>
   </symbol>
 
-  <symbol id="icon-grip-horizontal" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <circle cx="12" cy="9" r="1"/>
-    <circle cx="19" cy="9" r="1"/>
-    <circle cx="5" cy="9" r="1"/>
-    <circle cx="12" cy="15" r="1"/>
-    <circle cx="19" cy="15" r="1"/>
-    <circle cx="5" cy="15" r="1"/>
+  <symbol id="icon-chevrons-up-down" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="m7 15 5 5 5-5"/>
+    <path d="m7 9 5-5 5 5"/>
   </symbol>
 
-  <symbol id="icon-grip-vertical" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <circle cx="9" cy="12" r="1"/>
-    <circle cx="9" cy="5" r="1"/>
-    <circle cx="9" cy="19" r="1"/>
-    <circle cx="15" cy="12" r="1"/>
-    <circle cx="15" cy="5" r="1"/>
-    <circle cx="15" cy="19" r="1"/>
+  <symbol id="icon-chevron-down" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="m6 9 6 6 6-6"/>
   </symbol>
 </svg>
 `;
diff --git a/packages/scan/src/core/web/components/widget/fps-meter.tsx b/packages/scan/src/core/web/components/widget/fps-meter.tsx
@@ -1,39 +1,52 @@
-import { useState, useEffect } from 'preact/hooks';
-import { cn } from '@web-utils/helpers';
+import { useEffect, useRef } from 'preact/hooks';
+import { cn, toggleMultipleClasses } from '@web-utils/helpers';
 import { getFPS } from '../../../instrumentation';
 
 export const FpsMeter = () => {
-  const [fps, setFps] = useState(getFPS());
+  const refContainer = useRef<HTMLSpanElement>(null);
 
   useEffect(() => {
-    const interval = setInterval(() => {
-      setFps(getFPS());
-    }, 100);
+    let rafId: number;
+    let lastUpdate = performance.now();
+    const UPDATE_INTERVAL = 100;
 
-    return () => clearInterval(interval);
-  }, []);
+    const updateFPS = () => {
+      const now = performance.now();
+      if (now - lastUpdate >= UPDATE_INTERVAL) {
+        if (!refContainer.current) return;
+        const fps = getFPS();
+        refContainer.current.dataset.text = fps.toString();
+        if (fps < 10) {
+          toggleMultipleClasses(refContainer.current, 'text-white', 'bg-red-500', 'text-black', 'bg-yellow-300');
+        } else if (fps < 30) {
+          toggleMultipleClasses(refContainer.current, 'text-white', 'bg-red-500', 'text-black', 'bg-yellow-300');
+        }
+
+        lastUpdate = now;
+      }
+      rafId = requestAnimationFrame(updateFPS);
+    };
 
-  let textColor = 'text-white';
-  let bgColor = 'bg-neutral-700';
+    rafId = requestAnimationFrame(updateFPS);
+    return () => cancelAnimationFrame(rafId);
+  }, []);
 
-  if (fps < 10) {
-    textColor = 'text-white';
-    bgColor = 'bg-red-500';
-  } else if (fps < 30) {
-    textColor = 'text-black';
-    bgColor = 'bg-yellow-300';
-  }
 
   return (
     <span
+      ref={refContainer}
+      data-text="120"
       className={cn(
-        'flex gap-1 items-center ml-2 px-2 py-1 rounded-full text-xs font-mono',
-        bgColor,
-        textColor,
-        'whitespace-nowrap',
+        'with-data-text',
+        'flex gap-1 items-center',
+        'ml-2 px-2',
+        'h-full',
+        'text-white text-xs font-mono whitespace-nowrap',
+        'bg-neutral-700',
+        'rounded-full',
       )}
     >
-      {fps} <span className="text-[0.5rem]">FPS</span>
+      <span className="text-xxs">FPS</span>
     </span>
   );
 };

diff --git a/packages/scan/src/core/web/components/widget/header.tsx b/packages/scan/src/core/web/components/widget/header.tsx
@@ -51,24 +51,8 @@ export const Header = () => {
 
     const unsubscribe = Store.lastReportTime.subscribe(updateMetrics);
 
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && inspectState.kind === 'focused') {
-        if (Store.inspectState.value.propContainer) {
-          Store.inspectState.value.propContainer.innerHTML = '';
-          Store.inspectState.value = {
-            kind: 'inspecting',
-            hoveredDomElement: inspectState.focusedDomElement,
-            propContainer: Store.inspectState.value.propContainer,
-          };
-        }
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown, { capture: true });
-
     return () => {
       unsubscribe();
-      window.removeEventListener('keydown', handleKeyDown, { capture: true });
     };
   }, [inspectState]);
 
@@ -115,9 +99,6 @@ export const Header = () => {
         "min-h-9",
         'whitespace-nowrap',
         "overflow-hidden",
-        {
-          'hidden': inspectState.kind !== 'focused'
-        }
       )}
     >
       <div className="react-scan-header-left overflow-hidden">