implement snap-free scroll constraints

This commit is contained in:
barnabasmolnar
2026-04-07 19:19:43 +02:00
parent e18c1dd213
commit 7dbd62a30c
9 changed files with 1244 additions and 97 deletions
+14 -1
View File
@@ -5,6 +5,17 @@ import { Excalidraw } from "@excalidraw/excalidraw";
import "@excalidraw/excalidraw/index.css";
import App from "../../with-script-in-browser/components/ExampleApp";
import type { ScrollConstraints } from "@excalidraw/excalidraw/types";
const scrollConstraints: ScrollConstraints = {
x: 0,
y: 0,
width: 850,
height: 400,
lockZoom: true,
overscrollAllowance: 0,
viewportZoomFactor: 1,
};
const ExcalidrawWrapper: React.FC = () => {
return (
@@ -14,7 +25,9 @@ const ExcalidrawWrapper: React.FC = () => {
useCustom={(api: any, args?: any[]) => {}}
excalidrawLib={excalidrawLib}
>
<Excalidraw />
<Excalidraw
// scrollConstraints={scrollConstraints}
/>
</App>
</>
);
@@ -820,6 +820,48 @@ export default function ExampleApp({
/>
Export with embed scene
</label>
<button
type="button"
onClick={() => {
if (!excalidrawAPI) {
return;
}
const elements = excalidrawAPI.getSceneElements();
excalidrawAPI.scrollToContent(elements[0], {
animate: true,
fitToViewport: true,
viewportZoomFactor: 0.9,
scrollLock: {
lockZoom: true,
overscrollAllowance: 0,
},
});
}}
>
Fit and lock first element
</button>
<button
type="button"
onClick={() => {
if (!excalidrawAPI) {
return;
}
const elements = excalidrawAPI.getSceneElements();
excalidrawAPI.scrollToContent(elements[1], {
animate: true,
fitToViewport: true,
viewportZoomFactor: 0.9,
scrollLock: {
lockZoom: true,
overscrollAllowance: 0,
},
});
}}
>
Fit and lock second element
</button>
<button
onClick={async () => {
if (!excalidrawAPI) {