comic-panels-ui 0.0.0-beta.2 → 0.0.0-beta.3

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 (5) hide show
  1. package/ComicPage.d.ts +3 -2
  2. package/ComicPages.d.ts +2 -1
  3. package/index.js +25 -15
  4. package/index.js.map +1 -1
  5. package/package.json +1 -1
package/ComicPage.d.ts CHANGED
@@ -9,7 +9,8 @@ import { ComicPanel, SquarePaneledComic } from './models';
9
9
  */
10
10
  export type Props = SquarePaneledComic & {
11
11
  className?: string;
12
- focused?: ComicPanel;
12
+ panelClassName?: (panel: ComicPanel) => string | undefined;
13
13
  onPanelClicked?: (panel: ComicPanel) => void;
14
+ onPanelHovered?: (panel: ComicPanel | null) => void;
14
15
  };
15
- export declare function ComicPage({ ratio, rows, focused, className, onPanelClicked, }: Props): JSX.Element;
16
+ export declare function ComicPage({ ratio, rows, panelClassName, className, onPanelClicked, onPanelHovered, }: Props): JSX.Element;
package/ComicPages.d.ts CHANGED
@@ -2,6 +2,7 @@ import { JSX } from 'react';
2
2
  import { Props as ComicPanelProps } from './ComicPage';
3
3
  interface Props {
4
4
  pages: Array<ComicPanelProps>;
5
+ className?: string;
5
6
  }
6
- export declare function ComicPages({ pages }: Props): JSX.Element;
7
+ export declare function ComicPages({ pages, className }: Props): JSX.Element;
7
8
  export {};
package/index.js CHANGED
@@ -31,12 +31,12 @@ function styleInject(css, ref) {
31
31
  }
32
32
  }
33
33
 
34
- var css_248z$1 = ".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 width: 100%;\n}\n\n.comic-panels__comicPages > * {\n flex: 1;\n}\n\n.comic-panels__comicPagesActions {\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__comicPagesActions > button {\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}\n\n.comic-panels__comicPagesReference {\n min-width: 0;\n}\n\n.comic-panels__comicPagesText {\n box-sizing: border-box;\n\n line-height: 1.5em;\n overflow-y: auto;\n}\n\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-direction: column;\n font-size: 0.8em;\n justify-content: center;\n text-align: center;\n}\n";
35
- var styles$1 = {"comicPages":"comic-panels__comicPages","comicPagesActions":"comic-panels__comicPagesActions","hideComicAction":"comic-panels__hideComicAction","comicPagesReferenceContainer":"comic-panels__comicPagesReferenceContainer","comicPagesReference":"comic-panels__comicPagesReference","comicPagesText":"comic-panels__comicPagesText","comicPagesTextAnchor":"comic-panels__comicPagesTextAnchor"};
34
+ var css_248z$1 = ".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 width: 100%;\n}\n\n.comic-panels__comicPages > * {\n flex: 1;\n}\n\n.comic-panels__comicPagesActions {\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__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}\n\n.comic-panels__comicPagesReference {\n min-width: 0;\n}\n\n.comic-panels__comicPagesText {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: 1em;\n line-height: 1.5em;\n overflow-y: auto;\n}\n\n.comic-panels__comicPagesText > p {\n border: 1px solid transparent;\n box-sizing: border-box;\n padding: 0.5em;\n}\n\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.comic-panels__comicPagesText > p.comic-panels__textFocusOnHover {\n border-color: red;\n}\n";
35
+ var styles$1 = {"comicPages":"comic-panels__comicPages","comicPagesActions":"comic-panels__comicPagesActions","hideComicAction":"comic-panels__hideComicAction","comicPagesReferenceContainer":"comic-panels__comicPagesReferenceContainer","comicPagesReference":"comic-panels__comicPagesReference","comicPagesText":"comic-panels__comicPagesText","comicPagesTextAnchor":"comic-panels__comicPagesTextAnchor","comicPanelFocusOnScroll":"comic-panels__comicPanelFocusOnScroll","comicPanelFocusOnHover":"comic-panels__comicPanelFocusOnHover","textFocusOnHover":"comic-panels__textFocusOnHover"};
36
36
  styleInject(css_248z$1);
