Skip to content

Commit

Permalink
fix: enhance bounds accuracy #699
Browse files Browse the repository at this point in the history
  • Loading branch information
@daybrush
daybrush committed Jul 21, 2022
1 parent 9c7e8c7 commit 9aee6bd
Show file tree
Hide file tree
Showing 7 changed files with 59 additions and 31 deletions.
4 changes: 3 additions & 1 deletion packages/react-moveable/src/react-moveable/MoveableManager.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -337,7 +337,9 @@ export default class MoveableManager<T = {}>
: props.rootContainer;
this.updateState(
getTargetInfo(this.controlBox && this.controlBox.getElement(),
target, container, container,
target,
container,
container,
rootContainer || container,
// isTarget ? state : undefined
),
Expand Down
4 changes: 4 additions & 0 deletions packages/react-moveable/src/react-moveable/ables/Draggable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { triggerChildGesto } from "../groupUtils";
import { startCheckSnapDrag } from "./Snappable";
import { IObject, getRad, throttle, throttleArray } from "@daybrush/utils";
import { checkSnapBoundsDrag } from "./snappable/snapBounds";
import { TINY_NUM } from "../consts";

/**
* @namespace Draggable
Expand Down Expand Up @@ -181,6 +182,7 @@ export default {
isBound: isHorizontalBound,
offset: horizontalOffset,
} = horizontalInfo;

isSnap = isVerticalSnap || isHorizontalSnap || isVerticalBound || isHorizontalBound;

distX += verticalOffset;
Expand All @@ -194,6 +196,8 @@ export default {
throttleArray(translate, throttleDrag);
throttleArray(beforeTranslate, throttleDrag);
}
throttleArray(translate, TINY_NUM);
throttleArray(beforeTranslate, TINY_NUM);

const beforeDist = minus(beforeTranslate, startValue);
const dist = minus(translate, startValue);
Expand Down
8 changes: 4 additions & 4 deletions packages/react-moveable/src/react-moveable/ables/Snappable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,10 +107,10 @@ export function snapStart(
snapContainerRect.right - containerClientRect.right,
snapContainerRect.bottom - containerClientRect.bottom,
]);
snapOffset.left = throttle(offset1[0], 0.1);
snapOffset.top = throttle(offset1[1], 0.1);
snapOffset.right = throttle(offset2[0], 0.1);
snapOffset.bottom = throttle(offset2[1], 0.1);
snapOffset.left = throttle(offset1[0], 0.00001);
snapOffset.top = throttle(offset1[1], 0.00001);
snapOffset.right = throttle(offset2[0], 0.00001);
snapOffset.bottom = throttle(offset2[1], 0.00001);
}
}

Expand Down
1 change: 1 addition & 0 deletions packages/react-moveable/src/react-moveable/ables/snappable/snapBounds.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -257,6 +257,7 @@ export function checkSnapBoundsDrag(
[isVerticalSnap, isHorizontalSnap],
[verticalOffset, horizontalOffset]
);

return [
{
isBound: isVerticalBound,
Expand Down
2 changes: 1 addition & 1 deletion packages/react-moveable/src/react-moveable/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,8 +193,8 @@ export type MoveableManagerState<T = {}> = {
targetClientRect: MoveableClientRect;
containerClientRect: MoveableClientRect;
moveableClientRect: MoveableClientRect;
rootContainerClientRect: MoveableClientRect;
rotation: number;

hasFixed: boolean;
} & ElementSizes & T;

Expand Down
69 changes: 45 additions & 24 deletions packages/react-moveable/src/react-moveable/utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -471,7 +471,10 @@ export function calculateElementInfo(
container?: SVGElement | HTMLElement | null,
rootContainer: HTMLElement | SVGElement | null | undefined = container,
isAbsolute3d?: boolean,
) {
): ReturnType<typeof calculateMatrixStack>
& ReturnType<typeof calculateMoveablePosition>
& ElementSizes
& { width: number; height: number; rotation: number; } {
let width = 0;
let height = 0;
let rotation = 0;
Expand All @@ -492,6 +495,7 @@ export function calculateElementInfo(
isAbsolute3d,
// prevMatrix, prevRootMatrix, prevN,
);

const position = calculateMoveablePosition(
result.allMatrix,
result.transformOrigin,
Expand Down Expand Up @@ -533,6 +537,8 @@ export function calculateElementInfo(
pos4: [0, 0],
direction: 1,
hasFixed: false,
offsetContainer: null,
offsetRootContainer: null,
...allResult,
};
}
Expand Down Expand Up @@ -564,6 +570,7 @@ export function calculateMatrixStack(
const {
matrixes: rootMatrixes,
is3d: isRoot3d,
offsetContainer: offsetRootContainer,
} = getMatrixStackInfo(offsetContainer, rootContainer, true); // prevRootMatrix

// if (rootContainer === document.body) {
Expand Down Expand Up @@ -656,6 +663,8 @@ export function calculateMatrixStack(
transformOrigin,
targetOrigin,
is3d: isNext3d,
offsetContainer: offsetContainer as HTMLElement | null,
offsetRootContainer: offsetRootContainer as HTMLElement | null,
};
}
export function makeMatrixCSS(matrix: number[], is3d: boolean = matrix.length > 9) {
Expand Down Expand Up @@ -1016,12 +1025,19 @@ export function getSize(
}
const inlineWidth = convertUnitSize(targetStyle.width, 0);
const inlineHeight = convertUnitSize(targetStyle.height, 0);
const computedWidth = parseFloat(style!.width);
const computedHeight = parseFloat(style!.height);

cssWidth = parseFloat(style!.width);
cssHeight = parseFloat(style!.height);

contentWidth = between(minWidth, inlineWidth || parseFloat(style!.width), maxWidth);
contentHeight = between(minHeight, inlineHeight || parseFloat(style!.height), maxHeight);
contentWidth = Math.abs(computedWidth - inlineWidth) < 1
? between(minWidth, inlineWidth || parseFloat(style!.width), maxWidth)
: computedWidth;
contentHeight = Math.abs(computedHeight - inlineHeight) < 1
? between(minHeight, inlineHeight || parseFloat(style!.height), maxHeight)
: computedHeight;

offsetWidth = contentWidth;
offsetHeight = contentHeight;
clientWidth = contentWidth;
Expand Down Expand Up @@ -1085,8 +1101,9 @@ export function getTargetInfo(
let beforeDirection: 1 | -1 = 1;
let beforeOrigin = [0, 0];
let targetClientRect = resetClientRect();
let containerClientRect = resetClientRect();
let moveableClientRect = resetClientRect();
let containerClientRect = resetClientRect();
let rootContainerClientRect = resetClientRect();

const result = calculateElementInfo(
target, container!, rootContainer!, false,
Expand All @@ -1106,10 +1123,10 @@ export function getTargetInfo(
);

targetClientRect = getClientRect(target);
containerClientRect = getClientRect(
getOffsetInfo(parentContainer, parentContainer, true).offsetParent || document.body,
true,
);
const offsetContainer = getOffsetInfo(parentContainer, parentContainer, true).offsetParent
|| result.offsetRootContainer!;
containerClientRect = getClientRect(offsetContainer, true);
rootContainerClientRect = getClientRect(result.offsetRootContainer!);
if (moveableElement) {
moveableClientRect = getClientRect(moveableElement);
}
Expand All @@ -1119,6 +1136,7 @@ export function getTargetInfo(
targetClientRect,
containerClientRect,
moveableClientRect,
rootContainerClientRect,
beforeDirection,
beforeOrigin,
originalBeforeOrigin: beforeOrigin,
Expand All @@ -1128,9 +1146,10 @@ export function getTargetInfo(
}
export function resetClientRect(): MoveableClientRect {
return {
left: 0, right: 0,
top: 0, bottom: 0,
left: 0, top: 0,
width: 0, height: 0,
right: 0,
bottom: 0,
clientLeft: 0, clientTop: 0,
clientWidth: 0, clientHeight: 0,
scrollWidth: 0, scrollHeight: 0,
Expand All @@ -1142,31 +1161,33 @@ export function getClientRect(el: HTMLElement | SVGElement, isExtends?: boolean)
let width = 0;
let height = 0;

if (el === document.body || el === document.documentElement) {
width = window.innerWidth;
height = window.innerHeight;
const scrollPos = getBodyScrollPos();
if (el) {
if (el === document.body || el === document.documentElement) {
width = window.innerWidth;
height = window.innerHeight;
const scrollPos = getBodyScrollPos();

[left, top] = [-scrollPos[0], -scrollPos[1]];
} else {
const clientRect = el.getBoundingClientRect();
[left, top] = [-scrollPos[0], -scrollPos[1]];
} else {
const clientRect = el.getBoundingClientRect();

left = clientRect.left;
top = clientRect.top;
width = clientRect.width;
height = clientRect.height;
left = clientRect.left;
top = clientRect.top;
width = clientRect.width;
height = clientRect.height;
}
}

const rect: MoveableClientRect = {
left,
right: left + width,
top,
bottom: top + height,
width,
height,
right: left + width,
bottom: top + height,
};

if (isExtends) {
if (el && isExtends) {
rect.clientLeft = el.clientLeft;
rect.clientTop = el.clientTop;
rect.clientWidth = el.clientWidth;
Expand Down
2 changes: 1 addition & 1 deletion packages/react-moveable/stories/99-Tests/ReactAccuracyApp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default function App() {
position: "relative",
width: "800px",
height: "800px",
// transform: "scale(0.67123)",
transform: "scale(0.67123)",
transformOrigin: "top left",
background: "#eee",
}}>
Expand Down

0 comments on commit 9aee6bd

Please sign in to comment.