WRS-2173 - studio ui multi-page

package.json

@@ -26,9 +26,9 @@
         "validate-versions": "node validate_versions.cjs"
     },
     "dependencies": {
-        "@babel/preset-env": "^7.25.3",
         "@chili-publish/grafx-shared-components": "^0.88.7",
-        "@chili-publish/studio-sdk": "^1.17.2-rc.1",
+        "@chili-publish/studio-sdk": "^1.17.2-rc.2",
+        "@babel/preset-env": "^7.25.3",
         "@fortawesome/fontawesome-svg-core": "^6.7.1",
         "@fortawesome/pro-light-svg-icons": "^6.7.1",
         "@fortawesome/pro-regular-svg-icons": "^6.7.1",

src/MainContent.styles.tsx

@@ -10,7 +10,15 @@ export const CanvasContainer = styled.div`
     width: 100%;
 `;
 
-export const SuiCanvas = styled.div<{ hasAnimationTimeline?: boolean }>`
-    height: ${({ hasAnimationTimeline }) => (hasAnimationTimeline ? 'calc(100% - 5rem)' : '100%')};
+export const SuiCanvas = styled.div<{ hasAnimationTimeline?: boolean; hasMultiplePages?: boolean }>`
+    height: ${({ hasAnimationTimeline, hasMultiplePages }) => {
+        if (hasAnimationTimeline) {
+            return 'calc(100% - 5rem)';
+        }
+        if (hasMultiplePages) {
+            return 'calc(100% - 7.5rem)';
+        }
+        return '100%';
+    }}}
     width: 100%;
 `;

src/MainContent.tsx

@@ -5,6 +5,7 @@ import StudioSDK, {
     DocumentType,
     GrafxTokenAuthCredentials,
     LayoutIntent,
+    Page,
     Variable,
     WellKnownConfigurationKeys,
 } from '@chili-publish/studio-sdk';
@@ -30,6 +31,7 @@ import { useSubscriberContext } from './contexts/Subscriber';
 import { UiConfigContextProvider } from './contexts/UiConfigContext';
 import { VariablePanelContextProvider } from './contexts/VariablePanelContext';
 import { SuiCanvas } from './MainContent.styles';
+import Pages from './components/pagesPanel/Pages';
 import { Project, ProjectConfig } from './types/types';
 import { APP_WRAPPER_ID } from './utils/constants';
 import { getDataIdForSUI, getDataTestIdForSUI } from './utils/dataIds';
@@ -62,6 +64,10 @@ function MainContent({ projectConfig, updateToken: setAuthToken }: MainContentPr
     const [fontsConnectors, setFontsConnectors] = useState<ConnectorInstance[]>([]);
     const [layoutIntent, setLayoutIntent] = useState<LayoutIntent | null>(null);
 
+    const [pages, setPages] = useState<Page[]>([]);
+    const [activePageId, setActivePageId] = useState<string | null>(null);
+    const [pagesToRefresh, setPagesToRefresh] = useState<string[]>([]);
+
     const undoStackState = useMemo(() => ({ canUndo, canRedo }), [canUndo, canRedo]);
     const { subscriber: eventSubscriber } = useSubscriberContext();
 
@@ -209,6 +215,18 @@ function MainContent({ projectConfig, updateToken: setAuthToken }: MainContentPr
             onZoomChanged: (zoom) => {
                 setCurrentZoom(zoom);
             },
+            onPageSnapshotInvalidated: (invalidatedPageId) => {
+                setPagesToRefresh((prev) => {
+                    return prev.includes(String(invalidatedPageId)) ? prev : [...prev, String(invalidatedPageId)];
+                });
+            },
+            onPagesChanged: (changedPages) => {
+                const visiblePages = changedPages?.filter((i) => i.isVisible);
+                setPages(visiblePages);
+            },
+            onSelectedPageIdChanged: (pageId) => {
+                setActivePageId(pageId);
+            },
             onPageSizeChanged: () => {
                 zoomToPage();
             },
@@ -346,10 +364,15 @@ function MainContent({ projectConfig, updateToken: setAuthToken }: MainContentPr
                                             <MobileVariablesTray
                                                 variables={variables}
                                                 isTimelineDisplayed={layoutIntent === LayoutIntent.digitalAnimated}
+                                                isPagesPanelDisplayed={
+                                                    layoutIntent === LayoutIntent.print && pages?.length > 1
+                                                }
                                                 isDocumentLoaded={isDocumentLoaded}
                                             />
                                         )}
                                         <SuiCanvas
+                                            // intent prop to calculate pages container
+                                            hasMultiplePages={layoutIntent === LayoutIntent.print && pages?.length > 1}
                                             hasAnimationTimeline={layoutIntent === LayoutIntent.digitalAnimated}
                                             data-id={getDataIdForSUI('canvas')}
                                             data-testid={getDataTestIdForSUI('canvas')}
@@ -363,6 +386,14 @@ function MainContent({ projectConfig, updateToken: setAuthToken }: MainContentPr
                                                 isAnimationPlaying={animationStatus}
                                             />
                                         ) : null}
+                                        {layoutIntent === LayoutIntent.print && pages?.length > 1 ? (
+                                            <Pages
+                                                pages={pages}
+                                                activePageId={activePageId}
+                                                pagesToRefresh={pagesToRefresh}
+                                                setPagesToRefresh={setPagesToRefresh}
+                                            />
+                                        ) : null}
                                     </CanvasContainer>
                                 </MainContentContainer>
                                 {pendingAuthentications.length &&

src/components/pagesPanel/Pages.styles.ts

@@ -0,0 +1,59 @@
+import { ITheme } from '@chili-publish/grafx-shared-components';
+import styled from 'styled-components';
+
+export const Container = styled.div<{ themeStyles: ITheme; isMobileSize: boolean }>`
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    max-width: ${({ isMobileSize }) => (!isMobileSize ? 'calc(100vw - 18.875rem)' : '100%')};
+    height: 7.5rem;
+    background: ${({ themeStyles }) => themeStyles.panel.backgroundColor};
+    border-top: 2px solid ${({ themeStyles }) => themeStyles.panel.borderColor};
+`;
+export const ScrollableContainer = styled.div`
+    display: flex;
+    height: 100%;
+    padding: 0 0.625rem;
+    align-items: center;
+    overflow-x: auto;
+    width: auto;
+    white-space: nowrap;
+    overflow-y: hidden;
+`;
+export const Card = styled.div<{ themeStyles: ITheme; selected?: boolean }>`
+    box-sizing: border-box;
+    width: 5rem;
+    height: 5rem;
+    margin: 0 0.625rem;
+    flex-shrink: 0;
+    border-radius: 0.5rem;
+    border: 1px solid
+        ${({ selected, themeStyles }) =>
+            selected ? themeStyles.previewCard.card.selected.borderColor : themeStyles.previewCard.card.borderColor};
+    background-color: ${({ themeStyles }) => themeStyles.canvas.backgroundColor};
+    &:hover {
+        border-color: ${({ themeStyles }) => themeStyles.previewCard.card.hover.borderColor};
+    }
+    [data-id^='gsc-preview-container-'] {
+        border-radius: 0.5rem;
+    }
+`;
+export const NumberBadge = styled.div`
+    position: absolute;
+    bottom: 0.315rem;
+    left: 0.9375rem;
+    width: 1.5rem;
+    height: 1.5rem;
+    background-color: rgba(37, 37, 37, 0.75);
+    color: white;
+    font-size: 0.75rem;
+    border-radius: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
+export const Wrapper = styled.div`
+    position: relative;
+    display: flex;
+    justify-items: center;
+`;

