From 5ed2968c5d3e62f06b6355c33d3cb17e9828db26 Mon Sep 17 00:00:00 2001 From: Stanley Yip Date: Tue, 8 Oct 2019 16:50:14 -0400 Subject: basic interactions, not very robust --- .../views/collections/collectionFreeForm/CollectionFreeFormView.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index c4311fa52..a20d6df3a 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -17,6 +17,7 @@ width: 100%; height: 100%; transform-origin: left top; + touch-action: none; } .collectionFreeform-customText { -- 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/CollectionFreeFormView.scss') 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 From e313d64c8bd1373ce3e8ec02fa73d3c97fc5e90b Mon Sep 17 00:00:00 2001 From: bob Date: Tue, 19 Nov 2019 12:29:33 -0500 Subject: minor cleanup. fix for collections being a background --- src/client/views/InkingStroke.tsx | 22 +++++++++------------- src/client/views/Main.scss | 2 +- .../collectionFreeForm/CollectionFreeFormView.scss | 1 - src/client/views/nodes/DocumentView.tsx | 3 +-- 4 files changed, 11 insertions(+), 17 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss') diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 411b0d3a0..74211cc90 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -1,18 +1,14 @@ +import { computed } from "mobx"; import { observer } from "mobx-react"; -import { observable, trace, runInAction, computed } from "mobx"; -import { InkingControl } from "./InkingControl"; -import React = require("react"); -import { InkTool, InkField, InkData } from "../../new_fields/InkField"; -import "./InkingStroke.scss"; -import { AudioBox } from "./nodes/AudioBox"; -import { Doc, FieldResult } from "../../new_fields/Doc"; -import { createSchema, makeInterface, listSpec } from "../../new_fields/Schema"; import { documentSchema } from "../../new_fields/documentSchemas"; +import { InkData, InkField, InkTool } from "../../new_fields/InkField"; +import { makeInterface } from "../../new_fields/Schema"; +import { Cast } from "../../new_fields/Types"; import { DocExtendableComponent } from "./DocComponent"; -import { FieldViewProps, FieldView } from "./nodes/FieldView"; -import { Transform } from "../util/Transform"; -import { Cast, FieldValue } from "../../new_fields/Types"; -import { List } from "../../new_fields/List"; +import { InkingControl } from "./InkingControl"; +import "./InkingStroke.scss"; +import { FieldView, FieldViewProps } from "./nodes/FieldView"; +import React = require("react"); type InkDocument = makeInterface<[typeof documentSchema]>; const InkDocument = makeInterface(documentSchema); @@ -40,7 +36,7 @@ export class InkingStroke extends DocExtendableComponent p.x); let ys = data.map(p => p.y); let left = Math.min(...xs); diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index 9cbe6e144..465527468 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -27,7 +27,7 @@ div { pointer-events: none; border-radius: inherit; position: inherit; - background: inherit; + // background: inherit; } p { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index db36c4391..d2731703f 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -45,7 +45,6 @@ // linear-gradient(to bottom, $light-color-secondary 1px, transparent 1px); // background-size: 30px 30px; // } - opacity: 0.99; border: 0px solid $light-color-secondary; border-radius: inherit; box-sizing: border-box; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index da4489bef..865ec8d9b 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -645,7 +645,7 @@ export class DocumentView extends DocComponent(Docu const ruleRounding = this.props.ruleProvider ? StrCast(this.props.ruleProvider["ruleRounding_" + this.Document.heading]) : undefined; const colorSet = this.setsLayoutProp("backgroundColor"); const clusterCol = this.props.ContainingCollectionDoc && this.props.ContainingCollectionDoc.clusterOverridesDefaultBackground; - const backgroundColor = this.Document.isBackground || (clusterCol && !colorSet) ? + const backgroundColor = (clusterCol && !colorSet) ? this.props.backgroundColor(this.Document) || StrCast(this.layoutDoc.backgroundColor) : ruleColor && !colorSet ? ruleColor : StrCast(this.layoutDoc.backgroundColor) || this.props.backgroundColor(this.Document); @@ -672,7 +672,6 @@ export class DocumentView extends DocComponent(Docu background: this.layoutDoc.type === DocumentType.FONTICON || this.layoutDoc.viewType === CollectionViewType.Linear ? undefined : backgroundColor, width: animwidth, height: animheight, - //transform: `scale(${this.layoutDoc.fitWidth ? 1 : this.props.ContentScaling()})`, opacity: this.Document.opacity }} > {this.innards} -- cgit v1.2.3-70-g09d2