diff options
Diffstat (limited to 'src/client')
-rw-r--r-- | src/client/views/OverlayView.scss | 5 | ||||
-rw-r--r-- | src/client/views/OverlayView.tsx | 77 | ||||
-rw-r--r-- | src/client/views/linking/LinkFollowBox.tsx | 5 | ||||
-rw-r--r-- | src/client/views/linking/LinkMenuItem.tsx | 7 |
4 files changed, 67 insertions, 27 deletions
diff --git a/src/client/views/OverlayView.scss b/src/client/views/OverlayView.scss index dc122497f..26c2e0e1e 100644 --- a/src/client/views/OverlayView.scss +++ b/src/client/views/OverlayView.scss @@ -39,4 +39,9 @@ width: 10px; height: 10px; cursor: nwse-resize; +} + +.overlayView-doc { + z-index: 1; + position: absolute; }
\ No newline at end of file diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx index 8d80ad1f1..bc02a49c6 100644 --- a/src/client/views/OverlayView.tsx +++ b/src/client/views/OverlayView.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { observer } from "mobx-react"; import { observable, action } from "mobx"; -import { Utils, emptyFunction, returnOne, returnTrue, returnEmptyString } from "../../Utils"; +import { Utils, emptyFunction, returnOne, returnTrue, returnEmptyString, returnZero, returnFalse } from "../../Utils"; import './OverlayView.scss'; import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils"; @@ -10,6 +10,8 @@ import { Id } from "../../new_fields/FieldSymbols"; import { DocumentView } from "./nodes/DocumentView"; import { Transform } from "../util/Transform"; import { CollectionFreeFormDocumentView } from "./nodes/CollectionFreeFormDocumentView"; +import { DocumentContentsView } from "./nodes/DocumentContentsView"; +import { NumCast } from "../../new_fields/Types"; export type OverlayDisposer = () => void; @@ -142,27 +144,58 @@ export class OverlayView extends React.Component { return ( <div className="overlayView" id="overlayView"> {this._elements} - {CurrentUserUtils.UserDocument.overlays instanceof Doc && DocListCast(CurrentUserUtils.UserDocument.overlays.data).map(d => ( - <CollectionFreeFormDocumentView key={d[Id]} - Document={d} - bringToFront={emptyFunction} - addDocument={undefined} - removeDocument={undefined} - ContentScaling={returnOne} - PanelWidth={returnOne} - PanelHeight={returnOne} - ScreenToLocalTransform={Transform.Identity} - renderDepth={1} - selectOnLoad={false} - parentActive={returnTrue} - whenActiveChanged={emptyFunction} - focus={emptyFunction} - backgroundColor={returnEmptyString} - addDocTab={emptyFunction} - pinToPres={emptyFunction} - ContainingCollectionView={undefined} - zoomToScale={emptyFunction} - getScale={returnOne} />))} + {CurrentUserUtils.UserDocument.overlays instanceof Doc && DocListCast(CurrentUserUtils.UserDocument.overlays.data).map(d => { + let offsetx = 0, offsety = 0; + let onPointerMove = action((e: PointerEvent) => { + if (e.buttons === 1) { + d.x = e.clientX + offsetx; + d.y = e.clientY + offsety; + e.stopPropagation(); + e.preventDefault(); + } + }); + let onPointerUp = action((e: PointerEvent) => { + document.removeEventListener("pointermove", onPointerMove); + document.removeEventListener("pointerup", onPointerUp); + e.stopPropagation(); + e.preventDefault(); + }); + + let onPointerDown = (e: React.PointerEvent) => { + offsetx = NumCast(d.x) - e.clientX; + offsety = NumCast(d.y) - e.clientY; + e.stopPropagation(); + e.preventDefault(); + document.addEventListener("pointermove", onPointerMove); + document.addEventListener("pointerup", onPointerUp); + } + return <div className="overlayView-doc" key={d[Id]} onPointerDown={onPointerDown} style={{ transform: `translate(${d.x}px, ${d.y}px)` }}> + <DocumentContentsView + Document={d} + ChromeHeight={returnZero} + isSelected={returnFalse} + select={emptyFunction} + layoutKey={"layout"} + bringToFront={emptyFunction} + addDocument={undefined} + removeDocument={undefined} + ContentScaling={returnOne} + PanelWidth={returnOne} + PanelHeight={returnOne} + ScreenToLocalTransform={Transform.Identity} + renderDepth={1} + selectOnLoad={false} + parentActive={returnTrue} + whenActiveChanged={emptyFunction} + focus={emptyFunction} + backgroundColor={returnEmptyString} + addDocTab={emptyFunction} + pinToPres={emptyFunction} + ContainingCollectionView={undefined} + zoomToScale={emptyFunction} + getScale={returnOne} /> + </div> + })} </div> ); } diff --git a/src/client/views/linking/LinkFollowBox.tsx b/src/client/views/linking/LinkFollowBox.tsx index 54670e2c7..07f07f72a 100644 --- a/src/client/views/linking/LinkFollowBox.tsx +++ b/src/client/views/linking/LinkFollowBox.tsx @@ -38,7 +38,7 @@ enum FollowOptions { export class LinkFollowBox extends React.Component<FieldViewProps> { public static LayoutString() { return FieldView.LayoutString(LinkFollowBox); } - public static Instance: LinkFollowBox; + public static Instance: LinkFollowBox | undefined; @observable static linkDoc: Doc | undefined = undefined; @observable static destinationDoc: Doc | undefined = undefined; @observable static sourceDoc: Doc | undefined = undefined; @@ -557,7 +557,8 @@ export class LinkFollowBox extends React.Component<FieldViewProps> { async close() { let res = await DocListCastAsync((CurrentUserUtils.UserDocument.overlays as Doc).data); - if (res) res.splice(res.indexOf(LinkFollowBox.Instance.props.Document), 1); + if (res) res.splice(res.indexOf(LinkFollowBox.Instance!.props.Document), 1); + LinkFollowBox.Instance = undefined; } render() { diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index 0ae578d5a..6c10d4fb6 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -100,9 +100,10 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> { if (LinkFollowBox.Instance === undefined) { let doc = await Docs.Create.LinkFollowBoxDocument({ x: MainView.Instance.flyoutWidth, y: 20, width: 500, height: 370, title: "Link Follower" }); await Doc.AddDocToList(Cast(CurrentUserUtils.UserDocument.overlays, Doc) as Doc, "data", doc); + } else { + LinkFollowBox.Instance!.setLinkDocs(this.props.linkDoc, this.props.sourceDoc, this.props.destinationDoc); + LinkFollowBox.Instance!.defaultLinkBehavior(); } - LinkFollowBox.Instance.setLinkDocs(this.props.linkDoc, this.props.sourceDoc, this.props.destinationDoc); - LinkFollowBox.Instance.defaultLinkBehavior(); } @action.bound @@ -113,7 +114,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> { } else { MainView.Instance.toggleLinkFollowBox(false); } - LinkFollowBox.Instance.setLinkDocs(this.props.linkDoc, this.props.sourceDoc, this.props.destinationDoc); + LinkFollowBox.Instance!.setLinkDocs(this.props.linkDoc, this.props.sourceDoc, this.props.destinationDoc); } render() { |