src/components/pagesPanel/Pages.tsx

@@ -0,0 +1,116 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Page } from '@chili-publish/studio-sdk';
+import {
+    PreviewCard,
+    PreviewCardVariant,
+    PreviewType,
+    ScrollbarWrapper,
+    useMobileSize,
+    useTheme,
+} from '@chili-publish/grafx-shared-components';
+import { ScrollableContainer, Card, Container } from './Pages.styles';
+import { PREVIEW_FALLBACK } from '../../utils/constants';
+import { PageSnapshot } from '../../types/types';
+import { PreviewCardBadge } from './PreviewCardBadge';
+
+interface PagesProps {
+    pages: Page[];
+    activePageId: string | null;
+    pagesToRefresh: string[];
+    setPagesToRefresh: React.Dispatch<React.SetStateAction<string[]>>;
+}
+
+function Pages({ pages, activePageId, pagesToRefresh, setPagesToRefresh }: PagesProps) {
+    const theme = useTheme();
+    const [pageSnapshots, setPageSnapshots] = useState<PageSnapshot[]>([]);
+    const isMobileSize = useMobileSize();
+
+    const handleSelectPage = async (pageId: string) => {
+        await window.StudioUISDK.page.select(pageId);
+    };
+
+    const getPagesSnapshot = useCallback(async (ids: string[]) => {
+        const snapArray = ids.map((id) =>
+            window.SDK.page.getSnapshot(id).then((snapshot) => ({
+                id,
+                snapshot: snapshot as unknown as Uint8Array,
+            })),
+        );
+        const awaitedArray = await Promise.all(snapArray);
+        setPageSnapshots(awaitedArray);
+        return awaitedArray as PageSnapshot[];
+    }, []);
+
+    useEffect(() => {
+        if (pages?.length && !pageSnapshots.length) {
+            getPagesSnapshot(pages.map((i) => i.id));
+        }
+    }, [pages, pageSnapshots, getPagesSnapshot]);
+
+    useEffect(() => {
+        if (!pagesToRefresh.length) return;
+
+        const updateSnapshots = async () => {
+            const snapshotsArray = await getPagesSnapshot(pagesToRefresh);
+            const updatedSnapshots = await Promise.all(snapshotsArray);
+
+            // Update state once with all new snapshots
+            setPageSnapshots((prevSnapshots) => {
+                const newSnapshots = [...prevSnapshots];
+                updatedSnapshots.forEach(({ id, snapshot }) => {
+                    const idx = newSnapshots.findIndex((item) => item.id === id);
+                    if (idx !== -1) {
+                        newSnapshots[idx] = { ...newSnapshots[idx], snapshot };
+                    }
+                });
+                return newSnapshots;
+            });
+
+            setPagesToRefresh([]);
+        };
+
+        const timeoutId = setTimeout(updateSnapshots, 1000);
+
+        // eslint-disable-next-line consistent-return
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [pagesToRefresh, setPagesToRefresh, getPagesSnapshot]);
+
+    return (
+        <Container themeStyles={theme} isMobileSize={isMobileSize}>
+            <ScrollbarWrapper invertScrollbarColors>
+                <ScrollableContainer>
+                    {!!pages?.length &&
+                        pages.map((item, index) => (
+                            <PreviewCardBadge badgeNumber={index + 1} key={`badge-${item.id}`}>
+                                <Card themeStyles={theme} selected={item.id === activePageId} key={`card-${item.id}`}>
+                                    <PreviewCard
+                                        key={`${item.id}-preview-card`}
+                                        path={
+                                            pageSnapshots[index] &&
+                                            URL.createObjectURL(
+                                                new Blob([pageSnapshots[index].snapshot.buffer], { type: 'image/png' }),
+                                            )
+                                        }
+                                        type={PreviewType.IMAGE}
+                                        itemId={item.id}
+                                        fallback={PREVIEW_FALLBACK}
+                                        padding="0"
+                                        options={[]}
+                                        renamingDisabled
+                                        variant={PreviewCardVariant.LIST}
+                                        selected={item.id === activePageId}
+                                        onClickCard={() => {
+                                            handleSelectPage(item.id);
+                                        }}
+                                    />
+                                </Card>
+                            </PreviewCardBadge>
+                        ))}
+                </ScrollableContainer>
+            </ScrollbarWrapper>
+        </Container>
+    );
+}
+export default Pages;

src/components/pagesPanel/PreviewCardBadge.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { NumberBadge, Wrapper } from './Pages.styles';
+
+interface PreviewCardBadgeProps {
+    badgeNumber?: number;
+    children: ReactNode;
+}
+
+export function PreviewCardBadge({ badgeNumber, children }: PreviewCardBadgeProps) {
+    return (
+        <Wrapper key={`card-wrapped-${badgeNumber}`}>
+            {children}
+            {badgeNumber && <NumberBadge>{badgeNumber}</NumberBadge>}
+        </Wrapper>
+    );
+}

src/components/variables/MobileVariablesTray.tsx

@@ -28,6 +28,7 @@ import { EditButtonWrapper, TrayPanelTitle, VariablesContainer } from './Variabl
 interface VariablesPanelProps {
     variables: Variable[];
     isTimelineDisplayed?: boolean;
+    isPagesPanelDisplayed?: boolean;
     isDocumentLoaded: boolean;
 }
 
@@ -39,7 +40,7 @@ const imagePanelHeight = `
     )`;
 
 function MobileVariablesPanel(props: VariablesPanelProps) {
-    const { variables, isDocumentLoaded, isTimelineDisplayed } = props;
+    const { variables, isDocumentLoaded, isTimelineDisplayed, isPagesPanelDisplayed } = props;
     const { panel } = useTheme();
 
     const { contentType, showVariablesPanel, showDataSourcePanel } = useVariablePanelContext();
@@ -94,7 +95,7 @@ function MobileVariablesPanel(props: VariablesPanelProps) {
 
     return (
         <>
-            <EditButtonWrapper isTimelineDisplayed={isTimelineDisplayed}>
+            <EditButtonWrapper isTimelineDisplayed={isTimelineDisplayed} isPagesPanelDisplayed={isPagesPanelDisplayed}>
                 <Button
                     dataTestId={getDataTestIdForSUI('mobile-variables')}
                     variant={ButtonVariant.primary}

src/components/variables/VariablesPanel.styles.ts

@@ -1,10 +1,14 @@
 import { Colors, FontSizes, ITheme } from '@chili-publish/grafx-shared-components';
 import styled from 'styled-components';
 
-export const EditButtonWrapper = styled.div<{ isTimelineDisplayed?: boolean }>`
+export const EditButtonWrapper = styled.div<{ isTimelineDisplayed?: boolean; isPagesPanelDisplayed?: boolean }>`
     position: fixed;
-    left: 2rem;
-    bottom: ${({ isTimelineDisplayed }) => (isTimelineDisplayed ? '6.5rem' : '2.5rem')};
+    left: 1rem;
+    bottom: ${({ isTimelineDisplayed, isPagesPanelDisplayed }) => {
+        if (isTimelineDisplayed) return '6.5rem';
+        if (isPagesPanelDisplayed) return '8.5rem';
+        return '2.5rem';
+    }};
 `;
 
 export const VariablesContainer = styled.div<{ height?: string }>`

src/types/types.ts

@@ -31,7 +31,7 @@
     ) => Promise<DownloadLinkResult>;
     overrideEngineUrl?: string;
     onFetchOutputSettings?: (_?: string) => Promise<UserInterfaceWithOutputSettings | null>;
     onFetchUserInterfaces?: () => Promise<AxiosResponse<PaginatedResponse<UserInterface>, any>>;
     onConnectorAuthenticationRequested?: (connectorId: string) => Promise<ConnectorAuthenticationResult>;
 }
 
@@ -190,3 +190,8 @@
     ) => Promise<DownloadLinkResult>;
     onConnectorAuthenticationRequested?: (connectorId: string) => Promise<ConnectorAuthenticationResult>;
 }
