comic-panels-ui 0.0.0-beta.14 → 0.0.0-beta.15

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.
Files changed (4) hide show
  1. package/AllComicPages.d.ts +4 -2
  2. package/index.js +23 -57
  3. package/index.js.map +1 -1
  4. package/package.json +1 -1
package/AllComicPages.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { CSSProperties, JSX, ReactNode } from 'react';
1
+ import { CSSProperties, JSX, ReactNode, RefObject } from 'react';
2
2
  import { Props as ComicPanelProps } from './ComicPage';
3
3
  interface Props {
4
4
  pages: Array<ComicPanelProps>;
@@ -8,6 +8,8 @@ interface Props {
8
8
  };
9
9
  style?: Partial<CSSProperties>;
10
10
  renderContent?: (content: string | ReactNode) => ReactNode;
11
+ ref?: RefObject<HTMLDivElement | null>;
12
+ children?: ReactNode;
11
13
  }
12
- export declare function AllComicPages({ pages, classes, style, renderContent, }: Props): JSX.Element;
14
+ export declare function AllComicPages({ pages, classes, style, renderContent, ref, children, }: Props): JSX.Element;
13
15
  export {};
package/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { useRef, useState, useEffect, useCallback } from 'react';
3
2
  import clsx from 'clsx';
3
+ import { useRef, useState, useCallback, useEffect } from 'react';
4
4
  import throttle from 'lodash-es/throttle';
5
5
  import { MdArrowLeft, MdArrowRight } from 'react-icons/md';
6
6
 
@@ -32,9 +32,30 @@ function styleInject(css, ref) {
32
32
  }
33
33
 
34
34
  var css_248z$2 = ".comic-panels__allComicPagesText {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n padding: 1em 1em 50vh;\n position: relative;\n}\n\n.comic-panels__allComicPagesReference {\n background-color: white;\n border: 1px solid black;\n box-sizing: border-box;\n margin: 0 0 0 auto;\n max-width: 150px;\n padding: 4px;\n padding-bottom: 1em;\n position: sticky;\n right: 1em;\n top: 1em;\n width: 33%;\n}\n\n.comic-panels__allComicPagesReferencePage {\n bottom: 0.5em;\n font-size: 0.5em;\n right: 1em;\n position: absolute;\n}\n\n.comic-panels__comicPanelFocusOnScroll {\n background-color: #c1c1c1;\n}\n";
35
- var styles$2 = {"allComicPagesText":"comic-panels__allComicPagesText","allComicPagesReference":"comic-panels__allComicPagesReference","allComicPagesReferencePage":"comic-panels__allComicPagesReferencePage","comicPanelFocusOnScroll":"comic-panels__comicPanelFocusOnScroll"};
35
+ var styles$2 = {"allComicPagesText":"comic-panels__allComicPagesText"};
36
36
  styleInject(css_248z$2);
37
37
 
38
+ function AllComicPages({ pages, classes, style, renderContent = (content) => content, ref, children, }) {
39
+ return (jsxs("div", { className: clsx(styles$2.allComicPagesText, classes?.root), style: style, ref: ref, children: [children, pages.flatMap((page, i) => {
40
+ return [
41
+ jsxs("h3", { children: ["Page ", i + 1] }, `page-header-${i}`),
42
+ ...page.rows.flatMap((row, r) => {
43
+ return row.columns.map((column, c) => {
44
+ let label = `R${r + 1}`;
45
+ if (row.size) {
46
+ label += `S${row.size}`;
47
+ }
48
+ label += `C${c + 1}`;
49
+ if (column.size) {
50
+ label += `S${column.size}`;
51
+ }
52
+ return (jsxs("div", { "data-page": i, "data-x": r, "data-y": c, children: [jsx("label", { children: label }), jsx("p", { children: renderContent(column.content) })] }, `${i}-${r}-${c}`));
53
+ });
54
+ }),
55
+ ];
56
+ })] }));
57
+ }
58
+
38
59
  var css_248z$1 = ".comic-panels__comicPage {\n display: flex;\n flex-direction: column;\n margin: auto;\n}\n\n.comic-panels__comicPanel {\n border: 1px solid black;\n box-sizing: border-box;\n cursor: pointer;\n margin: 4px;\n}\n\n.comic-panels__comicPanelRow {\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n";
39
60
  var styles$1 = {"comicPage":"comic-panels__comicPage","comicPanel":"comic-panels__comicPanel","comicPanelRow":"comic-panels__comicPanelRow"};
40
61
  styleInject(css_248z$1);
@@ -83,61 +104,6 @@ function ComicPage({ ratio, rows, panelClassName, className, onPanelClicked, onP
83
104
  }), children] }));
84
105
  }
85
106
 
