Merge branch 'master' into lanyi-branch

1 files changed, 346 insertions, 0 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateRenderPreviewWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateRenderPreviewWindow.tsx
new file mode 100644
index 000000000..9222d7349
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateRenderPreviewWindow.tsx
@@ -0,0 +1,346 @@
+import { action, computed, makeObservable, observable, runInAction } from 'mobx';
+import { observer } from 'mobx-react';
+import { ObservableReactComponent } from '../../../../ObservableReactComponent';
+import { DocCreatorMenu, LayoutType } from '../DocCreatorMenu';
+import React from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { setupMoveUpEvents, returnFalse, returnEmptyFilter } from '../../../../../../ClientUtils';
+import { emptyFunction } from '../../../../../../Utils';
+import { undoable } from '../../../../../util/UndoManager';
+import ReactLoading from 'react-loading';
+import { Doc, NumListCast, returnEmptyDoclist } from '../../../../../../fields/Doc';
+import { NumCast, StrCast } from '../../../../../../fields/Types';
+import { DefaultStyleProvider } from '../../../../StyleProvider';
+import { DocumentView } from '../../../DocumentView';
+import { Transform } from '../../../../../util/Transform';
+import { Docs, DocumentOptions } from '../../../../../documents/Documents';
+
+interface TemplatesRenderPreviewWindowProps {
+    menu: DocCreatorMenu;
+}
+
+@observer
+export class TemplatesRenderPreviewWindow extends ObservableReactComponent<TemplatesRenderPreviewWindowProps> {
+    @observable private _layout: { type: LayoutType; yMargin: number; xMargin: number; columns?: number; repeat: number } = { type: LayoutType.FREEFORM, yMargin: 10, xMargin: 10, columns: 1, repeat: 0 };
+
+    @observable private renderedDocs: Doc[] = [];
+    @observable private renderedDocCollection: Doc | undefined = undefined;
+
+    @observable private loading: boolean = false;
+
+    constructor(props: TemplatesRenderPreviewWindowProps) {
+        super(props);
+        makeObservable(this);
+        this.updateRenderedPreviewCollection();
+    }
+
+    @computed get canMakeDocs() {
+        return this._props.menu._selectedTemplate !== undefined && this._layout !== undefined;
+    }
+
+    @computed get docsToRender() {
+        if (this._props.menu.DEBUG_MODE) {
+            return [1, 2, 3, 4];
+        } else {
+            return NumListCast(this._props.menu._dataViz?.layoutDoc.dataViz_selectedRows);
+        }
+    }
+
+    @computed get rowsCount() {
+        switch (this._layout.type) {
+            case LayoutType.FREEFORM:
+                return Math.ceil(this.docsToRender.length / (this._layout.columns ?? 1)) ?? 0;
+            case LayoutType.CAROUSEL3D:
+                return 1.8;
+            default:
+                return 1;
+        }
+    }
+
+    @computed get columnsCount() {
+        switch (this._layout.type) {
+            case LayoutType.FREEFORM:
+                return this._layout.columns ?? 1;
+            case LayoutType.CAROUSEL3D:
+                return 3;
+            default:
+                return 1;
+        }
+    }
+
+    @action updateRenderedPreviewCollection = async () => {
+        this.loading = true;
+        this.renderedDocs = await this._props.menu.createDocsForPreview();
+        this.updateRenderedDocCollection();
+    };
+
+    /**
+     * Updates the preview that shows how all docs will be rendered in the chosen collection type.
+    @type the type of collection the docs should render to (ie. freeform, carousel, card)
+     */
+    updateRenderedDocCollection = () => {
+        if (!this.renderedDocs) return;
+
+        const collectionFactory = (): ((docs: Doc[], options: DocumentOptions) => Doc) => {
+            switch (this._layout.type) {
+                case LayoutType.CAROUSEL3D: return Docs.Create.Carousel3DDocument;
+                case LayoutType.FREEFORM:   return Docs.Create.FreeformDocument;
+                case LayoutType.CARD:       return Docs.Create.CardDeckDocument;
+                case LayoutType.MASONRY:    return Docs.Create.MasonryDocument;
+                case LayoutType.CAROUSEL:   return Docs.Create.CarouselDocument;
+                default:                    return Docs.Create.FreeformDocument;
+            } // prettier-ignore
+        };
+
+        const collection = collectionFactory()(this.renderedDocs, {
+            isDefaultTemplateDoc: true,
+            title: 'title',
+            backgroundColor: 'gray',
+            x: 200,
+            y: 200,
+            _width: 4000,
+            _height: 4000,
+        });
+
+        this.applyLayout(collection, this.renderedDocs);
+
+        this.renderedDocCollection = collection;
+
+        this.loading = false;
+
+        this.forceUpdate();
+    };
+
+    @action updateMargin = (input: string, xOrY: 'x' | 'y') => {
+        this._layout[`${xOrY}Margin`] = Number(input);
+        setTimeout(() => {
+            if (!this.renderedDocCollection || !this.renderedDocs) return;
+            this.applyLayout(this.renderedDocCollection, this.renderedDocs);
+        });
+    };
+
+    @action updateColumns = (input: string) => {
+        this._layout.columns = Number(input);
+        this.updateRenderedDocCollection();
+    };
+
+    applyLayout = (collection: Doc, docs: Doc[]) => {
+        const { horizontalSpan, verticalSpan } = this.previewInfo;
+        collection._height = verticalSpan;
+        collection._width = horizontalSpan;
+        collection.layout_fitWidth = true;
+        collection.freeform_fitContentsToBox = true;
+
+        const columns = (this._layout.columns ?? this.columnsCount) || 1;
+        const xGap = this._layout.xMargin;
+        const yGap = this._layout.yMargin;
+        const startX = -collection._width / 2;
+        const startY = -collection._height / 2;
+        const docHeight = NumCast(docs[0]?._height);
+        const docWidth = NumCast(docs[0]?._width);
+
+        let i = 0;
+        let docsChanged = 0;
+        let curX = startX;
+        let curY = startY;
+
+        while (docsChanged < docs.length) {
+            while (i < columns && docsChanged < docs.length) {
+                docs[docsChanged].x = curX;
+                docs[docsChanged].y = curY;
+                docs[docsChanged].layout_fitWidth = false;
+                curX += docWidth + xGap;
+                ++docsChanged;
+                ++i;
+            }
+            i = 0;
+            curX = startX;
+            curY += docHeight + yGap;
+        }
+    };
+
+    @computed
+    get previewInfo() {
+        const docHeight = NumCast(this.renderedDocs[0]?._height);
+        const docWidth = NumCast(this.renderedDocs[0]?._width);
+        const layout = this._layout;
+        return {
+            docHeight: docHeight,
+            docWidth: docWidth,
+            horizontalSpan: (docWidth + layout.xMargin) * this.columnsCount - layout.xMargin,
+            verticalSpan: (docHeight + layout.yMargin) * this.rowsCount - layout.yMargin,
+        };
+    }
+
+    get layoutConfigOptions() {
+        const optionInput = (icon: string, func: (input: string) => void, def?: number, key?: string, noMargin?: boolean) => {
+            return (
+                <div className="docCreatorMenu-option-container small no-margin" key={key} style={{ marginTop: noMargin ? '0px' : '' }}>
+                    <div className="docCreatorMenu-option-title config layout-config">
+                        <FontAwesomeIcon icon={icon as IconProp} />
+                    </div>
+                    <input defaultValue={def} onInput={e => func(e.currentTarget.value)} className="docCreatorMenu-input config layout-config" />
+                </div>
+            );
+        };
+
+        switch (this._layout.type) {
+            case LayoutType.FREEFORM:
+                return (
+                    <div className="docCreatorMenu-configuration-bar">
+                        {optionInput('arrows-up-down', (input: string) => this.updateMargin(input, 'y'), this._layout.xMargin, '2')}
+                        {optionInput('arrows-left-right', (input: string) => this.updateMargin(input, 'x'), this._layout.xMargin, '3')}
+                        {optionInput('table-columns', this.updateColumns, this._layout.columns, '4', true)}
+                    </div>
+                );
+            default:
+                break;
+        }
+    }
+
+    layoutPanelWidth = () => this._props.menu._menuDimensions.width - 80;
+    layoutPanelHeight = () => this._props.menu._menuDimensions.height - 105;
+    layoutScreenToLocalXf = () => new Transform(-this._props.menu._pageX - 5, -this._props.menu._pageY - 35, 1);
+
+    layoutPreviewContents = action(() => {
+        return this.loading ? (
+            <div className="docCreatorMenu-layout-preview-window-wrapper loading">
+                <div className="loading-spinner">
+                    <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
+                </div>
+            </div>
+        ) : !this.renderedDocCollection ? null : (
+            <div className="docCreatorMenu-layout-preview-window-wrapper">
+                <DocumentView
+                    Document={this.renderedDocCollection}
+                    isContentActive={emptyFunction}
+                    addDocument={returnFalse}
+                    moveDocument={returnFalse}
+                    removeDocument={returnFalse}
+                    PanelWidth={this.layoutPanelWidth}
+                    PanelHeight={this.layoutPanelHeight}
+                    ScreenToLocalTransform={this.layoutScreenToLocalXf}
+                    renderDepth={5}
+                    whenChildContentsActiveChanged={emptyFunction}
+                    focus={emptyFunction}
+                    styleProvider={DefaultStyleProvider}
+                    addDocTab={this._props.menu._props.addDocTab}
+                    pinToPres={emptyFunction}
+                    childFilters={returnEmptyFilter}
+                    childFiltersByRanges={returnEmptyFilter}
+                    searchFilterDocs={returnEmptyDoclist}
+                    hideDecorations={true}
+                />
+            </div>
+        );
+    });
+
+    selectionBox = (width: number, height: number, icon: string, specClass?: string, options?: JSX.Element[], manual?: boolean): JSX.Element => {
+        return (
+            <div className="docCreatorMenu-option-container">
+                <div className={`docCreatorMenu-option-title config ${specClass}`} style={{ width: width * 0.4, height: height }}>
+                    <FontAwesomeIcon icon={icon as IconProp} />
+                </div>
+                {manual ? (
+                    <input className={`docCreatorMenu-input config ${specClass}`} style={{ width: width * 0.6, height: height }} />
+                ) : (
+                    <select className={`docCreatorMenu-input config ${specClass}`} style={{ width: width * 0.6, height: height }}>
+                        {options}
+                    </select>
+                )}
+            </div>
+        );
+    };
+
+    layoutOption = (option: LayoutType, optStyle?: object, specialFunc?: () => void) => {
+        return (
+            <div
+                className="docCreatorMenu-dropdown-option"
+                style={optStyle}
+                onPointerDown={e =>
+                    this._props.menu.setUpButtonClick(e, () => {
+                        specialFunc?.();
+                        runInAction(() => {
+                            this._layout.type = option;
+                            this.updateRenderedDocCollection();
+                        });
+                    })
+                }>
+                {option}
+            </div>
+        );
+    };
+
+    get optionsMenuContents() {
+        const repeatOptions = [0, 1, 2, 3, 4, 5];
+
+        return (
+            <div className="docCreatorMenu-menu-container">
+                <div className="docCreatorMenu-option-container layout">
+                    <div className="docCreatorMenu-dropdown-hoverable">
+                        <div className="docCreatorMenu-option-title">{this._layout.type ? this._layout.type.toUpperCase() : 'Choose Layout'}</div>
+                        <div className="docCreatorMenu-dropdown-content">
+                            {this.layoutOption(LayoutType.FREEFORM, undefined, () => {
+                                if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length));
+                            })}
+                            {this.layoutOption(LayoutType.CAROUSEL)}
+                            {this.layoutOption(LayoutType.CAROUSEL3D)}
+                            {this.layoutOption(LayoutType.MASONRY)}
+                        </div>
+                    </div>
+                </div>
+                {this._layout.type ? this.layoutConfigOptions : null}
+                {this.layoutPreviewContents()}
+                {this.selectionBox(
+                    60,
+                    20,
+                    'repeat',
+                    undefined,
+                    repeatOptions.map(num => <option key={num} onPointerDown={() => (this._layout.repeat = num)}>{`${num}x`}</option>)
+                )}
+                <hr className="docCreatorMenu-option-divider" />
+                <div className="docCreatorMenu-general-options-container">
+                    <button
+                        className="docCreatorMenu-save-layout-button"
+                        onPointerDown={e =>
+                            setupMoveUpEvents(
+                                this,
+                                e,
+                                returnFalse,
+                                emptyFunction,
+                                undoable(clickEv => {
+                                    clickEv.stopPropagation();
+                                    //previous implementation deprecated; return later to add or scrap
+                                    return;
+                                }, 'save layout')
+                            )
+                        }>
+                        <FontAwesomeIcon icon="floppy-disk" />
+                    </button>
+                    <button
+                        className="docCreatorMenu-create-docs-button"
+                        style={{ backgroundColor: this.canMakeDocs ? '' : 'rgb(155, 155, 155)', border: this.canMakeDocs ? '' : 'solid 2px rgb(180, 180, 180)' }}
+                        onPointerDown={e =>
+                            setupMoveUpEvents(
+                                this,
+                                e,
+                                returnFalse,
+                                emptyFunction,
+                                undoable(clickEv => {
+                                    clickEv.stopPropagation();
+                                    this.renderedDocCollection && this._props.menu.addRenderedCollectionToMainview(this.renderedDocCollection);
+                                }, 'make docs')
+                            )
+                        }>
+                        <FontAwesomeIcon icon="plus" />
+                    </button>
+                </div>
+            </div>
+        );
+    }
+
+    render() {
+        return this.optionsMenuContents;
+    }
+}