Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Breakpoints stage 3 #1413

Merged
merged 15 commits into from
Apr 12, 2023
Prev Previous commit
Next Next commit
Make resize immediate
istarkov committed Apr 12, 2023
commit 4b136ea2838d40f23c45b6ac0c4e9147c8a03c89
54 changes: 27 additions & 27 deletions apps/builder/app/builder/features/workspace/use-read-canvas-rect.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { useCallback, useEffect, useState } from "react";
import { useStore } from "@nanostores/react";

import {
scaleStore,
useCanvasRect,
useCanvasWidth,
canvasWidthContainer,
canvasRectContainer,
} from "~/builder/shared/nano-states";
import { useWindowResize } from "~/shared/dom-hooks";
import { useWindowResizeDebounced } from "~/shared/dom-hooks";

/**
* Reads the canvas iframe dom rect and puts it into nano state
@@ -15,33 +15,33 @@ export const useReadCanvasRect = () => {
const [iframeElement, setIframeElement] = useState<HTMLIFrameElement | null>(
null
);
const [, setCanvasRect] = useCanvasRect();
const [canvasWidth] = useCanvasWidth();
const scale = useStore(scaleStore);
const [recalcFlag, forceRecalc] = useState(false);
useWindowResize(() => {
forceRecalc(!recalcFlag);
});

const readRect = useCallback(
() => {
if (iframeElement === null) {
return;
}
requestAnimationFrame(() => {
const rect = iframeElement.getBoundingClientRect();
setCanvasRect(rect);
});
},
// canvasWidth will change the canvas width, so we need to React it to it and update the rect, even though we don't necessary usenthe value
// eslint-disable-next-line react-hooks/exhaustive-deps
[iframeElement, setCanvasRect, canvasWidth, scale, recalcFlag]
);
const updateRect = useCallback(() => {
if (iframeElement === null) {
return;
}
const rect = iframeElement.getBoundingClientRect();
canvasRectContainer.set(rect);
}, [iframeElement]);

useEffect(readRect, [readRect]);
useEffect(() => {
updateRect();
const scaleStoreUnsubscribe = scaleStore.listen(updateRect);
const canvasWidthContainerUnsubscribe =
canvasWidthContainer.listen(updateRect);

return () => {
scaleStoreUnsubscribe();
canvasWidthContainerUnsubscribe();
};
}, [updateRect]);

useWindowResizeDebounced(() => {
updateRect();
});

return {
onRef: setIframeElement,
onTransitionEnd: readRect,
onTransitionEnd: updateRect,
};
};
4 changes: 2 additions & 2 deletions apps/builder/app/builder/shared/nano-states/index.ts
Original file line number Diff line number Diff line change
@@ -14,10 +14,10 @@ const isPublishDialogOpenContainer = atom<boolean>(false);
export const useIsPublishDialogOpen = () =>
useValue(isPublishDialogOpenContainer);

const canvasWidthContainer = atom<number | undefined>();
export const canvasWidthContainer = atom<number | undefined>();
export const useCanvasWidth = () => useValue(canvasWidthContainer);

const canvasRectContainer = atom<DOMRect | undefined>();
export const canvasRectContainer = atom<DOMRect | undefined>();
export const useCanvasRect = () => useValue(canvasRectContainer);

export const projectContainer = atom<Project | undefined>();