From 41d56b090d00b76c44644c07fdd2017a96ac3aae Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Tue, 4 Mar 2025 03:27:14 -0500 Subject: removed logs --- .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx | 60 +--------------------- 1 file changed, 2 insertions(+), 58 deletions(-) (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx') diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index 2324006f7..7b28a06a3 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -241,18 +241,6 @@ export class DocCreatorMenu extends ObservableReactComponent { componentDidMount() { document.addEventListener('pointerdown', this.onPointerDown, true); document.addEventListener('pointerup', this.onPointerUp); - //this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {this.generateTemplates('')}) - this._disposers.lightbox = reaction( - () => LightboxView.LightboxDoc(), - doc => { - doc ? this._shouldDisplay && this.closeMenu() : !this._shouldDisplay && this.openMenu(); - } - ); - // this._disposers.layout = reaction( - // () => this._layout, - // layout => { this.updateRenderedDocCollection(); } - // ); - //this._disposers.fields = reaction(() => this._dataViz?.axes, cols => this._selectedCols = cols?.map(col => { return {title: col, type: '', desc: ''}})) } componentWillUnmount() { @@ -391,38 +379,11 @@ export class DocCreatorMenu extends ObservableReactComponent { }; editTemplate = (doc: Doc) => { - //this.closeMenu(); DocumentViewInternal.addDocTabFunc(doc, OpenWhere.addRight); DocumentView.DeselectAll(); Doc.UnBrushDoc(doc); }; - testTemplate = async () => { - - //console.log(this.templateManager.templates) - - const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; - - this.templateManager.templates.forEach(template => { - const doc = template.mainField.renderedDoc(); - mainCollection.addDocument(doc); - }) - - this.forceUpdate(); - - // try { - // const res = await gptImageCall('Image of panda eating a cookie'); - - // if (res) { - // const result = await Networking.PostToServer('/uploadRemoteImage', { sources: res }); - - // console.log(result); - // } - // } catch (e) { - // console.log(e); - // } - }; - @action addField = () => { const newFields: Col[] = this._userCreatedFields.concat([{ title: '', type: TemplateFieldType.UNSET, desc: '', sizes: [] }]); this._userCreatedFields = newFields; @@ -490,8 +451,6 @@ export class DocCreatorMenu extends ObservableReactComponent { }; generateGPTImage = async (prompt: string): Promise => { - console.log(prompt); - try { const res = await gptImageCall(prompt); @@ -526,8 +485,6 @@ export class DocCreatorMenu extends ObservableReactComponent { await Promise.all(promises); } - console.log(GPTIMGCalls) - if (GPTIMGCalls.length) { const promises = GPTIMGCalls.map(async ([fieldNum, col]) => { return this.renderGPTImageCall(template, col, Number(fieldNum)); @@ -589,7 +546,6 @@ export class DocCreatorMenu extends ObservableReactComponent { const col = this.getColByTitle(colTitle); if (!this._userCreatedFields.includes(col)){ // do the following for any fields not added by the user; will change in the future, for now only GPT content works with user-added fields const field = template.getFieldByID(Number(fieldID)); - //console.log(field); field.setContent(col.defaultContent ?? '', col.type === TemplateFieldType.VISUAL ? FieldContentType.IMAGE : FieldContentType.STRING); field.setTitle(col.title); } else { @@ -632,7 +588,6 @@ export class DocCreatorMenu extends ObservableReactComponent { renderGPTImageCall = async (template: Template, col: Col, fieldNum: number): Promise => { const generateAndLoadImage = async (fieldNum: string, col: Col, prompt: string) => { const url = await this.generateGPTImage(prompt); - console.log('url: ', url) const field: Field = template.getFieldByID(Number(fieldNum)); field.setContent(url ?? '', FieldContentType.IMAGE); @@ -684,8 +639,6 @@ export class DocCreatorMenu extends ObservableReactComponent { const res = await gptAPICall(`${++this._callCount}: ${prompt}`, GPTCallType.FILL); - console.log('prompt: ', prompt, ' response: ', res); - if (res) { const assignments: { [title: string]: { number: string; content: string } } = JSON.parse(res); Object.entries(assignments).forEach(([title, info]) => { @@ -705,7 +658,7 @@ export class DocCreatorMenu extends ObservableReactComponent { createDocsFromTemplate = async (template: Template) => { const dv = this._dataViz; - console.log('dataviz: ', dv); + if (!dv) return; this._docsRendering = true; @@ -837,8 +790,6 @@ export class DocCreatorMenu extends ObservableReactComponent { const GPTOptions =
; - // - return (
{this._expandedPreview ? ( @@ -924,7 +875,7 @@ export class DocCreatorMenu extends ObservableReactComponent {
400 ? 'center' : '' }}> -
this.testTemplate()}> +
{this._userTemplates @@ -1027,10 +978,6 @@ export class DocCreatorMenu extends ObservableReactComponent { } } - // doc = () => { - // return Docs.Create.FreeformDocument([], { _height: 200, _width: 200, title: 'title'}); - // } - screenToLocalTransform = () => this._props.ScreenToLocalTransform(); applyLayout = (collection: Doc, docs: Doc[]) => { @@ -1092,7 +1039,6 @@ export class DocCreatorMenu extends ObservableReactComponent { if (!this._fullyRenderedDocs) return; const { horizontalSpan, verticalSpan } = this.previewInfo; - //const largerSpan: number = horizontalSpan > verticalSpan ? horizontalSpan : verticalSpan; const collectionFactory = (): (docs: Doc[], options: DocumentOptions) => Doc => { switch (this._layout.type) { @@ -1162,8 +1108,6 @@ export class DocCreatorMenu extends ObservableReactComponent { }; get optionsMenuContents() { - const layoutEquals = (layout: DataVizTemplateLayout) => {}; //TODO: ADD LATER - const layoutOption = (option: LayoutType, optStyle?: {}, specialFunc?: Function) => { return (
Date: Tue, 4 Mar 2025 04:19:01 -0500 Subject: linting --- .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx | 156 ++++++++++----------- .../DocCreatorMenu/FieldTypes/DynamicField.tsx | 21 ++- .../DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx | 61 ++++---- .../DocCreatorMenu/FieldTypes/StaticField.tsx | 13 +- .../nodes/DataVizBox/DocCreatorMenu/Template.tsx | 2 - .../DataVizBox/DocCreatorMenu/TemplateBackend.tsx | 2 +- .../DataVizBox/DocCreatorMenu/TemplateManager.tsx | 1 - 7 files changed, 116 insertions(+), 140 deletions(-) (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx') diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index 7b28a06a3..7bc1b8064 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -1,24 +1,22 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Colors } from 'browndash-components'; -import { action, computed, makeObservable, observable, reaction, runInAction } from 'mobx'; +import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import { IDisposer } from 'mobx-utils'; import * as React from 'react'; import ReactLoading from 'react-loading'; -import { ClientUtils, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../../ClientUtils'; +import { ClientUtils, returnEmptyFilter, returnFalse, setupMoveUpEvents } from '../../../../../ClientUtils'; import { emptyFunction } from '../../../../../Utils'; -import { Doc, FieldType, NumListCast, StrListCast, returnEmptyDoclist } from '../../../../../fields/Doc'; +import { Doc, NumListCast, StrListCast, returnEmptyDoclist } from '../../../../../fields/Doc'; import { Id } from '../../../../../fields/FieldSymbols'; -import { Cast, DocCast, ImageCast, StrCast } from '../../../../../fields/Types'; +import { ImageCast, StrCast } from '../../../../../fields/Types'; import { ImageField } from '../../../../../fields/URLField'; import { Networking } from '../../../../Network'; import { GPTCallType, gptAPICall, gptImageCall } from '../../../../apis/gpt/GPT'; import { Docs, DocumentOptions } from '../../../../documents/Documents'; import { DragManager } from '../../../../util/DragManager'; -import { MakeTemplate } from '../../../../util/DropConverter'; import { SnappingManager } from '../../../../util/SnappingManager'; import { UndoManager, undoable } from '../../../../util/UndoManager'; -import { LightboxView } from '../../../LightboxView'; import { ObservableReactComponent } from '../../../ObservableReactComponent'; import { CollectionFreeFormView } from '../../../collections/collectionFreeForm/CollectionFreeFormView'; import { DocumentView, DocumentViewInternal } from '../../DocumentView'; @@ -26,14 +24,13 @@ import { FieldViewProps } from '../../FieldView'; import { OpenWhere } from '../../OpenWhere'; import { DataVizBox } from '../DataVizBox'; import './DocCreatorMenu.scss'; -import { DefaultStyleProvider, returnEmptyDocViewList } from '../../../StyleProvider'; +import { DefaultStyleProvider } from '../../../StyleProvider'; import { Transform } from '../../../../util/Transform'; -import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { TemplateFieldSize, TemplateFieldType, TemplateLayouts } from './TemplateBackend'; import { TemplateManager } from './TemplateManager'; import { Template } from './Template'; import { Field, FieldContentType } from './FieldTypes/Field'; -import { TabDocView } from '../../../collections/TabDocView'; +import { IconProp } from '@fortawesome/fontawesome-svg-core'; export enum LayoutType { FREEFORM = 'Freeform', @@ -43,6 +40,29 @@ export enum LayoutType { CARD = 'Card View', } +export interface DataVizTemplateInfo { + doc: Doc; + layout: { type: LayoutType; xMargin: number; yMargin: number; repeat: number }; + columns: number; + referencePos: { x: number; y: number }; +} + +export interface DataVizTemplateLayout { + template: Doc; + docsNumList: number[]; + layout: { type: LayoutType; xMargin: number; yMargin: number; repeat: number }; + columns: number; + rows: number; +} + +export type Col = { + sizes: TemplateFieldSize[]; + desc: string; + title: string; + type: TemplateFieldType; + defaultContent?: string; +}; + @observer export class DocCreatorMenu extends ObservableReactComponent { static Instance: DocCreatorMenu; @@ -89,8 +109,8 @@ export class DocCreatorMenu extends ObservableReactComponent { @observable _dragging: boolean = false; @observable _draggingIndicator: boolean = false; @observable _dataViz?: DataVizBox; - @observable _interactionLock: any; - @observable _snapPt: any; + @observable _interactionLock: boolean | undefined; + @observable _snapPt: {x: number, y: number} = {x: 0, y: 0}; @observable _resizeHdlId: string = ''; @observable _resizing: boolean = false; @observable _offset: { x: number; y: number } = { x: 0, y: 0 }; @@ -195,7 +215,7 @@ export class DocCreatorMenu extends ObservableReactComponent { return bounds; } - setUpButtonClick = (e: any, func: Function) => { + setUpButtonClick = (e: any, func: () => void) => { setupMoveUpEvents( this, e, @@ -249,11 +269,6 @@ export class DocCreatorMenu extends ObservableReactComponent { document.removeEventListener('pointerup', this.onPointerUp); } - @action - updateSelectedCols = (cols: string[]) => { - this._selectedCols; - }; - @action toggleDisplay = (x: number, y: number) => { if (this._shouldDisplay) { @@ -302,7 +317,7 @@ export class DocCreatorMenu extends ObservableReactComponent { this._interactionLock = true; const scaleAspect = {x: scale.x, y: scale.y}; this.resizeView(refPt, scaleAspect, transl); // prettier-ignore - await new Promise(res => { setTimeout(() => { res(this._interactionLock = undefined)})}); + await new Promise(res => { setTimeout(() => { res(this._interactionLock = undefined)})}); }); // prettier-ignore return true; }; @@ -318,7 +333,7 @@ export class DocCreatorMenu extends ObservableReactComponent { getResizeVals = (thisPt: { x: number; y: number }, dragHdl: string) => { const [w, h] = [this._initDimensions.width, this._initDimensions.height]; - const [moveX, moveY] = [thisPt.x - this._snapPt.x, thisPt.y - this._snapPt.y]; + const [moveX, moveY] = [thisPt.x - this._snapPt!.x, thisPt.y - this._snapPt!.y]; let vals: { scale: { x: number; y: number }; refPt: [number, number]; transl: { x: number; y: number } }; switch (dragHdl) { case 'topLeft': vals = { scale: { x: 1 - moveX / w, y: 1 -moveY / h }, refPt: [this.bounds.r, this.bounds.b], transl: {x: moveX, y: moveY } }; break; @@ -335,7 +350,6 @@ export class DocCreatorMenu extends ObservableReactComponent { }; resizeView = (refPt: number[], scale: { x: number; y: number }, translation: { x: number; y: number }) => { - const refCent = [refPt[0], refPt[1]]; // fixed reference point for resize (ie, a point that doesn't move) if (this._initDimensions.x === undefined) this._initDimensions.x = this._pageX; if (this._initDimensions.y === undefined) this._initDimensions.y = this._pageY; const { height, width, x, y } = this._initDimensions; @@ -475,8 +489,6 @@ export class DocCreatorMenu extends ObservableReactComponent { const GPTTextCalls = Object.entries(assignments).filter(([str, col]) => col.type === TemplateFieldType.TEXT && this._userCreatedFields.includes(col)); const GPTIMGCalls = Object.entries(assignments).filter(([str, col]) => col.type === TemplateFieldType.VISUAL && this._userCreatedFields.includes(col)); - let fieldContent: string = template.compiledContent; - if (GPTTextCalls.length) { const promises = GPTTextCalls.map(([str, col]) => { return this.renderGPTTextCall(template, col, Number(str)); @@ -527,7 +539,7 @@ export class DocCreatorMenu extends ObservableReactComponent { ++this._callCount; const origCount = this._callCount; - let prompt: string = `(${origCount}) ${inputText}`; + const prompt: string = `(${origCount}) ${inputText}`; this._GPTLoading = true; @@ -539,7 +551,7 @@ export class DocCreatorMenu extends ObservableReactComponent { const brokenDownAssignments: [Template, { [fieldID: number]: Col }][] = []; Object.entries(assignments).forEach(([tempTitle, assignment]) => { - const template = templates.filter(template => template.mainField.getTitle() === tempTitle)[0]; + const template = templates.filter(t => t.mainField.getTitle() === tempTitle)[0]; if (!template) return; const toObj = Object.entries(assignment).reduce( (a, [fieldID, colTitle]) => { @@ -575,9 +587,9 @@ export class DocCreatorMenu extends ObservableReactComponent { const assignments: [Template, { [field: number]: Col }][] = await this.assignColsToFields(templates, cols); - const renderedTemplatePromises: Promise