From db9ee4f0d710d132e33e48cf6f105fd945941003 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Fri, 12 Apr 2019 21:18:30 -0400 Subject: combined preview cursor with marquee. moved preview cursor prompt to its own file. --- .../collections/collectionFreeForm/MarqueeView.tsx | 43 +++++++++++++++++++--- 1 file changed, 37 insertions(+), 6 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm/MarqueeView.tsx') diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 1e6faafb3..9c0d75c22 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -1,4 +1,4 @@ -import { action, computed, observable, trace } from "mobx"; +import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../../fields/Document"; import { FieldWaiting } from "../../../../fields/Field"; @@ -8,9 +8,9 @@ import { Documents } from "../../../documents/Documents"; import { SelectionManager } from "../../../util/SelectionManager"; import { Transform } from "../../../util/Transform"; import { InkingCanvas } from "../../InkingCanvas"; +import { PreviewCursor } from "../../PreviewCursor"; import { CollectionFreeFormView } from "./CollectionFreeFormView"; import "./MarqueeView.scss"; -import { PreviewCursor } from "./PreviewCursor"; import React = require("react"); interface MarqueeViewProps { @@ -21,6 +21,7 @@ interface MarqueeViewProps { activeDocuments: () => Document[]; selectDocuments: (docs: Document[]) => void; removeDocument: (doc: Document) => boolean; + addLiveTextDocument: (doc: Document) => void; } @observer @@ -32,6 +33,7 @@ export class MarqueeView extends React.Component @observable _downY: number = 0; @observable _used: boolean = false; @observable _visible: boolean = false; + _showOnUp: boolean = false; static DRAG_THRESHOLD = 4; @action @@ -46,12 +48,32 @@ export class MarqueeView extends React.Component this._visible = false; } + @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); + } @action onPointerDown = (e: React.PointerEvent): void => { if (e.buttons === 1 && !e.altKey && !e.metaKey && this.props.container.props.active()) { this._downX = this._lastX = e.pageX; this._downY = this._lastY = e.pageY; this._used = false; + this._showOnUp = true; + document.removeEventListener("keypress", this.onKeyPress, false); document.addEventListener("pointermove", this.onPointerMove, true); document.addEventListener("pointerup", this.onPointerUp, true); document.addEventListener("keydown", this.marqueeCommand, true); @@ -63,6 +85,10 @@ 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 && 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)) { this._visible = true; @@ -76,11 +102,16 @@ export class MarqueeView extends React.Component onPointerUp = (e: PointerEvent): void => { this.cleanupInteractions(true); this._visible = false; - let mselect = this.marqueeSelect(); - if (!e.shiftKey) { - SelectionManager.DeselectAll(mselect.length ? undefined : this.props.container.props.Document); + if (this._showOnUp) { + PreviewCursor.Show(this.hideCursor, this._downX, this._downY); + document.addEventListener("keypress", this.onKeyPress, false); + } else { + 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.props.selectDocuments(mselect.length ? mselect : [this.props.container.props.Document]); } intersectRect(r1: { left: number, top: number, width: number, height: number }, -- cgit v1.2.3-70-g09d2 From ed9bb54c6307e809c6c6aa40c7d77cd3480e7e73 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sat, 13 Apr 2019 00:31:14 -0400 Subject: added some undo's --- src/client/views/DocumentDecorations.tsx | 3 +++ src/client/views/collections/collectionFreeForm/MarqueeView.tsx | 3 +++ 2 files changed, 6 insertions(+) (limited to 'src/client/views/collections/collectionFreeForm/MarqueeView.tsx') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index c172e870e..2dc496bc1 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -17,6 +17,8 @@ import React = require("react"); import { FieldWaiting } from "../../fields/Field"; import { emptyFunction } from "../../Utils"; import { Main } from "./Main"; +import { undo } from "prosemirror-history"; +import { undoBatch } from "../util/UndoManager"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -156,6 +158,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> if (e.button === 0) { } } + @undoBatch @action onCloseUp = (e: PointerEvent): void => { e.stopPropagation(); diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 9c0d75c22..ccc2fcf0c 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -12,6 +12,8 @@ import { PreviewCursor } from "../../PreviewCursor"; import { CollectionFreeFormView } from "./CollectionFreeFormView"; import "./MarqueeView.scss"; import React = require("react"); +import { undo } from "prosemirror-history"; +import { undoBatch } from "../../../util/UndoManager"; interface MarqueeViewProps { getContainerTransform: () => Transform; @@ -128,6 +130,7 @@ export class MarqueeView extends React.Component return { left: topLeft[0], top: topLeft[1], width: Math.abs(size[0]), height: Math.abs(size[1]) }; } + @undoBatch @action marqueeCommand = (e: KeyboardEvent) => { if (e.key === "Backspace" || e.key === "Delete") { -- cgit v1.2.3-70-g09d2 From c83093bb29c1f6d0e580385d9e7c5eb5f5846ac6 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sat, 13 Apr 2019 14:38:49 -0400 Subject: some clean up --- src/Utils.ts | 10 +-- .../collections/collectionFreeForm/MarqueeView.tsx | 3 +- src/server/Client.ts | 11 ++- src/server/database.ts | 78 +++++++--------------- 4 files changed, 31 insertions(+), 71 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm/MarqueeView.tsx') diff --git a/src/Utils.ts b/src/Utils.ts index ff55a2e4e..c629bc263 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -87,16 +87,12 @@ export class Utils { } } -export function returnTrue() { - return true; -} +export function returnTrue() { return true; } -export function returnFalse() { - return false; -} +export function returnFalse() { return false; } export function emptyFunction() { } -export function emptyDocFunction(doc: Document) { console.log("focus " + doc.Title); } +export function emptyDocFunction(doc: Document) { } export type Without = Pick>; \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index ccc2fcf0c..a4722a6f8 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -7,13 +7,12 @@ import { KeyStore } from "../../../../fields/KeyStore"; import { Documents } from "../../../documents/Documents"; import { SelectionManager } from "../../../util/SelectionManager"; import { Transform } from "../../../util/Transform"; +import { undoBatch } from "../../../util/UndoManager"; import { InkingCanvas } from "../../InkingCanvas"; import { PreviewCursor } from "../../PreviewCursor"; import { CollectionFreeFormView } from "./CollectionFreeFormView"; import "./MarqueeView.scss"; import React = require("react"); -import { undo } from "prosemirror-history"; -import { undoBatch } from "../../../util/UndoManager"; interface MarqueeViewProps { getContainerTransform: () => Transform; diff --git a/src/server/Client.ts b/src/server/Client.ts index 02402a5a0..b4c419438 100644 --- a/src/server/Client.ts +++ b/src/server/Client.ts @@ -1,15 +1,12 @@ import { computed } from "mobx"; export class Client { + private _guid: string; + constructor(guid: string) { - this.guid = guid; + this._guid = guid; } - private guid: string; - - @computed - public get GUID(): string { - return this.guid; - } + @computed public get GUID(): string { return this._guid; } } \ No newline at end of file diff --git a/src/server/database.ts b/src/server/database.ts index 0bc806253..51eefeb8d 100644 --- a/src/server/database.ts +++ b/src/server/database.ts @@ -7,9 +7,7 @@ export class Database { private db?: mongodb.Db; constructor() { - this.MongoClient.connect(this.url, (err, client) => { - this.db = client.db(); - }); + this.MongoClient.connect(this.url, (err, client) => this.db = client.db()); } private currentWrites: { [_id: string]: Promise } = {}; @@ -21,14 +19,11 @@ export class Database { const run = (promise: Promise, resolve?: () => void) => { collection.updateOne({ _id: id }, { $set: value }, { upsert: true - }, (err, res) => { + }, (err, result) => { if (err) { console.log(err.message); console.log(err.errmsg); } - // if (res) { - // console.log(JSON.stringify(res.result)); - // } if (this.currentWrites[id] === promise) { delete this.currentWrites[id]; } @@ -38,70 +33,43 @@ export class Database { callback(); }); }; - if (prom) { - const newProm: Promise = prom.then(() => run(newProm)); - this.currentWrites[id] = newProm; - } else { - const newProm: Promise = new Promise(res => run(newProm, res)); - this.currentWrites[id] = newProm; - } + + let newProm: Promise = new Promise(resolve => run(newProm, resolve)); + this.currentWrites[id] = newProm; + if (prom) + prom.then(() => newProm); + else newProm; } } public delete(id: string) { - if (this.db) { - let collection = this.db.collection('documents'); - collection.remove({ _id: id }); - } + this.db && this.db.collection('documents').remove({ _id: id }); } public deleteAll(collectionName: string = 'documents'): Promise { - return new Promise(res => { - if (this.db) { - let collection = this.db.collection(collectionName); - collection.deleteMany({}, res); - } - }); + return new Promise(res => + this.db && this.db.collection(collectionName).deleteMany({}, res)); } public insert(kvpairs: any) { - if (this.db) { - let collection = this.db.collection('documents'); - collection.insertOne(kvpairs, (err: any, res: any) => { - if (err) { - // console.log(err) - return; - } - }); - } + this.db && this.db.collection('documents').insertOne(kvpairs, (err: any, res: any) => + err // && console.log(err) + ); } public getDocument(id: string, fn: (res: any) => void) { - var result: JSON; - if (this.db) { - let collection = this.db.collection('documents'); - collection.findOne({ _id: id }, (err: any, res: any) => { - result = res; - if (!result) { - fn(undefined); - } - fn(result); - }); - } + this.db && this.db.collection('documents').findOne({ _id: id }, (err: any, result: any) => + fn(result ? result : undefined)); } public getDocuments(ids: string[], fn: (res: any) => void) { - if (this.db) { - let collection = this.db.collection('documents'); - let cursor = collection.find({ _id: { "$in": ids } }); - cursor.toArray((err, docs) => { - if (err) { - console.log(err.message); - console.log(err.errmsg); - } - fn(docs); - }); - } + this.db && this.db.collection('documents').find({ _id: { "$in": ids } }).toArray((err, docs) => { + if (err) { + console.log(err.message); + console.log(err.errmsg); + } + fn(docs); + }); } public print() { -- cgit v1.2.3-70-g09d2