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

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,
+    };
+};