-5

actions/publishToPublication.ts

··· 102 102 $type: "pub.leaflet.pages.canvas" as const, 103 103 id: p.id, 104 104 blocks: p.blocks as PubLeafletPagesCanvas.Block[], 105 105 - display: p.display, 106 105 }; 107 106 } else { 108 107 return { ··· 157 156 | PubLeafletPagesLinearDocument.Block[] 158 157 | PubLeafletPagesCanvas.Block[]; 159 158 type: "doc" | "canvas"; 160 160 - display?: { narrowWidth?: boolean }; 161 159 }[] = []; 162 160 163 161 let firstEntity = scan.eav(root_entity, "root/page")?.[0]; ··· 250 248 251 249 if (pageType?.data.value === "canvas") { 252 250 let canvasBlocks = await canvasBlocksToRecord(page.data.value); 253 253 - let narrowWidth = scan.eav(page.data.value, "canvas/narrow-width")?.[0] 254 254 - ?.data.value; 255 251 pages.push({ 256 252 id: page.data.value, 257 253 blocks: canvasBlocks, 258 254 type: "canvas", 259 259 - display: narrowWidth ? { narrowWidth: true } : undefined, 260 255 }); 261 256 } else { 262 257 let blocks = getBlocksWithTypeLocal(facts, page.data.value);

+2 -17

app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx

··· 25 25 pageOptions, 26 26 fullPageScroll, 27 27 pages, 28 28 - display, 29 28 }: { 30 29 document_uri: string; 31 30 document: PostPageData; ··· 40 39 pageOptions?: React.ReactNode; 41 40 fullPageScroll: boolean; 42 41 pages: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[]; 43 43 - display?: { narrowWidth?: boolean }; 44 42 }) { 45 43 let hasPageBackground = !!pubRecord.theme?.showPageBackground; 46 44 ··· 52 50 id={pageId ? `post-page-${pageId}` : "post-page"} 53 51 drawerOpen={false} 54 52 pageOptions={pageOptions} 55 55 - canvasNarrow={display?.narrowWidth} 56 53 > 57 54 <CanvasContent 58 55 blocks={blocks} ··· 61 58 bskyPostData={bskyPostData} 62 59 pageId={pageId} 63 60 pages={pages} 64 64 - narrowWidth={display?.narrowWidth} 65 61 /> 66 62 </PageWrapper> 67 63 ); ··· 74 70 bskyPostData, 75 71 pageId, 76 72 pages, 77 77 - narrowWidth, 78 73 }: { 79 74 blocks: PubLeafletPagesCanvas.Block[]; 80 75 did: string; ··· 82 77 bskyPostData: AppBskyFeedDefs.PostView[]; 83 78 pageId?: string; 84 79 pages: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[]; 85 85 - narrowWidth?: boolean; 86 80 }) { 87 81 let height = blocks.length > 0 ? Math.max(...blocks.map((b) => b.y), 0) : 0; 88 82 89 89 - // Calculate the required width based on the furthest positioned element 90 90 - let width = 91 91 - narrowWidth && blocks.length > 0 92 92 - ? Math.max(...blocks.map((b) => b.x + b.width)) + 32 // Add padding 93 93 - : 1272; 94 94 - 95 83 return ( 96 96 - <div 97 97 - className={`canvasWrapper h-full ${narrowWidth ? "w-full overflow-auto" : "w-fit overflow-y-scroll"}`} 98 98 - > 84 84 + <div className="canvasWrapper h-full w-fit overflow-y-scroll"> 99 85 <div 100 86 style={{ 101 87 minHeight: height + 512, 102 88 contain: "size layout paint", 103 103 - width: narrowWidth ? width : undefined, 104 89 }} 105 105 - className={`relative h-full ${narrowWidth ? "min-w-full" : "w-[1272px]"}`} 90 90 + className="relative h-full w-[1272px]" 106 91 > 107 92 <CanvasBackground /> 108 93 {blocks

-1

app/lish/[did]/[publication]/[rkey]/PostPages.tsx

··· 189 189 document_uri={document_uri} 190 190 pageId={page.id} 191 191 pages={record.pages as PubLeafletPagesLinearDocument.Main[]} 192 192 - display={(page as PubLeafletPagesCanvas.Main).display} 193 192 pageOptions={ 194 193 <PageOptions 195 194 onClick={() => closePage(page?.id!)}

-31

components/Canvas.tsx

··· 44 44 return () => abort.abort(); 45 45 }); 46 46 47 47 - let narrowWidth = useEntity(props.entityID, "canvas/narrow-width")?.data 48 48 - .value; 49 49 - 50 47 return ( 51 48 <div 52 49 ref={ref} ··· 59 56 > 60 57 <AddCanvasBlockButton entityID={props.entityID} entity_set={entity_set} /> 61 58 <CanvasContent {...props} /> 62 62 - <CanvasWidthHandle entityID={props.entityID} /> 63 59 </div> 64 60 ); 65 61 } ··· 133 129 ); 134 130 })} 135 131 </div> 136 136 - ); 137 137 - } 138 138 - 139 139 - function CanvasWidthHandle(props: { entityID: string }) { 140 140 - let canvasFocused = useUIState((s) => s.focusedEntity?.entityType === "page"); 141 141 - let { rep } = useReplicache(); 142 142 - let narrowWidth = useEntity(props.entityID, "canvas/narrow-width")?.data 143 143 - .value; 144 144 - return ( 145 145 - <button 146 146 - onClick={() => { 147 147 - rep?.mutate.assertFact({ 148 148 - entity: props.entityID, 149 149 - attribute: "canvas/narrow-width", 150 150 - data: { 151 151 - type: "boolean", 152 152 - value: !narrowWidth, 153 153 - }, 154 154 - }); 155 155 - }} 156 156 - className={`resizeHandle 157 157 - ${narrowWidth ? "cursor-e-resize" : "cursor-w-resize"} shrink-0 z-10 158 158 - ${canvasFocused ? "sm:block hidden" : "hidden"} 159 159 - w-[8px] h-12 160 160 - absolute top-1/2 right-0 -translate-y-1/2 translate-x-[3px] 161 161 - rounded-full bg-white border-2 border-[#8C8C8C] shadow-[0_0_0_1px_white,inset_0_0_0_1px_white]`} 162 162 - /> 163 132 ); 164 133 } 165 134

