refactor(editor): switch worker renderer debug ui to tweakpane (#10074)

blocksuite/playground/examples/renderer/index.html

@@ -42,10 +42,6 @@
         top: 0;
         left: 0;
         padding: 5px;
-        display: flex;
-        gap: 5px;
-        justify-content: flex-start;
-        align-items: center;
       }
     </style>
   </head>
@@ -54,8 +50,7 @@
       <div id="left-column"></div>
       <div id="right-column">
         <div class="top-bar">
-          <button id="to-canvas-button">to canvas</button>
-          <button id="switch-mode-button">switch mode</button>
+          <div id="tweakpane-container"></div>
         </div>
       </div>
     </div>

blocksuite/playground/examples/renderer/main.ts

@@ -1,26 +1,52 @@
 import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
 import { Text } from '@blocksuite/store';
+import { Pane } from 'tweakpane';
 
 import { CanvasRenderer } from './canvas-renderer.js';
 import { doc, editor } from './editor.js';
 
+type DocMode = 'page' | 'edgeless';
+
 const container = document.querySelector('#right-column') as HTMLElement;
 const renderer = new CanvasRenderer(editor, container);
 
-function initUI() {
-  const toCanvasButton = document.querySelector('#to-canvas-button')!;
-  toCanvasButton.addEventListener('click', async () => {
+async function handleToCanvasClick() {
+  await renderer.render();
+  const viewport = editor.std.get(GfxControllerIdentifier).viewport;
+  viewport.viewportUpdated.on(async () => {
     await renderer.render();
+  });
+}
 
-    const viewport = editor.std.get(GfxControllerIdentifier).viewport;
-    viewport.viewportUpdated.on(async () => {
-      await renderer.render();
+function initUI() {
+  const pane = new Pane({
+    container: document.querySelector('#tweakpane-container') as HTMLElement,
+  });
+
+  const params = {
+    mode: 'edgeless' as DocMode,
+  };
+
+  pane
+    .addButton({
+      title: 'To Canvas',
+    })
+    .on('click', () => {
+      handleToCanvasClick().catch(console.error);
     });
-  });
-  const switchModeButton = document.querySelector('#switch-mode-button')!;
-  switchModeButton.addEventListener('click', async () => {
-    editor.mode = editor.mode === 'page' ? 'edgeless' : 'page';
-  });
+
+  pane
+    .addBinding(params, 'mode', {
+      label: 'Editor Mode',
+      options: {
+        Doc: 'page',
+        Edgeless: 'edgeless',
+      },
+    })
+    .on('change', ({ value }) => {
+      editor.mode = value as DocMode;
+    });
+
   document.querySelector('#left-column')?.append(editor);
 }