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

src/packages/excalidraw/CHANGELOG.md

@@ -18,6 +18,9 @@ Please add the latest change on the top under the correct section.
 
 ### Features
 
+- Calculate `width/height` of canvas based on excalidraw component (".excalidraw" selector) & also resize and update offsets whenever the dimensions of excalidraw component gets updated [#3379](https://github.com/excalidraw/excalidraw/pull/3379). You also don't need to add a resize handler anymore for excalidraw as its handled now in excalidraw itself.
+  #### BREAKING CHANGE
+  - `width/height` props have been removed. Instead now it takes `100%` of `width` and `height` of the container so you need to make sure the container in which you are rendering Excalidraw has non zero dimensions (It should have non zero width and height so Excalidraw can match the dimensions of containing block)
 - Calculate offsets when excalidraw container resizes using resize observer api [#3374](https://github.com/excalidraw/excalidraw/pull/3374).
 - Export types for the package so now it can be used with typescript [#3337](https://github.com/excalidraw/excalidraw/pull/3337). The types are available at `@excalidraw/excalirdraw/types`.
 - Add `renderCustomStats` prop to render extra stats on host, and expose `setToastMessage` API via refs which can be used to show toast with custom message [#3360](https://github.com/excalidraw/excalidraw/pull/3360).

src/packages/excalidraw/README_NEXT.md

@@ -45,32 +45,11 @@ import "./styles.scss";
 
 export default function App() {
   const excalidrawRef = useRef(null);
-  const excalidrawWrapperRef = useRef(null);
-  const [dimensions, setDimensions] = useState({
-    width: undefined,
-    height: undefined,
-  });
 
   const [viewModeEnabled, setViewModeEnabled] = useState(false);
   const [zenModeEnabled, setZenModeEnabled] = useState(false);
   const [gridModeEnabled, setGridModeEnabled] = useState(false);
 
-  useEffect(() => {
-    setDimensions({
-      width: excalidrawWrapperRef.current.getBoundingClientRect().width,
-      height: excalidrawWrapperRef.current.getBoundingClientRect().height,
-    });
-    const onResize = () => {
-      setDimensions({
-        width: excalidrawWrapperRef.current.getBoundingClientRect().width,
-        height: excalidrawWrapperRef.current.getBoundingClientRect().height,
-      });
-    };
-
-    window.addEventListener("resize", onResize);
-
-    return () => window.removeEventListener("resize", onResize);
-  }, [excalidrawWrapperRef]);
 
   const updateScene = () => {
     const sceneData = {
@@ -144,13 +123,11 @@ export default function App() {
           Grid mode
         </label>
       </div>
-      <div className="excalidraw-wrapper" ref={excalidrawWrapperRef}>
+      <div className="excalidraw-wrapper">
         <Excalidraw
           ref={excalidrawRef}
-          width={dimensions.width}
-          height={dimensions.height}
           initialData={InitialData}
-          onChange={(elements, state) =>
+          onChange={(elements, state) => {
             console.log("Elements :", elements, "State : ", state)
           }
           onPointerUpdate={(payload) => console.log(payload)}
@@ -246,33 +223,11 @@ import InitialData from "./initialData";
 
 const App = () => {
   const excalidrawRef = React.useRef(null);
-  const excalidrawWrapperRef = React.useRef(null);
-  const [dimensions, setDimensions] = React.useState({
-    width: undefined,
-    height: undefined,
-  });
 
   const [viewModeEnabled, setViewModeEnabled] = React.useState(false);
   const [zenModeEnabled, setZenModeEnabled] = React.useState(false);
   const [gridModeEnabled, setGridModeEnabled] = React.useState(false);
 
-  React.useEffect(() => {
-    setDimensions({
-      width: excalidrawWrapperRef.current.getBoundingClientRect().width,
-      height: excalidrawWrapperRef.current.getBoundingClientRect().height,
-    });
-    const onResize = () => {
-      setDimensions({
-        width: excalidrawWrapperRef.current.getBoundingClientRect().width,
-        height: excalidrawWrapperRef.current.getBoundingClientRect().height,
-      });
-    };
-
-    window.addEventListener("resize", onResize);
-
-    return () => window.removeEventListener("resize", onResize);
-  }, [excalidrawWrapperRef]);
-
   const updateScene = () => {
     const sceneData = {
       elements: [
@@ -365,9 +320,6 @@ const App = () => {
         ref: excalidrawWrapperRef,
       },
       React.createElement(Excalidraw.default, {
-        ref: excalidrawRef,
-        width: dimensions.width,
-        height: dimensions.height,
         initialData: InitialData,
         onChange: (elements, state) =>
           console.log("Elements :", elements, "State : ", state),
@@ -396,8 +348,6 @@ To view the full example visit :point_down:
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| [`width`](#width) | Number | `window.innerWidth` | The width of Excalidraw component |
-| [`height`](#height) | Number | `window.innerHeight` | The height of Excalidraw component |
 | [`onChange`](#onChange) | Function |  | This callback is triggered whenever the component updates due to any change. This callback will receive the excalidraw elements and the current app state. |
 | [`initialData`](#initialData) | <pre>{elements?: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>, appState?: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L37">AppState<a> } </pre> | null | The initial data with which app loads. |
 | [`ref`](#ref) | [`createRef`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) or [`callbackRef`](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs) or <pre>{ current: { readyPromise: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/utils.ts#L317">resolvablePromise</a> } }</pre> |  | Ref to be passed to Excalidraw |
@@ -415,13 +365,9 @@ To view the full example visit :point_down:
 | [`theme`](#theme) | `light` or `dark` |  | The theme of the Excalidraw component |
 | [`name`](#name) | string |  | Name of the drawing |
 
-#### `width`
+### Dimensions of Excalidraw
 
-This props defines the `width` of the Excalidraw component. Defaults to `window.innerWidth` if not passed.
-
-#### `height`
-
-This props defines the `height` of the Excalidraw component. Defaults to `window.innerHeight` if not passed.
+Excalidraw takes `100%` of `width` and `height` of the containing block so you need to make sure the container in which you are rendering Excalidraw has non zero dimensions (It should have non zero width and height so Excalidraw can match the dimensions of the containing block). This is to make sure you don't have to worry about updating the offsets of dimensions when resizing Excalidraw.
 
 #### `onChange`
 

src/packages/excalidraw/index.tsx

@@ -13,8 +13,6 @@ import { defaultLang } from "../../i18n";
 
 const Excalidraw = (props: ExcalidrawProps) => {
   const {
-    width,
-    height,
     onChange,
     initialData,
     excalidrawRef,
@@ -55,8 +53,6 @@ const Excalidraw = (props: ExcalidrawProps) => {
     <InitializeApp langCode={langCode}>
       <IsMobileProvider>
         <App
-          width={width}
-          height={height}
           onChange={onChange}
           initialData={initialData}
           excalidrawRef={excalidrawRef}

src/packages/utils.ts

@@ -33,7 +33,7 @@ export const exportToCanvas = ({
   } = restoredAppState;
   return _exportToCanvas(
     getNonDeletedElements(restoredElements),
-    { ...restoredAppState, offsetTop: 0, offsetLeft: 0 },
+    { ...restoredAppState, offsetTop: 0, offsetLeft: 0, width: 0, height: 0 },
     { exportBackground, viewBackgroundColor, shouldAddWatermark },
     (width: number, height: number) => {
       const canvas = document.createElement("canvas");