From ef5948e183b15009615818e22e9ea9c748abce2c Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Thu, 10 Oct 2024 01:02:51 -0400 Subject: docCreatorMenu refactor work --- .../DataVizBox/DocCreatorMenu/DocCreatorMenu.scss | 1044 ++++++++++++++++++++ 1 file changed, 1044 insertions(+) create mode 100644 src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss') diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss new file mode 100644 index 000000000..4f5397cdb --- /dev/null +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss @@ -0,0 +1,1044 @@ +.no-margin { + margin-top: 0px !important; + margin-bottom: 0px !important; + margin-left: 0px !important; + margin-right: 0px !important; +} + +.docCreatorMenu-cont { + position: absolute; + z-index: 1000; + // box-shadow: 0px 3px 4px rgba(0, 0, 0, 30%); + // background: whitesmoke; + // color: black; + border-radius: 3px; +} + +.docCreatorMenu-menu { + display: flex; + flex-direction: row; + height: 25px; + align-items: flex-end; +} + +.docCreatorMenu-menu-button { + width: 25px; + height: 25px; + background: whitesmoke; + background-color: rgb(50, 50, 50); + border-radius: 5px; + border: 1px solid rgb(180, 180, 180); + padding: 0px; + font-size: 13px; + //box-shadow: 3px 3px rgb(29, 29, 31); + + &:hover { + box-shadow: none; + } + + &.right{ + margin-left: 0px; + font-size: 12px; + } + + &.close-menu { + font-size: 12px; + width: 18px; + height: 18px; + border-radius: 2px; + font-size: 12px; + margin-left: auto; + } + + &.options { + margin-left: 0px; + } + + &:hover { + background-color: rgb(60, 60, 65); + } + + &.top-bar { + border-bottom: 25px solid #555; + border-left: 12px solid transparent; + border-right: 12px solid transparent; + // border-top-left-radius: 5px; + // border-top-right-radius: 5px; + border-radius: 0px; + height: 0; + width: 50px; + } + + &.preview-toggle { + margin: 0px; + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + border-left: 0px; + } +} + +.docCreatorMenu-top-buttons-container { + position: relative; + margin-top: 5px; + margin-left: 7px; + display: flex; + flex-direction: row; + align-items: flex-end; + width: 150px; + height: auto; +} + +.top-button-container { + position: relative; + width: 52px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + + &.left { + z-index: 3; + } + + &.middle { + position: absolute; + left: 40px; + z-index: 2; + + &.selected { + z-index: 4; + } + } + + &.right { + position: absolute; + left: 80px; + z-index: 1; + + &.selected { + z-index: 4; + } + } + + &:hover::before{ + border-bottom: 20px solid rgb(82, 82, 82); + } + + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + border-bottom: 20px solid rgb(50, 50, 50); + border-left: 12px solid transparent; + border-right: 12px solid transparent; + height: 0; + width: 50px; + } + + &::after { + content: ""; + position: absolute; + top: -1px; + left: -1px; + border-bottom: 22px solid rgb(180, 180, 180); + border-left: 12px solid transparent; + border-right: 12px solid transparent; + height: 0; + width: 52px; + z-index: -1; + } + + &.selected::before { + border-bottom-color: rgb(67, 119, 214); + } +} + +.top-button-content { + position: relative; + z-index: 1; + color: white; +} + +.docCreatorMenu-menu-hr{ + margin-top: 0px; + margin-bottom: 0px; + color: rgb(180, 180, 180); +} + +.docCreatorMenu-placement-indicator { + position: absolute; + z-index: 100000; + border-left: solid 3px #9fd7fb; + border-top: solid 3px #9fd7fb; + width: 25px; + height: 25px; +} + +.docCreatorMenu-general-options-container { + display: flex; + justify-content: center; + align-items: center; + margin: 0px; + padding: 0px; + gap: 5px; +} + +.docCreatorMenu-save-layout-button { + display: flex; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + background-color: rgb(99, 148, 238); + border: 2px solid rgb(80, 107, 152); + border-radius: 5px; + margin-bottom: 20px; + font-size: 25px; + + &:hover{ + background-color: rgb(59, 128, 255); + border: 2px solid rgb(53, 80, 127); + } +} + +.docCreatorMenu-create-docs-button { + width: 40px; + height: 40px; + background-color: rgb(176, 229, 149); + border: 2px solid rgb(126, 219, 80); + border-radius: 5px; + padding: 0px; + font-size: 25px; + color: white; + flex: 0 0 auto; + margin-bottom: 20px; //remove later !!! + + &:hover { + background-color: rgb(129, 223, 83); + border: 2px solid rgb(80, 185, 28); + } +} + +.docCreatorMenu-option-divider { + border-top: 1px solid rgb(180, 180, 180); + width: 95%; + margin-top: 10px; + margin-bottom: 10px; + + &.full { + width: 100%; + } +} + +//------------------------------------------------------------------------------------------------------------------------------------------ +// Resizers CSS +//-------------------------------------------------------------------------------------------------------------------------------------------- + +.docCreatorMenu-resizer { + position: absolute; + background-color: none; + + &.top, &.bottom { + height: 10px; + cursor: ns-resize; + } + + &.right, &.left { + width: 10px; + cursor: ew-resize; + } + + &.topRight, &.topLeft, &.bottomRight, &.bottomLeft { + height: 15px; + width: 15px; + background-color: none; + } +} + +//------------------------------------------------------------------------------------------------------------------------------------------ +// DocCreatorMenu templates preview CSS +//-------------------------------------------------------------------------------------------------------------------------------------------- + +.docCreatorMenu-templates-view { + display: flex; + flex-direction: column; + justify-content: flex-start; + overflow-y: scroll; + //align-items: flex-start; + margin: 5px; + margin-top: 0px; + width: calc(100% - 10px); + height: calc(100% - 30px); + border: 1px solid rgb(180, 180, 180); + border-radius: 5px; + -ms-overflow-style: none; + 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; + justify-content: flex-start; + position: relative; + width: 100%; + height: 100%; + + .top-panel{ + width: 100%; + height: 10px; + } + + .right-buttons-panel { + display: flex; + flex-direction: column; + justify-content: flex-start; + height: 100%; + position: absolute; + right: 0px; + top: 0px; + width: 40px; + padding: 5px; + gap: 2px; + } +} + +.docCreatorMenu-preview-window { + position: relative; + display: flex; + justify-content: center; + align-items: center; + width: 113px; + height: 113px; + margin-top: 10px; + margin-left: 10px; + 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); + } + + &.empty { + font-size: 35px; + + &.GPT { + margin-top: 0px; + } + } + + .option-button { + display: none; + height: 25px; + width: 25px; + margin: 0px; + background: none; + border: 0px; + padding: 0px; + font-size: 15px; + + &.right { + position: absolute; + bottom: 0px; + right: 0px; + } + + &.left { + position: absolute; + bottom: 0px; + left: 0px; + } + + &.top-left { + position: absolute; + top: 0px; + left: 0px; + } + } + + &:hover .option-button { + display: block; + } + +} + +.docCreatorMenu-preview-image{ + background-color: transparent; + height: 100px; + width: 100px; + display: block; + object-fit: contain; + border-radius: 5px; + + &.expanded { + height: 100%; + width: 100%; + } +} + +.docCreatorMenu-section { + display: flex; + flex-direction: column; + align-items: center; + position: relative; + margin: 0px; + margin-top: 0px; + margin-bottom: 0px; + width: 100%; + height: 200; + flex: 0 0 auto; +} + +.docCreatorMenu-GPT-options-container { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + position: relative; + width: auto; + margin: 0px; + margin-top: 5px; + padding: 0px; +} + +.docCreatorMenu-templates-preview-window { + display: flex; + flex-direction: row; + //justify-content: center; + align-items: center; + overflow-y: scroll; + position: relative; + height: 125px; + width: calc(100% - 10px); + -ms-overflow-style: none; + scrollbar-width: none; + + .loading-spinner { + justify-self: center; + } +} + +.divvv{ + width: 200; + height: 200; + border: solid 1px white; +} + +.docCreatorMenu-section-topbar { + position: relative; + display: flex; + flex-direction: row; + width: 100%; +} + +.section-reveal-options { + margin-top: 0px; + margin-bottom: 0px; + margin-right: 0px; + margin-left: auto; + border: 0px; + background: none; + + &.float-right { + float: right; + } +} + +.docCreatorMenu-section-title { + border: 1px solid rgb(163, 163, 163); + border-top: 0px; + border-left: 0px; + border-bottom-right-radius: 5px; + font-size: 12px; + padding: 2px; + padding-left: 3px; + padding-right: 3px; + margin-bottom: 3px; +} + +.docCreatorMenu-GPT-generate { + height: 30px; + width: 30px; + background-color: rgb(176, 229, 149); + border: 1px solid rgb(126, 219, 80); + border-radius: 5px; + padding: 0px; + font-size: 14px; + color: white; + letter-spacing: 1px; + flex: 0 0 auto; + + &:hover { + background-color: rgb(129, 223, 83); + border: 2px solid rgb(80, 185, 28); + } +} + +.docCreatorMenu-GPT-prompt-input { + width: 140px; + height: 25px; + overflow-y: scroll; + border: 1px solid rgb(180, 180, 180); + background-color: rgb(35, 35, 35); + border-radius: 3px; + padding-left: 4px; +} + +//------------------------------------------------------------------------------------------------------------------------------------------ +// DocCreatorMenu options CSS +//-------------------------------------------------------------------------------------------------------------------------------------------- + +.docCreatorMenu-option-container{ + display: flex; + width: 180px; + height: 30px; + flex-direction: row; + justify-content: center; + align-items: center; + margin-top: 10px; + margin-bottom: 10px; + + &.layout{ + z-index: 5; + } +} + +.docCreatorMenu-option-title{ + display: flex; + width: 140px; + height: 30px; + background: whitesmoke; + background-color: rgb(34, 34, 37); + border-radius: 5px; + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + border: 1px solid rgb(180, 180, 180); + padding: 0px; + font-size: 12px; + align-items: center; + justify-content: center; + text-transform: uppercase; + cursor: pointer; + + &.spacer { + border-left: none; + border-right: none; + border-radius: 0px; + width: auto; + text-transform: none; + + &.small { + height: 20px; + transform: translateY(-5px); + } + } + + &.config { + border-radius: 4px; + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + width: 30px; + border-right: 0px; + gap: 3px; + + &.layout-config { + height: 20px; + transform: translateY(-5px); + text-transform: none; + padding-left: 2px; + } + + &.dimensions { + text-transform: none; + height: 20px; + transform: translateY(-5px); + width: 70px; + } + } +} + +.docCreatorMenu-input { + display: flex; + height: 30px; + background-color: rgb(34, 34, 37); + border: 1px solid rgb(180, 180, 180); + align-items: center; + justify-content: center; + + &.config { + border-radius: 4px; + margin: 0px; + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + border-left: 0px; + width: 25px; + + &.layout-config { + height: 20px; + transform: translateY(-5px); + } + + &.dimensions { + height: 20px; + width: 30px; + transform: translateY(-5px); + + &.right { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + } + + &.left { + border-radius: 0px; + border-right: 0px; + } + } + } +} + +.docCreatorMenu-configuration-bar { + width: 200; + gap: 5px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + + &.no-gap { + gap: 0px; + } +} + +.docCreatorMenu-menu-container { + display: flex; + flex-direction: column; + align-items: center; + overflow-y: scroll; + margin: 5px; + margin-top: 0px; + width: calc(100% - 10px); + height: calc(100% - 30px); + border: 1px solid rgb(180, 180, 180); + border-radius: 5px; + + .docCreatorMenu-option-container{ + width: 180px; + height: 30px; + + .docCreatorMenu-dropdown-hoverable { + width: 140px; + height: 30px; + + &:hover .docCreatorMenu-dropdown-content { + display: block; + } + + &:hover .docCreatorMenu-option-title { + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + } + + .docCreatorMenu-dropdown-content { + display: none; + min-width: 100px; + height: 75px; + overflow-y: scroll; + -ms-overflow-style: none; + scrollbar-width: none; + border-bottom: 1px solid rgb(180, 180, 180); + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + + .docCreatorMenu-dropdown-option{ + display: flex; + background-color: rgb(42, 42, 46); + border-left: 1px solid rgb(180, 180, 180); + border-right: 1px solid rgb(180, 180, 180); + border-bottom: 1px solid rgb(180, 180, 180); + width: 140px; + height: 25px; + justify-content: center; + justify-items: center; + padding-top: 3px; + + &:hover { + background-color: rgb(68, 68, 74); + cursor: pointer; + } + } + } + } + } +} + +.docCreatorMenu-layout-preview-window-wrapper { + display: flex; + justify-content: center; + align-items: center; + width: 85%; + height: auto; + position: relative; + padding: 0px; + + &:hover .docCreatorMenu-zoom-button-container { + display: block; + } + + .docCreatorMenu-layout-preview-window { + padding: 5px; + flex: 0 0 auto; + overflow: scroll; + display: grid; + width: 100%; + aspect-ratio: 1; + //height: auto; + // max-width: 240; + // max-height: 240; + border: 1px solid rgb(180, 180, 180); + border-radius: 5px; + background-color: rgb(34, 34, 37); + -ms-overflow-style: none; + scrollbar-width: none; + + &.small { + max-width: 100; + max-height: 100; + } + + .docCreatorMenu-layout-preview-item { + display: flex; + justify-content: center; + align-items: center; + border-radius: 3px; + border: solid 1px lightblue; + + &:hover { + border: solid 2px rgb(68, 153, 233); + z-index: 2; + } + } + } + + .docCreatorMenu-zoom-button-container { + position: absolute; + top: 0px; + display: flex; + justify-content: center; + align-items: center; + display: none; + z-index: 999; + } + + .docCreatorMenu-zoom-button{ + width: 15px; + height: 15px; + background: whitesmoke; + background-color: rgb(34, 34, 37); + border-radius: 3px; + border: 1px solid rgb(180, 180, 180); + padding: 0px; + font-size: 10px; + z-index: 6; + margin-left: 0px; + margin-top: 0px; + margin-right: 0px; //225px + margin-bottom: 0px; + } +} + +//------------------------------------------------------------------------------------------------------------------------------------------ +// DocCreatorMenu dashboard CSS +//-------------------------------------------------------------------------------------------------------------------------------------------- + +.docCreatorMenu-dashboard-view { + position: relative; + display: flex; + flex-direction: column; + justify-content: flex-start; + overflow-y: hidden; + //align-items: flex-start; + margin: 5px; + margin-top: 0px; + width: calc(100% - 10px); + height: calc(100% - 30px); + border: 1px solid rgb(180, 180, 180); + border-radius: 5px; + -ms-overflow-style: none; + scrollbar-width: none; + + .panels-container { + height: 100%; + width: 100%; + flex-direction: column; + justify-content: flex-start; + overflow-y: scroll; + } + + .topbar { + height: 30px; + width: 100%; + background-color: rgb(50, 50, 50); + } + +// .field-panel { +// position: relative; +// display: flex; +// // align-items: flex-start; +// flex-direction: column; +// gap: 5px; +// padding: 5px; +// height: 100px; +// //width: 100%; +// border: 1px solid rgb(180, 180, 180); +// margin: 5px; +// margin-top: 0px; +// border-radius: 3px; +// flex: 0 0 auto; + +// .properties-wrapper { +// display: flex; +// flex-direction: row; +// align-items: flex-start; +// gap: 5px; + +// .field-property-container { +// background-color: rgb(40, 40, 40); +// border: 1px solid rgb(100, 100, 100); +// border-radius: 3px; +// width: 30%; +// height: 25px; +// padding-left: 3px; +// align-items: center; +// color: whitesmoke; +// } + +// .field-type-selection-container { +// display: flex; +// flex-direction: row; +// align-items: center; +// background-color: rgb(40, 40, 40); +// border: 1px solid rgb(100, 100, 100); +// border-radius: 3px; +// width: 31%; +// height: 25px; +// padding-left: 3px; +// color: whitesmoke; + +// .placeholder { +// color: gray; +// } + +// &:hover .placeholder { +// display: none; +// } + +// .bubbles { +// display: none; +// } + +// .text { +// margin-top: 5px; +// margin-bottom: 5px; +// } + +// &:hover .bubbles { +// display: flex; +// flex-direction: row; +// align-items: flex-start; +// } + +// &:hover .type-display { +// display: none; +// } + +// .bubble { +// margin: 5px; +// } + +// &:hover .bubble { +// margin-top: 7px; +// } +// } +// } + +// .field-description-container { +// background-color: rgb(40, 40, 40); +// border: 1px solid rgb(100, 100, 100); +// border-radius: 3px; +// width: 100%; +// height: 100%; +// resize: none; + +// ::-webkit-scrollbar-track { +// background: none; +// } +// } + +// .top-right { +// position: absolute; +// top: 0px; +// right: 0px; +// } +// } +// } + + .field-panel { + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + height: 285px; + width: calc(100% - 10px); + border: 1px solid rgb(180, 180, 180); + margin: 5px; + margin-top: 0px; + margin-bottom: 10px; + border-radius: 3px; + flex: 0 0 auto; + gap: 25px; + background-color: rgb(60, 60, 60); + + .top-bar { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + border-bottom: 1px solid rgb(180, 180, 180); + border-top-right-radius: 5px; + border-top-left-radius: 5px; + width: 100%; + height: 20px; + background-color: rgb(50, 50, 50); + color: rgb(168, 167, 167); + + .field-title { + color: whitesmoke; + } + } + + .opts-bar { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 100%; + + .opt-box { + border: 1px solid rgb(180, 180, 180); + border-radius: 5px; + width: 40%; + height: 50px; + margin-right: 4%; + margin-left: 4%; + box-shadow: 5px 5px rgb(29, 29, 31); + } + + .content { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + height: calc(100% - 20px); + width: 100%; + background-color: rgb(50, 50, 50); + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; + resize: none; + + .bubbles { + display: none; + } + + .text { + margin-right: 5px; + } + + &:hover .bubbles { + display: flex; + flex-direction: row; + align-items: flex-start; + } + + &:hover .type-display { + display: none; + } + + .bubble { + margin: 3px; + } + } + } + + .sizes-box { + width: 88%; + height: 60px; + border: 1px solid rgb(180, 180, 180); + border-radius: 5px; + background-color: rgb(50, 50, 50); + box-shadow: 5px 5px rgb(29, 29, 31); + + .content { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + height: calc(100% - 20px); + width: 100%; + background-color: rgb(50, 50, 50); + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; + + .text { + margin-right: 9px; + } + + .bubbles { + display: flex; + flex-direction: row; + align-items: center; + } + + .bubble { + margin: 3px; + margin-right: 4px; + } + } + } + + .desc-box { + width: 88%; + height: 50px; + border: 1px solid rgb(180, 180, 180); + border-radius: 5px; + background-color: rgb(50, 50, 50); + box-shadow: 5px 5px rgb(29, 29, 31); + + .content { + height: calc(100% - 20px); + width: 100%; + background-color: rgb(50, 50, 50); + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; + resize: none; + + } + } + + } + +} -- cgit v1.2.3-70-g09d2 From e730ae254cd16559fdb7ca67ff1b4ed6767ab7e5 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Thu, 17 Oct 2024 03:18:42 -0400 Subject: work on getting collections to render directly into the layout editor --- src/client/views/nodes/DataVizBox/DataVizBox.tsx | 11 +- .../DataVizBox/DocCreatorMenu/DocCreatorMenu.scss | 4 +- .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx | 424 ++++++++++++++------- .../nodes/DataVizBox/DocCreatorMenu/FieldTypes.tsx | 2 +- 4 files changed, 290 insertions(+), 151 deletions(-) (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss') diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx index 1243831c8..14e0a8e66 100644 --- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx +++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx @@ -658,7 +658,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() { }; applyLayout = (templateInfo: DataVizTemplateInfo, docs: Doc[]) => { - if (templateInfo.layout.type === LayoutType.Stacked) return; + if (templateInfo.layout.type === LayoutType.STACKED) return; const columns: number = templateInfo.columns; const xGap: number = templateInfo.layout.xMargin; const yGap: number = templateInfo.layout.yMargin; @@ -694,9 +694,8 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() { // } @action - createDocsFromTemplate = (templateInfo: DataVizTemplateInfo) => { - if (!templateInfo.doc) return; - const mainCollection = this.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; + createDocsFromTemplate = (templateInfo: DataVizTemplateInfo, returnList?: boolean): Doc[] => { + if (!templateInfo.doc) {console.log('noinfo'); return []; } const fields: string[] = Array.from(Object.keys(this.records[0])); const selectedRows = NumListCast(this.layoutDoc.dataViz_selectedRows); const docs: Doc[] = selectedRows.map(row => { @@ -718,9 +717,13 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() { return applied; }); + if (returnList) return docs; + + const mainCollection = this.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; docs.forEach(doc => mainCollection.addDocument(doc)); this.applyLayout(templateInfo, docs); + return []; }; /** diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss index 4f5397cdb..ec050289a 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss @@ -689,8 +689,8 @@ display: flex; justify-content: center; align-items: center; - width: 85%; - height: auto; + width: 100%; + height: 100%; position: relative; padding: 0px; diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index 91c86bef1..8977a282e 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -31,11 +31,12 @@ import { Transform } from '../../../../util/Transform'; import { IconProp } from '@fortawesome/fontawesome-svg-core'; export enum LayoutType { - Stacked = 'stacked', - Grid = 'grid', + STACKED = 'stacked', + GRID = 'grid', Row = 'row', Column = 'column', Custom = 'custom', + CAROUSEL3D = 'carousel3d' } @observer @@ -46,12 +47,15 @@ export class DocCreatorMenu extends ObservableReactComponent { private _ref: HTMLDivElement | null = null; + @observable _fullyRenderedDocs: Doc[] = []; + @observable _renderedDocCollection: Doc | undefined = undefined; + @observable _templateDocs: Doc[] = []; @observable _selectedTemplate: Doc | undefined = undefined; @observable _columns: Col[] = []; @observable _selectedCols: { title: string; type: string; desc: string }[] | undefined = []; - @observable _layout: { type: LayoutType; yMargin: number; xMargin: number; columns?: number; repeat: number } = { type: LayoutType.Grid, yMargin: 0, xMargin: 0, repeat: 0 }; + @observable _layout: { type: LayoutType; yMargin: number; xMargin: number; columns?: number; repeat: number } = { type: LayoutType.GRID, yMargin: 0, xMargin: 0, repeat: 0 }; @observable _layoutPreview: boolean = true; @observable _layoutPreviewScale: number = 1; @observable _savedLayouts: DataVizTemplateLayout[] = []; @@ -112,14 +116,16 @@ export class DocCreatorMenu extends ObservableReactComponent { @computed get rowsCount() { switch (this._layout.type) { case LayoutType.Row: - case LayoutType.Stacked: + case LayoutType.STACKED: return 1; case LayoutType.Column: return this.docsToRender.length; - case LayoutType.Grid: + case LayoutType.GRID: return Math.ceil(this.docsToRender.length / (this._layout.columns ?? 1)) ?? 0; + case LayoutType.CAROUSEL3D: + return 1; default: - return 0; + return 1; } } @@ -128,12 +134,14 @@ export class DocCreatorMenu extends ObservableReactComponent { case LayoutType.Row: return this.docsToRender.length; case LayoutType.Column: - case LayoutType.Stacked: + case LayoutType.STACKED: return 1; - case LayoutType.Grid: + case LayoutType.GRID: return this._layout.columns ?? 0; + case LayoutType.CAROUSEL3D: + return 1.75; default: - return 0; + return 1; } } @@ -363,6 +371,9 @@ export class DocCreatorMenu extends ObservableReactComponent { } else { 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(); } }; @@ -1143,7 +1154,7 @@ export class DocCreatorMenu extends ObservableReactComponent { return
{optionInput('arrows-left-right', this.updateXMargin, this._layout.xMargin, '0')}
; case LayoutType.Column: return
{optionInput('arrows-up-down', this.updateYMargin, this._layout.yMargin, '1')}
; - case LayoutType.Grid: + case LayoutType.GRID: return (
{optionInput('arrows-up-down', this.updateYMargin, this._layout.xMargin, '2')} @@ -1151,7 +1162,7 @@ export class DocCreatorMenu extends ObservableReactComponent { {optionInput('table-columns', this.updateColumns, this._layout.columns, '4', true)}
); - case LayoutType.Stacked: + case LayoutType.STACKED: return null; default: break; @@ -1164,6 +1175,86 @@ export class DocCreatorMenu extends ObservableReactComponent { screenToLocalTransform = () => this._props.ScreenToLocalTransform(); + applyLayout = (collection: Doc, docs: Doc[]) => { + const layout = this._layout; + const columns: number = layout.columns ?? this.columnsCount; + const xGap: number = layout.xMargin; + const yGap: number = layout.yMargin; + // const repeat: number = templateInfo.layout.repeat; + const startX: number = -Number(collection._width)/2; + const startY: number = -Number(collection._height)/2; + const docHeight: number = Number(docs[0]._height); + const docWidth: number = Number(docs[0]._width); + + if (columns === 0 || docs.length === 0){ + return; + } + + let i: number = 0; + let docsChanged: number = 0; + let curX: number = startX; + let curY: number = startY; + + while (docsChanged < docs.length) { + while (i < columns && docsChanged < docs.length) { + docs[docsChanged].x = curX; + docs[docsChanged].y = curY; + curX += docWidth + xGap; + ++docsChanged; + ++i; + } + i = 0; + curX = startX; + curY += docHeight + yGap; + } + }; + + /** + * Updates the preview that shows how all docs will be rendered in the chosen collection type. + @type the type of collection the docs should render to (ie. freeform, carousel, card) + */ + updateRenderedDocCollection = () => { + if (!this._fullyRenderedDocs) return; + + const layout = this._layout; + + const docHeight: number = Number(this._fullyRenderedDocs[0]._height); + const docWidth: number = Number(this._fullyRenderedDocs[0]._width); + const horizontalSpan: number = (docWidth + layout.xMargin) * (this.columnsCount) - layout.xMargin; + const verticalSpan: number = (docHeight + layout.yMargin) * (this.rowsCount) - layout.yMargin; + const largerSpan: number = horizontalSpan > verticalSpan ? horizontalSpan : verticalSpan; + + const collectionFactory = (): (docs: Doc[], options: DocumentOptions) => Doc => { + switch (this._layout.type) { + case LayoutType.CAROUSEL3D: + return Docs.Create.Carousel3DDocument; + case LayoutType.GRID: + return Docs.Create.FreeformDocument; + default: + return Docs.Create.FreeformDocument; + } + } + + const docWithBasicOpts: Doc = collectionFactory()(this._fullyRenderedDocs, { + isDefaultTemplateDoc: true, + x: this._pageX, + y: this._pageY, + _height: verticalSpan, + _width: horizontalSpan, + title: 'title', + backgroundColor: 'gray', + }); + + this.applyLayout(docWithBasicOpts, this._fullyRenderedDocs); + + const wrapper: Doc = Docs.Create.FreeformDocument([docWithBasicOpts], { _height: NumListCast(docWithBasicOpts._height)[0], _width: NumListCast(docWithBasicOpts._width)[0], title: ''}); + + const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; + mainCollection.addDocument(docWithBasicOpts); + + this._renderedDocCollection = wrapper; + } + layoutPreviewContents = (outerSpan: number, altLayout?: DataVizTemplateLayout, small: boolean = false, id?: number) => { const doc: Doc | undefined = altLayout ? altLayout.template : this._selectedTemplate; if (!doc) return; @@ -1175,37 +1266,46 @@ export class DocCreatorMenu extends ObservableReactComponent { const horizontalSpan: number = (docWidth + layout.xMargin) * (altLayout ? altLayout.columns : this.columnsCount) - layout.xMargin; const verticalSpan: number = (docHeight + layout.yMargin) * (altLayout ? altLayout.rows : this.rowsCount) - layout.yMargin; const largerSpan: number = horizontalSpan > verticalSpan ? horizontalSpan : verticalSpan; + const scaledDown = (input: number) => { return input / ((largerSpan / outerSpan) * this._layoutPreviewScale); }; const fontSize = Math.min(scaledDown(docWidth / 3), scaledDown(docHeight / 3)); + + return ( - //
- // 100} - // NativeHeight={() => 100} - // pointerEvents={SnappingManager.IsDragging ? returnAll : returnNone} - // isAnnotationOverlay - // isAnnotationOverlayScrollable - // childDocumentsActive={returnFalse} - // fieldKey={this._props.fieldKey + '_annotations'} - // dropAction={dropActionType.move} - // select={emptyFunction} - // addDocument={returnFalse} - // removeDocument={returnFalse} - // moveDocument={returnFalse} - // renderDepth={this._props.renderDepth + 1}> - // {null} - // - //
-
+ Cast(doc.childLayoutTemplate, Doc, null)} + isContentActive={emptyFunction} + isAnyChildContentActive={() => true} + select={emptyFunction} + isSelected={returnFalse} + fieldKey={Doc.LayoutFieldKey(doc)} + addDocument={returnFalse} + moveDocument={returnFalse} + removeDocument={returnFalse} + PanelWidth={() => 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={this._props.addDocTab} + // eslint-disable-next-line no-use-before-define + pinToPres={() => undefined} + childFilters={returnEmptyFilter} + childFiltersByRanges={returnEmptyFilter} + searchFilterDocs={returnEmptyDoclist} + fitContentsToBox={returnTrue} + xPadding={0} + yPadding={0} + /> + {/*
@@ -1255,7 +1355,7 @@ export class DocCreatorMenu extends ObservableReactComponent { )) )}
- } + } */}
); }; @@ -1271,7 +1371,10 @@ export class DocCreatorMenu extends ObservableReactComponent { onPointerDown={e => this.setUpButtonClick(e, () => { specialFunc?.(); - runInAction(() => (this._layout.type = option)); + runInAction(() => { + this._layout.type = option; + this.updateRenderedDocCollection(); + }); }) }> {option} @@ -1304,12 +1407,13 @@ export class DocCreatorMenu extends ObservableReactComponent {
{this._layout.type ? this._layout.type.toUpperCase() : 'Choose Layout'}
- {layoutOption(LayoutType.Stacked)} - {layoutOption(LayoutType.Grid, undefined, () => { + {layoutOption(LayoutType.STACKED)} + {layoutOption(LayoutType.GRID, undefined, () => { if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length)); })} {layoutOption(LayoutType.Row)} {layoutOption(LayoutType.Column)} + {layoutOption(LayoutType.CAROUSEL3D)} {layoutOption(LayoutType.Custom, { borderBottom: `0px` })}
@@ -1367,7 +1471,7 @@ export class DocCreatorMenu extends ObservableReactComponent { 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._dataViz?.createDocsFromTemplate(templateInfo); + this._fullyRenderedDocs = this._dataViz?.createDocsFromTemplate(templateInfo) ?? []; }, 'make docs') ) }> @@ -1642,105 +1746,40 @@ type FieldSettings = { tl: [number, number]; br: [number, number]; opts: FieldOpts; - subfields?: Field[]; + subfields?: FieldSettings[]; types?: TemplateFieldType[]; sizes?: TemplateFieldSize[]; + isDecoration?: boolean; description?: string; }; -interface ConstructedField { - renderToDoc: (content: FieldType, doc: Doc) => Doc; - validSubfieldGroups: () => Field[]; -} - -class Field { - settings: FieldSettings; - parent: Field; - - constructor(settings: FieldSettings, parent: Field, ) { - this.settings = settings; - this.parent = parent; - } - - private calculateFontSize = (contWidth: number, contHeight: number, text: string, uppercase: boolean): number => { - const words: string[] = text.split(/\s+/).filter(Boolean); - - let currFontSize = 1; - let rowsCount = 1; - let currTextHeight = currFontSize * rowsCount * 2; - - while (currTextHeight <= contHeight) { - let wordIndex = 0; - let currentRowWidth = 0; - let wordsInCurrRow = 0; - rowsCount = 1; - - while (wordIndex < words.length) { - const word = words[wordIndex]; - const wordWidth = word.length * currFontSize * 0.5; - //console.log(wordWidth) - - if (currentRowWidth + wordWidth <= contWidth) { - currentRowWidth += wordWidth; - ++wordsInCurrRow; - } else { - if (words.length !== 1 && words.length > wordsInCurrRow) { - rowsCount++; - currentRowWidth = wordWidth; - wordsInCurrRow = 1; - } else { - break; - } - } - - wordIndex++; - } - - currTextHeight = rowsCount * currFontSize * 2; - - currFontSize += 1; - } - - return currFontSize - 1; - }; - - private getDimensions = (coords: { tl: [number, number]; br: [number, number] }, parentWidth: number, parentHeight: number): { width: number; height: number; coord: { x: number; y: number } } => { - const l = (coords.tl[0] * parentHeight) / 2; - const t = coords.tl[1] * parentWidth / 2; //prettier-ignore - const r = (coords.br[0] * parentHeight) / 2; - const b = coords.br[1] * parentWidth / 2; //prettier-ignore - const width = r - l; - const height = b - t; - const coord = { x: l, y: t }; - return { width, height, coord }; - }; - - private docWithBasicOpts = (factory: (children: unknown, options: DocumentOptions) => Doc, settings: FieldSettings): Doc => { - const x = settings.tl[0]; - const y = settings.tl[1]; - const height = settings. - return factory([], {...}) - } -} - -class TextField implements Field { - settings: FieldSettings; - parent: Field; - - constructor(settings: FieldSettings, parent: Field) { - this.settings = settings; - this.parent = parent; - } - - renderToDoc = (content: FieldType, doc: Doc): Doc => { - - return new Doc; - } - - validSubfieldGroups = () => { - return []; - } -} +// 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; @@ -1954,6 +1993,66 @@ export class TemplateLayouts { ], }; + // 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, @@ -2232,18 +2331,9 @@ export class FieldUtils { return { width, height, coord }; }; - public static docWithBasicOpts = (factory: (children: unknown, options: DocumentOptions) => Doc, settings: FieldSettings): Doc => { - const x = settings.tl[0]; - const y = settings.tl[1]; - const height = settings. - return factory([], {...}) - } - public static FreeformField = (coords: { tl: [number, number]; br: [number, number] }, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => { const { width, height, coord } = FieldUtils.getDimensions(coords, parentWidth, parentHeight); - - const docWithBasicOpts = Docs.Create.FreeformDocument([], { isDefaultTemplateDoc: true, _height: height, @@ -2325,4 +2415,50 @@ export class FieldUtils { }; } - +// 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 diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes.tsx index 8b288b269..fbb44e4a4 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes.tsx @@ -138,8 +138,8 @@ class TextField extends Field implements ConstructedField { } validSubfieldGroups = () => { - + return []; } -- cgit v1.2.3-70-g09d2 From 950ed52828496de265f5035360845b8295159d0e Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Sat, 19 Oct 2024 00:43:43 -0400 Subject: work on making preview rendering more responsive (only updating doc positions rather than making new collection) --- .../DataVizBox/DocCreatorMenu/DocCreatorMenu.scss | 5 + .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx | 135 +++++++++------------ 2 files changed, 60 insertions(+), 80 deletions(-) (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss') diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss index ec050289a..5b9586259 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss @@ -634,6 +634,8 @@ height: calc(100% - 30px); border: 1px solid rgb(180, 180, 180); border-radius: 5px; + -ms-overflow-style: none; + scrollbar-width: none; .docCreatorMenu-option-container{ width: 180px; @@ -686,6 +688,7 @@ } .docCreatorMenu-layout-preview-window-wrapper { + flex: 0 0 auto; display: flex; justify-content: center; align-items: center; @@ -693,6 +696,8 @@ height: 100%; position: relative; padding: 0px; + margin-left: 20px; + margin-right: 20px; &:hover .docCreatorMenu-zoom-button-container { display: block; diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index 8977a282e..c44fb2ee2 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -48,6 +48,7 @@ export class DocCreatorMenu extends ObservableReactComponent { private _ref: HTMLDivElement | null = null; @observable _fullyRenderedDocs: Doc[] = []; + @observable _renderedDocCollectionPreview: Doc | undefined = undefined; @observable _renderedDocCollection: Doc | undefined = undefined; @observable _templateDocs: Doc[] = []; @@ -123,7 +124,7 @@ export class DocCreatorMenu extends ObservableReactComponent { case LayoutType.GRID: return Math.ceil(this.docsToRender.length / (this._layout.columns ?? 1)) ?? 0; case LayoutType.CAROUSEL3D: - return 1; + return 1.75; default: return 1; } @@ -139,7 +140,7 @@ export class DocCreatorMenu extends ObservableReactComponent { case LayoutType.GRID: return this._layout.columns ?? 0; case LayoutType.CAROUSEL3D: - return 1.75; + return 2.85; default: return 1; } @@ -242,6 +243,10 @@ export class DocCreatorMenu extends ObservableReactComponent { 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: ''}})) } @@ -1129,12 +1134,23 @@ export class DocCreatorMenu extends ObservableReactComponent { @action updateXMargin = (input: string) => { this._layout.xMargin = Number(input); + setTimeout(() => { + if (!this._renderedDocCollection || !this._fullyRenderedDocs) return; + this.applyLayout(this._renderedDocCollection, this._fullyRenderedDocs); + this.updatePreview(this._renderedDocCollection); + }); }; @action updateYMargin = (input: string) => { this._layout.yMargin = Number(input); + setTimeout(() => { + if (!this._renderedDocCollection || !this._fullyRenderedDocs) return; + this.applyLayout(this._renderedDocCollection, this._fullyRenderedDocs); + this.updatePreview(this._renderedDocCollection); + }); }; @action updateColumns = (input: string) => { this._layout.columns = Number(input); + this.updateRenderedDocCollection(); }; get layoutConfigOptions() { @@ -1176,6 +1192,10 @@ export class DocCreatorMenu extends ObservableReactComponent { screenToLocalTransform = () => this._props.ScreenToLocalTransform(); applyLayout = (collection: Doc, docs: Doc[]) => { + const { horizontalSpan, verticalSpan } = this.previewInfo; + collection._height = verticalSpan; + collection._width = horizontalSpan; + const layout = this._layout; const columns: number = layout.columns ?? this.columnsCount; const xGap: number = layout.xMargin; @@ -1209,6 +1229,31 @@ export class DocCreatorMenu extends ObservableReactComponent { } }; + addDocAsResult = (doc: Doc) => { + doc.x = this._pageX; + doc.y = this._pageY; + this.closeMenu(); + //!!! will need to add to main collection when I refactor + } + + @computed + get previewInfo(){ + const docHeight: number = Number(this._fullyRenderedDocs[0]._height); + const docWidth: number = Number(this._fullyRenderedDocs[0]._width); + const layout = this._layout; + return { + docHeight: docHeight, + docWidth: docWidth, + horizontalSpan: (docWidth + layout.xMargin) * (this.columnsCount) - layout.xMargin, + verticalSpan: (docHeight + layout.yMargin) * (this.rowsCount) - layout.yMargin, + } + } + + updatePreview = (collection: Doc) => { + const wrapper: Doc = Docs.Create.FreeformDocument([collection], { _height: NumListCast(collection._height)[0], _width: NumListCast(collection._width)[0], title: ''}); + this._renderedDocCollectionPreview = wrapper; + } + /** * Updates the preview that shows how all docs will be rendered in the chosen collection type. @type the type of collection the docs should render to (ie. freeform, carousel, card) @@ -1216,13 +1261,8 @@ export class DocCreatorMenu extends ObservableReactComponent { updateRenderedDocCollection = () => { if (!this._fullyRenderedDocs) return; - const layout = this._layout; - - const docHeight: number = Number(this._fullyRenderedDocs[0]._height); - const docWidth: number = Number(this._fullyRenderedDocs[0]._width); - const horizontalSpan: number = (docWidth + layout.xMargin) * (this.columnsCount) - layout.xMargin; - const verticalSpan: number = (docHeight + layout.yMargin) * (this.rowsCount) - layout.yMargin; - const largerSpan: number = horizontalSpan > verticalSpan ? horizontalSpan : verticalSpan; + const { horizontalSpan, verticalSpan } = this.previewInfo; + //const largerSpan: number = horizontalSpan > verticalSpan ? horizontalSpan : verticalSpan; const collectionFactory = (): (docs: Doc[], options: DocumentOptions) => Doc => { switch (this._layout.type) { @@ -1237,8 +1277,8 @@ export class DocCreatorMenu extends ObservableReactComponent { const docWithBasicOpts: Doc = collectionFactory()(this._fullyRenderedDocs, { isDefaultTemplateDoc: true, - x: this._pageX, - y: this._pageY, + x: 40000, + y: 40000, _height: verticalSpan, _width: horizontalSpan, title: 'title', @@ -1252,32 +1292,18 @@ export class DocCreatorMenu extends ObservableReactComponent { const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; mainCollection.addDocument(docWithBasicOpts); - this._renderedDocCollection = wrapper; + this._renderedDocCollectionPreview = wrapper; + this._renderedDocCollection = docWithBasicOpts; } layoutPreviewContents = (outerSpan: number, altLayout?: DataVizTemplateLayout, small: boolean = false, id?: number) => { const doc: Doc | undefined = altLayout ? altLayout.template : this._selectedTemplate; if (!doc) return; - const layout = altLayout ? altLayout.layout : this._layout; - - const docWidth: number = Number(doc._width); - const docHeight: number = Number(doc._height); - const horizontalSpan: number = (docWidth + layout.xMargin) * (altLayout ? altLayout.columns : this.columnsCount) - layout.xMargin; - const verticalSpan: number = (docHeight + layout.yMargin) * (altLayout ? altLayout.rows : this.rowsCount) - layout.yMargin; - const largerSpan: number = horizontalSpan > verticalSpan ? horizontalSpan : verticalSpan; - - const scaledDown = (input: number) => { - return input / ((largerSpan / outerSpan) * this._layoutPreviewScale); - }; - const fontSize = Math.min(scaledDown(docWidth / 3), scaledDown(docHeight / 3)); - - - return (
Cast(doc.childLayoutTemplate, Doc, null)} isContentActive={emptyFunction} @@ -1305,57 +1331,6 @@ export class DocCreatorMenu extends ObservableReactComponent { xPadding={0} yPadding={0} /> - {/*
- - - {altLayout ? ( - - ) : null} -
- { -
- {this._layout.type === LayoutType.Stacked ? ( -
- All -
- ) : ( - this.docsToRender.map(num => ( -
this._dataViz?.setSpecialHighlightedRow(num)} - onMouseLeave={() => this._dataViz?.setSpecialHighlightedRow(undefined)} - className="docCreatorMenu-layout-preview-item" - style={{ - width: scaledDown(docWidth), - height: scaledDown(docHeight), - fontSize: fontSize, - }}> - {num} -
- )) - )} -
- } */}
); }; @@ -1471,7 +1446,7 @@ export class DocCreatorMenu extends ObservableReactComponent { 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._fullyRenderedDocs = this._dataViz?.createDocsFromTemplate(templateInfo) ?? []; + this._renderedDocCollection && this.addDocAsResult(this._renderedDocCollection); }, 'make docs') ) }> -- cgit v1.2.3-70-g09d2 From dd27b5aaafa2a6976e7745d57da6521159da2a83 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Tue, 5 Nov 2024 05:28:18 -0500 Subject: fixed a bunch of slowdowns --- .../DataVizBox/DocCreatorMenu/DocCreatorMenu.scss | 1 + .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx | 137 ++++++++++----------- 2 files changed, 63 insertions(+), 75 deletions(-) (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss') diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss index 5b9586259..7858adc4c 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss @@ -350,6 +350,7 @@ border: 0px; padding: 0px; font-size: 15px; + z-index: 1000; &.right { position: absolute; diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index fcf237e02..f075dc737 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -66,10 +66,10 @@ export class DocCreatorMenu extends ObservableReactComponent { @observable _layoutPreview: boolean = true; @observable _layoutPreviewScale: number = 1; @observable _savedLayouts: DataVizTemplateLayout[] = []; - @observable _expandedPreview: { icon: ImageField; doc: Doc } | undefined = undefined; + @observable _expandedPreview: Doc | undefined = undefined; @observable _suggestedTemplates: Template[] = []; - @observable _suggestedTemplateDocs + @observable _suggestedTemplatePreviews: {doc: Doc, template: Template}[] = []; @observable _GPTOpt: boolean = false; @observable _userPrompt: string = ''; @observable _callCount: number = 0; @@ -113,8 +113,16 @@ export class DocCreatorMenu extends ObservableReactComponent { @action setTemplateDocs = (docs: Doc[]) => { this._templateDocs = docs.map(doc => (doc.annotationOn ? DocCast(doc.annotationOn) : doc)); }; + @action updateTemplatePreviews = (templates: Template[]) => { + this._suggestedTemplatePreviews = templates.map(template => { + const doc = template.mainField.renderedDoc(); + const wrapper: Doc = Docs.Create.FreeformDocument([doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''}); + return {doc: wrapper, template: template}; + }); + } @action setSuggestedTemplates = (templates: Template[]) => { this._suggestedTemplates = templates; + this.updateTemplatePreviews(templates); }; @computed get docsToRender() { @@ -157,45 +165,6 @@ export class DocCreatorMenu extends ObservableReactComponent { return StrListCast(this._dataViz?.layoutDoc._dataViz_axes); } - @computed get selectedTemplateDocs(): {doc: React.JSX.Element, template: Template}[] { - const docs: {doc: Doc, template: Template}[] = this._suggestedTemplates?.map(template => { return {doc: template.mainField.renderedDoc(), template: template}}); - const docPreviews: {doc: Doc, template: Template}[] = docs.map(info => - {return {doc: Docs.Create.FreeformDocument([info.doc], { _height: NumListCast(info.doc._height)[0], _width: NumListCast(info.doc._width)[0], title: ''}), template: info.template} - }); - const renderedComponents = docPreviews.map(info => - {return {doc: Cast(info.doc.childLayoutTemplate, Doc, null)} - isContentActive={emptyFunction} - isAnyChildContentActive={() => true} - select={emptyFunction} - isSelected={returnFalse} - fieldKey={Doc.LayoutFieldKey(info.doc)} - addDocument={returnFalse} - moveDocument={returnFalse} - removeDocument={returnFalse} - PanelWidth={() => 100} - PanelHeight={() => 100} - ScreenToLocalTransform={() => new Transform(-this._pageX - 5,-this._pageY - 35, 1)} - renderDepth={5} - whenChildContentsActiveChanged={emptyFunction} - focus={emptyFunction} - styleProvider={DefaultStyleProvider} - addDocTab={this._props.addDocTab} - // eslint-disable-next-line no-use-before-define - pinToPres={() => undefined} - childFilters={returnEmptyFilter} - childFiltersByRanges={returnEmptyFilter} - searchFilterDocs={returnEmptyDoclist} - fitContentsToBox={returnTrue} - xPadding={0} - yPadding={0} - />, template: info.template} - }); - return renderedComponents; - } - @computed get fieldsInfos(): Col[] { const colInfo = this._dataViz?.colsInfo; return this.selectedFields @@ -274,14 +243,6 @@ export class DocCreatorMenu extends ObservableReactComponent { componentDidMount() { document.addEventListener('pointerdown', this.onPointerDown, true); document.addEventListener('pointerup', this.onPointerUp); - this._disposers.templates = reaction( - () => this._templateDocs.slice(), - docs => this.updateIcons(docs) - ); - this._disposers.gpt = reaction( - () => this._suggestedTemplates.slice(), - templates => this.updateIcons(templates.map(t => t.doc)) - ); //this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {this.generateTemplates('')}) this._disposers.lightbox = reaction( () => LightboxView.LightboxDoc(), @@ -302,11 +263,6 @@ export class DocCreatorMenu extends ObservableReactComponent { document.removeEventListener('pointerup', this.onPointerUp); } - updateIcons = (docs: Doc[]) => { - console.log('called') - docs.map(this.getIcon); - }; - @action updateSelectedCols = (cols: string[]) => { this._selectedCols; @@ -450,7 +406,7 @@ export class DocCreatorMenu extends ObservableReactComponent { testTemplate = async () => { - console.log(this.templateManager.templates) + //console.log(this.templateManager.templates) this.forceUpdate(); @@ -723,8 +679,6 @@ export class DocCreatorMenu extends ObservableReactComponent { const cols = this.fieldsInfos; const templates = this.templateManager.getValidTemplates(cols); - console.log('templates: ', templates) - const assignments: [Template, { [field: number]: Col }][] = await this.assignColsToFields(templates, cols); const renderedTemplatePromises: Promise