37
37
 
38
- var css_248z = ".comic-panels__comicPage {\n display: flex;\n flex-direction: column;\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}\n\n.comic-panels__comicPanelFocused {\n background-color: #c1c1c1;\n}\n";
39
- var styles = {"comicPage":"comic-panels__comicPage","comicPanel":"comic-panels__comicPanel","comicPanelRow":"comic-panels__comicPanelRow","comicPanelFocused":"comic-panels__comicPanelFocused"};
38
+ var css_248z = ".comic-panels__comicPage {\n display: flex;\n flex-direction: column;\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}\n";
39
+ var styles = {"comicPage":"comic-panels__comicPage","comicPanel":"comic-panels__comicPanel","comicPanelRow":"comic-panels__comicPanelRow"};
40
40
  styleInject(css_248z);
41
41
 
42
42
  /*
@@ -71,25 +71,24 @@ interface DynamicProps {
71
71
  }>;
72
72
  }
73
73
  */
74
- function ComicPage({ ratio, rows, focused, className, onPanelClicked, }) {
74
+ function ComicPage({ ratio, rows, panelClassName, className, onPanelClicked, onPanelHovered, }) {
75
75
  return (jsx("div", { className: clsx(styles.comicPage, className), style: {
76
76
  aspectRatio: `${ratio.width} / ${ratio.height}`,
77
77
  }, children: rows.map(({ size, columns }, rI) => {
78
78
  return (jsx("div", { className: styles.comicPanelRow, style: {
79
79
  flex: (size ?? 1).toString(),
80
80
  }, children: columns.map(({ size }, cI) => {
81
- return (jsx("div", { style: { flex: (size ?? 1).toString() }, className: clsx(styles.comicPanel, {
82
- [styles.comicPanelFocused]: focused && rI === focused[0] && cI === focused[1],
83
- }), onClick: () => onPanelClicked?.([rI, cI]) }, cI));
81
+ return (jsx("div", { style: { flex: (size ?? 1).toString() }, className: clsx(styles.comicPanel, panelClassName?.([rI, cI])), onClick: () => onPanelClicked?.([rI, cI]), onMouseOver: () => onPanelHovered?.([rI, cI]), onMouseOut: () => onPanelHovered?.(null) }, cI));
84
82
  }) }, rI));
85
83
  }) }));
86
84
  }
87
85
 
88
- function ComicPages({ pages }) {
86
+ function ComicPages({ pages, className }) {
89
87
  const comicPagesRef = useRef(null);
90
88
  const comicTextRef = useRef(null);
91
89
  const [currentIndex, setCurrentIndex] = useState(0);
92
- const [currentPanel, setCurrentPanel] = useState([0, 0]);
90
+ const [scrolledToPanel, setScrolledToPanel] = useState([0, 0]);
91
+ const [hoveredPanel, setHoveredPanel] = useState(null);
93
92
  const currentPage = pages[currentIndex];
94
93
  const lastPage = currentIndex === pages.length - 1;
95
94
  const goToPreviousPage = useCallback((comicTextContainer) => {
@@ -124,7 +123,7 @@ function ComicPages({ pages }) {
124
123
  const { bottom } = child.getBoundingClientRect();
125
124
  if (bottom > containerY) {
126
125
  const { x, y } = child.dataset;
127
- setCurrentPanel([Number(x), Number(y)]);
126
+ setScrolledToPanel([Number(x), Number(y)]);
128
127
  break;
129
128
  }
130
129
  }
@@ -133,7 +132,7 @@ function ComicPages({ pages }) {
133
132
  comicTextContainer.addEventListener('scroll', listeningFunction);
134
133
  return () => comicTextContainer.removeEventListener('scroll', listeningFunction);
135
134
  }
136
- }, [setCurrentPanel, goToNextPage, comicTextRef.current]);
135
+ }, [setScrolledToPanel, goToNextPage, comicTextRef.current]);
137
136
  useEffect(() => {
138
137
  if (comicPagesRef.current && comicTextRef.current) {
139
138
  const comicPagesContainer = comicPagesRef.current;
@@ -161,19 +160,30 @@ function ComicPages({ pages }) {
161
160
  return jsx("p", { children: "Something went wrong. You're on a non-existing page." });
162
161
  }
163
162
  else {
164
- return (jsxs("div", { className: styles$1.comicPages, ref: comicPagesRef, tabIndex: 0, children: [jsxs("div", { className: styles$1.comicPagesReferenceContainer, children: [jsx(ComicPage, { className: styles$1.comicPagesReference, focused: currentPanel, onPanelClicked: ([rI, cI]) => {
163
+ return (jsxs("div", { className: clsx(styles$1.comicPages, className), ref: comicPagesRef, tabIndex: 0, children: [jsxs("div", { className: styles$1.comicPagesReferenceContainer, children: [jsx(ComicPage, { className: styles$1.comicPagesReference, panelClassName: ([rI, cI]) => {
164
+ let panelClassName = '';
165
+ if (scrolledToPanel[0] === rI && scrolledToPanel[1] === cI) {
166
+ panelClassName = clsx(panelClassName, styles$1.comicPanelFocusOnScroll);
167
+ }
168
+ if (hoveredPanel?.[0] === rI && hoveredPanel[1] === cI) {
169
+ panelClassName = clsx(panelClassName, styles$1.comicPanelFocusOnHover);
170
+ }
171
+ return panelClassName;
172
+ }, onPanelClicked: ([rI, cI]) => {
165
173
  document
166
174
  .querySelector(`[data-x="${rI}"][data-y="${cI}"]`)
167
175
  .scrollIntoView({
168
176
  behavior: 'smooth',
169
177
  });
170
- }, ...currentPage }), jsxs("div", { className: styles$1.comicPagesActions, children: [jsx("button", { className: clsx({
178
+ }, onPanelHovered: setHoveredPanel, ...currentPage }), jsxs("div", { className: styles$1.comicPagesActions, children: [jsx("button", { className: clsx({
171
179
  [styles$1.hideComicAction]: currentIndex === 0,
172
180
  }), onClick: () => goToPreviousPage(comicTextRef.current), children: jsx(MdArrowLeft, {}) }), jsxs("div", { children: ["Page ", currentIndex + 1, " of ", pages.length] }), jsx("button", { className: clsx({
173
181
  [styles$1.hideComicAction]: lastPage,
174
182
  }), onClick: () => goToNextPage(comicTextRef.current), children: jsx(MdArrowRight, {}) })] })] }), jsxs("div", { className: styles$1.comicPagesText, ref: comicTextRef, children: [currentPage.rows.flatMap(({ columns }, rI) => {
175
183
  return columns.map(({ text }, cI) => {
176
- return (jsx("p", { "data-x": rI, "data-y": cI, children: text }, `${rI}-${cI}`));
184
+ return (jsx("p", { className: clsx({
185
+ [styles$1.textFocusOnHover]: rI === hoveredPanel?.[0] && cI === hoveredPanel[1],
186
+ }), "data-x": rI, "data-y": cI, onMouseOver: () => setHoveredPanel([rI, cI]), onMouseOut: () => setHoveredPanel(null), children: text }, `${rI}-${cI}`));
177
187
  });
178
188
  }), jsx("div", { className: styles$1.comicPagesTextAnchor, children: lastPage
179
189
  ? 'You are on the last page.'
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/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 } 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 focused?: ComicPanel;\n onPanelClicked?: (panel: ComicPanel) => void;\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 focused,\n className,\n onPanelClicked,\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(styles.comicPanel, {\n [styles.comicPanelFocused]:\n focused && rI === focused[0] && cI === focused[1],\n })}\n onClick={() => onPanelClicked?.([rI, cI])}\n ></div>\n );\n })}\n </div>\n );\n })}\n </div>\n );\n}\n","import styles from './ComicPages.module.css';\n\nimport {\n JSX,\n KeyboardEvent,\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\nexport function ComicPages({ pages }: Props): JSX.Element {\n const comicPagesRef = useRef<HTMLDivElement>(null);\n const comicTextRef = useRef<HTMLDivElement>(null);\n\n const [currentIndex, setCurrentIndex] = useState(0);\n const [currentPanel, setCurrentPanel] = useState<ComicPanel>([0, 0]);\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 setCurrentIndex(currentIndex - 1);\n comicTextContainer.scroll({\n top: 0,\n behavior: 'smooth',\n });\n }\n },\n [currentIndex, setCurrentIndex, pages],\n );\n\n const goToNextPage = useCallback(\n (comicTextContainer: HTMLElement) => {\n if (currentIndex < pages.length - 1) {\n setCurrentIndex(currentIndex + 1);\n comicTextContainer.scroll({\n top: 0,\n behavior: 'smooth',\n });\n }\n },\n [currentIndex, setCurrentIndex, pages],\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 (Math.floor(anchorBottom) === Math.floor(containerBottom)) {\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 setCurrentPanel([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 }, [setCurrentPanel, goToNextPage, comicTextRef.current]);\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 className={styles.comicPages} ref={comicPagesRef} tabIndex={0}>\n <div className={styles.comicPagesReferenceContainer}>\n <ComicPage\n className={styles.comicPagesReference}\n focused={currentPanel}\n onPanelClicked={([rI, cI]) => {\n document\n .querySelector(`[data-x=\"${rI}\"][data-y=\"${cI}\"]`)!\n .scrollIntoView({\n behavior: 'smooth',\n });\n }}\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>\n <div className={styles.comicPagesText} ref={comicTextRef}>\n {currentPage.rows.flatMap(({ columns }, rI) => {\n return columns.map(({ text }, cI) => {\n return (\n <p key={`${rI}-${cI}`} data-x={rI} data-y={cI}>\n {text}\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":["_jsx","styles","_jsxs"],"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/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 './ComicPage.module.css';\n\nimport { JSX } 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};\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}: 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 </div>\n );\n}\n","import styles from './ComicPages.module.css';\n\nimport {\n JSX,\n KeyboardEvent,\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 className?: string;\n}\n\nexport function ComicPages({ pages, className }: Props): JSX.Element {\n const comicPagesRef = useRef<HTMLDivElement>(null);\n const comicTextRef = useRef<HTMLDivElement>(null);\n\n const [currentIndex, setCurrentIndex] = useState(0);\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 setCurrentIndex(currentIndex - 1);\n comicTextContainer.scroll({\n top: 0,\n behavior: 'smooth',\n });\n }\n },\n [currentIndex, setCurrentIndex, pages],\n );\n\n const goToNextPage = useCallback(\n (comicTextContainer: HTMLElement) => {\n if (currentIndex < pages.length - 1) {\n setCurrentIndex(currentIndex + 1);\n comicTextContainer.scroll({\n top: 0,\n behavior: 'smooth',\n });\n }\n },\n [currentIndex, setCurrentIndex, pages],\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 (Math.floor(anchorBottom) === Math.floor(containerBottom)) {\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]);\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 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>\n <div className={styles.comicPagesText} ref={comicTextRef}>\n {currentPage.rows.flatMap(({ columns }, rI) => {\n return columns.map(({ text }, 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 {text}\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":["_jsx","styles","_jsxs"],"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.2",
4
+ "version": "0.0.0-beta.3",
5
5
  "exports": {
6
6
  ".": {
7
7
  "import": "./index.js",