Skip to content

Commit

Permalink
cached measurment -> latest measurment
Browse files Browse the repository at this point in the history
  • Loading branch information
@RobPruzan
RobPruzan committed Nov 21, 2024
1 parent 1944fac commit acc5032
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 32 deletions.
8 changes: 3 additions & 5 deletions src/core/native/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,17 +118,15 @@ const updateOutlines = async (fiber: Fiber, render: Render) => {
return null;
}

// console.log('nice', measurement);
try {
const existingOutline = ReactScanInternals.activeOutlines.find(
({ outline }) => {
return (
getKey(assertNative(outline.cachedMeasurement).value) ===
getKey(assertNative(outline.latestMeasurement).value) ===
getKey(measurement)
);
},
);
// console.log('hi', existingOutline);

// if an outline exists we just update the renders
if (existingOutline) {
Expand All @@ -141,7 +139,7 @@ const updateOutlines = async (fiber: Fiber, render: Render) => {
ReactScanInternals.activeOutlines = getCopiedActiveOutlines();
} else {
const newOutline: PendingOutline = {
cachedMeasurement: {
latestMeasurement: {
kind: 'native',
value: measurement,
},
Expand All @@ -156,7 +154,7 @@ const updateOutlines = async (fiber: Fiber, render: Render) => {
id: genId(),
resolve: () => {
// resolve();
// todo, update this,
// todo, update this/inject options into update outlines,
// options.onPaintFinish?.(outline);
},
text: getLabelText(newOutline.renders, 'native'),
Expand Down
27 changes: 13 additions & 14 deletions src/core/native/scan.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,9 +188,8 @@ const ReactNativeScan = ({ id: _ }: { id: string }) => {
>
<Group opacity={animatedOpacity}>
{outlines
// we can maybe take this out of render if Dimensions.get is cheap
.filter(({ outline }) => {
const measurement = assertNative(outline.cachedMeasurement).value;
const measurement = assertNative(outline.latestMeasurement).value;
const vis = isVisible(measurement.x, measurement.y);
return vis;
})
Expand All @@ -202,33 +201,33 @@ const ReactNativeScan = ({ id: _ }: { id: string }) => {
return (
<Group key={render.id}>
<Rect
x={assertNative(render.outline.cachedMeasurement).value.pageX}
y={assertNative(render.outline.cachedMeasurement).value.pageY}
x={assertNative(render.outline.latestMeasurement).value.pageX}
y={assertNative(render.outline.latestMeasurement).value.pageY}
width={
assertNative(render.outline.cachedMeasurement).value.width
assertNative(render.outline.latestMeasurement).value.width
}
height={
assertNative(render.outline.cachedMeasurement).value.height
assertNative(render.outline.latestMeasurement).value.height
}
color="rgba(88, 82, 185, 0.1)"
/>
<Rect
x={assertNative(render.outline.cachedMeasurement).value.pageX}
y={assertNative(render.outline.cachedMeasurement).value.pageY}
x={assertNative(render.outline.latestMeasurement).value.pageX}
y={assertNative(render.outline.latestMeasurement).value.pageY}
width={
assertNative(render.outline.cachedMeasurement).value.width
assertNative(render.outline.latestMeasurement).value.width
}
height={
assertNative(render.outline.cachedMeasurement).value.height
assertNative(render.outline.latestMeasurement).value.height
}
color="rgba(147, 141, 255, 0.6)"
style="stroke"
strokeWidth={1}
/>
<Rect
x={assertNative(render.outline.cachedMeasurement).value.pageX}
x={assertNative(render.outline.latestMeasurement).value.pageX}
y={
assertNative(render.outline.cachedMeasurement).value.pageY -
assertNative(render.outline.latestMeasurement).value.pageY -
labelHeight -
2
}
Expand All @@ -238,11 +237,11 @@ const ReactNativeScan = ({ id: _ }: { id: string }) => {
/>
<Text
x={
assertNative(render.outline.cachedMeasurement).value.pageX +
assertNative(render.outline.latestMeasurement).value.pageX +
labelPadding
}
y={
assertNative(render.outline.cachedMeasurement).value.pageY -
assertNative(render.outline.latestMeasurement).value.pageY -
5
}
text={render.text || 'unknown'}
Expand Down
26 changes: 13 additions & 13 deletions src/core/web/outline.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const assertDom = (measurement: Measurement) => {

export interface PendingOutline {
fiber: Fiber; // todo, weak ref not always available
cachedMeasurement: Measurement;
latestMeasurement: Measurement;
renders: Render[];
}

Expand Down Expand Up @@ -129,7 +129,7 @@ export const getOutline = (
return {
fiber: fiber,
renders: [render],
cachedMeasurement: {
latestMeasurement: {
kind: 'dom',
value: rect,
},
Expand All @@ -140,7 +140,7 @@ export const mergeOutlines = (outlines: PendingOutline[]) => {
const mergedOutlines = new Map<string, PendingOutline>();
for (let i = 0, len = outlines.length; i < len; i++) {
const outline = outlines[i];
const key = getOutlineKey(assertDom(outline.cachedMeasurement).value);
const key = getOutlineKey(assertDom(outline.latestMeasurement).value);
const existingOutline = mergedOutlines.get(key);

if (!existingOutline) {
Expand Down Expand Up @@ -173,7 +173,7 @@ export const recalcOutlines = throttle(() => {
scheduledOutlines.splice(i, 1);
continue;
}
outline.cachedMeasurement.value = rect;
outline.latestMeasurement.value = rect;
}

for (let i = activeOutlines.length - 1; i >= 0; i--) {
Expand All @@ -187,7 +187,7 @@ export const recalcOutlines = throttle(() => {
activeOutlines.splice(i, 1);
continue;
}
outline.cachedMeasurement.value = rect;
outline.latestMeasurement.value = rect;
}
}, DEFAULT_THROTTLE_TIME);

Expand Down Expand Up @@ -238,7 +238,7 @@ export const flushOutlines = (

await Promise.all(
mergedOutlines.map(async (outline) => {
const key = getOutlineKey(assertDom(outline.cachedMeasurement).value);
const key = getOutlineKey(assertDom(outline.latestMeasurement).value);
if (previousOutlines.has(key)) {
return;
}
Expand Down Expand Up @@ -270,11 +270,11 @@ export const paintOutline = (
log(outline.renders);
}

const key = getOutlineKey(assertDom(outline.cachedMeasurement).value); // todo: fix for dom
const key = getOutlineKey(assertDom(outline.latestMeasurement).value); // todo: fix for dom
const existingActiveOutline = ReactScanInternals.activeOutlines.find(
(activeOutline) =>
getOutlineKey(
assertDom(activeOutline.outline.cachedMeasurement).value,
assertDom(activeOutline.outline.latestMeasurement).value,
) === key,
);

Expand All @@ -293,8 +293,8 @@ export const paintOutline = (

if (existingActiveOutline) {
existingActiveOutline.outline.renders.push(...outline.renders);
existingActiveOutline.outline.cachedMeasurement =
outline.cachedMeasurement;
existingActiveOutline.outline.latestMeasurement =
outline.latestMeasurement;
existingActiveOutline.frame = 0;
existingActiveOutline.totalFrames = totalFrames;
existingActiveOutline.alpha = alpha;
Expand Down Expand Up @@ -350,10 +350,10 @@ export const fadeOutOutline = (ctx: CanvasRenderingContext2D) => {
}
const newRect = getRect(domNode);
if (newRect) {
outline.cachedMeasurement.value = newRect;
outline.latestMeasurement.value = newRect;
}
});
const { value: rect } = assertDom(outline.cachedMeasurement);
const { value: rect } = assertDom(outline.latestMeasurement);
const unstable = isOutlineUnstable(outline);

const alphaScalar = unstable ? 0.8 : 0.2;
Expand Down Expand Up @@ -393,7 +393,7 @@ export const fadeOutOutline = (ctx: CanvasRenderingContext2D) => {

for (let i = 0, len = pendingLabeledOutlines.length; i < len; i++) {
const { alpha, outline, text } = pendingLabeledOutlines[i];
const { value: rect } = assertDom(outline.cachedMeasurement); // todo: fix for dom
const { value: rect } = assertDom(outline.latestMeasurement); // todo: fix for dom
ctx.save();

if (text) {
Expand Down

0 comments on commit acc5032

Please sign in to comment.