From 62cd0b4424a1e460047edf0e92a296323f8d8836 Mon Sep 17 00:00:00 2001
From: austaras <austaras@outlook.com>
Date: Thu, 4 Aug 2022 11:24:28 +0800
Subject: [PATCH] fix(whiteboard): editor init size when creating new editor

---
 apps/ligo-virgo/src/pages/workspace/docs/Page.tsx         | 2 +-
 libs/components/board-draw/src/TlDraw.tsx                 | 5 +++++
 libs/components/board-state/src/tldraw-app.ts             | 8 ++++++++
 .../components/board-tools/src/editor-tool/editor-tool.ts | 2 ++
 4 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx b/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx
index 556ca606a7..e6741aecbc 100644
--- a/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx
+++ b/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx
@@ -148,7 +148,7 @@ const EditorContainer = ({
             obv.observe(scrollContainerRef.current);
             return () => obv.disconnect();
         }
-    });
+    }, [setPageClientWidth]);
 
     return (
         <StyledEditorContainer
diff --git a/libs/components/board-draw/src/TlDraw.tsx b/libs/components/board-draw/src/TlDraw.tsx
index 5ade114f4f..21044ad51d 100644
--- a/libs/components/board-draw/src/TlDraw.tsx
+++ b/libs/components/board-draw/src/TlDraw.tsx
@@ -29,6 +29,7 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { ErrorFallback } from './components/error-fallback';
 import { ZoomBar } from './components/zoom-bar';
 import { CommandPanel } from './components/command-panel';
+import { usePageClientWidth } from '@toeverything/datasource/state';
 
 export interface TldrawProps extends TldrawAppCtorProps {
     /**
@@ -132,6 +133,9 @@ export function Tldraw({
     tools,
 }: TldrawProps) {
     const [sId, set_sid] = React.useState(id);
+    const { pageClientWidth } = usePageClientWidth();
+    // page padding left and right total 300px
+    const editorShapeInitSize = pageClientWidth - 300;
 
     // Create a new app when the component mounts.
     const [app, setApp] = React.useState(() => {
@@ -140,6 +144,7 @@ export function Tldraw({
             callbacks,
             commands,
             getSession,
+            editorShapeInitSize,
             tools,
         });
         return app;
diff --git a/libs/components/board-state/src/tldraw-app.ts b/libs/components/board-state/src/tldraw-app.ts
index c431a90bde..ab9492aabb 100644
--- a/libs/components/board-state/src/tldraw-app.ts
+++ b/libs/components/board-state/src/tldraw-app.ts
@@ -73,6 +73,7 @@ import { StateManager } from './manager/state-manager';
 import { getClipboard, setClipboard } from './idb-clipboard';
 import type { Commands } from './types/commands';
 import type { BaseTool } from './types/tool';
+import { MIN_PAGE_WIDTH } from '@toeverything/components/editor-core';
 
 const uuid = Utils.uniqueId();
 
@@ -178,6 +179,7 @@ export interface TldrawAppCtorProps {
     getSession: (type: SessionType) => {
         new (app: TldrawApp, ...args: any[]): BaseSessionType;
     };
+    editorShapeInitSize?: number;
     commands: Commands;
     tools: Record<string, { new (app: TldrawApp): BaseTool }>;
 }
@@ -223,6 +225,8 @@ export class TldrawApp extends StateManager<TDSnapshot> {
 
     fileSystemHandle: FileSystemHandle | null = null;
 
+    editorShapeInitSize = MIN_PAGE_WIDTH;
+
     viewport = Utils.getBoundsFromPoints([
         [0, 0],
         [100, 100],
@@ -285,6 +289,10 @@ export class TldrawApp extends StateManager<TDSnapshot> {
             return acc;
         }, {} as Record<string, BaseTool>);
         this.currentTool = this.tools['select'];
+
+        if (props.editorShapeInitSize) {
+            this.editorShapeInitSize = props.editorShapeInitSize;
+        }
     }
 
     /* -------------------- Internal -------------------- */
diff --git a/libs/components/board-tools/src/editor-tool/editor-tool.ts b/libs/components/board-tools/src/editor-tool/editor-tool.ts
index 4f1d20a2d6..f0da22a0c1 100644
--- a/libs/components/board-tools/src/editor-tool/editor-tool.ts
+++ b/libs/components/board-tools/src/editor-tool/editor-tool.ts
@@ -18,6 +18,7 @@ export class EditorTool extends BaseTool {
         const {
             currentPoint,
             currentGrid,
+            editorShapeInitSize,
             settings: { showGrid },
             appState: { currentPageId, currentStyle },
             document: { id: workspace },
@@ -47,6 +48,7 @@ export class EditorTool extends BaseTool {
                     ? Vec.snap(currentPoint, currentGrid)
                     : currentPoint,
                 style: { ...currentStyle },
+                size: [editorShapeInitSize, 200],
                 workspace,
             });
             // In order to make the cursor just positioned at the beginning of the first line, it needs to be adjusted according to the padding            newShape.point = Vec.sub(newShape.point, [50, 30]);