From 18774b42e3c8e1e899978fe9f16a4d123adee803 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts Date: Wed, 1 Jan 2025 22:32:19 -0800 Subject: monorepo setup --- src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 2 +- src/client/views/nodes/DataVizBox/DataVizBox.tsx | 2 +- src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx | 2 +- src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx | 2 +- src/client/views/nodes/DataVizBox/components/Histogram.tsx | 2 +- src/client/views/nodes/DataVizBox/components/LineChart.tsx | 2 +- src/client/views/nodes/DataVizBox/components/PieChart.tsx | 2 +- src/client/views/nodes/DataVizBox/components/TableBox.tsx | 2 +- src/client/views/nodes/FontIconBox/FontIconBox.tsx | 2 +- src/client/views/nodes/ImageBox.tsx | 2 +- src/client/views/nodes/MapBox/DirectionsAnchorMenu.tsx | 2 +- src/client/views/nodes/MapBox/MapAnchorMenu.tsx | 2 +- src/client/views/nodes/MapBox/MapBox.tsx | 2 +- src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx | 2 +- src/client/views/nodes/generativeFill/GenerativeFill.tsx | 2 +- src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx | 2 +- src/client/views/nodes/trails/PresBox.tsx | 2 +- 17 files changed, 17 insertions(+), 17 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 3905403ea..3cbfb1796 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -1,4 +1,4 @@ -import { Colors } from 'browndash-components'; +import { Colors } from '@dash/components'; import { action, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx index 7925410e2..7026c3b01 100644 --- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx +++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx @@ -1,6 +1,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Checkbox } from '@mui/material'; -import { Colors, Toggle, ToggleType, Type } from 'browndash-components'; +import { Colors, Toggle, ToggleType, Type } from '@dash/components'; import { IReactionDisposer, ObservableMap, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx index 7c601185e..88e59d30f 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Colors } from 'browndash-components'; +import { Colors } from '@dash/components'; import { action, computed, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import { IDisposer } from 'mobx-utils'; diff --git a/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx index a6a6a6b46..8ae29a88c 100644 --- a/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx +++ b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx @@ -1,4 +1,4 @@ -import { IconButton } from 'browndash-components'; +import { IconButton } from '@dash/components'; import { action, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx index 14d7e9bf6..5a9442d2f 100644 --- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx +++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { ColorPicker, EditableText, IconButton, Size, Type } from 'browndash-components'; +import { ColorPicker, EditableText, IconButton, Size, Type } from '@dash/components'; import * as d3 from 'd3'; import { IReactionDisposer, action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx index c2f5388a2..b55d509ff 100644 --- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx +++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx @@ -1,4 +1,4 @@ -import { Button, EditableText, Size } from 'browndash-components'; +import { Button, EditableText, Size } from '@dash/components'; import * as d3 from 'd3'; import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx index 19ea8e4fa..86e6ad8e4 100644 --- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx +++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx @@ -1,5 +1,5 @@ import { Checkbox } from '@mui/material'; -import { ColorPicker, EditableText, Size, Type } from 'browndash-components'; +import { ColorPicker, EditableText, Size, Type } from '@dash/components'; import * as d3 from 'd3'; import { IReactionDisposer, action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx index fe596bc36..7ef4bca6b 100644 --- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx +++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx @@ -1,4 +1,4 @@ -import { Button, Colors, Type } from 'browndash-components'; +import { Button, Colors, Type } from '@dash/components'; import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx index 8c138c2ee..60b2a7519 100644 --- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx +++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx @@ -1,6 +1,6 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Button, ColorPicker, Dropdown, DropdownType, IconButton, IListItemProps, MultiToggle, NumberDropdown, NumberDropdownType, Popup, Size, Toggle, ToggleType, Type } from 'browndash-components'; +import { Button, ColorPicker, Dropdown, DropdownType, IconButton, IListItemProps, MultiToggle, NumberDropdown, NumberDropdownType, Popup, Size, Toggle, ToggleType, Type } from '@dash/components'; import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 8c7ec959e..423a73f44 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -1,7 +1,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; import axios from 'axios'; -import { Colors } from 'browndash-components'; +import { Colors } from '@dash/components'; import { action, computed, IReactionDisposer, makeObservable, observable, ObservableMap, reaction } from 'mobx'; import { observer } from 'mobx-react'; import { extname } from 'path'; diff --git a/src/client/views/nodes/MapBox/DirectionsAnchorMenu.tsx b/src/client/views/nodes/MapBox/DirectionsAnchorMenu.tsx index b8fd8ac6a..8784a709a 100644 --- a/src/client/views/nodes/MapBox/DirectionsAnchorMenu.tsx +++ b/src/client/views/nodes/MapBox/DirectionsAnchorMenu.tsx @@ -1,6 +1,6 @@ import { IconLookup, faAdd, faCalendarDays, faRoute } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { IconButton } from 'browndash-components'; +import { IconButton } from '@dash/components'; import { IReactionDisposer, ObservableMap, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; diff --git a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx index 103a35434..87469b50e 100644 --- a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx +++ b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx @@ -2,7 +2,7 @@ import { IconLookup, faAdd, faArrowDown, faArrowLeft, faArrowsRotate, faBicycle, faCalendarDays, faCar, faDiamondTurnRight, faEdit, faPersonWalking, faRoute } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Autocomplete, Checkbox, FormControlLabel, TextField } from '@mui/material'; -import { IconButton } from 'browndash-components'; +import { IconButton } from '@dash/components'; import { Position } from 'geojson'; import { IReactionDisposer, ObservableMap, action, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index 4a436319b..c4bb7c47d 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -2,7 +2,7 @@ import { IconLookup, faCircleXmark, faGear, faPause, faPlay, faRotate } from '@f import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Checkbox, FormControlLabel, TextField } from '@mui/material'; import * as turf from '@turf/turf'; -import { IconButton, Size, Type } from 'browndash-components'; +import { IconButton, Size, Type } from '@dash/components'; import * as d3 from 'd3'; import { Feature, FeatureCollection, GeoJsonProperties, Geometry, LineString, Position } from 'geojson'; import mapboxgl, { LngLatBoundsLike, MapLayerMouseEvent } from 'mapbox-gl'; diff --git a/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx b/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx index d5d8f8afa..95f89a573 100644 --- a/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx +++ b/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Button, EditableText, IconButton, Type } from 'browndash-components'; +import { Button, EditableText, IconButton, Type } from '@dash/components'; import { IReactionDisposer, ObservableMap, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; diff --git a/src/client/views/nodes/generativeFill/GenerativeFill.tsx b/src/client/views/nodes/generativeFill/GenerativeFill.tsx index 261eb4bb4..d2910469d 100644 --- a/src/client/views/nodes/generativeFill/GenerativeFill.tsx +++ b/src/client/views/nodes/generativeFill/GenerativeFill.tsx @@ -4,7 +4,7 @@ /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable react/function-component-definition */ import { Checkbox, FormControlLabel, Slider, TextField } from '@mui/material'; -import { IconButton } from 'browndash-components'; +import { IconButton } from '@dash/components'; import * as React from 'react'; import { useEffect, useRef, useState } from 'react'; import { CgClose } from 'react-icons/cg'; diff --git a/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx b/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx index fe22b273d..d3b456273 100644 --- a/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx +++ b/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx @@ -1,7 +1,7 @@ import './GenerativeFillButtons.scss'; import * as React from 'react'; import ReactLoading from 'react-loading'; -import { Button, IconButton, Type } from 'browndash-components'; +import { Button, IconButton, Type } from '@dash/components'; import { AiOutlineInfo } from 'react-icons/ai'; import { activeColor } from './generativeFillUtils/generativeFillConstants'; diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index 06869717a..f23b32a48 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -1,7 +1,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; import Slider from '@mui/material/Slider'; -import { Button, Dropdown, DropdownType, IconButton, Toggle, ToggleType, Type } from 'browndash-components'; +import { Button, Dropdown, DropdownType, IconButton, Toggle, ToggleType, Type } from '@dash/components'; import { IReactionDisposer, ObservableSet, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -- cgit v1.2.3-70-g09d2 From 6f8bb6d69d9e671aa6dc4b076f913a63fa73f9f2 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 6 Jan 2025 15:16:28 -0500 Subject: pdf fixes for latest version of PDFjs. --- src/client/views/nodes/PDFBox.tsx | 4 ++-- src/client/views/nodes/WebBox.tsx | 5 +++-- src/client/views/pdf/PDFViewer.scss | 12 ++++++++++++ src/client/views/pdf/PDFViewer.tsx | 11 +++++++---- 4 files changed, 24 insertions(+), 8 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 2e4c87d38..37807e818 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -267,8 +267,8 @@ export class PDFBox extends ViewBoxAnnotatableComponent() { @action loaded = (nw: number, nh: number, np: number) => { this.dataDoc[this._props.fieldKey + '_numPages'] = np; - Doc.SetNativeWidth(this.dataDoc, Math.max(Doc.NativeWidth(this.dataDoc), (nw * 96) / 72)); - Doc.SetNativeHeight(this.dataDoc, (nh * 96) / 72); + Doc.SetNativeWidth(this.dataDoc, Math.max(Doc.NativeWidth(this.dataDoc), nw * Pdfjs.PixelsPerInch.PDF_TO_CSS_UNITS)); + Doc.SetNativeHeight(this.dataDoc, nh * Pdfjs.PixelsPerInch.PDF_TO_CSS_UNITS); this.layoutDoc._height = NumCast(this.layoutDoc._width) / (Doc.NativeAspect(this.dataDoc) || 1); !this.Document._layout_fitWidth && (this.Document._height = NumCast(this.Document._width) * (nh / nw)); }; diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 9ba4f8ead..ffeb574e9 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -202,8 +202,9 @@ export class WebBox extends ViewBoxAnnotatableComponent() { () => this.layoutDoc._layout_autoHeight, layoutAutoHeight => { if (layoutAutoHeight) { - this.layoutDoc._nativeHeight = NumCast(this.Document[this._props.fieldKey + '_nativeHeight']); - this._props.setHeight?.(NumCast(this.Document[this._props.fieldKey + '_nativeHeight']) * (this._props.NativeDimScaling?.() || 1)); + const nh = NumCast(this.Document[this._props.fieldKey + '_nativeHeight'], NumCast(this.Document.nativeHeight)); + this.layoutDoc._nativeHeight = nh; + this._props.setHeight?.(nh * (this._props.NativeDimScaling?.() || 1)); } } ); diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss index a225c4b59..030251762 100644 --- a/src/client/views/pdf/PDFViewer.scss +++ b/src/client/views/pdf/PDFViewer.scss @@ -7,6 +7,10 @@ left: 0; } +:root { + --devicePixelRatio: 1; // the actual value of this will be set in PDFViewer.tsx; +} + .pdfViewerDash, .pdfViewerDash-interactive { position: absolute; @@ -19,9 +23,16 @@ overflow-x: hidden; transform-origin: top left; + .annotationLayer { + transform: scale(var(--devicePixelRatio)); + } .textLayer { opacity: unset; mix-blend-mode: multiply; // bcz: makes text fuzzy! + transform: scale(var(--devicePixelRatio)); + } + [data-main-rotation='90'] { + transform: scale(var(--devicePixelRatio)) rotate(90deg) translateY(-100%); } .textLayer ::selection { background: #accef76a; @@ -39,6 +50,7 @@ .page { position: relative; border: unset; + height: 100% !important; } .pdfViewerDash-text-selected { diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 920c9ea8b..5594254b3 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -152,17 +152,20 @@ export class PDFViewer extends ObservableReactComponent { initialLoad = async () => { if (this._pageSizes.length === 0) { this._pageSizes = Array<{ width: number; height: number }>(this._props.pdf.numPages); + const devicePixelRatio = window.devicePixelRatio; + document.documentElement?.style.setProperty('--devicePixelRatio', devicePixelRatio.toString()); // set so that css can use this to adjust various PDFJs divs await Promise.all( this._pageSizes.map((val, i) => this._props.pdf.getPage(i + 1).then( action((page: Pdfjs.PDFPageProxy) => { const page0or180 = page.rotate === 0 || page.rotate === 180; this._pageSizes.splice(i, 1, { - width: page.view[page0or180 ? 2 : 3] - page.view[page0or180 ? 0 : 1], - height: page.view[page0or180 ? 3 : 2] - page.view[page0or180 ? 1 : 0], + width: page.view[page0or180 ? 2 : 3] * devicePixelRatio - page.view[page0or180 ? 0 : 1] * devicePixelRatio, + height: page.view[page0or180 ? 3 : 2] * devicePixelRatio - page.view[page0or180 ? 1 : 0] * devicePixelRatio, }); if (i === this._props.pdf.numPages - 1) { - this._props.loaded?.(page.view[page0or180 ? 2 : 3] - page.view[page0or180 ? 0 : 1], page.view[page0or180 ? 3 : 2] - page.view[page0or180 ? 1 : 0], this._props.pdf.numPages); + const lastPage = this._pageSizes.lastElement(); + this._props.loaded?.(lastPage.width, lastPage.height, this._props.pdf.numPages); } }) ) @@ -170,7 +173,7 @@ export class PDFViewer extends ObservableReactComponent { ); } runInAction(() => { - this._scrollHeight = (this._pageSizes.reduce((size, page) => size + page.height, 0) * 96) / 72; + this._scrollHeight = this._pageSizes.reduce((size, page) => size + page.height, 0) * Pdfjs.PixelsPerInch.PDF_TO_CSS_UNITS; }); }; -- cgit v1.2.3-70-g09d2 From 68af8fffb3111870dd84d4280fdd73b05832dfd2 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 6 Jan 2025 15:59:25 -0500 Subject: more pdf tweaks --- src/client/views/nodes/PDFBox.tsx | 14 +++++----- src/client/views/pdf/PDFViewer.tsx | 52 ++++++++++++++++++-------------------- 2 files changed, 32 insertions(+), 34 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 37807e818..1de4d2512 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -267,8 +267,8 @@ export class PDFBox extends ViewBoxAnnotatableComponent() { @action loaded = (nw: number, nh: number, np: number) => { this.dataDoc[this._props.fieldKey + '_numPages'] = np; - Doc.SetNativeWidth(this.dataDoc, Math.max(Doc.NativeWidth(this.dataDoc), nw * Pdfjs.PixelsPerInch.PDF_TO_CSS_UNITS)); - Doc.SetNativeHeight(this.dataDoc, nh * Pdfjs.PixelsPerInch.PDF_TO_CSS_UNITS); + Doc.SetNativeWidth(this.dataDoc, Math.max(Doc.NativeWidth(this.dataDoc), nw)); + Doc.SetNativeHeight(this.dataDoc, nh); this.layoutDoc._height = NumCast(this.layoutDoc._width) / (Doc.NativeAspect(this.dataDoc) || 1); !this.Document._layout_fitWidth && (this.Document._height = NumCast(this.Document._width) * (nh / nw)); }; @@ -584,7 +584,9 @@ export class PDFBox extends ViewBoxAnnotatableComponent() { @computed get renderPdfView() { TraceMobx(); const previewScale = this._previewNativeWidth ? 1 - this.sidebarWidth() / this._previewNativeWidth : 1; - const scale = previewScale * (this._props.NativeDimScaling?.() || 1); + // PDFjs scales page renderings to be the render container size times the ratio of CSS/print pixels. + // So we have to scale the render container down by this ratio, so that the renderings will match the size of the container + const viewScale = (previewScale * (this._props.NativeDimScaling?.() || 1)) / Pdfjs.PixelsPerInch.PDF_TO_CSS_UNITS; return !this._pdf ? null : (
() {
this.sidebarBtnDown(e, false)} />
{ } }; - @observable _scrollHeight = 0; + @computed get _scrollHeight() { + return this._pageSizes.reduce((size, page) => size + page.height, 0) * Pdfjs.PixelsPerInch.PDF_TO_CSS_UNITS; + } - @action - initialLoad = async () => { + initialLoad = () => { if (this._pageSizes.length === 0) { - this._pageSizes = Array<{ width: number; height: number }>(this._props.pdf.numPages); const devicePixelRatio = window.devicePixelRatio; - document.documentElement?.style.setProperty('--devicePixelRatio', devicePixelRatio.toString()); // set so that css can use this to adjust various PDFJs divs - await Promise.all( - this._pageSizes.map((val, i) => - this._props.pdf.getPage(i + 1).then( - action((page: Pdfjs.PDFPageProxy) => { - const page0or180 = page.rotate === 0 || page.rotate === 180; - this._pageSizes.splice(i, 1, { - width: page.view[page0or180 ? 2 : 3] * devicePixelRatio - page.view[page0or180 ? 0 : 1] * devicePixelRatio, - height: page.view[page0or180 ? 3 : 2] * devicePixelRatio - page.view[page0or180 ? 1 : 0] * devicePixelRatio, - }); - if (i === this._props.pdf.numPages - 1) { - const lastPage = this._pageSizes.lastElement(); - this._props.loaded?.(lastPage.width, lastPage.height, this._props.pdf.numPages); - } - }) - ) + document.documentElement?.style.setProperty('--devicePixelRatio', window.devicePixelRatio.toString()); // set so that css can use this to adjust various PDFJs divs + Promise.all( + numberRange(this._props.pdf.numPages).map(i => + this._props.pdf.getPage(i + 1).then(page => { + const page0or180 = page.rotate === 0 || page.rotate === 180; + return { + width: page.view[page0or180 ? 2 : 3] * devicePixelRatio - page.view[page0or180 ? 0 : 1] * devicePixelRatio, + height: page.view[page0or180 ? 3 : 2] * devicePixelRatio - page.view[page0or180 ? 1 : 0] * devicePixelRatio, + }; + }) ) + ).then( + action(pages => { + this._pageSizes = pages; + const lastPage = pages.lastElement(); + this._props.loaded?.(lastPage.width, lastPage.height, this._props.pdf.numPages); + this.createPdfViewer(); + }) ); } - runInAction(() => { - this._scrollHeight = this._pageSizes.reduce((size, page) => size + page.height, 0) * Pdfjs.PixelsPerInch.PDF_TO_CSS_UNITS; - }); }; _scrollStopper: undefined | (() => void); @@ -200,14 +198,12 @@ export class PDFViewer extends ObservableReactComponent { crop = (region: Doc | undefined, addCrop?: boolean) => this._props.crop(region, addCrop); @action - setupPdfJsViewer = async () => { + setupPdfJsViewer = () => { if (this._viewerIsSetup) return; this._viewerIsSetup = true; this._showWaiting = true; this._props.setPdfViewer(this); - await this.initialLoad(); - - this.createPdfViewer(); + this.initialLoad(); }; pagesinit = () => { -- cgit v1.2.3-70-g09d2 From 93ee735e435de5949a0eec54c07537c4de2eedf4 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 7 Jan 2025 01:24:55 -0500 Subject: fixed pdfs/marqueeAnnotator so that you can add rectangle annotations. --- src/client/views/MarqueeAnnotator.tsx | 5 ++-- src/client/views/nodes/DataVizBox/DataVizBox.tsx | 1 + src/client/views/nodes/ImageBox.tsx | 6 ++--- src/client/views/nodes/PDFBox.scss | 11 ++++++++ src/client/views/nodes/PDFBox.tsx | 34 +++++++++++------------- src/client/views/nodes/VideoBox.tsx | 1 + src/client/views/nodes/WebBox.tsx | 1 + src/client/views/pdf/PDFViewer.tsx | 25 +++++++++-------- 8 files changed, 48 insertions(+), 36 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/MarqueeAnnotator.tsx b/src/client/views/MarqueeAnnotator.tsx index fa1123a2d..02516264c 100644 --- a/src/client/views/MarqueeAnnotator.tsx +++ b/src/client/views/MarqueeAnnotator.tsx @@ -15,18 +15,19 @@ import './MarqueeAnnotator.scss'; import { DocumentView } from './nodes/DocumentView'; import { ObservableReactComponent } from './ObservableReactComponent'; import { AnchorMenu } from './pdf/AnchorMenu'; +import { Transform } from '../util/Transform'; export interface MarqueeAnnotatorProps { Document: Doc; down?: number[]; scrollTop: number; - isNativeScaled?: boolean; scaling?: () => number; annotationLayerScaling?: () => number; annotationLayerScrollTop: number; containerOffset?: () => number[]; marqueeContainer: HTMLDivElement; docView: () => DocumentView; + screenTransform: () => Transform; savedAnnotations: () => ObservableMap; selectionText: () => string; annotationLayer: HTMLDivElement; @@ -157,7 +158,7 @@ export class MarqueeAnnotator extends ObservableReactComponent { const { marqueeContainer } = this.props; - const containerXf = this.props.isNativeScaled ? this.props.docView().screenToContentsTransform() : this.props.docView().screenToViewTransform(); + const containerXf = this.props.screenTransform(); const boundingRect = marqueeContainer.getBoundingClientRect(); const center = { x: boundingRect.x + boundingRect.width / 2, y: boundingRect.y + boundingRect.height / 2 }; const downVec = Utils.rotPt(down[0] - center.x, diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx index 7026c3b01..b874d077b 100644 --- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx +++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx @@ -832,6 +832,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() { annotationLayerScrollTop={NumCast(this.Document._layout_scrollTop)} scaling={returnOne} docView={this.DocumentView} + screenTransform={this.DocumentView().screenToViewTransform} addDocument={this.sidebarAddDocument} finishMarquee={this.finishMarquee} savedAnnotations={this.savedAnnotations} diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 423a73f44..de8a9ad21 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -39,7 +39,6 @@ import { FocusViewOptions } from './FocusViewOptions'; import './ImageBox.scss'; import { OpenWhere } from './OpenWhere'; import { Upload } from '../../../server/SharedMediaTypes'; -import { ImageUtils } from '../../util/Import & Export/ImageUtils'; export class ImageEditorData { // eslint-disable-next-line no-use-before-define @@ -268,7 +267,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { const anchy = NumCast(cropping.y); const anchw = NumCast(cropping._width); const anchh = NumCast(cropping._height); - const viewScale = NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']) / anchw; + const viewScale = NumCast(this.dataDoc[this.fieldKey + '_nativeHeight']) / anchh; cropping.title = 'crop: ' + this.Document.title; cropping.x = NumCast(this.Document.x) + NumCast(this.layoutDoc._width); cropping.y = NumCast(this.Document.y); @@ -286,9 +285,9 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { croppingProto.data_nativeWidth = anchw; croppingProto.data_nativeHeight = anchh; croppingProto.freeform_scale = viewScale; - croppingProto.freeform_scale_min = viewScale; croppingProto.freeform_panX = anchx / viewScale; croppingProto.freeform_panY = anchy / viewScale; + croppingProto.freeform_scale_min = viewScale; croppingProto.freeform_panX_min = anchx / viewScale; croppingProto.freeform_panX_max = anchw / viewScale; croppingProto.freeform_panY_min = anchy / viewScale; @@ -593,6 +592,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { annotationLayerScrollTop={0} scaling={returnOne} annotationLayerScaling={this._props.NativeDimScaling} + screenTransform={this.DocumentView().screenToViewTransform} docView={this.DocumentView} addDocument={this.addDocument} finishMarquee={this.finishMarquee} diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index 7bca1230f..f6908d5fd 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -250,6 +250,17 @@ cursor: ew-resize; background: lightGray; } +.pdfBox-container { + position: absolute; + transform-origin: top left; + top: 0; +} +.pdfBox-sidebarContainer { + position: absolute; + height: 100%; + right: 0; + top: 0; +} .pdfBox-interactive { width: 100%; diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 1de4d2512..06b75e243 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as Pdfjs from 'pdfjs-dist'; import 'pdfjs-dist/web/pdf_viewer.css'; @@ -40,8 +40,11 @@ export class PDFBox extends ViewBoxAnnotatableComponent() { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PDFBox, fieldKey); } + static pdfcache = new Map(); + static pdfpromise = new Map>(); public static openSidebarWidth = 250; public static sidebarResizerWidth = 5; + private _searchString: string = ''; private _initialScrollTarget: Opt; private _pdfViewer: PDFViewer | undefined; @@ -63,11 +66,8 @@ export class PDFBox extends ViewBoxAnnotatableComponent() { const nh = Doc.NativeHeight(this.Document, this.dataDoc) || 1200; !this.Document._layout_fitWidth && (this.Document._height = NumCast(this.Document._width) * (nh / nw)); if (this.pdfUrl) { - if (PDFBox.pdfcache.get(this.pdfUrl.url.href)) - runInAction(() => { - this._pdf = PDFBox.pdfcache.get(this.pdfUrl!.url.href); - }); - else if (PDFBox.pdfpromise.get(this.pdfUrl.url.href)) + this._pdf = PDFBox.pdfcache.get(this.pdfUrl.url.href); + !this._pdf && PDFBox.pdfpromise.get(this.pdfUrl.url.href)?.then( action(pdf => { this._pdf = pdf; @@ -265,12 +265,12 @@ export class PDFBox extends ViewBoxAnnotatableComponent() { }; @action - loaded = (nw: number, nh: number, np: number) => { - this.dataDoc[this._props.fieldKey + '_numPages'] = np; - Doc.SetNativeWidth(this.dataDoc, Math.max(Doc.NativeWidth(this.dataDoc), nw)); - Doc.SetNativeHeight(this.dataDoc, nh); + loaded = (p: { width: number; height: number }, pages: number) => { + this.dataDoc[this._props.fieldKey + '_numPages'] = pages; + Doc.SetNativeWidth(this.dataDoc, Math.max(Doc.NativeWidth(this.dataDoc), p.width)); + Doc.SetNativeHeight(this.dataDoc, p.height); this.layoutDoc._height = NumCast(this.layoutDoc._width) / (Doc.NativeAspect(this.dataDoc) || 1); - !this.Document._layout_fitWidth && (this.Document._height = NumCast(this.Document._width) * (nh / nw)); + !this.Document._layout_fitWidth && (this.Document._height = NumCast(this.Document._width) * (p.height / p.width)); }; override search = action((searchString: string, bwd?: boolean, clear: boolean = false) => { @@ -596,13 +596,11 @@ export class PDFBox extends ViewBoxAnnotatableComponent() { }}>
this.sidebarBtnDown(e, false)} />
() { focus={this.focus} url={this.pdfUrl!.url.pathname} anchorMenuClick={this.anchorMenuClick} - loaded={!Doc.NativeAspect(this.dataDoc) ? this.loaded : undefined} + loaded={Doc.NativeAspect(this.dataDoc) ? emptyFunction : this.loaded} setPdfViewer={this.setPdfViewer} addDocument={this.addDocument} moveDocument={this.moveDocument} @@ -624,14 +622,14 @@ export class PDFBox extends ViewBoxAnnotatableComponent() { crop={this.crop} />
-
{this.sidebarCollection}
+
+ {this.sidebarCollection} +
{this.settingsPanel()}
); } - static pdfcache = new Map(); - static pdfpromise = new Map>(); render() { TraceMobx(); const pdfView = !this._pdf ? null : this.renderPdfView; diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 3bf7de2fe..9adee53e8 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -1023,6 +1023,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent() { scaling={returnOne} annotationLayerScaling={this._props.NativeDimScaling} docView={this.DocumentView} + screenTransform={this.DocumentView().screenToViewTransform} containerOffset={this.marqueeOffset} addDocument={this.addDocWithTimecode} finishMarquee={this.finishMarquee} diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index ffeb574e9..6026d9ca7 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -1196,6 +1196,7 @@ export class WebBox extends ViewBoxAnnotatableComponent() { scaling={this._props.NativeDimScaling} addDocument={this.addDocumentWrapper} docView={this.DocumentView} + screenTransform={this.DocumentView().screenToViewTransform} finishMarquee={this.finishMarquee} savedAnnotations={this.savedAnnotationsCreator} selectionText={this.selectionText} diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 722492e8d..ca7f72811 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -30,6 +30,7 @@ import { GPTPopup } from './GPTPopup/GPTPopup'; import './PDFViewer.scss'; import { GPTCallType, gptAPICall } from '../../apis/gpt/GPT'; import ReactLoading from 'react-loading'; +import { Transform } from '../../util/Transform'; interface IViewerProps extends FieldViewProps { pdfBox: PDFBox; @@ -40,7 +41,7 @@ interface IViewerProps extends FieldViewProps { pdf: Pdfjs.PDFDocumentProxy; url: string; sidebarAddDoc: (doc: Doc | Doc[], sidebarKey?: string | undefined) => boolean; - loaded?: (nw: number, nh: number, np: number) => void; + loaded: (p: { width: number; height: number }, pages: number) => void; // eslint-disable-next-line no-use-before-define setPdfViewer: (view: PDFViewer) => void; anchorMenuClick?: () => undefined | ((anchor: Doc) => void); @@ -151,24 +152,21 @@ export class PDFViewer extends ObservableReactComponent { } initialLoad = () => { + const page0or180 = (page: { rotate: number }) => page.rotate === 0 || page.rotate === 180; if (this._pageSizes.length === 0) { const devicePixelRatio = window.devicePixelRatio; document.documentElement?.style.setProperty('--devicePixelRatio', window.devicePixelRatio.toString()); // set so that css can use this to adjust various PDFJs divs Promise.all( numberRange(this._props.pdf.numPages).map(i => - this._props.pdf.getPage(i + 1).then(page => { - const page0or180 = page.rotate === 0 || page.rotate === 180; - return { - width: page.view[page0or180 ? 2 : 3] * devicePixelRatio - page.view[page0or180 ? 0 : 1] * devicePixelRatio, - height: page.view[page0or180 ? 3 : 2] * devicePixelRatio - page.view[page0or180 ? 1 : 0] * devicePixelRatio, - }; - }) + this._props.pdf.getPage(i + 1).then(page => ({ + width: (page.view[page0or180(page) ? 2 : 3] - page.view[page0or180(page) ? 0 : 1]) * devicePixelRatio, + height: (page.view[page0or180(page) ? 3 : 2] - page.view[page0or180(page) ? 1 : 0]) * devicePixelRatio, + })) ) ).then( action(pages => { this._pageSizes = pages; - const lastPage = pages.lastElement(); - this._props.loaded?.(lastPage.width, lastPage.height, this._props.pdf.numPages); + this._props.loaded(pages.lastElement(), this._props.pdf.numPages); this.createPdfViewer(); }) ); @@ -599,6 +597,7 @@ export class PDFViewer extends ObservableReactComponent { } savedAnnotations = () => this._savedAnnotations; addDocumentWrapper = (doc: Doc | Doc[]) => this._props.addDocument!(doc); + screenToMarqueeXf = () => this.props.pdfBox.DocumentView?.()?.screenToContentsTransform().scale(Pdfjs.PixelsPerInch.PDF_TO_CSS_UNITS) ?? Transform.Identity(); render() { TraceMobx(); return ( @@ -618,17 +617,17 @@ export class PDFViewer extends ObservableReactComponent { {this.annotationLayer} {this.overlayLayer} {this._showWaiting ? : null} - {!this._mainCont.current || !this._annotationLayer.current ? null : ( + {!this._mainCont.current || !this._annotationLayer.current || !this.props.pdfBox.DocumentView ? null : ( Date: Wed, 8 Jan 2025 10:29:50 -0500 Subject: code cleanup --- src/client/views/nodes/ImageBox.tsx | 10 +- src/client/views/smartdraw/SmartDrawHandler.tsx | 366 ++++++++++---------- src/client/views/smartdraw/StickerPalette.tsx | 434 ++++++++++++------------ 3 files changed, 404 insertions(+), 406 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index a1fa9a283..ba0959d73 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -7,8 +7,8 @@ import { observer } from 'mobx-react'; import { extname } from 'path'; import * as React from 'react'; import ReactLoading from 'react-loading'; -import { ClientUtils, DashColor, returnEmptyFilter, returnEmptyString, returnFalse, returnOne, returnZero, setupMoveUpEvents, UpdateIcon } from '../../../ClientUtils'; -import { Doc, DocListCast, Opt, returnEmptyDoclist } from '../../../fields/Doc'; +import { ClientUtils, DashColor, returnEmptyString, returnFalse, returnOne, returnZero, setupMoveUpEvents, UpdateIcon } from '../../../ClientUtils'; +import { Doc, DocListCast, Opt } from '../../../fields/Doc'; import { DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { InkTool } from '../../../fields/InkField'; @@ -34,7 +34,7 @@ import { AnchorMenu } from '../pdf/AnchorMenu'; import { PinDocView, PinProps } from '../PinFuncs'; import { StickerPalette } from '../smartdraw/StickerPalette'; import { StyleProp } from '../StyleProp'; -import { DocumentView, DocumentViewInternal } from './DocumentView'; +import { DocumentView } from './DocumentView'; import { FieldView, FieldViewProps } from './FieldView'; import { FocusViewOptions } from './FocusViewOptions'; import './ImageBox.scss'; @@ -44,7 +44,6 @@ import { SmartDrawHandler } from '../smartdraw/SmartDrawHandler'; import { Button } from 'browndash-components'; import { SettingsManager } from '../../util/SettingsManager'; import { AiOutlineSend } from 'react-icons/ai'; -import { returnEmptyDocViewList } from '../StyleProvider'; import { FireflyImageData } from '../smartdraw/FireflyConstants'; export class ImageEditorData { @@ -541,6 +540,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent() {
{this._prevImgs.map(img => ( { @@ -583,7 +583,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { onClick={undoable( action(async () => { this._regenerateLoading = true; - SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput, true).then(newImgs => { + await SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput, true).then(newImgs => { if (newImgs[0]) { const url = newImgs[0].pathname; const imgField = new ImageField(url); diff --git a/src/client/views/smartdraw/SmartDrawHandler.tsx b/src/client/views/smartdraw/SmartDrawHandler.tsx index 5ebe2e358..58db091bc 100644 --- a/src/client/views/smartdraw/SmartDrawHandler.tsx +++ b/src/client/views/smartdraw/SmartDrawHandler.tsx @@ -26,6 +26,7 @@ import './SmartDrawHandler.scss'; import { Networking } from '../../Network'; import { OpenWhere } from '../nodes/OpenWhere'; import { FireflyDimensionsMap, FireflyImageDimensions, FireflyImageData } from './FireflyConstants'; +import { DocumentType } from '../../documents/DocumentTypes'; export interface DrawingOptions { text: string; @@ -272,19 +273,19 @@ export class SmartDrawHandler extends ObservableReactComponent { const dims = FireflyDimensionsMap[this._imgDims]; return Networking.PostToServer('/queryFireflyImage', { prompt: input, width: dims.width, height: dims.height, seed: seed }).then(img => { if (!changeInPlace) { - const seed = img.accessPaths.agnostic.client.match(/\/(\d+)upload/)[1]; + const aiseed = img.accessPaths.agnostic.client.match(/\/(\d+)upload/)[1]; const imgDoc: Doc = Docs.Create.ImageDocument(img.accessPaths.agnostic.client, { title: input.match(/^(.*?)~~~.*$/)?.[1] || input, nativeWidth: dims.width, nativeHeight: dims.height, ai: 'firefly', - ai_firefly_seed: seed, + ai_firefly_seed: aiseed, ai_firefly_prompt: input, }); DocumentViewInternal.addDocTabFunc(imgDoc, OpenWhere.addRight); this._selectedDocs.push(imgDoc); } - return { prompt: input, seed: seed, pathname: img.accessPaths.agnostic.client }; + return { prompt: input, seed, pathname: img.accessPaths.agnostic.client }; }); }; @@ -293,44 +294,43 @@ export class SmartDrawHandler extends ObservableReactComponent { * @param doc the drawing Docs to regenerate */ @action - regenerate = async (drawingDocs: Doc[], lastInput?: DrawingOptions, lastResponse?: string, regenInput?: string, changeInPlace?: boolean) => { + regenerate = (drawingDocs: Doc[], lastInput?: DrawingOptions, lastResponse?: string, regenInput?: string, changeInPlace?: boolean) => { if (lastInput) this._lastInput = lastInput; if (lastResponse) this._lastResponse = lastResponse; if (regenInput) this._regenInput = regenInput; - return await Promise.all( + return Promise.all( drawingDocs.map(async doc => { - const docData = doc[DocData]; - if (docData.type == 'image') { - const seed: number = docData?.ai_firefly_seed as number; - if (this._regenInput !== '') { - // if (this._selectedDoc) { - const newPrompt = `${docData.ai_firefly_prompt} ~~~ ${this._regenInput}`; - return this.createImageWithFirefly(newPrompt, seed, changeInPlace); - // } - } else { - return this.createImageWithFirefly(this._lastInput.text || StrCast(docData.ai_firefly_prompt), undefined, changeInPlace); - } - } - if (docData.type == 'collection') { - try { - let res; - if (this._regenInput !== '') { - const prompt: string = `This is your previously generated svg code: ${this._lastResponse} for the user input "${this._lastInput.text}". Please regenerate it with the provided specifications.`; - res = await gptAPICall(`"${this._regenInput}"`, GPTCallType.DRAW, prompt, true); - this._lastInput.text = `${this._lastInput.text} ~~~ ${this._regenInput}`; - } else { - res = await gptAPICall(`"${this._lastInput.text}", "${this._lastInput.complexity}", "${this._lastInput.size}"`, GPTCallType.DRAW, undefined, true); + switch (doc.type) { + case DocumentType.IMG: + if (this._regenInput) { + // if (this._selectedDoc) { + const newPrompt = `${doc.ai_firefly_prompt} ~~~ ${this._regenInput}`; + return this.createImageWithFirefly(newPrompt, NumCast(doc?.ai_firefly_seed), changeInPlace); + // } } - if (!res) { - console.error('GPT call failed'); - return; + return this.createImageWithFirefly(this._lastInput.text || StrCast(doc.ai_firefly_prompt), undefined, changeInPlace); + case DocumentType.COL: { + try { + let res; + if (this._regenInput) { + const prompt = `This is your previously generated svg code: ${this._lastResponse} for the user input "${this._lastInput.text}". Please regenerate it with the provided specifications.`; + res = await gptAPICall(`"${this._regenInput}"`, GPTCallType.DRAW, prompt, true); + this._lastInput.text = `${this._lastInput.text} ~~~ ${this._regenInput}`; + } else { + res = await gptAPICall(`"${this._lastInput.text}", "${this._lastInput.complexity}", "${this._lastInput.size}"`, GPTCallType.DRAW, undefined, true); + } + if (res) { + const strokeData = await this.parseSvg(res, { X: this._lastInput.x, Y: this._lastInput.y }, true, lastInput?.autoColor || this._autoColor); + this.RemoveDrawing !== unimplementedFunction && this.RemoveDrawing(true, doc); + const drawingDoc = strokeData && this.CreateDrawingDoc(strokeData.data, strokeData.lastInput, strokeData.lastRes); + drawingDoc && this.AddDrawing(drawingDoc, this._lastInput, res); + } else { + console.error('GPT call failed'); + } + } catch (err) { + console.error('Error regenerating drawing', err); } - const strokeData = await this.parseSvg(res, { X: this._lastInput.x, Y: this._lastInput.y }, true, lastInput?.autoColor || this._autoColor); - this.RemoveDrawing !== unimplementedFunction && this.RemoveDrawing(true, doc); - const drawingDoc = strokeData && this.CreateDrawingDoc(strokeData.data, strokeData.lastInput, strokeData.lastRes); - drawingDoc && this.AddDrawing(drawingDoc, this._lastInput, res); - } catch (err) { - console.error('Error regenerating drawing', err); + break; } } }) @@ -340,7 +340,6 @@ export class SmartDrawHandler extends ObservableReactComponent { /** * Parses the svg code that GPT returns into Bezier curves, with coordinates and colors. */ - @action parseSvg = async (res: string, startPoint: { X: number; Y: number }, regenerate: boolean, autoColor: boolean) => { const svg = res.match(/]*>([\s\S]*?)<\/svg>/g); if (svg) { @@ -401,7 +400,108 @@ export class SmartDrawHandler extends ObservableReactComponent { }); }, 'color strokes'); - renderDisplay() { + renderGenerateOutputOptions = () => ( +
+
+ Generate Ink + this._canInteract && (this._generateDrawing = !this._generateDrawing)} + /> +
+
+ Generate Image + this._canInteract && (this._generateImage = !this._generateImage)} + /> +
+
+ ); + + renderGenerateDrawing = () => ( +
+ Drawing Options +
+
+ Auto color + this._canInteract && (this._autoColor = !this._autoColor))} + /> +
+
+ Complexity + this._canInteract && (this._complexity = val as number))} + valueLabelDisplay="auto" + /> +
+
+ Size (in pixels) + this._canInteract && (this._size = val as number))} + valueLabelDisplay="auto" + /> +
+
+
+ ); + + renderGenerateImage = () => ( +
+ Image Options +
+ + {Object.values(FireflyImageDimensions).map(dim => ( + } onChange={() => this._canInteract && (this._imgDims = dim)} label={dim} /> + ))} + +
+
+ ); + + renderDisplay = () => { return (
{
{this._showOptions && (
-
-
- Generate Ink - this._canInteract && (this._generateDrawing = !this._generateDrawing)} - /> -
-
- Generate Image - this._canInteract && (this._generateImage = !this._generateImage)} - /> -
-
- {this._generateDrawing && ( -
- Drawing Options -
-
- Auto color - this._canInteract && (this._autoColor = !this._autoColor))} - /> -
-
- Complexity - this._canInteract && (this._complexity = val as number))} - valueLabelDisplay="auto" - /> -
-
- Size (in pixels) - this._canInteract && (this._size = val as number))} - valueLabelDisplay="auto" - /> -
-
-
- )} - {this._generateImage && ( -
- Image Options -
- - } onChange={() => this._canInteract && (this._imgDims = FireflyImageDimensions.Square)} label="Square" /> - } onChange={() => this._canInteract && (this._imgDims = FireflyImageDimensions.Landscape)} label="Landscape" /> - } onChange={() => this._canInteract && (this._imgDims = FireflyImageDimensions.Portrait)} label="Portrait" /> - } onChange={() => this._canInteract && (this._imgDims = FireflyImageDimensions.Widescreen)} label="Widescreen" /> - -
-
- )} + {this.renderGenerateOutputOptions()} + {this._generateDrawing ? this.renderGenerateDrawing() : null} + {this._generateImage ? this.renderGenerateImage() : null}
)} ); - } + }; - renderRegenerate() { - return ( -
-
- : } - color={SettingsManager.userColor} - onClick={this.handleSendClick} - /> - } color={SettingsManager.userColor} onClick={action(() => (this._showEditBox = !this._showEditBox))} /> - {this._showEditBox && ( -
- this._canInteract && (this._regenInput = e.target.value))} - onKeyDown={this.handleKeyPress} - placeholder="Edit instructions" - /> -
- )} -
+ renderRegenerateEditBox = () => ( +
+ this._canInteract && (this._regenInput = e.target.value))} + onKeyDown={this.handleKeyPress} + placeholder="Edit instructions" + /> +
+ ); + + renderRegenerate = () => ( +
+
+ : } + color={SettingsManager.userColor} + onClick={this.handleSendClick} + /> + } color={SettingsManager.userColor} onClick={action(() => (this._showEditBox = !this._showEditBox))} /> + {this._showEditBox ? this.renderRegenerateEditBox() : null}
- ); - } +
+ ); render() { - return this._display ? this.renderDisplay() : this.ShowRegenerate ? this.renderRegenerate() : null; + return this._display + ? this.renderDisplay() // + : this.ShowRegenerate + ? this.renderRegenerate() + : null; } } diff --git a/src/client/views/smartdraw/StickerPalette.tsx b/src/client/views/smartdraw/StickerPalette.tsx index d23763eb9..e3345f547 100644 --- a/src/client/views/smartdraw/StickerPalette.tsx +++ b/src/client/views/smartdraw/StickerPalette.tsx @@ -7,7 +7,7 @@ import * as React from 'react'; import { AiOutlineSend } from 'react-icons/ai'; import ReactLoading from 'react-loading'; import { returnEmptyFilter, returnFalse, returnTrue } from '../../../ClientUtils'; -import { emptyFunction } from '../../../Utils'; +import { emptyFunction, numberRange } from '../../../Utils'; import { Doc, DocListCast, returnEmptyDoclist } from '../../../fields/Doc'; import { DocData } from '../../../fields/DocSymbols'; import { ImageCast, NumCast } from '../../../fields/Types'; @@ -29,6 +29,11 @@ interface StickerPaletteProps { Document: Doc; } +enum StickerPaletteMode { + create, + view, +} + /** * The StickerPalette can be toggled in the lightbox view of a document. The goal of the palette * is to offer an easy way for users to create stickers and drag and drop them onto a document. @@ -41,7 +46,34 @@ interface StickerPaletteProps { */ @observer export class StickerPalette extends ObservableReactComponent { - @observable private _paletteMode: 'create' | 'view' = 'view'; + public static LayoutString(fieldKey: string) { + return FieldView.LayoutString(StickerPalette, fieldKey); + } + /** + * Adds a doc to the sticker palette. Gets a snapshot of the document to use as a preview in the palette. When this + * preview is dragged onto a parent document, a copy of that document is added as a sticker. + */ + public static addToPalette = async (doc: Doc) => { + if (!doc.savedAsSticker) { + const docView = DocumentView.getDocumentView(doc); + await docView?.ComponentView?.updateIcon?.(true); + const { clone } = await Doc.MakeClone(doc); + clone.title = doc.title; + const image = ImageCast(doc.icon, ImageCast(clone[Doc.LayoutFieldKey(clone)]))?.url?.href; + Doc.AddDocToList(Doc.MyStickers, 'data', makeUserTemplateButtonOrImage(clone, image)); + doc.savedAsSticker = true; + } + }; + + public static getIcon(group: Doc) { + const docView = DocumentView.getDocumentView(group); + docView?.ComponentView?.updateIcon?.(true); + return !docView ? undefined : new Promise(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 1000)); + } + + private _gptRes: string[] = []; + + @observable private _paletteMode = StickerPaletteMode.view; @observable private _userInput: string = ''; @observable private _isLoading: boolean = false; @observable private _canInteract: boolean = true; @@ -49,7 +81,6 @@ export class StickerPalette extends ObservableReactComponent { - return (this._docView && (view.containerViewPath?.() ?? []).concat(view).includes(this._docView)) || (this._docCarouselView && (view.containerViewPath?.() ?? []).concat(view).includes(this._docCarouselView)); - }; + Contains = (view: DocumentView) => + (this._docView && (view.containerViewPath?.() ?? []).concat(view).includes(this._docView)) || // + (this._docCarouselView && (view.containerViewPath?.() ?? []).concat(view).includes(this._docCarouselView)); return170 = () => 170; - @action - handleKeyPress = async (event: React.KeyboardEvent) => { + handleKeyPress = (event: React.KeyboardEvent) => { if (event.key === 'Enter') { - await this.generateDrawings(); + this.generateDrawings(); } }; - @action - setPaletteMode = (mode: 'create' | 'view') => { + setPaletteMode = action((mode: StickerPaletteMode) => { this._paletteMode = mode; - }; + }); - @action - setUserInput = (input: string) => { + setUserInput = action((input: string) => { if (!this._isLoading) this._userInput = input; - }; + }); - @action - setDetail = (detail: number) => { + setDetail = action((detail: number) => { if (this._canInteract) this._opts.complexity = detail; - }; + }); - @action - setColor = (autoColor: boolean) => { + setColor = action((autoColor: boolean) => { if (this._canInteract) this._opts.autoColor = autoColor; - }; + }); - @action - setSize = (size: number) => { + setSize = action((size: number) => { if (this._canInteract) this._opts.size = size; - }; + }); - @action - resetPalette = (changePaletteMode: boolean) => { - if (changePaletteMode) this.setPaletteMode('view'); + resetPalette = action((changePaletteMode: boolean) => { + if (changePaletteMode) this.setPaletteMode(StickerPaletteMode.view); this.setUserInput(''); this.setDetail(5); this.setColor(true); @@ -114,55 +134,31 @@ export class StickerPalette extends ObservableReactComponent { - if (!doc.savedAsSticker) { - const docView = DocumentView.getDocumentView(doc); - await docView?.ComponentView?.updateIcon?.(true); - const { clone } = await Doc.MakeClone(doc); - clone.title = doc.title; - const image = ImageCast(doc.icon, ImageCast(clone[Doc.LayoutFieldKey(clone)]))?.url?.href; - Doc.AddDocToList(Doc.MyStickers, 'data', makeUserTemplateButtonOrImage(clone, image)); - doc.savedAsSticker = true; - } - }; - - public static getIcon(group: Doc) { - const docView = DocumentView.getDocumentView(group); - if (docView) { - docView.ComponentView?.updateIcon?.(true); - return new Promise(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 1000)); - } - return undefined; - } + }); /** * Calls the draw with AI functions in SmartDrawHandler to allow users to generate drawings straight from * the sticker palette. */ @undoBatch - generateDrawings = action(async () => { + generateDrawings = action(() => { this._isLoading = true; const prevDrawings = DocListCast(this._props.Document[DocData].data); this._props.Document[DocData].data = undefined; SmartDrawHandler.Instance.AddDrawing = this.addDrawing; this._canInteract = false; - await Promise.all( - Array.from({ length: 3 }).map((_, i) => { + Promise.all( + numberRange(3).map(i => { return this._showRegenerate ? SmartDrawHandler.Instance.regenerate(prevDrawings, this._opts, this._gptRes[i], this._userInput) : SmartDrawHandler.Instance.drawWithGPT({ X: 0, Y: 0 }, this._userInput, this._opts.complexity, this._opts.size, this._opts.autoColor); }) - ); - this._opts.text !== '' ? (this._opts.text = `${this._opts.text} ~~~ ${this._userInput}`) : (this._opts.text = this._userInput); - this._userInput = ''; - this._isLoading = false; - this._showRegenerate = true; + ).then(() => { + this._opts.text !== '' ? (this._opts.text = `${this._opts.text} ~~~ ${this._userInput}`) : (this._opts.text = this._userInput); + this._userInput = ''; + this._isLoading = false; + this._showRegenerate = true; + }); }); @action @@ -177,7 +173,7 @@ export class StickerPalette extends ObservableReactComponent { + saveDrawing = () => { const cIndex = NumCast(this._props.Document.carousel_index); const focusedDrawing = DocListCast(this._props.Document.data)[cIndex]; const docData = focusedDrawing[DocData]; @@ -191,168 +187,160 @@ export class StickerPalette extends ObservableReactComponent this.resetPalette(true)); + }; + + renderCreateInput = () => ( +
+ this.setUserInput(e.target.value)} + placeholder={this._showRegenerate ? '(Optional) Enter edits' : 'Enter item to draw'} + onKeyDown={this.handleKeyPress} + /> +
+ ); + renderCreateOptions = () => ( +
+
+ Color + this.setColor(!this._opts.autoColor)} + /> +
+
+ Detail + typeof val === 'number' && this.setDetail(val)} + valueLabelDisplay="auto" + /> +
+
+ Size + typeof val === 'number' && this.setSize(val)} + valueLabelDisplay="auto" + /> +
+
+ ); + renderDoc = (doc: Doc, refFunc: (r: DocumentView) => void) => { + return ( + + ); }; + renderPaletteCreate = () => ( + <> + {this.renderCreateInput()} + {this.renderCreateOptions()} + {this.renderDoc(this._props.Document, (r: DocumentView) => { + this._docCarouselView = r; + })} +
+
+
+ + ); + renderPaletteView = () => ( + <> + {this.renderDoc(Doc.MyStickers, (r: DocumentView) => { + this._docView = r; + })} +