From d552e68e2a067744202f3e48dfa0b99b5c3a913b Mon Sep 17 00:00:00 2001
From: Yifeng Wang <doodlewind@toeverything.info>
Date: Thu, 14 Nov 2024 09:02:47 +0800
Subject: [PATCH] feat(playground): optimize heavy whiteboard content
 positioning

---
 .../apps/starter/data/heavy-whiteboard.ts     | 71 ++++++++++---------
 1 file changed, 38 insertions(+), 33 deletions(-)

diff --git a/packages/playground/apps/starter/data/heavy-whiteboard.ts b/packages/playground/apps/starter/data/heavy-whiteboard.ts
index 06ae2bd91e65..ce1f6debf925 100644
--- a/packages/playground/apps/starter/data/heavy-whiteboard.ts
+++ b/packages/playground/apps/starter/data/heavy-whiteboard.ts
@@ -15,11 +15,44 @@ import type { InitFn } from './utils.js';
 const SHAPE_TYPES = ['rect', 'triangle', 'ellipse', 'diamond'];
 const params = new URLSearchParams(location.search);
 
+function createShapes(count: number): Record<string, unknown> {
+  const surfaceBlocks: Record<string, unknown> = {};
+
+  for (let i = 0; i < count; i++) {
+    const x = Math.random() * count * 2;
+    const y = Math.random() * count * 2;
+    const id = nanoid();
+    surfaceBlocks[id] = native2Y(
+      {
+        id,
+        index: 'a0',
+        type: 'shape',
+        xywh: `[${x},${y},100,100]`,
+        seed: Math.floor(Math.random() * 2 ** 31),
+        shapeType: SHAPE_TYPES[Math.floor(Math.random() * 40) % 4],
+        radius: 0,
+        filled: false,
+        fillColor: '--affine-palette-shape-yellow',
+        strokeWidth: 4,
+        strokeColor: '--affine-palette-line-yellow',
+        strokeStyle: 'solid',
+        roughness: DEFAULT_ROUGHNESS,
+      },
+      { deep: false }
+    );
+  }
+  return surfaceBlocks;
+}
+
+const SHAPES_COUNT = 100;
+const RANGE = 2000;
+
 export const heavyWhiteboard: InitFn = (
   collection: DocCollection,
   id: string
 ) => {
-  const count = Number(params.get('count')) || 100;
+  const count = Number(params.get('count')) || SHAPES_COUNT;
+  const enableShapes = !!params.get('shapes');
 
   const doc = collection.createDoc({ id });
   doc.load(() => {
@@ -28,36 +61,7 @@ export const heavyWhiteboard: InitFn = (
       title: new Text(),
     });
 
-    const surfaceBlocks: Record<string, unknown> = {};
-
-    let i = 0;
-
-    // Add note block inside root block
-    for (; i < count; i++) {
-      const x = Math.random() * count * 2;
-      const y = Math.random() * count * 2;
-      const id = nanoid();
-      surfaceBlocks[id] = native2Y(
-        {
-          id,
-          index: 'a0',
-          type: 'shape',
-          xywh: `[${x},${y},100,100]`,
-          seed: Math.floor(Math.random() * 2 ** 31),
-
-          shapeType: SHAPE_TYPES[Math.floor(Math.random() * 40) % 4],
-
-          radius: 0,
-          filled: false,
-          fillColor: '--affine-palette-shape-yellow',
-          strokeWidth: 4,
-          strokeColor: '--affine-palette-line-yellow',
-          strokeStyle: 'solid',
-          roughness: DEFAULT_ROUGHNESS,
-        },
-        { deep: false }
-      );
-    }
+    const surfaceBlocks = enableShapes ? createShapes(count) : {};
 
     doc.addBlock(
       'affine:surface',
@@ -69,10 +73,11 @@ export const heavyWhiteboard: InitFn = (
       rootId
     );
 
+    let i = 0;
     // Add note block inside root block
     for (i = 0; i < count; i++) {
-      const x = Math.random() * -count * 2 - 100;
-      const y = Math.random() * count * 2;
+      const x = Math.random() * RANGE - RANGE / 2;
+      const y = Math.random() * RANGE - RANGE / 2;
       const noteId = doc.addBlock(
         'affine:note',
         {