diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/DocumentDecorations.scss | 1 | ||||
| -rw-r--r-- | src/documents/Documents.ts | 5 | ||||
| -rw-r--r-- | src/fields/Document.ts | 2 | ||||
| -rw-r--r-- | src/fields/Key.ts | 1 | ||||
| -rw-r--r-- | src/util/DragManager.ts | 1 | ||||
| -rw-r--r-- | src/views/collections/CollectionFreeFormView.tsx | 34 | ||||
| -rw-r--r-- | src/views/nodes/DocumentView.tsx | 24 | ||||
| -rw-r--r-- | src/views/nodes/FieldView.tsx | 3 | ||||
| -rw-r--r-- | src/views/nodes/ImageBox.scss | 11 | ||||
| -rw-r--r-- | src/views/nodes/ImageBox.tsx | 91 |
10 files changed, 158 insertions, 15 deletions
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/documents/Documents.ts b/src/documents/Documents.ts index a2d25e606..a5edebda2 100644 --- a/src/documents/Documents.ts +++ b/src/documents/Documents.ts @@ -8,6 +8,7 @@ import { CollectionDockingView } from "../views/collections/CollectionDockingVie import { CollectionSchemaView } from "../views/collections/CollectionSchemaView"; import { ImageField } from "../fields/ImageField"; import { RichTextField } from "../fields/RichTextField"; +import { ImageBox } from "../views/nodes/ImageBox"; interface DocumentOptions { x?: number; @@ -112,9 +113,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('<img src={Data} draggable="false" width="100%" alt="Image not found"/>')); + imageProto.SetField(KeyStore.Layout, new TextField(ImageBox.LayoutString())); // imageProto.SetField(KeyStore.Layout, new TextField('<div style={"background-image: " + {Data}} />')); - imageProto.SetField(KeyStore.LayoutFields, new ListField([KeyStore.Data])); + imageProto.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.Data])); } return imageProto; } diff --git a/src/fields/Document.ts b/src/fields/Document.ts index 5c0a9caf0..ef759615b 100644 --- a/src/fields/Document.ts +++ b/src/fields/Document.ts @@ -32,7 +32,7 @@ export class Document extends Field { return field; } - GetFieldT<T extends Field = Field>(key: Key, ctor: { new(): T }, ignoreProto: boolean = false): Opt<T> { + GetFieldT<T extends Field = Field>(key: Key, ctor: { new(...args: any[]): T }, ignoreProto: boolean = false): Opt<T> { return Cast(this.GetField(key, ignoreProto), ctor); } 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/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; diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx index ffb39426d..c77bd5820 100644 --- a/src/views/collections/CollectionFreeFormView.tsx +++ b/src/views/collections/CollectionFreeFormView.tsx @@ -19,6 +19,9 @@ import { CollectionDockingView } from "./CollectionDockingView"; export class CollectionFreeFormView extends React.Component<CollectionViewProps> { private _containerRef = React.createRef<HTMLDivElement>(); private _canvasRef = React.createRef<HTMLDivElement>(); + private _nodeContainerRef = React.createRef<HTMLDivElement>(); + private _lastX: number = 0; + private _lastY: number = 0; constructor(props: CollectionViewProps) { super(props); @@ -34,6 +37,7 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps> return isSelected || childSelected || topMost; } + @action drop = (e: Event, de: DragManager.DropEvent) => { const doc = de.data["document"]; if (doc instanceof DocumentView) { @@ -51,6 +55,7 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps> const docY = (screenY - translateY) / sscale / scale; doc.x = docX; doc.y = docY; + this.bringToFront(doc); } e.stopPropagation(); } @@ -65,8 +70,6 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps> } } - _lastX: number = 0; - _lastY: number = 0; @action onPointerDown = (e: React.PointerEvent): void => { if (e.button === 2 && this.active) { @@ -120,6 +123,7 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps> this.props.Document.SetFieldValue(KeyStore.PanY, Panyy + dy, NumberField); } + @action onDrop = (e: React.DragEvent): void => { e.stopPropagation() e.preventDefault() @@ -151,6 +155,9 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps> } } + onDragOver = (e: React.DragEvent): void => { + } + @action addDocument = (doc: Document): void => { //TODO This won't create the field if it doesn't already exist @@ -170,16 +177,31 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps> } } - onDragOver = (e: React.DragEvent): void => { + @action + bringToFront(doc: DocumentView) { + const { fieldKey, Document: Document } = this.props; + + const value: Document[] = Document.GetListField<Document>(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<Document>(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 ( <div className="border" style={{ borderStyle: "solid", @@ -191,7 +213,7 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps> }} onDrop={this.onDrop} onDragOver={this.onDragOver} ref={this._containerRef}> <div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px) scale(${currScale}, ${currScale})`, transformOrigin: `left, top` }} ref={this._canvasRef}> - <div className="node-container"> + <div className="node-container" ref={this._nodeContainerRef}> {value.map(doc => { return (<DocumentView key={doc.Id} ContainingCollectionView={this} Document={doc} ContainingDocumentView={this.props.ContainingDocumentView} />); })} diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx index cbf09abae..f54493902 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"); const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? @@ -80,7 +81,7 @@ class DocumentContents extends React.Component<DocumentViewProps> { } } return <JsxParser - components={{ FieldTextBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }} + components={{ FieldTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }} bindings={bindings} jsx={this.layout} showWarnings={true} @@ -151,6 +152,15 @@ export class DocumentView extends React.Component<DocumentViewProps> { 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) => { } @@ -160,6 +170,11 @@ export class DocumentView extends React.Component<DocumentViewProps> { 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 @@ -269,7 +284,7 @@ export class DocumentView extends React.Component<DocumentViewProps> { } 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 } = {}; @@ -328,9 +343,7 @@ export class DocumentView extends React.Component<DocumentViewProps> { 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) @@ -356,6 +369,7 @@ export class DocumentView extends React.Component<DocumentViewProps> { 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/FieldView.tsx b/src/views/nodes/FieldView.tsx index 54e78e3ec..eec63256d 100644 --- a/src/views/nodes/FieldView.tsx +++ b/src/views/nodes/FieldView.tsx @@ -8,6 +8,7 @@ import { NumberField } from "../../fields/NumberField"; import { RichTextField } from "../../fields/RichTextField"; import { FieldTextBox } from "./FieldTextBox"; import { ImageField } from "../../fields/ImageField"; +import { ImageBox } from "./ImageBox"; @observer export class FieldView extends React.Component<DocumentFieldViewProps> { @@ -28,7 +29,7 @@ export class FieldView extends React.Component<DocumentFieldViewProps> { return <FieldTextBox {...this.props} /> } else if (field instanceof ImageField) { - return <img src={field.Data.href}></img> + return <ImageBox {...this.props} /> } else if (field instanceof NumberField) { return <p>{field.Data}</p> diff --git a/src/views/nodes/ImageBox.scss b/src/views/nodes/ImageBox.scss new file mode 100644 index 000000000..136fda1d0 --- /dev/null +++ b/src/views/nodes/ImageBox.scss @@ -0,0 +1,11 @@ + +.imageBox-cont { + padding: 0vw; +} + +.imageBox-button { + padding : 0vw; + border: none; + width : 100%; + height: 100%; +}
\ No newline at end of file diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx new file mode 100644 index 000000000..7577627e8 --- /dev/null +++ b/src/views/nodes/ImageBox.tsx @@ -0,0 +1,91 @@ + +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 { DocumentFieldViewProps } from "./DocumentView"; +import "./ImageBox.scss"; +import React = require("react") +import { ImageField } from '../../fields/ImageField'; +import { NumberField } from '../../fields/NumberField'; + +interface ImageBoxState { + photoIndex: number, + isOpen: boolean, +}; + +export class ImageBox extends React.Component<DocumentFieldViewProps, ImageBoxState> { + + public static LayoutString() { return "<ImageBox doc={Document} containingDocumentView={ContainingDocumentView} fieldKey={DataKey} />"; } + private _ref: React.RefObject<HTMLDivElement>; + private _downX: number = 0; + private _downY: number = 0; + private _lastTap: number = 0; + + constructor(props: DocumentFieldViewProps) { + super(props); + + this._ref = React.createRef(); + this.state = { + photoIndex: 0, + isOpen: false, + }; + } + + componentDidMount() { + } + + componentWillUnmount() { + } + + onPointerDown = (e: React.PointerEvent): void => { + if (Date.now() - this._lastTap < 300) { + if (e.buttons === 1 && SelectionManager.IsSelected(this.props.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() { + let field = this.props.doc.GetFieldT(this.props.fieldKey, ImageField); + let path = ""; + if (field) { + path = field.Data.href; + } + const images = [path,]; + var lightbox = () => { + const { photoIndex } = this.state; + if (this.state.isOpen && SelectionManager.IsSelected(this.props.containingDocumentView)) { + return (<Lightbox + mainSrc={images[photoIndex]} + nextSrc={photoIndex + 1 < images.length ? images[(photoIndex + 1) % images.length] : undefined} + prevSrc={photoIndex - 1 > 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 ( + <div className="imageBox-cont" onPointerDown={this.onPointerDown} ref={this._ref} > + <img src={images[0]} width="100%" alt="Image not found" /> + {lightbox()} + </div>) + } +}
\ No newline at end of file |