work on making preview rendering more responsive (only updating doc positions rather than making new collection)

2 files changed, 60 insertions, 80 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
index ec050289a..5b9586259 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
@@ -634,6 +634,8 @@
     height: calc(100% - 30px);
     border: 1px solid rgb(180, 180, 180);
     border-radius: 5px;
+    -ms-overflow-style: none; 
+    scrollbar-width: none;
 
     .docCreatorMenu-option-container{
         width: 180px;
@@ -686,6 +688,7 @@
 }
 
 .docCreatorMenu-layout-preview-window-wrapper {
+    flex: 0 0 auto;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -693,6 +696,8 @@
     height: 100%;
     position: relative;
     padding: 0px;
+    margin-left: 20px;
+    margin-right: 20px;
 
     &:hover .docCreatorMenu-zoom-button-container {
         display: block;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 8977a282e..c44fb2ee2 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -48,6 +48,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     private _ref: HTMLDivElement | null = null;
 
     @observable _fullyRenderedDocs: Doc[] = [];
+    @observable _renderedDocCollectionPreview: Doc | undefined = undefined;
     @observable _renderedDocCollection: Doc | undefined = undefined;
 
     @observable _templateDocs: Doc[] = [];
@@ -123,7 +124,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             case LayoutType.GRID:
                 return Math.ceil(this.docsToRender.length / (this._layout.columns ?? 1)) ?? 0;
             case LayoutType.CAROUSEL3D:
-                return 1;
+                return 1.75;
             default:
                 return 1;
         }
@@ -139,7 +140,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             case LayoutType.GRID:
                 return this._layout.columns ?? 0;
             case LayoutType.CAROUSEL3D:
-                return 1.75;
+                return 2.85;
             default:
                 return 1;
         }
@@ -242,6 +243,10 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 doc ? this._shouldDisplay && this.closeMenu() : !this._shouldDisplay && this.openMenu();
             }
         );
+        // this._disposers.layout = reaction(
+        //     () => this._layout,
+        //     layout => { this.updateRenderedDocCollection(); }
+        // );
         //this._disposers.fields = reaction(() => this._dataViz?.axes, cols => this._selectedCols = cols?.map(col => { return {title: col, type: '', desc: ''}}))
     }
 
@@ -1129,12 +1134,23 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
     @action updateXMargin = (input: string) => {
         this._layout.xMargin = Number(input);
+        setTimeout(() => {
+            if (!this._renderedDocCollection || !this._fullyRenderedDocs) return;
+            this.applyLayout(this._renderedDocCollection, this._fullyRenderedDocs);
+            this.updatePreview(this._renderedDocCollection);
+        });
     };
     @action updateYMargin = (input: string) => {
         this._layout.yMargin = Number(input);
+        setTimeout(() => {
+            if (!this._renderedDocCollection || !this._fullyRenderedDocs) return;
+            this.applyLayout(this._renderedDocCollection, this._fullyRenderedDocs);
+            this.updatePreview(this._renderedDocCollection);
+        });
     };
     @action updateColumns = (input: string) => {
         this._layout.columns = Number(input);
+        this.updateRenderedDocCollection();
     };
 
     get layoutConfigOptions() {
@@ -1176,6 +1192,10 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     screenToLocalTransform = () => this._props.ScreenToLocalTransform();
 
     applyLayout = (collection: Doc, docs: Doc[]) => {
+        const { horizontalSpan, verticalSpan } = this.previewInfo;
+        collection._height = verticalSpan;
+        collection._width = horizontalSpan;
+
         const layout = this._layout;
         const columns: number = layout.columns ?? this.columnsCount;
         const xGap: number = layout.xMargin;
@@ -1209,6 +1229,31 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         }
     };
 
