aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx')
-rw-r--r--src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx153
1 files changed, 133 insertions, 20 deletions
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<FieldViewProps & Co
this._templateDocs.splice(this._templateDocs.indexOf(doc), 1);
}
+ testTemplate = () => {
+ 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<FieldViewProps & Co
</button>
</div>
<div className='docCreatorMenu-templates-preview-window' style={{justifyContent: this._menuDimensions.width > 400 ? 'center' : ''}}>
- <div className='docCreatorMenu-preview-window empty'>
+ <div className='docCreatorMenu-preview-window empty' onPointerDown={e => this.testTemplate()}>
<FontAwesomeIcon icon='plus' color='rgb(160, 160, 160)'/>
</div>
{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
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 05:58:11 +0000