From 3c71a4b9c727f8eee8631b46b28c010682608f13 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 16 Feb 2019 07:46:55 -0500
Subject: Fixed server and added a field debug viewer

---
 src/debug/Viewer.tsx | 192 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 192 insertions(+)
 create mode 100644 src/debug/Viewer.tsx

(limited to 'src/debug')

diff --git a/src/debug/Viewer.tsx b/src/debug/Viewer.tsx
new file mode 100644
index 000000000..ddfe884ed
--- /dev/null
+++ b/src/debug/Viewer.tsx
@@ -0,0 +1,192 @@
+import { action, configure, observable, ObservableMap, Lambda } from 'mobx';
+import "normalize.css";
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { observer } from 'mobx-react';
+import { Document } from '../fields/Document';
+import { BasicField } from '../fields/BasicField';
+import { ListField } from '../fields/ListField';
+import { Key } from '../fields/Key';
+import { Field } from '../fields/Field';
+import { Server } from '../client/Server';
+
+configure({
+    enforceActions: "observed"
+});
+
+@observer
+class FieldViewer extends React.Component<{ field: BasicField<any> }> {
+    render() {
+        return <span>{this.props.field.Data} ({this.props.field.Id})</span>;
+    }
+}
+
+@observer
+class KeyViewer extends React.Component<{ field: Key }> {
+    render() {
+        return this.props.field.Name;
+    }
+}
+
+@observer
+class ListViewer extends React.Component<{ field: ListField<Field> }>{
+    @observable
+    expanded = false;
+
+    render() {
+        let content;
+        if (this.expanded) {
+            content = (
+                <div>
+                    {this.props.field.Data.map(field => <DebugViewer fieldId={field.Id} key={field.Id} />)}
+                </div>
+            )
+        } else {
+            content = <>[...] ({this.props.field.Id})</>
+        }
+        return (
+            <div>
+                <button onClick={action(() => this.expanded = !this.expanded)}>Toggle</button>
+                {content}
+            </div >
+        )
+    }
+}
+
+@observer
+class DocumentViewer extends React.Component<{ field: Document }> {
+    private keyMap: ObservableMap<string, Key> = new ObservableMap
+
+    private disposer?: Lambda;
+
+    componentDidMount() {
+        let f = () => {
+            Array.from(this.props.field._proxies.keys()).forEach(id => {
+                if (!this.keyMap.has(id)) {
+                    Server.GetField(id, (field) => {
+                        if (field && field instanceof Key) {
+                            this.keyMap.set(id, field);
+                        }
+                    })
+                }
+            });
+        }
+        this.disposer = this.props.field._proxies.observe(f)
+        f()
+    }
+
+    componentWillUnmount() {
+        if (this.disposer) {
+            this.disposer();
+        }
+    }
+
+    render() {
+        let fields = Array.from(this.props.field._proxies.entries()).map(kv => {
+            let key = this.keyMap.get(kv[0]);
+            return (
+                <div key={kv[0]}>
+                    <b>({key ? key.Name : kv[0]}): </b>
+                    <DebugViewer fieldId={kv[1]!}></DebugViewer>
+                </div>
+            )
+        })
+        return (
+            <div>
+                Document ({this.props.field.Id})
+                <div style={{ paddingLeft: "25px" }}>
+                    {fields}
+                </div>
+            </div>
+        )
+    }
+}
+
+@observer
+class DebugViewer extends React.Component<{ fieldId: string }> {
+    @observable
+    private field?: Field;
+
+    @observable
+    private error?: string;
+
+    constructor(props: { fieldId: string }) {
+        super(props)
+        this.update()
+    }
+
+    update() {
+        Server.GetField(this.props.fieldId, (field => {
+            this.field = field;
+            if (!field) {
+                this.error = `Field with id ${this.props.fieldId} not found`
+            }
+        }));
+
+    }
+
+    render() {
+        let content;
+        if (this.field) {
+            // content = this.field.ToJson();
+            if (this.field instanceof ListField) {
+                content = (<ListViewer field={this.field} />)
+            } else if (this.field instanceof Document) {
+                content = (<DocumentViewer field={this.field} />)
+            } else if (this.field instanceof BasicField) {
+                content = (<FieldViewer field={this.field} />)
+            } else if (this.field instanceof Key) {
+                content = (<KeyViewer field={this.field} />)
+            }
+        } else if (this.error) {
+            content = <span>Field <b>{this.props.fieldId}</b> not found <button onClick={() => this.update()}>Refresh</button></span>
+        } else {
+            content = <>Field loading</>
+        }
+        return content;
+    }
+}
+
+@observer
+class Viewer extends React.Component {
+    @observable
+    private idToAdd: string = '';
+
+    @observable
+    private ids: string[] = [];
+
+    @action
+    inputOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this.idToAdd = e.target.value;
+    }
+
+    @action
+    onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
+        if (e.key === "Enter") {
+            this.ids.push(this.idToAdd)
+            this.idToAdd = ""
+        }
+    }
+
+    render() {
+        return (
+            <>
+                <input value={this.idToAdd}
+                    onChange={this.inputOnChange}
+                    onKeyDown={this.onKeyPress} />
+                <div>
+                    {this.ids.map(id => {
+                        return <DebugViewer fieldId={id} key={id}></DebugViewer>
+                    })}
+                </div>
+            </>
+        )
+    }
+}
+
+ReactDOM.render((
+    <div style={{ position: "absolute", width: "100%", height: "100%" }}>
+        <Viewer />
+    </div>),
+    document.getElementById('root')
+);
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 1f624d900738115452a4a676c3f93dd9bfc6a745 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 23 Feb 2019 04:49:37 -0500
Subject: Fixed crash in debug viewer

