aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/OverlayView.tsx
diff options
context:
space:
mode:
authorbobzel <zzzman@gmail.com>2022-07-08 00:17:26 -0400
committerbobzel <zzzman@gmail.com>2022-07-08 00:17:26 -0400
commit146f8622d5bac2edc6b09f57c173bd057dfbcfad (patch)
treef871089c438a476543ca96bac163c0532b9557c7 /src/client/views/OverlayView.tsx
parentb7e66da6b23cdb41c127000dfe13843d35f7d0cc (diff)
restructured currentUserUtils to avoid having import cycles.
Diffstat (limited to 'src/client/views/OverlayView.tsx')
-rw-r--r--src/client/views/OverlayView.tsx197
1 files changed, 107 insertions, 90 deletions
diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx
index 598fff29a..5242fabb8 100644
--- a/src/client/views/OverlayView.tsx
+++ b/src/client/views/OverlayView.tsx
@@ -1,23 +1,21 @@
-import { docs } from "googleapis/build/src/apis/docs";
-import { action, computed, observable } from "mobx";
-import { observer } from "mobx-react";
-import { computedFn } from "mobx-utils";
-import * as React from "react";
+import { action, computed, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import { computedFn } from 'mobx-utils';
+import * as React from 'react';
import ReactLoading from 'react-loading';
-import { Doc, WidthSym, HeightSym, DocListCast } from "../../fields/Doc";
-import { Id } from "../../fields/FieldSymbols";
-import { Cast, NumCast } from "../../fields/Types";
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, returnTrue, returnZero, setupMoveUpEvents, Utils } from "../../Utils";
-import { DocUtils } from "../documents/Documents";
-import { CurrentUserUtils } from "../util/CurrentUserUtils";
-import { DragManager } from "../util/DragManager";
-import { ScriptingGlobals } from "../util/ScriptingGlobals";
-import { Transform } from "../util/Transform";
-import { CollectionFreeFormLinksView } from "./collections/collectionFreeForm/CollectionFreeFormLinksView";
-import { DocumentView } from "./nodes/DocumentView";
+import { Doc, DocListCast, HeightSym, WidthSym } from '../../fields/Doc';
+import { Id } from '../../fields/FieldSymbols';
+import { NumCast } from '../../fields/Types';
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents, Utils } from '../../Utils';
+import { DocUtils } from '../documents/Documents';
+import { DragManager } from '../util/DragManager';
+import { ScriptingGlobals } from '../util/ScriptingGlobals';
+import { Transform } from '../util/Transform';
+import { CollectionFreeFormLinksView } from './collections/collectionFreeForm/CollectionFreeFormLinksView';
+import { DocumentView } from './nodes/DocumentView';
import './OverlayView.scss';
import { ScriptingRepl } from './ScriptingRepl';
-import { DefaultStyleProvider } from "./StyleProvider";
+import { DefaultStyleProvider } from './StyleProvider';
export type OverlayDisposer = () => void;
@@ -52,18 +50,18 @@ export class OverlayWindow extends React.Component<OverlayWindowProps> {
}
onPointerDown = (_: React.PointerEvent) => {
- document.removeEventListener("pointermove", this.onPointerMove);
- document.removeEventListener("pointerup", this.onPointerUp);
- document.addEventListener("pointermove", this.onPointerMove);
- document.addEventListener("pointerup", this.onPointerUp);
- }
+ document.removeEventListener('pointermove', this.onPointerMove);
+ document.removeEventListener('pointerup', this.onPointerUp);
+ document.addEventListener('pointermove', this.onPointerMove);
+ document.addEventListener('pointerup', this.onPointerUp);
+ };
onResizerPointerDown = (_: React.PointerEvent) => {
- document.removeEventListener("pointermove", this.onResizerPointerMove);
- document.removeEventListener("pointerup", this.onResizerPointerUp);
- document.addEventListener("pointermove", this.onResizerPointerMove);
- document.addEventListener("pointerup", this.onResizerPointerUp);
- }
+ document.removeEventListener('pointermove', this.onResizerPointerMove);
+ document.removeEventListener('pointerup', this.onResizerPointerUp);
+ document.addEventListener('pointermove', this.onResizerPointerMove);
+ document.addEventListener('pointerup', this.onResizerPointerUp);
+ };
@action
onPointerMove = (e: PointerEvent) => {
@@ -71,7 +69,7 @@ export class OverlayWindow extends React.Component<OverlayWindowProps> {
this.x = Math.max(Math.min(this.x, window.innerWidth - this.width), 0);
this.y += e.movementY;
this.y = Math.max(Math.min(this.y, window.innerHeight - this.height), 0);
- }
+ };
@action
onResizerPointerMove = (e: PointerEvent) => {
@@ -79,28 +77,28 @@ export class OverlayWindow extends React.Component<OverlayWindowProps> {
this.width = Math.max(this.width, 30);
this.height += e.movementY;
this.height = Math.max(this.height, 30);
- }
+ };
onPointerUp = (e: PointerEvent) => {
- document.removeEventListener("pointermove", this.onPointerMove);
- document.removeEventListener("pointerup", this.onPointerUp);
- }
+ document.removeEventListener('pointermove', this.onPointerMove);
+ document.removeEventListener('pointerup', this.onPointerUp);
+ };
onResizerPointerUp = (e: PointerEvent) => {
- document.removeEventListener("pointermove", this.onResizerPointerMove);
- document.removeEventListener("pointerup", this.onResizerPointerUp);
- }
+ document.removeEventListener('pointermove', this.onResizerPointerMove);
+ document.removeEventListener('pointerup', this.onResizerPointerUp);
+ };
render() {
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">X</button>
- </div>
- <div className="overlayWindow-content">
- {this.props.children}
+ <div className="overlayWindow-titleBar" onPointerDown={this.onPointerDown}>
+ {this.props.overlayOptions.title || 'Untitled'}
+ <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>
);
@@ -126,13 +124,20 @@ export class OverlayView extends React.Component {
const index = this._elements.indexOf(ele);
if (index !== -1) this._elements.splice(index, 1);
});
- ele = <div key={Utils.GenerateGuid()} className="overlayView-wrapperDiv" style={{
- transform: `translate(${options.x}px, ${options.y}px)`,
- width: options.width,
- height: options.height,
- top: 0,
- left: 0
- }}>{ele}</div>;
+ ele = (
+ <div
+ key={Utils.GenerateGuid()}
+ className="overlayView-wrapperDiv"
+ style={{
+ transform: `translate(${options.x}px, ${options.y}px)`,
+ width: options.width,
+ height: options.height,
+ top: 0,
+ left: 0,
+ }}>
+ {ele}
+ </div>
+ );
this._elements.push(ele);
return remove;
}
@@ -143,23 +148,30 @@ export class OverlayView extends React.Component {
const index = this._elements.indexOf(contents);
if (index !== -1) this._elements.splice(index, 1);
});
- contents = <OverlayWindow onClick={remove} key={Utils.GenerateGuid()} overlayOptions={options}>{contents}</OverlayWindow>;
+ contents = (
+ <OverlayWindow onClick={remove} key={Utils.GenerateGuid()} overlayOptions={options}>
+ {contents}
+ </OverlayWindow>
+ );
this._elements.push(contents);
return remove;
}
removeOverlayDoc = (doc: Doc | Doc[]) => {
- (doc instanceof Doc ? [doc] : doc).forEach(doc => Doc.RemoveDocFromList(CurrentUserUtils.MyOverlayDocs, undefined, doc));
+ (doc instanceof Doc ? [doc] : doc).forEach(doc => Doc.RemoveDocFromList(Doc.MyOverlayDocs, undefined, doc));
return true;
- }
-
- docScreenToLocalXf = computedFn(function docScreenToLocalXf(this: any, doc: Doc) {
- return () => new Transform(-NumCast(doc.x), -NumCast(doc.y), 1);
- }.bind(this));
+ };
+
+ docScreenToLocalXf = computedFn(
+ function docScreenToLocalXf(this: any, doc: Doc) {
+ return () => new Transform(-NumCast(doc.x), -NumCast(doc.y), 1);
+ }.bind(this)
+ );
@computed get overlayDocs() {
- return DocListCast(CurrentUserUtils.MyOverlayDocs?.data).map(d => {
- let offsetx = 0, offsety = 0;
+ return DocListCast(Doc.MyOverlayDocs?.data).map(d => {
+ let offsetx = 0,
+ offsety = 0;
const dref = React.createRef<HTMLDivElement>();
const onPointerMove = action((e: PointerEvent, down: number[]) => {
if (e.buttons === 1) {
@@ -169,10 +181,10 @@ export class OverlayView extends React.Component {
if (e.metaKey) {
const dragData = new DragManager.DocumentDragData([d]);
dragData.offset = [-offsetx, -offsety];
- dragData.dropAction = "move";
+ dragData.dropAction = 'move';
dragData.removeDocument = (doc: Doc | Doc[]) => {
- const docs = (doc instanceof Doc) ? [doc] : doc;
- docs.forEach(d => Doc.RemoveDocFromList(CurrentUserUtils.MyOverlayDocs, undefined, d));
+ const docs = doc instanceof Doc ? [doc] : doc;
+ docs.forEach(d => Doc.RemoveDocFromList(Doc.MyOverlayDocs, undefined, d));
return true;
};
dragData.moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean): boolean => {
@@ -189,31 +201,39 @@ export class OverlayView extends React.Component {
offsetx = NumCast(d.x) - e.clientX;
offsety = NumCast(d.y) - e.clientY;
};
- return <div className="overlayView-doc" ref={dref} key={d[Id]} onPointerDown={onPointerDown} style={{ top: d.type === 'presentation' ? 0 : undefined, width: NumCast(d._width), height: NumCast(d._height), transform: `translate(${d.x}px, ${d.y}px)` }}>
- <DocumentView
- Document={d}
- rootSelected={returnTrue}
- bringToFront={emptyFunction}
- addDocument={undefined}
- removeDocument={this.removeOverlayDoc}
- PanelWidth={d[WidthSym]}
- PanelHeight={d[HeightSym]}
- ScreenToLocalTransform={this.docScreenToLocalXf(d)}
- renderDepth={1}
- isDocumentActive={returnTrue}
- isContentActive={returnTrue}
- whenChildContentsActiveChanged={emptyFunction}
- focus={DocUtils.DefaultFocus}
- styleProvider={DefaultStyleProvider}
- docViewPath={returnEmptyDoclist}
- addDocTab={returnFalse}
- pinToPres={emptyFunction}
- docFilters={returnEmptyFilter}
- docRangeFilters={returnEmptyFilter}
- searchFilterDocs={returnEmptyDoclist}
- ContainingCollectionView={undefined}
- ContainingCollectionDoc={undefined} />
- </div>;
+ return (
+ <div
+ className="overlayView-doc"
+ ref={dref}
+ key={d[Id]}
+ onPointerDown={onPointerDown}
+ style={{ top: d.type === 'presentation' ? 0 : undefined, width: NumCast(d._width), height: NumCast(d._height), transform: `translate(${d.x}px, ${d.y}px)` }}>
+ <DocumentView
+ Document={d}
+ rootSelected={returnTrue}
+ bringToFront={emptyFunction}
+ addDocument={undefined}
+ removeDocument={this.removeOverlayDoc}
+ PanelWidth={d[WidthSym]}
+ PanelHeight={d[HeightSym]}
+ ScreenToLocalTransform={this.docScreenToLocalXf(d)}
+ renderDepth={1}
+ isDocumentActive={returnTrue}
+ isContentActive={returnTrue}
+ whenChildContentsActiveChanged={emptyFunction}
+ focus={DocUtils.DefaultFocus}
+ styleProvider={DefaultStyleProvider}
+ docViewPath={returnEmptyDoclist}
+ addDocTab={returnFalse}
+ pinToPres={emptyFunction}
+ docFilters={returnEmptyFilter}
+ docRangeFilters={returnEmptyFilter}
+ searchFilterDocs={returnEmptyDoclist}
+ ContainingCollectionView={undefined}
+ ContainingCollectionDoc={undefined}
+ />
+ </div>
+ );
});
}
@@ -221,13 +241,10 @@ export class OverlayView extends React.Component {
return OverlayView.Instance.addElement(<ReactLoading type="spinningBubbles" color="green" height={250} width={250} />, { x: 300, y: 200 });
}
-
render() {
return (
<div className="overlayView" id="overlayView">
- <div>
- {this._elements}
- </div>
+ <div>{this._elements}</div>
<CollectionFreeFormLinksView key="freeformLinks" />
{this.overlayDocs}
</div>
@@ -237,4 +254,4 @@ export class OverlayView extends React.Component {
// bcz: ugh ... want to be able to pass ScriptingRepl as tag argument, but that doesn't seem to work.. runtime error
ScriptingGlobals.add(function addOverlayWindow(type: string, options: OverlayElementOptions) {
OverlayView.Instance.addWindow(<ScriptingRepl />, options);
-}); \ No newline at end of file
+});