+2 -8

components/Pages/Page.tsx

··· 33 33 return focusedPageID === props.entityID; 34 34 }); 35 35 let pageType = useEntity(props.entityID, "page/type")?.data.value || "doc"; 36 36 - let canvasNarrow = useEntity(props.entityID, "canvas/narrow-width")?.data 37 37 - .value; 38 36 let cardBorderHidden = useCardBorderHidden(props.entityID); 39 37 let drawerOpen = useDrawerOpen(props.entityID); 40 38 return ( ··· 53 51 isFocused={isFocused} 54 52 fullPageScroll={props.fullPageScroll} 55 53 pageType={pageType} 56 56 - canvasNarrow={canvasNarrow} 57 54 pageOptions={ 58 55 <PageOptions 59 56 entityID={props.entityID} ··· 83 80 isFocused?: boolean; 84 81 onClickAction?: (e: React.MouseEvent) => void; 85 82 pageType: "canvas" | "doc"; 86 86 - canvasNarrow?: boolean | undefined; 87 83 drawerOpen: boolean | undefined; 88 84 }) => { 89 85 return ( ··· 119 115 ${ 120 116 props.pageType === "canvas" && 121 117 !props.fullPageScroll && 122 122 - (props.canvasNarrow 123 123 - ? "w-[10000px] sm:mx-0 max-w-[var(--page-width-units)]" 124 124 - : "sm:max-w-[calc(100vw-128px)] lg:max-w-fit lg:w-[calc(var(--page-width-units)*2 + 24px))]") 118 118 + "max-w-[100vw] sm:max-w-[calc(100vw-128px)] lg:max-w-fit lg:w-[calc(var(--page-width-units)*2 + 24px))]" 125 119 } 126 120 127 121 `} ··· 139 133 </div> 140 134 ); 141 135 }; 142 142 - // ${narrowWidth ? " sm:max-w-(--page-width-units)" : } 136 136 + 143 137 const PageContent = (props: { entityID: string }) => { 144 138 let pageType = useEntity(props.entityID, "page/type")?.data.value || "doc"; 145 139 if (pageType === "doc") return <DocContent entityID={props.entityID} />;

-12

lexicons/api/lexicons.ts

··· 1455 1455 ref: 'lex:pub.leaflet.pages.canvas#block', 1456 1456 }, 1457 1457 }, 1458 1458 - display: { 1459 1459 - type: 'ref', 1460 1460 - ref: 'lex:pub.leaflet.pages.canvas#display', 1461 1461 - }, 1462 1462 - }, 1463 1463 - }, 1464 1464 - display: { 1465 1465 - type: 'object', 1466 1466 - properties: { 1467 1467 - narrowWidth: { 1468 1468 - type: 'boolean', 1469 1469 - }, 1470 1458 }, 1471 1459 }, 1472 1460 block: {

-16

lexicons/api/types/pub/leaflet/pages/canvas.ts

··· 30 30 $type?: 'pub.leaflet.pages.canvas' 31 31 id?: string 32 32 blocks: Block[] 33 33 - display?: Display 34 33 } 35 34 36 35 const hashMain = 'main' ··· 41 40 42 41 export function validateMain<V>(v: V) { 43 42 return validate<Main & V>(v, id, hashMain) 44 44 - } 45 45 - 46 46 - export interface Display { 47 47 - $type?: 'pub.leaflet.pages.canvas#display' 48 48 - narrowWidth?: boolean 49 49 - } 50 50 - 51 51 - const hashDisplay = 'display' 52 52 - 53 53 - export function isDisplay<V>(v: V) { 54 54 - return is$typed(v, id, hashDisplay) 55 55 - } 56 56 - 57 57 - export function validateDisplay<V>(v: V) { 58 58 - return validate<Display & V>(v, id, hashDisplay) 59 43 } 60 44 61 45 export interface Block {

-12

lexicons/pub/leaflet/pages/canvas.json

··· 17 17 "type": "ref", 18 18 "ref": "#block" 19 19 } 20 20 - }, 21 21 - "display": { 22 22 - "type": "ref", 23 23 - "ref": "#display" 24 24 - } 25 25 - } 26 26 - }, 27 27 - "display": { 28 28 - "type": "object", 29 29 - "properties": { 30 30 - "narrowWidth": { 31 31 - "type": "boolean" 32 20 } 33 21 } 34 22 },

-7

lexicons/src/pages/Canvas.ts

··· 11 11 properties: { 12 12 id: { type: "string" }, 13 13 blocks: { type: "array", items: { type: "ref", ref: "#block" } }, 14 14 - display: { type: "ref", ref: "#display" }, 15 15 - }, 16 16 - }, 17 17 - display: { 18 18 - type: "object", 19 19 - properties: { 20 20 - narrowWidth: { type: "boolean" }, 21 14 }, 22 15 }, 23 16 block: {