Skip to content

Commit

Permalink
fix: Reduce amount of draw on resize (#4544)
Browse files Browse the repository at this point in the history
## Description

1. What is this PR about (link the issue and add a short description)

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
  • Loading branch information
istarkov authored Dec 10, 2024
1 parent cd4041e commit 22633eb
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 2 deletions.
17 changes: 15 additions & 2 deletions apps/builder/app/canvas/instance-selected.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import {
} from "~/canvas/collapsed";
import { getBrowserStyle } from "./features/webstudio-component/get-browser-style";
import type { InstanceSelector } from "~/shared/tree-utils";
import { shallowEqual } from "shallow-equal";

const isHtmlTag = (tag: string): tag is HtmlTags =>
htmlTags.includes(tag as HtmlTags);
Expand Down Expand Up @@ -205,7 +206,14 @@ const subscribeSelectedInstance = (
selectedInstanceSelector
);

$selectedInstanceIntanceToTag.set(instanceToTag);
if (
!shallowEqual(
[...($selectedInstanceIntanceToTag.get()?.entries() ?? [])].flat(),
[...(instanceToTag?.entries() ?? [])].flat()
)
) {
$selectedInstanceIntanceToTag.set(instanceToTag);
}

const unitSizes = calculateUnitSizes(element);
$selectedInstanceUnitSizes.set(unitSizes);
Expand All @@ -229,7 +237,12 @@ const subscribeSelectedInstance = (
activeStates.add(state);
}
}
$selectedInstanceStates.set(activeStates);

if (
!shallowEqual(activeStates.keys(), $selectedInstanceStates.get().keys())
) {
$selectedInstanceStates.set(activeStates);
}
};

let updateStoreTimeouHandle: undefined | ReturnType<typeof setTimeout>;
Expand Down
36 changes: 36 additions & 0 deletions apps/builder/app/shared/debug-track.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { shallowEqual } from "shallow-equal";
import warnOnce from "warn-once";

const trackers: Record<string, (args: Record<string, unknown>) => void> = {};

/**
* Debug-only: Tracks changes between consecutive calls.
* Usage: `track('label')({ a, b, c })` logs changed keys on subsequent calls.
*/
export const trackChanges = (label: string) => {
if (process.env.NODE_ENV !== "development") {
warnOnce(true, "track should not be used in production");
return () => {};
}

if (!trackers[label]) {
let previousArgs: Record<string, unknown> | undefined;

trackers[label] = (currentArgs: Record<string, unknown>) => {
if (!previousArgs) {
previousArgs = currentArgs;
return;
}

if (!shallowEqual(previousArgs, currentArgs)) {
const changedKeys = Object.keys(currentArgs).filter(
(key) => previousArgs![key] !== currentArgs[key]
);
console.info(label, changedKeys);
previousArgs = currentArgs;
}
};
}

return trackers[label];
};

0 comments on commit 22633eb

Please sign in to comment.