From 94e2cea212e095ce1f6cc52c2e6bf75674eaff33 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Tue, 20 Aug 2024 04:05:11 -0400 Subject: Layout info --- .../views/nodes/DataVizBox/DocCreatorMenu.tsx | 153 ++++++++++++++++++--- .../views/nodes/DataVizBox/TemplateDocTypes.tsx | 0 2 files changed, 133 insertions(+), 20 deletions(-) create mode 100644 src/client/views/nodes/DataVizBox/TemplateDocTypes.tsx (limited to 'src') diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx index 8ec255dfe..ffe58dee5 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx @@ -28,6 +28,7 @@ import { CollectionStackingView } from '../../collections/CollectionStackingView import { FieldViewProps } from '../FieldView'; import { CollectionViewType } from '../../../documents/DocumentTypes'; import { dropActionType } from '../../../util/DropActionTypes'; +import { ImageBox } from '../ImageBox'; export enum LayoutType { Stacked = 'stacked', @@ -395,6 +396,19 @@ export class DocCreatorMenu extends ObservableReactComponent { + const temp = TemplateLayouts.TwoFieldPlusCarousel; + const title = new TemplateDocTextField({tl: temp.fields[0].tl, br: temp.fields[0].br}); + const focus = new TemplateDocTextField({tl: temp.fields[1].tl, br: temp.fields[1].br}); + const caption = new TemplateDocTextField({tl: temp.fields[2].tl, br: temp.fields[2].br}); + const fields = [title, focus, caption].map(field => field.getDoc(temp.width, temp.height, 'hey now', '')); + console.log(temp.height, temp.width) + const doc = Docs.Create.FreeformDocument(fields, { _height: temp.height, _width: temp.width, title: 'hey', x: 400, y: 400 }); + + const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; + mainCollection.addDocument(doc); + } + get templatesPreviewContents(){ const renderedTemplates: Doc[] = []; @@ -454,7 +468,7 @@ export class DocCreatorMenu extends ObservableReactComponent
400 ? 'center' : ''}}> -
+
this.testTemplate()}>
{this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => { @@ -893,39 +907,47 @@ export interface DataVizTemplateLayout { rows: number; } +enum FieldType { + TEXT = 'text', + VISUAL = 'visual' +} + +enum FieldSize { + TINY = 'tiny', + SMALL = 'small', + MEDIUM = 'medium', + LARGE = 'large', + HUGE = 'huge' +} + export interface TemplateDocInfos { - baseHeight: number; - baseWidth: number; - fields: TemplateDocField[]; + height: number; + width: number; + fields: {tl: [number, number], br: [number, number], types: FieldType[], sizes?: FieldSize[]}[]; } export interface TemplateDocField { coordinates: {tl: [number, number], br: [number, number]}; - title: string; - content: string; - getDoc: (parentWidth: number, parentHeight: number) => Doc; + getDoc: (parentWidth: number, parentHeight: number, title: string, content: string) => Doc; } export class TemplateDocTextField implements TemplateDocField { coordinates: {tl: [number, number], br: [number, number]}; - title: string; - content: string; - constructor(coords: {tl: [number, number], br: [number, number]}, title: string, content: string) { + constructor(coords: {tl: [number, number], br: [number, number]}) { this.coordinates = coords; - this.title = title; - this.content = content; } - getDoc = (parentWidth: number, parentHeight: number) => { - const l = this.coordinates.tl[0] * parentWidth; const t = this.coordinates.tl[1] * parentWidth; //prettier-ignore - const r = this.coordinates.br[0] * parentWidth; const b = this.coordinates.br[1] * parentWidth; //prettier-ignore - const width = l - r; - const height = t - b; + getDoc = (parentWidth: number, parentHeight: number, title: string, content: string) => { + const l = this.coordinates.tl[0] * parentWidth / 2; const t = this.coordinates.tl[1] * parentHeight / 2; //prettier-ignore + const r = this.coordinates.br[0] * parentWidth / 2; const b = this.coordinates.br[1] * parentHeight / 2; //prettier-ignore + const width = r - l; + const height = b - t; const coord = {x: l, y: t}; + console.log(coord, width, height, l, t); - const doc = Docs.Create.TextDocument(this.content, { _height: height, _width: width, title: this.title, x: coord.x, y: coord.y, _text_fontSize: `${height/2}` }) + const doc = Docs.Create.TextDocument(content, { _height: height, _width: width, title: title, x: coord.x, y: coord.y, _text_fontSize: `${height/2}` }) return doc; }; @@ -944,8 +966,99 @@ export class TemplateDocImageField implements TemplateDocField { } getDoc = (parentWidth: number, parentHeight: number) => { - const width = (this.coordinates.br[0] - this.coordinates.tl[0]) * parentWidth; - //const height; + // const l = this.coordinates.tl[0] * parentWidth; const t = this.coordinates.tl[1] * parentHeight; //prettier-ignore + // const r = this.coordinates.br[0] * parentWidth; const b = this.coordinates.br[1] * parentHeight; //prettier-ignore + // const presetWidth = l - r; + // const presetHeight = t - b; + // const presetRatio = presetWidth/presetHeight; + + const l = this.coordinates.tl[0] * parentWidth / 2; const t = this.coordinates.tl[1] * parentHeight / 2; //prettier-ignore + const r = this.coordinates.br[0] * parentWidth / 2; const b = this.coordinates.br[1] * parentHeight / 2; //prettier-ignore + const width = l - r; + const height = t - b; + const coord = {x: l, y: t}; + + const doc: ImageBox = Docs.Create.ImageDocument(this.content, { _height: height, _width: width, title: this.title, x: coord.x, y: coord.y, _text_fontSize: `${height/2}` }) as unknown as ImageBox; + return new Doc(); }; + + +} + +export class TemplateLayouts { + + public static FourField001: 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: [-.6, .3], + br: [.6, .4], + types: [FieldType.TEXT], + sizes: [FieldSize.TINY] + }, { + tl: [-.9, .5], + br: [.9, .9], + types: [FieldType.TEXT, FieldType.VISUAL], + sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE] + }] + }; + + 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: [FieldType.TEXT, FieldType.VISUAL], + sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE] + }, { + tl: [-.9, .4], + br: [.9, .95], + types: [FieldType.TEXT], + sizes: [FieldSize.TINY] + }] + }; + } \ No newline at end of file diff --git a/src/client/views/nodes/DataVizBox/TemplateDocTypes.tsx b/src/client/views/nodes/DataVizBox/TemplateDocTypes.tsx new file mode 100644 index 000000000..e69de29bb -- cgit v1.2.3-70-g09d2