mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
Merge df26487936 into 192c4e7658
This commit is contained in:
Arnost Pleskot
GitHub
commit
24fc02c29d
15 changed files with 1918 additions and 68 deletions
|
|
@ -4,6 +4,7 @@ import {
|
|||
TTDDialogTrigger,
|
||||
CaptureUpdateAction,
|
||||
reconcileElements,
|
||||
getCommonBounds,
|
||||
} from "@excalidraw/excalidraw";
|
||||
import { trackEvent } from "@excalidraw/excalidraw/analytics";
|
||||
import { getDefaultAppState } from "@excalidraw/excalidraw/appState";
|
||||
|
|
@ -60,6 +61,7 @@ import {
|
|||
import type { RemoteExcalidrawElement } from "@excalidraw/excalidraw/data/reconcile";
|
||||
import type { RestoredDataState } from "@excalidraw/excalidraw/data/restore";
|
||||
import type {
|
||||
ExcalidrawElement,
|
||||
FileId,
|
||||
NonDeletedExcalidrawElement,
|
||||
OrderedExcalidrawElement,
|
||||
|
|
@ -70,8 +72,9 @@ import type {
|
|||
BinaryFiles,
|
||||
ExcalidrawInitialDataState,
|
||||
UIAppState,
|
||||
ScrollConstraints,
|
||||
} from "@excalidraw/excalidraw/types";
|
||||
import type { ResolutionType } from "@excalidraw/common/utility-types";
|
||||
import type { Merge, ResolutionType } from "@excalidraw/common/utility-types";
|
||||
import type { ResolvablePromise } from "@excalidraw/common/utils";
|
||||
|
||||
import CustomStats from "./CustomStats";
|
||||
|
|
@ -138,9 +141,156 @@ import { ExcalidrawPlusIframeExport } from "./ExcalidrawPlusIframeExport";
|
|||
import "./index.scss";
|
||||
|
||||
import type { CollabAPI } from "./collab/Collab";
|
||||
import { getSelectedElements } from "@excalidraw/element/selection";
|
||||
|
||||
polyfill();
|
||||
|
||||
type DebugScrollConstraints = Merge<
|
||||
ScrollConstraints,
|
||||
{ viewportZoomFactor: number; enabled: boolean }
|
||||
>;
|
||||
|
||||
const ConstraintsSettings = ({
|
||||
initialConstraints,
|
||||
excalidrawAPI,
|
||||
}: {
|
||||
initialConstraints: DebugScrollConstraints;
|
||||
excalidrawAPI: ExcalidrawImperativeAPI;
|
||||
}) => {
|
||||
const [constraints, setConstraints] =
|
||||
useState<DebugScrollConstraints>(initialConstraints);
|
||||
|
||||
useEffect(() => {
|
||||
// add JSON-stringified constraints into url hash for easy sharing
|
||||
const hash = new URLSearchParams(window.location.hash.slice(1));
|
||||
hash.set(
|
||||
"constraints",
|
||||
encodeURIComponent(
|
||||
window.btoa(JSON.stringify(constraints)).replace(/=+/, ""),
|
||||
),
|
||||
);
|
||||
window.location.hash = decodeURIComponent(hash.toString());
|
||||
excalidrawAPI.setScrollConstraints(constraints);
|
||||
}, [constraints]);
|
||||
|
||||
const [selection, setSelection] = useState<ExcalidrawElement[]>([]);
|
||||
useEffect(() => {
|
||||
return excalidrawAPI.onChange((elements, appState) => {
|
||||
setSelection(getSelectedElements(elements, appState));
|
||||
});
|
||||
}, [excalidrawAPI]);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
position: "fixed",
|
||||
bottom: 10,
|
||||
left: "calc(50%)",
|
||||
transform: "translateX(-50%)",
|
||||
gap: "0.6rem",
|
||||
zIndex: 999999,
|
||||
}}
|
||||
>
|
||||
enabled:{" "}
|
||||
<input
|
||||
type="checkbox"
|
||||
defaultChecked={!!constraints.enabled}
|
||||
onChange={(e) =>
|
||||
setConstraints((s) => ({ ...s, enabled: e.target.checked }))
|
||||
}
|
||||
/>
|
||||
x:{" "}
|
||||
<input
|
||||
placeholder="x"
|
||||
size={4}
|
||||
value={constraints.x.toString()}
|
||||
onChange={(e) =>
|
||||
setConstraints((s) => ({
|
||||
...s,
|
||||
x: parseInt(e.target.value) ?? 0,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
y:{" "}
|
||||
<input
|
||||
placeholder="y"
|
||||
size={4}
|
||||
value={constraints.y.toString()}
|
||||
onChange={(e) =>
|
||||
setConstraints((s) => ({
|
||||
...s,
|
||||
y: parseInt(e.target.value) ?? 0,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
w:{" "}
|
||||
<input
|
||||
placeholder="width"
|
||||
size={4}
|
||||
value={constraints.width.toString()}
|
||||
onChange={(e) =>
|
||||
setConstraints((s) => ({
|
||||
...s,
|
||||
width: parseInt(e.target.value) ?? 200,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
h:{" "}
|
||||
<input
|
||||
placeholder="height"
|
||||
size={4}
|
||||
value={constraints.height.toString()}
|
||||
onChange={(e) =>
|
||||
setConstraints((s) => ({
|
||||
...s,
|
||||
height: parseInt(e.target.value) ?? 200,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
zoomFactor:
|
||||
<input
|
||||
placeholder="height"
|
||||
type="number"
|
||||
min="0.1"
|
||||
max="1"
|
||||
step="0.1"
|
||||
value={constraints.viewportZoomFactor.toString()}
|
||||
onChange={(e) =>
|
||||
setConstraints((s) => ({
|
||||
...s,
|
||||
viewportZoomFactor: parseFloat(e.target.value.toString()) ?? 0.7,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
lockZoom:{" "}
|
||||
<input
|
||||
type="checkbox"
|
||||
defaultChecked={!!constraints.lockZoom}
|
||||
onChange={(e) =>
|
||||
setConstraints((s) => ({ ...s, lockZoom: e.target.checked }))
|
||||
}
|
||||
/>
|
||||
{selection.length > 0 && (
|
||||
<button
|
||||
onClick={() => {
|
||||
const bbox = getCommonBounds(selection);
|
||||
setConstraints((s) => ({
|
||||
...s,
|
||||
x: Math.round(bbox[0]),
|
||||
y: Math.round(bbox[1]),
|
||||
width: Math.round(bbox[2] - bbox[0]),
|
||||
height: Math.round(bbox[3] - bbox[1]),
|
||||
}));
|
||||
}}
|
||||
>
|
||||
use selection
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
window.EXCALIDRAW_THROTTLE_RENDER = true;
|
||||
|
||||
declare global {
|
||||
|
|
@ -212,10 +362,22 @@ const initializeScene = async (opts: {
|
|||
)
|
||||
> => {
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
const hashParams = new URLSearchParams(window.location.hash.slice(1));
|
||||
const id = searchParams.get("id");
|
||||
const jsonBackendMatch = window.location.hash.match(
|
||||
/^#json=([a-zA-Z0-9_-]+),([a-zA-Z0-9_-]+)$/,
|
||||
);
|
||||
const shareableLink = hashParams.get("json")?.split(",");
|
||||
|
||||
if (shareableLink) {
|
||||
hashParams.delete("json");
|
||||
const hash = `#${decodeURIComponent(hashParams.toString())}`;
|
||||
window.history.replaceState(
|
||||
{},
|
||||
APP_NAME,
|
||||
`${window.location.origin}${hash}`,
|
||||
);
|
||||
}
|
||||
|
||||
console.log({ shareableLink });
|
||||
|
||||
const externalUrlMatch = window.location.hash.match(/^#url=(.*)$/);
|
||||
|
||||
const localDataState = importFromLocalStorage();
|
||||
|
|
@ -225,7 +387,7 @@ const initializeScene = async (opts: {
|
|||
} = await loadScene(null, null, localDataState);
|
||||
|
||||
let roomLinkData = getCollaborationLinkData(window.location.href);
|
||||
const isExternalScene = !!(id || jsonBackendMatch || roomLinkData);
|
||||
const isExternalScene = !!(id || shareableLink || roomLinkData);
|
||||
if (isExternalScene) {
|
||||
if (
|
||||
// don't prompt if scene is empty
|
||||
|
|
@ -235,16 +397,17 @@ const initializeScene = async (opts: {
|
|||
// otherwise, prompt whether user wants to override current scene
|
||||
(await openConfirmModal(shareableLinkConfirmDialog))
|
||||
) {
|
||||
if (jsonBackendMatch) {
|
||||
if (shareableLink) {
|
||||
scene = await loadScene(
|
||||
jsonBackendMatch[1],
|
||||
jsonBackendMatch[2],
|
||||
shareableLink[0],
|
||||
shareableLink[1],
|
||||
localDataState,
|
||||
);
|
||||
console.log(">>>>", scene);
|
||||
}
|
||||
scene.scrollToContent = true;
|
||||
if (!roomLinkData) {
|
||||
window.history.replaceState({}, APP_NAME, window.location.origin);
|
||||
// window.history.replaceState({}, APP_NAME, window.location.origin);
|
||||
}
|
||||
} else {
|
||||
// https://github.com/excalidraw/excalidraw/issues/1919
|
||||
|
|
@ -261,7 +424,7 @@ const initializeScene = async (opts: {
|
|||
}
|
||||
|
||||
roomLinkData = null;
|
||||
window.history.replaceState({}, APP_NAME, window.location.origin);
|
||||
// window.history.replaceState({}, APP_NAME, window.location.origin);
|
||||
}
|
||||
} else if (externalUrlMatch) {
|
||||
window.history.replaceState({}, APP_NAME, window.location.origin);
|
||||
|
|
@ -322,12 +485,12 @@ const initializeScene = async (opts: {
|
|||
key: roomLinkData.roomKey,
|
||||
};
|
||||
} else if (scene) {
|
||||
return isExternalScene && jsonBackendMatch
|
||||
return isExternalScene && shareableLink
|
||||
? {
|
||||
scene,
|
||||
isExternalScene,
|
||||
id: jsonBackendMatch[1],
|
||||
key: jsonBackendMatch[2],
|
||||
id: shareableLink[0],
|
||||
key: shareableLink[1],
|
||||
}
|
||||
: { scene, isExternalScene: false };
|
||||
}
|
||||
|
|
@ -739,6 +902,31 @@ const ExcalidrawWrapper = () => {
|
|||
[setShareDialogState],
|
||||
);
|
||||
|
||||
const [constraints] = useState<DebugScrollConstraints>(() => {
|
||||
const stored = new URLSearchParams(location.hash.slice(1)).get(
|
||||
"constraints",
|
||||
);
|
||||
let storedConstraints = {};
|
||||
if (stored) {
|
||||
try {
|
||||
storedConstraints = JSON.parse(window.atob(stored));
|
||||
} catch {}
|
||||
}
|
||||
|
||||
return {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: document.body.clientWidth,
|
||||
height: document.body.clientHeight,
|
||||
lockZoom: false,
|
||||
viewportZoomFactor: 0.7,
|
||||
enabled: true,
|
||||
...storedConstraints,
|
||||
};
|
||||
});
|
||||
|
||||
console.log(constraints);
|
||||
|
||||
// browsers generally prevent infinite self-embedding, there are
|
||||
// cases where it still happens, and while we disallow self-embedding
|
||||
// by not whitelisting our own origin, this serves as an additional guard
|
||||
|
|
@ -864,6 +1052,7 @@ const ExcalidrawWrapper = () => {
|
|||
</div>
|
||||
);
|
||||
}}
|
||||
scrollConstraints={constraints.enabled ? constraints : undefined}
|
||||
onLinkOpen={(element, event) => {
|
||||
if (element.link && isElementLink(element.link)) {
|
||||
event.preventDefault();
|
||||
|
|
@ -871,6 +1060,12 @@ const ExcalidrawWrapper = () => {
|
|||
}
|
||||
}}
|
||||
>
|
||||
{excalidrawAPI && (
|
||||
<ConstraintsSettings
|
||||
excalidrawAPI={excalidrawAPI}
|
||||
initialConstraints={constraints}
|
||||
/>
|
||||
)}
|
||||
<AppMainMenu
|
||||
onCollabDialogOpen={onCollabDialogOpen}
|
||||
isCollaborating={isCollaborating}
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@ import {
|
|||
ZoomResetIcon,
|
||||
} from "../components/icons";
|
||||
import { setCursor } from "../cursor";
|
||||
import { constrainScrollState } from "../scene/scrollConstraints";
|
||||
|
||||
import { t } from "../i18n";
|
||||
import { getNormalizedZoom } from "../scene";
|
||||
|
|
@ -136,7 +137,7 @@ export const actionZoomIn = register({
|
|||
trackEvent: { category: "canvas" },
|
||||
perform: (_elements, appState, _, app) => {
|
||||
return {
|
||||
appState: {
|
||||
appState: constrainScrollState({
|
||||
...appState,
|
||||
...getStateForZoom(
|
||||
{
|
||||
|
|
@ -147,7 +148,7 @@ export const actionZoomIn = register({
|
|||
appState,
|
||||
),
|
||||
userToFollow: null,
|
||||
},
|
||||
}),
|
||||
captureUpdate: CaptureUpdateAction.EVENTUALLY,
|
||||
};
|
||||
},
|
||||
|
|
@ -177,7 +178,7 @@ export const actionZoomOut = register({
|
|||
trackEvent: { category: "canvas" },
|
||||
perform: (_elements, appState, _, app) => {
|
||||
return {
|
||||
appState: {
|
||||
appState: constrainScrollState({
|
||||
...appState,
|
||||
...getStateForZoom(
|
||||
{
|
||||
|
|
@ -188,7 +189,7 @@ export const actionZoomOut = register({
|
|||
appState,
|
||||
),
|
||||
userToFollow: null,
|
||||
},
|
||||
}),
|
||||
captureUpdate: CaptureUpdateAction.EVENTUALLY,
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const defaultExportScale = EXPORT_SCALES.includes(devicePixelRatio)
|
|||
|
||||
export const getDefaultAppState = (): Omit<
|
||||
AppState,
|
||||
"offsetTop" | "offsetLeft" | "width" | "height"
|
||||
"offsetTop" | "offsetLeft" | "width" | "height" | "scrollConstraints"
|
||||
> => {
|
||||
return {
|
||||
showWelcomeScreen: false,
|
||||
|
|
@ -243,6 +243,7 @@ const APP_STATE_STORAGE_CONF = (<
|
|||
objectsSnapModeEnabled: { browser: true, export: false, server: false },
|
||||
userToFollow: { browser: false, export: false, server: false },
|
||||
followedBy: { browser: false, export: false, server: false },
|
||||
scrollConstraints: { browser: false, export: false, server: false },
|
||||
isCropping: { browser: false, export: false, server: false },
|
||||
croppingElementId: { browser: false, export: false, server: false },
|
||||
searchMatches: { browser: false, export: false, server: false },
|
||||
|
|
|
|||
|
|
@ -522,6 +522,8 @@ import type {
|
|||
FrameNameBoundsCache,
|
||||
SidebarName,
|
||||
SidebarTabName,
|
||||
ScrollConstraints,
|
||||
AnimateTranslateCanvasValues,
|
||||
KeyboardModifiersObject,
|
||||
CollaboratorPointer,
|
||||
ToolType,
|
||||
|
|
@ -535,6 +537,10 @@ import type {
|
|||
} from "../types";
|
||||
import type { RoughCanvas } from "roughjs/bin/canvas";
|
||||
import type { Action, ActionResult } from "../actions/types";
|
||||
import {
|
||||
constrainScrollState,
|
||||
calculateConstrainedScrollCenter,
|
||||
} from "../scene/scrollConstraints";
|
||||
|
||||
const AppContext = React.createContext<AppClassProperties>(null!);
|
||||
const AppPropsContext = React.createContext<AppProps>(null!);
|
||||
|
|
@ -570,6 +576,7 @@ const ExcalidrawAppStateContext = React.createContext<AppState>({
|
|||
height: 0,
|
||||
offsetLeft: 0,
|
||||
offsetTop: 0,
|
||||
scrollConstraints: null,
|
||||
});
|
||||
ExcalidrawAppStateContext.displayName = "ExcalidrawAppStateContext";
|
||||
|
||||
|
|
@ -607,6 +614,8 @@ let isDraggingScrollBar: boolean = false;
|
|||
let currentScrollBars: ScrollBars = { horizontal: null, vertical: null };
|
||||
let touchTimeout = 0;
|
||||
let invalidateContextMenu = false;
|
||||
let scrollConstraintsAnimationTimeout: ReturnType<typeof setTimeout> | null =
|
||||
null;
|
||||
|
||||
/**
|
||||
* Map of youtube embed video states
|
||||
|
|
@ -731,7 +740,9 @@ class App extends React.Component<AppProps, AppState> {
|
|||
objectsSnapModeEnabled = false,
|
||||
theme = defaultAppState.theme,
|
||||
name = `${t("labels.untitled")}-${getDateTime()}`,
|
||||
scrollConstraints,
|
||||
} = props;
|
||||
|
||||
this.state = {
|
||||
...defaultAppState,
|
||||
theme,
|
||||
|
|
@ -744,6 +755,7 @@ class App extends React.Component<AppProps, AppState> {
|
|||
name,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
scrollConstraints: scrollConstraints ?? null,
|
||||
};
|
||||
|
||||
this.id = nanoid();
|
||||
|
|
@ -791,6 +803,7 @@ class App extends React.Component<AppProps, AppState> {
|
|||
resetCursor: this.resetCursor,
|
||||
updateFrameRendering: this.updateFrameRendering,
|
||||
toggleSidebar: this.toggleSidebar,
|
||||
setScrollConstraints: this.setScrollConstraints,
|
||||
onChange: (cb) => this.onChangeEmitter.on(cb),
|
||||
onPointerDown: (cb) => this.onPointerDownEmitter.on(cb),
|
||||
onPointerUp: (cb) => this.onPointerUpEmitter.on(cb),
|
||||
|
|
@ -2406,7 +2419,12 @@ class App extends React.Component<AppProps, AppState> {
|
|||
isLoading: false,
|
||||
toast: this.state.toast,
|
||||
};
|
||||
if (initialData?.scrollToContent) {
|
||||
if (this.props.scrollConstraints) {
|
||||
scene.appState = {
|
||||
...scene.appState,
|
||||
...calculateConstrainedScrollCenter(this.state, scene.appState),
|
||||
};
|
||||
} else if (initialData?.scrollToContent) {
|
||||
scene.appState = {
|
||||
...scene.appState,
|
||||
...calculateScrollCenter(scene.elements, {
|
||||
|
|
@ -2415,6 +2433,7 @@ class App extends React.Component<AppProps, AppState> {
|
|||
height: this.state.height,
|
||||
offsetTop: this.state.offsetTop,
|
||||
offsetLeft: this.state.offsetLeft,
|
||||
scrollConstraints: this.state.scrollConstraints,
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
|
@ -2628,7 +2647,11 @@ class App extends React.Component<AppProps, AppState> {
|
|||
if (!supportsResizeObserver) {
|
||||
this.refreshEditorBreakpoints();
|
||||
}
|
||||
this.setState({});
|
||||
if (this.state.scrollConstraints) {
|
||||
this.setState((state) => constrainScrollState(state));
|
||||
} else {
|
||||
this.setState({});
|
||||
}
|
||||
});
|
||||
|
||||
/** generally invoked only if fullscreen was invoked programmatically */
|
||||
|
|
@ -2959,6 +2982,28 @@ class App extends React.Component<AppProps, AppState> {
|
|||
this.props.onChange?.(elements, this.state, this.files);
|
||||
this.onChangeEmitter.trigger(elements, this.state, this.files);
|
||||
}
|
||||
|
||||
if (this.state.scrollConstraints?.animateOnNextUpdate) {
|
||||
const newState = constrainScrollState(this.state, {
|
||||
allowOverscroll: false,
|
||||
});
|
||||
|
||||
scrollConstraintsAnimationTimeout = setTimeout(() => {
|
||||
this.cancelInProgressAnimation?.();
|
||||
const fromValues = {
|
||||
scrollX: this.state.scrollX,
|
||||
scrollY: this.state.scrollY,
|
||||
zoom: this.state.zoom.value,
|
||||
};
|
||||
const toValues = {
|
||||
scrollX: newState.scrollX,
|
||||
scrollY: newState.scrollY,
|
||||
zoom: newState.zoom.value,
|
||||
};
|
||||
|
||||
this.animateToConstrainedArea(fromValues, toValues);
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
|
||||
private renderInteractiveSceneCallback = ({
|
||||
|
|
@ -3705,8 +3750,8 @@ class App extends React.Component<AppProps, AppState> {
|
|||
*/
|
||||
value: number,
|
||||
) => {
|
||||
this.setState({
|
||||
...getStateForZoom(
|
||||
this.setState(
|
||||
getStateForZoom(
|
||||
{
|
||||
viewportX: this.state.width / 2 + this.state.offsetLeft,
|
||||
viewportY: this.state.height / 2 + this.state.offsetTop,
|
||||
|
|
@ -3714,7 +3759,7 @@ class App extends React.Component<AppProps, AppState> {
|
|||
},
|
||||
this.state,
|
||||
),
|
||||
});
|
||||
);
|
||||
};
|
||||
|
||||
private cancelInProgressAnimation: (() => void) | null = null;
|
||||
|
|
@ -3814,32 +3859,18 @@ class App extends React.Component<AppProps, AppState> {
|
|||
// when animating, we use RequestAnimationFrame to prevent the animation
|
||||
// from slowing down other processes
|
||||
if (opts?.animate) {
|
||||
const origScrollX = this.state.scrollX;
|
||||
const origScrollY = this.state.scrollY;
|
||||
const origZoom = this.state.zoom.value;
|
||||
const fromValues = {
|
||||
scrollX: this.state.scrollX,
|
||||
scrollY: this.state.scrollY,
|
||||
zoom: this.state.zoom.value,
|
||||
};
|
||||
|
||||
const cancel = easeToValuesRAF({
|
||||
fromValues: {
|
||||
scrollX: origScrollX,
|
||||
scrollY: origScrollY,
|
||||
zoom: origZoom,
|
||||
},
|
||||
toValues: { scrollX, scrollY, zoom: zoom.value },
|
||||
interpolateValue: (from, to, progress, key) => {
|
||||
// for zoom, use different easing
|
||||
if (key === "zoom") {
|
||||
return from * Math.pow(to / from, easeOut(progress));
|
||||
}
|
||||
// handle using default
|
||||
return undefined;
|
||||
},
|
||||
onStep: ({ scrollX, scrollY, zoom }) => {
|
||||
this.setState({
|
||||
scrollX,
|
||||
scrollY,
|
||||
zoom: { value: zoom },
|
||||
});
|
||||
},
|
||||
const toValues = { scrollX, scrollY, zoom: zoom.value };
|
||||
|
||||
this.animateTranslateCanvas({
|
||||
fromValues,
|
||||
toValues,
|
||||
duration: opts?.duration ?? 500,
|
||||
onStart: () => {
|
||||
this.setState({ shouldCacheIgnoreZoom: true });
|
||||
},
|
||||
|
|
@ -3849,13 +3880,7 @@ class App extends React.Component<AppProps, AppState> {
|
|||
onCancel: () => {
|
||||
this.setState({ shouldCacheIgnoreZoom: false });
|
||||
},
|
||||
duration: opts?.duration ?? 500,
|
||||
});
|
||||
|
||||
this.cancelInProgressAnimation = () => {
|
||||
cancel();
|
||||
this.cancelInProgressAnimation = null;
|
||||
};
|
||||
} else {
|
||||
this.setState({ scrollX, scrollY, zoom });
|
||||
}
|
||||
|
|
@ -3869,11 +3894,114 @@ class App extends React.Component<AppProps, AppState> {
|
|||
|
||||
/** use when changing scrollX/scrollY/zoom based on user interaction */
|
||||
private translateCanvas: React.Component<any, AppState>["setState"] = (
|
||||
state,
|
||||
stateUpdate,
|
||||
) => {
|
||||
this.cancelInProgressAnimation?.();
|
||||
this.maybeUnfollowRemoteUser();
|
||||
this.setState(state);
|
||||
|
||||
if (scrollConstraintsAnimationTimeout) {
|
||||
clearTimeout(scrollConstraintsAnimationTimeout);
|
||||
}
|
||||
|
||||
const partialNewState =
|
||||
typeof stateUpdate === "function"
|
||||
? (
|
||||
stateUpdate as (
|
||||
prevState: Readonly<AppState>,
|
||||
props: Readonly<AppProps>,
|
||||
) => AppState
|
||||
)(this.state, this.props)
|
||||
: stateUpdate;
|
||||
|
||||
const newState: AppState = {
|
||||
...this.state,
|
||||
...partialNewState,
|
||||
...(this.state.scrollConstraints && {
|
||||
// manually reset if setState in onCancel wasn't committed yet
|
||||
shouldCacheIgnoreZoom: false,
|
||||
}),
|
||||
};
|
||||
|
||||
this.setState(constrainScrollState(newState));
|
||||
};
|
||||
|
||||
private animateToConstrainedArea = (
|
||||
fromValues: AnimateTranslateCanvasValues,
|
||||
toValues: AnimateTranslateCanvasValues,
|
||||
) => {
|
||||
const cleanUp = () => {
|
||||
this.setState((state) => ({
|
||||
shouldCacheIgnoreZoom: false,
|
||||
scrollConstraints: {
|
||||
...state.scrollConstraints!,
|
||||
animateOnNextUpdate: false,
|
||||
},
|
||||
}));
|
||||
};
|
||||
|
||||
this.animateTranslateCanvas({
|
||||
fromValues,
|
||||
toValues,
|
||||
duration: 200,
|
||||
onStart: () => {
|
||||
this.setState((state) => {
|
||||
return {
|
||||
shouldCacheIgnoreZoom: true,
|
||||
scrollConstraints: {
|
||||
...state.scrollConstraints!,
|
||||
animateOnNextUpdate: false,
|
||||
},
|
||||
};
|
||||
});
|
||||
},
|
||||
onEnd: cleanUp,
|
||||
onCancel: cleanUp,
|
||||
});
|
||||
};
|
||||
|
||||
private animateTranslateCanvas = ({
|
||||
fromValues,
|
||||
toValues,
|
||||
duration,
|
||||
onStart,
|
||||
onEnd,
|
||||
onCancel,
|
||||
}: {
|
||||
fromValues: AnimateTranslateCanvasValues;
|
||||
toValues: AnimateTranslateCanvasValues;
|
||||
duration: number;
|
||||
onStart: () => void;
|
||||
onEnd: () => void;
|
||||
onCancel: () => void;
|
||||
}) => {
|
||||
const cancel = easeToValuesRAF({
|
||||
fromValues,
|
||||
toValues,
|
||||
interpolateValue: (from, to, progress, key) => {
|
||||
// for zoom, use different easing
|
||||
if (key === "zoom") {
|
||||
return from * Math.pow(to / from, easeOut(progress));
|
||||
}
|
||||
// handle using default
|
||||
return undefined;
|
||||
},
|
||||
onStep: ({ scrollX, scrollY, zoom }) => {
|
||||
this.setState({
|
||||
scrollX,
|
||||
scrollY,
|
||||
zoom: { value: zoom },
|
||||
});
|
||||
},
|
||||
onStart,
|
||||
onEnd,
|
||||
onCancel,
|
||||
duration,
|
||||
});
|
||||
|
||||
this.cancelInProgressAnimation = () => {
|
||||
cancel();
|
||||
this.cancelInProgressAnimation = null;
|
||||
};
|
||||
};
|
||||
|
||||
setToast = (
|
||||
|
|
@ -4947,16 +5075,22 @@ class App extends React.Component<AppProps, AppState> {
|
|||
|
||||
const initialScale = gesture.initialScale;
|
||||
if (initialScale) {
|
||||
this.setState((state) => ({
|
||||
...getStateForZoom(
|
||||
this.setState((state) =>
|
||||
constrainScrollState(
|
||||
{
|
||||
viewportX: this.lastViewportPosition.x,
|
||||
viewportY: this.lastViewportPosition.y,
|
||||
nextZoom: getNormalizedZoom(initialScale * event.scale),
|
||||
...state,
|
||||
...getStateForZoom(
|
||||
{
|
||||
viewportX: this.lastViewportPosition.x,
|
||||
viewportY: this.lastViewportPosition.y,
|
||||
nextZoom: getNormalizedZoom(initialScale * event.scale),
|
||||
},
|
||||
state,
|
||||
),
|
||||
},
|
||||
state,
|
||||
{ disableAnimation: true },
|
||||
),
|
||||
}));
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -11269,6 +11403,51 @@ class App extends React.Component<AppProps, AppState> {
|
|||
await setLanguage(currentLang);
|
||||
this.setAppState({});
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the scroll constraints of the application state.
|
||||
*
|
||||
* @param scrollConstraints - The new scroll constraints.
|
||||
*/
|
||||
public setScrollConstraints = (
|
||||
scrollConstraints: ScrollConstraints | null,
|
||||
) => {
|
||||
if (scrollConstraints) {
|
||||
this.setState(
|
||||
{
|
||||
scrollConstraints,
|
||||
viewModeEnabled: true,
|
||||
},
|
||||
() => {
|
||||
const newState = constrainScrollState(
|
||||
{
|
||||
...this.state,
|
||||
scrollConstraints,
|
||||
},
|
||||
{ allowOverscroll: false },
|
||||
);
|
||||
|
||||
this.animateToConstrainedArea(
|
||||
{
|
||||
scrollX: this.state.scrollX,
|
||||
scrollY: this.state.scrollY,
|
||||
zoom: this.state.zoom.value,
|
||||
},
|
||||
{
|
||||
scrollX: newState.scrollX,
|
||||
scrollY: newState.scrollY,
|
||||
zoom: newState.zoom.value,
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
} else {
|
||||
this.setState({
|
||||
scrollConstraints: null,
|
||||
viewModeEnabled: false,
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -549,7 +549,7 @@ const LayerUI = ({
|
|||
showExitZenModeBtn={showExitZenModeBtn}
|
||||
renderWelcomeScreen={renderWelcomeScreen}
|
||||
/>
|
||||
{appState.scrolledOutside && (
|
||||
{appState.scrolledOutside && !appState.scrollConstraints && (
|
||||
<button
|
||||
type="button"
|
||||
className="scroll-back-to-content"
|
||||
|
|
|
|||
|
|
@ -195,7 +195,8 @@ export const MobileMenu = ({
|
|||
{renderAppToolbar()}
|
||||
{appState.scrolledOutside &&
|
||||
!appState.openMenu &&
|
||||
!appState.openSidebar && (
|
||||
!appState.openSidebar &&
|
||||
!appState.scrollConstraints && (
|
||||
<button
|
||||
type="button"
|
||||
className="scroll-back-to-content"
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ import type { ImportedDataState, LegacyAppState } from "./types";
|
|||
|
||||
type RestoredAppState = Omit<
|
||||
AppState,
|
||||
"offsetTop" | "offsetLeft" | "width" | "height"
|
||||
"offsetTop" | "offsetLeft" | "width" | "height" | "scrollConstraints"
|
||||
>;
|
||||
|
||||
export const AllowedExcalidrawActiveTools: Record<
|
||||
|
|
|
|||
|
|
@ -67,6 +67,7 @@ const canvas = exportToCanvas(
|
|||
offsetLeft: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
scrollConstraints: null,
|
||||
},
|
||||
{}, // files
|
||||
{
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
|
|||
onScrollChange,
|
||||
onDuplicate,
|
||||
children,
|
||||
scrollConstraints,
|
||||
validateEmbeddable,
|
||||
renderEmbeddable,
|
||||
aiEnabled,
|
||||
|
|
@ -120,7 +121,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
|
|||
onPointerUpdate={onPointerUpdate}
|
||||
renderTopRightUI={renderTopRightUI}
|
||||
langCode={langCode}
|
||||
viewModeEnabled={viewModeEnabled}
|
||||
viewModeEnabled={viewModeEnabled /* || !!scrollConstraints */}
|
||||
zenModeEnabled={zenModeEnabled}
|
||||
gridModeEnabled={gridModeEnabled}
|
||||
libraryReturnUrl={libraryReturnUrl}
|
||||
|
|
@ -139,6 +140,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
|
|||
onPointerDown={onPointerDown}
|
||||
onPointerUp={onPointerUp}
|
||||
onScrollChange={onScrollChange}
|
||||
scrollConstraints={scrollConstraints}
|
||||
onDuplicate={onDuplicate}
|
||||
validateEmbeddable={validateEmbeddable}
|
||||
renderEmbeddable={renderEmbeddable}
|
||||
|
|
|
|||
443
packages/excalidraw/scene/scrollConstraints.ts
Normal file
443
packages/excalidraw/scene/scrollConstraints.ts
Normal file
|
|
@ -0,0 +1,443 @@
|
|||
import { isShallowEqual } from "@excalidraw/common";
|
||||
import { AppState, ScrollConstraints } from "../types";
|
||||
import { getNormalizedZoom } from "./normalize";
|
||||
|
||||
/**
|
||||
* Calculates the scroll center coordinates and the optimal zoom level to fit the constrained scrollable area within the viewport.
|
||||
*
|
||||
* This method first calculates the necessary zoom level to fit the entire constrained scrollable area within the viewport.
|
||||
* Then it calculates the constraints for the viewport given the new zoom level and the current scrollable area dimensions.
|
||||
* The function returns an object containing the optimal scroll positions and zoom level.
|
||||
*
|
||||
* @param scrollConstraints - The constraints of the scrollable area including width, height, and position.
|
||||
* @param appState - An object containing the current horizontal and vertical scroll positions.
|
||||
* @returns An object containing the calculated optimal horizontal and vertical scroll positions and zoom level.
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* const { scrollX, scrollY, zoom } = this.calculateConstrainedScrollCenter(scrollConstraints, { scrollX, scrollY });
|
||||
*/
|
||||
export const calculateConstrainedScrollCenter = (
|
||||
state: AppState,
|
||||
{ scrollX, scrollY }: Pick<AppState, "scrollX" | "scrollY">,
|
||||
): {
|
||||
scrollX: AppState["scrollX"];
|
||||
scrollY: AppState["scrollY"];
|
||||
zoom: AppState["zoom"];
|
||||
} => {
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
zoom,
|
||||
scrollConstraints: inverseScrollConstraints,
|
||||
} = state;
|
||||
|
||||
if (!inverseScrollConstraints) {
|
||||
return { scrollX, scrollY, zoom };
|
||||
}
|
||||
|
||||
const scrollConstraints = alignScrollConstraints(inverseScrollConstraints);
|
||||
|
||||
const { zoomLevelX, zoomLevelY, initialZoomLevel } = calculateZoomLevel(
|
||||
scrollConstraints,
|
||||
width,
|
||||
height,
|
||||
);
|
||||
|
||||
// The zoom level to contain the whole constrained area in view
|
||||
const _zoom = {
|
||||
value: getNormalizedZoom(
|
||||
initialZoomLevel ?? Math.min(zoomLevelX, zoomLevelY),
|
||||
),
|
||||
};
|
||||
|
||||
const constraints = calculateConstraints({
|
||||
scrollConstraints,
|
||||
width,
|
||||
height,
|
||||
zoom: _zoom,
|
||||
allowOverscroll: false,
|
||||
});
|
||||
|
||||
return {
|
||||
scrollX: constraints.minScrollX,
|
||||
scrollY: constraints.minScrollY,
|
||||
zoom: constraints.constrainedZoom,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculates the zoom levels necessary to fit the constrained scrollable area within the viewport on the X and Y axes.
|
||||
*
|
||||
* The function considers the dimensions of the scrollable area, the dimensions of the viewport, the viewport zoom factor,
|
||||
* and whether the zoom should be locked. It then calculates the necessary zoom levels for the X and Y axes separately.
|
||||
* If the zoom should be locked, it calculates the maximum zoom level that fits the scrollable area within the viewport,
|
||||
* factoring in the viewport zoom factor. If the zoom should not be locked, the maximum zoom level is set to null.
|
||||
*
|
||||
* @param scrollConstraints - The constraints of the scrollable area including width, height, and position.
|
||||
* @param width - The width of the viewport.
|
||||
* @param height - The height of the viewport.
|
||||
* @returns An object containing the calculated zoom levels for the X and Y axes, and the maximum zoom level if applicable.
|
||||
*/
|
||||
const calculateZoomLevel = (
|
||||
scrollConstraints: ScrollConstraints,
|
||||
width: AppState["width"],
|
||||
height: AppState["height"],
|
||||
) => {
|
||||
const DEFAULT_VIEWPORT_ZOOM_FACTOR = 0.2;
|
||||
|
||||
const viewportZoomFactor = scrollConstraints.viewportZoomFactor
|
||||
? Math.min(1, Math.max(scrollConstraints.viewportZoomFactor, 0.1))
|
||||
: DEFAULT_VIEWPORT_ZOOM_FACTOR;
|
||||
|
||||
const scrollableWidth = scrollConstraints.width;
|
||||
const scrollableHeight = scrollConstraints.height;
|
||||
const zoomLevelX = width / scrollableWidth;
|
||||
const zoomLevelY = height / scrollableHeight;
|
||||
const initialZoomLevel = getNormalizedZoom(
|
||||
Math.min(zoomLevelX, zoomLevelY) * viewportZoomFactor,
|
||||
);
|
||||
return { zoomLevelX, zoomLevelY, initialZoomLevel };
|
||||
};
|
||||
|
||||
const calculateConstraints = ({
|
||||
scrollConstraints,
|
||||
width,
|
||||
height,
|
||||
zoom,
|
||||
allowOverscroll,
|
||||
}: {
|
||||
scrollConstraints: ScrollConstraints;
|
||||
width: AppState["width"];
|
||||
height: AppState["height"];
|
||||
zoom: AppState["zoom"];
|
||||
allowOverscroll: boolean;
|
||||
}) => {
|
||||
// Set the overscroll allowance percentage
|
||||
const OVERSCROLL_ALLOWANCE_PERCENTAGE = 0.2;
|
||||
|
||||
/**
|
||||
* Calculates the center position of the constrained scroll area.
|
||||
* @returns The X and Y coordinates of the center position.
|
||||
*/
|
||||
const calculateConstrainedScrollCenter = (zoom: number) => {
|
||||
const constrainedScrollCenterX =
|
||||
scrollConstraints.x + (scrollConstraints.width - width / zoom) / -2;
|
||||
const constrainedScrollCenterY =
|
||||
scrollConstraints.y + (scrollConstraints.height - height / zoom) / -2;
|
||||
return { constrainedScrollCenterX, constrainedScrollCenterY };
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculates the overscroll allowance values for the constrained area.
|
||||
* @returns The overscroll allowance values for the X and Y axes.
|
||||
*/
|
||||
const calculateOverscrollAllowance = () => {
|
||||
const overscrollAllowanceX =
|
||||
OVERSCROLL_ALLOWANCE_PERCENTAGE * scrollConstraints.width;
|
||||
const overscrollAllowanceY =
|
||||
OVERSCROLL_ALLOWANCE_PERCENTAGE * scrollConstraints.height;
|
||||
|
||||
return Math.min(overscrollAllowanceX, overscrollAllowanceY);
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculates the minimum and maximum scroll values based on the current state.
|
||||
* @param shouldAdjustForCenteredViewX - Whether the view should be adjusted for centered view on X axis - when constrained area width fits the viewport.
|
||||
* @param shouldAdjustForCenteredViewY - Whether the view should be adjusted for centered view on Y axis - when constrained area height fits the viewport.
|
||||
* @param overscrollAllowanceX - The overscroll allowance value for the X axis.
|
||||
* @param overscrollAllowanceY - The overscroll allowance value for the Y axis.
|
||||
* @param constrainedScrollCenterX - The X coordinate of the constrained scroll area center.
|
||||
* @param constrainedScrollCenterY - The Y coordinate of the constrained scroll area center.
|
||||
* @returns The minimum and maximum scroll values for the X and Y axes.
|
||||
*/
|
||||
const calculateMinMaxScrollValues = (
|
||||
shouldAdjustForCenteredViewX: boolean,
|
||||
shouldAdjustForCenteredViewY: boolean,
|
||||
overscrollAllowance: number,
|
||||
constrainedScrollCenterX: number,
|
||||
constrainedScrollCenterY: number,
|
||||
zoom: number,
|
||||
) => {
|
||||
let maxScrollX;
|
||||
let minScrollX;
|
||||
let maxScrollY;
|
||||
let minScrollY;
|
||||
|
||||
// Handling the X-axis
|
||||
if (allowOverscroll) {
|
||||
if (shouldAdjustForCenteredViewX) {
|
||||
maxScrollX = constrainedScrollCenterX + overscrollAllowance;
|
||||
minScrollX = constrainedScrollCenterX - overscrollAllowance;
|
||||
} else {
|
||||
maxScrollX = scrollConstraints.x + overscrollAllowance;
|
||||
minScrollX =
|
||||
scrollConstraints.x -
|
||||
scrollConstraints.width +
|
||||
width / zoom -
|
||||
overscrollAllowance;
|
||||
}
|
||||
} else if (shouldAdjustForCenteredViewX) {
|
||||
maxScrollX = constrainedScrollCenterX;
|
||||
minScrollX = constrainedScrollCenterX;
|
||||
} else {
|
||||
maxScrollX = scrollConstraints.x;
|
||||
minScrollX = scrollConstraints.x - scrollConstraints.width + width / zoom;
|
||||
}
|
||||
|
||||
// Handling the Y-axis
|
||||
if (allowOverscroll) {
|
||||
if (shouldAdjustForCenteredViewY) {
|
||||
maxScrollY = constrainedScrollCenterY + overscrollAllowance;
|
||||
minScrollY = constrainedScrollCenterY - overscrollAllowance;
|
||||
} else {
|
||||
maxScrollY = scrollConstraints.y + overscrollAllowance;
|
||||
minScrollY =
|
||||
scrollConstraints.y -
|
||||
scrollConstraints.height +
|
||||
height / zoom -
|
||||
overscrollAllowance;
|
||||
}
|
||||
} else if (shouldAdjustForCenteredViewY) {
|
||||
maxScrollY = constrainedScrollCenterY;
|
||||
minScrollY = constrainedScrollCenterY;
|
||||
} else {
|
||||
maxScrollY = scrollConstraints.y;
|
||||
minScrollY =
|
||||
scrollConstraints.y - scrollConstraints.height + height / zoom;
|
||||
}
|
||||
|
||||
return { maxScrollX, minScrollX, maxScrollY, minScrollY };
|
||||
};
|
||||
|
||||
const { zoomLevelX, zoomLevelY, initialZoomLevel } = calculateZoomLevel(
|
||||
scrollConstraints,
|
||||
width,
|
||||
height,
|
||||
);
|
||||
|
||||
const constrainedZoom = getNormalizedZoom(
|
||||
scrollConstraints.lockZoom
|
||||
? Math.max(initialZoomLevel, zoom.value)
|
||||
: zoom.value,
|
||||
);
|
||||
const { constrainedScrollCenterX, constrainedScrollCenterY } =
|
||||
calculateConstrainedScrollCenter(constrainedZoom);
|
||||
const overscrollAllowance = calculateOverscrollAllowance();
|
||||
const shouldAdjustForCenteredViewX = constrainedZoom <= zoomLevelX;
|
||||
const shouldAdjustForCenteredViewY = constrainedZoom <= zoomLevelY;
|
||||
const { maxScrollX, minScrollX, maxScrollY, minScrollY } =
|
||||
calculateMinMaxScrollValues(
|
||||
shouldAdjustForCenteredViewX,
|
||||
shouldAdjustForCenteredViewY,
|
||||
overscrollAllowance,
|
||||
constrainedScrollCenterX,
|
||||
constrainedScrollCenterY,
|
||||
constrainedZoom,
|
||||
);
|
||||
|
||||
return {
|
||||
maxScrollX,
|
||||
minScrollX,
|
||||
maxScrollY,
|
||||
minScrollY,
|
||||
constrainedZoom: {
|
||||
value: constrainedZoom,
|
||||
},
|
||||
initialZoomLevel,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Constrains the scroll values within the constrained area.
|
||||
* @param maxScrollX - The maximum scroll value for the X axis.
|
||||
* @param minScrollX - The minimum scroll value for the X axis.
|
||||
* @param maxScrollY - The maximum scroll value for the Y axis.
|
||||
* @param minScrollY - The minimum scroll value for the Y axis.
|
||||
* @returns The constrained scroll values for the X and Y axes.
|
||||
*/
|
||||
const constrainScrollValues = ({
|
||||
scrollX,
|
||||
scrollY,
|
||||
maxScrollX,
|
||||
minScrollX,
|
||||
maxScrollY,
|
||||
minScrollY,
|
||||
constrainedZoom,
|
||||
}: {
|
||||
scrollX: number;
|
||||
scrollY: number;
|
||||
maxScrollX: number;
|
||||
minScrollX: number;
|
||||
maxScrollY: number;
|
||||
minScrollY: number;
|
||||
constrainedZoom: AppState["zoom"];
|
||||
}) => {
|
||||
const constrainedScrollX = Math.min(
|
||||
maxScrollX,
|
||||
Math.max(scrollX, minScrollX),
|
||||
);
|
||||
const constrainedScrollY = Math.min(
|
||||
maxScrollY,
|
||||
Math.max(scrollY, minScrollY),
|
||||
);
|
||||
return {
|
||||
scrollX: constrainedScrollX,
|
||||
scrollY: constrainedScrollY,
|
||||
zoom: constrainedZoom,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Inverts the scroll constraints to align with the state scrollX and scrollY values, which are inverted.
|
||||
* This should be removed once the https://github.com/excalidraw/excalidraw/issues/5965 is resolved.
|
||||
*
|
||||
* @param originalScrollContraints - The scroll constraints with the original coordinates.
|
||||
*/
|
||||
// BUG: remove this function once the #5965 is resolved
|
||||
const alignScrollConstraints = (
|
||||
originalScrollContraints: ScrollConstraints,
|
||||
) => {
|
||||
return {
|
||||
...originalScrollContraints,
|
||||
x: originalScrollContraints.x * -1,
|
||||
y: originalScrollContraints.y * -1,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Determines whether the current viewport is outside the constrained area defined in the AppState.
|
||||
*
|
||||
* @param state - The application state containing scroll, zoom, and constraint information.
|
||||
* @returns True if the viewport is outside the constrained area; otherwise undefined.
|
||||
*/
|
||||
const isViewportOutsideOfConstrainedArea = (state: AppState) => {
|
||||
if (!state.scrollConstraints) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const {
|
||||
scrollX,
|
||||
scrollY,
|
||||
width,
|
||||
height,
|
||||
scrollConstraints: inverseScrollConstraints,
|
||||
zoom,
|
||||
} = state;
|
||||
|
||||
const scrollConstraints = alignScrollConstraints(inverseScrollConstraints);
|
||||
|
||||
// Adjust scroll and dimensions according to the zoom level
|
||||
const adjustedWidth = width / zoom.value;
|
||||
const adjustedHeight = height / zoom.value;
|
||||
|
||||
return (
|
||||
scrollX > scrollConstraints.x ||
|
||||
scrollX - adjustedWidth < scrollConstraints.x - scrollConstraints.width ||
|
||||
scrollY > scrollConstraints.y ||
|
||||
scrollY - adjustedHeight < scrollConstraints.y - scrollConstraints.height
|
||||
);
|
||||
};
|
||||
|
||||
let memoizedValues: {
|
||||
previousState: Pick<
|
||||
AppState,
|
||||
"zoom" | "width" | "height" | "scrollConstraints"
|
||||
>;
|
||||
constraints: ReturnType<typeof calculateConstraints>;
|
||||
allowOverscroll: boolean;
|
||||
} | null = null;
|
||||
|
||||
type Options = { allowOverscroll?: boolean; disableAnimation?: boolean };
|
||||
/**
|
||||
* Constrains the AppState scroll values within the defined scroll constraints.
|
||||
*
|
||||
* @param state - The original AppState with the current scroll position, dimensions, and constraints.
|
||||
* @param options - An object containing options for the method: allowOverscroll and disableAnimation.
|
||||
* @returns A new AppState object with scroll values constrained as per the defined constraints.
|
||||
*/
|
||||
export const constrainScrollState = (
|
||||
state: AppState,
|
||||
options?: Options,
|
||||
): AppState => {
|
||||
if (!state.scrollConstraints) {
|
||||
return state;
|
||||
}
|
||||
const {
|
||||
scrollX,
|
||||
scrollY,
|
||||
width,
|
||||
height,
|
||||
scrollConstraints: inverseScrollConstraints,
|
||||
zoom,
|
||||
} = state;
|
||||
|
||||
const { allowOverscroll = true, disableAnimation = false } = options || {};
|
||||
|
||||
const scrollConstraints = alignScrollConstraints(inverseScrollConstraints);
|
||||
|
||||
const canUseMemoizedValues =
|
||||
memoizedValues && // there are memoized values
|
||||
memoizedValues.previousState.scrollConstraints && // can't use memoized values if there were no scrollConstraints in memoizedValues
|
||||
memoizedValues.allowOverscroll === allowOverscroll && // allowOverscroll is the same as in memoizedValues
|
||||
// current scrollConstraints are the same as in memoizedValues
|
||||
isShallowEqual(
|
||||
state.scrollConstraints,
|
||||
memoizedValues.previousState.scrollConstraints!,
|
||||
) &&
|
||||
// current zoom and window dimensions are equal to those in memoizedValues
|
||||
isShallowEqual(
|
||||
{ zoom: zoom.value, width, height },
|
||||
{
|
||||
zoom: memoizedValues.previousState.zoom.value,
|
||||
width: memoizedValues.previousState.width,
|
||||
height: memoizedValues.previousState.height,
|
||||
},
|
||||
);
|
||||
|
||||
const constraints = canUseMemoizedValues
|
||||
? memoizedValues!.constraints
|
||||
: calculateConstraints({
|
||||
scrollConstraints,
|
||||
width,
|
||||
height,
|
||||
zoom,
|
||||
allowOverscroll,
|
||||
});
|
||||
|
||||
const constrainedValues =
|
||||
zoom.value >= constraints.constrainedZoom.value // when trying to zoom out of the constrained area we want to keep the viewport centered and prevent jumping caused by change of scrollX and scrollY values when zooming
|
||||
? constrainScrollValues({
|
||||
...constraints,
|
||||
scrollX,
|
||||
scrollY,
|
||||
})
|
||||
: calculateConstrainedScrollCenter(state, {
|
||||
scrollX,
|
||||
scrollY,
|
||||
});
|
||||
|
||||
if (!canUseMemoizedValues) {
|
||||
memoizedValues = {
|
||||
previousState: {
|
||||
zoom: state.zoom,
|
||||
width: state.width,
|
||||
height: state.height,
|
||||
scrollConstraints: state.scrollConstraints,
|
||||
},
|
||||
constraints,
|
||||
allowOverscroll,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
...state,
|
||||
scrollConstraints: {
|
||||
...state.scrollConstraints,
|
||||
animateOnNextUpdate: disableAnimation
|
||||
? false
|
||||
: isViewportOutsideOfConstrainedArea(state),
|
||||
},
|
||||
...constrainedValues,
|
||||
};
|
||||
};
|
||||
|
|
@ -141,6 +141,11 @@ export type ScrollBars = {
|
|||
} | null;
|
||||
};
|
||||
|
||||
export type ConstrainedScrollValues = Pick<
|
||||
AppState,
|
||||
"scrollX" | "scrollY" | "zoom"
|
||||
> | null;
|
||||
|
||||
export type ElementShape = Drawable | Drawable[] | null;
|
||||
|
||||
export type ElementShapes = {
|
||||
|
|
|
|||
|
|
@ -958,6 +958,7 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
|
|||
"pendingImageElementId": null,
|
||||
"previousSelectedElementIds": {},
|
||||
"resizingElement": null,
|
||||
"scrollConstraints": null,
|
||||
"scrollX": 0,
|
||||
"scrollY": 0,
|
||||
"scrolledOutside": false,
|
||||
|
|
@ -1165,6 +1166,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
|
|||
"pendingImageElementId": null,
|
||||
"previousSelectedElementIds": {},
|
||||
"resizingElement": null,
|
||||
"scrollConstraints": null,
|
||||
"scrollX": 0,
|
||||
"scrollY": 0,
|
||||
"scrolledOutside": false,
|
||||
|
|
@ -1385,6 +1387,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
|
|||
"pendingImageElementId": null,
|
||||
"previousSelectedElementIds": {},
|
||||
"resizingElement": null,
|
||||
"scrollConstraints": null,
|
||||
"scrollX": 0,
|
||||
"scrollY": 0,
|
||||
"scrolledOutside": false,
|
||||
|
|
@ -1720,6 +1723,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
|
|||
"pendingImageElementId": null,
|
||||
"previousSelectedElementIds": {},
|
||||
"resizingElement": null,
|
||||
"scrollConstraints": null,
|
||||
"scrollX": 0,
|
||||
"scrollY": 0,
|
||||
"scrolledOutside": false,
|
||||
|
|
@ -2055,6 +2059,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
|
|||
"pendingImageElementId": null,
|
||||
"previousSelectedElementIds": {},
|
||||
"resizingElement": null,
|
||||
"scrollConstraints": null,
|
||||
"scrollX": 0,
|
||||
"scrollY": 0,
|
||||
"scrolledOutside": false,
|
||||
|
|
@ -2275,6 +2280,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
|
|||
"pendingImageElementId": null,
|
||||
"previousSelectedElementIds": {},
|
||||
"resizingElement": null,
|
||||
"scrollConstraints": null,
|
||||
"scrollX": 0,
|
||||
"scrollY": 0,
|
||||
"scrolledOutside": false,
|
||||
|
|
@ -2519,6 +2525,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
|
|||
"pendingImageElementId": null,
|
||||
"previousSelectedElementIds": {},
|
||||
"resizingElement": null,
|
||||
"scrollConstraints": null,
|
||||
"scrollX": 0,
|
||||
"scrollY": 0,
|
||||
"scrolledOutside": false,
|
||||
|
|
@ -2826,6 +2833,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
|
|||
"id1": true,
|
||||
},
|
||||
"resizingElement": null,
|
||||
"scrollConstraints": null,
|
||||
"scrollX": 0,
|
||||
"scrollY": 0,
|
||||
"scrolledOutside": false,
|
||||
|
|
@ -3197,6 +3205,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
|
|||
"pendingImageElementId": null,
|
||||
"previousSelectedElementIds": {},
|
||||
"resizingElement": null,
|
||||
"scrollConstraints": null,
|
||||
"scrollX": 0,
|
||||
"scrollY": 0,
|
||||
"scrolledOutside": false,
|
||||
|
|
@ -3676,6 +3685,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
|
|||
"pendingImageElementId": null,
|
||||
"previousSelectedElementIds": {},
|
||||
"resizingElement": null,
|
||||
"scrollConstraints": null,
|
||||
"scrollX": 0,
|
||||
"scrollY": 0,
|
||||
"scrolledOutside": false,
|
||||
|
|
@ -4003,6 +4013,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
|
|||
"pendingImageElementId": null,
|
||||
"previousSelectedElementIds": {},
|
||||
"resizingElement": null,
|
||||
"scrollConstraints": null,
|
||||
"scrollX": 0,
|
||||
"scrollY": 0,
|
||||
"scrolledOutside": false,
|
||||
|
|
@ -4332,6 +4343,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
|
|||
"id1": true,
|
||||
},
|
||||
"resizingElement": null,
|
||||
"scrollConstraints": null,
|
||||
"scrollX": 0,
|
||||
"scrollY": 0,
|
||||
"scrolledOutside": false,
|
||||
|
|
@ -5613,6 +5625,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
|
|||
"id0": true,
|
||||
},
|
||||
"resizingElement": null,
|
||||
"scrollConstraints": null,
|
||||
"scrollX": 0,
|
||||
"scrollY": 0,
|
||||
"scrolledOutside": false,
|
||||
|
|
@ -6835,6 +6848,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
|
|||
"id0": true,
|
||||
},
|
||||
"resizingElement": null,
|
||||
"scrollConstraints": null,
|
||||
"scrollX": 0,
|
||||
"scrollY": 0,
|
||||
"scrolledOutside": false,
|
||||
|
|
@ -7771,6 +7785,7 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
|
|||
"pendingImageElementId": null,
|
||||
"previousSelectedElementIds": {},
|
||||
"resizingElement": null,
|
||||
"scrollConstraints": null,
|
||||
"scrollX": 0,
|
||||
"scrollY": 0,
|
||||
"scrolledOutside": false,
|
||||
|
|
@ -8775,6 +8790,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
|
|||
"pendingImageElementId": null,
|
||||
"previousSelectedElementIds": {},
|
||||
"resizingElement": null,
|
||||
"scrollConstraints": null,
|
||||
"scrollX": 0,
|
||||
"scrollY": 0,
|
||||
"scrolledOutside": false,
|
||||
|
|
@ -9767,6 +9783,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
|
|||
"pendingImageElementId": null,
|
||||
"previousSelectedElementIds": {},
|
||||
"resizingElement": null,
|
||||
"scrollConstraints": null,
|
||||
"scrollX": 0,
|
||||
"scrollY": 0,
|
||||
"scrolledOutside": false,
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -422,6 +422,7 @@ export interface AppState {
|
|||
userToFollow: UserToFollow | null;
|
||||
/** the socket ids of the users following the current user */
|
||||
followedBy: Set<SocketId>;
|
||||
scrollConstraints: ScrollConstraints | null;
|
||||
|
||||
/** image cropping */
|
||||
isCropping: boolean;
|
||||
|
|
@ -589,6 +590,7 @@ export interface ExcalidrawProps {
|
|||
onScrollChange?: (scrollX: number, scrollY: number, zoom: Zoom) => void;
|
||||
onUserFollow?: (payload: OnUserFollowedPayload) => void;
|
||||
children?: React.ReactNode;
|
||||
scrollConstraints?: AppState["scrollConstraints"];
|
||||
validateEmbeddable?:
|
||||
| boolean
|
||||
| string[]
|
||||
|
|
@ -841,6 +843,7 @@ export interface ExcalidrawImperativeAPI {
|
|||
onUserFollow: (
|
||||
callback: (payload: OnUserFollowedPayload) => void,
|
||||
) => UnsubscribeCallback;
|
||||
setScrollConstraints: InstanceType<typeof App>["setScrollConstraints"];
|
||||
}
|
||||
|
||||
export type Device = Readonly<{
|
||||
|
|
@ -876,6 +879,12 @@ export type FrameNameBoundsCache = {
|
|||
>;
|
||||
};
|
||||
|
||||
export type AnimateTranslateCanvasValues = {
|
||||
scrollX: AppState["scrollX"];
|
||||
scrollY: AppState["scrollY"];
|
||||
zoom: AppState["zoom"]["value"];
|
||||
};
|
||||
|
||||
export type KeyboardModifiersObject = {
|
||||
ctrlKey: boolean;
|
||||
shiftKey: boolean;
|
||||
|
|
@ -901,6 +910,15 @@ export type EmbedsValidationStatus = Map<
|
|||
|
||||
export type ElementsPendingErasure = Set<ExcalidrawElement["id"]>;
|
||||
|
||||
export type ScrollConstraints = {
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
animateOnNextUpdate?: boolean;
|
||||
viewportZoomFactor?: number;
|
||||
lockZoom?: boolean;
|
||||
};
|
||||
export type PendingExcalidrawElements = ExcalidrawElement[];
|
||||
|
||||
/** Runtime gridSize value. Null indicates disabled grid. */
|
||||
|
|
|
|||
|
|
@ -53,7 +53,14 @@ export const exportToCanvas = ({
|
|||
const { exportBackground, viewBackgroundColor } = restoredAppState;
|
||||
return _exportToCanvas(
|
||||
restoredElements,
|
||||
{ ...restoredAppState, offsetTop: 0, offsetLeft: 0, width: 0, height: 0 },
|
||||
{
|
||||
...restoredAppState,
|
||||
offsetTop: 0,
|
||||
offsetLeft: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
scrollConstraints: null,
|
||||
},
|
||||
files || {},
|
||||
{ exportBackground, exportPadding, viewBackgroundColor, exportingFrame },
|
||||
(width: number, height: number) => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue