@vivliostyle/react 2.14.5 → 2.15.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var n,
|
|
1
|
+
function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var n,r=e(require("@emotion/styled")),t=require("@vivliostyle/core"),o=require("react"),i=e(o);function a(){return(a=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e}).apply(this,arguments)}var u,d,c=r.div(n||(u=["\n overflow: scroll;\n background: "," !important;\n"],d||(d=u.slice(0)),u.raw=d,n=u),function(e){return e.background});exports.Renderer=function(e){var n=e.source,r=e.page,u=void 0===r?1:r,d=e.zoom,s=void 0===d?1:d,f=e.fontSize,l=void 0===f?16:f,v=e.background,g=void 0===v?"#ececec":v,p=e.renderAllPages,h=void 0===p||p,y=e.autoResize,S=void 0===y||y,L=e.pageViewMode,m=void 0===L?t.PageViewMode.SINGLE_PAGE:L,w=e.defaultPaperSize,z=e.pageBorderWidth,P=void 0===z?1:z,b=e.fitToScreen,E=void 0!==b&&b,R=e.userStyleSheet,k=e.authorStyleSheet,T=e.style,A=e.onMessage,M=e.onError,W=e.onReadyStateChange,O=e.onLoad,V=e.onNavigation,j=e.onHyperlink,C=e.children,G=o.useRef(null),N=o.useRef(),q=i.useRef();function x(){N.current.setOptions({fontSize:l,pageViewMode:m,zoom:s,renderAllPages:h,autoResize:S,defaultPaperSize:w,pageBorderWidth:P,fitToScreen:E})}function B(){var e,r,t=N.current,o=n.endsWith(".json"),i=a({},R?{userStyleSheet:[(e={},e[R.endsWith(".css")?"url":"text"]=R,e)]}:null,k?{authorStyleSheet:[(r={},r[k.endsWith(".css")?"url":"text"]=k,r)]}:null);o?t.loadPublication(n,i):t.loadDocument({url:n},i,{fontSize:l,pageViewMode:m,zoom:1,renderAllPages:h,autoResize:S,defaultPaperSize:w,pageBorderWidth:P,fitToScreen:!1})}o.useEffect(function(){return N.current=new t.CoreViewer({viewportElement:G.current}),x(),function(){function e(e,n){A&&A(e.content,n)}var n=function(n){return e(n,"debug")},r=function(n){return e(n,"info")},o=function(n){return e(n,"warn")};function i(e){M&&M(e.content)}function a(){W&&W(N.current.readyState)}function u(){O&&O(q.current)}function d(e){var n={docTitle:e.docTitle,epageCount:e.epageCount,epage:e.epage,metadata:e.metadata};q.current=n,V&&V(n)}function c(e){j&&j(e)}var s=N.current;return s.addListener("debug",n),s.addListener("info",r),s.addListener("warn",o),s.addListener("error",i),s.addListener("readystatechange",a),s.addListener("loaded",u),s.addListener("nav",d),s.addListener("hyperlink",c),function(){W&&W(t.ReadyState.LOADING),s.removeListener("debug",n),s.removeListener("info",r),s.removeListener("warn",o),s.removeListener("error",i),s.removeListener("readystatechange",a),s.removeListener("loaded",u),s.removeListener("nav",d),s.removeListener("hyperlink",c),G.current.innerHTML=""}}()},[]),o.useEffect(function(){B()},[n,k,R]),o.useEffect(function(){x()},[l,m,s,h,S,w,P,E]),o.useEffect(function(){var e;null===(e=N.current)||void 0===e||e.navigateToPage(t.Navigation.EPAGE,u-1)},[u]);var D=i.createElement(c,{ref:G,style:T,background:g});return"function"==typeof C&&C instanceof Function?C({container:D,reload:B}):D};
|
|
2
2
|
//# sourceMappingURL=react-vivliostyle.js.map
|
|
@@ -1 +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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"}
|
|
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} !important;\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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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import e from"@emotion/styled";import{ReadyState as n,Navigation as r,PageViewMode as t,CoreViewer as o}from"@vivliostyle/core";import i,{useRef as a,useEffect as u}from"react";function d(){return(d=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e}).apply(this,arguments)}var c,l,s,f=function(e){var c=e.source,l=e.page,s=void 0===l?1:l,f=e.zoom,g=void 0===f?1:f,p=e.fontSize,m=void 0===p?16:p,h=e.background,L=void 0===h?"#ececec":h,S=e.renderAllPages,y=void 0===S||S,z=e.autoResize,w=void 0===z||z,P=e.pageViewMode,b=void 0===P?t.SINGLE_PAGE:P,k=e.defaultPaperSize,E=e.pageBorderWidth,T=void 0===E?1:E,A=e.fitToScreen,W=void 0!==A&&A,M=e.userStyleSheet,O=e.authorStyleSheet,R=e.style,G=e.onMessage,j=e.onError,x=e.onReadyStateChange,B=e.onLoad,C=e.onNavigation,N=e.onHyperlink,V=e.children,D=a(null),H=a(),I=i.useRef();function F(){H.current.setOptions({fontSize:m,pageViewMode:b,zoom:g,renderAllPages:y,autoResize:w,defaultPaperSize:k,pageBorderWidth:T,fitToScreen:W})}function _(){var e,n,r=H.current,t=c.endsWith(".json"),o=d({},M?{userStyleSheet:[(e={},e[M.endsWith(".css")?"url":"text"]=M,e)]}:null,O?{authorStyleSheet:[(n={},n[O.endsWith(".css")?"url":"text"]=O,n)]}:null);t?r.loadPublication(c,o):r.loadDocument({url:c},o,{fontSize:m,pageViewMode:b,zoom:1,renderAllPages:y,autoResize:w,defaultPaperSize:k,pageBorderWidth:T,fitToScreen:!1})}u(function(){return H.current=new o({viewportElement:D.current}),F(),function(){function e(e,n){G&&G(e.content,n)}var r=function(n){return e(n,"debug")},t=function(n){return e(n,"info")},o=function(n){return e(n,"warn")};function i(e){j&&j(e.content)}function a(){x&&x(H.current.readyState)}function u(){B&&B(I.current)}function d(e){var n={docTitle:e.docTitle,epageCount:e.epageCount,epage:e.epage,metadata:e.metadata};I.current=n,C&&C(n)}function c(e){N&&N(e)}var l=H.current;return l.addListener("debug",r),l.addListener("info",t),l.addListener("warn",o),l.addListener("error",i),l.addListener("readystatechange",a),l.addListener("loaded",u),l.addListener("nav",d),l.addListener("hyperlink",c),function(){x&&x(n.LOADING),l.removeListener("debug",r),l.removeListener("info",t),l.removeListener("warn",o),l.removeListener("error",i),l.removeListener("readystatechange",a),l.removeListener("loaded",u),l.removeListener("nav",d),l.removeListener("hyperlink",c),D.current.innerHTML=""}}()},[]),u(function(){_()},[c,O,M]),u(function(){F()},[m,b,g,y,w,k,T,W]),u(function(){var e;null===(e=H.current)||void 0===e||e.navigateToPage(r.EPAGE,s-1)},[s]);var q=i.createElement(v,{ref:D,style:R,background:L});return"function"==typeof V&&V instanceof Function?V({container:q,reload:_}):q},v=e.div(c||(l=["\n overflow: scroll;\n background: "," !important;\n"],s||(s=l.slice(0)),l.raw=s,c=l),function(e){return e.background});export{f as Renderer};
|
|
2
2
|
//# sourceMappingURL=react-vivliostyle.modern.js.map
|
|
@@ -1 +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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"}
|
|
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} !important;\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":"0YAyDaA,EAAoC,gBAC/CC,IAAAA,WACAC,KAAAA,aAAO,QACPC,KAAAA,aAAO,QACPC,SAAAA,aAAW,SACXC,WAAAA,aAAa,gBACbC,eAAAA,oBACAC,WAAAA,oBACAC,aAAAA,aAAeC,EAAaC,cAC5BC,IAAAA,qBACAC,gBAAAA,aAAkB,QAClBC,YAAAA,gBACAC,IAAAA,eACAC,IAAAA,iBACAC,IAAAA,MACAC,IAAAA,UACAC,IAAAA,QACAC,IAAAA,mBACAC,IAAAA,OACAC,IAAAA,aACAC,IAAAA,YACAC,IAAAA,SAEMC,EAAeC,EAAuB,MACtCC,EAAcD,IACdE,EAAWC,EAAMH,SAEvB,SAASI,IAWPH,EAAYI,QAASC,WAVC,CACpB3B,SAAAA,EACAI,aAAAA,EACAL,KAAAA,EACAG,eAAAA,EACAC,WAAAA,EACAI,iBAAAA,EACAC,gBAAAA,EACAC,YAAAA,IAKJ,SAASmB,YACDC,EAAWP,EAAYI,QACvBI,EAAgBjC,EAAOkC,SAAS,SAChCC,OACAtB,EACA,CACEA,eAAgB,SAEXA,EAAeqB,SAAS,QACrB,MACA,QAASrB,OAInB,KACAC,EACA,CACEA,iBAAkB,SAEbA,EAAiBoB,SAAS,QACvB,MACA,QAASpB,OAInB,MAGFmB,EACFD,EAASI,gBAAgBpC,EAAQmC,GAEjCH,EAASK,aAAa,CAAEC,IAAKtC,GAAUmC,EAAiB,CACtDhC,SAAAA,EACAI,aAAAA,EACAL,KAAM,EACNG,eAAAA,EACAC,WAAAA,EACAI,iBAAAA,EACAC,gBAAAA,EACAC,aAAa,IA0EnB2B,EAAU,WAKR,OAXAd,EAAYI,QAAU,IAAIW,EAAW,CACnCC,gBAAiBlB,EAAaM,UAOhCD,IAvEF,WACE,SAASc,EAAcC,EAAkBC,GACvC5B,GAAaA,EAAU2B,EAAQE,QAASD,GAG1C,IAAME,EAAc,SAACH,UAAqBD,EAAcC,EAAS,UAC3DI,EAAa,SAACJ,UAAqBD,EAAcC,EAAS,SAC1DK,EAAa,SAACL,UAAqBD,EAAcC,EAAS,SAEhE,SAASM,EAAYN,GACnB1B,GAAWA,EAAQ0B,EAAQE,SAG7B,SAASK,IAEPhC,GAAsBA,EADCO,EAAYI,QAA3BsB,YAIV,SAASC,IACPjC,GAAUA,EAAOO,EAASG,SAG5B,SAASwB,EAAiBV,GACxB,IACMW,EAAe,CACnBC,SAFgDZ,EAA1CY,SAGNC,WAHgDb,EAAhCa,WAIhBC,MAJgDd,EAApBc,MAK5BC,SALgDf,EAAbe,UAOrChC,EAASG,QAAUyB,EACnBlC,GAAgBA,EAAakC,GAG/B,SAASK,EAAgBhB,GACvBtB,GAAeA,EAAYsB,GAG7B,IAAMX,EAAWP,EAAYI,QAU7B,OATAG,EAAS4B,YAAY,QAASd,GAC9Bd,EAAS4B,YAAY,OAAQb,GAC7Bf,EAAS4B,YAAY,OAAQZ,GAC7BhB,EAAS4B,YAAY,QAASX,GAC9BjB,EAAS4B,YAAY,mBAAoBV,GACzClB,EAAS4B,YAAY,SAAUR,GAC/BpB,EAAS4B,YAAY,MAAOP,GAC5BrB,EAAS4B,YAAY,YAAaD,cAGhCzC,GAAsBA,EAAmB2C,EAAWC,SACpD9B,EAAS+B,eAAe,QAASjB,GACjCd,EAAS+B,eAAe,OAAQhB,GAChCf,EAAS+B,eAAe,OAAQf,GAChChB,EAAS+B,eAAe,QAASd,GACjCjB,EAAS+B,eAAe,mBAAoBb,GAC5ClB,EAAS+B,eAAe,SAAUX,GAClCpB,EAAS+B,eAAe,MAAOV,GAC/BrB,EAAS+B,eAAe,YAAaJ,GACrCpC,EAAaM,QAASmC,UAAY,IAepBC,IAEf,IAEH1B,EAAU,WACRR,KAEC,CAAC/B,EAAQc,EAAkBD,IAE9B0B,EAAU,WACRX,KACC,CACDzB,EACAI,EACAL,EACAG,EACAC,EACAI,EACAC,EACAC,IAIF2B,EAAU,2BAERd,EAAYI,wBAASqC,eAAeC,EAAWC,MADbnE,EC1OhB,ID4OjB,CAACA,IAEJ,IAAMoE,EACJ1C,gBAAC2C,GAAUC,IAAKhD,EAAcR,MAAOA,EAAOX,WAAYA,IAG1D,MAAwB,mBAAbkB,GAA2BA,aAAoBkD,SACjDlD,EAAS,CAAE+C,UAAAA,EAAWI,OAAQ1C,IAGhCsC,GAGHC,EAAYI,EAAOC,oGAET,qBAAGvE"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vivliostyle/react",
|
|
3
3
|
"description": "React component for Vivliostyle",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.15.1",
|
|
5
5
|
"author": "Yasuaki Uechi <y@uechi.io>",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"build": "microbundle-crl --format modern,cjs && shx rm -rf dist/stories",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"dependencies": {
|
|
19
19
|
"@emotion/core": "^10.0.28",
|
|
20
20
|
"@emotion/styled": "^10.0.27",
|
|
21
|
-
"@vivliostyle/core": "^2.
|
|
21
|
+
"@vivliostyle/core": "^2.15.1"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
24
|
"react": "^16.13.1",
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"engines": {
|
|
71
71
|
"node": ">=12"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "e72b286297e2714915eb8f1c5a891fac4d183751"
|
|
74
74
|
}
|