UI work

1 files changed, 28 insertions, 60 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index d214a7954..f0f6cafcc 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -33,6 +33,7 @@ import { TemplateFieldSize, TemplateFieldType, TemplateLayouts } from './Templat
 import { TemplateManager } from './TemplateManager';
 import { Template } from './Template';
 import { Field, FieldContentType } from './FieldTypes/Field';
+import { TabDocView } from '../../../collections/TabDocView';
 
 export enum LayoutType {
     FREEFORM = 'Freeform',
@@ -115,8 +116,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         templates.forEach(template => template.renderUpdates());
         this._suggestedTemplatePreviews = templates.map(template => {
             const doc = template.mainField.renderedDoc();
-            const wrapper: Doc = Docs.Create.FreeformDocument([doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''});
-            return {doc: wrapper, template: template};
+            //const wrapper: Doc = Docs.Create.FreeformDocument([doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''});
+            return {doc: doc, template: template};
         });
     };
     @action setSuggestedTemplates = (templates: Template[]) => {
@@ -133,7 +134,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             case LayoutType.FREEFORM:
                 return Math.ceil(this.docsToRender.length / (this._layout.columns ?? 1)) ?? 0;
             case LayoutType.CAROUSEL3D:
-                return 1.6;
+                return 1.67;
             default:
                 return 1;
         }
@@ -144,7 +145,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             case LayoutType.FREEFORM:
                 return this._layout.columns ?? 0;
             case LayoutType.CAROUSEL3D:
-                return 2.7;
+                return 3;
             default:
                 return 1;
         }
@@ -719,25 +720,18 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
     @action setExpandedView = (doc: Doc | undefined) => {
         if (doc) {
-            this._expandedPreview = Docs.Create.FreeformDocument([doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''});
+            this._expandedPreview = doc; //Docs.Create.FreeformDocument([doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''});
         } else {
             this._expandedPreview = undefined;
         }
     };
 
     get editingWindow(){
-        const doc = this._expandedPreview ?? new Doc();
-        const rendered = 
+        const rendered = !this._expandedPreview ? null :
             <div className="docCreatorMenu-expanded-template-preview">
-                <CollectionFreeFormView
-                    Document={this._expandedPreview ?? new Doc()}
-                    docViewPath={returnEmptyDocViewList}
-                    childLayoutTemplate={() => Cast(doc.childLayoutTemplate, Doc, null)}
+                <DocumentView
+                    Document={this._expandedPreview}
                     isContentActive={emptyFunction}
-                    isAnyChildContentActive={() => true}
-                    select={emptyFunction}
-                    isSelected={returnFalse}
-                    fieldKey={Doc.LayoutFieldKey(doc)}
                     addDocument={returnFalse}
                     moveDocument={returnFalse}
                     removeDocument={returnFalse}
@@ -748,15 +742,14 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     whenChildContentsActiveChanged={emptyFunction}
                     focus={emptyFunction}
                     styleProvider={DefaultStyleProvider}
-                    addDocTab={this._props.addDocTab}
+                    addDocTab={DocumentViewInternal.addDocTabFunc}
                     // eslint-disable-next-line no-use-before-define
                     pinToPres={() => undefined}
                     childFilters={returnEmptyFilter}
                     childFiltersByRanges={returnEmptyFilter}
                     searchFilterDocs={returnEmptyDoclist}
-                    fitContentsToBox={returnTrue}
-                    xPadding={0}
-                    yPadding={0}
+                    fitContentsToBox={returnFalse}
+                    fitWidth={returnFalse}
                 />
             </div>
 
@@ -825,20 +818,14 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                                 <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this._templateDocs.push(template.mainField.renderedDoc()))}>
                                                     <FontAwesomeIcon icon="plus" color="white" />
                                                 </button>
-                                                <CollectionFreeFormView
+                                                <DocumentView
                                                     Document={doc}
-                                                    docViewPath={returnEmptyDocViewList}
-                                                    childLayoutTemplate={() => Cast(doc.childLayoutTemplate, Doc, null)}
-                                                    isContentActive={returnFalse}
-                                                    isAnyChildContentActive={() => true}
-                                                    select={emptyFunction}
-                                                    isSelected={returnFalse}
-                                                    fieldKey={Doc.LayoutFieldKey(doc)}
+                                                    isContentActive={emptyFunction}
                                                     addDocument={returnFalse}
                                                     moveDocument={returnFalse}
                                                     removeDocument={returnFalse}
