From 3b0c9a8a3282eb3c04123985a0512592fe0affae Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 1 Feb 2019 11:33:59 -0500 Subject: added lightbox for images --- src/documents/Documents.ts | 5 ++- src/views/nodes/DocumentView.tsx | 3 +- src/views/nodes/ImageBox.scss | 11 ++++++ src/views/nodes/ImageBox.tsx | 82 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 98 insertions(+), 3 deletions(-) create mode 100644 src/views/nodes/ImageBox.scss create mode 100644 src/views/nodes/ImageBox.tsx (limited to 'src') diff --git a/src/documents/Documents.ts b/src/documents/Documents.ts index 73cf483ef..487490ea5 100644 --- a/src/documents/Documents.ts +++ b/src/documents/Documents.ts @@ -6,6 +6,7 @@ import { ListField } from "../fields/ListField"; import { FieldTextBox } from "../views/nodes/FieldTextBox"; import { CollectionDockingView } from "../views/collections/CollectionDockingView"; import { CollectionSchemaView } from "../views/collections/CollectionSchemaView"; +import { ImageBox } from "../views/nodes/ImageBox"; interface DocumentOptions { x?: number; @@ -110,9 +111,9 @@ export namespace Documents { imageProto.SetField(KeyStore.Y, new NumberField(0)); imageProto.SetField(KeyStore.Width, new NumberField(300)); imageProto.SetField(KeyStore.Height, new NumberField(300)); - imageProto.SetField(KeyStore.Layout, new TextField('Image not found')); + imageProto.SetField(KeyStore.Layout, new TextField(ImageBox.LayoutString())); // imageProto.SetField(KeyStore.Layout, new TextField('
')); - imageProto.SetField(KeyStore.LayoutFields, new ListField([KeyStore.Data])); + imageProto.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.Data])); } return imageProto; } diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx index 634cd78be..34a95747b 100644 --- a/src/views/nodes/DocumentView.tsx +++ b/src/views/nodes/DocumentView.tsx @@ -15,6 +15,7 @@ import { CollectionDockingView } from "../collections/CollectionDockingView"; import { CollectionFreeFormView } from "../collections/CollectionFreeFormView"; import { ContextMenu } from "../ContextMenu"; import { FieldTextBox } from "../nodes/FieldTextBox"; +import { ImageBox } from "../nodes/ImageBox"; import "./NodeView.scss"; import React = require("react"); import { cpus } from "os"; @@ -82,7 +83,7 @@ class DocumentContents extends React.Component { } } return { + + public static LayoutString() { return ""; } + private _ref: React.RefObject; + private _wasSelected: boolean = false; + + constructor(props: DocumentFieldViewProps) { + super(props); + + this._ref = React.createRef(); + this.state = { + photoIndex: 0, + isOpen: false, + }; + } + + componentDidMount() { + } + + componentWillUnmount() { + } + + onPointerDown = (e: React.PointerEvent): void => { + const { containingDocumentView } = this.props; + this._wasSelected = SelectionManager.IsSelected(containingDocumentView); + let me = this; + if (e.buttons === 1 && SelectionManager.IsSelected(me.props.containingDocumentView)) { + e.stopPropagation(); + } + } + + render() { + const images = [this.props.doc.GetTextField(this.props.fieldKey, ""),]; + var lightbox = () => { + const { photoIndex } = this.state; + if (this.state.isOpen && SelectionManager.IsSelected(this.props.containingDocumentView)) { + return ( 0 ? images[(photoIndex + images.length - 1) % images.length] : undefined} + onCloseRequest={() => this.setState({ isOpen: false })} + onMovePrevRequest={() => + this.setState({ photoIndex: (photoIndex + images.length - 1) % images.length, }) + } + onMoveNextRequest={() => + this.setState({ photoIndex: (photoIndex + 1) % images.length, }) + } + />) + } + } + return ( +
+ + {lightbox()} +
) + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From ba9ef04e48d874124ce149c91bd49dcae394a82e Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 1 Feb 2019 11:37:41 -0500 Subject: from kast --- src/views/nodes/ImageBox.tsx | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) (limited to 'src') diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx index 5c0db6cab..4535cef98 100644 --- a/src/views/nodes/ImageBox.tsx +++ b/src/views/nodes/ImageBox.tsx @@ -1,20 +1,10 @@ -import { action, IReactionDisposer, reaction } from "mobx"; -import { baseKeymap } from "prosemirror-commands"; -import { history, redo, undo } from "prosemirror-history"; -import { keymap } from "prosemirror-keymap"; -import { schema } from "prosemirror-schema-basic"; -import { EditorState, Transaction } from "prosemirror-state"; -import { EditorView } from "prosemirror-view"; -import { Document } from "../../fields/Document"; -import { Opt } from "../../fields/Field"; -import { Key, KeyStore } from "../../fields/Key"; -import { TextField } from "../../fields/TextField"; + +import Lightbox from 'react-image-lightbox'; +import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app import { SelectionManager } from "../../util/SelectionManager"; -import { DocumentView, DocumentFieldViewProps } from "./DocumentView"; +import { DocumentFieldViewProps } from "./DocumentView"; import "./ImageBox.scss"; import React = require("react") -import Lightbox from 'react-image-lightbox'; -import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app interface ImageBoxState { photoIndex: number, -- cgit v1.2.3-70-g09d2 From 30c8a29abae61a47d0b17b86727729f0e55f7f69 Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 1 Feb 2019 12:14:09 -0500 Subject: fixed full-screen dragging --- src/DocumentDecorations.scss | 1 + src/util/DragManager.ts | 1 + 2 files changed, 2 insertions(+) (limited to 'src') diff --git a/src/DocumentDecorations.scss b/src/DocumentDecorations.scss index 252b0f53f..e8b93a18b 100644 --- a/src/DocumentDecorations.scss +++ b/src/DocumentDecorations.scss @@ -1,6 +1,7 @@ #documentDecorations-container { position: absolute; display: grid; + z-index: 1000; grid-template-rows: 20px 1fr 20px; grid-template-columns: 20px 1fr 20px; pointer-events: none; diff --git a/src/util/DragManager.ts b/src/util/DragManager.ts index 5b7609819..b4132a222 100644 --- a/src/util/DragManager.ts +++ b/src/util/DragManager.ts @@ -82,6 +82,7 @@ export namespace DragManager { dragElement.style.opacity = "0.7"; dragElement.style.position = "absolute"; dragElement.style.transformOrigin = "0 0"; + dragElement.style.zIndex = "1000"; dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`; dragDiv.appendChild(dragElement); _lastPointerX = dragData["xOffset"] + rect.left; -- cgit v1.2.3-70-g09d2 From 588e1edf046aea0f280117f4aaa5b9853258c05b Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 1 Feb 2019 14:36:41 -0500 Subject: fixed zordering of dragged items. image lightbox shows on double tap now. --- src/fields/Key.ts | 1 + src/views/collections/CollectionFreeFormView.tsx | 21 ++++++++++++++++- src/views/nodes/DocumentView.tsx | 10 ++++++++ src/views/nodes/ImageBox.tsx | 29 ++++++++++++++++++------ 4 files changed, 53 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/fields/Key.ts b/src/fields/Key.ts index 4da800fac..5cd43f55e 100644 --- a/src/fields/Key.ts +++ b/src/fields/Key.ts @@ -41,6 +41,7 @@ export namespace KeyStore { export const Scale = new Key("Scale"); export const Width = new Key("Width"); export const Height = new Key("Height"); + export const ZIndex = new Key("ZIndex"); export const Data = new Key("Data"); export const Layout = new Key("Layout"); export const LayoutKeys = new Key("LayoutKeys"); diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx index ffb39426d..24daa2fbc 100644 --- a/src/views/collections/CollectionFreeFormView.tsx +++ b/src/views/collections/CollectionFreeFormView.tsx @@ -19,6 +19,7 @@ import { CollectionDockingView } from "./CollectionDockingView"; export class CollectionFreeFormView extends React.Component { private _containerRef = React.createRef(); private _canvasRef = React.createRef(); + private _nodeContainerRef = React.createRef(); constructor(props: CollectionViewProps) { super(props); @@ -51,10 +52,28 @@ export class CollectionFreeFormView extends React.Component const docY = (screenY - translateY) / sscale / scale; doc.x = docX; doc.y = docY; + this.bringToFront(doc); } e.stopPropagation(); } + private bringToFront(doc: DocumentView) { + const { fieldKey, Document: Document } = this.props; + + const value: Document[] = Document.GetListField(fieldKey, []); + var topmost = value.reduce((topmost, d) => Math.max(d.GetNumberField(KeyStore.ZIndex, 0), topmost), -1000); + value.map(d => { + var zind = d.GetNumberField(KeyStore.ZIndex, 0); + if (zind != topmost - 1 - (topmost - zind) && d != doc.props.Document) { + d.SetFieldValue(KeyStore.ZIndex, topmost - 1 - (topmost - zind), NumberField); + } + }) + + if (doc.props.Document.GetNumberField(KeyStore.ZIndex, 0) != 0) { + doc.props.Document.SetFieldValue(KeyStore.ZIndex, 0, NumberField); + } + } + componentDidMount() { if (this._containerRef.current) { DragManager.MakeDropTarget(this._containerRef.current, { @@ -191,7 +210,7 @@ export class CollectionFreeFormView extends React.Component }} onDrop={this.onDrop} onDragOver={this.onDragOver} ref={this._containerRef}>
-
+
{value.map(doc => { return (); })} diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx index 34a95747b..560cc0ee0 100644 --- a/src/views/nodes/DocumentView.tsx +++ b/src/views/nodes/DocumentView.tsx @@ -154,6 +154,15 @@ export class DocumentView extends React.Component { this.props.Document.SetFieldValue(KeyStore.Height, h, NumberField) } + @computed + get zIndex(): number { + return this.props.Document.GetFieldValue(KeyStore.ZIndex, NumberField, Number(0)); + } + + set zIndex(h: number) { + this.props.Document.SetFieldValue(KeyStore.ZIndex, h, NumberField) + } + @action dragComplete = (e: DragManager.DragCompleteEvent) => { } @@ -359,6 +368,7 @@ export class DocumentView extends React.Component { width: freestyling ? this.width : "100%", height: freestyling ? this.height : "100%", position: freestyling ? "absolute" : "relative", + zIndex: freestyling ? this.zIndex : 0, }} onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown}> diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx index 4535cef98..ffdcbae05 100644 --- a/src/views/nodes/ImageBox.tsx +++ b/src/views/nodes/ImageBox.tsx @@ -33,13 +33,30 @@ export class ImageBox extends React.Component { const { containingDocumentView } = this.props; - this._wasSelected = SelectionManager.IsSelected(containingDocumentView); - let me = this; - if (e.buttons === 1 && SelectionManager.IsSelected(me.props.containingDocumentView)) { - e.stopPropagation(); + if (Date.now() - this._lastTap < 300) { + if (e.buttons === 1 && SelectionManager.IsSelected(containingDocumentView)) { + e.stopPropagation(); + this._downX = e.clientX; + this._downY = e.clientY; + document.removeEventListener("pointerup", this.onPointerUp); + document.addEventListener("pointerup", this.onPointerUp); + } + } else { + this._lastTap = Date.now(); + } + } + onPointerUp = (e: PointerEvent): void => { + document.removeEventListener("pointerup", this.onPointerUp); + if (Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2) { + this.setState({ isOpen: true }) } + e.stopPropagation(); } render() { @@ -63,9 +80,7 @@ export class ImageBox extends React.Component - + Image not found {lightbox()}
) } -- cgit v1.2.3-70-g09d2 From 156245bbca2082a8b8cf426a381ed25d1be57bcb Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 1 Feb 2019 14:50:11 -0500 Subject: stopped dragging of topmost documents. --- src/views/collections/CollectionFreeFormView.tsx | 47 +++++++++++++----------- src/views/nodes/DocumentView.tsx | 11 ++++-- src/views/nodes/ImageBox.tsx | 11 ++---- 3 files changed, 36 insertions(+), 33 deletions(-) (limited to 'src') diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx index 24daa2fbc..c77bd5820 100644 --- a/src/views/collections/CollectionFreeFormView.tsx +++ b/src/views/collections/CollectionFreeFormView.tsx @@ -20,6 +20,8 @@ export class CollectionFreeFormView extends React.Component private _containerRef = React.createRef(); private _canvasRef = React.createRef(); private _nodeContainerRef = React.createRef(); + private _lastX: number = 0; + private _lastY: number = 0; constructor(props: CollectionViewProps) { super(props); @@ -35,6 +37,7 @@ export class CollectionFreeFormView extends React.Component return isSelected || childSelected || topMost; } + @action drop = (e: Event, de: DragManager.DropEvent) => { const doc = de.data["document"]; if (doc instanceof DocumentView) { @@ -57,23 +60,6 @@ export class CollectionFreeFormView extends React.Component e.stopPropagation(); } - private bringToFront(doc: DocumentView) { - const { fieldKey, Document: Document } = this.props; - - const value: Document[] = Document.GetListField(fieldKey, []); - var topmost = value.reduce((topmost, d) => Math.max(d.GetNumberField(KeyStore.ZIndex, 0), topmost), -1000); - value.map(d => { - var zind = d.GetNumberField(KeyStore.ZIndex, 0); - if (zind != topmost - 1 - (topmost - zind) && d != doc.props.Document) { - d.SetFieldValue(KeyStore.ZIndex, topmost - 1 - (topmost - zind), NumberField); - } - }) - - if (doc.props.Document.GetNumberField(KeyStore.ZIndex, 0) != 0) { - doc.props.Document.SetFieldValue(KeyStore.ZIndex, 0, NumberField); - } - } - componentDidMount() { if (this._containerRef.current) { DragManager.MakeDropTarget(this._containerRef.current, { @@ -84,8 +70,6 @@ export class CollectionFreeFormView extends React.Component } } - _lastX: number = 0; - _lastY: number = 0; @action onPointerDown = (e: React.PointerEvent): void => { if (e.button === 2 && this.active) { @@ -139,6 +123,7 @@ export class CollectionFreeFormView extends React.Component this.props.Document.SetFieldValue(KeyStore.PanY, Panyy + dy, NumberField); } + @action onDrop = (e: React.DragEvent): void => { e.stopPropagation() e.preventDefault() @@ -170,6 +155,9 @@ export class CollectionFreeFormView extends React.Component } } + onDragOver = (e: React.DragEvent): void => { + } + @action addDocument = (doc: Document): void => { //TODO This won't create the field if it doesn't already exist @@ -189,16 +177,31 @@ export class CollectionFreeFormView extends React.Component } } - onDragOver = (e: React.DragEvent): void => { + @action + bringToFront(doc: DocumentView) { + const { fieldKey, Document: Document } = this.props; + + const value: Document[] = Document.GetListField(fieldKey, []); + var topmost = value.reduce((topmost, d) => Math.max(d.GetNumberField(KeyStore.ZIndex, 0), topmost), -1000); + value.map(d => { + var zind = d.GetNumberField(KeyStore.ZIndex, 0); + if (zind != topmost - 1 - (topmost - zind) && d != doc.props.Document) { + d.SetFieldValue(KeyStore.ZIndex, topmost - 1 - (topmost - zind), NumberField); + } + }) + + if (doc.props.Document.GetNumberField(KeyStore.ZIndex, 0) != 0) { + doc.props.Document.SetFieldValue(KeyStore.ZIndex, 0, NumberField); + } } + render() { const { fieldKey, Document: Document } = this.props; - const value: Document[] = Document.GetListField(fieldKey, []); const panx: number = Document.GetNumberField(KeyStore.PanX, 0); const pany: number = Document.GetNumberField(KeyStore.PanY, 0); const currScale: number = Document.GetNumberField(KeyStore.Scale, 1); - console.log("DocsR " + value.length); + return (
{ return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined || this.props.ContainingCollectionView!.active; } + @computed + get topMost(): boolean { + return this.props.ContainingCollectionView == undefined || this.props.ContainingCollectionView instanceof CollectionDockingView; + } + // // returns the cumulative scaling between the document and the screen @@ -281,7 +286,7 @@ export class DocumentView extends React.Component { } if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) { this._contextMenuCanOpen = false; - if (this._mainCont.current != null && this.props.ContainingCollectionView != null) { + if (this._mainCont.current != null && !this.topMost) { this._contextMenuCanOpen = false; const rect = this.screenRect; let dragData: { [id: string]: any } = {}; @@ -340,9 +345,7 @@ export class DocumentView extends React.Component { return; } - var topMost = this.props.ContainingCollectionView == undefined || - this.props.ContainingCollectionView instanceof CollectionDockingView; - if (topMost) { + if (this.topMost) { ContextMenu.Instance.clearItems() ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked }) ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx index ffdcbae05..1dfad462f 100644 --- a/src/views/nodes/ImageBox.tsx +++ b/src/views/nodes/ImageBox.tsx @@ -15,7 +15,9 @@ export class ImageBox extends React.Component"; } private _ref: React.RefObject; - private _wasSelected: boolean = false; + private _downX: number = 0; + private _downY: number = 0; + private _lastTap: number = 0; constructor(props: DocumentFieldViewProps) { super(props); @@ -33,14 +35,9 @@ export class ImageBox extends React.Component { - const { containingDocumentView } = this.props; if (Date.now() - this._lastTap < 300) { - if (e.buttons === 1 && SelectionManager.IsSelected(containingDocumentView)) { + if (e.buttons === 1 && SelectionManager.IsSelected(this.props.containingDocumentView)) { e.stopPropagation(); this._downX = e.clientX; this._downY = e.clientY; -- cgit v1.2.3-70-g09d2