diff --git a/.codesandbox/tasks.json b/.codesandbox/tasks.json index 2625b0e..3783f68 100644 --- 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 index 0b064e0..8e55479 100644 --- 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 index dd6226b..60da253 100644 --- 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 index f1a533c..bcca3e8 100644 --- 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()}'`); }