chore: Save temporary changes (#303)

zjxxxxxxxxx · Dec 14, 2024 · 4ce3859 · 4ce3859
1 parent 04f16de
commit 4ce3859
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 28 deletions.
diff --git a/.codesandbox/tasks.json b/.codesandbox/tasks.json
@@ -2,15 +2,15 @@
   "$schema": "https://codesandbox.io/schemas/tasks.json",
   "setupTasks": [
     {
-      "name": "Install Dependencies",
+      "name": "Install dependencies",
       "command": "pnpm install:ci"
     },
     {
-      "name": "Build Packages",
+      "name": "Build packages",
       "command": "pnpm build"
     },
     {
-      "name": "Create Tasks",
+      "name": "Create tasks",
       "command": "pnpm tasks"
     }
   ],

diff --git a/packages/client/src/inspector/getBoxModel.ts b/packages/client/src/inspector/getBoxModel.ts
@@ -39,28 +39,22 @@ export function getBoxModel(el: HTMLElement | null): [BoxRect, BoxLines] {
     bottom,
     left,
   } = getDOMRect(el);
-  const getStyle = createStyleGetter(el);
-
-  const zoom = getCompositeZoom(el);
-  function withZoom(value: number, use = true) {
-    return use ? value * zoom : value;
-  }
+  const getStyle = createGetStyle(el);
 
-  // Negative values will cause the position to shift and should be ignored.
-  const marginTop = withZoom(Math.max(getStyle('margin-top'), 0));
-  const marginRight = withZoom(Math.max(getStyle('margin-right'), 0));
-  const marginBottom = withZoom(Math.max(getStyle('margin-bottom'), 0));
-  const marginLeft = withZoom(Math.max(getStyle('margin-left'), 0));
+  const marginTop = getStyle('margin-top');
+  const marginRight = getStyle('margin-right');
+  const marginBottom = getStyle('margin-bottom');
+  const marginLeft = getStyle('margin-left');
 
-  const borderTop = withZoom(getStyle('border-top'), IS_BORDER_WITH_ZOOM);
-  const borderRight = withZoom(getStyle('border-right'), IS_BORDER_WITH_ZOOM);
-  const borderBottom = withZoom(getStyle('border-bottom'), IS_BORDER_WITH_ZOOM);
-  const borderLeft = withZoom(getStyle('border-left'), IS_BORDER_WITH_ZOOM);
+  const borderTop = getStyle('border-top', IS_BORDER_WITH_ZOOM);
+  const borderRight = getStyle('border-right', IS_BORDER_WITH_ZOOM);
+  const borderBottom = getStyle('border-bottom', IS_BORDER_WITH_ZOOM);
+  const borderLeft = getStyle('border-left', IS_BORDER_WITH_ZOOM);
 
-  const paddingTop = withZoom(getStyle('padding-top'));
-  const paddingRight = withZoom(getStyle('padding-right'));
-  const paddingBottom = withZoom(getStyle('padding-bottom'));
-  const paddingLeft = withZoom(getStyle('padding-left'));
+  const paddingTop = getStyle('padding-top');
+  const paddingRight = getStyle('padding-right');
+  const paddingBottom = getStyle('padding-bottom');
+  const paddingLeft = getStyle('padding-left');
 
   const positionTop = top - marginTop;
   const positionRight = right + marginRight;
@@ -86,6 +80,16 @@ export function getBoxModel(el: HTMLElement | null): [BoxRect, BoxLines] {
   ];
 }
 
+function createGetStyle(el: HTMLElement) {
+  const getStyle = createStyleGetter(el);
+  const zoom = getCompositeZoom(el);
+  return (prop: string, useZoom = true) => {
+    // Need to ensure [value >= 0].
+    const value = Math.max(getStyle(prop), 0);
+    return useZoom ? value * zoom : value;
+  };
+}
+
 export function getDefaultBoxModel(): [BoxRect, BoxLines] {
   return [
     createBoxRect(),
@@ -101,7 +105,10 @@ function createBoxRect(width = 0, height = 0, top = 0, right = 0, bottom = 0, le
   return {
     width,
     height,
-    ...createBoxLine(top, right, bottom, left),
+    top,
+    right,
+    bottom,
+    left,
   };
 }
 

diff --git a/packages/client/src/utils/preventEventOverlay.tsx b/packages/client/src/utils/preventEventOverlay.tsx
@@ -3,7 +3,7 @@ import { getOptions } from '../options';
 import { appendChild } from './dom';
 import { isTopWindow } from './topWindow';
 
-let unmount: () => void;
+let unmount: (() => void) | null = null;
 
 export const preventEventOverlay = {
   mount() {
@@ -16,15 +16,17 @@ export const preventEventOverlay = {
     };
 
     unmount = () => {
-      off('pointerdown', unmount, eventOpts);
-      off('pointerup', unmount, eventOpts);
-      off('pointerout', unmount, eventOpts);
+      off('pointerdown', unmount!, eventOpts);
+      off('pointerup', unmount!, eventOpts);
+      off('pointerout', unmount!, eventOpts);
 
       if (isTopWindow) {
-        off('pointermove', unmount, eventOpts);
+        off('pointermove', unmount!, eventOpts);
       }
 
       overlay.remove();
+
+      unmount = null;
     };
 
     on('pointerdown', unmount, eventOpts);

diff --git a/scripts/create-codesandbox-tasks.ts b/scripts/create-codesandbox-tasks.ts
@@ -1,4 +1,5 @@
 import { resolve } from 'node:path';
+import { execSync } from 'node:child_process';
 import { playgrounds, readjson, writejson } from './utils';
 
 const TASKS_PATH = resolve('.codesandbox/tasks.json');
@@ -22,4 +23,7 @@ function main() {
   });
 
   writejson(TASKS_PATH, taskJson);
+
+  execSync('git add .');
+  execSync(`git commit -m 'Timestamp of temporary changes: ${Date.now()}'`);
 }