61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
"use client"
|
|
|
|
import { memo, useSyncExternalStore } from "react"
|
|
import { DOCS_PAGE_GAP_PX } from "@/lib/drive/docs-page-layout-constants"
|
|
import {
|
|
getDocsGraphicSnapGuideState,
|
|
subscribeDocsGraphicSnapGuides,
|
|
} from "@/lib/drive/docs-graphic-snap-bridge"
|
|
|
|
function DocsGraphicSnapGuidesInner({
|
|
pageWidth,
|
|
pageHeight,
|
|
}: {
|
|
pageWidth: number
|
|
pageHeight: number
|
|
}) {
|
|
const state = useSyncExternalStore(
|
|
subscribeDocsGraphicSnapGuides,
|
|
getDocsGraphicSnapGuideState,
|
|
() => null
|
|
)
|
|
|
|
if (!state || state.guides.length === 0) return null
|
|
|
|
const pageTop = state.pageIndex * (pageHeight + DOCS_PAGE_GAP_PX)
|
|
|
|
return (
|
|
<div
|
|
className="pointer-events-none absolute left-0 top-0 z-[24]"
|
|
style={{ width: pageWidth, height: pageTop + pageHeight }}
|
|
aria-hidden
|
|
>
|
|
{state.guides.map((guide, index) =>
|
|
guide.axis === "x" ? (
|
|
<div
|
|
key={`v-${guide.position}-${index}`}
|
|
className="docs-graphic-snap-guide docs-graphic-snap-guide--vertical"
|
|
style={{
|
|
left: guide.position,
|
|
top: pageTop,
|
|
height: pageHeight,
|
|
}}
|
|
/>
|
|
) : (
|
|
<div
|
|
key={`h-${guide.position}-${index}`}
|
|
className="docs-graphic-snap-guide docs-graphic-snap-guide--horizontal"
|
|
style={{
|
|
top: pageTop + guide.position,
|
|
left: 0,
|
|
width: pageWidth,
|
|
}}
|
|
/>
|
|
)
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export const DocsGraphicSnapGuides = memo(DocsGraphicSnapGuidesInner)
|