aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/DocumentView.tsx
diff options
context:
space:
mode:
authortschicke-brown <tyler_schicke@brown.edu>2019-02-19 21:58:18 -0500
committerGitHub <noreply@github.com>2019-02-19 21:58:18 -0500
commit4610f1cc4653aa3b8389a677b9a1bd94590752a1 (patch)
tree6fd1cfe02eaeaf1dc074a26cc4cde39c3313d1f3 /src/client/views/nodes/DocumentView.tsx
parent190d0225d7bf605aa53847eb7beda5de72e753a8 (diff)
parentef10a6bdf753f75cbc5b5d8b7dcc53c3d4c219ad (diff)
Merge pull request #8 from browngraphicslab/server_database_merge
Server database merge
Diffstat (limited to 'src/client/views/nodes/DocumentView.tsx')
-rw-r--r--src/client/views/nodes/DocumentView.tsx85
1 files changed, 61 insertions, 24 deletions
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index f8770f020..3a4dbb2d5 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,8 +1,9 @@
import { action, computed } from "mobx";
import { observer } from "mobx-react";
import { Document } from "../../../fields/Document";
-import { Opt, FieldWaiting } from "../../../fields/Field";
-import { Key, KeyStore } from "../../../fields/Key";
+import { Opt, FieldWaiting, Field } from "../../../fields/Field";
+import { Key } from "../../../fields/Key";
+import { KeyStore } from "../../../fields/KeyStore";
import { ListField } from "../../../fields/ListField";
import { Utils } from "../../../Utils";
import { CollectionDockingView } from "../collections/CollectionDockingView";
@@ -31,6 +32,47 @@ export interface DocumentViewProps {
//tfs: This shouldn't be necessary I don't think
Scaling: number;
}
+export interface JsxArgs extends DocumentViewProps {
+ Keys: { [name: string]: Key }
+ Fields: { [name: string]: Field }
+}
+
+/*
+This function is pretty much a hack that lets us fill out the fields in JsxArgs with something that
+jsx-to-string can recover the jsx from
+Example usage of this function:
+ public static LayoutString() {
+ let args = FakeJsxArgs(["Data"]);
+ return jsxToString(
+ <CollectionFreeFormView
+ doc={args.Document}
+ fieldKey={args.Keys.Data}
+ DocumentViewForField={args.DocumentView} />,
+ { useFunctionCode: true, functionNameOnly: true }
+ )
+ }
+*/
+export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
+ let Keys: { [name: string]: any } = {}
+ let Fields: { [name: string]: any } = {}
+ for (const key of keys) {
+ let fn = () => { }
+ Object.defineProperty(fn, "name", { value: key + "Key" })
+ Keys[key] = fn;
+ }
+ for (const field of fields) {
+ let fn = () => { }
+ Object.defineProperty(fn, "name", { value: field })
+ Fields[field] = fn;
+ }
+ let args: JsxArgs = {
+ Document: function Document() { },
+ DocumentView: function DocumentView() { },
+ Keys,
+ Fields
+ } as any;
+ return args;
+}
@observer
export class DocumentView extends React.Component<DocumentViewProps> {
@@ -70,7 +112,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
@computed
get active(): boolean {
- return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined ||
+ return SelectionManager.IsSelected(this) || !this.props.ContainingCollectionView ||
this.props.ContainingCollectionView.active;
}
@@ -104,7 +146,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
@computed
get topMost(): boolean {
- return this.props.ContainingCollectionView == undefined || this.props.ContainingCollectionView instanceof CollectionDockingView;
+ return !this.props.ContainingCollectionView || this.props.ContainingCollectionView instanceof CollectionDockingView;
}
onPointerMove = (e: PointerEvent): void => {
@@ -195,20 +237,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
}
}
- //
- // returns the cumulative scaling between the document and the screen
- // tfs: I don't think this should be necessary
- //
- @computed
- public get ScalingToScreenSpace(): number {
- if (this.props.ContainingCollectionView != undefined &&
- this.props.ContainingCollectionView.props.ContainingDocumentView != undefined) {
- let ss = this.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1);
- return this.props.ContainingCollectionView.props.ContainingDocumentView.ScalingToScreenSpace * ss;
- }
- return 1;
- }
-
isSelected = () => {
return SelectionManager.IsSelected(this);
}
@@ -217,10 +245,20 @@ export class DocumentView extends React.Component<DocumentViewProps> {
SelectionManager.SelectDoc(this, ctrlPressed)
}
+ screenToLocalTransform = () => {
+ return this.props.ScreenToLocalTransform().transform(Transform.Identity.scale(1 / this.props.Scaling));
+ }
render() {
- let bindings = { ...this.props } as any;
- bindings.isSelected = this.isSelected;
- bindings.select = this.select;
+ let lkeys = this.props.Document.GetT(KeyStore.LayoutKeys, ListField);
+ if (!lkeys || lkeys === "<Waiting>") {
+ return <p>Error loading layout keys</p>;
+ }
+ let bindings = {
+ ...this.props,
+ ScreenToLocalTransform: this.screenToLocalTransform, // adds 'Scaling' to the screen to local Xf
+ isSelected: this.isSelected,
+ select: this.select
+ } as any;
for (const key of this.layoutKeys) {
bindings[key.Name + "Key"] = key; // this maps string values of the form <keyname>Key to an actual key Kestore.keyname e.g, "DataKey" => KeyStore.Data
}
@@ -246,14 +284,13 @@ export class DocumentView extends React.Component<DocumentViewProps> {
bindings.BackgroundView = backgroundView;
}
- bindings.DocumentView = this;
-
var width = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
var strwidth = width > 0 ? width.toString() + "px" : "100%";
var height = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
var strheight = height > 0 ? height.toString() + "px" : "100%";
+ var scaling = this.props.Scaling;
return (
- <div className="documentView-node" ref={this._mainCont} style={{ width: strwidth, height: strheight, transformOrigin: "left top", transform: `scale(${this.props.Scaling},${this.props.Scaling})` }}
+ <div className="documentView-node" ref={this._mainCont} style={{ width: strwidth, height: strheight, transformOrigin: "left top", transform: `scale(${scaling},${scaling})` }}
onContextMenu={this.onContextMenu}
onPointerDown={this.onPointerDown} >
<JsxParser