diff options
Diffstat (limited to 'src/client/views/OverlayView.tsx')
| -rw-r--r-- | src/client/views/OverlayView.tsx | 58 |
1 files changed, 26 insertions, 32 deletions
diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx index 15b1f0275..a7907a565 100644 --- a/src/client/views/OverlayView.tsx +++ b/src/client/views/OverlayView.tsx @@ -3,19 +3,21 @@ import { observer } from 'mobx-react'; import { computedFn } from 'mobx-utils'; import * as React from 'react'; import ReactLoading from 'react-loading'; -import { Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnTrue, setupMoveUpEvents } from '../../Utils'; +import { returnEmptyDoclist, returnEmptyFilter, returnTrue, setupMoveUpEvents } from '../../ClientUtils'; +import { Utils, emptyFunction } from '../../Utils'; import { Doc } from '../../fields/Doc'; import { Height, Width } from '../../fields/DocSymbols'; import { Id } from '../../fields/FieldSymbols'; -import { NumCast } from '../../fields/Types'; +import { NumCast, toList } from '../../fields/Types'; import { DocumentType } from '../documents/DocumentTypes'; -import { DragManager, dropActionType } from '../util/DragManager'; +import { DragManager } from '../util/DragManager'; +import { dropActionType } from '../util/DropActionTypes'; import { Transform } from '../util/Transform'; -import { LightboxView } from './LightboxView'; import { ObservableReactComponent } from './ObservableReactComponent'; import './OverlayView.scss'; import { DefaultStyleProvider } from './StyleProvider'; import { DocumentView, DocumentViewInternal } from './nodes/DocumentView'; + const _global = (window /* browser */ || global) /* node */ as any; export type OverlayDisposer = () => void; @@ -50,14 +52,14 @@ export class OverlayWindow extends ObservableReactComponent<OverlayWindowProps> this.height = opts.height || 200; } - onPointerDown = (_: React.PointerEvent) => { + onPointerDown = () => { document.removeEventListener('pointermove', this.onPointerMove); document.removeEventListener('pointerup', this.onPointerUp); document.addEventListener('pointermove', this.onPointerMove); document.addEventListener('pointerup', this.onPointerUp); }; - onResizerPointerDown = (_: React.PointerEvent) => { + onResizerPointerDown = () => { document.removeEventListener('pointermove', this.onResizerPointerMove); document.removeEventListener('pointerup', this.onResizerPointerUp); document.addEventListener('pointermove', this.onResizerPointerMove); @@ -80,27 +82,27 @@ export class OverlayWindow extends ObservableReactComponent<OverlayWindowProps> this.height = Math.max(this.height, 30); }; - onPointerUp = (e: PointerEvent) => { + onPointerUp = () => { document.removeEventListener('pointermove', this.onPointerMove); document.removeEventListener('pointerup', this.onPointerUp); }; - onResizerPointerUp = (e: PointerEvent) => { + onResizerPointerUp = () => { document.removeEventListener('pointermove', this.onResizerPointerMove); document.removeEventListener('pointerup', this.onResizerPointerUp); }; render() { - return LightboxView.LightboxDoc ? null : ( + return ( <div className="overlayWindow-outerDiv" style={{ transform: `translate(${this.x}px, ${this.y}px)`, width: this.width, height: this.height }}> <div className="overlayWindow-titleBar" onPointerDown={this.onPointerDown}> {this._props.overlayOptions.title || 'Untitled'} - <button onClick={this._props.onClick} className="overlayWindow-closeButton"> + <button type="button" onClick={this._props.onClick} className="overlayWindow-closeButton"> X </button> </div> <div className="overlayWindow-content">{this.props.children}</div> - <div className="overlayWindow-resizeDragger" onPointerDown={this.onResizerPointerDown}></div> + <div className="overlayWindow-resizeDragger" onPointerDown={this.onResizerPointerDown} /> </div> ); } @@ -108,6 +110,7 @@ export class OverlayWindow extends ObservableReactComponent<OverlayWindowProps> @observer export class OverlayView extends ObservableReactComponent<{}> { + // eslint-disable-next-line no-use-before-define public static Instance: OverlayView; @observable.shallow _elements: JSX.Element[] = []; @@ -118,8 +121,9 @@ export class OverlayView extends ObservableReactComponent<{}> { OverlayView.Instance = this; new _global.ResizeObserver( action((entries: any) => { - for (const entry of entries) { - Doc.MyOverlayDocs.forEach(doc => { + Array.from(entries).forEach((entry: any) => { + Doc.MyOverlayDocs.forEach(docIn => { + const doc = docIn; if (NumCast(doc.overlayX) > entry.contentRect.width - 10) { doc.overlayX = entry.contentRect.width - 10; } @@ -127,7 +131,7 @@ export class OverlayView extends ObservableReactComponent<{}> { doc.overlayY = entry.contentRect.height - 10; } }); - } + }); }) ).observe(window.document.body); } @@ -162,30 +166,22 @@ export class OverlayView extends ObservableReactComponent<{}> { const index = this._elements.indexOf(contents); if (index !== -1) this._elements.splice(index, 1); }); - contents = ( + const wincontents = ( <OverlayWindow onClick={remove} key={Utils.GenerateGuid()} overlayOptions={options}> {contents} </OverlayWindow> ); - this._elements.push(contents); + this._elements.push(wincontents); return remove; } - removeOverlayDoc = (doc: Doc | Doc[]) => { - (doc instanceof Doc ? [doc] : doc).forEach(Doc.RemFromMyOverlay); - return true; - }; + removeOverlayDoc = (docs: Doc | Doc[]) => toList(docs).every(Doc.RemFromMyOverlay); - docScreenToLocalXf = computedFn( - function docScreenToLocalXf(this: any, doc: Doc) { - return () => new Transform(-NumCast(doc.overlayX), -NumCast(doc.overlayY), 1); - }.bind(this) - ); + docScreenToLocalXf = computedFn((doc: Doc) => () => new Transform(-NumCast(doc.overlayX), -NumCast(doc.overlayY), 1)); @computed get overlayDocs() { - return Doc.MyOverlayDocs.filter(d => !LightboxView.LightboxDoc || d.type === DocumentType.PRES).map(d => { - let offsetx = 0, - offsety = 0; + return Doc.MyOverlayDocs.map(d => { + let [offsetx, offsety] = [0, 0]; const dref = React.createRef<HTMLDivElement>(); const onPointerMove = action((e: PointerEvent, down: number[]) => { if (e.cancelBubble) return false; // if the overlay doc processed the move event (e.g., to pan its contents), then the event should be marked as canceled since propagation can't be stopped @@ -198,9 +194,7 @@ export class OverlayView extends ObservableReactComponent<{}> { dragData.offset = [-offsetx, -offsety]; dragData.dropAction = dropActionType.move; dragData.removeDocument = this.removeOverlayDoc; - dragData.moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean): boolean => { - return dragData.removeDocument!(doc) ? addDocument(doc) : false; - }; + dragData.moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean): boolean => (dragData.removeDocument?.(doc) ? addDocument(doc) : false); DragManager.StartDocumentDrag([dref.current!], dragData, down[0], down[1]); return true; } @@ -227,7 +221,7 @@ export class OverlayView extends ObservableReactComponent<{}> { PanelHeight={d[Height]} ScreenToLocalTransform={this.docScreenToLocalXf(d)} renderDepth={1} - hideDecorations={true} + hideDecorations isDocumentActive={returnTrue} isContentActive={returnTrue} whenChildContentsActiveChanged={emptyFunction} |