mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-23 23:46:35 +00:00
Maurice
9e40092507
A page preview draws the spread the server applied with the journey's photos, texts and figures instead of applying the operations again without them. The Studio's welcome, privacy banner and header fit a journey chat: a viewer is told they can only look, the banner speaks of the book, and the trip notes button stays in the trip chat. Escape closes the header menu before it stops a reply, a single page renders at the full long edge, the status says a model reads pages only while its provider has not refused an image, and pointing at a page in a design card outlines it in the Studio.
86 lines
3.0 KiB
TypeScript
86 lines
3.0 KiB
TypeScript
import { bookPageSetupForPreset, bookShapeElementSchema, bookTextElementSchema, type BookSpread } from '@trek/shared';
|
|
import { createElement } from 'react';
|
|
import { flushSync } from 'react-dom';
|
|
import { createRoot } from 'react-dom/client';
|
|
|
|
import { SpreadView } from '../../src/components/Studio/SpreadView';
|
|
import { sheetSizePx, snapshotSpread } from '../../src/components/Studio/pageSnapshot';
|
|
|
|
/**
|
|
* Loaded by the page snapshot flows inside the running app, where the dev
|
|
* server serves it as a module: draws a seeded spread with the editor's own
|
|
* SpreadView and turns it into the JPEG the Studio sends the assistant, so a
|
|
* real Chromium and a real WebKit prove the rasteriser works end to end. A map
|
|
* tile from another server sits on the sheet and must be left out; the flow
|
|
* names the tile and watches its server.
|
|
*/
|
|
|
|
export interface SeededSnapshot {
|
|
type: string;
|
|
bytes: number;
|
|
/** The first bytes of the file: a JPEG starts FF D8 FF. */
|
|
head: number[];
|
|
width: number;
|
|
height: number;
|
|
/** The image decoded again, as the browser reads it. */
|
|
decodedWidth: number;
|
|
decodedHeight: number;
|
|
drawnPhotoIds: number[];
|
|
}
|
|
|
|
function seededSpread(): BookSpread {
|
|
return {
|
|
id: 'sp-seeded',
|
|
role: 'inner',
|
|
background: '#f4efe6',
|
|
elements: [
|
|
bookShapeElementSchema.parse({ id: 'shape', kind: 'shape', frame: { x: 20, y: 20, w: 160, h: 90 } }),
|
|
bookTextElementSchema.parse({
|
|
id: 'title',
|
|
kind: 'text',
|
|
frame: { x: 230, y: 30, w: 160, h: 30 },
|
|
text: 'Lisbon',
|
|
}),
|
|
],
|
|
parked: [],
|
|
entryId: null,
|
|
};
|
|
}
|
|
|
|
export async function snapshotSeededSpread(tileUrl: string): Promise<SeededSnapshot | null> {
|
|
const page = bookPageSetupForPreset('square-210');
|
|
const spread = seededSpread();
|
|
const size = sheetSizePx(spread, page);
|
|
// Off screen as the Studio's stage is; the sheet inside it is what is drawn.
|
|
const host = document.createElement('div');
|
|
host.style.cssText = 'position:fixed;top:0;inset-inline-start:-20000px';
|
|
const sheet = document.createElement('div');
|
|
sheet.style.cssText = `position:relative;width:${size.width}px;height:${size.height}px`;
|
|
host.appendChild(sheet);
|
|
document.body.appendChild(host);
|
|
const root = createRoot(sheet);
|
|
flushSync(() => root.render(createElement(SpreadView, { spread, page, print: true })));
|
|
const tile = document.createElement('img');
|
|
tile.src = tileUrl;
|
|
sheet.firstElementChild?.appendChild(tile);
|
|
try {
|
|
const shot = await snapshotSpread(sheet, size, new Set());
|
|
if (!shot) return null;
|
|
const head = [...new Uint8Array(await shot.image.slice(0, 3).arrayBuffer())];
|
|
const bitmap = await createImageBitmap(shot.image);
|
|
return {
|
|
type: shot.image.type,
|
|
bytes: shot.image.size,
|
|
head,
|
|
width: shot.width,
|
|
height: shot.height,
|
|
decodedWidth: bitmap.width,
|
|
decodedHeight: bitmap.height,
|
|
drawnPhotoIds: shot.drawnPhotoIds,
|
|
};
|
|
} finally {
|
|
root.unmount();
|
|
host.remove();
|
|
}
|
|
}
|