diff options
Diffstat (limited to 'src')
9 files changed, 194 insertions, 95 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index 2324006f7..5ff809170 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -1027,10 +1027,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { } } - // doc = () => { - // return Docs.Create.FreeformDocument([], { _height: 200, _width: 200, title: 'title'}); - // } - screenToLocalTransform = () => this._props.ScreenToLocalTransform(); applyLayout = (collection: Doc, docs: Doc[]) => { diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/EditableTemplateDoc.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/EditableTemplateDoc.tsx new file mode 100644 index 000000000..5ec27f338 --- /dev/null +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/EditableTemplateDoc.tsx @@ -0,0 +1,22 @@ +import { Doc } from "../../../../../fields/Doc"; +import { SubCollectionViewProps } from "../../../collections/CollectionSubView"; +import { CollectionFreeFormView } from "../../../collections/collectionFreeForm"; +import { TemplateManager } from "./TemplateManager"; +import { TemplateLayouts } from "./TemplateBackend"; +import { Template } from "./Template"; + +class EditableTemplateDoc extends CollectionFreeFormView { + + template: Template; + + constructor(props: SubCollectionViewProps, template: Template){ + super(props); + this.template = template; + } + + addDocumenta = (newBox: Doc | Doc[]): boolean => { + this.addDocument(newBox); + + return true; + } +}
\ No newline at end of file diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx index 68cf027b0..c6f07d6c6 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx @@ -36,6 +36,11 @@ export class DynamicField implements Field { setTitle = (title: string) => { this.title = title }; getTitle = () => { return this.title }; + // addField = () => { + // const newField: Field = new DynamicField(); + // //this.subfields.pu + // } + get getSubfields() { return this.subfields }; get getAllSubfields() { let fields: Field[] = []; diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx index ebd8f0f6c..5eaa7381c 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx @@ -17,7 +17,7 @@ export interface Field { applyAttributes: (field: Field) => void; renderedDoc: () => Doc; matches: (cols: Col[]) => number[]; - updateRenderedDoc: (oldDoc?: Doc) => Doc; + updateRenderedDoc: (oldDoc?: Doc) => void; } export type FieldSettings = { @@ -52,16 +52,16 @@ export type FieldDimensions = { export interface FieldOpts { backgroundColor?: string; - color?: string; - cornerRounding?: number; + text_fontColor?: string; + _layout_borderRounding?: number; borderWidth?: string; borderColor?: string; - contentXCentering?: 'h-left' | 'h-center' | 'h-right'; + hCentering?: 'h-left' | 'h-center' | 'h-right'; contentYCentering?: 'top' | 'center' | 'bottom'; opacity?: number; - rotation?: number; + _rotation?: number; //animation?: boolean; - fontBold?: boolean; - fontTransform?: 'uppercase' | 'lowercase'; + contentBold?: boolean; + textTransform?: 'uppercase' | 'lowercase'; fieldViewType?: 'freeform' | 'stacked'; -}
\ No newline at end of file +} diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx index 3886774d2..9ae04d086 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx @@ -16,6 +16,15 @@ export class FieldUtils { return { width, height, coord }; }; + + + public static textProperties: string[] = [ + "textTransform", + "contentBold", + "text_fontColor", + "hCentering", + ] + public static applyBasicOpts = (doc: Doc, parentDimensions: FieldDimensions, settings: FieldSettings, oldDoc?: Doc) => { const opts = settings.opts; doc.isDefaultTemplateDoc = oldDoc ? oldDoc.isDefaultTemplateDoc : true; @@ -25,12 +34,12 @@ 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 = !opts.cornerRounding ? '0px' : ScriptField.MakeFunction(`${opts.cornerRounding} * this.width + 'px'`); + doc._layout_borderRounding = !opts._layout_borderRounding ? '0px' : ScriptField.MakeFunction(`${opts._layout_borderRounding} * this.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._rotation = oldDoc ? oldDoc._rotation : opts._rotation; + doc.hCentering = oldDoc ? oldDoc.hCentering : opts.hCentering; doc.nativeWidth = parentDimensions.width; doc.nativeHeight = parentDimensions.height; doc._layout_nativeDimEditable = true; diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx index e55c127e7..db54f1397 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx @@ -7,6 +7,8 @@ import { Template } from "../Template"; import { DynamicField } from "./DynamicField"; import { FieldUtils } from "./FieldUtils"; import { Field, FieldContentType, FieldDimensions, FieldSettings, ViewType } from "./Field"; +import { indexOf } from "lodash"; +import { ScriptField } from "../../../../../../fields/ScriptField"; export class StaticField { private content: string; @@ -14,6 +16,8 @@ export class StaticField { private subfields: Field[] = []; private renderedDocument: Doc; + private storedAttributes: Record<string, any>; + private id: number; private title: string = ''; @@ -30,7 +34,8 @@ export class StaticField { this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions); this.content = ''; this.subfields = this.setupSubfields(); - this.renderedDocument = this.updateRenderedDoc(); + this.renderedDocument = this.setupRenderedDoc(this.contentType ?? FieldContentType.STRING); + this.storedAttributes = new DocumentOptions(); }; get getSubfields(): Field[] { return this.subfields ?? []; }; @@ -59,7 +64,7 @@ export class StaticField { setContent = (newContent: string, type?: FieldContentType) => { this.content = newContent; if (type) this.contentType = type; - this.updateRenderedDoc(this.renderedDocument); + this.updateRenderedDoc(this.renderedDocument, true); }; getContent() { return this.content }; @@ -77,23 +82,13 @@ export class StaticField { } setupSubfields = (): Field[] => { - const fields: Field[] = []; - this.settings.subfields?.forEach((fieldSettings, index) => { - let field: Field; - const type = fieldSettings.viewType; - - const id = Number(String(this.id) + String(index)); - - if (type === ViewType.FREEFORM || type === ViewType.CAROUSEL3D) { - field = new DynamicField(fieldSettings, id, this); - } else { - field = new StaticField(fieldSettings, this, id); - }; - - fields.push(field); - }); - return fields; - }; + return this.settings.subfields?.map((fieldSettings, index) => { + const id = Number(`${this.id}${index}`); + return fieldSettings.viewType === ViewType.FREEFORM || fieldSettings.viewType === ViewType.CAROUSEL3D + ? new DynamicField(fieldSettings, id, this) + : new StaticField(fieldSettings, this, id); + }) || []; + } matches = (cols: Col[]): number[] => { const colMatchesField = (col: Col) => { @@ -115,38 +110,82 @@ export class StaticField { return matches; }; - updateRenderedDoc = (oldDoc?: Doc): Doc => { + updateRenderedDoc = (currDoc?: Doc, forceRerender?: boolean) => { const opts = this.settings.opts; if (!this.contentType) { this.contentType = FieldContentType.STRING }; let doc: Doc; + if (this.shouldRerender()) { + this.updateStoredAttributes(this.renderedDocument); + switch (this.contentType) { + case FieldContentType.STRING: + const text = String(this.content); + doc = Docs.Create.TextDocument(text, this.storedAttributes); + break; + case FieldContentType.IMAGE: + const url = String(this.content); + doc = Docs.Create.ImageDocument(url, this.storedAttributes); + break; + } + this.renderedDocument = doc; + } else { + this.updateStoredAttributes(this.renderedDocument); + } + }; + + private updateStoredAttributes = (currDoc?: Doc) => { + const opts = this.settings.opts; + Object.entries(this.storedAttributes).forEach(([key, value]) => { + key = String(key); + if (currDoc && currDoc[key] !== undefined) { + this.storedAttributes[key] = currDoc[key]; + } else if (opts[key as keyof typeof opts] !== undefined) { + this.storedAttributes[key] = opts[key as keyof typeof opts]; + } + }); + } + + private shouldRerender = (): boolean => { + return FieldUtils.textProperties.some(property => + this.renderedDocument[property] !== this.storedAttributes[property] + ); + }; + + private setupRenderedDoc = (contentType: FieldContentType): Doc => { + const opts = this.settings.opts; + + const docOptions: Record<string, any> = new DocumentOptions(); + + docOptions.isDefaultTemplateDoc = true; + docOptions.x = this.dimensions.coord.x; + docOptions.y = this.dimensions.coord.y; + docOptions._height = this.dimensions.height; + docOptions._width = this.dimensions.width; + docOptions._nativeWidth = this.dimensions.width; + docOptions._nativeHeight = this.dimensions.height; + + Object.keys(opts).forEach(([key, value]) => { + docOptions[key] = value; + }); + + let doc: Doc; switch (this.contentType) { case FieldContentType.STRING: - const text = String(this.content); - doc = Docs.Create.TextDocument(text, { - title: this.title, - text_fontColor: oldDoc ? String(oldDoc.color) : opts.color, - contentBold: oldDoc ? Boolean(oldDoc.fontBold) : opts.fontBold, - textTransform: oldDoc ? String(oldDoc.fontTransform) : opts.fontTransform, - color: oldDoc ? String(oldDoc.color) : opts.color, - _text_fontSize: `${FieldUtils.calculateFontSize(this.dimensions.width, this.dimensions.height, text, true)}` - }); - FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings, oldDoc); + doc = Docs.Create.TextDocument(this.content, docOptions); break; case FieldContentType.IMAGE: - const url = String(this.content); - doc = Docs.Create.ImageDocument(url, { - title: this.title, - _layout_fitWidth: false, - }); - FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings, oldDoc); + doc = Docs.Create.ImageDocument(this.content, docOptions); break; - } + default: + doc = Docs.Create.TextDocument(this.content, docOptions); + break; + } - this.renderedDocument = doc; + doc._layout_hideScroll = true; + doc._layout_borderRounding = !opts._layout_borderRounding ? '0px' : ScriptField.MakeFunction(`${opts._layout_borderRounding} * this.width + 'px'`); return doc; - }; + } }
\ No newline at end of file diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx index 31402eeeb..4680b0316 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx @@ -1,4 +1,5 @@ +import { makeAutoObservable } from "mobx"; import { Doc, FieldType } from "../../../../../fields/Doc"; import { Docs } from "../../../../documents/Documents"; import { Col } from "./DocCreatorMenu"; @@ -6,22 +7,33 @@ import { DynamicField } from "./FieldTypes/DynamicField"; import { Field, FieldSettings, ViewType } from "./FieldTypes/Field"; import { } from "./FieldTypes/FieldUtils"; import { } from "./FieldTypes/StaticField"; +import { observer } from "mobx-react"; export class Template { mainField: DynamicField; settings: FieldSettings; + constructor(templateInfo: FieldSettings) { + makeAutoObservable(this); this.mainField = this.setupMainField(templateInfo); this.settings = templateInfo; + } + + get childFields(): Field[] { return this.mainField.getSubfields }; get allFields(): Field[] { return this.mainField.getAllSubfields }; get contentFields(): Field[] { return this.allFields.filter(field => field.getViewType === ViewType.STATIC) }; get doc(){ return this.mainField.renderedDoc(); }; + // addField = (type: FieldType, doc?: Doc): Field => { + + // this.mainField.addField(); + // } + cloneBase = () => { const clone: Template = new Template(this.settings); clone.allFields.forEach(field => { diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx index 99edce34e..4f1186320 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx @@ -20,6 +20,14 @@ export class TemplateLayouts { return Object.values(TemplateLayouts); } + public static BasicSettings: FieldSettings = { + title: 'template_framework', + tl: [0, 0], + br: [400, 700], + viewType: ViewType.FREEFORM, + opts: {} + } + public static FourField001: FieldSettings = { title: 'fourfield001', tl: [0, 0], @@ -27,7 +35,7 @@ export class TemplateLayouts { viewType: ViewType.FREEFORM, opts: { backgroundColor: '#C0B887', - cornerRounding: .05, + _layout_borderRounding: .05, //borderColor: '#6B461F', //borderWidth: '12', }, @@ -41,9 +49,9 @@ export class TemplateLayouts { description: 'A title field for very short text that contextualizes the content.', opts: { backgroundColor: 'transparent', - color: '#F1F0E9', - contentXCentering: 'h-center', - fontBold: true, + text_fontColor: '#F1F0E9', + hCentering: 'h-center', + contentBold: true, }, }, { @@ -54,7 +62,7 @@ export class TemplateLayouts { sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], description: 'The main focus of the template; could be an image, long text, etc.', opts: { - cornerRounding: .05, + _layout_borderRounding: .05, borderColor: '#8F5B25', borderWidth: '6', backgroundColor: '#CECAB9', @@ -69,8 +77,8 @@ export class TemplateLayouts { description: 'A caption for field #2, very short text.', opts: { backgroundColor: 'transparent', - contentXCentering: 'h-center', - color: '#F1F0E9', + hCentering: 'h-center', + text_fontColor: '#F1F0E9', }, }, { @@ -81,7 +89,7 @@ export class TemplateLayouts { sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], description: 'A medium-sized field for medium/long text.', opts: { - cornerRounding: .05, + _layout_borderRounding: .05, borderColor: '#8F5B25', borderWidth: '6', backgroundColor: '#CECAB9', @@ -110,7 +118,7 @@ export class TemplateLayouts { borderWidth: '8', borderColor: '#F8E71C', backgroundColor: '#242425', - color: 'white', + text_fontColor: 'white', }, }, { @@ -122,9 +130,9 @@ export class TemplateLayouts { description: 'A tiny field for just a word or two of plain text.', opts: { backgroundColor: 'transparent', - color: 'white', - contentXCentering: 'h-center', - fontTransform: 'uppercase', + text_fontColor: 'white', + hCentering: 'h-center', + textTransform: 'uppercase', }, }, { @@ -136,9 +144,9 @@ export class TemplateLayouts { description: 'A tiny field for just a word or two of plain text.', opts: { backgroundColor: 'transparent', - color: 'white', - contentXCentering: 'h-center', - fontTransform: 'uppercase', + text_fontColor: 'white', + hCentering: 'h-center', + textTransform: 'uppercase', }, }, { @@ -151,7 +159,7 @@ export class TemplateLayouts { opts: { borderWidth: '8', borderColor: '#F8E71C', - color: 'white', + text_fontColor: 'white', backgroundColor: '#242425', }, }, @@ -161,7 +169,7 @@ export class TemplateLayouts { br: [-0.525, 0.075], opts: { backgroundColor: '#F8E71C', - rotation: 45, + _rotation: 45, }, }, { @@ -170,7 +178,7 @@ export class TemplateLayouts { br: [-0.2175, 0.0245], opts: { backgroundColor: '#F8E71C', - rotation: 45, + _rotation: 45, }, }, { @@ -179,7 +187,7 @@ export class TemplateLayouts { br: [0.045, 0.0245], opts: { backgroundColor: '#F8E71C', - rotation: 45, + _rotation: 45, }, }, { @@ -188,7 +196,7 @@ export class TemplateLayouts { br: [0.3075, 0.0245], opts: { backgroundColor: '#F8E71C', - rotation: 45, + _rotation: 45, }, }, { @@ -197,7 +205,7 @@ export class TemplateLayouts { br: [0.8, 0.075], opts: { backgroundColor: '#F8E71C', - rotation: 45, + _rotation: 45, }, }, ], @@ -285,7 +293,7 @@ export class TemplateLayouts { backgroundColor: '#E2B4F5', borderWidth: '9', borderColor: '#9222F1', - contentXCentering: 'h-center', + hCentering: 'h-center', }, }, { @@ -299,7 +307,7 @@ export class TemplateLayouts { backgroundColor: '#F5B4DD', borderWidth: '9', borderColor: '#E260F3', - contentXCentering: 'h-center', + hCentering: 'h-center', }, }, { @@ -359,7 +367,7 @@ export class TemplateLayouts { opts: { borderColor: '#3B4A2C', borderWidth: '8', - contentXCentering: "h-center", + hCentering: "h-center", backgroundColor: '#B8DC90', }, }, @@ -373,7 +381,7 @@ export class TemplateLayouts { opts: { borderColor: '#3B4A2C', borderWidth: '8', - contentXCentering: "h-center", + hCentering: "h-center", backgroundColor: '#B8DC90', }, }, @@ -410,7 +418,7 @@ export class TemplateLayouts { opts: { borderColor: '#3B4A2C', borderWidth: '8', - contentXCentering: "h-center", + hCentering: "h-center", backgroundColor: '#B8DC90', }, }, @@ -496,7 +504,7 @@ export class TemplateLayouts { opts: { borderColor: 'yellow', borderWidth: '8', - contentXCentering: "h-center", + hCentering: "h-center", backgroundColor: 'transparent', }, }, @@ -569,7 +577,7 @@ export class TemplateLayouts { borderColor: 'yellow', borderWidth: '8', backgroundColor: '#DDD3A9', - rotation: 45, + _rotation: 45, }, subfields: [ { @@ -580,7 +588,7 @@ export class TemplateLayouts { sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], description: 'A medium to large field for visual content that is the central focus.', opts: { - rotation: -45, + _rotation: -45, }, }, ] @@ -594,7 +602,7 @@ export class TemplateLayouts { description: 'A very small text field for one to a few words. A good caption for the image.', opts: { backgroundColor: 'transparent', - contentXCentering: 'h-center', + hCentering: 'h-center', }, }, { @@ -606,7 +614,7 @@ export class TemplateLayouts { description: 'A medium to large text field for a thorough description of the image. ', opts: { backgroundColor: 'transparent', - color: 'white', + text_fontColor: 'white', }, }, { @@ -615,7 +623,7 @@ export class TemplateLayouts { br: [1.8, -0.66], opts: { backgroundColor: '#CEB155', - rotation: 45, + _rotation: 45, }, subfields: [ { @@ -634,7 +642,7 @@ export class TemplateLayouts { br: [-0.2, -0.66], opts: { backgroundColor: '#CEB155', - rotation: 135, + _rotation: 135, }, subfields: [ { @@ -653,7 +661,7 @@ export class TemplateLayouts { br: [1.66, 1.25], opts: { backgroundColor: '#CEB155', - rotation: 135, + _rotation: 135, }, subfields: [ { @@ -672,7 +680,7 @@ export class TemplateLayouts { br: [-0.33, 1.25], opts: { backgroundColor: '#CEB155', - rotation: 45, + _rotation: 45, }, subfields: [ { @@ -718,10 +726,10 @@ export class TemplateLayouts { description: 'A very small text field for one to a few words. The content should represent a general categorization of the image.', opts: { backgroundColor: 'transparent', - color: '#AF0D0D', - fontTransform: 'uppercase', - fontBold: true, - contentXCentering: 'h-left', + text_fontColor: '#AF0D0D', + textTransform: 'uppercase', + contentBold: true, + hCentering: 'h-left', }, }, { @@ -733,8 +741,8 @@ export class TemplateLayouts { description: 'A very small text field for one to a few words. The content should contextualize field 2.', opts: { backgroundColor: 'transparent', - color: 'black', - contentXCentering: 'h-right', + text_fontColor: 'black', + hCentering: 'h-right', }, }, { diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx index 890bc6f73..95f0da43d 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx @@ -20,4 +20,12 @@ export class TemplateManager { getValidTemplates = (cols: Col[]): Template[] => { return this.templates.filter(template => template.isValidTemplate(cols)); } + + addTemplate = (newTemplate: Template) =>{ + this.templates.push(newTemplate); + } + + removeTemplate = (template: Template) => { + this.templates.splice(this.templates.indexOf(template), 1); + } }
\ No newline at end of file |