Skip to content

Commit

Permalink
fix: fix no relative snapContainer's size #773
Browse files Browse the repository at this point in the history
  • Loading branch information
daybrush committed Oct 29, 2022
1 parent d96d5ce commit 1db881f
Show file tree
Hide file tree
Showing 7 changed files with 71 additions and 4 deletions.
12 changes: 10 additions & 2 deletions packages/moveable/test/manual/input.html
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
<body>
<input class="target" />
<input class="target target1" />
<input class="target target2" />
</body>
<script src ="../../dist/moveable.js"></script>
<script>
new Moveable(document.body, {
draggable: true,
target: ".target",
target: document.querySelector(".target1"),
}).on("drag", e => {
e.target.style.transform = e.transform;
});

new Moveable(document.body, {
draggable: true,
target: document.querySelector(".target2"),
}).on("drag", e => {
e.target.style.transform = e.transform;
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ export default class MoveableManager<T = {}>
this._updateObserver(this.props);

if (!container && !parentMoveable && !wrapperMoveable) {
this.updateRect("", false, true);
this.updateRect("", false, false);
this.forceUpdate();
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,13 @@ export function snapStart(
snapContainerRect.right - containerClientRect.right,
snapContainerRect.bottom - containerClientRect.bottom,
]);

console.log(
snapContainerRect, containerClientRect,
offset2[1] - offset1[1],
containerClientRect.overflow,
containerClientRect.overflow ? containerClientRect.scrollHeight! : containerClientRect.clientHeight!
);
snapOffset.left = throttle(offset1[0], 0.00001);
snapOffset.top = throttle(offset1[1], 0.00001);
snapOffset.right = throttle(offset2[0], 0.00001);
Expand Down
9 changes: 8 additions & 1 deletion packages/react-moveable/src/react-moveable/utils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -802,9 +802,11 @@ export function getClientRect(el: HTMLElement | SVGElement, isExtends?: boolean)
let top = 0;
let width = 0;
let height = 0;
let isRoot = false;

if (el) {
if (el === document.body || el === document.documentElement) {
isRoot = el === document.body || el === document.documentElement;
if (isRoot) {
width = window.innerWidth;
height = window.innerHeight;
const scrollPos = getBodyScrollPos();
Expand Down Expand Up @@ -836,6 +838,11 @@ export function getClientRect(el: HTMLElement | SVGElement, isExtends?: boolean)
rect.clientHeight = el.clientHeight;
rect.scrollWidth = el.scrollWidth;
rect.scrollHeight = el.scrollHeight;

if (isRoot) {
rect.clientHeight = Math.max(rect.height, rect.clientHeight);
rect.scrollHeight = Math.max(rect.height, rect.scrollHeight);
}
rect.overflow = getComputedStyle(el).overflow !== "visible";
}
return rect;
Expand Down
6 changes: 6 additions & 0 deletions packages/react-moveable/stories/99-Tests/Deafult.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -79,3 +79,9 @@ group.add("Test Drag Start Group Manually", {
app: require("./ReactDragStartGroupApp").default,
path: require.resolve("./ReactDragStartGroupApp"),
});


group.add("Test Changing Snap Container", {
app: require("./ReactChangingSnapContainerApp").default,
path: require.resolve("./ReactChangingSnapContainerApp"),
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import * as React from "react";
import Moveable from "@/react-moveable";
import "./snap.css";
export default function App(props: Record<string, any>) {
return (
<div className="root" style={{
position: "relative",
border: "1px solid black",
}}>
<Moveable
target={".target"}
draggable={true}
snappable={true}
elementGuidelines={[document.getElementById("box1")]}
verticalGuidelines={[0, 100, 200, 300, 400]}
snapContainer={".snapGrid"}
onDrag={e => {
e.target.style.transform = e.transform;
}}
/>
<div className="container">
<div className="snapGrid">
<div className="target" style={{
width: "200px",
height: "150px",
transform: "translate(0px, 0px) scale(1.5, 1)",
}}>Target</div>
</div>
<div className="snapGrid"></div>
</div>
</div>
);
}
6 changes: 6 additions & 0 deletions packages/react-moveable/stories/99-Tests/snap.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.snapGrid {
background: green;
margin-top: 20px;
min-height: 300px;
width: 100%;
}

0 comments on commit 1db881f

Please sign in to comment.