diff options
Diffstat (limited to 'src')
4 files changed, 169 insertions, 71 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss index d4cde7aa3..b849c044d 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss @@ -292,6 +292,7 @@ display: flex; flex-direction: column; justify-content: flex-start; + color: black; position: relative; width: 100%; height: 100%; @@ -324,6 +325,7 @@ height: 113px; margin-top: 10px; margin-left: 10px; + color: none; border: 1px solid rgb(163, 163, 163); border-radius: 5px; box-shadow: 5px 5px rgb(29, 29, 31); @@ -423,6 +425,7 @@ align-items: center; overflow-y: scroll; position: relative; + color: black; height: 125px; width: calc(100% - 10px); -ms-overflow-style: none; @@ -691,10 +694,11 @@ display: flex; justify-content: center; align-items: center; - width: 100%; - height: 100%; + width: calc(100% - 50px); + height: calc(100% - 50px); position: relative; - padding: 0px; + border: 1px solid rgb(180, 180, 180); + padding: 10px; margin-left: 20px; margin-right: 20px; 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> ); diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx index 70596632a..cfe4d2632 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx @@ -1,4 +1,5 @@ import { Doc } from "../../../../../../fields/Doc"; +import { ScriptField } from "../../../../../../fields/ScriptField"; import { Col } from "../DocCreatorMenu"; import { TemplateFieldSize, TemplateFieldType, TemplateLayouts } from "../TemplateBackend"; import { FieldDimensions, FieldSettings } from "./Field"; @@ -24,12 +25,15 @@ export class FieldUtils { doc._height = oldDoc ? oldDoc.height : parentDimensions.height; doc._width = oldDoc ? oldDoc.width : parentDimensions.width; doc.backgroundColor = oldDoc ? oldDoc.backgroundColor : opts.backgroundColor ?? ''; - doc._layout_borderRounding = oldDoc ? oldDoc.layout_borderRounding : `${opts.cornerRounding ?? 0}px`; + doc._layout_borderRounding = ScriptField.MakeFunction(`${(opts.cornerRounding ?? 0) * parentDimensions.width}px`); doc.borderColor = oldDoc ? oldDoc.borderColor : opts.borderColor; doc.borderWidth = oldDoc ? oldDoc.borderWidth : opts.borderWidth; doc.opacity = oldDoc ? oldDoc.opacity : opts.opacity; doc._rotation = oldDoc ? oldDoc._rotation : opts.rotation; doc.hCentering = oldDoc ? oldDoc.hCentering : opts.contentXCentering; + doc.nativeWidth = parentDimensions.width; + doc.nativeHeight = parentDimensions.height; + doc._layout_nativeDimEditable = true; }; public static calculateFontSize = (contWidth: number, contHeight: number, text: string, uppercase: boolean): number => { diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx index dbb332734..20080e7b1 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx @@ -338,6 +338,76 @@ export class TemplateLayouts { ], }; + public static FourField005: FieldSettings = { + title: 'fourfield04', + viewType: ViewType.FREEFORM, + tl: [0,0], + br: [400,700], + opts: { + backgroundColor: '#6CCAF0', + borderColor: '#1088C3', + borderWidth: '10', + }, + subfields: [ + { + viewType: ViewType.STATIC, + tl: [-0.8, -.9], + br: [-.05, .15], + types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL], + sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], + description: 'A small text field for a title that categorizes the rest of the content.', + opts: { + borderColor: 'yellow', + borderWidth: '8', + contentXCentering: "h-center", + backgroundColor: 'transparent', + }, + }, + { + viewType: ViewType.STATIC, + tl: [-0.8, -.9], + br: [0.8, -.5], + types: [TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], + description: 'A small text field for a title that categorizes the rest of the content.', + opts: { + borderColor: 'yellow', + borderWidth: '8', + contentXCentering: "h-center", + backgroundColor: 'transparent', + }, + }, + { + viewType: ViewType.STATIC, + tl: [-0.8, -.9], + br: [0.8, -.5], + types: [TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], + description: 'A small text field for a title that categorizes the rest of the content.', + opts: { + borderColor: 'yellow', + borderWidth: '8', + contentXCentering: "h-center", + backgroundColor: 'transparent', + }, + }, + { + viewType: ViewType.STATIC, + tl: [-0.8, -.9], + br: [0.8, -.5], + types: [TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], + description: 'A small text field for a title that categorizes the rest of the content.', + opts: { + borderColor: 'yellow', + borderWidth: '8', + contentXCentering: "h-center", + backgroundColor: 'transparent', + }, + }, + ] + } + public static FourFieldCarousel: FieldSettings = { title: 'title_fourfieldcarousel', viewType: ViewType.FREEFORM, @@ -422,17 +492,29 @@ export class TemplateLayouts { }, subfields: [ { - viewType: ViewType.STATIC, + viewType: ViewType.FREEFORM, tl: [-0.66, -0.747], br: [0.66, 0.247], - types: [TemplateFieldType.VISUAL], - sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], description: 'A medium to large field for visual content that is the central focus.', opts: { borderColor: 'yellow', borderWidth: '8', + backgroundColor: '#DDD3A9', rotation: 45, }, + subfields: [ + { + viewType: ViewType.STATIC, + tl: [-1.25, -1.25], + br: [1.25, 1.25], + types: [TemplateFieldType.VISUAL], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], + description: 'A medium to large field for visual content that is the central focus.', + opts: { + rotation: -45, + }, + }, + ] }, { viewType: ViewType.STATIC, @@ -459,40 +541,80 @@ export class TemplateLayouts { }, }, { - viewType: ViewType.DEC, + viewType: ViewType.FREEFORM, tl: [0.2, -1.32], br: [1.8, -0.66], opts: { backgroundColor: '#CEB155', rotation: 45, }, + subfields: [ + { + viewType: ViewType.DEC, + tl: [-1, -.7], + br: [1, -.625], + opts: { + backgroundColor: 'yellow', + }, + }, + ] }, { - viewType: ViewType.DEC, + viewType: ViewType.FREEFORM, tl: [-1.8, -1.32], br: [-0.2, -0.66], opts: { backgroundColor: '#CEB155', rotation: 135, }, + subfields: [ + { + viewType: ViewType.DEC, + tl: [-1, -.7], + br: [1, -.625], + opts: { + backgroundColor: 'yellow', + }, + }, + ] }, { - viewType: ViewType.DEC, + viewType: ViewType.FREEFORM, tl: [0.33, 0.75], br: [1.66, 1.25], opts: { backgroundColor: '#CEB155', rotation: 135, }, + subfields: [ + { + viewType: ViewType.DEC, + tl: [-1, -.7], + br: [1, -.625], + opts: { + backgroundColor: 'yellow', + }, + }, + ] }, { - viewType: ViewType.DEC, + viewType: ViewType.FREEFORM, tl: [-1.66, 0.75], br: [-0.33, 1.25], opts: { backgroundColor: '#CEB155', rotation: 45, }, + subfields: [ + { + viewType: ViewType.DEC, + tl: [-1, -.7], + br: [1, -.625], + opts: { + backgroundColor: 'yellow', + }, + }, + ] }, ], }; |