From e0d33c6092e5fb62343ef38d8734fa342e6dff84 Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 11 Mar 2019 13:57:54 -0400 Subject: fixed marquee modifiers. --- src/client/views/collections/CollectionDockingView.tsx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) (limited to 'src/client/views/collections/CollectionDockingView.tsx') diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index f01c538e6..70549099e 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -174,17 +174,12 @@ export class CollectionDockingView extends React.Component { - if (e.button === 2 && this.props.active()) { + var className = (e.target as any).className; + if (className == "lm_drag_handle" || className == "lm_close" || className == "lm_maximise" || className == "lm_minimise" || className == "lm_close_tab") { + this._flush = true; + } + if (this.props.active()) { e.stopPropagation(); - e.preventDefault(); - } else { - var className = (e.target as any).className; - if (className == "lm_drag_handle" || className == "lm_close" || className == "lm_maximise" || className == "lm_minimise" || className == "lm_close_tab") { - this._flush = true; - } - if (e.buttons === 1 && this.props.active()) { - e.stopPropagation(); - } } } -- cgit v1.2.3-70-g09d2 From 6e66622439eff11e69c8fa71c477ce0f8f5cc104 Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 11 Mar 2019 15:27:20 -0400 Subject: cleaned up drag/drop interactions to be more consistent and complete. --- .../views/collections/CollectionDockingView.tsx | 2 +- .../views/collections/CollectionFreeFormView.tsx | 18 +++++----- .../views/collections/CollectionViewBase.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 38 +++++++++++++--------- 4 files changed, 34 insertions(+), 26 deletions(-) (limited to 'src/client/views/collections/CollectionDockingView.tsx') diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 70549099e..6a0404663 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -44,7 +44,7 @@ export class CollectionDockingView extends React.Component { }, button: e.button }) + this.AddRightSplit(dragDoc, true).contentItems[0].tab._dragListener.onMouseDown({ pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: 0 }) } @action diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 1d1a748e4..ab6b9d533 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -25,6 +25,7 @@ import "./CollectionFreeFormView.scss"; import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import { CollectionViewBase } from "./CollectionViewBase"; import React = require("react"); +import { SelectionManager } from "../../util/SelectionManager"; const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? @observer @@ -74,7 +75,7 @@ export class CollectionFreeFormView extends CollectionViewBase { @action onPointerDown = (e: React.PointerEvent): void => { - if (((e.button === 2 && this.props.active()) || !e.defaultPrevented) && + if (((e.button === 2 && this.props.active()) || !e.defaultPrevented) && !e.shiftKey && (!this.isAnnotationOverlay || this.zoomScaling != 1 || e.button == 0)) { document.removeEventListener("pointermove", this.onPointerMove); document.addEventListener("pointermove", this.onPointerMove); @@ -84,11 +85,6 @@ export class CollectionFreeFormView extends CollectionViewBase { this._lastY = e.pageY; this._downX = e.pageX; this._downY = e.pageY; - this._marquee = e.button != 2 && e.shiftKey; - if (this._marquee) { - e.stopPropagation(); - e.preventDefault(); - } } } @@ -99,6 +95,9 @@ export class CollectionFreeFormView extends CollectionViewBase { e.stopPropagation(); if (this._marquee) { + if (!e.shiftKey) { + SelectionManager.DeselectAll(); + } this.marqueeSelect(); this._marquee = false; } @@ -123,12 +122,12 @@ export class CollectionFreeFormView extends CollectionViewBase { @action marqueeSelect() { + this.props.CollectionView.SelectedDocs.length = 0; var curPage = this.props.Document.GetNumber(KeyStore.CurPage, 1); let p = this.getTransform().transformPoint(this._downX, this._downY); let v = this.getTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY); let selRect = { left: p[0], top: p[1], right: p[0] + v[0], bottom: p[1] + v[1] } - this.props.CollectionView.SelectedDocs.length = 0; var curPage = this.props.Document.GetNumber(KeyStore.CurPage, 1); const lvalue = this.props.Document.GetT>(this.props.fieldKey, ListField); if (lvalue && lvalue != FieldWaiting) { @@ -151,6 +150,7 @@ export class CollectionFreeFormView extends CollectionViewBase { if (!e.cancelBubble && this.props.active()) { e.stopPropagation(); e.preventDefault(); + this._marquee = e.buttons != 2; if (!this._marquee) { let x = this.props.Document.GetNumber(KeyStore.PanX, 0); @@ -341,9 +341,9 @@ export class CollectionFreeFormView extends CollectionViewBase { cursor =
I
} - let p = this.getTransform().transformPoint(this._downX, this._downY); + let p = this.getTransform().transformPoint(this._downX < this._lastX ? this._downX : this._lastX, this._downY < this._lastY ? this._downY : this._lastY); let v = this.getTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY); - var marquee = this._marquee ?
: (null); + var marquee = this._marquee ?
: (null); let [dx, dy] = [this.centeringShiftX, this.centeringShiftY]; diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 59fa61800..b126b40a9 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -47,7 +47,7 @@ export class CollectionViewBase extends React.Component protected drop(e: Event, de: DragManager.DropEvent) { const docView: DocumentView = de.data["documentView"]; const doc: Document = de.data["document"]; - if (docView && docView.props.ContainingCollectionView && docView.props.ContainingCollectionView !== this.props.CollectionView) { + if (docView && (!docView.props.ContainingCollectionView || docView.props.ContainingCollectionView !== this.props.CollectionView)) { if (docView.props.RemoveDocument) { docView.props.RemoveDocument(docView.props.Document); } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index ee19c2b80..dc793c16d 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -100,8 +100,11 @@ export class DocumentView extends React.Component { onPointerDown = (e: React.PointerEvent): void => { this._downX = e.clientX; this._downY = e.clientY; - if (e.shiftKey && e.buttons === 1) { - CollectionDockingView.Instance.StartOtherDrag(this.props.Document, e); + if (e.shiftKey && e.buttons === 2) { + if (this.props.isTopMost) { + this.startDragging(e.pageX, e.pageY); + } + else CollectionDockingView.Instance.StartOtherDrag(this.props.Document, e); e.stopPropagation(); } else { if (this.active && !e.isDefaultPrevented()) { @@ -156,6 +159,21 @@ export class DocumentView extends React.Component { } } + startDragging(x: number, y: number) { + if (this._mainCont.current) { + const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); + let dragData: { [id: string]: any } = {}; + dragData["documentView"] = this; + dragData["xOffset"] = x - left; + dragData["yOffset"] = y - top; + DragManager.StartDrag(this._mainCont.current, dragData, { + handlers: { + dragComplete: action(() => { }), + }, + hideSource: true + }) + } + } onPointerMove = (e: PointerEvent): void => { if (e.cancelBubble) { @@ -163,19 +181,9 @@ export class DocumentView extends React.Component { } if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) { document.removeEventListener("pointermove", this.onPointerMove) - document.removeEventListener("pointerup", this.onPointerUp) - if (this._mainCont.current != null && !this.topMost) { - const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); - let dragData: { [id: string]: any } = {}; - dragData["documentView"] = this; - dragData["xOffset"] = e.x - left; - dragData["yOffset"] = e.y - top; - DragManager.StartDrag(this._mainCont.current, dragData, { - handlers: { - dragComplete: action(() => { }), - }, - hideSource: true - }) + document.removeEventListener("pointerup", this.onPointerUp); + if (!this.topMost || e.buttons == 2) { + this.startDragging(e.x, e.y); } } e.stopPropagation(); -- cgit v1.2.3-70-g09d2 From 7f13e25550761bd174b26a64ed73374c2d5da964 Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 11 Mar 2019 19:19:40 -0400 Subject: fixed marquee issues and got rid of captions for images. --- src/client/documents/Documents.ts | 12 +++++----- .../views/collections/CollectionDockingView.tsx | 10 ++++++--- .../views/collections/CollectionFreeFormView.tsx | 26 ++++++++++++++++++++++ src/server/database.ts | 4 ++-- src/server/index.ts | 5 +++-- 5 files changed, 45 insertions(+), 12 deletions(-) (limited to 'src/client/views/collections/CollectionDockingView.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 7b30dff98..bb463b36f 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -34,6 +34,7 @@ export interface DocumentOptions { title?: string; panx?: number; pany?: number; + page?: number; scale?: number; layout?: string; layoutKeys?: Key[]; @@ -78,6 +79,7 @@ export namespace Documents { if (options.title !== undefined) { doc.SetText(KeyStore.Title, options.title); } if (options.panx !== undefined) { doc.SetNumber(KeyStore.PanX, options.panx); } if (options.pany !== undefined) { doc.SetNumber(KeyStore.PanY, options.pany); } + if (options.page !== undefined) { doc.SetNumber(KeyStore.Page, options.page); } if (options.scale !== undefined) { doc.SetNumber(KeyStore.Scale, options.scale); } if (options.viewType !== undefined) { doc.SetNumber(KeyStore.ViewType, options.viewType); } if (options.layout !== undefined) { doc.SetText(KeyStore.Layout, options.layout); } @@ -146,9 +148,9 @@ export namespace Documents { export function ImageDocument(url: string, options: DocumentOptions = {}) { let doc = SetInstanceOptions(GetImagePrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] }, new URL(url), ImageField); - doc.SetText(KeyStore.Caption, "my caption..."); - doc.SetText(KeyStore.BackgroundLayout, EmbeddedCaption()); - doc.SetText(KeyStore.OverlayLayout, FixedCaption()); + // doc.SetText(KeyStore.Caption, "my caption..."); + // doc.SetText(KeyStore.BackgroundLayout, EmbeddedCaption()); + // doc.SetText(KeyStore.OverlayLayout, FixedCaption()); return doc; } export function VideoDocument(url: string, options: DocumentOptions = {}) { @@ -194,10 +196,10 @@ export namespace Documents { + FormattedTextBox.LayoutString("CaptionKey") + ` ` }; - function FixedCaption() { + function FixedCaption(fieldName: string = "Caption") { return `
` - + FormattedTextBox.LayoutString("CaptionKey") + + + FormattedTextBox.LayoutString(fieldName + "Key") + `
` }; } \ No newline at end of file diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 6a0404663..94005a4c0 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -150,9 +150,13 @@ export class CollectionDockingView extends React.Component void = () => { - this._goldenLayout.unbind('itemDropped', this.itemDropped); - this._goldenLayout.unbind('tabCreated', this.tabCreated); - this._goldenLayout.unbind('stackCreated', this.stackCreated); + try { + this._goldenLayout.unbind('itemDropped', this.itemDropped); + this._goldenLayout.unbind('tabCreated', this.tabCreated); + this._goldenLayout.unbind('stackCreated', this.stackCreated); + } catch (e) { + + } this._goldenLayout.destroy(); this._goldenLayout = null; window.removeEventListener('resize', this.onResize); diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index b0cd7e017..2dba62ee0 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -92,6 +92,9 @@ export class CollectionFreeFormView extends CollectionViewBase { @action onPointerUp = (e: PointerEvent): void => { + if (this._marquee) { + document.removeEventListener("keydown", this.marqueeCommand); + } document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); e.stopPropagation(); @@ -115,6 +118,13 @@ export class CollectionFreeFormView extends CollectionViewBase { } + @action + clearMarquee = () => { + document.removeEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + this._marquee = false; + } + intersectRect(r1: { left: number, right: number, top: number, bottom: number }, r2: { left: number, right: number, top: number, bottom: number }) { return !(r2.left > r1.right || @@ -157,6 +167,7 @@ export class CollectionFreeFormView extends CollectionViewBase { let wasMarquee = this._marquee; this._marquee = e.buttons != 2; if (this._marquee && !wasMarquee) { + this._previewCursorVisible = false; document.addEventListener("keydown", this.marqueeCommand); } @@ -176,8 +187,23 @@ export class CollectionFreeFormView extends CollectionViewBase { marqueeCommand = (e: KeyboardEvent) => { if (e.key == "Backspace") { this.marqueeSelect().map(d => this.props.removeDocument(d)); + this.clearMarquee(); } if (e.key == "c") { + let p = this.getTransform().transformPoint(this._downX, this._downY); + let v = this.getTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY); + let selected = this.marqueeSelect().map(m => m); + this.marqueeSelect().map(d => this.props.removeDocument(d)); + //setTimeout(() => { + this.props.CollectionView.addDocument(Documents.FreeformDocument(selected.map(d => { + d.SetNumber(KeyStore.X, d.GetNumber(KeyStore.X, 0) - p[0] - 400); + d.SetNumber(KeyStore.Y, d.GetNumber(KeyStore.Y, 0) - p[1] - 400); + d.SetNumber(KeyStore.Page, this.props.Document.GetNumber(KeyStore.Page, 0)); + d.SetText(KeyStore.Title, "" + d.GetNumber(KeyStore.Width, 0) + " " + d.GetNumber(KeyStore.Height, 0)); + return d; + }), { x: p[0], y: p[1], panx: 0, pany: 0, width: 800, height: 800, title: "a nested collection" })); + // }, 100); + this.clearMarquee(); } } diff --git a/src/server/database.ts b/src/server/database.ts index 07c5819ab..f3c1c9427 100644 --- a/src/server/database.ts +++ b/src/server/database.ts @@ -16,12 +16,12 @@ export class Database { }) } - public update(id: string, value: any) { + public update(id: string, value: any, callback: () => void) { if (this.db) { let collection = this.db.collection('documents'); collection.update({ _id: id }, { $set: value }, { upsert: true - }); + }, callback); } } diff --git a/src/server/index.ts b/src/server/index.ts index 0d0b65b22..83fa84746 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -173,8 +173,9 @@ function getFields([ids, callback]: [string[], (result: any) => void]) { } function setField(socket: Socket, newValue: Transferable) { - Database.Instance.update(newValue._id, newValue) - socket.broadcast.emit(MessageStore.SetField.Message, newValue) + Database.Instance.update(newValue._id, newValue, () => { + socket.broadcast.emit(MessageStore.SetField.Message, newValue); + }) } server.listen(serverPort); -- cgit v1.2.3-70-g09d2