mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
feat: Calculate width/height
of canvas based on container dimensions (".excalidraw" selector) & remove props width & height (#3379)
* Remove width/height from the ".excalidraw" container so it will sized automatically. * updated all ref calculation to ".excalidraw" instead of parent since now ".excalidraw" will get resized * Remove props width/height as its not needed anymore. * Resize handler is also not needed anymore. * Position absolute canvas due to #3379 (comment) * move css to style and remove one extra rerendering * factor out mock logic for test * set height, width so as to avoid unnecessary updates of regression snap * better mock * better type checking and omit width,height from getDefaultAppState and also restore * revert * default to window dimensions in constructor * update docs * update * update * tweaks
This commit is contained in:
parent
3b976613ba
commit
c54a099010
24 changed files with 243 additions and 258 deletions
|
@ -3,7 +3,6 @@ import React, {
|
|||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useLayoutEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
|
@ -163,30 +162,10 @@ const initializeScene = async (opts: {
|
|||
};
|
||||
|
||||
const ExcalidrawWrapper = () => {
|
||||
// dimensions
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const [dimensions, setDimensions] = useState({
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
});
|
||||
const [errorMessage, setErrorMessage] = useState("");
|
||||
const currentLangCode = languageDetector.detect() || defaultLang.code;
|
||||
const [langCode, setLangCode] = useState(currentLangCode);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const onResize = () => {
|
||||
setDimensions({
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener("resize", onResize);
|
||||
|
||||
return () => window.removeEventListener("resize", onResize);
|
||||
}, []);
|
||||
|
||||
// initial state
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
|
@ -337,8 +316,6 @@ const ExcalidrawWrapper = () => {
|
|||
<Excalidraw
|
||||
ref={excalidrawRefCallback}
|
||||
onChange={onChange}
|
||||
width={dimensions.width}
|
||||
height={dimensions.height}
|
||||
initialData={initialStatePromiseRef.current.promise}
|
||||
onCollabButtonClick={collabAPI?.onCollabButtonClick}
|
||||
isCollaborating={collabAPI?.isCollaborating()}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue