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;

libs/components/affine-board/src/hooks/use-shapes.ts

@@ -3,8 +3,12 @@ import { services } from '@toeverything/datasource/db-service';
 import type { ReturnEditorBlock } from '@toeverything/datasource/db-service';
 import type { TDShape } from '@toeverything/components/board-types';
 import { Editor } from '@toeverything/components/board-shapes';
+import { usePageClientWidth } from '@toeverything/datasource/state';
 
 export const useShapes = (workspace: string, rootBlockId: string) => {
+    const { pageClientWidth } = usePageClientWidth();
+    // page padding left and right total 300px
+    const editorShapeInitSize = pageClientWidth - 300;
     const [blocks, setBlocks] = useState<ReturnEditorBlock[]>();
     useEffect(() => {
         services.api.editorBlock
@@ -58,8 +62,9 @@ export const useShapes = (workspace: string, rootBlockId: string) => {
             acc[block.id] = { ...shapeProps, id: block.id };
         } else {
             acc[block.id] = Editor.getShape({
-                point: [groupCount * 740, 200],
+                point: [groupCount * editorShapeInitSize + 200, 200],
                 id: block.id,
+                size: [editorShapeInitSize, 200],
                 ...shapeProps,
                 affineId: shapeProps.affineId ?? block.id,
                 workspace: block.workspace,

libs/datasource/state/src/page.ts

@@ -26,3 +26,13 @@ export const useCurrentEditors = () => {
         setCurrentEditors,
     };
 };
+
+// when first time transfer doc to board, need init the editor shape size to page size.
+const _pageClientWidth = atom<number>(1020);
+export const usePageClientWidth = () => {
+    const [pageClientWidth, setPageClientWidth] = useAtom(_pageClientWidth);
+    return {
+        pageClientWidth,
+        setPageClientWidth,
+    };
+};