Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-18 06:47:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(editor): mount worker renderer in editor host (#10055)

Browse Source 
This would allow for easier integration with current test runner, since the two column layout is removed.

The `ViewportTurboRender` canvas and its debug UI are only enabled if the extension is added, which won't affect the AFFiNE entry.

<img width="945" alt="image" src="https://github.com/user-attachments/assets/dc82daa4-cbed-4eb9-9660-28c3f7d35722" />
This commit is contained in:
doodlewind
2025-02-11 14:12:41 +00:00
parent 9ca2133e34
commit d021e4cddc
7 changed files with 84 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
blocksuite/playground/examples/renderer/editor.ts
View File

@@ -12,10 +12,11 @@ presetsEffects();
export const doc = createEmptyDoc().init();
export const editor = new AffineEditorContainer();
editor.pageSpecs = editor.pageSpecs.concat([ViewportTurboRendererExtension]);
editor.edgelessSpecs = editor.edgelessSpecs.concat([
editor.pageSpecs = [...editor.pageSpecs, ViewportTurboRendererExtension];
editor.edgelessSpecs = [
...editor.edgelessSpecs,
ViewportTurboRendererExtension,
]);
];
editor.doc = doc;
editor.mode = 'edgeless';

34
blocksuite/playground/examples/renderer/index.html
View File

@@ -15,45 +15,15 @@
background-color: var(--affine-white-90);
transition: background-color 0.3s;
}
#container {
display: flex;
position: relative;
width: 100%;
height: 100%;
}
#left-column {
flex: 1;
padding: 20px;
border-right: 1px solid #e0e0e0;
}
#right-column {
flex: 1;
padding: 20px;
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
}
.top-bar {
position: absolute;
top: 0;
left: 0;
padding: 5px;
}
</style>
</head>
<body>
<div id="container">
<div id="left-column"></div>
<div id="right-column">
<div class="top-bar">
<div id="tweakpane-container"></div>
</div>
</div>
</div>
<div id="container"></div>
<script type="module" src="./main.ts"></script>
</body>
</html>

56
blocksuite/playground/examples/renderer/main.ts
View File

@@ -1,59 +1,7 @@
import { ViewportTurboRendererIdentifier } from '@blocksuite/affine-shared/viewport-renderer';
import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
import { nextTick } from '@blocksuite/global/utils';
import { Text } from '@blocksuite/store';
import { Pane } from 'tweakpane';
import { doc, editor } from './editor.js';
type DocMode = 'page' | 'edgeless';
async function handleToCanvasClick() {
const renderer = editor.std.get(ViewportTurboRendererIdentifier);
await renderer.render();
const viewport = editor.std.get(GfxControllerIdentifier).viewport;
viewport.viewportUpdated.on(async () => {
await renderer.render();
});
}
async function handleModeChange(mode: DocMode) {
editor.mode = mode;
await nextTick();
const renderer = editor.std.get(ViewportTurboRendererIdentifier);
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);
});
pane
.addBinding(params, 'mode', {
label: 'Editor Mode',
options: {
Doc: 'page',
Edgeless: 'edgeless',
},
})
.on('change', ({ value }) => {
handleModeChange(value as DocMode).catch(console.error);
});
}
function addParagraph(content: string) {
const note = doc.getBlocksByFlavour('affine:note')[0];
const props = {
@@ -63,9 +11,7 @@ function addParagraph(content: string) {
}
function main() {
initUI();
document.querySelector('#left-column')?.append(editor);
document.querySelector('#container')?.append(editor);
const firstParagraph = doc.getBlockByFlavour('affine:paragraph')[0];
doc.updateBlock(firstParagraph, { text: new Text('Renderer') });