From 86fb73ccadd12ac07fea7a162295b287d6651c48 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Tue, 23 Apr 2019 21:24:57 -0400 Subject: fixes for text box input and dock view problems. --- src/client/views/PreviewCursor.tsx | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src/client/views/PreviewCursor.tsx') diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx index ff8434681..5ece034fb 100644 --- a/src/client/views/PreviewCursor.tsx +++ b/src/client/views/PreviewCursor.tsx @@ -18,6 +18,8 @@ export class PreviewCursor extends React.Component<{}> { @observable public static hide = () => { }; @action public static Show(hide: any, x: number, y: number) { + if (this.hide) + this.hide(); this.clickPoint = [x, y]; this.hide = hide; setTimeout(action(() => this.Visible = true), (1)); -- cgit v1.2.3-70-g09d2 From 27f505949ae47c3c5f83633115b9d238936d4003 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Tue, 23 Apr 2019 22:39:41 -0400 Subject: cleaned up events a bit --- src/client/views/PreviewCursor.tsx | 35 +++++++++----- .../collectionFreeForm/CollectionFreeFormView.tsx | 8 +--- .../collections/collectionFreeForm/MarqueeView.tsx | 55 +++++++--------------- src/client/views/nodes/DocumentView.tsx | 7 +-- 4 files changed, 48 insertions(+), 57 deletions(-) (limited to 'src/client/views/PreviewCursor.tsx') diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx index 5ece034fb..39b6c6544 100644 --- a/src/client/views/PreviewCursor.tsx +++ b/src/client/views/PreviewCursor.tsx @@ -7,32 +7,45 @@ import "./PreviewCursor.scss"; @observer export class PreviewCursor extends React.Component<{}> { private _prompt = React.createRef(); + static _onKeyPress?: (e: KeyboardEvent) => void; + @observable static _clickPoint = [0, 0]; + @observable public static Visible = false; //when focus is lost, this will remove the preview cursor @action onBlur = (): void => { PreviewCursor.Visible = false; - PreviewCursor.hide(); } - @observable static clickPoint = [0, 0]; - @observable public static Visible = false; - @observable public static hide = () => { }; + constructor(props: any) { + super(props); + document.addEventListener("keypress", this.onKeyPress) + } + + @action + onKeyPress = (e: KeyboardEvent) => { + // Mixing events between React and Native is finicky. In FormattedTextBox, we set the + // DASHFormattedTextBoxHandled flag when a text box consumes a key press so that we can ignore + // the keyPress here. + //if not these keys, make a textbox if preview cursor is active! + if (!e.ctrlKey && !e.altKey && !e.defaultPrevented && !(e as any).DASHFormattedTextBoxHandled) { + PreviewCursor.Visible && PreviewCursor._onKeyPress && PreviewCursor._onKeyPress(e); + } + PreviewCursor.Visible = false; + } @action - public static Show(hide: any, x: number, y: number) { - if (this.hide) - this.hide(); - this.clickPoint = [x, y]; - this.hide = hide; + public static Show(x: number, y: number, onKeyPress: (e: KeyboardEvent) => void) { + this._clickPoint = [x, y]; + this._onKeyPress = onKeyPress; setTimeout(action(() => this.Visible = true), (1)); } render() { - if (!PreviewCursor.clickPoint) { + if (!PreviewCursor._clickPoint) { return (null); } if (PreviewCursor.Visible && this._prompt.current) { this._prompt.current.focus(); } return
+ style={{ transform: `translate(${PreviewCursor._clickPoint[0]}px, ${PreviewCursor._clickPoint[1]}px)`, opacity: PreviewCursor.Visible ? 1 : 0 }}> I
; } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 56d54696d..7492d8744 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -118,19 +118,15 @@ export class CollectionFreeFormView extends CollectionSubView { (e.button === 0 && e.altKey)) && (childSelected || this.props.active()))) || (!CollectionFreeFormView.RIGHT_BTN_DRAG && ((e.button === 0 && !e.altKey && (!this.isAnnotationOverlay || this.zoomScaling() !== 1)) && (childSelected || this.props.active())))) { - document.removeEventListener("pointermove", this.onPointerMove); + this.cleanupInteractions(); document.addEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); document.addEventListener("pointerup", this.onPointerUp); this._lastX = e.pageX; this._lastY = e.pageY; } } - @action onPointerUp = (e: PointerEvent): void => { - e.stopPropagation(); - this.cleanupInteractions(); } @@ -164,7 +160,7 @@ export class CollectionFreeFormView extends CollectionSubView { this.setPan(x - dx, y - dy); this._lastX = e.pageX; this._lastY = e.pageY; - e.stopPropagation(); + e.stopPropagation(); // doesn't actually stop propagation since all our listeners are listening to events on 'document' however it does mark the event as cancelBubble=true which we test for in the move event handlers e.preventDefault(); } } diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 32633a1ed..623643238 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -32,9 +32,7 @@ export class MarqueeView extends React.Component @observable _lastY: number = 0; @observable _downX: number = 0; @observable _downY: number = 0; - @observable _used: boolean = false; @observable _visible: boolean = false; - _showOnUp: boolean = false; static DRAG_THRESHOLD = 4; @action @@ -42,8 +40,6 @@ export class MarqueeView extends React.Component if (all) { document.removeEventListener("pointermove", this.onPointerMove, true); document.removeEventListener("pointerup", this.onPointerUp, true); - } else { - this._used = true; } document.removeEventListener("keydown", this.marqueeCommand, true); this._visible = false; @@ -51,32 +47,19 @@ export class MarqueeView extends React.Component @action onKeyPress = (e: KeyboardEvent) => { - // Mixing events between React and Native is finicky. In FormattedTextBox, we set the - // DASHFormattedTextBoxHandled flag when a text box consumes a key press so that we can ignore - // the keyPress here. - //if not these keys, make a textbox if preview cursor is active! - if (!e.ctrlKey && !e.altKey && !e.defaultPrevented && !(e as any).DASHFormattedTextBoxHandled) { - //make textbox and add it to this collection - let [x, y] = this.props.getTransform().transformPoint(this._downX, this._downY); - let newBox = Documents.TextDocument({ width: 200, height: 100, x: x, y: y, title: "typed text" }); - this.props.addLiveTextDocument(newBox); - PreviewCursor.Visible = false; - e.stopPropagation(); - } - } - hideCursor = () => { - document.removeEventListener("keypress", this.onKeyPress, false); + //make textbox and add it to this collection + let [x, y] = this.props.getTransform().transformPoint(this._downX, this._downY); + let newBox = Documents.TextDocument({ width: 200, height: 100, x: x, y: y, title: "typed text" }); + this.props.addLiveTextDocument(newBox); + e.stopPropagation(); } @action onPointerDown = (e: React.PointerEvent): void => { this._downX = this._lastX = e.pageX; this._downY = this._lastY = e.pageY; - - document.removeEventListener("keypress", this.onKeyPress, false); + PreviewCursor.Visible = false; if ((CollectionFreeFormView.RIGHT_BTN_DRAG && e.button === 0 && !e.altKey && !e.metaKey && this.props.container.props.active()) || (!CollectionFreeFormView.RIGHT_BTN_DRAG && (e.button === 2 || (e.button === 0 && e.altKey)) && this.props.container.props.active())) { - this._used = false; - this._showOnUp = true; document.addEventListener("pointermove", this.onPointerMove, true); document.addEventListener("pointerup", this.onPointerUp, true); document.addEventListener("keydown", this.marqueeCommand, true); @@ -91,14 +74,8 @@ export class MarqueeView extends React.Component this._lastX = e.pageX; this._lastY = e.pageY; if (!e.cancelBubble) { - if (Math.abs(this._downX - e.clientX) > 4 || Math.abs(this._downY - e.clientY) > 4) { - this._showOnUp = false; - PreviewCursor.Visible = false; - } - if (!this._used && - (!CollectionFreeFormView.RIGHT_BTN_DRAG && (e.buttons === 2 || (e.buttons == 1 && e.altKey))) || - (CollectionFreeFormView.RIGHT_BTN_DRAG && e.buttons === 1 && !e.altKey && !e.metaKey) && - (Math.abs(this._lastX - this._downX) > MarqueeView.DRAG_THRESHOLD || Math.abs(this._lastY - this._downY) > MarqueeView.DRAG_THRESHOLD)) { + if (Math.abs(this._lastX - this._downX) > MarqueeView.DRAG_THRESHOLD || + Math.abs(this._lastY - this._downY) > MarqueeView.DRAG_THRESHOLD) { this._visible = true; e.stopPropagation(); e.preventDefault(); @@ -110,24 +87,28 @@ export class MarqueeView extends React.Component @action onPointerUp = (e: PointerEvent): void => { - this.cleanupInteractions(true); - this._visible = false; - if (!this._showOnUp && (CollectionFreeFormView.RIGHT_BTN_DRAG && e.button === 0 && !e.altKey && !e.metaKey) || - (!CollectionFreeFormView.RIGHT_BTN_DRAG && ((e.button === 0 && e.altKey) || e.button === 2))) { + if (this._visible) { let mselect = this.marqueeSelect(); if (!e.shiftKey) { SelectionManager.DeselectAll(mselect.length ? undefined : this.props.container.props.Document); } this.props.selectDocuments(mselect.length ? mselect : [this.props.container.props.Document]); } + this.cleanupInteractions(true); if (e.altKey) e.preventDefault(); } @action onClick = (e: React.MouseEvent): void => { - PreviewCursor.Show(this.hideCursor, e.clientX, e.clientY); - document.addEventListener("keypress", this.onKeyPress, false); + if (Math.abs(e.clientX - this._downX) < MarqueeView.DRAG_THRESHOLD && + Math.abs(e.clientY - this._downY) < MarqueeView.DRAG_THRESHOLD) { + PreviewCursor.Show(e.clientX, e.clientY, this.onKeyPress); + // let the DocumentView stopPropagation of this event when it selects this document + } else { // why do we get a click event when the cursor have moved a big distance? + // let's cut it off here so no one else has to deal with it. + e.stopPropagation(); + } } intersectRect(r1: { left: number, top: number, width: number, height: number }, diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 6784ac310..b3b9f6e51 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -23,6 +23,7 @@ import "./DocumentView.scss"; import React = require("react"); import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView"; import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils"; +import { MarqueeView } from "../collections/collectionFreeForm/MarqueeView"; export interface DocumentViewProps { ContainingCollectionView: Opt; @@ -146,8 +147,8 @@ export class DocumentView extends React.Component { } onClick = (e: React.MouseEvent): void => { - console.log("click = " + this.props.Document.Title); - if (CurrentUserUtils.MainDocId != this.props.Document.Id) { + if (CurrentUserUtils.MainDocId != this.props.Document.Id && + (Math.abs(e.clientX - this._downX) < MarqueeView.DRAG_THRESHOLD && Math.abs(e.clientY - this._downY) < MarqueeView.DRAG_THRESHOLD)) { SelectionManager.SelectDoc(this, e.ctrlKey); } e.stopPropagation(); @@ -182,7 +183,7 @@ export class DocumentView extends React.Component { this.startDragging(this._downX, this._downY, e.ctrlKey || e.altKey); } } - e.stopPropagation(); + e.stopPropagation(); // doesn't actually stop propagation since all our listeners are listening to events on 'document' however it does mark the event as cancelBubble=true which we test for in the move event handlers e.preventDefault(); } } -- cgit v1.2.3-70-g09d2 From 20becbb5ca40350ed85e01f73f29621ba7783bb9 Mon Sep 17 00:00:00 2001 From: bob Date: Wed, 24 Apr 2019 12:20:38 -0400 Subject: playing with linking --- src/client/util/DragManager.ts | 6 ++-- src/client/views/DocumentDecorations.tsx | 3 +- src/client/views/PreviewCursor.tsx | 8 +++-- .../collections/collectionFreeForm/MarqueeView.tsx | 33 ++++++++++++++++--- .../views/nodes/CollectionFreeFormDocumentView.tsx | 16 ++++----- src/client/views/nodes/DocumentView.tsx | 38 ++-------------------- src/client/views/nodes/FormattedTextBox.tsx | 2 ++ src/fields/Document.ts | 31 ++++++++++++++++++ 8 files changed, 80 insertions(+), 57 deletions(-) (limited to 'src/client/views/PreviewCursor.tsx') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 91b3ce616..5aa7ad8e2 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -41,11 +41,11 @@ export function SetupDrag(_reference: React.RefObject, docFunc: } export async function DragLinksAsDocuments(dragEle: HTMLElement, x: number, y: number, sourceDoc: Document) { - let srcTarg = sourceDoc.GetT(KeyStore.Prototype, Document); - let draggedDocs = (srcTarg && srcTarg !== FieldWaiting) ? + let srcTarg = sourceDoc.GetPrototype(); + let draggedDocs = srcTarg ? srcTarg.GetList(KeyStore.LinkedToDocs, [] as Document[]).map(linkDoc => (linkDoc.GetT(KeyStore.LinkedToDocs, Document)) as Document) : []; - let draggedFromDocs = (srcTarg && srcTarg !== FieldWaiting) ? + let draggedFromDocs = srcTarg ? srcTarg.GetList(KeyStore.LinkedFromDocs, [] as Document[]).map(linkDoc => (linkDoc.GetT(KeyStore.LinkedFromDocs, Document)) as Document) : []; draggedDocs.push(...draggedFromDocs); diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 5c57a829a..9995c1c3f 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -6,7 +6,7 @@ import { ListField } from "../../fields/ListField"; import { NumberField } from "../../fields/NumberField"; import { TextField } from "../../fields/TextField"; import { Document } from "../../fields/Document"; -import { emptyFunction } from "../../Utils"; +import { emptyFunction, Utils } from "../../Utils"; import { DragLinksAsDocuments, DragManager } from "../util/DragManager"; import { SelectionManager } from "../util/SelectionManager"; import { undoBatch } from "../util/UndoManager"; @@ -19,7 +19,6 @@ import { CompileScript } from "../util/Scripting"; import { IconBox } from "./nodes/IconBox"; import { FieldValue, Field } from "../../fields/Field"; import { Documents } from "../documents/Documents"; -import { Utils } from "../northstar/utils/Utils"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx index 39b6c6544..744ec0535 100644 --- a/src/client/views/PreviewCursor.tsx +++ b/src/client/views/PreviewCursor.tsx @@ -17,7 +17,7 @@ export class PreviewCursor extends React.Component<{}> { constructor(props: any) { super(props); - document.addEventListener("keypress", this.onKeyPress) + document.addEventListener("keydown", this.onKeyPress) } @action @@ -28,8 +28,12 @@ export class PreviewCursor extends React.Component<{}> { //if not these keys, make a textbox if preview cursor is active! if (!e.ctrlKey && !e.altKey && !e.defaultPrevented && !(e as any).DASHFormattedTextBoxHandled) { PreviewCursor.Visible && PreviewCursor._onKeyPress && PreviewCursor._onKeyPress(e); + PreviewCursor.Visible = false; + } else if (e.ctrlKey) { + if (e.key == "v") { + PreviewCursor.Visible && PreviewCursor._onKeyPress && PreviewCursor._onKeyPress(e); + } } - PreviewCursor.Visible = false; } @action public static Show(x: number, y: number, onKeyPress: (e: KeyboardEvent) => void) { diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 39b42dac9..898fff019 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -14,6 +14,7 @@ import { CollectionFreeFormView } from "./CollectionFreeFormView"; import "./MarqueeView.scss"; import React = require("react"); import { Utils } from "../../../../Utils"; +import { ListField } from "../../../../fields/ListField"; interface MarqueeViewProps { getContainerTransform: () => Transform; @@ -128,16 +129,16 @@ export class MarqueeView extends React.Component @undoBatch @action marqueeCommand = (e: KeyboardEvent) => { - if (e.key === "Backspace" || e.key === "Delete") { + if (e.key === "Backspace" || e.key === "Delete" || e.key == "d") { this.marqueeSelect().map(d => this.props.removeDocument(d)); let ink = this.props.container.props.Document.GetT(KeyStore.Ink, InkField); if (ink && ink !== FieldWaiting) { this.marqueeInkDelete(ink.Data); } - this.cleanupInteractions(); + this.cleanupInteractions(true); e.stopPropagation(); } - if (e.key === "c") { + if (e.key === "c" || e.key === "r") { e.stopPropagation(); let bounds = this.Bounds; let selected = this.marqueeSelect().map(d => { @@ -155,16 +156,38 @@ export class MarqueeView extends React.Component y: bounds.top, panx: 0, pany: 0, + backgroundColor: selected.length ? "white" : "", scale: zoomBasis, width: bounds.width * zoomBasis, height: bounds.height * zoomBasis, ink: inkData ? this.marqueeInkSelect(inkData) : undefined, title: "a nested collection" }); - this.props.addDocument(newCollection, false); + this.marqueeInkDelete(inkData); - this.cleanupInteractions(); SelectionManager.DeselectAll(); + if (e.key === "r") { + let summary = Documents.TextDocument({ x: bounds.left, y: bounds.top, width: 300, height: 100, backgroundColor: "yellow", title: "-summary-" }); + summary.GetPrototype()!.CreateLink(newCollection.GetPrototype()!); + this.props.addLiveTextDocument(summary); + e.preventDefault(); + } + else { + this.props.addDocument(newCollection, false); + } + this.cleanupInteractions(true); + } + if (e.key === "s") { + e.stopPropagation(); + e.preventDefault(); + let bounds = this.Bounds; + let selected = this.marqueeSelect(); + SelectionManager.DeselectAll(); + let summary = Documents.TextDocument({ x: bounds.left + bounds.width + 25, y: bounds.top, width: 300, height: 100, backgroundColor: "yellow", title: "-summary-" }); + this.props.addLiveTextDocument(summary); + selected.map(select => summary.GetPrototype()!.CreateLink(select.GetPrototype()!)); + + this.cleanupInteractions(true); } } @action diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 671bfbc04..420324d40 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -7,7 +7,7 @@ import { Transform } from "../../util/Transform"; import { DocumentView, DocumentViewProps } from "./DocumentView"; import "./DocumentView.scss"; import React = require("react"); -import { OmitKeys } from "../../../Utils"; +import { OmitKeys, Utils } from "../../../Utils"; import { SelectionManager } from "../../util/SelectionManager"; import { ListField } from "../../../fields/ListField"; import { BooleanField } from "../../../fields/BooleanField"; @@ -102,9 +102,7 @@ export class CollectionFreeFormDocumentView extends React.Component => { SelectionManager.DeselectAll(); let isMinimized: boolean | undefined; - let minDoc = await this.props.Document.GetTAsync(KeyStore.MinimizedDoc, Document); - if (!minDoc) return; - let minimizedDocSet = await minDoc.GetTAsync(KeyStore.LinkTags, ListField); + let minimizedDocSet = await this.props.Document.GetTAsync(KeyStore.LinkTags, ListField); if (!minimizedDocSet) return; minimizedDocSet.Data.map(async minimizedDoc => { if (minimizedDoc instanceof Document) { @@ -136,16 +134,13 @@ export class CollectionFreeFormDocumentView extends React.Component { this._downX = e.clientX; this._downY = e.clientY; - document.removeEventListener("pointerup", this.onPointerUp); - document.addEventListener("pointerup", this.onPointerUp); } - onPointerUp = (e: PointerEvent): void => { - document.removeEventListener("pointerup", this.onPointerUp); + onClick = (e: React.MouseEvent): void => { e.stopPropagation(); - if (Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) { + if (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD && + Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD) { this.props.Document.GetTAsync(KeyStore.MaximizedDoc, Document).then(maxdoc => { if (maxdoc instanceof Document) { // bcz: need a better way to associate behaviors with click events on widget-documents - SelectionManager.DeselectAll(); this.props.addDocument && this.props.addDocument(maxdoc, false); this.toggleIcon(); } @@ -170,6 +165,7 @@ export class CollectionFreeFormDocumentView extends React.Component { Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD)) { SelectionManager.SelectDoc(this, e.ctrlKey); } - e.stopPropagation(); } onPointerDown = (e: React.PointerEvent): void => { this._downX = e.clientX; @@ -217,43 +216,12 @@ export class DocumentView extends React.Component { @action drop = (e: Event, de: DragManager.DropEvent) => { if (de.data instanceof DragManager.LinkDragData) { - let sourceDoc: Document = de.data.linkSourceDocument; - let destDoc: Document = this.props.Document; - let linkDoc: Document = new Document(); + let sourceDoc = de.data.linkSourceDocument; + let destDoc = this.props.Document; destDoc.GetTAsync(KeyStore.Prototype, Document).then(protoDest => sourceDoc.GetTAsync(KeyStore.Prototype, Document).then(protoSrc => - runInAction(() => { - let batch = UndoManager.StartBatch("document view drop"); - linkDoc.SetText(KeyStore.Title, "New Link"); - linkDoc.SetText(KeyStore.LinkDescription, ""); - linkDoc.SetText(KeyStore.LinkTags, "Default"); - - let dstTarg = protoDest ? protoDest : destDoc; - let srcTarg = protoSrc ? protoSrc : sourceDoc; - if ((de.data as DragManager.LinkDragData).blacklist.indexOf(dstTarg) === -1) { - linkDoc.Set(KeyStore.LinkedToDocs, dstTarg); - linkDoc.Set(KeyStore.LinkedFromDocs, srcTarg); - const prom1 = new Promise(resolve => dstTarg.GetOrCreateAsync( - KeyStore.LinkedFromDocs, - ListField, - field => { - (field as ListField).Data.push(linkDoc); - resolve(); - } - )); - const prom2 = new Promise(resolve => srcTarg.GetOrCreateAsync( - KeyStore.LinkedToDocs, - ListField, - field => { - (field as ListField).Data.push(linkDoc); - resolve(); - } - )); - Promise.all([prom1, prom2]).finally(() => batch.end()); - } - }) - ) + (protoSrc ? protoSrc : sourceDoc).CreateLink(protoDest ? protoDest : destDoc)) ); e.stopPropagation(); } diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 91b44962d..9cd58c73a 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -270,8 +270,10 @@ export class FormattedTextBox extends React.Component<(FieldViewProps & Formatte } render() { let style = this.props.isOverlay ? "scroll" : "hidden"; + let color = this.props.Document.GetText(KeyStore.BackgroundColor, ""); return (
dstTarg.GetOrCreateAsync( + KeyStore.LinkedFromDocs, + ListField, + field => { + (field as ListField).Data.push(linkDoc); + resolve(); + } + )); + const prom2 = new Promise(resolve => srcTarg.GetOrCreateAsync( + KeyStore.LinkedToDocs, + ListField, + field => { + (field as ListField).Data.push(linkDoc); + resolve(); + } + )); + Promise.all([prom1, prom2]).finally(() => batch.end()); + return linkDoc; + } + MakeDelegate(id?: string): Document { let delegate = new Document(id); -- cgit v1.2.3-70-g09d2 From 96b1e27da348e47a4d5c83b182a5f55e96e3218e Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Fri, 26 Apr 2019 08:41:53 -0400 Subject: fixed keyboard modifier to not create document. cleaned up videobox render. --- src/client/views/PreviewCursor.tsx | 9 ++++----- src/client/views/nodes/FormattedTextBox.tsx | 2 +- src/client/views/nodes/VideoBox.tsx | 19 ++++++++++--------- 3 files changed, 15 insertions(+), 15 deletions(-) (limited to 'src/client/views/PreviewCursor.tsx') diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx index 744ec0535..2e63f751b 100644 --- a/src/client/views/PreviewCursor.tsx +++ b/src/client/views/PreviewCursor.tsx @@ -26,12 +26,11 @@ export class PreviewCursor extends React.Component<{}> { // DASHFormattedTextBoxHandled flag when a text box consumes a key press so that we can ignore // the keyPress here. //if not these keys, make a textbox if preview cursor is active! - if (!e.ctrlKey && !e.altKey && !e.defaultPrevented && !(e as any).DASHFormattedTextBoxHandled) { - PreviewCursor.Visible && PreviewCursor._onKeyPress && PreviewCursor._onKeyPress(e); - PreviewCursor.Visible = false; - } else if (e.ctrlKey) { - if (e.key == "v") { + if (e.key.startsWith("F") && !e.key.endsWith("F")) { + } else if (e.key != "Alt" && e.key != "Shift" && e.key != "Meta" && e.key != "Control" && !e.defaultPrevented && !(e as any).DASHFormattedTextBoxHandled) { + if ((!e.ctrlKey && !e.metaKey) || e.key === "v") { PreviewCursor.Visible && PreviewCursor._onKeyPress && PreviewCursor._onKeyPress(e); + PreviewCursor.Visible = false; } } } diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 4e841af98..8fb86f320 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -259,7 +259,7 @@ export class FormattedTextBox extends React.Component<(FieldViewProps & Formatte SelectionManager.DeselectAll(); } e.stopPropagation(); - if (e.keyCode === 9) e.preventDefault(); + if (e.key === "Tab") e.preventDefault(); // stop propagation doesn't seem to stop propagation of native keyboard events. // so we set a flag on the native event that marks that the event's been handled. (e.nativeEvent as any).DASHFormattedTextBoxHandled = true; diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 1e6bc58c9..019e5e489 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -53,25 +53,26 @@ export class VideoBox extends React.Component { (vref as any).AHackBecauseSomethingResetsTheVideoToZero = this.curPage; } } + videoContent(path: string) { + return ; + } render() { let field = this.props.Document.GetT(this.props.fieldKey, VideoField); if (!field || field === FieldWaiting) { return
Loading
; } - let path = field.Data.href; - trace(); - return ( + return (this.props.Document.GetNumber(KeyStore.NativeHeight, 0)) ? + this.videoContent(field.data.href) : {({ measureRef }) =>
- + {this.videoContent(field.data.href)}
} - - ); + ; } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From b2d9133f2fdb6dd2af3b74c4dd9de49145611b1b Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Fri, 26 Apr 2019 22:08:20 -0400 Subject: fixed previewcursor appearing on select. adjusted rounded border text. --- src/client/views/PreviewCursor.tsx | 2 +- .../collections/collectionFreeForm/CollectionFreeFormView.tsx | 2 +- .../views/collections/collectionFreeForm/MarqueeView.tsx | 6 +++++- src/client/views/nodes/DocumentView.tsx | 1 + src/client/views/nodes/FormattedTextBox.scss | 11 ++++++++++- src/client/views/nodes/FormattedTextBox.tsx | 11 +++++++---- 6 files changed, 25 insertions(+), 8 deletions(-) (limited to 'src/client/views/PreviewCursor.tsx') diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx index 2e63f751b..4359ba093 100644 --- a/src/client/views/PreviewCursor.tsx +++ b/src/client/views/PreviewCursor.tsx @@ -27,7 +27,7 @@ export class PreviewCursor extends React.Component<{}> { // the keyPress here. //if not these keys, make a textbox if preview cursor is active! if (e.key.startsWith("F") && !e.key.endsWith("F")) { - } else if (e.key != "Alt" && e.key != "Shift" && e.key != "Meta" && e.key != "Control" && !e.defaultPrevented && !(e as any).DASHFormattedTextBoxHandled) { + } else if (e.key != "Escape" && e.key != "Alt" && e.key != "Shift" && e.key != "Meta" && e.key != "Control" && !e.defaultPrevented && !(e as any).DASHFormattedTextBoxHandled) { if ((!e.ctrlKey && !e.metaKey) || e.key === "v") { PreviewCursor.Visible && PreviewCursor._onKeyPress && PreviewCursor._onKeyPress(e); PreviewCursor.Visible = false; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 405594eb1..1a953006a 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -295,7 +295,7 @@ export class CollectionFreeFormView extends CollectionSubView { {this.props.Document.Title} */} - void; removeDocument: (doc: Document) => boolean; addLiveTextDocument: (doc: Document) => void; + isSelected: () => boolean; } @observer @@ -102,7 +103,9 @@ export class MarqueeView extends React.Component onClick = (e: React.MouseEvent): void => { if (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD && Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD) { - PreviewCursor.Show(e.clientX, e.clientY, this.onKeyPress); + if (this.props.isSelected()) { + PreviewCursor.Show(e.clientX, e.clientY, this.onKeyPress); + } // let the DocumentView stopPropagation of this event when it selects this document } else { // why do we get a click event when the cursor have moved a big distance? // let's cut it off here so no one else has to deal with it. @@ -137,6 +140,7 @@ export class MarqueeView extends React.Component e.stopPropagation(); } if (e.key === "c" || e.key === "r" || e.key === "e") { + console.log("DO MARQUEE"); e.stopPropagation(); let bounds = this.Bounds; let selected = this.marqueeSelect().map(d => { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index aaedd5b1c..3d6e0c4d8 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -172,6 +172,7 @@ export class DocumentView extends React.Component { document.removeEventListener("pointerup", this.onPointerUp); document.addEventListener("pointerup", this.onPointerUp); e.preventDefault(); + e.stopPropagation(); } } onPointerMove = (e: PointerEvent): void => { diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss index f4f37250f..727d3c0b2 100644 --- a/src/client/views/nodes/FormattedTextBox.scss +++ b/src/client/views/nodes/FormattedTextBox.scss @@ -10,7 +10,7 @@ outline: none !important; } -.formattedTextBox-cont-scroll, .formattedTextBox-cont-hidden { +.formattedTextBox-cont-scroll, .formattedTextBox-cont-hidden { background: $light-color-secondary; padding: 0; border-width: 0px; @@ -24,10 +24,19 @@ height: 100%; pointer-events: all; } + .formattedTextBox-cont-hidden { overflow: hidden; pointer-events: none; } +.formattedTextBox-inner-rounded { + height: calc(100% - 40px); + width: calc(100% - 40px); + position: absolute; + overflow: scroll; + top: 20; + left: 20; +} .menuicon { display: inline-block; diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 8fb86f320..02d98de6b 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -270,11 +270,12 @@ export class FormattedTextBox extends React.Component<(FieldViewProps & Formatte }; } render() { - let style = this.props.isOverlay ? "scroll" : "hidden"; + let style = this.props.isOverlay ? "-scroll" : "-hidden"; + let rounded = this.props.Document.GetNumber(KeyStore.BorderRounding, 0) < 0 ? "-rounded" : ""; let color = this.props.Document.GetText(KeyStore.BackgroundColor, ""); - let interactive = InkingControl.Instance.selectedTool ? "" : "interactive"; + let interactive = InkingControl.Instance.selectedTool ? "" : "-interactive"; return ( -
+ > +
+
); } } -- cgit v1.2.3-70-g09d2