86
- function AllComicPages({ pages, classes, style, renderContent = (content) => content, }) {
87
- const comicTextRef = useRef(null);
88
- const [currentPage, setCurrentPage] = useState(0), [scrolledToPanel, setScrolledToPanel] = useState([0, 0]);
89
- useEffect(() => {
90
- if (comicTextRef.current) {
91
- const comicTextContainer = comicTextRef.current;
92
- function onScroll() {
93
- const { y: containerY, height: containerHeight } = comicTextContainer.getBoundingClientRect();
94
- const containerBottom = containerY + containerHeight / 2;
95
- for (const child of comicTextContainer.children) {
96
- if (child.classList.contains(styles$2.allComicPagesReference)) {
97
- continue;
98
- }
99
- const { bottom } = child.getBoundingClientRect();
100
- if (bottom > containerBottom) {
101
- const { page, x, y } = child.dataset;
102
- if (page && x && y) {
103
- setCurrentPage(Number(page));
104
- setScrolledToPanel([Number(x), Number(y)]);
105
- break;
106
- }
107
- }
108
- }
109
- }
110
- const listeningFunction = throttle(onScroll, 100);
111
- comicTextContainer.addEventListener('scroll', listeningFunction);
112
- return () => comicTextContainer.removeEventListener('scroll', listeningFunction);
113
- }
114
- }, [setScrolledToPanel, setCurrentPage, comicTextRef.current]);
115
- return (jsxs("div", { className: clsx(styles$2.allComicPagesText, classes?.root), style: style, ref: comicTextRef, children: [jsx(ComicPage, { className: styles$2.allComicPagesReference, panelClassName: ([rI, cI]) => {
116
- let panelClassName = clsx(classes?.panel);
117
- if (scrolledToPanel[0] === rI && scrolledToPanel[1] === cI) {
118
- panelClassName = clsx(panelClassName, styles$2.comicPanelFocusOnScroll);
119
- }
120
- return panelClassName;
121
- }, ...pages[currentPage], children: jsx("span", { className: styles$2.allComicPagesReferencePage, children: currentPage + 1 }) }), pages.flatMap((page, i) => {
122
- return [
123
- jsxs("h3", { children: ["Page ", i + 1] }, `page-header-${i}`),
124
- ...page.rows.flatMap((row, r) => {
125
- return row.columns.map((column, c) => {
126
- let label = `R${r + 1}`;
127
- if (row.size) {
128
- label += `S${row.size}`;
129
- }
130
- label += `C${c + 1}`;
131
- if (column.size) {
132
- label += `S${column.size}`;
133
- }
134
- return (jsxs("div", { "data-page": i, "data-x": r, "data-y": c, children: [jsx("label", { children: label }), jsx("p", { children: renderContent(column.content) })] }, `${i}-${r}-${c}`));
135
- });
136
- }),
137
- ];
138
- })] }));
139
- }
140
-
141
107
  var css_248z = ".comic-panels__comicPages {\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n height: 100%;\n gap: 1em;\n padding: 1em;\n position: relative;\n width: 100%;\n}\n\n.comic-panels__comicPages.comic-panels__comicPagesVerticalView {\n flex-direction: column-reverse;\n}\n\n.comic-panels__comicPages.comic-panels__comicPagesVerticalView .comic-panels__comicPagesReferenceContainer {\n flex: 1 0;\n}\n\n.comic-panels__comicPages.comic-panels__comicPagesVerticalView .comic-panels__comicPagesText {\n flex: 1 0;\n}\n\n.comic-panels__comicPages::after {\n align-items: center;\n background-color: rgba(255, 255, 255, 0.8);\n border: 1px solid black;\n content: 'Click to use the left and right arrow keys to navigate.';\n display: flex;\n height: 100%;\n justify-content: center;\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n}\n\n.comic-panels__comicPages:focus-within::after {\n display: none;\n}\n\n.comic-panels__comicPagesActions,\n.comic-panels__comicPagesInput {\n align-items: center;\n display: flex;\n flex-direction: row;\n font-size: 0.8em;\n gap: 1em;\n justify-content: center;\n margin: 1em auto 0;\n}\n\n.comic-panels__comicPageGoTo {\n width: 3em;\n}\n\n.comic-panels__comicPagesActions > button {\n align-items: center;\n display: flex;\n font-size: 1.2em;\n}\n\n.comic-panels__hideComicAction {\n opacity: 0;\n pointer-events: none;\n}\n\n.comic-panels__comicPagesReferenceContainer {\n flex: 1;\n}\n\n.comic-panels__comicPagesReference {\n max-height: 90%;\n min-width: 0;\n}\n\n.comic-panels__comicPagesText {\n box-sizing: border-box;\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 1em;\n line-height: 1.5em;\n overflow-y: auto;\n scroll-snap-type: y mandatory;\n}\n\n.comic-panels__comicPagesText > p {\n border-left: 1px solid transparent;\n box-sizing: border-box;\n padding: 0.5em;\n}\n\n.comic-panels__comicPagesText > p,\n.comic-panels__comicPagesTextAnchor {\n scroll-snap-align: top;\n scroll-snap-stop: normal;\n}\n\n.comic-panels__comicPagesReferenceContainer,\n.comic-panels__comicPagesText,\n.comic-panels__comicPagesTextAnchor {\n height: 95%;\n}\n\n.comic-panels__comicPagesTextAnchor {\n box-sizing: border-box;\n display: flex;\n flex: none;\n flex-direction: column;\n font-size: 0.8em;\n justify-content: center;\n text-align: center;\n}\n\n.comic-panels__comicPanelFocusOnScroll {\n background-color: #c1c1c1;\n}\n\ndiv.comic-panels__comicPanelFocusOnHover {\n background-image: linear-gradient(\n 45deg,\n #000 25%,\n transparent 25%,\n transparent 50%,\n #000 50%,\n #000 75%,\n transparent 75%,\n #fff\n );\n background-size: 50px 50px;\n}\n\n.comic-panels__comicPagesText > p.comic-panels__textFocusOnHover {\n border-color: black;\n}\n";
