From 1ffa8a8fb3e16bd5a3338d18782ddda0c2ffca03 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 16 Mar 2025 21:15:00 -0400 Subject: a lot of code cleanup for doc creators templates --- .../DataVizBox/DocCreatorMenu/TemplateBackend.ts | 768 +++++++++++++++++++++ 1 file changed, 768 insertions(+) create mode 100644 src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.ts (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.ts') diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.ts new file mode 100644 index 000000000..9b0fac3a6 --- /dev/null +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.ts @@ -0,0 +1,768 @@ +import { FieldSettings, ViewType } from './TemplateFieldTypes/TemplateField'; + +export enum TemplateFieldType { + TEXT = 'text', + VISUAL = 'visual', + UNSET = 'unset', +} + +export enum TemplateFieldSize { + TINY = 'tiny', + SMALL = 'small', + MEDIUM = 'medium', + LARGE = 'large', + HUGE = 'huge', +} + +export class TemplateLayouts { + public static get allTemplates(): FieldSettings[] { + 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], + br: [416, 700], + viewType: ViewType.FREEFORM, + opts: { + backgroundColor: '#C0B887', + _layout_borderRounding: '.05', + //borderColor: '#6B461F', + //borderWidth: '12', + }, + subfields: [ + { + viewType: ViewType.STATIC, + 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', + text_fontColor: '#F1F0E9', + hCentering: 'h-center', + contentBold: true, + }, + }, + { + viewType: ViewType.STATIC, + 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: { + _layout_borderRounding: '.05', + borderColor: '#8F5B25', + borderWidth: 6, + backgroundColor: '#CECAB9', + }, + }, + { + viewType: ViewType.STATIC, + 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 text.', + opts: { + backgroundColor: 'transparent', + hCentering: 'h-center', + text_fontColor: '#F1F0E9', + }, + }, + { + viewType: ViewType.STATIC, + 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: { + _layout_borderRounding: '.05', + borderColor: '#8F5B25', + borderWidth: 6, + backgroundColor: '#CECAB9', + }, + }, + ], + }; + + public static FourField002: FieldSettings = { + title: 'fourfield002', + viewType: ViewType.FREEFORM, + tl: [0, 0], + br: [425, 778], + opts: { + backgroundColor: '#242425', + }, + subfields: [ + { + viewType: ViewType.STATIC, + 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', + backgroundColor: '#242425', + text_fontColor: 'white', + }, + }, + { + viewType: ViewType.STATIC, + 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', + text_fontColor: 'white', + hCentering: 'h-center', + text_transform: 'uppercase', + }, + }, + { + viewType: ViewType.STATIC, + 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', + text_fontColor: 'white', + hCentering: 'h-center', + text_transform: 'uppercase', + }, + }, + { + viewType: ViewType.STATIC, + tl: [-0.83, 0.2], + br: [0.83, 0.95], + types: [TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], + description: 'A medium to large-sized field suitable for longer text that should contextualize field 1.', + opts: { + borderWidth: 8, + borderColor: '#F8E71C', + text_fontColor: 'white', + backgroundColor: '#242425', + }, + }, + { + viewType: ViewType.DEC, + tl: [-0.8, -0.075], + br: [-0.525, 0.075], + opts: { + backgroundColor: '#F8E71C', + _rotation: 45, + }, + }, + { + viewType: ViewType.DEC, + tl: [-0.3075, -0.0245], + br: [-0.2175, 0.0245], + opts: { + backgroundColor: '#F8E71C', + _rotation: 45, + }, + }, + { + viewType: ViewType.DEC, + tl: [-0.045, -0.0245], + br: [0.045, 0.0245], + opts: { + backgroundColor: '#F8E71C', + _rotation: 45, + }, + }, + { + viewType: ViewType.DEC, + tl: [0.2175, -0.0245], + br: [0.3075, 0.0245], + opts: { + backgroundColor: '#F8E71C', + _rotation: 45, + }, + }, + { + viewType: ViewType.DEC, + 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: FieldSettings = { + title: 'fourfield04', + viewType: ViewType.FREEFORM, + tl: [0, 0], + br: [414, 583], + opts: { + backgroundColor: '#6CCAF0', + //borderColor: '#1088C3', + //borderWidth: '10', + }, + subfields: [ + { + viewType: ViewType.STATIC, + 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', + hCentering: 'h-center', + }, + }, + { + viewType: ViewType.STATIC, + 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', + hCentering: 'h-center', + }, + }, + { + viewType: ViewType.STATIC, + 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', + }, + }, + { + viewType: ViewType.STATIC, + 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', + }, + }, + { + viewType: ViewType.DEC, + tl: [-0.852, -0.67], + br: [0.852, 0.51], + opts: { + backgroundColor: 'transparent', + borderColor: '#007C0C', + borderWidth: 10, + }, + }, + ], + }; + + public static FourField005: FieldSettings = { + title: 'fourfield05', + viewType: ViewType.FREEFORM, + tl: [0, 0], + br: [400, 550], + opts: { + backgroundColor: '#95A575', + }, + subfields: [ + { + viewType: ViewType.STATIC, + tl: [-0.9, -0.925], + br: [-0.075, -0.775], + types: [TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], + description: 'A small text field for a title or word(s) that categorize the rest of the content.', + opts: { + borderColor: '#3B4A2C', + borderWidth: 8, + hCentering: 'h-center', + backgroundColor: '#B8DC90', + }, + }, + { + viewType: ViewType.STATIC, + tl: [0.075, -0.925], + br: [0.9, -0.775], + 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: '#3B4A2C', + borderWidth: 8, + hCentering: 'h-center', + backgroundColor: '#B8DC90', + }, + }, + { + viewType: ViewType.DEC, + tl: [-0.82, -0.4], + br: [-0.5, -0.2], + opts: { + backgroundColor: '#94B058', + borderColor: '#3B4A2C', + borderWidth: 8, + }, + }, + { + viewType: ViewType.STATIC, + tl: [-0.66, -0.65], + br: [0.66, 0.25], + types: [TemplateFieldType.VISUAL], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE], + description: 'A medium to large field in the center of the template, for the main visual content.', + opts: { + borderColor: '#3B4A2C', + borderWidth: 8, + backgroundColor: '#B8DC90', + }, + }, + { + viewType: ViewType.STATIC, + tl: [-0.875, 0.425], + br: [0.875, 0.925], + types: [TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE], + description: 'A medium to large field at the bottom of the template, for the main text content.', + opts: { + borderColor: '#3B4A2C', + borderWidth: 8, + hCentering: 'h-center', + backgroundColor: '#B8DC90', + }, + }, + { + viewType: ViewType.DEC, + tl: [-1.1, -0.62], + br: [-0.9, -0.5], + opts: { + backgroundColor: '#7A9D31', + borderColor: '#3B4A2C', + borderWidth: 8, + }, + }, + { + viewType: ViewType.DEC, + tl: [-1.1, 0], + br: [-0.9, 0.15], + opts: { + backgroundColor: '#94B058', + borderColor: '#3B4A2C', + borderWidth: 8, + }, + }, + { + viewType: ViewType.DEC, + tl: [-0.93, -0.265], + br: [-0.715, -0.125], + opts: { + backgroundColor: '#728745', + borderColor: '#3B4A2C', + borderWidth: 8, + }, + }, + { + viewType: ViewType.DEC, + tl: [0.7, -0.45], + br: [0.85, -0.3], + opts: { + backgroundColor: '#7A9D31', + borderColor: '#3B4A2C', + borderWidth: 8, + }, + }, + { + viewType: ViewType.DEC, + tl: [0.8, 0.03], + br: [1.2, 0.33], + opts: { + backgroundColor: '#728745', + borderColor: '#3B4A2C', + borderWidth: 8, + }, + }, + { + viewType: ViewType.DEC, + tl: [0.875, -0.13], + br: [1.2, 0.12], + opts: { + backgroundColor: '#94B058', + borderColor: '#3B4A2C', + borderWidth: 8, + }, + }, + ], + }; + + public static FourFieldCarousel: FieldSettings = { + title: 'title_fourfieldcarousel', + viewType: ViewType.FREEFORM, + tl: [0, 0], + br: [500, 600], + opts: { + backgroundColor: '#D7CBAB', + }, + subfields: [ + { + viewType: ViewType.STATIC, + tl: [-0.8, -0.9], + br: [0.8, -0.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: { + hCentering: 'h-center', + backgroundColor: 'transparent', + text_transform: 'uppercase', + }, + }, + { + viewType: ViewType.CAROUSEL3D, + tl: [-0.9, -0.5], + br: [0.9, 0.25], + opts: { + borderColor: '#847F69', + borderWidth: 8, + backgroundColor: '#C8BA94', + }, + subfields: [ + { + viewType: ViewType.STATIC, + tl: [-0.4, -0.6], + br: [0.4, 0.6], + types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], + description: 'A medium to large field for content that will share central focus with other content in the carousel.', + opts: { + //borderColor: 'yellow', + //borderWidth: '8', + }, + }, + { + viewType: ViewType.STATIC, + tl: [-0.4, -0.6], + br: [0.4, 0.6], + types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], + description: 'A medium to large field for content that will share central focus with other content in the carousel.', + opts: { + //borderColor: 'black', + //borderWidth: '8', + }, + }, + { + viewType: ViewType.STATIC, + tl: [-0.4, -0.6], + br: [0.4, 0.6], + types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], + description: 'A medium to large field for content that will share central focus with other content in the carousel.', + opts: { + //borderColor: 'yellow', + //borderWidth: '8', + }, + }, + ], + }, + { + viewType: ViewType.STATIC, + tl: [-0.9, 0.35], + br: [0.9, 0.9], + types: [TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE], + description: 'A medium text field for a description of the content in the carousel.', + opts: { + hCentering: 'h-center', + backgroundColor: 'transparent', + }, + }, + ], + }; + + public static ThreeField001: FieldSettings = { + title: 'threefield001', + viewType: ViewType.FREEFORM, + tl: [0, 0], + br: [575, 770], + opts: { + backgroundColor: '#DDD3A9', + }, + subfields: [ + { + viewType: ViewType.FREEFORM, + tl: [-0.66, -0.747], + br: [0.66, 0.247], + 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, + 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', + hCentering: 'h-center', + }, + }, + { + viewType: ViewType.STATIC, + 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', + text_fontColor: 'white', + }, + }, + { + viewType: ViewType.FREEFORM, + tl: [0.2, -1.32], + br: [1.8, -0.66], + opts: { + backgroundColor: '#CEB155', + _rotation: 45, + }, + subfields: [ + { + viewType: ViewType.DEC, + tl: [-1, -0.7], + br: [1, -0.625], + opts: { + backgroundColor: 'yellow', + }, + }, + ], + }, + { + viewType: ViewType.FREEFORM, + tl: [-1.8, -1.32], + br: [-0.2, -0.66], + opts: { + backgroundColor: '#CEB155', + _rotation: 135, + }, + subfields: [ + { + viewType: ViewType.DEC, + tl: [-1, -0.7], + br: [1, -0.625], + opts: { + backgroundColor: 'yellow', + }, + }, + ], + }, + { + viewType: ViewType.FREEFORM, + tl: [0.33, 0.75], + br: [1.66, 1.25], + opts: { + backgroundColor: '#CEB155', + _rotation: 135, + }, + subfields: [ + { + viewType: ViewType.DEC, + tl: [-1, -0.7], + br: [1, -0.625], + opts: { + backgroundColor: 'yellow', + }, + }, + ], + }, + { + viewType: ViewType.FREEFORM, + tl: [-1.66, 0.75], + br: [-0.33, 1.25], + opts: { + backgroundColor: '#CEB155', + _rotation: 45, + }, + subfields: [ + { + viewType: ViewType.DEC, + tl: [-1, -0.7], + br: [1, -0.625], + opts: { + backgroundColor: 'yellow', + }, + }, + ], + }, + ], + }; + + public static ThreeField002: FieldSettings = { + title: 'threefield002', + viewType: ViewType.FREEFORM, + tl: [0, 0], + br: [477, 662], + opts: { + backgroundColor: '#9E9C95', + }, + subfields: [ + { + viewType: ViewType.STATIC, + 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', + }, + }, + { + viewType: ViewType.STATIC, + 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', + text_fontColor: '#AF0D0D', + text_transform: 'uppercase', + contentBold: true, + hCentering: 'h-left', + }, + }, + { + viewType: ViewType.STATIC, + 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', + text_fontColor: 'black', + hCentering: 'h-right', + }, + }, + { + viewType: ViewType.DEC, + tl: [-0.025, 0.8], + br: [0.025, 0.95], + opts: { + backgroundColor: '#E0E0DA', + }, + }, + ], + }; +} -- cgit v1.2.3-70-g09d2 From e9bc998554515ecbe86f7d00b01d3cf5d2048b6e Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Thu, 3 Apr 2025 03:36:07 -0400 Subject: Firefly integration and some UI changes --- .../DataVizBox/DocCreatorMenu/DocCreatorMenu.scss | 65 ++++--- .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx | 213 ++++++++++++++------- .../DataVizBox/DocCreatorMenu/TemplateBackend.ts | 2 +- .../TemplateFieldTypes/StaticContentField.ts | 2 +- src/client/views/smartdraw/DrawingFillHandler.tsx | 59 +++--- src/server/ApiManagers/FireflyManager.ts | 3 +- 6 files changed, 229 insertions(+), 115 deletions(-) (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.ts') diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss index 57f4a1e94..48e09d12f 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss @@ -277,18 +277,6 @@ scrollbar-width: none; } -.docCreatorMenu-preview-container { - display: grid; - grid-template-columns: repeat(2, 140px); - grid-template-rows: 140px; - grid-auto-rows: 141px; - overflow-y: scroll; - margin: 0px; - margin-top: 0px; - width: 100%; - height: 100%; -} - .docCreatorMenu-expanded-template-preview { display: flex; flex-direction: column; @@ -297,6 +285,7 @@ position: relative; width: 100%; height: 100%; + flex-grow: 1; .top-panel{ width: 100%; @@ -322,15 +311,12 @@ display: flex; justify-content: center; align-items: center; - width: 113px; - height: 113px; - margin-top: 10px; - margin-left: 10px; + height: 100%; + aspect-ratio: 1; color: none; border: 1px solid rgb(163, 163, 163); border-radius: 5px; box-shadow: 5px 5px rgb(29, 29, 31); - flex: 0 0 auto; &:hover{ background-color: rgb(72, 72, 73); @@ -394,17 +380,42 @@ } } +.docCreatorMenu-variation-prompt-input { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + margin: 5px; + gap: 15px; + height: 30px; + width: 100%; +} + +.docCreatorMenu-variation-prompt-input-textbox { + height: 100%; + width: 80%; + color: white; + margin-top: 1%; + margin-bottom: 1%; + margin-left: 5%; + background-color: rgb(50, 50, 50); + border-radius: 5px; +} + +.docCreatorMenu-variations-tab { + flex-grow: .5; +} + .docCreatorMenu-section { display: flex; flex-direction: column; align-items: center; position: relative; + flex-grow: 1; + height: 100%; margin: 0px; margin-top: 0px; margin-bottom: 0px; - width: 100%; - height: 200; - flex: 0 0 auto; } .docCreatorMenu-GPT-options-container { @@ -422,12 +433,14 @@ .docCreatorMenu-templates-preview-window { display: flex; flex-direction: row; - //justify-content: center; + justify-content: flex-start; align-items: center; overflow-y: scroll; + gap: 10px; + margin: 5px; position: relative; color: black; - height: 125px; + height: 100%; width: calc(100% - 10px); -ms-overflow-style: none; scrollbar-width: none; @@ -463,6 +476,12 @@ } } +.docCreatorMenu-templates-displays { + display: flex; + flex-direction: column; + height: 100%; +} + .docCreatorMenu-section-title { border: 1px solid rgb(163, 163, 163); border-top: 0px; @@ -1057,4 +1076,4 @@ } -} +} \ No newline at end of file diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index 6d37f8f0f..0c5ae58a3 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -31,6 +31,8 @@ import { TemplateField, ViewType } from './TemplateFieldTypes/TemplateField'; import { Template } from './Template'; import { TemplateFieldSize, TemplateFieldType, TemplateLayouts } from './TemplateBackend'; import { TemplateManager } from './TemplateManager'; +import { DrawingFillHandler } from '../../../smartdraw/DrawingFillHandler'; +import { CgPathIntersect } from 'react-icons/cg'; export enum LayoutType { FREEFORM = 'Freeform', @@ -72,7 +74,7 @@ export class DocCreatorMenu extends ObservableReactComponent // eslint-disable-next-line no-use-before-define static Instance: DocCreatorMenu; - private DEBUG_MODE: boolean = false; + private DEBUG_MODE: boolean = true; private _disposers: { [name: string]: IDisposer } = {}; private _ref: HTMLDivElement | null = null; private templateManager: TemplateManager; @@ -91,6 +93,12 @@ export class DocCreatorMenu extends ObservableReactComponent @observable _layout: { type: LayoutType; yMargin: number; xMargin: number; columns?: number; repeat: number } = { type: LayoutType.FREEFORM, yMargin: 10, xMargin: 10, columns: 3, repeat: 0 }; @observable _savedLayouts: DataVizTemplateLayout[] = []; @observable _expandedPreview: Doc | undefined = undefined; + @observable _variationsTab: boolean = false; + @observable _numVarsToGenerate: number = 3; + @observable _loadingVariants: boolean = false; + @observable _currentVariations: Doc[] = []; + @observable _variationPrompt: string = 'Use this template to generate an empty baseball card template.'; + _previewWindow: HTMLDivElement | null = null; @observable _suggestedTemplates: Template[] = []; @observable _suggestedTemplatePreviews: { doc: Doc; template: Template }[] = []; @@ -129,6 +137,10 @@ export class DocCreatorMenu extends ObservableReactComponent this.templateManager = new TemplateManager(TemplateLayouts.allTemplates); } + setContainerRef: React.LegacyRef = (node) => { + this._previewWindow = node; + }; + @action setDataViz = (dataViz: DataVizBox) => { this._dataViz = dataViz; this._selectedTemplate = undefined; @@ -493,6 +505,42 @@ export class DocCreatorMenu extends ObservableReactComponent this.forceUpdate(); }; + @action setVariationTab = (open: boolean) => { + this._variationsTab = open; + if (this._previewWindow && open) { + this._previewWindow.style.height = String(Number(this._previewWindow.clientHeight) * .6); + } else if (this._previewWindow && !open) { + this._previewWindow.style.height = String(Number(this._previewWindow.clientHeight) * 5/3); + } + } + + generateVariations = async (onDoc: Doc): Promise => { + this._loadingVariants = true; + this.variationDocss = []; + const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; + + const clone: Doc = (await Doc.MakeClone(onDoc)).clone; + mainCollection.addDocument(clone); + clone.x = 10000; + clone.y = 10000; + + await DrawingFillHandler.drawingToImage(clone, 100, this._variationPrompt, undefined, this) + + this._loadingVariants = false; + + return this.variationDocss; + } + + @observable variationDocss: Doc[] = [] + + @action addVariationDoc = (doc: Doc) => { + this.variationDocss.push(doc); + const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; + mainCollection.addDocument(doc); + doc.x = 10000; + doc.y = 10000; + } + generateGPTImage = async (prompt: string): Promise => { try { const res = await gptImageCall(prompt); @@ -768,31 +816,71 @@ export class DocCreatorMenu extends ObservableReactComponent this._expandedPreview = template?.doc; //Docs.Create.FreeformDocument([doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''}); }; + @action setVariationPrompt = (prompt: string) => { + this._variationPrompt = prompt; + } + get editingWindow() { const rendered = !this._expandedPreview ? null : ( -
- this._menuDimensions.width - 10} - PanelHeight={() => this._menuDimensions.height - 60} - ScreenToLocalTransform={() => new Transform(-this._pageX - 5, -this._pageY - 35, 1)} - renderDepth={5} - whenChildContentsActiveChanged={emptyFunction} - focus={emptyFunction} - styleProvider={DefaultStyleProvider} - addDocTab={DocumentViewInternal.addDocTabFunc} - pinToPres={() => undefined} - childFilters={returnEmptyFilter} - childFiltersByRanges={returnEmptyFilter} - searchFilterDocs={returnEmptyDoclist} - fitContentsToBox={returnFalse} - fitWidth={returnFalse} - /> -
+ <> +
+ { this._previewWindow ? this._previewWindow?.clientWidth ?? 1000 - 10} + PanelHeight={() => this._previewWindow?.clientHeight ?? 1000 - 60} + ScreenToLocalTransform={() => new Transform(-this._pageX - 5, -this._pageY - 35, 1)} + renderDepth={5} + whenChildContentsActiveChanged={emptyFunction} + focus={emptyFunction} + styleProvider={DefaultStyleProvider} + addDocTab={DocumentViewInternal.addDocTabFunc} + pinToPres={() => undefined} + childFilters={returnEmptyFilter} + childFiltersByRanges={returnEmptyFilter} + searchFilterDocs={returnEmptyDoclist} + fitContentsToBox={returnFalse} + fitWidth={returnFalse} + /> : null + } +
+ { this._variationsTab ? +
+
+
Variations
+ +
+
+ {this._currentVariations.map(variant => +
+ {this.docPreview(variant)} +
+ )} +
+
+