diff options
| author | Tyler Schicke <tyler_schicke@brown.edu> | 2019-02-05 19:37:48 -0500 |
|---|---|---|
| committer | Tyler Schicke <tyler_schicke@brown.edu> | 2019-02-05 19:37:48 -0500 |
| commit | 6a13071a695732b2235f988278c52d0072af0fb5 (patch) | |
| tree | 94d6ccf16572463520fd744e41988b1dc8c7b7e3 /src/views/collections/CollectionFreeFormView.tsx | |
| parent | 41afca0448b4e75459fc8aeb53192f6a44aa2b18 (diff) | |
| parent | 6e66f8b227c730e07863a93a8bce5ee0d51d2ddc (diff) | |
Merge branch 'master' of github-tsch-brown:browngraphicslab/Dash-Web into scripting
Diffstat (limited to 'src/views/collections/CollectionFreeFormView.tsx')
| -rw-r--r-- | src/views/collections/CollectionFreeFormView.tsx | 54 |
1 files changed, 33 insertions, 21 deletions
diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx index ab2aeee64..cc907b2cc 100644 --- a/src/views/collections/CollectionFreeFormView.tsx +++ b/src/views/collections/CollectionFreeFormView.tsx @@ -3,7 +3,7 @@ import { Key, KeyStore } from "../../fields/Key"; import React = require("react"); import { action, observable, computed } from "mobx"; import { Document } from "../../fields/Document"; -import { DocumentView } from "../nodes/DocumentView"; +import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; import { ListField } from "../../fields/ListField"; import { NumberField } from "../../fields/NumberField"; import { SSL_OP_SINGLE_DH_USE } from "constants"; @@ -12,9 +12,11 @@ import { DragManager } from "../../util/DragManager"; import "./CollectionFreeFormView.scss"; import { Utils } from "../../Utils"; import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase"; +import { SelectionManager } from "../../util/SelectionManager"; @observer export class CollectionFreeFormView extends CollectionViewBase { + public static LayoutString() { return CollectionViewBase.LayoutString("CollectionFreeFormView"); } private _containerRef = React.createRef<HTMLDivElement>(); private _canvasRef = React.createRef<HTMLDivElement>(); private _nodeContainerRef = React.createRef<HTMLDivElement>(); @@ -28,7 +30,8 @@ export class CollectionFreeFormView extends CollectionViewBase { @action drop = (e: Event, de: DragManager.DropEvent) => { const doc = de.data["document"]; - if (doc instanceof DocumentView) { + var me = this; + if (doc instanceof CollectionFreeFormDocumentView) { if (doc.props.ContainingCollectionView && doc.props.ContainingCollectionView !== this) { doc.props.ContainingCollectionView.removeDocument(doc.props.Document); this.addDocument(doc.props.Document); @@ -58,9 +61,14 @@ export class CollectionFreeFormView extends CollectionViewBase { } } + downactive: boolean = false; @action onPointerDown = (e: React.PointerEvent): void => { - if (e.button === 2 && this.active) { + var me = this; + me.downactive = this.active; + var title = this.props.DocumentForCollection.Title; + if ((e.button === 2 && this.active) || + !e.defaultPrevented) { document.removeEventListener("pointermove", this.onPointerMove); document.addEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); @@ -75,21 +83,25 @@ export class CollectionFreeFormView extends CollectionViewBase { document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); e.stopPropagation(); + SelectionManager.DeselectAll(); } @action onPointerMove = (e: PointerEvent): void => { - if (!e.cancelBubble) { + var me = this; + var act = me.active; + var title = me.props.DocumentForCollection.Title; + if (!e.cancelBubble && this.active) { e.preventDefault(); e.stopPropagation(); let currScale: number = this.props.ContainingDocumentView!.ScalingToScreenSpace; - let x = this.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); - let y = this.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); - this.props.Document.SetFieldValue(KeyStore.PanX, x + (e.pageX - this._lastX) / currScale, NumberField); - this.props.Document.SetFieldValue(KeyStore.PanY, y + (e.pageY - this._lastY) / currScale, NumberField); - this._lastX = e.pageX; - this._lastY = e.pageY; + let x = this.props.DocumentForCollection.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); + let y = this.props.DocumentForCollection.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); + this.props.DocumentForCollection.SetFieldValue(KeyStore.PanX, x + (e.pageX - this._lastX) / currScale, NumberField); + this.props.DocumentForCollection.SetFieldValue(KeyStore.PanY, y + (e.pageY - this._lastY) / currScale, NumberField); } + this._lastX = e.pageX; + this._lastY = e.pageY; } @action @@ -106,9 +118,9 @@ export class CollectionFreeFormView extends CollectionViewBase { let dx = ContainerX - newContainerX; let dy = ContainerY - newContainerY; - this.props.Document.SetField(KeyStore.Scale, new NumberField(deltaScale)); - this.props.Document.SetFieldValue(KeyStore.PanX, Panxx + dx, NumberField); - this.props.Document.SetFieldValue(KeyStore.PanY, Panyy + dy, NumberField); + this.props.DocumentForCollection.SetField(KeyStore.Scale, new NumberField(deltaScale)); + this.props.DocumentForCollection.SetFieldValue(KeyStore.PanX, Panxx + dx, NumberField); + this.props.DocumentForCollection.SetFieldValue(KeyStore.PanY, Panyy + dy, NumberField); } @action @@ -118,8 +130,8 @@ export class CollectionFreeFormView extends CollectionViewBase { let fReader = new FileReader() let file = e.dataTransfer.items[0].getAsFile(); let that = this; - const panx: number = this.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); - const pany: number = this.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); + const panx: number = this.props.DocumentForCollection.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); + const pany: number = this.props.DocumentForCollection.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); let x = e.pageX - panx let y = e.pageY - pany @@ -129,10 +141,10 @@ export class CollectionFreeFormView extends CollectionViewBase { let doc = Documents.ImageDocument(url, { x: x, y: y }) - let docs = that.props.Document.GetFieldT(KeyStore.Data, ListField); + let docs = that.props.DocumentForCollection.GetFieldT(KeyStore.Data, ListField); if (!docs) { docs = new ListField<Document>(); - that.props.Document.SetField(KeyStore.Data, docs) + that.props.DocumentForCollection.SetField(KeyStore.Data, docs) } docs.Data.push(doc); } @@ -147,8 +159,8 @@ export class CollectionFreeFormView extends CollectionViewBase { } @action - bringToFront(doc: DocumentView) { - const { fieldKey, Document: Document } = this.props; + bringToFront(doc: CollectionFreeFormDocumentView) { + const { CollectionFieldKey: fieldKey, DocumentForCollection: 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); @@ -165,7 +177,7 @@ export class CollectionFreeFormView extends CollectionViewBase { } render() { - const { fieldKey, Document: Document } = this.props; + const { CollectionFieldKey: fieldKey, DocumentForCollection: 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); @@ -186,7 +198,7 @@ export class CollectionFreeFormView extends CollectionViewBase { <div className="node-container" ref={this._nodeContainerRef}> {value.map(doc => { - return (<DocumentView key={doc.Id} ContainingCollectionView={this} Document={doc} ContainingDocumentView={this.props.ContainingDocumentView} />); + return (<CollectionFreeFormDocumentView key={doc.Id} ContainingCollectionView={this} Document={doc} DocumentView={undefined} />); })} </div> </div> |