+    addDocAsResult = (doc: Doc) => {
+        doc.x = this._pageX;
+        doc.y = this._pageY;
+        this.closeMenu();
+        //!!! will need to add to main collection when I refactor 
+    }
+
+    @computed
+    get previewInfo(){
+        const docHeight: number = Number(this._fullyRenderedDocs[0]._height);
+        const docWidth: number = Number(this._fullyRenderedDocs[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,
+        }
+    }
+
+    updatePreview = (collection: Doc) => {
+        const wrapper: Doc = Docs.Create.FreeformDocument([collection], { _height: NumListCast(collection._height)[0], _width: NumListCast(collection._width)[0], title: ''});
+        this._renderedDocCollectionPreview = wrapper;
+    }
+
     /**
      * 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)
@@ -1216,13 +1261,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     updateRenderedDocCollection = () => {
         if (!this._fullyRenderedDocs) return;
 
-        const layout = this._layout;
-
-        const docHeight: number = Number(this._fullyRenderedDocs[0]._height);
-        const docWidth: number = Number(this._fullyRenderedDocs[0]._width);
-        const horizontalSpan: number = (docWidth + layout.xMargin) * (this.columnsCount) - layout.xMargin;
-        const verticalSpan: number = (docHeight + layout.yMargin) * (this.rowsCount) - layout.yMargin;
-        const largerSpan: number = horizontalSpan > verticalSpan ? horizontalSpan : verticalSpan;
+        const { horizontalSpan, verticalSpan } = this.previewInfo;
+        //const largerSpan: number = horizontalSpan > verticalSpan ? horizontalSpan : verticalSpan;
 
         const collectionFactory = (): (docs: Doc[], options: DocumentOptions) => Doc => {
             switch (this._layout.type) {
@@ -1237,8 +1277,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         const docWithBasicOpts: Doc = collectionFactory()(this._fullyRenderedDocs, {
             isDefaultTemplateDoc: true,
-            x: this._pageX,
-            y: this._pageY,
+            x: 40000,
+            y: 40000,
             _height: verticalSpan,
             _width: horizontalSpan,
             title: 'title',
@@ -1252,32 +1292,18 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
         mainCollection.addDocument(docWithBasicOpts);
 
-        this._renderedDocCollection = wrapper;
+        this._renderedDocCollectionPreview = wrapper;
+        this._renderedDocCollection = docWithBasicOpts;
     }
 
     layoutPreviewContents = (outerSpan: number, altLayout?: DataVizTemplateLayout, small: boolean = false, id?: number) => {
         const doc: Doc | undefined = altLayout ? altLayout.template : this._selectedTemplate;
         if (!doc) return;
 
-        const layout = altLayout ? altLayout.layout : this._layout;
-
-        const docWidth: number = Number(doc._width);
-        const docHeight: number = Number(doc._height);
-        const horizontalSpan: number = (docWidth + layout.xMargin) * (altLayout ? altLayout.columns : this.columnsCount) - layout.xMargin;
-        const verticalSpan: number = (docHeight + layout.yMargin) * (altLayout ? altLayout.rows : this.rowsCount) - layout.yMargin;
-        const largerSpan: number = horizontalSpan > verticalSpan ? horizontalSpan : verticalSpan;
-        
-        const scaledDown = (input: number) => {
-            return input / ((largerSpan / outerSpan) * this._layoutPreviewScale);
-        };
-        const fontSize = Math.min(scaledDown(docWidth / 3), scaledDown(docHeight / 3));
-
-
-
         return (
             <div className="docCreatorMenu-layout-preview-window-wrapper" id={String(id) ?? undefined}>
                 <CollectionFreeFormView
-                    Document={this._renderedDocCollection ?? new Doc()}
+                    Document={this._renderedDocCollectionPreview ?? new Doc()}
                     docViewPath={returnEmptyDocViewList}
                     childLayoutTemplate={() => Cast(doc.childLayoutTemplate, Doc, null)}
                     isContentActive={emptyFunction}
@@ -1305,57 +1331,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     xPadding={0}
                     yPadding={0}
                 />
-                {/* <div className="docCreatorMenu-zoom-button-container">
-                    <button className="docCreatorMenu-zoom-button" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => (this._layoutPreviewScale *= 1.25)))}>
-                        <FontAwesomeIcon icon={'minus'} />
-                    </button>
-                    <button className="docCreatorMenu-zoom-button zoom-in" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => (this._layoutPreviewScale *= 0.75)))}>
-                        <FontAwesomeIcon icon={'plus'} />
-                    </button>
-                    {altLayout ? (
-                        <button className="docCreatorMenu-zoom-button trash" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._savedLayouts.splice(this._savedLayouts.indexOf(altLayout), 1)))}>
-                            <FontAwesomeIcon icon={'trash'} />
-                        </button>
-                    ) : null}
-                </div>
-                {
-                    <div
-                        id={String(id) ?? undefined}
-                        className={`docCreatorMenu-layout-preview-window ${small ? 'small' : ''}`}
-                        style={{
-                            gridTemplateColumns: `repeat(${altLayout ? altLayout.columns : this.columnsCount}, ${scaledDown(docWidth)}px`,
-                            gridTemplateRows: `${scaledDown(docHeight)}px`,
-                            gridAutoRows: `${scaledDown(docHeight)}px`,
-                            rowGap: `${scaledDown(layout.yMargin)}px`,
-                            columnGap: `${scaledDown(layout.xMargin)}px`,
-                        }}>
-                        {this._layout.type === LayoutType.Stacked ? (
-                            <div
-                                className="docCreatorMenu-layout-preview-item"
-                                style={{
-                                    width: scaledDown(docWidth),
-                                    height: scaledDown(docHeight),
-                                    fontSize: fontSize,
-                                }}>
-                                All
-                            </div>
-                        ) : (
-                            this.docsToRender.map(num => (
-                                <div
-                                    onMouseEnter={() => this._dataViz?.setSpecialHighlightedRow(num)}
-                                    onMouseLeave={() => this._dataViz?.setSpecialHighlightedRow(undefined)}
-                                    className="docCreatorMenu-layout-preview-item"
-                                    style={{
-                                        width: scaledDown(docWidth),
-                                        height: scaledDown(docHeight),
-                                        fontSize: fontSize,
-                                    }}>
-                                    {num}
-                                </div>
-                            ))
-                        )}
-                    </div>
-                } */}
             </div>
         );
     };
@@ -1471,7 +1446,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                     clickEv.stopPropagation();
                                     if (!this._selectedTemplate) return;
                                     const templateInfo: DataVizTemplateInfo = { doc: this._selectedTemplate, layout: this._layout, referencePos: { x: this._pageX + 450, y: this._pageY }, columns: this.columnsCount };
-                                    this._fullyRenderedDocs = this._dataViz?.createDocsFromTemplate(templateInfo) ?? [];
+                                    this._renderedDocCollection && this.addDocAsResult(this._renderedDocCollection);
                                 }, 'make docs')
                             )
                         }>