feat(draw): when first time transfer to board mode, use page width as editor shape's width

apps/ligo-virgo/src/pages/workspace/docs/Page.tsx

@@ -1,5 +1,11 @@
 /* eslint-disable filename-rules/match */
-import { useEffect, useRef, type UIEvent, useState } from 'react';
+import {
+    useEffect,
+    useRef,
+    type UIEvent,
+    useState,
+    useLayoutEffect,
+} from 'react';
 import { useParams } from 'react-router';
 import {
     MuiBox as Box,
@@ -17,6 +23,7 @@ import { CollapsibleTitle } from '@toeverything/components/common';
 import {
     useShowSpaceSidebar,
     useUserAndSpaces,
+    usePageClientWidth,
 } from '@toeverything/datasource/state';
 import { services } from '@toeverything/datasource/db-service';
 
@@ -113,7 +120,7 @@ const EditorContainer = ({
     workspace: string;
 }) => {
     const [lockScroll, setLockScroll] = useState(false);
-    const scrollContainerRef = useRef();
+    const scrollContainerRef = useRef<HTMLDivElement>();
     const editorRef = useRef<BlockEditor>();
     const onScroll = (event: UIEvent) => {
         editorRef.current.getHooks().onRootNodeScroll(event);
@@ -130,6 +137,17 @@ const EditorContainer = ({
         };
     }, []);
 
+    const { setPageClientWidth } = usePageClientWidth();
+    useEffect(() => {
+        if (scrollContainerRef.current) {
+            const obv = new ResizeObserver(e => {
+                setPageClientWidth(e[0].contentRect.width);
+            });
+            obv.observe(scrollContainerRef.current);
+            return () => obv.disconnect();
+        }
+    });
+
     return (
         <StyledEditorContainer
             lockScroll={lockScroll}

apps/ligo-virgo/src/pages/workspace/whiteboard/index.bak.tsx

@@ -1,53 +0,0 @@
-// import { FC, useMemo, useState } from 'react';
-// import { useParams } from 'react-router-dom';
-// import { TDPage } from '@toeverything/framework/whiteboard';
-// import {
-//     AffineWhiteboard,
-//     WhiteboardMeta,
-//     AffineEditorShape
-// } from '@toeverything/components/affine-whiteboard';
-
-// interface EditorShapeProps {
-//     blockIds: string | string[];
-//     point: [number, number];
-// }
-
-// const createEditorShape = (props: EditorShapeProps): AffineEditorShape => {
-//     const block_ids = Array.isArray(props.blockIds)
-//         ? props.blockIds
-//         : [props.blockIds];
-//     return {
-//         id: block_ids.join('_'),
-//         label: '',
-//         childIndex: 1,
-//         name: 'affine_editor',
-//         parentId: 'page',
-//         point: props.point,
-//         rotation: 0,
-//         size: [400, 200],
-//         style: {
-//             color: 'black',
-//             size: 'small',
-//             isFilled: false,
-//             dash: 'draw',
-//             scale: 1
-//         } as any,
-//         type: 'affineEditor',
-//         blockIds: block_ids
-//     };
-// };
-
-// const Whiteboard: FC = () => {
-//     const { workspace_id, page_id } = useParams();
-//     const [shapes, set_shapes] = useState<TDPage['shapes']>({});
-//     const meta = useMemo<WhiteboardMeta>(() => {
-//         return {
-//             workspace: workspace_id,
-//             rootBlockId: page_id
-//         };
-//     }, [workspace_id, page_id]);
-
-//     return page_id ? <AffineWhiteboard meta={meta} shapes={shapes} /> : null;
-// };
-
-// export default Whiteboard;