File size: 2,928 Bytes
a296341
 
 
 
 
cb3fdda
 
 
2f9a87c
cb3fdda
 
 
2f9a87c
 
 
5dd2af5
 
 
 
1c1e6e9
 
 
a296341
 
 
1c1e6e9
 
 
 
 
a296341
 
2f9a87c
 
 
5dd2af5
2f9a87c
 
 
 
 
cb3fdda
 
eae27f0
 
 
 
 
 
 
 
1c1e6e9
2f9a87c
 
cb3fdda
 
2f9a87c
 
cb3fdda
 
a2c0551
 
 
 
 
 
 
 
 
 
048071f
cb3fdda
 
 
 
 
 
 
 
 
 
 
2f9a87c
a2c0551
1c1e6e9
a296341
2f9a87c
a296341
2f9a87c
 
 
 
a296341
 
cb3fdda
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
"use client"

import { useEffect, useRef } from "react"

import { allLayoutAspectRatios, allLayouts } from "@/app/layouts"
import { useStore } from "@/app/store"
import { cn } from "@/lib/utils"

export function Page({ page }: { page: number }) {
  const zoomLevel = useStore(state => state.zoomLevel)
  const layouts = useStore(state => state.layouts)

  // attention: here we use a fallback to layouts[0]
  // if no predetermined layout exists for this page number
  const layout = layouts[page] || layouts[0]

  const LayoutElement = (allLayouts as any)[layout]
  const aspectRatio = ((allLayoutAspectRatios as any)[layout] as string) || "aspect-[250/297]"

  const currentNbPages = useStore(s => s.currentNbPages)
  const maxNbPages = useStore(s => s.maxNbPages)
  const currentNbPanelsPerPage = useStore(s => s.currentNbPanelsPerPage)

  // in the future, different layouts might have different numbers of panels
  const allLayoutsNbPanels = {
    Layout0: currentNbPanelsPerPage,
    Layout1: currentNbPanelsPerPage,
    Layout2: currentNbPanelsPerPage,
    Layout3: currentNbPanelsPerPage,
    // Layout4: currentNbPanelsPerPage
  }

  // it's a bit confusing and too rigid we can't change the layouts for each panel,
  // I should refactor this
  const panelsPerPage = ((allLayoutsNbPanels as any)[layout] as number) || currentNbPanelsPerPage


  // I think we should deprecate this part
  // this was used to keep track of the page HTML element,
  // for use with a HTML-to-bitmap library
  // but the CSS layout wasn't followed properly and it depended on the zoom level
  /*

  const setPage = useStore(state => state.setPage)
  const pageRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const element = pageRef.current
    if (!element) { return }
    setPage(element)
  }, [pageRef.current])
  */


  return (
    <div
      // deprecated
      // ref={pageRef}
      className={cn(
        `w-full`,
        `print:w-screen`,
        `print:break-after-all`
      )}
      style={{
        padding: `${Math.round((zoomLevel / 100) * 16)}px`
        // marginLeft: `${zoomLevel > 100 ? `100`}`
      }}
      >
      <div
      className={cn(
        aspectRatio,
        `transition-all duration-100 ease-in-out`,
        `border border-stone-200`,
        `shadow-2xl`,
        `print:shadow-none`,
        `print:border-0`,
      )}
      style={{
        padding: `${Math.round((zoomLevel / 100) * 16)}px`
        // marginLeft: `${zoomLevel > 100 ? `100`}`
      }}
      >
       <LayoutElement page={page} nbPanels={panelsPerPage} />
      </div>
      {currentNbPages > 1 &&
        <p className="w-full text-center pt-4 font-sans text-2xs font-semibold text-stone-600">
          {page + 1}/{maxNbPages}
          {/*
          alternative styles:
          Page {page + 1}
          Page {page + 1} / {maxNbPages}
          {page + 1} / {maxNbPages}
          */}
        </p>}
    </div>
  )
}