From e0b3c759880639bf56f9b8b39ea2e38c5cbad8a6 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 10 Apr 2019 14:28:25 -0400
Subject: fixed extra rendering for collections.

---
 src/client/views/collections/CollectionVideoView.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src/client/views/collections/CollectionVideoView.tsx')

diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx
index b02983a2e..6c9780adb 100644
--- a/src/client/views/collections/CollectionVideoView.tsx
+++ b/src/client/views/collections/CollectionVideoView.tsx
@@ -7,6 +7,7 @@ import React = require("react");
 import "./CollectionVideoView.scss";
 import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormView";
 import { FieldView, FieldViewProps } from "../nodes/FieldView";
+import { emptyFunction } from "../../../Utils";
 
 
 @observer
@@ -100,7 +101,7 @@ export class CollectionVideoView extends React.Component<FieldViewProps> {
 
     onContextMenu = (e: React.MouseEvent): void => {
         if (!e.isPropagationStopped() && this.props.Document.Id !== "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
-            ContextMenu.Instance.addItem({ description: "VideoOptions", event: () => { } });
+            ContextMenu.Instance.addItem({ description: "VideoOptions", event: emptyFunction });
         }
     }
 
-- 
cgit v1.2.3-70-g09d2


From 2cb379ebe0fd8f2dc9ffa64c2b303bef648cfa33 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sun, 14 Apr 2019 16:59:21 -0400
Subject: cleaned up ContainingCollectionView stuff a bit

---
 src/client/util/DocumentManager.ts                 | 22 ++++------
 src/client/views/Main.tsx                          |  2 +-
 src/client/views/collections/CollectionPDFView.tsx |  4 +-
 .../views/collections/CollectionSchemaView.tsx     |  1 -
 src/client/views/collections/CollectionSubView.tsx |  4 +-
 .../views/collections/CollectionVideoView.tsx      |  2 +-
 .../CollectionFreeFormLinksView.tsx                | 21 +++++-----
 src/client/views/nodes/DocumentContentsView.tsx    |  1 -
 src/client/views/nodes/DocumentView.tsx            | 12 +++---
 src/client/views/nodes/FieldView.tsx               |  5 ++-
 src/client/views/nodes/KeyValuePair.scss           | 40 +++++++++---------
 src/client/views/nodes/KeyValuePair.tsx            | 47 +++++++++-------------
 12 files changed, 71 insertions(+), 90 deletions(-)

(limited to 'src/client/views/collections/CollectionVideoView.tsx')

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 3e093c8dc..3b5a5b470 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -1,11 +1,9 @@
-import React = require('react');
-import { observer } from 'mobx-react';
-import { observable, action, computed } from 'mobx';
+import { computed, observable } from 'mobx';
 import { Document } from "../../fields/Document";
-import { DocumentView } from '../views/nodes/DocumentView';
-import { KeyStore } from '../../fields/KeyStore';
 import { FieldWaiting } from '../../fields/Field';
+import { KeyStore } from '../../fields/KeyStore';
 import { ListField } from '../../fields/ListField';
+import { DocumentView } from '../views/nodes/DocumentView';
 
 
 export class DocumentManager {
@@ -27,10 +25,6 @@ export class DocumentManager {
         // this.DocumentViews = new Array<DocumentView>();
     }
 
-    public getAllDocumentViews(collection: Document) {
-        return this.DocumentViews.filter(dv => dv.props.ContainingCollectionView && dv.props.ContainingCollectionView.props.Document === collection);
-    }
-
     public getDocumentView(toFind: Document): DocumentView | null {
 
         let toReturn: DocumentView | null;
@@ -39,7 +33,6 @@ export class DocumentManager {
         //gets document view that is in a freeform canvas collection
         DocumentManager.Instance.DocumentViews.map(view => {
             let doc = view.props.Document;
-            // if (view.props.ContainingCollectionView instanceof CollectionFreeFormView) {
 
             if (doc === toFind) {
                 toReturn = view;
@@ -51,7 +44,7 @@ export class DocumentManager {
             }
         });
 
-        return (toReturn);
+        return toReturn;
     }
     public getDocumentViews(toFind: Document): DocumentView[] {
 
@@ -72,7 +65,7 @@ export class DocumentManager {
             }
         });
 
-        return (toReturn);
+        return toReturn;
     }
 
     @computed
@@ -84,9 +77,8 @@ export class DocumentManager {
                     if (link instanceof Document) {
                         let linkToDoc = link.GetT(KeyStore.LinkedToDocs, Document);
                         if (linkToDoc && linkToDoc !== FieldWaiting) {
-                            DocumentManager.Instance.getDocumentViews(linkToDoc).map(docView1 => {
-                                pairs.push({ a: dv, b: docView1, l: link });
-                            });
+                            DocumentManager.Instance.getDocumentViews(linkToDoc).map(docView1 =>
+                                pairs.push({ a: dv, b: docView1, l: link }));
                         }
                     }
                     return pairs;
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 03cfbe9da..f8c6ec0e2 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -282,7 +282,7 @@ export class Main extends React.Component {
             return <div className="mainDiv-textInput" style={{ pointerEvents: "none", transform: `translate(${x}px, ${y}px) scale(${1 / s[0]},${1 / s[0]})`, width: "auto", height: "auto" }} >
                 <div className="mainDiv-textInput" onPointerDown={this.textBoxDown} ref={this._textProxyDiv} onScroll={this.textScroll} style={{ pointerEvents: "none", transform: `scale(${1}, ${1})`, width: `${w * s[0]}px`, height: `${h * s[0]}px` }}>
                     <FormattedTextBox fieldKey={this._textFieldKey!} isOverlay={true} Document={this._textDoc} isSelected={returnTrue} select={emptyFunction} isTopMost={true}
-                        selectOnLoad={true} ContainingCollectionView={undefined} CollectionView={undefined} onActiveChanged={emptyFunction} active={returnTrue} ScreenToLocalTransform={() => this._textXf} focus={emptyDocFunction} />
+                        selectOnLoad={true} ContainingCollectionView={undefined} onActiveChanged={emptyFunction} active={returnTrue} ScreenToLocalTransform={() => this._textXf} focus={emptyDocFunction} />
                 </div>
             </ div>;
         }
diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx
index 6cbe59012..229bc4059 100644
--- a/src/client/views/collections/CollectionPDFView.tsx
+++ b/src/client/views/collections/CollectionPDFView.tsx
@@ -1,4 +1,4 @@
-import { action, computed, observable } from "mobx";
+import { action } from "mobx";
 import { observer } from "mobx-react";
 import { KeyStore } from "../../../fields/KeyStore";
 import { ContextMenu } from "../ContextMenu";
@@ -42,7 +42,7 @@ export class CollectionPDFView extends React.Component<FieldViewProps> {
         let props = { ...this.props, ...renderProps };
         return (
             <>
-                <CollectionFreeFormView {...props} />
+                <CollectionFreeFormView {...props} CollectionView={this} />
                 {this.props.isSelected() ? this.uIButtons : (null)}
             </>
         );
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 63346a4c6..2c99c9c67 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -75,7 +75,6 @@ export class CollectionSchemaView extends CollectionSubView {
         let props: FieldViewProps = {
             Document: rowProps.value[0],
             fieldKey: rowProps.value[1],
-            CollectionView: this.props.CollectionView,
             ContainingCollectionView: this.props.CollectionView,
             isSelected: returnFalse,
             select: emptyFunction,
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 61b7787e7..1c927c78d 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -17,6 +17,8 @@ import { FieldViewProps } from "../nodes/FieldView";
 import * as rp from 'request-promise';
 import { emptyFunction } from "../../../Utils";
 import { CollectionView } from "./CollectionView";
+import { CollectionPDFView } from "./CollectionPDFView";
+import { CollectionVideoView } from "./CollectionVideoView";
 
 export interface CollectionViewProps extends FieldViewProps {
     addDocument: (document: Document, allowDuplicates?: boolean) => boolean;
@@ -25,7 +27,7 @@ export interface CollectionViewProps extends FieldViewProps {
 }
 
 export interface SubCollectionViewProps extends CollectionViewProps {
-    CollectionView: Opt<CollectionView>;
+    CollectionView: CollectionView | CollectionPDFView | CollectionVideoView;
 }
 
 export type CursorEntry = TupleField<[string, string], [number, number]>;
diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx
index 6c9780adb..29fb342c6 100644
--- a/src/client/views/collections/CollectionVideoView.tsx
+++ b/src/client/views/collections/CollectionVideoView.tsx
@@ -109,7 +109,7 @@ export class CollectionVideoView extends React.Component<FieldViewProps> {
         let props = { ...this.props, ...renderProps };
         return (
             <>
-                <CollectionFreeFormView {...props} />
+                <CollectionFreeFormView {...props} CollectionView={this} />
                 {this.props.isSelected() ? this.uIButtons : (null)}
             </>
         );
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
index 647c83d4d..2f684a54e 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
@@ -1,7 +1,6 @@
-import { computed, reaction, trace, IReactionDisposer } from "mobx";
+import { computed, IReactionDisposer, reaction } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../../fields/Document";
-import { FieldWaiting } from "../../../../fields/Field";
 import { KeyStore } from "../../../../fields/KeyStore";
 import { ListField } from "../../../../fields/ListField";
 import { Utils } from "../../../../Utils";
@@ -85,19 +84,17 @@ export class CollectionFreeFormLinksView extends React.Component<CollectionViewP
             let targetViews = this.documentAnchors(connection.b);
             let possiblePairs: { a: Document, b: Document, }[] = [];
             srcViews.map(sv => targetViews.map(tv => possiblePairs.push({ a: sv.props.Document, b: tv.props.Document })));
-            possiblePairs.map(possiblePair => {
-                if (!drawnPairs.reduce((found, drawnPair) => {
+            possiblePairs.map(possiblePair =>
+                drawnPairs.reduce((found, drawnPair) => {
                     let match = (possiblePair.a === drawnPair.a && possiblePair.b === drawnPair.b);
-                    if (match) {
-                        if (!drawnPair.l.reduce((found, link) => found || link.Id === connection.l.Id, false)) {
-                            drawnPair.l.push(connection.l);
-                        }
+                    if (match && !drawnPair.l.reduce((found, link) => found || link.Id === connection.l.Id, false)) {
+                        drawnPair.l.push(connection.l);
                     }
                     return match || found;
-                }, false)) {
-                    drawnPairs.push({ a: possiblePair.a, b: possiblePair.b, l: [connection.l] });
-                }
-            });
+                }, false)
+                ||
+                drawnPairs.push({ a: possiblePair.a, b: possiblePair.b, l: [connection.l] })
+            );
             return drawnPairs;
         }, [] as { a: Document, b: Document, l: Document[] }[]);
         return connections.map(c => <CollectionFreeFormLinkView key={Utils.GenerateGuid()} A={c.a} B={c.b} LinkDocs={c.l} />);
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index a967db000..88900c4b1 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -65,7 +65,6 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
                 isTopMost,
                 selectOnLoad,
                 ScreenToLocalTransform,
-                CollectionView: undefined,
                 ContainingCollectionView,
                 active,
                 onActiveChanged,
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index f0f9af89f..935540af1 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,30 +1,32 @@
-import { action, computed, IReactionDisposer, reaction, runInAction, trace } from "mobx";
+import { action, computed, runInAction } from "mobx";
 import { observer } from "mobx-react";
+import { BooleanField } from "../../../fields/BooleanField";
 import { Document } from "../../../fields/Document";
 import { Field, FieldWaiting, Opt } from "../../../fields/Field";
 import { Key } from "../../../fields/Key";
 import { KeyStore } from "../../../fields/KeyStore";
 import { ListField } from "../../../fields/ListField";
-import { BooleanField } from "../../../fields/BooleanField";
 import { TextField } from "../../../fields/TextField";
 import { ServerUtils } from "../../../server/ServerUtil";
-import { Utils, emptyFunction } from "../../../Utils";
+import { emptyFunction, Utils } from "../../../Utils";
 import { Documents } from "../../documents/Documents";
 import { DocumentManager } from "../../util/DocumentManager";
 import { DragManager } from "../../util/DragManager";
 import { SelectionManager } from "../../util/SelectionManager";
 import { Transform } from "../../util/Transform";
+import { undoBatch, UndoManager } from "../../util/UndoManager";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
+import { CollectionPDFView } from "../collections/CollectionPDFView";
+import { CollectionVideoView } from "../collections/CollectionVideoView";
 import { CollectionView } from "../collections/CollectionView";
 import { ContextMenu } from "../ContextMenu";
 import { DocumentContentsView } from "./DocumentContentsView";
 import "./DocumentView.scss";
 import React = require("react");
-import { undoBatch, UndoManager } from "../../util/UndoManager";
 
 
 export interface DocumentViewProps {
-    ContainingCollectionView: Opt<CollectionView>;
+    ContainingCollectionView: Opt<CollectionView | CollectionPDFView | CollectionVideoView>;
     Document: Document;
     opacity: number;
     addDocument?: (doc: Document, allowDuplicates?: boolean) => boolean;
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 755367d23..562de4827 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -21,6 +21,8 @@ import { Transform } from "../../util/Transform";
 import { KeyStore } from "../../../fields/KeyStore";
 import { returnFalse, emptyDocFunction } from "../../../Utils";
 import { CollectionView } from "../collections/CollectionView";
+import { CollectionPDFView } from "../collections/CollectionPDFView";
+import { CollectionVideoView } from "../collections/CollectionVideoView";
 
 
 //
@@ -30,8 +32,7 @@ import { CollectionView } from "../collections/CollectionView";
 //
 export interface FieldViewProps {
     fieldKey: Key;
-    ContainingCollectionView: Opt<CollectionView>;
-    CollectionView: Opt<CollectionView>;
+    ContainingCollectionView: Opt<CollectionView | CollectionPDFView | CollectionVideoView>;
     Document: Document;
     isSelected: () => boolean;
     select: (isCtrlPressed: boolean) => void;
diff --git a/src/client/views/nodes/KeyValuePair.scss b/src/client/views/nodes/KeyValuePair.scss
index 04d002c7b..01701e02c 100644
--- a/src/client/views/nodes/KeyValuePair.scss
+++ b/src/client/views/nodes/KeyValuePair.scss
@@ -1,30 +1,28 @@
 @import "../globalCssVariables";
 
-.container{
-    width:100%;
-    height:100%;
-    display: flex;                 
-    flex-direction: row;           
-    flex-wrap: nowrap;              
-    justify-content: space-between; 
-}
 
 .keyValuePair-td-key {
     display:inline-block;
-    width: 50%;
+    .keyValuePair-td-key-container{
+        width:100%;
+        height:100%;
+        display: flex;                 
+        flex-direction: row;           
+        flex-wrap: nowrap;              
+        justify-content: space-between; 
+        .keyValuePair-td-key-delete{
+            position: relative;
+            background-color: transparent;
+            color:red;
+        }
+        .keyValuePair-keyField {
+            width:100%;
+            text-align: center;
+            position: relative;
+            overflow: auto;
+        }
+    }
 }
 .keyValuePair-td-value {
     display:inline-block;
-    width: 50%;
-}
-.keyValuePair-keyField {
-    width:100%;
-    text-align: center;
-    position: relative;
-    overflow: auto;
-}
-.delete{
-    position: relative;
-    background-color: transparent;
-    color:red;
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index 1b9dd26bd..5d69f23b2 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -1,18 +1,18 @@
-import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
-import "./KeyValueBox.scss";
-import "./KeyValuePair.scss";
-import React = require("react");
-import { FieldViewProps, FieldView } from './FieldView';
-import { Opt, Field } from '../../../fields/Field';
+import { action, observable } from 'mobx';
 import { observer } from "mobx-react";
-import { observable, action } from 'mobx';
+import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
 import { Document } from '../../../fields/Document';
+import { Field, Opt } from '../../../fields/Field';
 import { Key } from '../../../fields/Key';
+import { emptyDocFunction, emptyFunction, returnFalse } from '../../../Utils';
 import { Server } from "../../Server";
-import { EditableView } from "../EditableView";
 import { CompileScript, ToField } from "../../util/Scripting";
 import { Transform } from '../../util/Transform';
-import { returnFalse, emptyFunction, emptyDocFunction } from '../../../Utils';
+import { EditableView } from "../EditableView";
+import { FieldView, FieldViewProps } from './FieldView';
+import "./KeyValueBox.scss";
+import "./KeyValuePair.scss";
+import React = require("react");
 
 // Represents one row in a key value plane
 
@@ -25,29 +25,22 @@ export interface KeyValuePairProps {
 @observer
 export class KeyValuePair extends React.Component<KeyValuePairProps> {
 
-    @observable
-    private key: Opt<Key>;
+    @observable private key: Opt<Key>;
 
     constructor(props: KeyValuePairProps) {
         super(props);
         Server.GetField(this.props.fieldId,
-            action((field: Opt<Field>) => {
-                if (field) {
-                    this.key = field as Key;
-                }
-            }));
+            action((field: Opt<Field>) => field instanceof Key && (this.key = field)));
 
     }
 
 
     render() {
         if (!this.key) {
-            return <tr><td>error</td><td></td></tr>;
-
+            return <tr><td>error</td><td /></tr>;
         }
         let props: FieldViewProps = {
             Document: this.props.doc,
-            CollectionView: undefined,
             ContainingCollectionView: undefined,
             fieldKey: this.key,
             isSelected: returnFalse,
@@ -59,19 +52,17 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
             ScreenToLocalTransform: Transform.Identity,
             focus: emptyDocFunction,
         };
-        let contents = (
-            <FieldView {...props} />
-        );
+        let contents = <FieldView {...props} />;
         return (
             <tr className={this.props.rowStyle}>
                 <td className="keyValuePair-td-key" style={{ width: `${this.props.keyWidth}%` }}>
-                    <div className="container">
-                        <button className="delete" onClick={() => {
+                    <div className="keyValuePair-td-key-container">
+                        <button className="keyValuePair-td-key-delete" onClick={() => {
                             let field = props.Document.Get(props.fieldKey);
-                            if (field && field instanceof Field) {
-                                props.Document.Set(props.fieldKey, undefined);
-                            }
-                        }}>X</button>
+                            field && field instanceof Field && props.Document.Set(props.fieldKey, undefined);
+                        }}>
+                            X
+                        </button>
                         <div className="keyValuePair-keyField">{this.key.Name}</div>
                     </div>
                 </td>
-- 
cgit v1.2.3-70-g09d2


From ab63fdaa39699587d46fc869d3395bca88e15c96 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Tue, 23 Apr 2019 09:38:37 -0400
Subject: fixed video/image events with ink

---
 src/client/views/collections/CollectionVideoView.tsx | 10 ++++++++--
 src/client/views/nodes/ImageBox.scss                 |  4 ++++
 src/client/views/nodes/ImageBox.tsx                  |  6 ++++--
 3 files changed, 16 insertions(+), 4 deletions(-)

(limited to 'src/client/views/collections/CollectionVideoView.tsx')

diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx
index 29fb342c6..779dc8fc3 100644
--- a/src/client/views/collections/CollectionVideoView.tsx
+++ b/src/client/views/collections/CollectionVideoView.tsx
@@ -37,10 +37,13 @@ export class CollectionVideoView extends React.Component<FieldViewProps> {
         ]);
     }
 
+    _ele: HTMLDivElement | null = null;
     @action
     mainCont = (ele: HTMLDivElement | null) => {
+        this._ele = ele;
         if (ele) {
             this._player = ele.getElementsByTagName("video")[0];
+            console.log(this._player);
             if (this.props.Document.GetNumber(KeyStore.CurPage, -1) >= 0) {
                 this._currentTimecode = this.props.Document.GetNumber(KeyStore.CurPage, -1);
             }
@@ -57,9 +60,12 @@ export class CollectionVideoView extends React.Component<FieldViewProps> {
 
     @action
     updateTimecode = () => {
+        this._player = this._player ? this._player : this._ele ? this._ele.getElementsByTagName("video")[0] : undefined;
         if (this._player) {
-            if ((this._player as any).AHackBecauseSomethingResetsTheVideoToZero !== -1) {
-                this._player.currentTime = (this._player as any).AHackBecauseSomethingResetsTheVideoToZero;
+            let timecode = (this._player as any).hasOwnProperty("AHackBecauseSomethingResetsTheVideoToZero") ?
+                (this._player as any).AHackBecauseSomethingResetsTheVideoToZero : -1;
+            if (timecode !== -1 && Object) {
+                this._player.currentTime = timecode;
                 (this._player as any).AHackBecauseSomethingResetsTheVideoToZero = -1;
             } else {
                 this._currentTimecode = this._player.currentTime;
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index f4b3837ff..db9a08fba 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -6,6 +6,10 @@
   height: auto;
   max-width: 100%;
   max-height: 100%;
+  pointer-events: none;
+}
+.imageBox-cont-interactive {
+    pointer-events: all;
 }
 
 .imageBox-dot {
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index ce855384c..5d9aefd61 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -15,6 +15,8 @@ import { ContextMenu } from "../../views/ContextMenu";
 import { FieldView, FieldViewProps } from './FieldView';
 import "./ImageBox.scss";
 import React = require("react");
+import { InkingControl } from '../InkingControl';
+import { InkTool } from '../../../fields/InkField';
 
 @observer
 export class ImageBox extends React.Component<FieldViewProps> {
@@ -87,7 +89,6 @@ export class ImageBox extends React.Component<FieldViewProps> {
     onPointerDown = (e: React.PointerEvent): void => {
         if (Date.now() - this._lastTap < 300) {
             if (e.buttons === 1) {
-                e.stopPropagation();
                 this._downX = e.clientX;
                 this._downY = e.clientY;
                 document.removeEventListener("pointerup", this.onPointerUp);
@@ -161,8 +162,9 @@ export class ImageBox extends React.Component<FieldViewProps> {
         else if (field instanceof ImageField) paths = [field.Data.href];
         else if (field instanceof ListField) paths = field.Data.filter(val => val as ImageField).map(p => (p as ImageField).Data.href);
         let nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 1);
+        let interactive = InkingControl.Instance.selectedTool ? "" : "interactive"
         return (
-            <div className="imageBox-cont" onPointerDown={this.onPointerDown} onDrop={this.onDrop} ref={this.createDropTarget} onContextMenu={this.specificContextMenu}>
+            <div className={`imageBox-cont-${interactive}`} onPointerDown={this.onPointerDown} onDrop={this.onDrop} ref={this.createDropTarget} onContextMenu={this.specificContextMenu}>
                 <img src={paths[Math.min(paths.length, this._photoIndex)]} style={{ objectFit: (this._photoIndex === 0 ? undefined : "contain") }} width={nativeWidth} alt="Image not found" ref={this._imgRef} onLoad={this.onLoad} />
                 {paths.length > 1 ? this.dots(paths) : (null)}
                 {this.lightbox(paths)}
-- 
cgit v1.2.3-70-g09d2

