From d58195a0470b3882d6b43b18f1f4ab7a373a671f Mon Sep 17 00:00:00 2001 From: Stanley Yip Date: Sat, 12 Oct 2019 17:02:31 -0400 Subject: marquee now relies on pdf-style menu. pdf-style menu is now componentized so that other things can use it --- .../collectionFreeForm/MarqueeOptionsMenu.tsx | 52 ++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx (limited to 'src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx') diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx new file mode 100644 index 000000000..7c5b87283 --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx @@ -0,0 +1,52 @@ +import React = require("react") +import AntimodeMenu from "../../AntimodeMenu"; +import { observer } from "mobx-react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { unimplementedFunction } from "../../../../Utils"; + +@observer +export default class MarqueeOptionsMenu extends AntimodeMenu { + static Instance: MarqueeOptionsMenu; + + public createCollection: (e: KeyboardEvent | React.PointerEvent | undefined) => void = unimplementedFunction; + public delete: (e: KeyboardEvent | React.PointerEvent | undefined) => void = unimplementedFunction; + public summarize: (e: KeyboardEvent | React.PointerEvent | undefined) => void = unimplementedFunction; + public showMarquee: () => void = unimplementedFunction; + public hideMarquee: () => void = unimplementedFunction; + + constructor(props: Readonly<{}>) { + super(props); + + MarqueeOptionsMenu.Instance = this; + } + + render() { + let buttons = [ + , + , + , + ] + return this.getElement(buttons); + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From ab959c44ea6393783fcfef82a241a7bc3e9124ed Mon Sep 17 00:00:00 2001 From: Stanley Yip Date: Sun, 13 Oct 2019 14:29:59 -0400 Subject: improved marquee menu interactions, fixed issue with panning on cffv --- .../collectionFreeForm/CollectionFreeFormView.scss | 3 +++ .../collectionFreeForm/MarqueeOptionsMenu.tsx | 12 +++--------- .../collections/collectionFreeForm/MarqueeView.tsx | 18 +++++++++++++++--- 3 files changed, 21 insertions(+), 12 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index a20d6df3a..9b608a576 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -26,6 +26,9 @@ } .collectionfreeformview-container { + // touch action none means that the browser will handle none of the touch actions. this allows us to implement our own actions. + touch-action: none; + .collectionfreeformview>.jsx-parser { position: inherit; height: 100%; diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx index 7c5b87283..91fcad4be 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx @@ -25,25 +25,19 @@ export default class MarqueeOptionsMenu extends AntimodeMenu { , , , ] diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index ad4da7733..4a7fa629c 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -51,13 +51,15 @@ export class MarqueeView extends React.Component } @action - cleanupInteractions = (all: boolean = false) => { + cleanupInteractions = (all: boolean = false, hideMarquee: boolean = true) => { if (all) { document.removeEventListener("pointerup", this.onPointerUp, true); document.removeEventListener("pointermove", this.onPointerMove, true); } document.removeEventListener("keydown", this.marqueeCommand, true); - this._visible = false; + if (hideMarquee) { + this._visible = false; + } } @undoBatch @@ -204,7 +206,14 @@ export class MarqueeView extends React.Component MarqueeOptionsMenu.Instance.hideMarquee = this.hideMarquee; MarqueeOptionsMenu.Instance.jumpTo(e.clientX, e.clientY); } - this.cleanupInteractions(true); + this.cleanupInteractions(true, this._commandExecuted); + + let hideMarquee = () => { + this.hideMarquee(); + MarqueeOptionsMenu.Instance.fadeOut(true); + document.removeEventListener("pointerdown", hideMarquee); + } + document.addEventListener("pointerdown", hideMarquee) if (e.altKey) { e.preventDefault(); @@ -283,6 +292,7 @@ export class MarqueeView extends React.Component SelectionManager.DeselectAll(); this.cleanupInteractions(false); MarqueeOptionsMenu.Instance.fadeOut(true); + this.hideMarquee(); } getCollection = (selected: Doc[]) => { @@ -321,6 +331,7 @@ export class MarqueeView extends React.Component let dataExtensionField = Doc.CreateDocumentExtensionForField(newCollection, "data"); dataExtensionField.ink = inkData ? new InkField(this.marqueeInkSelect(inkData)) : undefined; this.marqueeInkDelete(inkData); + this.hideMarquee(); return newCollection; } @@ -341,6 +352,7 @@ export class MarqueeView extends React.Component this.props.addDocument(newCollection, false); this.props.selectDocuments([newCollection]); MarqueeOptionsMenu.Instance.fadeOut(true); + this.hideMarquee(); } @action -- cgit v1.2.3-70-g09d2