aboutsummaryrefslogtreecommitdiff
path: root/src/views/collections/CollectionFreeFormView.tsx
diff options
context:
space:
mode:
authorTyler Schicke <tyler_schicke@brown.edu>2019-02-05 19:37:48 -0500
committerTyler Schicke <tyler_schicke@brown.edu>2019-02-05 19:37:48 -0500
commit6a13071a695732b2235f988278c52d0072af0fb5 (patch)
tree94d6ccf16572463520fd744e41988b1dc8c7b7e3 /src/views/collections/CollectionFreeFormView.tsx
parent41afca0448b4e75459fc8aeb53192f6a44aa2b18 (diff)
parent6e66f8b227c730e07863a93a8bce5ee0d51d2ddc (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.tsx54
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>