Skip to content

Commit

Permalink
feat(playground): optimize heavy whiteboard content positioning (#8746)
Browse files Browse the repository at this point in the history
  • Loading branch information
doodlewind authored Nov 14, 2024
1 parent e49af9b commit 7a2c3de
Showing 1 changed file with 38 additions and 33 deletions.
71 changes: 38 additions & 33 deletions packages/playground/apps/starter/data/heavy-whiteboard.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand All @@ -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',
Expand All @@ -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',
{
Expand Down

0 comments on commit 7a2c3de

Please sign in to comment.