diff options
Diffstat (limited to 'src')
14 files changed, 174 insertions, 116 deletions
diff --git a/src/client/views/ObservableReactComponent.tsx b/src/client/views/ObservableReactComponent.tsx index bb7a07f0e..2290516dc 100644 --- a/src/client/views/ObservableReactComponent.tsx +++ b/src/client/views/ObservableReactComponent.tsx @@ -15,6 +15,33 @@ export abstract class ObservableReactComponent<T> extends React.Component<T, obj this._props = props; makeObservable(this); } + __passiveWheel: HTMLElement | null = null; + _isContentActive: () => boolean | undefined = () => false; + + /** + * default method to stop wheel events from bubbling up to parent components. + * @param e + */ + onPassiveWheel = (e: WheelEvent) => { + if (this._isContentActive?.()) e.stopPropagation(); + }; + + /** + * This fixes the problem where a component uses wheel events to scroll, but is nested inside another component that + * can also scroll. In that case, the wheel event will bubble up to the parent component and cause it to scroll in addition. + * This is based on the native HTML5 behavior where wheel events are passive by default, meaning that they do not prevent the default action of scrolling. + * This method should be called from a ref={} property on or above the component that uses wheel events to scroll. + * @param ele HTMLELement containing the component that will scroll + * @param isContentActive function determining if the component is active and should handle the wheel event. + * @param onPassiveWheel an optional function to call to handle the wheel event (and block its propagation. If omitted, the event won't propagate. + */ + fixWheelEvents = (ele: HTMLElement | null, isContentActive: () => boolean | undefined, onPassiveWheel?: (e: WheelEvent) => void) => { + this._isContentActive = isContentActive; + this.__passiveWheel?.removeEventListener('wheel', onPassiveWheel ?? this.onPassiveWheel); + this.__passiveWheel = ele; + ele?.addEventListener('wheel', onPassiveWheel ?? this.onPassiveWheel, { passive: false }); + }; + componentDidUpdate(prevProps: Readonly<T>): void { Object.keys(prevProps) .filter(pkey => (prevProps as {[key:string]: unknown})[pkey] !== (this.props as {[key:string]: unknown})[pkey]) diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index 50de7c601..d5edc3e0b 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -40,7 +40,6 @@ import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView'; export class CollectionCardView extends CollectionSubView() { private _dropDisposer?: DragManager.DragDropDisposer; private _disposers: { [key: string]: IReactionDisposer } = {}; - private _oldWheel: HTMLElement | null = null; private _dropped = false; // set when a card doc has just moved and the drop method has been called - prevents the pointerUp method from hiding doc decorations (which needs to be done when clicking on a card to animate it to front/center) private _setCurDocScript = () => ScriptField.MakeScript('scriptContext.layoutDoc._card_curDoc=this', { scriptContext: 'any' })!; private _draggerRef = React.createRef<HTMLDivElement>(); @@ -56,13 +55,7 @@ export class CollectionCardView extends CollectionSubView() { } protected createDashEventsTarget = (ele: HTMLDivElement | null) => { this._dropDisposer?.(); - if (ele) { - this._dropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc); - } - this._oldWheel?.removeEventListener('wheel', this.onPassiveWheel); - this._oldWheel = ele; - // prevent wheel events from passively propagating up through containers and prevents containers from preventDefault which would block scrolling - ele?.addEventListener('wheel', this.onPassiveWheel, { passive: false }); + this.fixWheelEvents(ele, this._props.isContentActive); }; @computed get cardWidth() { return NumCast(this.layoutDoc._cardWidth, 50); @@ -487,7 +480,6 @@ export class CollectionCardView extends CollectionSubView() { ); }); } - onPassiveWheel = (e: WheelEvent) => e.stopPropagation(); contentScreenToLocalXf = () => this._props.ScreenToLocalTransform().scale(this._props.NativeDimScaling?.() || 1); docViewProps = (): DocumentViewProps => ({ diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 9c8ef5519..755e31925 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -25,7 +25,6 @@ const { CAROUSEL3D_CENTER_SCALE, CAROUSEL3D_SIDE_SCALE, CAROUSEL3D_TOP } = requi @observer export class CollectionCarousel3DView extends CollectionSubView() { private _dropDisposer?: DragManager.DragDropDisposer; - private _oldWheel: HTMLElement | null = null; constructor(props: SubCollectionViewProps) { super(props); @@ -44,10 +43,7 @@ export class CollectionCarousel3DView extends CollectionSubView() { if (ele) { this._dropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc); } - this._oldWheel?.removeEventListener('wheel', this.onPassiveWheel); - this._oldWheel = ele; - // prevent wheel events from passively propagating up through containers and prevents containers from preventDefault which would block scrolling - ele?.addEventListener('wheel', this.onPassiveWheel, { passive: false }); + this.fixWheelEvents(ele, this._props.isContentActive); }; @computed get scrollSpeed() { @@ -101,7 +97,7 @@ export class CollectionCarousel3DView extends CollectionSubView() { focus = (anchor: Doc, options: FocusViewOptions): Opt<number> => { const docs = DocListCast(this.Document[this.fieldKey]); if (anchor.type === DocumentType.CONFIG || docs.includes(anchor)) { - const newIndex = anchor.config_carousel_index ?? docs.getIndex(DocCast(anchor.annotationOn, anchor)); + const newIndex = anchor.config_carousel_index ?? docs.getIndex(DocCast(anchor.annotationOn, anchor)!); options.didMove = newIndex !== this.layoutDoc._carousel_index; options.didMove && (this.layoutDoc._carousel_index = newIndex); } @@ -221,7 +217,6 @@ export class CollectionCarousel3DView extends CollectionSubView() { return this.panelWidth() * (1 - index); } - onPassiveWheel = (e: WheelEvent) => e.stopPropagation(); curDoc = () => this.carouselItems[NumCast(this.layoutDoc._carousel_index)]?.layout; answered = (correct: boolean) => (!correct || !this.curDoc() || NumCast(this.layoutDoc._carousel_index) === this.carouselItems.length - 1) && this.changeSlide(1); docViewProps = () => ({ diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index 975dc52fe..ac1981012 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -21,7 +21,6 @@ import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView'; export class CollectionCarouselView extends CollectionSubView() { private _dropDisposer?: DragManager.DragDropDisposer; - _oldWheel: HTMLElement | null = null; _fadeTimer: NodeJS.Timeout | undefined; @observable _last_index = this.carouselIndex; @observable _last_opacity = 1; @@ -43,10 +42,7 @@ export class CollectionCarouselView extends CollectionSubView() { if (ele) { this._dropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc); } - this._oldWheel?.removeEventListener('wheel', this.onPassiveWheel); - this._oldWheel = ele; - // prevent wheel events from passively propagating up through containers and prevents containers from preventDefault which would block scrolling - ele?.addEventListener('wheel', this.onPassiveWheel, { passive: false }); + this.fixWheelEvents(ele, this._props.isContentActive); }; @computed get captionMarginX(){ return NumCast(this.layoutDoc.caption_xMargin, 50); } // prettier-ignore @@ -115,7 +111,6 @@ export class CollectionCarouselView extends CollectionSubView() { : this._props.childDocumentsActive?.() === false || this.Document.childDocumentsActive === false ? false : undefined; // prettier-ignore - onPassiveWheel = (e: WheelEvent) => e.stopPropagation(); renderDoc = (doc: Doc, showCaptions: boolean, overlayFunc?: (r: DocumentView | null) => void) => { return ( diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index f11e646cc..be570564b 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -55,7 +55,6 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection _docXfs: { height: () => number; width: () => number; stackedDocTransform: () => Transform }[] = []; // Doesn't look like this field is being used anywhere. Obsolete? _columnStart: number = 0; - _oldWheel: HTMLElement | null = null; @observable _refList: HTMLElement[] = []; // map of node headers to their heights. Used in Masonry @@ -721,7 +720,6 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection return this._props.isContentActive() === false ? 'none' : undefined; } - onPassiveWheel = (e: WheelEvent) => this._props.isContentActive() && e.stopPropagation(); render() { TraceMobx(); const editableViewProps = { @@ -744,10 +742,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection ref={ele => { this._masonryGridRef = ele; this.createDashEventsTarget(ele); // so the whole grid is the drop target? - this._oldWheel?.removeEventListener('wheel', this.onPassiveWheel); - this._oldWheel = ele; - // prevent wheel events from passively propagating up through containers and prevents containers from preventDefault which would block scrolling - ele?.addEventListener('wheel', this.onPassiveWheel, { passive: false }); + this.fixWheelEvents(ele, this._props.isContentActive); }} style={{ overflowY: this.isContentActive() ? 'auto' : 'hidden', diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index c4971c204..2364fd74a 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -2268,10 +2268,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection id={this._paintedId} ref={r => { this.createDashEventsTarget(r); - this._oldWheel?.removeEventListener('wheel', this.onPassiveWheel); - this._oldWheel = r; - // prevent wheel events from passivly propagating up through containers - r?.addEventListener('wheel', this.onPassiveWheel, { passive: false }); + this.fixWheelEvents(r, this._props.isContentActive, this.onPassiveWheel); r?.addEventListener('mouseleave', this.onMouseLeave); r?.addEventListener('mouseenter', this.onMouseEnter); }} diff --git a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx index 624c85beb..142085e14 100644 --- a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx +++ b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx @@ -150,11 +150,6 @@ export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() { FaceRecognitionHandler.UniqueFaceRemoveFaceImage(imgDoc, this.Document); }, 'remove doc from face'); - /** - * This stops scroll wheel events when they are used to scroll the face collection. - */ - onPassiveWheel = (e: WheelEvent) => e.stopPropagation(); - render() { return ( <div className="face-document-item" ref={ele => this.createDropTarget(ele!)}> @@ -181,12 +176,7 @@ export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() { style={{ pointerEvents: this._props.isContentActive() ? undefined : 'none', }} - ref={action((ele: HTMLDivElement | null) => { - this._listRef?.removeEventListener('wheel', this.onPassiveWheel); - this._listRef = ele; - // prevent wheel events from passively propagating up through containers and prevents containers from preventDefault which would block scrolling - ele?.addEventListener('wheel', this.onPassiveWheel, { passive: false }); - })}> + ref={r => this.fixWheelEvents(r, this._props.isContentActive)}> {FaceRecognitionHandler.UniqueFaceImages(this.Document).map((doc, i) => { const [name, type] = ImageCastToNameType(doc?.[Doc.LayoutDataKey(doc)]) ?? ['-missing-', '.png']; return ( diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 82ca96839..c06391f35 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -1293,7 +1293,6 @@ export class CollectionSchemaView extends CollectionSubView() { isContentActive = () => this._props.isSelected() || this._props.isContentActive(); screenToLocal = () => this.ScreenToLocalBoxXf().translate(-this.tableWidth, 0); previewWidthFunc = () => this.previewWidth; - onPassiveWheel = (e: WheelEvent) => e.stopPropagation(); displayedDocsFunc = () => this.docsWithDrag.docs; render() { return ( @@ -1307,15 +1306,7 @@ export class CollectionSchemaView extends CollectionSubView() { this.setColDrag(false); }}> <div ref={this._menuTarget} style={{ background: 'red', top: 0, left: 0, position: 'absolute', zIndex: 10000 }} /> - <div - className="schema-table" - style={{ width: `calc(100% - ${this.previewWidth}px)` }} - onWheel={e => this._props.isContentActive() && e.stopPropagation()} - ref={ele => { - // prevent wheel events from passively propagating up through containers and prevents containers from preventDefault which would block scrolling - this._oldWheel?.removeEventListener('wheel', this.onPassiveWheel); - (this._oldWheel = ele)?.addEventListener('wheel', this.onPassiveWheel, { passive: false }); - }}> + <div className="schema-table" style={{ width: `calc(100% - ${this.previewWidth}px)` }} onWheel={e => this._props.isContentActive() && e.stopPropagation()} ref={ele => this.fixWheelEvents(ele, this._props.isContentActive)}> <div className="schema-header-row" style={{ height: this.rowHeightFunc() }}> <div className="row-menu" style={{ width: CollectionSchemaView._rowMenuWidth }}> <IconButton diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx index 3b666bad5..7cfccf0dc 100644 --- a/src/client/views/nodes/DiagramBox.tsx +++ b/src/client/views/nodes/DiagramBox.tsx @@ -185,11 +185,6 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { return '( )'; }; - /** - * This stops scroll wheel events when they are used to scroll the face collection. - */ - onPassiveWheel = (e: WheelEvent) => e.stopPropagation(); - render() { return ( <div @@ -197,12 +192,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { style={{ pointerEvents: this._props.isContentActive() ? undefined : 'none', }} - ref={action((ele: HTMLDivElement | null) => { - this._boxRef?.removeEventListener('wheel', this.onPassiveWheel); - this._boxRef = ele; - // prevent wheel events from passively propagating up through containers and prevents containers from preventDefault which would block scrolling - ele?.addEventListener('wheel', this.onPassiveWheel, { passive: false }); - })}> + ref={r => this.fixWheelEvents(r, this._props.isContentActive)}> <div className="DIYNodeBox-searchbar"> <input type="text" value={this._inputValue} onKeyDown={action(e => e.key === 'Enter' && this.generateMermaidCode())} onChange={action(e => (this._inputValue = e.target.value))} /> <button type="button" onClick={this.generateMermaidCode}> diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss index ac1a6ece9..9f7a5d03f 100644 --- a/src/client/views/nodes/ImageBox.scss +++ b/src/client/views/nodes/ImageBox.scss @@ -106,7 +106,7 @@ height: 100%; img { object-fit: contain; - height: fit-content; + height: 100%; } .imageBox-fadeBlocker, @@ -242,12 +242,9 @@ } } .imageBox-regenerate-dialog { - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + position: absolute; background: white; - padding: 20px; + padding: 10px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); z-index: 10000; diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 31a135fa7..d16baada6 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -1,4 +1,4 @@ -import { Button, Colors, EditableText, Size, Type } from '@dash/components'; +import { Button, Colors, EditableText, IconButton, Size, Toggle, ToggleType, Type } from '@dash/components'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Slider, Tooltip } from '@mui/material'; import axios from 'axios'; @@ -353,6 +353,8 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { @action openOutpaintPrompt = () => { + this._outpaintVAlign = ''; + this._outpaintAlign = ''; this._showOutpaintPrompt = true; }; @@ -362,6 +364,16 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { }; @action + cancelOutpaintPrompt = () => { + const origWidth = NumCast(this.Document[this.fieldKey + '_outpaintOriginalWidth']); + const origHeight = NumCast(this.Document[this.fieldKey + '_outpaintOriginalHeight']); + this.Document._width = origWidth; + this.Document._height = origHeight; + this._outpaintingInProgress = false; + this.closeOutpaintPrompt(); + }; + + @action handlePromptChange = (val: string | number) => { this._outpaintPromptInput = '' + val; }; @@ -377,17 +389,12 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { const field = Cast(this.dataDoc[this.fieldKey], ImageField); if (!field) return; - const origWidth = NumCast(this.Document[this.fieldKey + '_outpaintOriginalWidth']); - const origHeight = NumCast(this.Document[this.fieldKey + '_outpaintOriginalHeight']); - // Set flag that outpainting is in progress this._outpaintingInProgress = true; // Revert dimensions if prompt is blank (acts like Cancel) if (!customPrompt) { - this.Document._width = origWidth; - this.Document._height = origHeight; - this._outpaintingInProgress = false; + this.cancelOutpaintPrompt(); return; } @@ -410,11 +417,15 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { loadingOverlay.innerHTML = '<div style="color: white; font-size: 16px;">Generating outpainted image...</div>'; this._mainCont?.appendChild(loadingOverlay); + const origWidth = NumCast(this.Document[this.fieldKey + '_outpaintOriginalWidth']); + const origHeight = NumCast(this.Document[this.fieldKey + '_outpaintOriginalHeight']); const response = await Networking.PostToServer('/outpaintImage', { imageUrl: currentPath, prompt: customPrompt, originalDimensions: { width: Math.min(newWidth, origWidth), height: Math.min(newHeight, origHeight) }, newDimensions: { width: newWidth, height: newHeight }, + halignment: this._outpaintAlign, + valignment: this._outpaintVAlign, }); const error = ('error' in response && (response.error as string)) || ''; @@ -447,8 +458,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { this.Document[this.fieldKey + '_outpaintOriginalWidth'] = undefined; this.Document[this.fieldKey + '_outpaintOriginalHeight'] = undefined; } else { - this.Document._width = origWidth; - this.Document._height = origHeight; + this.cancelOutpaintPrompt(); alert('Failed to receive a valid image URL from server.'); } batch.end(); @@ -456,30 +466,106 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { this._mainCont?.removeChild(loadingOverlay); } catch (error) { - console.error('Error during outpainting:', error); - this.Document._width = origWidth; - this.Document._height = origHeight; - alert('An error occurred while outpainting. Please try again.'); + this.cancelOutpaintPrompt(); + alert('An error occurred while outpainting.' + error); } finally { runInAction(() => (this._outpaintingInProgress = false)); } }; - componentUI = () => + @observable _outpaintAlign = ''; + @observable _outpaintVAlign = ''; + @computed get outpaintVertical() { + return this._props.PanelWidth() / this._props.PanelHeight() < this.nativeSize.nativeWidth / this.nativeSize.nativeHeight; + } + + componentUI = (/* boundsLeft: number, boundsTop: number*/) => !this._showOutpaintPrompt ? null : ( - <div key="imageBox-componentui" className="imageBox-regenerate-dialog" style={{ backgroundColor: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }}> - <h3>Outpaint Image</h3> - <EditableText - placeholder="Enter a prompt for extending the image:" - setVal={val => this.handlePromptChange(val)} - val={this._outpaintPromptInput} - type={Type.TERT} - color={SettingsManager.userColor} - background={SettingsManager.userBackgroundColor} - /> - <div className="buttons"> - <Button text="Cancel" type={Type.TERT} onClick={this.closeOutpaintPrompt} color={SnappingManager.userColor} background={SnappingManager.userVariantColor} /> - <Button text="Generate" type={Type.TERT} onClick={this.submitOutpaintPrompt} color={SnappingManager.userColor} background={SnappingManager.userVariantColor} /> + <div + key="imageBox-componentui" + className="imageBox-regenerate-dialog" + style={{ + top: -70 + (this._props.DocumentView?.().getBounds?.top ?? 0), + left: this._props.DocumentView?.().getBounds?.left ?? 0, + backgroundColor: SettingsManager.userBackgroundColor, + color: SettingsManager.userColor, + }}> + <div style={{ position: 'absolute', top: 5, right: 5 }}> + <IconButton type={Type.TERT} onClick={this.cancelOutpaintPrompt} icon={<FontAwesomeIcon icon="times" color={'red'} />} color={SnappingManager.userColor} background={SnappingManager.userVariantColor} /> + </div> + <div>Outpaint Image</div> + <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}> + <EditableText + placeholder="Enter a prompt for extending the image:" + setVal={val => this.handlePromptChange(val)} + val={this._outpaintPromptInput} + type={Type.TERT} + color={SettingsManager.userColor} + background={SettingsManager.userBackgroundColor} + /> + <div className="buttons" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}> + <IconButton type={Type.TERT} onClick={this.submitOutpaintPrompt} icon={<AiOutlineSend />} color={SnappingManager.userColor} background={SnappingManager.userVariantColor} /> + <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}> + {this.outpaintVertical ? null : ( + <Toggle + type={Type.TERT} + toggleType={ToggleType.BUTTON} + toggleStatus={this._outpaintAlign === 'left' && this._outpaintVAlign === ''} + onClick={action(() => (this._outpaintAlign = 'left'))} + icon={<FontAwesomeIcon icon="chevron-left" color={SnappingManager.userColor} />} + color={SnappingManager.userColor} + background={SnappingManager.userVariantColor} + /> + )} + <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}> + {!this.outpaintVertical ? null : ( + <Toggle + type={Type.TERT} + toggleType={ToggleType.BUTTON} + toggleStatus={this._outpaintAlign === '' && this._outpaintVAlign === 'top'} + onClick={action(() => (this._outpaintVAlign = 'top'))} + icon={<FontAwesomeIcon icon="chevron-up" color={SnappingManager.userColor} />} + color={SnappingManager.userColor} + background={SnappingManager.userColor} + /> + )} + <Toggle + type={Type.TERT} + toggleType={ToggleType.BUTTON} + toggleStatus={this._outpaintAlign === '' && this._outpaintVAlign === ''} + onClick={action(() => { + this._outpaintAlign = ''; + this._outpaintVAlign = ''; + })} + icon={<FontAwesomeIcon icon="bullseye" color={SnappingManager.userColor} />} + color={SnappingManager.userColor} + background={SnappingManager.userColor} + /> + {!this.outpaintVertical ? null : ( + <Toggle + type={Type.TERT} + toggleType={ToggleType.BUTTON} + toggleStatus={this._outpaintAlign === '' && this._outpaintVAlign === 'bottom'} + onClick={action(() => (this._outpaintVAlign = 'bottom'))} + icon={<FontAwesomeIcon icon="chevron-down" color={SnappingManager.userColor} />} + color={SnappingManager.userColor} + background={SnappingManager.userColor} + /> + )} + </div> + {this.outpaintVertical ? null : ( + <Toggle + type={Type.TERT} + toggleType={ToggleType.BUTTON} + toggleStatus={this._outpaintAlign === 'right' && this._outpaintVAlign === ''} + onClick={action(() => (this._outpaintAlign = 'right'))} + icon={<FontAwesomeIcon icon="chevron-right" color={SnappingManager.userColor} />} + color={SnappingManager.userColor} + background={SnappingManager.userColor} + /> + )} + </div> + </div> </div> </div> ); @@ -718,13 +804,25 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { })} key={this.layoutDoc[Id]} onPointerDown={this.marqueeDown}> - <div className="imageBox-fader" style={{ opacity: backAlpha }}> + <div + className="imageBox-fader" + style={{ + opacity: backAlpha, + flexDirection: this._outpaintVAlign ? 'row' : 'column', + alignItems: this._outpaintAlign === 'left' || this._outpaintVAlign === 'top' ? 'flex-start' : this._outpaintAlign === 'right' || this._outpaintVAlign === 'bottom' ? 'flex-end' : undefined, + }}> <img alt="" ref={action((r: HTMLImageElement | null) => (this.imageRef = r))} key="paths" src={srcpath} - style={{ transform, transformOrigin, height: this.Document[this.fieldKey + '_outpaintOriginalWidth'] !== undefined ? '100%' : undefined }} + style={{ + position: 'relative', + transform, + transformOrigin, + width: this._outpaintAlign ? 'max-content' : this._outpaintAlign ? '100%' : undefined, + height: this._outpaintVAlign ? 'max-content' : this.Document[this.fieldKey + '_outpaintOriginalWidth'] !== undefined ? '100%' : undefined, + }} onError={action(e => (this._error = e.toString()))} draggable={false} width={nativeWidth} diff --git a/src/client/views/nodes/calendarBox/CalendarBox.tsx b/src/client/views/nodes/calendarBox/CalendarBox.tsx index bebd86ac2..df505eb16 100644 --- a/src/client/views/nodes/calendarBox/CalendarBox.tsx +++ b/src/client/views/nodes/calendarBox/CalendarBox.tsx @@ -26,7 +26,6 @@ type CalendarView = 'multiMonth' | 'dayGridMonth' | 'timeGridWeek' | 'timeGridDa export class CalendarBox extends CollectionSubView() { _calendarRef: HTMLDivElement | null = null; _calendar: Calendar | undefined; - _oldWheel: HTMLElement | null = null; _observer: ResizeObserver | undefined; _eventsDisposer: IReactionDisposer | undefined; _selectDisposer: IReactionDisposer | undefined; @@ -251,7 +250,6 @@ export class CalendarBox extends CollectionSubView() { setTimeout(() => cal?.view.calendar.select(this.dateSelect.start, this.dateSelect.end)); }; - onPassiveWheel = (e: WheelEvent) => e.stopPropagation(); render() { return ( <div @@ -275,10 +273,7 @@ export class CalendarBox extends CollectionSubView() { }} ref={r => { this.createDashEventsTarget(r); - this._oldWheel?.removeEventListener('wheel', this.onPassiveWheel); - this._oldWheel = r; - // prevent wheel events from passively propagating up through containers and prevents containers from preventDefault which would block scrolling - r?.addEventListener('wheel', this.onPassiveWheel, { passive: false }); + this.fixWheelEvents(r, this._props.isContentActive); if (r) { this._observer?.disconnect(); diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index d6fa3172d..c51f6c38b 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -2120,11 +2120,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB ) : styleFromLayout?.height === '0px' ? null : ( <div className="formattedTextBox" - ref={r => { - this._oldWheel?.removeEventListener('wheel', this.onPassiveWheel); - this._oldWheel = r; - r?.addEventListener('wheel', this.onPassiveWheel, { passive: false }); - }} + ref={r => this.fixWheelEvents(r, this._props.isContentActive, this.onPassiveWheel)} style={{ ...(this._props.dontScale ? {} diff --git a/src/server/ApiManagers/FireflyManager.ts b/src/server/ApiManagers/FireflyManager.ts index 1b8a85a5c..e934e635b 100644 --- a/src/server/ApiManagers/FireflyManager.ts +++ b/src/server/ApiManagers/FireflyManager.ts @@ -343,14 +343,14 @@ export default class FireflyManager extends ApiManager { numVariations: 1, placement: { inset: { - left: Math.round((req.body.newDimensions.width - req.body.originalDimensions.width) / 2), - top: Math.round((req.body.newDimensions.height - req.body.originalDimensions.height) / 2), - right: Math.round((req.body.newDimensions.width - req.body.originalDimensions.width) / 2), - bottom: Math.round((req.body.newDimensions.height - req.body.originalDimensions.height) / 2), + left: 0, // Math.round((req.body.newDimensions.width - req.body.originalDimensions.width) / 2), + top: 0, // Math.round((req.body.newDimensions.height - req.body.originalDimensions.height) / 2), + right: 0, // Math.round((req.body.newDimensions.width - req.body.originalDimensions.width) / 2), + bottom: 0, // Math.round((req.body.newDimensions.height - req.body.originalDimensions.height) / 2), }, alignment: { - horizontal: 'center', - vertical: 'center', + horizontal: req.body.halignment || 'center', + vertical: req.body.valignment || 'center', }, }, }), |