Layout shows the measure too
The content column's edges were drawn only by the page builder, and they answer a question the Layout section has just as much: the page is held to max-w-7xl and centred, so on a wide screen the content stops well short of the window and nothing marks where. `paintMeasure` is its own function now, called by both. The builder also draws sections, columns and a drop zone; none of those belong in Layout, whose bands are code and cannot be rearranged from there. What the two share is exactly the measure and nothing else. Nothing in View, for the same reason as the builder: chrome of any kind means you are not looking at the page. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -4,6 +4,7 @@ import { readableError } from '../errors';
|
||||
import { useFlash } from '../useFlash';
|
||||
import { useSaveTarget } from '../SaveTarget';
|
||||
import { usePreviewable, useViewMode } from '../ViewMode';
|
||||
import { paintMeasure } from '../canvas';
|
||||
import { SitePreview, useDevPort } from '../SitePreview';
|
||||
|
||||
/**
|
||||
@@ -175,6 +176,21 @@ export const LayoutPanel = () => {
|
||||
usePreviewable();
|
||||
const { mode } = useViewMode();
|
||||
|
||||
/*
|
||||
The measure, and nothing else.
|
||||
|
||||
The page builder also draws sections, columns and a drop zone. None of those belong here: the
|
||||
layout's bands are code and nothing in this panel can rearrange them. What it shares is the
|
||||
question of where the content column ends, which is just as invisible on this page as on any other.
|
||||
|
||||
Nothing in View, for the same reason as the builder — chrome of any kind means you are not looking
|
||||
at the page.
|
||||
*/
|
||||
const onDocument = useCallback(
|
||||
(frameDocument: Document) => (mode === 'view' ? undefined : paintMeasure(frameDocument)),
|
||||
[mode],
|
||||
);
|
||||
|
||||
if (!draft) return <div className="p-4 text-xs text-muted-foreground">{error ?? 'Loading…'}</div>;
|
||||
|
||||
/*
|
||||
@@ -202,7 +218,7 @@ export const LayoutPanel = () => {
|
||||
that sits in the content column. Worse, it was a second implementation of the layout, so it
|
||||
would have gone on being wrong differently every time either side changed.
|
||||
*/}
|
||||
<SitePreview port={devPort} path="layout" theme={themeProperties(draft)} />
|
||||
<SitePreview port={devPort} path="layout" theme={themeProperties(draft)} onDocument={onDocument} />
|
||||
|
||||
{/*
|
||||
The controls, and only in Edit.
|
||||
|
||||
Reference in New Issue
Block a user