@vivliostyle/react 2.8.0 → 2.10.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.10.0](https://github.com/vivliostyle/vivliostyle.js/compare/v2.9.1...v2.10.0) (2021-09-17)
+
+**Note:** Version bump only for package @vivliostyle/react
+
+## [2.9.1](https://github.com/vivliostyle/vivliostyle.js/compare/v2.9.0...v2.9.1) (2021-09-08)
+
+**Note:** Version bump only for package @vivliostyle/react
+
+# [2.9.0](https://github.com/vivliostyle/vivliostyle.js/compare/v2.8.1...v2.9.0) (2021-09-03)
+
+**Note:** Version bump only for package @vivliostyle/react
+
+## [2.8.1](https://github.com/vivliostyle/vivliostyle.js/compare/v2.8.0...v2.8.1) (2021-07-14)
+
+**Note:** Version bump only for package @vivliostyle/react
+
 # [2.8.0](https://github.com/vivliostyle/vivliostyle.js/compare/v2.7.0...v2.8.0) (2021-04-16)
 
 **Note:** Version bump only for package @vivliostyle/react

package/dist/react-vivliostyle.js.map

@@ -1 +1 @@
-{"version":3,"file":"react-vivliostyle.js","sources":["../src/renderer.tsx","../src/epage.ts"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport {\n  CoreViewer,\n  Navigation,\n  PageViewMode,\n  Payload,\n  ReadyState,\n} from \"@vivliostyle/core\";\nimport React, { useEffect, useRef } from \"react\";\nimport { epageFromPageNumber } from \"./epage\";\n\nexport type MessageType = \"debug\" | \"info\" | \"warn\";\nexport type NavigationPayload = Omit<Payload, \"internal\" | \"href\" | \"content\">;\nexport type HyperlinkPayload = Pick<Payload, \"internal\" | \"href\">;\n\ninterface VolatileState {\n  docTitle: string;\n  epage: number;\n  epageCount: number;\n  metadata: unknown;\n}\n\ntype ChildrenFunction = ({\n  container,\n  reload,\n}: {\n  container: JSX.Element;\n  reload: () => void;\n}) => React.ReactNode;\n\ninterface RendererProps {\n  source: string;\n  page?: number;\n  zoom?: number;\n  renderAllPages?: boolean;\n  autoResize?: boolean;\n  pageViewMode?: PageViewMode;\n  defaultPaperSize?: {\n    width: number;\n    height: number;\n  };\n  pageBorderWidth?: number;\n  fitToScreen?: boolean;\n  fontSize?: number;\n  background?: string;\n  userStyleSheet?: string;\n  authorStyleSheet?: string;\n  style?: React.CSSProperties;\n  onMessage?: (message: string, type: MessageType) => void;\n  onError?: (error: string) => void;\n  onReadyStateChange?: (state: ReadyState) => void;\n  onLoad?: (state: VolatileState) => void;\n  onNavigation?: (state: VolatileState) => void;\n  onHyperlink?: (payload: HyperlinkPayload) => void;\n  children?: React.ReactNode | ChildrenFunction;\n}\n\nexport const Renderer: React.FC<RendererProps> = ({\n  source,\n  page = 1,\n  zoom = 1,\n  fontSize = 16,\n  background = \"#ececec\",\n  renderAllPages = true,\n  autoResize = true,\n  pageViewMode = PageViewMode.SINGLE_PAGE,\n  defaultPaperSize,\n  pageBorderWidth = 1,\n  fitToScreen = false,\n  userStyleSheet,\n  authorStyleSheet,\n  style,\n  onMessage,\n  onError,\n  onReadyStateChange,\n  onLoad,\n  onNavigation,\n  onHyperlink,\n  children,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const instanceRef = useRef<CoreViewer>();\n  const stateRef = React.useRef<VolatileState>();\n\n  function setViewerOptions() {\n    const viewerOptions = {\n      fontSize,\n      pageViewMode,\n      zoom,\n      renderAllPages,\n      autoResize,\n      defaultPaperSize,\n      pageBorderWidth,\n      fitToScreen,\n    };\n    instanceRef.current!.setOptions(viewerOptions);\n  }\n\n  function loadSource() {\n    const instance = instanceRef.current!;\n    const isPublication = source.endsWith(\".json\");\n    const documentOptions = {\n      ...(userStyleSheet\n        ? {\n            userStyleSheet: [\n              {\n                [userStyleSheet.endsWith(\".css\")\n                  ? \"url\"\n                  : \"text\"]: userStyleSheet,\n              },\n            ],\n          }\n        : null),\n      ...(authorStyleSheet\n        ? {\n            authorStyleSheet: [\n              {\n                [authorStyleSheet.endsWith(\".css\")\n                  ? \"url\"\n                  : \"text\"]: authorStyleSheet,\n              },\n            ],\n          }\n        : null),\n    };\n\n    if (isPublication) {\n      instance.loadPublication(source, documentOptions);\n    } else {\n      instance.loadDocument({ url: source }, documentOptions, {\n        fontSize,\n        pageViewMode,\n        zoom: 1,\n        renderAllPages,\n        autoResize,\n        defaultPaperSize,\n        pageBorderWidth,\n        fitToScreen: false,\n      });\n    }\n  }\n\n  function registerEventHandlers() {\n    function handleMessage(payload: Payload, type: MessageType) {\n      onMessage && onMessage(payload.content, type);\n    }\n\n    const handleDebug = (payload: Payload) => handleMessage(payload, \"debug\");\n    const handleInfo = (payload: Payload) => handleMessage(payload, \"info\");\n    const handleWarn = (payload: Payload) => handleMessage(payload, \"warn\");\n\n    function handleError(payload: Payload) {\n      onError && onError(payload.content);\n    }\n\n    function handleReadyStateChange() {\n      const { readyState } = instanceRef.current!;\n      onReadyStateChange && onReadyStateChange(readyState);\n    }\n\n    function handleLoaded() {\n      onLoad && onLoad(stateRef.current!);\n    }\n\n    function handleNavigation(payload: NavigationPayload) {\n      const { docTitle, epageCount, epage, metadata } = payload;\n      const currentState = {\n        docTitle,\n        epageCount,\n        epage: epage as number,\n        metadata,\n      };\n      stateRef.current = currentState;\n      onNavigation && onNavigation(currentState);\n    }\n\n    function handleHyperlink(payload: HyperlinkPayload) {\n      onHyperlink && onHyperlink(payload);\n    }\n\n    const instance = instanceRef.current!;\n    instance.addListener(\"debug\", handleDebug);\n    instance.addListener(\"info\", handleInfo);\n    instance.addListener(\"warn\", handleWarn);\n    instance.addListener(\"error\", handleError);\n    instance.addListener(\"readystatechange\", handleReadyStateChange);\n    instance.addListener(\"loaded\", handleLoaded);\n    instance.addListener(\"nav\", handleNavigation);\n    instance.addListener(\"hyperlink\", handleHyperlink);\n\n    return () => {\n      onReadyStateChange && onReadyStateChange(ReadyState.LOADING);\n      instance.removeListener(\"debug\", handleDebug);\n      instance.removeListener(\"info\", handleInfo);\n      instance.removeListener(\"warn\", handleWarn);\n      instance.removeListener(\"error\", handleError);\n      instance.removeListener(\"readystatechange\", handleReadyStateChange);\n      instance.removeListener(\"loaded\", handleLoaded);\n      instance.removeListener(\"nav\", handleNavigation);\n      instance.removeListener(\"hyperlink\", handleHyperlink);\n      containerRef.current!.innerHTML = \"\";\n    };\n  }\n\n  function initInstance() {\n    instanceRef.current = new CoreViewer({\n      viewportElement: containerRef.current!,\n    });\n  }\n\n  // initialize document and event handlers\n  useEffect(() => {\n    initInstance();\n    setViewerOptions();\n\n    const cleanup = registerEventHandlers();\n    return cleanup;\n  }, []);\n\n  useEffect(() => {\n    loadSource();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [source, authorStyleSheet, userStyleSheet]);\n\n  useEffect(() => {\n    setViewerOptions();\n  }, [\n    fontSize,\n    pageViewMode,\n    zoom,\n    renderAllPages,\n    autoResize,\n    defaultPaperSize,\n    pageBorderWidth,\n    fitToScreen,\n  ]);\n\n  // sync location\n  useEffect(() => {\n    const epage = epageFromPageNumber(page);\n    instanceRef.current?.navigateToPage(Navigation.EPAGE, epage);\n  }, [page]);\n\n  const container = (\n    <Container ref={containerRef} style={style} background={background} />\n  );\n\n  if (typeof children === \"function\" && children instanceof Function) {\n    return children({ container, reload: loadSource });\n  }\n\n  return container;\n};\n\nconst Container = styled.div<Pick<RendererProps, \"background\">>`\n  overflow: scroll;\n  background: ${({ background }) => background};\n\n  @media screen {\n    [data-vivliostyle-page-container] {\n      background: white;\n      z-index: 0;\n    }\n\n    [data-vivliostyle-viewer-viewport] {\n      display: flex;\n      overflow: auto;\n      position: relative;\n    }\n\n    [data-vivliostyle-outer-zoom-box] {\n      margin: auto;\n      overflow: hidden;\n      flex: none;\n    }\n\n    [data-vivliostyle-viewer-viewport] [data-vivliostyle-spread-container] {\n      display: flex;\n      flex: none;\n      justify-content: center;\n      transform-origin: left top;\n    }\n\n    [data-vivliostyle-viewer-viewport][data-vivliostyle-page-progression=\"ltr\"]\n      [data-vivliostyle-spread-container] {\n      flex-direction: row;\n    }\n\n    [data-vivliostyle-viewer-viewport][data-vivliostyle-page-progression=\"rtl\"]\n      [data-vivliostyle-spread-container] {\n      flex-direction: row-reverse;\n    }\n\n    [data-vivliostyle-viewer-viewport] [data-vivliostyle-page-container] {\n      margin: 0 auto;\n      flex: none;\n      transform-origin: center top;\n    }\n\n    [data-vivliostyle-viewer-viewport][data-vivliostyle-spread-view=\"true\"]\n      [data-vivliostyle-page-container][data-vivliostyle-page-side=\"left\"] {\n      margin-right: 1px;\n      transform-origin: right top;\n    }\n\n    [data-vivliostyle-viewer-viewport][data-vivliostyle-spread-view=\"true\"]\n      [data-vivliostyle-page-container][data-vivliostyle-page-side=\"right\"] {\n      margin-left: 1px;\n      transform-origin: left top;\n    }\n\n    [data-vivliostyle-viewer-viewport][data-vivliostyle-spread-view=\"true\"]\n      [data-vivliostyle-page-container][data-vivliostyle-unpaired-page=\"true\"] {\n      margin-left: auto;\n      margin-right: auto;\n      transform-origin: center top;\n    }\n  }\n\n  /* vivliostyle-viewport */\n  [data-vivliostyle-layout-box] {\n    position: absolute;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    overflow: hidden;\n    z-index: -1;\n  }\n\n  [data-vivliostyle-debug] [data-vivliostyle-layout-box] {\n    right: auto;\n    bottom: auto;\n    overflow: visible;\n    z-index: auto;\n  }\n\n  [data-vivliostyle-page-container] {\n    position: relative;\n    overflow: hidden;\n  }\n\n  [data-vivliostyle-bleed-box] {\n    position: absolute;\n    overflow: hidden;\n    max-width: 100%;\n    max-height: 100%;\n    box-sizing: border-box;\n  }\n\n  [data-vivliostyle-page-box] ~ [data-vivliostyle-page-box] {\n    display: none;\n  }\n\n  [data-vivliostyle-toc-box] {\n    position: absolute;\n    left: 3px;\n    top: 3px;\n    overflow: scroll;\n    overflow-x: hidden;\n    background: rgba(248, 248, 248, 0.9);\n    border-radius: 2px;\n    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);\n  }\n\n  @media print {\n    [data-vivliostyle-toc-box] {\n      display: none;\n    }\n\n    [data-vivliostyle-outer-zoom-box],\n    [data-vivliostyle-spread-container] {\n      width: 100% !important;\n      height: 100% !important;\n    }\n\n    [data-vivliostyle-spread-container],\n    [data-vivliostyle-page-container] {\n      -moz-transform: none !important;\n      -ms-transform: none !important;\n      -webkit-transform: none !important;\n      transform: none !important;\n    }\n\n    [data-vivliostyle-page-container] {\n      display: block !important;\n      max-width: 100%;\n      height: 100% !important;\n      max-height: 100%;\n    }\n\n    /* Workaround for Chrome printing problem */\n    /* [data-vivliostyle-page-box] {\n        padding-bottom: 0 !important;\n        overflow: visible !important;\n    } */\n    [data-vivliostyle-bleed-box] > div > div::before {\n      display: block;\n      content: \"\";\n      padding-top: 0.015625px;\n      margin-bottom: -0.015625px;\n    }\n\n    /* Gecko-only hack, see https://bugzilla.mozilla.org/show_bug.cgi?id=267029#c17 */\n    @-moz-document regexp('.*') {\n      [data-vivliostyle-page-container]:nth-last-child(n + 2) {\n        top: -1px;\n        margin-top: 1px;\n        margin-bottom: -1px;\n      }\n    }\n  }\n`;\n","export function epageToPageNumber(epage: number): number {\n  return Math.round(epage + 1);\n}\n\nexport function epageFromPageNumber(pageNumber: number): number {\n  return pageNumber - 1;\n}\n"],"names":["Container","styled","div","background","source","page","zoom","fontSize","renderAllPages","autoResize","pageViewMode","PageViewMode","SINGLE_PAGE","defaultPaperSize","pageBorderWidth","fitToScreen","userStyleSheet","authorStyleSheet","style","onMessage","onError","onReadyStateChange","onLoad","onNavigation","onHyperlink","children","containerRef","useRef","instanceRef","stateRef","React","setViewerOptions","current","setOptions","loadSource","instance","isPublication","endsWith","documentOptions","loadPublication","loadDocument","url","useEffect","CoreViewer","viewportElement","handleMessage","payload","type","content","handleDebug","handleInfo","handleWarn","handleError","handleReadyStateChange","readyState","handleLoaded","handleNavigation","currentState","docTitle","epageCount","epage","metadata","handleHyperlink","addListener","ReadyState","LOADING","removeListener","innerHTML","registerEventHandlers","navigateToPage","Navigation","EPAGE","container","ref","Function","reload"],"mappings":"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"}
+{"version":3,"file":"react-vivliostyle.js","sources":["../src/renderer.tsx","../src/epage.ts"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport {\n  CoreViewer,\n  Navigation,\n  PageViewMode,\n  Payload,\n  ReadyState,\n} from \"@vivliostyle/core\";\nimport React, { useEffect, useRef } from \"react\";\nimport { epageFromPageNumber } from \"./epage\";\n\nexport type MessageType = \"debug\" | \"info\" | \"warn\";\nexport type NavigationPayload = Omit<Payload, \"internal\" | \"href\" | \"content\">;\nexport type HyperlinkPayload = Pick<Payload, \"internal\" | \"href\">;\n\ninterface VolatileState {\n  docTitle: string;\n  epage: number;\n  epageCount: number;\n  metadata: unknown;\n}\n\ntype ChildrenFunction = ({\n  container,\n  reload,\n}: {\n  container: JSX.Element;\n  reload: () => void;\n}) => React.ReactNode;\n\ninterface RendererProps {\n  source: string;\n  page?: number;\n  zoom?: number;\n  renderAllPages?: boolean;\n  autoResize?: boolean;\n  pageViewMode?: PageViewMode;\n  defaultPaperSize?: {\n    width: number;\n    height: number;\n  };\n  pageBorderWidth?: number;\n  fitToScreen?: boolean;\n  fontSize?: number;\n  background?: string;\n  userStyleSheet?: string;\n  authorStyleSheet?: string;\n  style?: React.CSSProperties;\n  onMessage?: (message: string, type: MessageType) => void;\n  onError?: (error: string) => void;\n  onReadyStateChange?: (state: ReadyState) => void;\n  onLoad?: (state: VolatileState) => void;\n  onNavigation?: (state: VolatileState) => void;\n  onHyperlink?: (payload: HyperlinkPayload) => void;\n  children?: React.ReactNode | ChildrenFunction;\n}\n\nexport const Renderer: React.FC<RendererProps> = ({\n  source,\n  page = 1,\n  zoom = 1,\n  fontSize = 16,\n  background = \"#ececec\",\n  renderAllPages = true,\n  autoResize = true,\n  pageViewMode = PageViewMode.SINGLE_PAGE,\n  defaultPaperSize,\n  pageBorderWidth = 1,\n  fitToScreen = false,\n  userStyleSheet,\n  authorStyleSheet,\n  style,\n  onMessage,\n  onError,\n  onReadyStateChange,\n  onLoad,\n  onNavigation,\n  onHyperlink,\n  children,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const instanceRef = useRef<CoreViewer>();\n  const stateRef = React.useRef<VolatileState>();\n\n  function setViewerOptions() {\n    const viewerOptions = {\n      fontSize,\n      pageViewMode,\n      zoom,\n      renderAllPages,\n      autoResize,\n      defaultPaperSize,\n      pageBorderWidth,\n      fitToScreen,\n    };\n    instanceRef.current!.setOptions(viewerOptions);\n  }\n\n  function loadSource() {\n    const instance = instanceRef.current!;\n    const isPublication = source.endsWith(\".json\");\n    const documentOptions = {\n      ...(userStyleSheet\n        ? {\n            userStyleSheet: [\n              {\n                [userStyleSheet.endsWith(\".css\")\n                  ? \"url\"\n                  : \"text\"]: userStyleSheet,\n              },\n            ],\n          }\n        : null),\n      ...(authorStyleSheet\n        ? {\n            authorStyleSheet: [\n              {\n                [authorStyleSheet.endsWith(\".css\")\n                  ? \"url\"\n                  : \"text\"]: authorStyleSheet,\n              },\n            ],\n          }\n        : null),\n    };\n\n    if (isPublication) {\n      instance.loadPublication(source, documentOptions);\n    } else {\n      instance.loadDocument({ url: source }, documentOptions, {\n        fontSize,\n        pageViewMode,\n        zoom: 1,\n        renderAllPages,\n        autoResize,\n        defaultPaperSize,\n        pageBorderWidth,\n        fitToScreen: false,\n      });\n    }\n  }\n\n  function registerEventHandlers() {\n    function handleMessage(payload: Payload, type: MessageType) {\n      onMessage && onMessage(payload.content, type);\n    }\n\n    const handleDebug = (payload: Payload) => handleMessage(payload, \"debug\");\n    const handleInfo = (payload: Payload) => handleMessage(payload, \"info\");\n    const handleWarn = (payload: Payload) => handleMessage(payload, \"warn\");\n\n    function handleError(payload: Payload) {\n      onError && onError(payload.content);\n    }\n\n    function handleReadyStateChange() {\n      const { readyState } = instanceRef.current!;\n      onReadyStateChange && onReadyStateChange(readyState);\n    }\n\n    function handleLoaded() {\n      onLoad && onLoad(stateRef.current!);\n    }\n\n    function handleNavigation(payload: NavigationPayload) {\n      const { docTitle, epageCount, epage, metadata } = payload;\n      const currentState = {\n        docTitle,\n        epageCount,\n        epage: epage as number,\n        metadata,\n      };\n      stateRef.current = currentState;\n      onNavigation && onNavigation(currentState);\n    }\n\n    function handleHyperlink(payload: HyperlinkPayload) {\n      onHyperlink && onHyperlink(payload);\n    }\n\n    const instance = instanceRef.current!;\n    instance.addListener(\"debug\", handleDebug);\n    instance.addListener(\"info\", handleInfo);\n    instance.addListener(\"warn\", handleWarn);\n    instance.addListener(\"error\", handleError);\n    instance.addListener(\"readystatechange\", handleReadyStateChange);\n    instance.addListener(\"loaded\", handleLoaded);\n    instance.addListener(\"nav\", handleNavigation);\n    instance.addListener(\"hyperlink\", handleHyperlink);\n\n    return () => {\n      onReadyStateChange && onReadyStateChange(ReadyState.LOADING);\n      instance.removeListener(\"debug\", handleDebug);\n      instance.removeListener(\"info\", handleInfo);\n      instance.removeListener(\"warn\", handleWarn);\n      instance.removeListener(\"error\", handleError);\n      instance.removeListener(\"readystatechange\", handleReadyStateChange);\n      instance.removeListener(\"loaded\", handleLoaded);\n      instance.removeListener(\"nav\", handleNavigation);\n      instance.removeListener(\"hyperlink\", handleHyperlink);\n      containerRef.current!.innerHTML = \"\";\n    };\n  }\n\n  function initInstance() {\n    instanceRef.current = new CoreViewer({\n      viewportElement: containerRef.current!,\n    });\n  }\n\n  // initialize document and event handlers\n  useEffect(() => {\n    initInstance();\n    setViewerOptions();\n\n    const cleanup = registerEventHandlers();\n    return cleanup;\n  }, []);\n\n  useEffect(() => {\n    loadSource();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [source, authorStyleSheet, userStyleSheet]);\n\n  useEffect(() => {\n    setViewerOptions();\n  }, [\n    fontSize,\n    pageViewMode,\n    zoom,\n    renderAllPages,\n    autoResize,\n    defaultPaperSize,\n    pageBorderWidth,\n    fitToScreen,\n  ]);\n\n  // sync location\n  useEffect(() => {\n    const epage = epageFromPageNumber(page);\n    instanceRef.current?.navigateToPage(Navigation.EPAGE, epage);\n  }, [page]);\n\n  const container = (\n    <Container ref={containerRef} style={style} background={background} />\n  );\n\n  if (typeof children === \"function\" && children instanceof Function) {\n    return children({ container, reload: loadSource });\n  }\n\n  return container;\n};\n\nconst Container = styled.div<Pick<RendererProps, \"background\">>`\n  overflow: scroll;\n  background: ${({ background }) => background};\n\n  @media screen {\n    [data-vivliostyle-page-container] {\n      background: white;\n      z-index: 0;\n    }\n\n    [data-vivliostyle-viewer-viewport] {\n      display: flex;\n      overflow: auto;\n      position: relative;\n    }\n\n    [data-vivliostyle-outer-zoom-box] {\n      margin: auto;\n      overflow: hidden;\n      flex: none;\n    }\n\n    [data-vivliostyle-viewer-viewport] [data-vivliostyle-spread-container] {\n      display: flex;\n      flex: none;\n      justify-content: center;\n      transform-origin: left top;\n    }\n\n    [data-vivliostyle-viewer-viewport][data-vivliostyle-page-progression=\"ltr\"]\n      [data-vivliostyle-spread-container] {\n      flex-direction: row;\n    }\n\n    [data-vivliostyle-viewer-viewport][data-vivliostyle-page-progression=\"rtl\"]\n      [data-vivliostyle-spread-container] {\n      flex-direction: row-reverse;\n    }\n\n    [data-vivliostyle-viewer-viewport] [data-vivliostyle-page-container] {\n      margin: 0 auto;\n      flex: none;\n      transform-origin: center top;\n    }\n\n    [data-vivliostyle-viewer-viewport][data-vivliostyle-spread-view=\"true\"]\n      [data-vivliostyle-page-container][data-vivliostyle-page-side=\"left\"] {\n      margin-right: 1px;\n      transform-origin: right top;\n    }\n\n    [data-vivliostyle-viewer-viewport][data-vivliostyle-spread-view=\"true\"]\n      [data-vivliostyle-page-container][data-vivliostyle-page-side=\"right\"] {\n      margin-left: 1px;\n      transform-origin: left top;\n    }\n\n    [data-vivliostyle-viewer-viewport][data-vivliostyle-spread-view=\"true\"]\n      [data-vivliostyle-page-container][data-vivliostyle-unpaired-page=\"true\"] {\n      margin-left: auto;\n      margin-right: auto;\n      transform-origin: center top;\n    }\n  }\n\n  /* vivliostyle-viewport */\n  [data-vivliostyle-layout-box] {\n    position: absolute;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    overflow: hidden;\n    z-index: -1;\n  }\n\n  [data-vivliostyle-debug] [data-vivliostyle-layout-box] {\n    right: auto;\n    bottom: auto;\n    overflow: visible;\n    z-index: auto;\n  }\n\n  [data-vivliostyle-page-container] {\n    position: relative;\n    overflow: hidden;\n  }\n\n  [data-vivliostyle-bleed-box] {\n    position: absolute;\n    overflow: hidden;\n    max-width: 100%;\n    max-height: 100%;\n    box-sizing: border-box;\n  }\n\n  [data-vivliostyle-page-box] ~ [data-vivliostyle-page-box] {\n    display: none;\n  }\n\n  [data-vivliostyle-toc-box] {\n    position: absolute;\n    left: 3px;\n    top: 3px;\n    overflow: scroll;\n    overflow-x: hidden;\n    background: rgba(248, 248, 248, 0.9);\n    border-radius: 2px;\n    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);\n  }\n\n  @media print {\n    [data-vivliostyle-toc-box] {\n      display: none;\n    }\n\n    [data-vivliostyle-outer-zoom-box],\n    [data-vivliostyle-spread-container] {\n      width: 100% !important;\n      height: 100% !important;\n    }\n\n    [data-vivliostyle-spread-container],\n    [data-vivliostyle-page-container] {\n      -moz-transform: none !important;\n      -ms-transform: none !important;\n      -webkit-transform: none !important;\n      transform: none !important;\n    }\n\n    [data-vivliostyle-page-container] {\n      display: block !important;\n      max-width: 100%;\n      height: 100% !important;\n      max-height: 100%;\n    }\n\n    /* Workaround for Chrome printing problem */\n    /* [data-vivliostyle-page-box] {\n        padding-bottom: 0 !important;\n        overflow: visible !important;\n    } */\n    [data-vivliostyle-bleed-box] > div > div::before {\n      display: block;\n      content: \"\";\n      padding-top: 0.015625px;\n      margin-bottom: -0.015625px;\n    }\n\n    /* Gecko-only hack, see https://bugzilla.mozilla.org/show_bug.cgi?id=267029#c17 */\n    @-moz-document regexp('.*') {\n      [data-vivliostyle-page-container]:nth-last-child(n + 2) {\n        top: -1px;\n        margin-top: 1px;\n        margin-bottom: -1px;\n      }\n    }\n  }\n`;\n","export function epageToPageNumber(epage: number): number {\n  return Math.round(epage + 1);\n}\n\nexport function epageFromPageNumber(pageNumber: number): number {\n  return pageNumber - 1;\n}\n"],"names":["Container","styled","div","background","source","page","zoom","fontSize","renderAllPages","autoResize","pageViewMode","PageViewMode","SINGLE_PAGE","defaultPaperSize","pageBorderWidth","fitToScreen","userStyleSheet","authorStyleSheet","style","onMessage","onError","onReadyStateChange","onLoad","onNavigation","onHyperlink","children","containerRef","useRef","instanceRef","stateRef","React","setViewerOptions","current","setOptions","loadSource","instance","isPublication","endsWith","documentOptions","loadPublication","loadDocument","url","useEffect","CoreViewer","viewportElement","handleMessage","payload","type","content","handleDebug","handleInfo","handleWarn","handleError","handleReadyStateChange","readyState","handleLoaded","handleNavigation","currentState","docTitle","epageCount","epage","metadata","handleHyperlink","addListener","ReadyState","LOADING","removeListener","innerHTML","registerEventHandlers","navigateToPage","Navigation","EPAGE","container","ref","Function","reload"],"mappings":"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"}

package/dist/react-vivliostyle.modern.js.map

@@ -1 +1 @@
-{"version":3,"file":"react-vivliostyle.modern.js","sources":["../src/renderer.tsx","../src/epage.ts"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport {\n  CoreViewer,\n  Navigation,\n  PageViewMode,\n  Payload,\n  ReadyState,\n} from \"@vivliostyle/core\";\nimport React, { useEffect, useRef } from \"react\";\nimport { epageFromPageNumber } from \"./epage\";\n\nexport type MessageType = \"debug\" | \"info\" | \"warn\";\nexport type NavigationPayload = Omit<Payload, \"internal\" | \"href\" | \"content\">;\nexport type HyperlinkPayload = Pick<Payload, \"internal\" | \"href\">;\n\ninterface VolatileState {\n  docTitle: string;\n  epage: number;\n  epageCount: number;\n  metadata: unknown;\n}\n\ntype ChildrenFunction = ({\n  container,\n  reload,\n}: {\n  container: JSX.Element;\n  reload: () => void;\n}) => React.ReactNode;\n\ninterface RendererProps {\n  source: string;\n  page?: number;\n  zoom?: number;\n  renderAllPages?: boolean;\n  autoResize?: boolean;\n  pageViewMode?: PageViewMode;\n  defaultPaperSize?: {\n    width: number;\n    height: number;\n  };\n  pageBorderWidth?: number;\n  fitToScreen?: boolean;\n  fontSize?: number;\n  background?: string;\n  userStyleSheet?: string;\n  authorStyleSheet?: string;\n  style?: React.CSSProperties;\n  onMessage?: (message: string, type: MessageType) => void;\n  onError?: (error: string) => void;\n  onReadyStateChange?: (state: ReadyState) => void;\n  onLoad?: (state: VolatileState) => void;\n  onNavigation?: (state: VolatileState) => void;\n  onHyperlink?: (payload: HyperlinkPayload) => void;\n  children?: React.ReactNode | ChildrenFunction;\n}\n\nexport const Renderer: React.FC<RendererProps> = ({\n  source,\n  page = 1,\n  zoom = 1,\n  fontSize = 16,\n  background = \"#ececec\",\n  renderAllPages = true,\n  autoResize = true,\n  pageViewMode = PageViewMode.SINGLE_PAGE,\n  defaultPaperSize,\n  pageBorderWidth = 1,\n  fitToScreen = false,\n  userStyleSheet,\n  authorStyleSheet,\n  style,\n  onMessage,\n  onError,\n  onReadyStateChange,\n  onLoad,\n  onNavigation,\n  onHyperlink,\n  children,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const instanceRef = useRef<CoreViewer>();\n  const stateRef = React.useRef<VolatileState>();\n\n  function setViewerOptions() {\n    const viewerOptions = {\n      fontSize,\n      pageViewMode,\n      zoom,\n      renderAllPages,\n      autoResize,\n      defaultPaperSize,\n      pageBorderWidth,\n      fitToScreen,\n    };\n    instanceRef.current!.setOptions(viewerOptions);\n  }\n\n  function loadSource() {\n    const instance = instanceRef.current!;\n    const isPublication = source.endsWith(\".json\");\n    const documentOptions = {\n      ...(userStyleSheet\n        ? {\n            userStyleSheet: [\n              {\n                [userStyleSheet.endsWith(\".css\")\n                  ? \"url\"\n                  : \"text\"]: userStyleSheet,\n              },\n            ],\n          }\n        : null),\n      ...(authorStyleSheet\n        ? {\n            authorStyleSheet: [\n              {\n                [authorStyleSheet.endsWith(\".css\")\n                  ? \"url\"\n                  : \"text\"]: authorStyleSheet,\n              },\n            ],\n          }\n        : null),\n    };\n\n    if (isPublication) {\n      instance.loadPublication(source, documentOptions);\n    } else {\n      instance.loadDocument({ url: source }, documentOptions, {\n        fontSize,\n        pageViewMode,\n        zoom: 1,\n        renderAllPages,\n        autoResize,\n        defaultPaperSize,\n        pageBorderWidth,\n        fitToScreen: false,\n      });\n    }\n  }\n\n  function registerEventHandlers() {\n    function handleMessage(payload: Payload, type: MessageType) {\n      onMessage && onMessage(payload.content, type);\n    }\n\n    const handleDebug = (payload: Payload) => handleMessage(payload, \"debug\");\n    const handleInfo = (payload: Payload) => handleMessage(payload, \"info\");\n    const handleWarn = (payload: Payload) => handleMessage(payload, \"warn\");\n\n    function handleError(payload: Payload) {\n      onError && onError(payload.content);\n    }\n\n    function handleReadyStateChange() {\n      const { readyState } = instanceRef.current!;\n      onReadyStateChange && onReadyStateChange(readyState);\n    }\n\n    function handleLoaded() {\n      onLoad && onLoad(stateRef.current!);\n    }\n\n    function handleNavigation(payload: NavigationPayload) {\n      const { docTitle, epageCount, epage, metadata } = payload;\n      const currentState = {\n        docTitle,\n        epageCount,\n        epage: epage as number,\n        metadata,\n      };\n      stateRef.current = currentState;\n      onNavigation && onNavigation(currentState);\n    }\n\n    function handleHyperlink(payload: HyperlinkPayload) {\n      onHyperlink && onHyperlink(payload);\n    }\n\n    const instance = instanceRef.current!;\n    instance.addListener(\"debug\", handleDebug);\n    instance.addListener(\"info\", handleInfo);\n    instance.addListener(\"warn\", handleWarn);\n    instance.addListener(\"error\", handleError);\n    instance.addListener(\"readystatechange\", handleReadyStateChange);\n    instance.addListener(\"loaded\", handleLoaded);\n    instance.addListener(\"nav\", handleNavigation);\n    instance.addListener(\"hyperlink\", handleHyperlink);\n\n    return () => {\n      onReadyStateChange && onReadyStateChange(ReadyState.LOADING);\n      instance.removeListener(\"debug\", handleDebug);\n      instance.removeListener(\"info\", handleInfo);\n      instance.removeListener(\"warn\", handleWarn);\n      instance.removeListener(\"error\", handleError);\n      instance.removeListener(\"readystatechange\", handleReadyStateChange);\n      instance.removeListener(\"loaded\", handleLoaded);\n      instance.removeListener(\"nav\", handleNavigation);\n      instance.removeListener(\"hyperlink\", handleHyperlink);\n      containerRef.current!.innerHTML = \"\";\n    };\n  }\n\n  function initInstance() {\n    instanceRef.current = new CoreViewer({\n      viewportElement: containerRef.current!,\n    });\n  }\n\n  // initialize document and event handlers\n  useEffect(() => {\n    initInstance();\n    setViewerOptions();\n\n    const cleanup = registerEventHandlers();\n    return cleanup;\n  }, []);\n\n  useEffect(() => {\n    loadSource();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [source, authorStyleSheet, userStyleSheet]);\n\n  useEffect(() => {\n    setViewerOptions();\n  }, [\n    fontSize,\n    pageViewMode,\n    zoom,\n    renderAllPages,\n    autoResize,\n    defaultPaperSize,\n    pageBorderWidth,\n    fitToScreen,\n  ]);\n\n  // sync location\n  useEffect(() => {\n    const epage = epageFromPageNumber(page);\n    instanceRef.current?.navigateToPage(Navigation.EPAGE, epage);\n  }, [page]);\n\n  const container = (\n    <Container ref={containerRef} style={style} background={background} />\n  );\n\n  if (typeof children === \"function\" && children instanceof Function) {\n    return children({ container, reload: loadSource });\n  }\n\n  return container;\n};\n\nconst Container = styled.div<Pick<RendererProps, \"background\">>`\n  overflow: scroll;\n  background: ${({ background }) => background};\n\n  @media screen {\n    [data-vivliostyle-page-container] {\n      background: white;\n      z-index: 0;\n    }\n\n    [data-vivliostyle-viewer-viewport] {\n      display: flex;\n      overflow: auto;\n      position: relative;\n    }\n\n    [data-vivliostyle-outer-zoom-box] {\n      margin: auto;\n      overflow: hidden;\n      flex: none;\n    }\n\n    [data-vivliostyle-viewer-viewport] [data-vivliostyle-spread-container] {\n      display: flex;\n      flex: none;\n      justify-content: center;\n      transform-origin: left top;\n    }\n\n    [data-vivliostyle-viewer-viewport][data-vivliostyle-page-progression=\"ltr\"]\n      [data-vivliostyle-spread-container] {\n      flex-direction: row;\n    }\n\n    [data-vivliostyle-viewer-viewport][data-vivliostyle-page-progression=\"rtl\"]\n      [data-vivliostyle-spread-container] {\n      flex-direction: row-reverse;\n    }\n\n    [data-vivliostyle-viewer-viewport] [data-vivliostyle-page-container] {\n      margin: 0 auto;\n      flex: none;\n      transform-origin: center top;\n    }\n\n    [data-vivliostyle-viewer-viewport][data-vivliostyle-spread-view=\"true\"]\n      [data-vivliostyle-page-container][data-vivliostyle-page-side=\"left\"] {\n      margin-right: 1px;\n      transform-origin: right top;\n    }\n\n    [data-vivliostyle-viewer-viewport][data-vivliostyle-spread-view=\"true\"]\n      [data-vivliostyle-page-container][data-vivliostyle-page-side=\"right\"] {\n      margin-left: 1px;\n      transform-origin: left top;\n    }\n\n    [data-vivliostyle-viewer-viewport][data-vivliostyle-spread-view=\"true\"]\n      [data-vivliostyle-page-container][data-vivliostyle-unpaired-page=\"true\"] {\n      margin-left: auto;\n      margin-right: auto;\n      transform-origin: center top;\n    }\n  }\n\n  /* vivliostyle-viewport */\n  [data-vivliostyle-layout-box] {\n    position: absolute;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    overflow: hidden;\n    z-index: -1;\n  }\n\n  [data-vivliostyle-debug] [data-vivliostyle-layout-box] {\n    right: auto;\n    bottom: auto;\n    overflow: visible;\n    z-index: auto;\n  }\n\n  [data-vivliostyle-page-container] {\n    position: relative;\n    overflow: hidden;\n  }\n\n  [data-vivliostyle-bleed-box] {\n    position: absolute;\n    overflow: hidden;\n    max-width: 100%;\n    max-height: 100%;\n    box-sizing: border-box;\n  }\n\n  [data-vivliostyle-page-box] ~ [data-vivliostyle-page-box] {\n    display: none;\n  }\n\n  [data-vivliostyle-toc-box] {\n    position: absolute;\n    left: 3px;\n    top: 3px;\n    overflow: scroll;\n    overflow-x: hidden;\n    background: rgba(248, 248, 248, 0.9);\n    border-radius: 2px;\n    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);\n  }\n\n  @media print {\n    [data-vivliostyle-toc-box] {\n      display: none;\n    }\n\n    [data-vivliostyle-outer-zoom-box],\n    [data-vivliostyle-spread-container] {\n      width: 100% !important;\n      height: 100% !important;\n    }\n\n    [data-vivliostyle-spread-container],\n    [data-vivliostyle-page-container] {\n      -moz-transform: none !important;\n      -ms-transform: none !important;\n      -webkit-transform: none !important;\n      transform: none !important;\n    }\n\n    [data-vivliostyle-page-container] {\n      display: block !important;\n      max-width: 100%;\n      height: 100% !important;\n      max-height: 100%;\n    }\n\n    /* Workaround for Chrome printing problem */\n    /* [data-vivliostyle-page-box] {\n        padding-bottom: 0 !important;\n        overflow: visible !important;\n    } */\n    [data-vivliostyle-bleed-box] > div > div::before {\n      display: block;\n      content: \"\";\n      padding-top: 0.015625px;\n      margin-bottom: -0.015625px;\n    }\n\n    /* Gecko-only hack, see https://bugzilla.mozilla.org/show_bug.cgi?id=267029#c17 */\n    @-moz-document regexp('.*') {\n      [data-vivliostyle-page-container]:nth-last-child(n + 2) {\n        top: -1px;\n        margin-top: 1px;\n        margin-bottom: -1px;\n      }\n    }\n  }\n`;\n","export function epageToPageNumber(epage: number): number {\n  return Math.round(epage + 1);\n}\n\nexport function epageFromPageNumber(pageNumber: number): number {\n  return pageNumber - 1;\n}\n"],"names":["Renderer","source","page","zoom","fontSize","background","renderAllPages","autoResize","pageViewMode","PageViewMode","SINGLE_PAGE","defaultPaperSize","pageBorderWidth","fitToScreen","userStyleSheet","authorStyleSheet","style","onMessage","onError","onReadyStateChange","onLoad","onNavigation","onHyperlink","children","containerRef","useRef","instanceRef","stateRef","React","setViewerOptions","current","setOptions","loadSource","instance","isPublication","endsWith","documentOptions","loadPublication","loadDocument","url","useEffect","CoreViewer","viewportElement","handleMessage","payload","type","content","handleDebug","handleInfo","handleWarn","handleError","handleReadyStateChange","readyState","handleLoaded","handleNavigation","currentState","docTitle","epageCount","epage","metadata","handleHyperlink","addListener","ReadyState","LOADING","removeListener","innerHTML","registerEventHandlers","navigateToPage","Navigation","EPAGE","container","Container","ref","Function","reload","styled","div"],"mappings":"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"}
+{"version":3,"file":"react-vivliostyle.modern.js","sources":["../src/renderer.tsx","../src/epage.ts"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport {\n  CoreViewer,\n  Navigation,\n  PageViewMode,\n  Payload,\n  ReadyState,\n} from \"@vivliostyle/core\";\nimport React, { useEffect, useRef } from \"react\";\nimport { epageFromPageNumber } from \"./epage\";\n\nexport type MessageType = \"debug\" | \"info\" | \"warn\";\nexport type NavigationPayload = Omit<Payload, \"internal\" | \"href\" | \"content\">;\nexport type HyperlinkPayload = Pick<Payload, \"internal\" | \"href\">;\n\ninterface VolatileState {\n  docTitle: string;\n  epage: number;\n  epageCount: number;\n  metadata: unknown;\n}\n\ntype ChildrenFunction = ({\n  container,\n  reload,\n}: {\n  container: JSX.Element;\n  reload: () => void;\n}) => React.ReactNode;\n\ninterface RendererProps {\n  source: string;\n  page?: number;\n  zoom?: number;\n  renderAllPages?: boolean;\n  autoResize?: boolean;\n  pageViewMode?: PageViewMode;\n  defaultPaperSize?: {\n    width: number;\n    height: number;\n  };\n  pageBorderWidth?: number;\n  fitToScreen?: boolean;\n  fontSize?: number;\n  background?: string;\n  userStyleSheet?: string;\n  authorStyleSheet?: string;\n  style?: React.CSSProperties;\n  onMessage?: (message: string, type: MessageType) => void;\n  onError?: (error: string) => void;\n  onReadyStateChange?: (state: ReadyState) => void;\n  onLoad?: (state: VolatileState) => void;\n  onNavigation?: (state: VolatileState) => void;\n  onHyperlink?: (payload: HyperlinkPayload) => void;\n  children?: React.ReactNode | ChildrenFunction;\n}\n\nexport const Renderer: React.FC<RendererProps> = ({\n  source,\n  page = 1,\n  zoom = 1,\n  fontSize = 16,\n  background = \"#ececec\",\n  renderAllPages = true,\n  autoResize = true,\n  pageViewMode = PageViewMode.SINGLE_PAGE,\n  defaultPaperSize,\n  pageBorderWidth = 1,\n  fitToScreen = false,\n  userStyleSheet,\n  authorStyleSheet,\n  style,\n  onMessage,\n  onError,\n  onReadyStateChange,\n  onLoad,\n  onNavigation,\n  onHyperlink,\n  children,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const instanceRef = useRef<CoreViewer>();\n  const stateRef = React.useRef<VolatileState>();\n\n  function setViewerOptions() {\n    const viewerOptions = {\n      fontSize,\n      pageViewMode,\n      zoom,\n      renderAllPages,\n      autoResize,\n      defaultPaperSize,\n      pageBorderWidth,\n      fitToScreen,\n    };\n    instanceRef.current!.setOptions(viewerOptions);\n  }\n\n  function loadSource() {\n    const instance = instanceRef.current!;\n    const isPublication = source.endsWith(\".json\");\n    const documentOptions = {\n      ...(userStyleSheet\n        ? {\n            userStyleSheet: [\n              {\n                [userStyleSheet.endsWith(\".css\")\n                  ? \"url\"\n                  : \"text\"]: userStyleSheet,\n              },\n            ],\n          }\n        : null),\n      ...(authorStyleSheet\n        ? {\n            authorStyleSheet: [\n              {\n                [authorStyleSheet.endsWith(\".css\")\n                  ? \"url\"\n                  : \"text\"]: authorStyleSheet,\n              },\n            ],\n          }\n        : null),\n    };\n\n    if (isPublication) {\n      instance.loadPublication(source, documentOptions);\n    } else {\n      instance.loadDocument({ url: source }, documentOptions, {\n        fontSize,\n        pageViewMode,\n        zoom: 1,\n        renderAllPages,\n        autoResize,\n        defaultPaperSize,\n        pageBorderWidth,\n        fitToScreen: false,\n      });\n    }\n  }\n\n  function registerEventHandlers() {\n    function handleMessage(payload: Payload, type: MessageType) {\n      onMessage && onMessage(payload.content, type);\n    }\n\n    const handleDebug = (payload: Payload) => handleMessage(payload, \"debug\");\n    const handleInfo = (payload: Payload) => handleMessage(payload, \"info\");\n    const handleWarn = (payload: Payload) => handleMessage(payload, \"warn\");\n\n    function handleError(payload: Payload) {\n      onError && onError(payload.content);\n    }\n\n    function handleReadyStateChange() {\n      const { readyState } = instanceRef.current!;\n      onReadyStateChange && onReadyStateChange(readyState);\n    }\n\n    function handleLoaded() {\n      onLoad && onLoad(stateRef.current!);\n    }\n\n    function handleNavigation(payload: NavigationPayload) {\n      const { docTitle, epageCount, epage, metadata } = payload;\n      const currentState = {\n        docTitle,\n        epageCount,\n        epage: epage as number,\n        metadata,\n      };\n      stateRef.current = currentState;\n      onNavigation && onNavigation(currentState);\n    }\n\n    function handleHyperlink(payload: HyperlinkPayload) {\n      onHyperlink && onHyperlink(payload);\n    }\n\n    const instance = instanceRef.current!;\n    instance.addListener(\"debug\", handleDebug);\n    instance.addListener(\"info\", handleInfo);\n    instance.addListener(\"warn\", handleWarn);\n    instance.addListener(\"error\", handleError);\n    instance.addListener(\"readystatechange\", handleReadyStateChange);\n    instance.addListener(\"loaded\", handleLoaded);\n    instance.addListener(\"nav\", handleNavigation);\n    instance.addListener(\"hyperlink\", handleHyperlink);\n\n    return () => {\n      onReadyStateChange && onReadyStateChange(ReadyState.LOADING);\n      instance.removeListener(\"debug\", handleDebug);\n      instance.removeListener(\"info\", handleInfo);\n      instance.removeListener(\"warn\", handleWarn);\n      instance.removeListener(\"error\", handleError);\n      instance.removeListener(\"readystatechange\", handleReadyStateChange);\n      instance.removeListener(\"loaded\", handleLoaded);\n      instance.removeListener(\"nav\", handleNavigation);\n      instance.removeListener(\"hyperlink\", handleHyperlink);\n      containerRef.current!.innerHTML = \"\";\n    };\n  }\n\n  function initInstance() {\n    instanceRef.current = new CoreViewer({\n      viewportElement: containerRef.current!,\n    });\n  }\n\n  // initialize document and event handlers\n  useEffect(() => {\n    initInstance();\n    setViewerOptions();\n\n    const cleanup = registerEventHandlers();\n    return cleanup;\n  }, []);\n\n  useEffect(() => {\n    loadSource();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [source, authorStyleSheet, userStyleSheet]);\n\n  useEffect(() => {\n    setViewerOptions();\n  }, [\n    fontSize,\n    pageViewMode,\n    zoom,\n    renderAllPages,\n    autoResize,\n    defaultPaperSize,\n    pageBorderWidth,\n    fitToScreen,\n  ]);\n\n  // sync location\n  useEffect(() => {\n    const epage = epageFromPageNumber(page);\n    instanceRef.current?.navigateToPage(Navigation.EPAGE, epage);\n  }, [page]);\n\n  const container = (\n    <Container ref={containerRef} style={style} background={background} />\n  );\n\n  if (typeof children === \"function\" && children instanceof Function) {\n    return children({ container, reload: loadSource });\n  }\n\n  return container;\n};\n\nconst Container = styled.div<Pick<RendererProps, \"background\">>`\n  overflow: scroll;\n  background: ${({ background }) => background};\n\n  @media screen {\n    [data-vivliostyle-page-container] {\n      background: white;\n      z-index: 0;\n    }\n\n    [data-vivliostyle-viewer-viewport] {\n      display: flex;\n      overflow: auto;\n      position: relative;\n    }\n\n    [data-vivliostyle-outer-zoom-box] {\n      margin: auto;\n      overflow: hidden;\n      flex: none;\n    }\n\n    [data-vivliostyle-viewer-viewport] [data-vivliostyle-spread-container] {\n      display: flex;\n      flex: none;\n      justify-content: center;\n      transform-origin: left top;\n    }\n\n    [data-vivliostyle-viewer-viewport][data-vivliostyle-page-progression=\"ltr\"]\n      [data-vivliostyle-spread-container] {\n      flex-direction: row;\n    }\n\n    [data-vivliostyle-viewer-viewport][data-vivliostyle-page-progression=\"rtl\"]\n      [data-vivliostyle-spread-container] {\n      flex-direction: row-reverse;\n    }\n\n    [data-vivliostyle-viewer-viewport] [data-vivliostyle-page-container] {\n      margin: 0 auto;\n      flex: none;\n      transform-origin: center top;\n    }\n\n    [data-vivliostyle-viewer-viewport][data-vivliostyle-spread-view=\"true\"]\n      [data-vivliostyle-page-container][data-vivliostyle-page-side=\"left\"] {\n      margin-right: 1px;\n      transform-origin: right top;\n    }\n\n    [data-vivliostyle-viewer-viewport][data-vivliostyle-spread-view=\"true\"]\n      [data-vivliostyle-page-container][data-vivliostyle-page-side=\"right\"] {\n      margin-left: 1px;\n      transform-origin: left top;\n    }\n\n    [data-vivliostyle-viewer-viewport][data-vivliostyle-spread-view=\"true\"]\n      [data-vivliostyle-page-container][data-vivliostyle-unpaired-page=\"true\"] {\n      margin-left: auto;\n      margin-right: auto;\n      transform-origin: center top;\n    }\n  }\n\n  /* vivliostyle-viewport */\n  [data-vivliostyle-layout-box] {\n    position: absolute;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    overflow: hidden;\n    z-index: -1;\n  }\n\n  [data-vivliostyle-debug] [data-vivliostyle-layout-box] {\n    right: auto;\n    bottom: auto;\n    overflow: visible;\n    z-index: auto;\n  }\n\n  [data-vivliostyle-page-container] {\n    position: relative;\n    overflow: hidden;\n  }\n\n  [data-vivliostyle-bleed-box] {\n    position: absolute;\n    overflow: hidden;\n    max-width: 100%;\n    max-height: 100%;\n    box-sizing: border-box;\n  }\n\n  [data-vivliostyle-page-box] ~ [data-vivliostyle-page-box] {\n    display: none;\n  }\n\n  [data-vivliostyle-toc-box] {\n    position: absolute;\n    left: 3px;\n    top: 3px;\n    overflow: scroll;\n    overflow-x: hidden;\n    background: rgba(248, 248, 248, 0.9);\n    border-radius: 2px;\n    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);\n  }\n\n  @media print {\n    [data-vivliostyle-toc-box] {\n      display: none;\n    }\n\n    [data-vivliostyle-outer-zoom-box],\n    [data-vivliostyle-spread-container] {\n      width: 100% !important;\n      height: 100% !important;\n    }\n\n    [data-vivliostyle-spread-container],\n    [data-vivliostyle-page-container] {\n      -moz-transform: none !important;\n      -ms-transform: none !important;\n      -webkit-transform: none !important;\n      transform: none !important;\n    }\n\n    [data-vivliostyle-page-container] {\n      display: block !important;\n      max-width: 100%;\n      height: 100% !important;\n      max-height: 100%;\n    }\n\n    /* Workaround for Chrome printing problem */\n    /* [data-vivliostyle-page-box] {\n        padding-bottom: 0 !important;\n        overflow: visible !important;\n    } */\n    [data-vivliostyle-bleed-box] > div > div::before {\n      display: block;\n      content: \"\";\n      padding-top: 0.015625px;\n      margin-bottom: -0.015625px;\n    }\n\n    /* Gecko-only hack, see https://bugzilla.mozilla.org/show_bug.cgi?id=267029#c17 */\n    @-moz-document regexp('.*') {\n      [data-vivliostyle-page-container]:nth-last-child(n + 2) {\n        top: -1px;\n        margin-top: 1px;\n        margin-bottom: -1px;\n      }\n    }\n  }\n`;\n","export function epageToPageNumber(epage: number): number {\n  return Math.round(epage + 1);\n}\n\nexport function epageFromPageNumber(pageNumber: number): number {\n  return pageNumber - 1;\n}\n"],"names":["Renderer","source","page","zoom","fontSize","background","renderAllPages","autoResize","pageViewMode","PageViewMode","SINGLE_PAGE","defaultPaperSize","pageBorderWidth","fitToScreen","userStyleSheet","authorStyleSheet","style","onMessage","onError","onReadyStateChange","onLoad","onNavigation","onHyperlink","children","containerRef","useRef","instanceRef","stateRef","React","setViewerOptions","current","setOptions","loadSource","instance","isPublication","endsWith","documentOptions","loadPublication","loadDocument","url","useEffect","CoreViewer","viewportElement","handleMessage","payload","type","content","handleDebug","handleInfo","handleWarn","handleError","handleReadyStateChange","readyState","handleLoaded","handleNavigation","currentState","docTitle","epageCount","epage","metadata","handleHyperlink","addListener","ReadyState","LOADING","removeListener","innerHTML","registerEventHandlers","navigateToPage","Navigation","EPAGE","container","Container","ref","Function","reload","styled","div"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vivliostyle/react",
   "description": "React component for Vivliostyle",
-  "version": "2.8.0",
+  "version": "2.10.0",
   "author": "Yasuaki Uechi <y@uechi.io>",
   "scripts": {
     "build": "microbundle-crl --format modern,cjs && shx rm -rf dist/stories",
@@ -18,7 +18,7 @@
   "dependencies": {
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
-    "@vivliostyle/core": "^2.8.0"
+    "@vivliostyle/core": "^2.10.0"
   },
   "peerDependencies": {
     "react": "^16.13.1",
@@ -68,7 +68,7 @@
   ],
   "license": "AGPL-3.0",
   "engines": {
-    "node": ">=10"
+    "node": ">=12"
   },
-  "gitHead": "61ea9dd550373a0ef9dad8e3ed5784332fb6f190"
+  "gitHead": "50ba6eb00b92edaf397ee821ac405d6ebfe09885"
 }