+
+export type PageSnapshot = {
+    id: string;
+    snapshot: Uint8Array;
+};

src/utils/constants.ts

@@ -1,2 +1,3 @@
 export const APP_WRAPPER_ID = 'studio-ui-application';
+export const PREVIEW_FALLBACK = 'https://studio-cdn.chiligrafx.com/shared/assets/preview-fallback-padded.svg';
 export const SESSION_USER_INTEFACE_ID_KEY = 'userInterfaceId';

yarn.lock

@@ -1312,10 +1312,10 @@
   resolved "https://npm.pkg.github.com/download/@chili-publish/grafx-shared-components/0.88.7/45252dbd33710f882c1aaf10261388490fc1d74c#45252dbd33710f882c1aaf10261388490fc1d74c"
   integrity sha512-zTI0QC4UevhkkHvKnfpSFjGYpb7fwd3Fd340CmRJ1zCTWqjmpgijgLy/guotXlGqlXMabEwf4dlaqu8Sg+J4Ew==
 
-"@chili-publish/studio-sdk@^1.17.2-rc.1":
-  version "1.17.2-rc.1"
-  resolved "https://npm.pkg.github.com/download/@chili-publish/studio-sdk/1.17.2-rc.1/11ae90d3369718b1405c22365000e6feb7f073d2#11ae90d3369718b1405c22365000e6feb7f073d2"
-  integrity sha512-1DWFKmHiNrgOOX1Bhc3oc795kwGZIwDpFgi9GemjoqGxJI5k/ul3lJLNTMYOJDFacK78AQ7bFnNigRqlF+cApg==
+"@chili-publish/studio-sdk@^1.17.2-rc.2":
+  version "1.17.2-rc.2"
+  resolved "https://npm.pkg.github.com/download/@chili-publish/studio-sdk/1.17.2-rc.2/83fb011c4f7d955f6f4911f43fc7328436b638ed#83fb011c4f7d955f6f4911f43fc7328436b638ed"
+  integrity sha512-w/tf3DilXLJKadsVkQGLePZshVOEjC+CvIAmwZYb1lWMuTFOBG619zH5PX5RTGfetcjJOahW79qVOCBiA9o/Lg==
   dependencies:
     penpal "6.1.0"