142
108
  var styles = {"comicPages":"comic-panels__comicPages","comicPagesVerticalView":"comic-panels__comicPagesVerticalView","comicPagesReferenceContainer":"comic-panels__comicPagesReferenceContainer","comicPagesText":"comic-panels__comicPagesText","comicPagesActions":"comic-panels__comicPagesActions","comicPagesInput":"comic-panels__comicPagesInput","comicPageGoTo":"comic-panels__comicPageGoTo","hideComicAction":"comic-panels__hideComicAction","comicPagesReference":"comic-panels__comicPagesReference","comicPagesTextAnchor":"comic-panels__comicPagesTextAnchor","comicPanelFocusOnScroll":"comic-panels__comicPanelFocusOnScroll","comicPanelFocusOnHover":"comic-panels__comicPanelFocusOnHover","textFocusOnHover":"comic-panels__textFocusOnHover"};
143
109
  styleInject(css_248z);
package/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/ComicPage.tsx","../src/AllComicPages.tsx","../src/ComicPages.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import styles from './ComicPage.module.css';\n\nimport { JSX, ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { ComicPanel, SquarePaneledComic } from './models';\n\n/**\n * This sizing is not ABSOLUTE, it is PROPORTIONAL.\n * For example, if a row is of size \"1\" and another is of size \"2\", row 2 is twice as tall as row 1.\n * If there is another row of size \"3\", then row 3 is three times as tall as row 1, and one-and-a-half as tall as row 2.\n * You have to math it out.\n * This relativity is needed so that the comics change size and fit within the web browser, regardless of device or browser size.\n */\n\nexport type Props = SquarePaneledComic & {\n className?: string;\n panelClassName?: (panel: ComicPanel) => string | undefined;\n onPanelClicked?: (panel: ComicPanel) => void;\n onPanelHovered?: (panel: ComicPanel | null) => void;\n children?: ReactNode;\n};\n/*\nIt might honestly be better to POC this first before drawing up an interface.\nWe want the panels to be flexible. Ergo, it might be better to define the shapes by ratios\nrather than by any absolute sizing. For example, a rectangle may be defined by 1:2:1:2 - that is, the width is twice the height.\nBut how does this get expressed? Is EVERY side required? Are origins needed?\n\nA way of doing - that addresses the \"sides\" requirement - is to define a Shapes model - ex. Rhombuses, Squares, blah.\nFor Rhombuses, I guess you only need height and the two bases.\n\n\nThe other way is to have TRUE flexibility - rather than define panels specifically, at most the component just draws images\nand the writer figures it out.\nHowever, the downside is that it is impossible to know what is a panel and what is not; knowing what is a panel would help\nwith the interactivity of the thing.\nA way to remedy this is to allow the client to define what are panels.\nBut this is a pain in the ass, as we may need to be aware of three-dimensionality (as in, z-indexes and shit). But this may not be as\nbad as one thinks.\nThis may also help with the saving of comic templates, but we're not there yet...\n\nThis, of course, raises the question of wtf this framework even saves the client's time with, if we allow the client to just define\nwhatever they want.\nWell, questions to answer all in due time I guess...\n\n\n\ninterface DynamicProps {\n shapes: Array<{\n origin: [number, number];\n sides: Array\n }>;\n}\n*/\n\nexport function ComicPage({\n ratio,\n rows,\n panelClassName,\n className,\n onPanelClicked,\n onPanelHovered,\n children,\n}: Props): JSX.Element {\n return (\n <div\n className={clsx(styles.comicPage, className)}\n style={{\n aspectRatio: `${ratio.width} / ${ratio.height}`,\n }}\n >\n {rows.map(({ size, columns }, rI) => {\n return (\n <div\n key={rI}\n className={styles.comicPanelRow}\n style={{\n flex: (size ?? 1).toString(),\n }}\n >\n {columns.map(({ size }, cI) => {\n return (\n <div\n key={cI}\n style={{ flex: (size ?? 1).toString() }}\n className={clsx(\n styles.comicPanel,\n panelClassName?.([rI, cI]),\n )}\n onClick={() => onPanelClicked?.([rI, cI])}\n onMouseOver={() => onPanelHovered?.([rI, cI])}\n onMouseOut={() => onPanelHovered?.(null)}\n ></div>\n );\n })}\n </div>\n );\n })}\n {children}\n </div>\n );\n}\n","import styles from './AllComicPages.module.css';\n\nimport {\n CSSProperties,\n JSX,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { Props as ComicPanelProps, ComicPage } from './ComicPage';\nimport clsx from 'clsx';\nimport { ComicPanel } from './models';\nimport throttle from 'lodash-es/throttle';\n\ninterface Props {\n pages: Array<ComicPanelProps>;\n\n classes?: {\n root?: string;\n panel?: string;\n };\n style?: Partial<CSSProperties>;\n renderContent?: (content: string | ReactNode) => ReactNode;\n}\n\nexport function AllComicPages({\n pages,\n classes,\n style,\n renderContent = (content) => content,\n}: Props): JSX.Element {\n const comicTextRef = useRef<HTMLDivElement>(null);\n\n const [currentPage, setCurrentPage] = useState(0),\n [scrolledToPanel, setScrolledToPanel] = useState<ComicPanel>([0, 0]);\n\n useEffect(() => {\n if (comicTextRef.current) {\n const comicTextContainer = comicTextRef.current;\n\n function onScroll(): void {\n const { y: containerY, height: containerHeight } =\n comicTextContainer.getBoundingClientRect();\n\n const containerBottom = containerY + containerHeight / 2;\n\n for (const child of comicTextContainer.children) {\n if (child.classList.contains(styles.allComicPagesReference)) {\n continue;\n }\n\n const { bottom } = child.getBoundingClientRect();\n\n if (bottom > containerBottom) {\n const { page, x, y } = (child as HTMLElement).dataset;\n\n if (page && x && y) {\n setCurrentPage(Number(page));\n setScrolledToPanel([Number(x), Number(y)]);\n break;\n }\n }\n }\n }\n\n const listeningFunction = throttle(onScroll, 100);\n\n comicTextContainer.addEventListener('scroll', listeningFunction);\n\n return () =>\n comicTextContainer.removeEventListener('scroll', listeningFunction);\n }\n }, [setScrolledToPanel, setCurrentPage, comicTextRef.current]);\n\n return (\n <div\n className={clsx(styles.allComicPagesText, classes?.root)}\n style={style}\n ref={comicTextRef}\n >\n <ComicPage\n className={styles.allComicPagesReference}\n panelClassName={([rI, cI]) => {\n let panelClassName = clsx(classes?.panel);\n\n if (scrolledToPanel[0] === rI && scrolledToPanel[1] === cI) {\n panelClassName = clsx(\n panelClassName,\n styles.comicPanelFocusOnScroll,\n );\n }\n return panelClassName;\n }}\n {...pages[currentPage]}\n >\n <span className={styles.allComicPagesReferencePage}>\n {currentPage + 1}\n </span>\n </ComicPage>\n {pages.flatMap((page, i) => {\n return [\n <h3 key={`page-header-${i}`}>Page {i + 1}</h3>,\n ...page.rows.flatMap((row, r) => {\n return row.columns.map((column, c) => {\n let label = `R${r + 1}`;\n\n if (row.size) {\n label += `S${row.size}`;\n }\n\n label += `C${c + 1}`;\n\n if (column.size) {\n label += `S${column.size}`;\n }\n\n return (\n <div key={`${i}-${r}-${c}`} data-page={i} data-x={r} data-y={c}>\n <label>{label}</label>\n <p>{renderContent(column.content)}</p>\n </div>\n );\n });\n }),\n ];\n })}\n </div>\n );\n}\n","import styles from './ComicPages.module.css';\n\nimport {\n JSX,\n KeyboardEvent,\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport throttle from 'lodash-es/throttle';\nimport { MdArrowLeft, MdArrowRight } from 'react-icons/md';\n\nimport { Props as ComicPanelProps, ComicPage } from './ComicPage';\nimport { ComicPanel } from './models';\nimport clsx from 'clsx';\n\ninterface Props {\n pages: Array<ComicPanelProps>;\n\n pageNumber?: number;\n vertical?: boolean;\n className?: string;\n scrollThreshold?: number;\n onPageChange?: (pageNumber: number) => void;\n onComicEnd?: () => void;\n renderContent?: (content: string | ReactNode) => ReactNode;\n}\n\nexport function ComicPages({\n pages,\n vertical,\n className,\n pageNumber,\n scrollThreshold = 10,\n onPageChange,\n onComicEnd,\n renderContent = (content) => content,\n}: Props): JSX.Element {\n const comicPagesRef = useRef<HTMLDivElement>(null);\n const comicTextRef = useRef<HTMLDivElement>(null);\n\n const [cachedPageNumber, setCachedPageNumber] = useState(pageNumber);\n\n const getCurrentIndexByPageNumber = useCallback(\n (pageNumber: number | undefined) => {\n if (\n typeof pageNumber === 'number' &&\n pageNumber >= 0 &&\n pageNumber < pages.length\n ) {\n return pageNumber;\n } else {\n return 0;\n }\n },\n [pages],\n );\n\n const [currentIndex, setCurrentIndex] = useState(() =>\n getCurrentIndexByPageNumber(pageNumber),\n );\n const [scrolledToPanel, setScrolledToPanel] = useState<ComicPanel>([0, 0]);\n const [hoveredPanel, setHoveredPanel] = useState<ComicPanel | null>(null);\n\n const currentPage = pages[currentIndex];\n\n const lastPage = currentIndex === pages.length - 1;\n\n const goToPreviousPage = useCallback(\n (comicTextContainer: HTMLElement) => {\n if (currentIndex > 0) {\n const newPage = currentIndex - 1;\n\n setCurrentIndex(newPage);\n onPageChange?.(newPage);\n comicTextContainer.scroll({\n top: 0,\n });\n }\n },\n [currentIndex, setCurrentIndex, pages, onPageChange],\n );\n\n const goToNextPage = useCallback(\n (comicTextContainer: HTMLElement) => {\n if (lastPage) {\n onComicEnd?.();\n } else {\n const newPage = currentIndex + 1;\n\n setCurrentIndex(newPage);\n onPageChange?.(newPage);\n comicTextContainer.scroll({\n top: 0,\n });\n }\n },\n [currentIndex, setCurrentIndex, pages, lastPage, onComicEnd, onPageChange],\n );\n\n // If the passed-down 'pageNumber' changes, honor the client and change the component.\n useEffect(() => {\n if (pageNumber !== cachedPageNumber) {\n setCachedPageNumber(pageNumber);\n setCurrentIndex(getCurrentIndexByPageNumber(pageNumber));\n }\n }, [\n pageNumber,\n cachedPageNumber,\n setCachedPageNumber,\n getCurrentIndexByPageNumber,\n ]);\n\n useEffect(() => {\n if (comicTextRef.current) {\n const comicTextContainer = comicTextRef.current;\n\n function onScroll(): void {\n const { bottom: containerBottom, y: containerY } =\n comicTextContainer.getBoundingClientRect();\n\n const anchor = comicTextContainer.querySelector(\n `.${styles.comicPagesTextAnchor}`,\n )!;\n const { bottom: anchorBottom } = anchor.getBoundingClientRect();\n\n if (\n Math.floor(anchorBottom) <\n Math.floor(containerBottom) + scrollThreshold\n ) {\n goToNextPage(comicTextContainer);\n }\n\n for (const child of comicTextContainer.children) {\n const { bottom } = child.getBoundingClientRect();\n\n if (bottom > containerY) {\n const { x, y } = (child as HTMLElement).dataset;\n setScrolledToPanel([Number(x), Number(y)]);\n break;\n }\n }\n }\n\n const listeningFunction = throttle(onScroll, 300);\n\n comicTextContainer.addEventListener('scroll', listeningFunction);\n\n return () =>\n comicTextContainer.removeEventListener('scroll', listeningFunction);\n }\n }, [setScrolledToPanel, goToNextPage, comicTextRef.current, scrollThreshold]);\n\n useEffect(() => {\n if (comicPagesRef.current && comicTextRef.current) {\n const comicPagesContainer = comicPagesRef.current;\n const comicTextContainer = comicTextRef.current;\n\n function onKeyDown(event: KeyboardEvent<Element>): void {\n switch (event.key) {\n case 'ArrowLeft':\n goToPreviousPage(comicTextContainer);\n break;\n case 'ArrowRight':\n goToNextPage(comicTextContainer);\n break;\n }\n }\n\n comicPagesContainer.addEventListener('keydown', onKeyDown as any);\n\n return () =>\n comicPagesContainer.removeEventListener('keydown', onKeyDown as any);\n }\n }, [\n goToPreviousPage,\n goToNextPage,\n comicPagesRef.current,\n comicTextRef.current,\n ]);\n\n if (!currentPage) {\n return <p>Something went wrong. You're on a non-existing page.</p>;\n } else {\n return (\n <div\n className={clsx(styles.comicPages, className, {\n [styles.comicPagesVerticalView]: vertical,\n })}\n ref={comicPagesRef}\n tabIndex={0}\n >\n <div className={styles.comicPagesReferenceContainer}>\n <ComicPage\n className={styles.comicPagesReference}\n panelClassName={([rI, cI]) => {\n let panelClassName = '';\n\n if (scrolledToPanel[0] === rI && scrolledToPanel[1] === cI) {\n panelClassName = clsx(\n panelClassName,\n styles.comicPanelFocusOnScroll,\n );\n }\n\n if (hoveredPanel?.[0] === rI && hoveredPanel![1] === cI) {\n panelClassName = clsx(\n panelClassName,\n styles.comicPanelFocusOnHover,\n );\n }\n\n return panelClassName;\n }}\n onPanelClicked={([rI, cI]) => {\n document\n .querySelector(`[data-x=\"${rI}\"][data-y=\"${cI}\"]`)!\n .scrollIntoView({\n behavior: 'smooth',\n });\n }}\n onPanelHovered={setHoveredPanel}\n {...currentPage}\n />\n <div className={styles.comicPagesActions}>\n <button\n className={clsx({\n [styles.hideComicAction]: currentIndex === 0,\n })}\n onClick={() => goToPreviousPage(comicTextRef.current!)}\n >\n <MdArrowLeft />\n </button>\n <div>\n Page {currentIndex + 1} of {pages.length}\n </div>\n <button\n className={clsx({\n [styles.hideComicAction]: lastPage,\n })}\n onClick={() => goToNextPage(comicTextRef.current!)}\n >\n <MdArrowRight />\n </button>\n </div>\n <div className={styles.comicPagesInput}>\n Go to{' '}\n <input\n type=\"number\"\n className={styles.comicPageGoTo}\n onChange={(event) => {\n const value = Number(event.currentTarget.value) - 1;\n\n if (value >= 0 && value < pages.length) {\n setCurrentIndex(value);\n onPageChange?.(value);\n }\n }}\n />\n </div>\n </div>\n <div className={styles.comicPagesText} ref={comicTextRef} tabIndex={0}>\n {currentPage.rows.flatMap(({ columns }, rI) => {\n return columns.map(({ content }, cI) => {\n return (\n <p\n key={`${rI}-${cI}`}\n className={clsx({\n [styles.textFocusOnHover]:\n rI === hoveredPanel?.[0] && cI === hoveredPanel![1],\n })}\n data-x={rI}\n data-y={cI}\n onMouseOver={() => setHoveredPanel([rI, cI])}\n onMouseOut={() => setHoveredPanel(null)}\n >\n {renderContent(content)}\n </p>\n );\n });\n })}\n <div className={styles.comicPagesTextAnchor}>\n {lastPage\n ? 'You are on the last page.'\n : 'Scroll to the bottom to go to the next page'}\n </div>\n </div>\n </div>\n );\n }\n}\n"],"names":["_jsxs","styles","_jsx"],"mappings":"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","x_google_ignoreList":[0]}
1
+ {"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/AllComicPages.tsx","../src/ComicPage.tsx","../src/ComicPages.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import styles from './AllComicPages.module.css';\n\nimport { CSSProperties, JSX, ReactNode, RefObject } from 'react';\nimport { Props as ComicPanelProps } from './ComicPage';\nimport clsx from 'clsx';\n\ninterface Props {\n pages: Array<ComicPanelProps>;\n\n classes?: {\n root?: string;\n panel?: string;\n };\n style?: Partial<CSSProperties>;\n renderContent?: (content: string | ReactNode) => ReactNode;\n ref?: RefObject<HTMLDivElement | null>;\n children?: ReactNode;\n}\n\nexport function AllComicPages({\n pages,\n classes,\n style,\n renderContent = (content) => content,\n ref,\n children,\n}: Props): JSX.Element {\n return (\n <div\n className={clsx(styles.allComicPagesText, classes?.root)}\n style={style}\n ref={ref}\n >\n {children}\n {pages.flatMap((page, i) => {\n return [\n <h3 key={`page-header-${i}`}>Page {i + 1}</h3>,\n ...page.rows.flatMap((row, r) => {\n return row.columns.map((column, c) => {\n let label = `R${r + 1}`;\n\n if (row.size) {\n label += `S${row.size}`;\n }\n\n label += `C${c + 1}`;\n\n if (column.size) {\n label += `S${column.size}`;\n }\n\n return (\n <div key={`${i}-${r}-${c}`} data-page={i} data-x={r} data-y={c}>\n <label>{label}</label>\n <p>{renderContent(column.content)}</p>\n </div>\n );\n });\n }),\n ];\n })}\n </div>\n );\n}\n","import styles from './ComicPage.module.css';\n\nimport { JSX, ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { ComicPanel, SquarePaneledComic } from './models';\n\n/**\n * This sizing is not ABSOLUTE, it is PROPORTIONAL.\n * For example, if a row is of size \"1\" and another is of size \"2\", row 2 is twice as tall as row 1.\n * If there is another row of size \"3\", then row 3 is three times as tall as row 1, and one-and-a-half as tall as row 2.\n * You have to math it out.\n * This relativity is needed so that the comics change size and fit within the web browser, regardless of device or browser size.\n */\n\nexport type Props = SquarePaneledComic & {\n className?: string;\n panelClassName?: (panel: ComicPanel) => string | undefined;\n onPanelClicked?: (panel: ComicPanel) => void;\n onPanelHovered?: (panel: ComicPanel | null) => void;\n children?: ReactNode;\n};\n/*\nIt might honestly be better to POC this first before drawing up an interface.\nWe want the panels to be flexible. Ergo, it might be better to define the shapes by ratios\nrather than by any absolute sizing. For example, a rectangle may be defined by 1:2:1:2 - that is, the width is twice the height.\nBut how does this get expressed? Is EVERY side required? Are origins needed?\n\nA way of doing - that addresses the \"sides\" requirement - is to define a Shapes model - ex. Rhombuses, Squares, blah.\nFor Rhombuses, I guess you only need height and the two bases.\n\n\nThe other way is to have TRUE flexibility - rather than define panels specifically, at most the component just draws images\nand the writer figures it out.\nHowever, the downside is that it is impossible to know what is a panel and what is not; knowing what is a panel would help\nwith the interactivity of the thing.\nA way to remedy this is to allow the client to define what are panels.\nBut this is a pain in the ass, as we may need to be aware of three-dimensionality (as in, z-indexes and shit). But this may not be as\nbad as one thinks.\nThis may also help with the saving of comic templates, but we're not there yet...\n\nThis, of course, raises the question of wtf this framework even saves the client's time with, if we allow the client to just define\nwhatever they want.\nWell, questions to answer all in due time I guess...\n\n\n\ninterface DynamicProps {\n shapes: Array<{\n origin: [number, number];\n sides: Array\n }>;\n}\n*/\n\nexport function ComicPage({\n ratio,\n rows,\n panelClassName,\n className,\n onPanelClicked,\n onPanelHovered,\n children,\n}: Props): JSX.Element {\n return (\n <div\n className={clsx(styles.comicPage, className)}\n style={{\n aspectRatio: `${ratio.width} / ${ratio.height}`,\n }}\n >\n {rows.map(({ size, columns }, rI) => {\n return (\n <div\n key={rI}\n className={styles.comicPanelRow}\n style={{\n flex: (size ?? 1).toString(),\n }}\n >\n {columns.map(({ size }, cI) => {\n return (\n <div\n key={cI}\n style={{ flex: (size ?? 1).toString() }}\n className={clsx(\n styles.comicPanel,\n panelClassName?.([rI, cI]),\n )}\n onClick={() => onPanelClicked?.([rI, cI])}\n onMouseOver={() => onPanelHovered?.([rI, cI])}\n onMouseOut={() => onPanelHovered?.(null)}\n ></div>\n );\n })}\n </div>\n );\n })}\n {children}\n </div>\n );\n}\n","import styles from './ComicPages.module.css';\n\nimport {\n JSX,\n KeyboardEvent,\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport throttle from 'lodash-es/throttle';\nimport { MdArrowLeft, MdArrowRight } from 'react-icons/md';\n\nimport { Props as ComicPanelProps, ComicPage } from './ComicPage';\nimport { ComicPanel } from './models';\nimport clsx from 'clsx';\n\ninterface Props {\n pages: Array<ComicPanelProps>;\n\n pageNumber?: number;\n vertical?: boolean;\n className?: string;\n scrollThreshold?: number;\n onPageChange?: (pageNumber: number) => void;\n onComicEnd?: () => void;\n renderContent?: (content: string | ReactNode) => ReactNode;\n}\n\nexport function ComicPages({\n pages,\n vertical,\n className,\n pageNumber,\n scrollThreshold = 10,\n onPageChange,\n onComicEnd,\n renderContent = (content) => content,\n}: Props): JSX.Element {\n const comicPagesRef = useRef<HTMLDivElement>(null);\n const comicTextRef = useRef<HTMLDivElement>(null);\n\n const [cachedPageNumber, setCachedPageNumber] = useState(pageNumber);\n\n const getCurrentIndexByPageNumber = useCallback(\n (pageNumber: number | undefined) => {\n if (\n typeof pageNumber === 'number' &&\n pageNumber >= 0 &&\n pageNumber < pages.length\n ) {\n return pageNumber;\n } else {\n return 0;\n }\n },\n [pages],\n );\n\n const [currentIndex, setCurrentIndex] = useState(() =>\n getCurrentIndexByPageNumber(pageNumber),\n );\n const [scrolledToPanel, setScrolledToPanel] = useState<ComicPanel>([0, 0]);\n const [hoveredPanel, setHoveredPanel] = useState<ComicPanel | null>(null);\n\n const currentPage = pages[currentIndex];\n\n const lastPage = currentIndex === pages.length - 1;\n\n const goToPreviousPage = useCallback(\n (comicTextContainer: HTMLElement) => {\n if (currentIndex > 0) {\n const newPage = currentIndex - 1;\n\n setCurrentIndex(newPage);\n onPageChange?.(newPage);\n comicTextContainer.scroll({\n top: 0,\n });\n }\n },\n [currentIndex, setCurrentIndex, pages, onPageChange],\n );\n\n const goToNextPage = useCallback(\n (comicTextContainer: HTMLElement) => {\n if (lastPage) {\n onComicEnd?.();\n } else {\n const newPage = currentIndex + 1;\n\n setCurrentIndex(newPage);\n onPageChange?.(newPage);\n comicTextContainer.scroll({\n top: 0,\n });\n }\n },\n [currentIndex, setCurrentIndex, pages, lastPage, onComicEnd, onPageChange],\n );\n\n // If the passed-down 'pageNumber' changes, honor the client and change the component.\n useEffect(() => {\n if (pageNumber !== cachedPageNumber) {\n setCachedPageNumber(pageNumber);\n setCurrentIndex(getCurrentIndexByPageNumber(pageNumber));\n }\n }, [\n pageNumber,\n cachedPageNumber,\n setCachedPageNumber,\n getCurrentIndexByPageNumber,\n ]);\n\n useEffect(() => {\n if (comicTextRef.current) {\n const comicTextContainer = comicTextRef.current;\n\n function onScroll(): void {\n const { bottom: containerBottom, y: containerY } =\n comicTextContainer.getBoundingClientRect();\n\n const anchor = comicTextContainer.querySelector(\n `.${styles.comicPagesTextAnchor}`,\n )!;\n const { bottom: anchorBottom } = anchor.getBoundingClientRect();\n\n if (\n Math.floor(anchorBottom) <\n Math.floor(containerBottom) + scrollThreshold\n ) {\n goToNextPage(comicTextContainer);\n }\n\n for (const child of comicTextContainer.children) {\n const { bottom } = child.getBoundingClientRect();\n\n if (bottom > containerY) {\n const { x, y } = (child as HTMLElement).dataset;\n setScrolledToPanel([Number(x), Number(y)]);\n break;\n }\n }\n }\n\n const listeningFunction = throttle(onScroll, 300);\n\n comicTextContainer.addEventListener('scroll', listeningFunction);\n\n return () =>\n comicTextContainer.removeEventListener('scroll', listeningFunction);\n }\n }, [setScrolledToPanel, goToNextPage, comicTextRef.current, scrollThreshold]);\n\n useEffect(() => {\n if (comicPagesRef.current && comicTextRef.current) {\n const comicPagesContainer = comicPagesRef.current;\n const comicTextContainer = comicTextRef.current;\n\n function onKeyDown(event: KeyboardEvent<Element>): void {\n switch (event.key) {\n case 'ArrowLeft':\n goToPreviousPage(comicTextContainer);\n break;\n case 'ArrowRight':\n goToNextPage(comicTextContainer);\n break;\n }\n }\n\n comicPagesContainer.addEventListener('keydown', onKeyDown as any);\n\n return () =>\n comicPagesContainer.removeEventListener('keydown', onKeyDown as any);\n }\n }, [\n goToPreviousPage,\n goToNextPage,\n comicPagesRef.current,\n comicTextRef.current,\n ]);\n\n if (!currentPage) {\n return <p>Something went wrong. You're on a non-existing page.</p>;\n } else {\n return (\n <div\n className={clsx(styles.comicPages, className, {\n [styles.comicPagesVerticalView]: vertical,\n })}\n ref={comicPagesRef}\n tabIndex={0}\n >\n <div className={styles.comicPagesReferenceContainer}>\n <ComicPage\n className={styles.comicPagesReference}\n panelClassName={([rI, cI]) => {\n let panelClassName = '';\n\n if (scrolledToPanel[0] === rI && scrolledToPanel[1] === cI) {\n panelClassName = clsx(\n panelClassName,\n styles.comicPanelFocusOnScroll,\n );\n }\n\n if (hoveredPanel?.[0] === rI && hoveredPanel![1] === cI) {\n panelClassName = clsx(\n panelClassName,\n styles.comicPanelFocusOnHover,\n );\n }\n\n return panelClassName;\n }}\n onPanelClicked={([rI, cI]) => {\n document\n .querySelector(`[data-x=\"${rI}\"][data-y=\"${cI}\"]`)!\n .scrollIntoView({\n behavior: 'smooth',\n });\n }}\n onPanelHovered={setHoveredPanel}\n {...currentPage}\n />\n <div className={styles.comicPagesActions}>\n <button\n className={clsx({\n [styles.hideComicAction]: currentIndex === 0,\n })}\n onClick={() => goToPreviousPage(comicTextRef.current!)}\n >\n <MdArrowLeft />\n </button>\n <div>\n Page {currentIndex + 1} of {pages.length}\n </div>\n <button\n className={clsx({\n [styles.hideComicAction]: lastPage,\n })}\n onClick={() => goToNextPage(comicTextRef.current!)}\n >\n <MdArrowRight />\n </button>\n </div>\n <div className={styles.comicPagesInput}>\n Go to{' '}\n <input\n type=\"number\"\n className={styles.comicPageGoTo}\n onChange={(event) => {\n const value = Number(event.currentTarget.value) - 1;\n\n if (value >= 0 && value < pages.length) {\n setCurrentIndex(value);\n onPageChange?.(value);\n }\n }}\n />\n </div>\n </div>\n <div className={styles.comicPagesText} ref={comicTextRef} tabIndex={0}>\n {currentPage.rows.flatMap(({ columns }, rI) => {\n return columns.map(({ content }, cI) => {\n return (\n <p\n key={`${rI}-${cI}`}\n className={clsx({\n [styles.textFocusOnHover]:\n rI === hoveredPanel?.[0] && cI === hoveredPanel![1],\n })}\n data-x={rI}\n data-y={cI}\n onMouseOver={() => setHoveredPanel([rI, cI])}\n onMouseOut={() => setHoveredPanel(null)}\n >\n {renderContent(content)}\n </p>\n );\n });\n })}\n <div className={styles.comicPagesTextAnchor}>\n {lastPage\n ? 'You are on the last page.'\n : 'Scroll to the bottom to go to the next page'}\n </div>\n </div>\n </div>\n );\n }\n}\n"],"names":["_jsxs","styles","_jsx"],"mappings":"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","x_google_ignoreList":[0]}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "comic-panels-ui",
3
3
  "type": "module",
4
- "version": "0.0.0-beta.14",
4
+ "version": "0.0.0-beta.15",
5
5
  "exports": {
6
6
  ".": {
7
7
  "import": "./index.js",