-                                                    PanelWidth={() => 100}
-                                                    PanelHeight={() => 100}
+                                                    PanelWidth={() => 111}
+                                                    PanelHeight={() => 111}
                                                     ScreenToLocalTransform={() => new Transform(-this._pageX - 5,-this._pageY - 35, 1)}
                                                     renderDepth={1}
                                                     whenChildContentsActiveChanged={emptyFunction}
@@ -850,9 +837,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                                     childFilters={returnEmptyFilter}
                                                     childFiltersByRanges={returnEmptyFilter}
                                                     searchFilterDocs={returnEmptyDoclist}
-                                                    fitContentsToBox={returnTrue}
-                                                    xPadding={0}
-                                                    yPadding={0}
+                                                    fitContentsToBox={returnFalse}
+                                                    fitWidth={returnFalse}
+                                                    hideDecorations={true}
                                                     />
                                             </div>
                                         ))
@@ -946,7 +933,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         setTimeout(() => {
             if (!this._renderedDocCollection || !this._fullyRenderedDocs) return;
             this.applyLayout(this._renderedDocCollection, this._fullyRenderedDocs);
-            this.updatePreview(this._renderedDocCollection);
         });
     };
     @action updateYMargin = (input: string) => {
@@ -954,7 +940,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         setTimeout(() => {
             if (!this._renderedDocCollection || !this._fullyRenderedDocs) return;
             this.applyLayout(this._renderedDocCollection, this._fullyRenderedDocs);
-            this.updatePreview(this._renderedDocCollection);
         });
     };
     @action updateColumns = (input: string) => {
@@ -1052,11 +1037,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         }
     }
 
-    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)
@@ -1096,12 +1076,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         this.applyLayout(collection, this._fullyRenderedDocs);
 
-        const wrapper: Doc = Docs.Create.FreeformDocument([collection], { _height: 200, _width: 200, title: ''});
-
-        const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
-        mainCollection.addDocument(collection);
-
-        this._renderedDocCollectionPreview = wrapper;
         this._renderedDocCollection = collection;
     }
 
@@ -1109,22 +1083,16 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         const doc: Doc | undefined = altLayout ? altLayout.template : this._fullyRenderedDocs[0]; //!!! might cause a slow down
         if (!doc) return;
 
-        return (
+        return !this._renderedDocCollection? null : (
             <div className="docCreatorMenu-layout-preview-window-wrapper" id={String(id) ?? undefined}>
-                <CollectionFreeFormView
-                    Document={this._renderedDocCollectionPreview ?? new Doc()}
-                    docViewPath={returnEmptyDocViewList}
-                    childLayoutTemplate={() => Cast(doc.childLayoutTemplate, Doc, null)}
-                    isContentActive={returnFalse}
-                    isAnyChildContentActive={() => true}
-                    select={emptyFunction}
-                    isSelected={returnFalse}
-                    fieldKey={Doc.LayoutFieldKey(doc)}
+                <DocumentView
+                    Document={this._renderedDocCollection}
+                    isContentActive={emptyFunction}
                     addDocument={returnFalse}
                     moveDocument={returnFalse}
                     removeDocument={returnFalse}
-                    PanelWidth={() => this._menuDimensions.width - 10}
-                    PanelHeight={() => this._menuDimensions.height - 60}
+                    PanelWidth={() => this._menuDimensions.width - 75}
+                    PanelHeight={() => this._menuDimensions.height - 105}
                     ScreenToLocalTransform={() => new Transform(-this._pageX - 5,-this._pageY - 35, 1)}
                     renderDepth={5}
                     whenChildContentsActiveChanged={emptyFunction}
@@ -1136,9 +1104,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     childFilters={returnEmptyFilter}
                     childFiltersByRanges={returnEmptyFilter}
                     searchFilterDocs={returnEmptyDoclist}
-                    fitContentsToBox={returnTrue}
-                    xPadding={0}
-                    yPadding={0}
+                    fitContentsToBox={returnFalse}
+                    fitWidth={returnFalse}
+                    hideDecorations={true}
                 />
             </div>
         );