aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx')
-rw-r--r--src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx636
1 files changed, 7 insertions, 629 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index c44fb2ee2..c34403e79 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -29,6 +29,8 @@ import './DocCreatorMenu.scss';
import { DefaultStyleProvider, returnEmptyDocViewList } from '../../../StyleProvider';
import { Transform } from '../../../../util/Transform';
import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { TemplateDocInfos, TemplateFieldSize, TemplateFieldType, TemplateLayouts } from './TemplateBackend';
+import { FieldOpts, FieldSettings } from './FieldTypes';
export enum LayoutType {
STACKED = 'stacked',
@@ -377,8 +379,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
this._selectedTemplate = template;
MakeTemplate(template);
const templateInfo: DataVizTemplateInfo = { doc: template, layout: this._layout, referencePos: { x: this._pageX + 450, y: this._pageY }, columns: this.columnsCount };
- this._fullyRenderedDocs = this._dataViz?.createDocsFromTemplate(templateInfo, true) ?? [];
- this.updateRenderedDocCollection();
+ // this._fullyRenderedDocs = this._dataViz?.createDocsFromTemplate(templateInfo, true) ?? [];
+ // this.updateRenderedDocCollection();
}
};
@@ -626,28 +628,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
return validTemplates;
};
- // createColumnField = (template: TemplateDocInfos, field: Field, column: Col): Doc => {
-
- // if (field.subfields) {
- // const doc = FieldFuncs.FreeformField({
- // tl: field.tl,
- // br: field.br },
- // template.height,
- // template.width,
- // column.title,
- // '',
- // field.opts
- // );
-
- // field.subfields[1].forEach(f => {
- // const fDoc = ()
- // })
-
- // }
-
- // return new Doc;
- // }
-
/**
* Populates a preset template framework with content from a datavizbox or any AI-generated content.
* @param template the preloaded template framework being filled in
@@ -1287,7 +1267,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
this.applyLayout(docWithBasicOpts, this._fullyRenderedDocs);
- const wrapper: Doc = Docs.Create.FreeformDocument([docWithBasicOpts], { _height: NumListCast(docWithBasicOpts._height)[0], _width: NumListCast(docWithBasicOpts._width)[0], title: ''});
+ const wrapper: Doc = Docs.Create.FreeformDocument([docWithBasicOpts], { _height: 200, _width: 200, title: ''});
const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
mainCollection.addDocument(docWithBasicOpts);
@@ -1446,7 +1426,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._renderedDocCollection && this.addDocAsResult(this._renderedDocCollection);
+ this._dataViz?.createDocsFromTemplate(templateInfo);
}, 'make docs')
)
}>
@@ -1680,20 +1660,6 @@ export interface DataVizTemplateLayout {
rows: number;
}
-export enum TemplateFieldType {
- TEXT = 'text',
- VISUAL = 'visual',
- UNSET = 'unset',
-}
-
-export enum TemplateFieldSize {
- TINY = 'tiny',
- SMALL = 'small',
- MEDIUM = 'medium',
- LARGE = 'large',
- HUGE = 'huge',
-}
-
export type Col = {
sizes: TemplateFieldSize[];
desc: string;
@@ -1701,60 +1667,6 @@ export type Col = {
type: TemplateFieldType;
defaultContent?: string;
};
-export interface FieldOpts {
- backgroundColor?: string;
- color?: string;
- cornerRounding?: number;
- borderWidth?: string;
- borderColor?: string;
- contentXCentering?: 'h-left' | 'h-center' | 'h-right';
- contentYCentering?: 'top' | 'center' | 'bottom';
- opacity?: number;
- rotation?: number;
- //animation?: boolean;
- fontBold?: boolean;
- fontTransform?: 'uppercase' | 'lowercase';
- fieldViewType?: 'freeform' | 'stacked';
-}
-
-type FieldSettings = {
- tl: [number, number];
- br: [number, number];
- opts: FieldOpts;
- subfields?: FieldSettings[];
- types?: TemplateFieldType[];
- sizes?: TemplateFieldSize[];
- isDecoration?: boolean;
- description?: string;
-};
-
-// class ContentField implements Field {
-// tl: [number, number];
-// br: [number, number];
-// opts: FieldOpts;
-// subfields?: Field[];
-// types?: TemplateFieldType[];
-// sizes?: TemplateFieldSize[];
-// description?: string;
-
-// constructor( tl: [number, number], br: [number, number],
-// opts: FieldOpts, subfields?: Field[],
-// types?: TemplateFieldType[],
-// sizes?: TemplateFieldSize[],
-// description?: string) {
-// this.tl = tl;
-// this.br = br;
-// this.opts = opts;
-// this.subfields = subfields;
-// this.types = types;
-// this.sizes = sizes;
-// this.description = description;
-// }
-
-// render = (content: any): Doc => {
-// return new Doc;
-// }
-// }
type DecorationField = FieldSettings;
@@ -1764,493 +1676,7 @@ type TemplateDecorations = FieldSettings | InkDecoration;
interface TemplateOpts extends FieldOpts {}
-export interface TemplateDocInfos {
- title: string;
- height: number;
- width: number;
- opts: TemplateOpts;
- fields: FieldSettings[];
- decorations: FieldSettings[];
-}
-
-export class TemplateLayouts {
- public static get allTemplates(): TemplateDocInfos[] {
- return Object.values(TemplateLayouts).filter(value => typeof value === 'object' && value !== null && 'title' in value) as TemplateDocInfos[];
- }
-
- public static getTemplateByTitle = (title: string): TemplateDocInfos | undefined => {
- switch (title) {
- case 'fourfield1':
- return TemplateLayouts.FourField001;
- case 'fourfield2':
- return TemplateLayouts.FourField002;
- // case 'fourfield3':
- // return TemplateLayouts.FourField003;
- case 'fourfield4':
- return TemplateLayouts.FourField004;
- case 'threefield1':
- return TemplateLayouts.ThreeField001;
- case 'threefield2':
- return TemplateLayouts.ThreeField002;
- default:
- break;
- }
-
- return undefined;
- };
-
- public static FourField001: TemplateDocInfos = {
- title: 'fourfield1',
- width: 416,
- height: 700,
- opts: {
- backgroundColor: '#C0B887',
- cornerRounding: 20,
- borderColor: '#6B461F',
- borderWidth: '12',
- },
- fields: [
- {
- tl: [-0.95, -1],
- br: [0.95, -0.85],
- types: [TemplateFieldType.TEXT],
- sizes: [TemplateFieldSize.TINY],
- description: 'A title field for very short text that contextualizes the content.',
- opts: {
- backgroundColor: 'transparent',
- color: '#F1F0E9',
- contentXCentering: 'h-center',
- fontBold: true,
- },
- },
- {
- tl: [-0.87, -0.83],
- br: [0.87, 0.2],
- types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
- sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
- description: 'The main focus of the template; could be an image, long text, etc.',
- opts: {
- cornerRounding: 20,
- borderColor: '#8F5B25',
- borderWidth: '6',
- backgroundColor: '#CECAB9',
- },
- },
- {
- tl: [-0.8, 0.2],
- br: [0.8, 0.3],
- types: [TemplateFieldType.TEXT],
- sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
- description: 'A caption for field #2, very short to short text that contextualizes the content of field #2',
- opts: {
- backgroundColor: 'transparent',
- contentXCentering: 'h-center',
- color: '#F1F0E9',
- },
- },
- {
- tl: [-0.87, 0.37],
- br: [0.87, 0.96],
- types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
- sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
- description: 'A medium-sized field for medium/long text.',
- opts: {
- cornerRounding: 15,
- borderColor: '#8F5B25',
- borderWidth: '6',
- backgroundColor: '#CECAB9',
- },
- },
- ],
- decorations: [],
- };
-
- public static FourField002: TemplateDocInfos = {
- title: 'fourfield2',
- width: 425,
- height: 778,
- opts: {
- backgroundColor: '#242425',
- },
- fields: [
- {
- tl: [-0.83, -0.95],
- br: [0.83, -0.2],
- types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT],
- sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
- description: 'A medium to large-sized field suitable for an image or longer text that should be the main focus.',
- opts: {
- borderWidth: '8',
- borderColor: '#F8E71C',
- },
- },
- {
- tl: [-0.65, -0.2],
- br: [0.65, -0.02],
- types: [TemplateFieldType.TEXT],
- sizes: [TemplateFieldSize.TINY],
- description: 'A tiny field for just a word or two of plain text.',
- opts: {
- backgroundColor: 'transparent',
- color: 'white',
- contentXCentering: 'h-center',
- fontTransform: 'uppercase',
- },
- },
- {
- tl: [-0.65, 0],
- br: [0.65, 0.18],
- types: [TemplateFieldType.TEXT],
- sizes: [TemplateFieldSize.TINY],
- description: 'A tiny field for just a word or two of plain text.',
- opts: {
- backgroundColor: 'transparent',
- color: 'white',
- contentXCentering: 'h-center',
- fontTransform: 'uppercase',
- },
- },
- {
- tl: [-0.83, 0.2],
- br: [0.83, 0.95],
- types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
- sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
- description: 'A medium to large-sized field suitable for an image or longer text that should be the main focus, or share focus with field 1.',
- opts: {
- borderWidth: '8',
- borderColor: '#F8E71C',
- color: 'white',
- backgroundColor: '#242425',
- },
- },
- ],
- decorations: [
- {
- tl: [-0.8, -0.075],
- br: [-0.525, 0.075],
- opts: {
- backgroundColor: '#F8E71C',
- rotation: 45,
- },
- },
- {
- tl: [-0.3075, -0.0245],
- br: [-0.2175, 0.0245],
- opts: {
- backgroundColor: '#F8E71C',
- rotation: 45,
- },
- },
- {
- tl: [-0.045, -0.0245],
- br: [0.045, 0.0245],
- opts: {
- backgroundColor: '#F8E71C',
- rotation: 45,
- },
- },
- {
- tl: [0.2175, -0.0245],
- br: [0.3075, 0.0245],
- opts: {
- backgroundColor: '#F8E71C',
- rotation: 45,
- },
- },
- {
- tl: [0.525, -0.075],
- br: [0.8, 0.075],
- opts: {
- backgroundColor: '#F8E71C',
- rotation: 45,
- },
- },
- ],
- };
-
- // public static FourField003: TemplateDocInfos = {
- // title: 'fourfield3',
- // width: 477,
- // height: 662,
- // opts: {
- // backgroundColor: '#9E9C95'
- // },
- // fields: [{
- // tl: [-.875, -.9],
- // br: [.875, .7],
- // types: [TemplateFieldType.VISUAL],
- // sizes: [TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
- // description: '',
- // opts: {
- // borderWidth: '15',
- // borderColor: '#E0E0DA',
- // }
- // }, {
- // tl: [-.95, .8],
- // br: [-.1, .95],
- // types: [TemplateFieldType.TEXT],
- // sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
- // description: '',
- // opts: {
- // backgroundColor: 'transparent',
- // color: 'white',
- // contentXCentering: 'h-right',
- // }
- // }, {
- // tl: [.1, .8],
- // br: [.95, .95],
- // types: [TemplateFieldType.TEXT],
- // sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
- // description: '',
- // opts: {
- // backgroundColor: 'transparent',
- // color: 'red',
- // fontTransform: 'uppercase',
- // contentXCentering: 'h-left'
- // }
- // }, {
- // tl: [0, -.9],
- // br: [.85, -.66],
- // types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
- // sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
- // description: '',
- // opts: {
- // backgroundColor: 'transparent',
- // contentXCentering: 'h-right'
- // }
- // }],
- // decorations: [{
- // tl: [-.025, .8],
- // br: [.025, .95],
- // opts: {
- // backgroundColor: '#E0E0DA',
- // }
- // }]
- // };
-
- public static FourField004: TemplateDocInfos = {
- title: 'fourfield4',
- width: 414,
- height: 583,
- opts: {
- backgroundColor: '#6CCAF0',
- borderColor: '#1088C3',
- borderWidth: '10',
- },
- fields: [
- {
- tl: [-0.86, -0.92],
- br: [-0.075, -0.77],
- types: [TemplateFieldType.TEXT],
- sizes: [TemplateFieldSize.TINY],
- description: 'A tiny field for just a word or two of plain text.',
- opts: {
- backgroundColor: '#E2B4F5',
- borderWidth: '9',
- borderColor: '#9222F1',
- contentXCentering: 'h-center',
- },
- },
- {
- tl: [0.075, -0.92],
- br: [0.86, -0.77],
- types: [TemplateFieldType.TEXT],
- sizes: [TemplateFieldSize.TINY],
- description: 'A tiny field for just a word or two of plain text.',
- opts: {
- backgroundColor: '#F5B4DD',
- borderWidth: '9',
- borderColor: '#E260F3',
- contentXCentering: 'h-center',
- },
- },
- {
- tl: [-0.81, -0.64],
- br: [0.81, 0.48],
- types: [TemplateFieldType.VISUAL],
- sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
- description: 'A large to huge field for visual content that is the main content of the template.',
- opts: {
- borderWidth: '16',
- borderColor: '#A2BD77',
- },
- },
- {
- tl: [-0.86, 0.6],
- br: [0.86, 0.92],
- types: [TemplateFieldType.TEXT],
- sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
- description: 'A medium to large field for text that describes the visual content above',
- opts: {
- borderWidth: '9',
- borderColor: '#F0D601',
- backgroundColor: '#F3F57D',
- },
- },
- ],
- decorations: [
- {
- tl: [-0.852, -0.67],
- br: [0.852, 0.51],
- opts: {
- backgroundColor: 'transparent',
- borderColor: '#007C0C',
- borderWidth: '10',
- },
- },
- ],
- };
-
- public static ThreeField001: TemplateDocInfos = {
- title: 'threefield1',
- width: 575,
- height: 770,
- opts: {
- backgroundColor: '#DDD3A9',
- },
- fields: [
- {
- 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',
- rotation: 45,
- },
- },
- {
- tl: [-0.7, 0.2],
- br: [0.7, 0.46],
- types: [TemplateFieldType.TEXT],
- sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
- description: 'A very small text field for one to a few words. A good caption for the image.',
- opts: {
- backgroundColor: 'transparent',
- contentXCentering: 'h-center',
- },
- },
- {
- tl: [-0.95, 0.5],
- br: [0.95, 0.95],
- types: [TemplateFieldType.TEXT],
- sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
- description: 'A medium to large text field for a thorough description of the image. ',
- opts: {
- backgroundColor: 'transparent',
- color: 'white',
- },
- },
- ],
- decorations: [
- {
- tl: [0.2, -1.32],
- br: [1.8, -0.66],
- opts: {
- backgroundColor: '#CEB155',
- rotation: 45,
- },
- },
- {
- tl: [-1.8, -1.32],
- br: [-0.2, -0.66],
- opts: {
- backgroundColor: '#CEB155',
- rotation: 135,
- },
- },
- {
- tl: [0.33, 0.75],
- br: [1.66, 1.25],
- opts: {
- backgroundColor: '#CEB155',
- rotation: 135,
- },
- },
- {
- tl: [-1.66, 0.75],
- br: [-0.33, 1.25],
- opts: {
- backgroundColor: '#CEB155',
- rotation: 45,
- },
- },
- ],
- };
-
- public static ThreeField002: TemplateDocInfos = {
- title: 'threefield2',
- width: 477,
- height: 662,
- opts: {
- backgroundColor: '#9E9C95',
- },
- fields: [
- {
- tl: [-0.875, -0.9],
- br: [0.875, 0.7],
- types: [TemplateFieldType.VISUAL],
- sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
- description: 'A medium to large visual field for the main content of the template',
- opts: {
- borderWidth: '15',
- borderColor: '#E0E0DA',
- },
- },
- {
- tl: [0.1, 0.775],
- br: [0.95, 0.975],
- types: [TemplateFieldType.TEXT],
- sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
- 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',
- },
- },
- {
- tl: [-0.95, 0.775],
- br: [-0.1, 0.975],
- types: [TemplateFieldType.TEXT],
- sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
- 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',
- },
- },
- ],
- decorations: [
- {
- tl: [-0.025, 0.8],
- br: [0.025, 0.95],
- opts: {
- backgroundColor: '#E0E0DA',
- },
- },
- ],
- };
-}
-
export class FieldUtils {
- public static contentFields = (fields: FieldSettings[]) => {
- let toRet: FieldSettings[] = [];
- fields.forEach(field => {
- if (!field.isDecoration) {
- toRet.push(field);
- }
- toRet = toRet.concat(FieldUtils.contentFields(field.subfields ?? []));
- });
-
- return toRet;
- };
-
public static calculateFontSize = (contWidth: number, contHeight: number, text: string, uppercase: boolean): number => {
const words: string[] = text.split(/\s+/).filter(Boolean);
@@ -2388,52 +1814,4 @@ export class FieldUtils {
return doc;
};
-}
-
-// public static FourField002: TemplateDocInfos = {
-// width: 450,
-// height: 600,
-// fields: [{
-// tl: [-.6, -.9],
-// br: [.6, -.8],
-// types: [FieldType.TEXT],
-// sizes: [FieldSize.TINY]
-// }, {
-// tl: [-.9, -.7],
-// br: [.9, .2],
-// types: [FieldType.TEXT, FieldType.VISUAL],
-// sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
-// }, {
-// tl: [-.9, .3],
-// br: [-.05, .9],
-// types: [FieldType.TEXT],
-// sizes: [FieldSize.TINY]
-// }, {
-// tl: [.05, .3],
-// br: [.9, .9],
-// types: [FieldType.TEXT, FieldType.VISUAL],
-// sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
-// }]
-// };
-
-// public static TwoFieldPlusCarousel: TemplateDocInfos = {
-// width: 500,
-// height: 600,
-// fields: [{
-// tl: [-.9, -.99],
-// br: [.9, -.7],
-// types: [FieldType.TEXT],
-// sizes: [FieldSize.TINY]
-// }, {
-// tl: [-.9, -.65],
-// br: [.9, .35],
-// types: [],
-// sizes: []
-// }, {
-// tl: [-.9, .4],
-// br: [.9, .95],
-// types: [FieldType.TEXT],
-// sizes: [FieldSize.TINY]
-// }]
-// };
-// } \ No newline at end of file
+} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 14:41:56 +0000