---
 src/debug/Viewer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/debug')

diff --git a/src/debug/Viewer.tsx b/src/debug/Viewer.tsx
index ddfe884ed..aff77fca3 100644
--- a/src/debug/Viewer.tsx
+++ b/src/debug/Viewer.tsx
@@ -7,7 +7,7 @@ import { Document } from '../fields/Document';
 import { BasicField } from '../fields/BasicField';
 import { ListField } from '../fields/ListField';
 import { Key } from '../fields/Key';
-import { Field } from '../fields/Field';
+import { Opt, Field } from '../fields/Field';
 import { Server } from '../client/Server';
 
 configure({
@@ -116,7 +116,7 @@ class DebugViewer extends React.Component<{ fieldId: string }> {
     }
 
     update() {
-        Server.GetField(this.props.fieldId, (field => {
+        Server.GetField(this.props.fieldId, action((field: Opt<Field>) => {
             this.field = field;
             if (!field) {
                 this.error = `Field with id ${this.props.fieldId} not found`
-- 
cgit v1.2.3-70-g09d2


From f8fe6307622439d23d05a7628b3a91851a54797d Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Mon, 25 Feb 2019 12:14:31 -0500
Subject: Another debug view fix

---
 src/debug/Viewer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/debug')

diff --git a/src/debug/Viewer.tsx b/src/debug/Viewer.tsx
index aff77fca3..780e9f8f2 100644
--- a/src/debug/Viewer.tsx
+++ b/src/debug/Viewer.tsx
@@ -17,7 +17,7 @@ configure({
 @observer
 class FieldViewer extends React.Component<{ field: BasicField<any> }> {
     render() {
-        return <span>{this.props.field.Data} ({this.props.field.Id})</span>;
+        return <span>{JSON.stringify(this.props.field.Data)} ({this.props.field.Id})</span>;
     }
 }
 
-- 
cgit v1.2.3-70-g09d2


From 09f0bebe4ac64250769297ccf64c33217b8db66a Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Wed, 27 Feb 2019 15:33:32 -0500
Subject: Fixes for context menu stuff

---
 deploy/debug/test.html                             | 13 ++++++
 package-lock.json                                  |  8 +++-
 src/client/views/Main.tsx                          |  1 -
 .../views/collections/CollectionDockingView.tsx    |  2 +-
 .../views/collections/CollectionFreeFormView.tsx   |  2 -
 src/client/views/nodes/DocumentView.tsx            | 17 +++-----
 src/debug/Test.tsx                                 | 46 ++++++++++++++++++++++
 webpack.config.js                                  |  1 +
 8 files changed, 73 insertions(+), 17 deletions(-)
 create mode 100644 deploy/debug/test.html
 create mode 100644 src/debug/Test.tsx

(limited to 'src/debug')

diff --git a/deploy/debug/test.html b/deploy/debug/test.html
new file mode 100644
index 000000000..58febbc81
--- /dev/null
+++ b/deploy/debug/test.html
@@ -0,0 +1,13 @@
+<html>
+
+<head>
+    <title>Test view</title>
+    <link href="https://fonts.googleapis.com/css?family=Fjalla+One|Hind+Siliguri:300" rel="stylesheet">
+</head>
+
+<body>
+    <div id="root"></div>
+    <script src="../test.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index d74c77819..ecfa3d6d8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3389,11 +3389,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3410,7 +3412,8 @@
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
@@ -3539,6 +3542,7 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 17dda899d..61ad66c72 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -30,7 +30,6 @@ window.addEventListener("dragover", function (e) {
     e.preventDefault();
 }, false)
 document.addEventListener("pointerdown", action(function (e: PointerEvent) {
-    console.log(ContextMenu);
     if (!ContextMenu.Instance.intersects(e.pageX, e.pageY)) {
         ContextMenu.Instance.clearItems()
     }
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 5fb632469..cb978c1ba 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -245,7 +245,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     render() {
         return (
             <div className="collectiondockingview-container" id="menuContainer"
-                onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef}
+                onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} ref={this._containerRef}
                 style={{
                     width: "100%",
                     height: "100%",
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 12909c151..1f8d76432 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -83,7 +83,6 @@ export class CollectionFreeFormView extends CollectionViewBase {
     @action
     onPointerMove = (e: PointerEvent): void => {
         if (!e.cancelBubble && this.props.active()) {
-            e.preventDefault();
             e.stopPropagation();
             let x = this.props.Document.GetNumber(KeyStore.PanX, 0);
             let y = this.props.Document.GetNumber(KeyStore.PanY, 0);
@@ -230,7 +229,6 @@ export class CollectionFreeFormView extends CollectionViewBase {
             <div className="collectionfreeformview-container"
                 onPointerDown={this.onPointerDown}
                 onWheel={this.onPointerWheel}
-                onContextMenu={(e) => e.preventDefault()}
                 onDrop={this.onDrop.bind(this)}
                 onDragOver={this.onDragOver}
                 style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px`, }}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index c579b7142..6e14df229 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -80,7 +80,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
     private _mainCont = React.createRef<HTMLDivElement>();
     private _documentBindings: any = null;
-    private _contextMenuCanOpen = false;
     private _downX: number = 0;
     private _downY: number = 0;
 
@@ -99,7 +98,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             CollectionDockingView.Instance.StartOtherDrag(this._mainCont.current!, this.props.Document);
             e.stopPropagation();
         } else {
-            this._contextMenuCanOpen = true;
             if (this.active && !e.isDefaultPrevented()) {
                 e.stopPropagation();
                 if (e.buttons === 2) {
@@ -115,13 +113,10 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
     onPointerMove = (e: PointerEvent): void => {
         if (e.cancelBubble) {
-            this._contextMenuCanOpen = false;
             return;
         }
         if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
-            this._contextMenuCanOpen = false;
             if (this._mainCont.current != null && !this.topMost) {
-                this._contextMenuCanOpen = false;
                 const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
                 let dragData: { [id: string]: any } = {};
                 dragData["documentView"] = this;
@@ -129,7 +124,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
                 dragData["yOffset"] = e.y - top;
                 DragManager.StartDrag(this._mainCont.current, dragData, {
                     handlers: {
-                        dragComplete: action((e: DragManager.DragCompleteEvent) => { }),
+                        dragComplete: action(() => { }),
                     },
                     hideSource: true
                 })
@@ -148,7 +143,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         }
     }
 
-    deleteClicked = (e: React.MouseEvent): void => {
+    deleteClicked = (): void => {
         if (this.props.RemoveDocument) {
             this.props.RemoveDocument(this.props.Document);
         }
@@ -168,13 +163,14 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
     @action
     onContextMenu = (e: React.MouseEvent): void => {
-        e.preventDefault()
         e.stopPropagation();
-        if (!SelectionManager.IsSelected(this) || !this._contextMenuCanOpen) {
+        let moved = Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3;
+        if (moved || e.isDefaultPrevented()) {
+            e.preventDefault()
             return;
         }
+        e.preventDefault()
 
-        ContextMenu.Instance.clearItems()
         ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
         ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) })
         ContextMenu.Instance.addItem({ description: "Freeform", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) })
@@ -193,7 +189,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     }
 
     @computed get mainContent() {
-        var val = this.props.Document.Id;
         return <JsxParser
             components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebView }}
             bindings={this._documentBindings}
diff --git a/src/debug/Test.tsx b/src/debug/Test.tsx
new file mode 100644
index 000000000..7bc70615f
--- /dev/null
+++ b/src/debug/Test.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+class TestInternal extends React.Component {
+    onContextMenu = (e: React.MouseEvent) => {
+        console.log("Internal");
+        e.stopPropagation();
+    }
+
+    onPointerDown = (e: React.MouseEvent) => {
+        console.log("pointer down")
+        e.preventDefault();
+    }
+
+    render() {
+        return <div onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown}
+            onPointerUp={this.onPointerDown}>Hello world</div>
+    }
+}
+
+class TestChild extends React.Component {
+    onContextMenu = () => {
+        console.log("Child");
+    }
+
+    render() {
+        return <div onContextMenu={this.onContextMenu}><TestInternal /></div>
+    }
+}
+
+class TestParent extends React.Component {
+    onContextMenu = () => {
+        console.log("Parent");
+    }
+
+    render() {
+        return <div onContextMenu={this.onContextMenu}><TestChild /></div>
+    }
+}
+
+ReactDOM.render((
+    <div style={{ position: "absolute", width: "100%", height: "100%" }}>
+        <TestParent />
+    </div>),
+    document.getElementById('root')
+);
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 2a29844e8..900802d7d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -7,6 +7,7 @@ module.exports = {
   entry: {
     bundle: ["./src/client/views/Main.tsx", 'webpack-hot-middleware/client?reload=true'],
     viewer: ["./src/debug/Viewer.tsx", 'webpack-hot-middleware/client?reload=true'],
+    test: ["./src/debug/Test.tsx", 'webpack-hot-middleware/client?reload=true'],
   },
   devtool: "source-map",
   node: {
-- 
cgit v1.2.3-70-g09d2