Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: Fix canvas in bigger containers. (#6849)

Browse Source
This commit is contained in:
Ashok Kumar M 2021-08-26 15:27:12 +05:30 committed by GitHub
parent 2e20d9b480
commit 739f999bb5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 48 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
app/client/src/utils/hooks/useCanvasDragging.ts
View File

@ -64,23 +64,66 @@ export const useCanvasDragging = (
setDraggingNewWidget,
setDraggingState,
} = useWidgetDragResize();
const getCanvasToDrawTopOffset = (
scrollParentTop: number,
scrollParentTopHeight: number,
canvasTop: number,
canvasHeight: number,
) => {
return scrollParentTop > canvasTop
? Math.min(
scrollParentTop - canvasTop,
canvasHeight - scrollParentTopHeight,
)
: 0;
};
const updateCanvasStyles = () => {
const parentCanvas: Element | null = getNearestParentCanvas(
canvasRef.current,
);
if (parentCanvas && canvasDrawRef.current && canvasRef.current) {
const { height } = parentCanvas.getBoundingClientRect();
const {
height: scrollParentTopHeight,
} = parentCanvas.getBoundingClientRect();
const { width } = canvasRef.current.getBoundingClientRect();
canvasDrawRef.current.style.width = width + "px";
canvasDrawRef.current.style.position = canExtend ? "absolute" : "sticky";
canvasDrawRef.current.style.left = "0px";
canvasDrawRef.current.style.height = height + "px";
canvasDrawRef.current.style.top =
(canExtend ? parentCanvas.scrollTop : 0) + "px";
canvasDrawRef.current.style.top = getCanvasTopOffset() + "px";
canvasDrawRef.current.style.height = scrollParentTopHeight + "px";
}
};
const getCanvasTopOffset = () => {
const parentCanvas: Element | null = getNearestParentCanvas(
canvasRef.current,
);
if (parentCanvas && canvasDrawRef.current && canvasRef.current) {
if (canExtend) {
return parentCanvas.scrollTop;
} else {
const {
height: scrollParentTopHeight,
top: scrollParentTop,
} = parentCanvas.getBoundingClientRect();
const {
height: canvasHeight,
top: canvasTop,
} = canvasRef.current.getBoundingClientRect();
return getCanvasToDrawTopOffset(
scrollParentTop,
scrollParentTopHeight,
canvasTop,
canvasHeight,
);
}
}
return 0;
};
const canScroll = useCanvasDragToScroll(
canvasRef,
isCurrentDraggedCanvas,
@ -298,7 +341,7 @@ export const useCanvasDragging = (
canvasIsDragging
) {
const canvasCtx: any = canvasDrawRef.current.getContext("2d");
const topOffset = canExtend ? scrollParent.scrollTop : 0;
const topOffset = getCanvasTopOffset();
const snappedXY = getSnappedXY(
snapColumnSpace,
snapRowSpace,