aboutsummaryrefslogtreecommitdiff
path: root/src/views/nodes
diff options
context:
space:
mode:
Diffstat (limited to 'src/views/nodes')
-rw-r--r--src/views/nodes/CollectionFreeFormDocumentView.tsx222
-rw-r--r--src/views/nodes/DocumentView.tsx257
-rw-r--r--src/views/nodes/FieldTextBox.tsx6
-rw-r--r--src/views/nodes/FieldView.tsx4
-rw-r--r--src/views/nodes/ImageBox.tsx8
5 files changed, 256 insertions, 241 deletions
diff --git a/src/views/nodes/CollectionFreeFormDocumentView.tsx b/src/views/nodes/CollectionFreeFormDocumentView.tsx
new file mode 100644
index 000000000..78e3325ab
--- /dev/null
+++ b/src/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -0,0 +1,222 @@
+import { action, computed } from "mobx";
+import { observer } from "mobx-react";
+import { Key, KeyStore } from "../../fields/Key";
+import { NumberField } from "../../fields/NumberField";
+import { DragManager } from "../../util/DragManager";
+import { SelectionManager } from "../../util/SelectionManager";
+import { CollectionDockingView } from "../collections/CollectionDockingView";
+import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
+import { ContextMenu } from "../ContextMenu";
+import "./NodeView.scss";
+import React = require("react");
+import { DocumentView, DocumentViewProps } from "./DocumentView";
+
+
+@observer
+export class CollectionFreeFormDocumentView extends DocumentView {
+ private _contextMenuCanOpen = false;
+ private _downX: number = 0;
+ private _downY: number = 0;
+
+ constructor(props: DocumentViewProps) {
+ super(props);
+ }
+ get screenRect(): ClientRect | DOMRect {
+ if (this._mainCont.current) {
+ return this._mainCont.current.getBoundingClientRect();
+ }
+ return new DOMRect();
+ }
+
+ @computed
+ get x(): number {
+ return this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
+ }
+
+ @computed
+ get y(): number {
+ return this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0));
+ }
+
+ set x(x: number) {
+ this.props.Document.SetFieldValue(KeyStore.X, x, NumberField)
+ }
+
+ set y(y: number) {
+ this.props.Document.SetFieldValue(KeyStore.Y, y, NumberField)
+ }
+
+ @computed
+ get transform(): string {
+ return `translate(${this.x}px, ${this.y}px)`;
+ }
+
+ @computed
+ get width(): number {
+ return this.props.Document.GetFieldValue(KeyStore.Width, NumberField, Number(0));
+ }
+
+ set width(w: number) {
+ this.props.Document.SetFieldValue(KeyStore.Width, w, NumberField)
+ }
+
+ @computed
+ get height(): number {
+ return this.props.Document.GetFieldValue(KeyStore.Height, NumberField, Number(0));
+ }
+
+ set height(h: number) {
+ this.props.Document.SetFieldValue(KeyStore.Height, h, NumberField)
+ }
+
+ @computed
+ get zIndex(): number {
+ return this.props.Document.GetFieldValue(KeyStore.ZIndex, NumberField, Number(0));
+ }
+
+ set zIndex(h: number) {
+ this.props.Document.SetFieldValue(KeyStore.ZIndex, h, NumberField)
+ }
+
+ @action
+ dragComplete = (e: DragManager.DragCompleteEvent) => {
+ }
+
+ @computed
+ get active(): boolean {
+ return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined || this.props.ContainingCollectionView!.active;
+ }
+
+ @computed
+ get topMost(): boolean {
+ return this.props.ContainingCollectionView == undefined || this.props.ContainingCollectionView instanceof CollectionDockingView;
+ }
+
+ onPointerDown = (e: React.PointerEvent): void => {
+ this._downX = e.clientX;
+ this._downY = e.clientY;
+ var me = this;
+ if (e.shiftKey && e.buttons === 1) {
+ CollectionDockingView.StartOtherDrag(this._mainCont.current!, this.props.Document);
+ e.stopPropagation();
+ return;
+ }
+ this._contextMenuCanOpen = e.button == 2;
+ if (this.active && !e.isDefaultPrevented()) {
+ e.stopPropagation();
+ if (e.buttons === 2) {
+ e.preventDefault();
+ }
+ document.removeEventListener("pointermove", this.onPointerMove)
+ document.addEventListener("pointermove", this.onPointerMove);
+ document.removeEventListener("pointerup", this.onPointerUp)
+ document.addEventListener("pointerup", this.onPointerUp);
+ }
+ }
+
+ 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 rect = this.screenRect;
+ let dragData: { [id: string]: any } = {};
+ dragData["document"] = this;
+ dragData["xOffset"] = e.x - rect.left;
+ dragData["yOffset"] = e.y - rect.top;
+ DragManager.StartDrag(this._mainCont.current, dragData, {
+ handlers: {
+ dragComplete: this.dragComplete,
+ },
+ hideSource: true
+ })
+ }
+ }
+ e.stopPropagation();
+ e.preventDefault();
+ }
+
+ onPointerUp = (e: PointerEvent): void => {
+ document.removeEventListener("pointermove", this.onPointerMove)
+ document.removeEventListener("pointerup", this.onPointerUp)
+ e.stopPropagation();
+ if (Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) {
+ SelectionManager.SelectDoc(this, e.ctrlKey);
+ }
+ }
+
+ openRight = (e: React.MouseEvent): void => {
+ CollectionDockingView.AddRightSplit(this.props.Document);
+ }
+
+ deleteClicked = (e: React.MouseEvent): void => {
+ if (this.props.ContainingCollectionView instanceof CollectionFreeFormView) {
+ this.props.ContainingCollectionView.removeDocument(this.props.Document)
+ }
+ }
+ @action
+ fullScreenClicked = (e: React.MouseEvent): void => {
+ CollectionDockingView.OpenFullScreen(this.props.Document);
+ ContextMenu.Instance.clearItems();
+ ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked });
+ ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+ }
+ @action
+ closeFullScreenClicked = (e: React.MouseEvent): void => {
+ CollectionDockingView.CloseFullScreen();
+ ContextMenu.Instance.clearItems();
+ ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+ ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+ }
+
+ @action
+ onContextMenu = (e: React.MouseEvent): void => {
+ if (!SelectionManager.IsSelected(this)) {
+ return;
+ }
+ e.preventDefault()
+
+ if (!this._contextMenuCanOpen) {
+ return;
+ }
+
+ if (this.topMost) {
+ ContextMenu.Instance.clearItems()
+ ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+ ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+ }
+ else {
+ // DocumentViews should stop propogation of this event
+ e.stopPropagation();
+
+ ContextMenu.Instance.clearItems();
+ ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+ ContextMenu.Instance.addItem({ description: "Open Right", event: this.openRight })
+ ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
+ ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+ SelectionManager.SelectDoc(this, e.ctrlKey);
+ }
+ }
+
+ render() {
+ var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView;
+ return (
+ <div className="node" ref={this._mainCont} style={{
+ transform: freestyling ? this.transform : "",
+ width: freestyling ? this.width : "100%",
+ height: freestyling ? this.height : "100%",
+ position: freestyling ? "absolute" : "relative",
+ zIndex: freestyling ? this.zIndex : 0,
+ }}
+ onContextMenu={this.onContextMenu}
+ onPointerDown={this.onPointerDown}>
+
+ <DocumentView {...this.props} DocumentContentsView={this} />
+ </div>
+ );
+ }
+} \ No newline at end of file
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 3cc0f3bf6..fd5ffeb61 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -6,28 +6,24 @@ import { Key, KeyStore } from "../../fields/Key";
import { ListField } from "../../fields/ListField";
import { NumberField } from "../../fields/NumberField";
import { TextField } from "../../fields/TextField";
-import { DragManager } from "../../util/DragManager";
-import { SelectionManager } from "../../util/SelectionManager";
import { Utils } from "../../Utils";
import { CollectionDockingView } from "../collections/CollectionDockingView";
import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
import { CollectionSchemaView } from "../collections/CollectionSchemaView";
import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "../collections/CollectionViewBase";
-import { ContextMenu } from "../ContextMenu";
import { FieldTextBox } from "../nodes/FieldTextBox";
import { ImageBox } from "../nodes/ImageBox";
import "./NodeView.scss";
import React = require("react");
-import { baseKeymap } from "prosemirror-commands";
const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
-interface DocumentViewProps {
+export interface DocumentViewProps {
Document: Document;
ContainingCollectionView: Opt<CollectionViewBase>;
- ContainingDocumentContentsView: Opt<DocumentContentsView>;
+ DocumentContentsView: Opt<DocumentView>
}
@observer
-export class DocumentContentsView extends React.Component<DocumentViewProps> {
+export class DocumentView extends React.Component<DocumentViewProps> {
protected _mainCont = React.createRef<any>();
get MainContent() {
@@ -53,9 +49,9 @@ export class DocumentContentsView extends React.Component<DocumentViewProps> {
//
@computed
public get ScalingToScreenSpace(): number {
- if (this.props.ContainingDocumentContentsView != undefined) {
- let ss = this.props.ContainingDocumentContentsView.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
- return this.props.ContainingDocumentContentsView.ScalingToScreenSpace * ss;
+ if (this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView.props.DocumentContentsOfCollection != undefined) {
+ let ss = this.props.ContainingCollectionView.props.DocumentForCollection.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
+ return this.props.ContainingCollectionView.props.DocumentContentsOfCollection.ScalingToScreenSpace * ss;
}
return 1;
}
@@ -66,8 +62,8 @@ export class DocumentContentsView extends React.Component<DocumentViewProps> {
public TransformToLocalPoint(screenX: number, screenY: number) {
// if this collection view is nested within another collection view, then
// first transform the screen point into the parent collection's coordinate space.
- let { LocalX: parentX, LocalY: parentY } = this.props.ContainingDocumentContentsView != undefined ?
- this.props.ContainingDocumentContentsView!.TransformToLocalPoint(screenX, screenY) :
+ let { LocalX: parentX, LocalY: parentY } = this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView.props.DocumentContentsOfCollection != undefined ?
+ this.props.ContainingCollectionView.props.DocumentContentsOfCollection.TransformToLocalPoint(screenX, screenY) :
{ LocalX: screenX, LocalY: screenY };
let ContainerX: number = parentX - COLLECTION_BORDER_WIDTH;
let ContainerY: number = parentY - COLLECTION_BORDER_WIDTH;
@@ -115,7 +111,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps> {
// if this collection view is nested within another collection view, then
// first transform the local point into the parent collection's coordinate space.
- let containingDocView = this.props.ContainingDocumentContentsView;
+ let containingDocView = this.props.ContainingCollectionView != undefined ? this.props.ContainingCollectionView.props.DocumentContentsOfCollection : undefined;//.ContainingDocumentContentsView;
if (containingDocView != undefined) {
let ss = containingDocView.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
let panxx = containingDocView.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
@@ -126,13 +122,16 @@ export class DocumentContentsView extends React.Component<DocumentViewProps> {
}
return { ScreenX: parentX, ScreenY: parentY };
}
+
+
render() {
let doc = this.props.Document;
let bindings = { ...this.props } as any;
for (const key of this.layoutKeys) {
bindings[key.Name + "Key"] = key;
}
- bindings.ContainingDocumentContentsView = this;
+ if (this.props.DocumentContentsView == undefined)
+ bindings.DocumentContentsView = this;
for (const key of this.layoutFields) {
let field = doc.GetField(key);
if (field) {
@@ -140,224 +139,18 @@ export class DocumentContentsView extends React.Component<DocumentViewProps> {
}
}
return (
- //<div ref={this._mainCont}>
- <JsxParser ref={this._mainCont}
- components={{ FieldTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
- bindings={bindings}
- jsx={this.layout}
- showWarnings={true}
- onError={(test: any) => { console.log(test) }}
- />
- //</div>
- )
- }
-}
-
-@observer
-export class DocumentView extends DocumentContentsView {
- private _contextMenuCanOpen = false;
- private _downX: number = 0;
- private _downY: number = 0;
-
- constructor(props: DocumentViewProps) {
- super(props);
- }
- get screenRect(): ClientRect | DOMRect {
- if (this._mainCont.current) {
- return this._mainCont.current.getBoundingClientRect();
- }
- return new DOMRect();
- }
-
- @computed
- get x(): number {
- return this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
- }
-
- @computed
- get y(): number {
- return this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0));
- }
-
- set x(x: number) {
- this.props.Document.SetFieldValue(KeyStore.X, x, NumberField)
- }
-
- set y(y: number) {
- this.props.Document.SetFieldValue(KeyStore.Y, y, NumberField)
- }
-
- @computed
- get transform(): string {
- return `translate(${this.x}px, ${this.y}px)`;
- }
-
- @computed
- get width(): number {
- return this.props.Document.GetFieldValue(KeyStore.Width, NumberField, Number(0));
- }
-
- set width(w: number) {
- this.props.Document.SetFieldValue(KeyStore.Width, w, NumberField)
- }
-
- @computed
- get height(): number {
- return this.props.Document.GetFieldValue(KeyStore.Height, NumberField, Number(0));
- }
-
- set height(h: number) {
- this.props.Document.SetFieldValue(KeyStore.Height, h, NumberField)
- }
-
- @computed
- get zIndex(): number {
- return this.props.Document.GetFieldValue(KeyStore.ZIndex, NumberField, Number(0));
- }
-
- set zIndex(h: number) {
- this.props.Document.SetFieldValue(KeyStore.ZIndex, h, NumberField)
- }
-
- @action
- dragComplete = (e: DragManager.DragCompleteEvent) => {
- }
-
- @computed
- get active(): boolean {
- return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined || this.props.ContainingCollectionView!.active;
- }
-
- @computed
- get topMost(): boolean {
- return this.props.ContainingCollectionView == undefined || this.props.ContainingCollectionView instanceof CollectionDockingView;
- }
-
- onPointerDown = (e: React.PointerEvent): void => {
- this._downX = e.clientX;
- this._downY = e.clientY;
- var me = this;
- if (e.shiftKey && e.buttons === 1) {
- CollectionDockingView.StartOtherDrag(this._mainCont.current!, this.props.Document);
- e.stopPropagation();
- return;
- }
- this._contextMenuCanOpen = e.button == 2;
- if (this.active && !e.isDefaultPrevented()) {
- e.stopPropagation();
- if (e.buttons === 2) {
- e.preventDefault();
- }
- document.removeEventListener("pointermove", this.onPointerMove)
- document.addEventListener("pointermove", this.onPointerMove);
- document.removeEventListener("pointerup", this.onPointerUp)
- document.addEventListener("pointerup", this.onPointerUp);
- }
- }
-
- 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 rect = this.screenRect;
- let dragData: { [id: string]: any } = {};
- dragData["document"] = this;
- dragData["xOffset"] = e.x - rect.left;
- dragData["yOffset"] = e.y - rect.top;
- DragManager.StartDrag(this._mainCont.current, dragData, {
- handlers: {
- dragComplete: this.dragComplete,
- },
- hideSource: true
- })
- }
- }
- e.stopPropagation();
- e.preventDefault();
- }
-
- onPointerUp = (e: PointerEvent): void => {
- document.removeEventListener("pointermove", this.onPointerMove)
- document.removeEventListener("pointerup", this.onPointerUp)
- e.stopPropagation();
- if (Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) {
- SelectionManager.SelectDoc(this, e.ctrlKey);
- }
- }
-
- openRight = (e: React.MouseEvent): void => {
- CollectionDockingView.AddRightSplit(this.props.Document);
- }
-
- deleteClicked = (e: React.MouseEvent): void => {
- if (this.props.ContainingCollectionView instanceof CollectionFreeFormView) {
- this.props.ContainingCollectionView.removeDocument(this.props.Document)
- }
- }
- @action
- fullScreenClicked = (e: React.MouseEvent): void => {
- CollectionDockingView.OpenFullScreen(this.props.Document);
- ContextMenu.Instance.clearItems();
- ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked });
- ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
- }
- @action
- closeFullScreenClicked = (e: React.MouseEvent): void => {
- CollectionDockingView.CloseFullScreen();
- ContextMenu.Instance.clearItems();
- ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
- ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
- }
-
- @action
- onContextMenu = (e: React.MouseEvent): void => {
- if (!SelectionManager.IsSelected(this)) {
- return;
- }
- e.preventDefault()
-
- if (!this._contextMenuCanOpen) {
- return;
- }
-
- if (this.topMost) {
- ContextMenu.Instance.clearItems()
- ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
- ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
- }
- else {
- // DocumentViews should stop propogation of this event
- e.stopPropagation();
-
- ContextMenu.Instance.clearItems();
- ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
- ContextMenu.Instance.addItem({ description: "Open Right", event: this.openRight })
- ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
- ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
- SelectionManager.SelectDoc(this, e.ctrlKey);
- }
- }
-
- render() {
- var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView;
- return (
<div className="node" ref={this._mainCont} style={{
- transform: freestyling ? this.transform : "",
- width: freestyling ? this.width : "100%",
- height: freestyling ? this.height : "100%",
- position: freestyling ? "absolute" : "relative",
- zIndex: freestyling ? this.zIndex : 0,
- }}
- onContextMenu={this.onContextMenu}
- onPointerDown={this.onPointerDown}>
-
- <DocumentContentsView {...this.props} />
+ width: "100%",
+ height: "100%",
+ }}>
+ <JsxParser
+ components={{ FieldTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
+ bindings={bindings}
+ jsx={this.layout}
+ showWarnings={true}
+ onError={(test: any) => { console.log(test) }}
+ />
</div>
- );
+ )
}
-} \ No newline at end of file
+}
diff --git a/src/views/nodes/FieldTextBox.tsx b/src/views/nodes/FieldTextBox.tsx
index 0a8706517..0e884a031 100644
--- a/src/views/nodes/FieldTextBox.tsx
+++ b/src/views/nodes/FieldTextBox.tsx
@@ -13,7 +13,7 @@ import "./FieldTextBox.scss";
import React = require("react")
import { RichTextField } from "../../fields/RichTextField";
import { FieldViewProps } from "./FieldView";
-import { DocumentView } from "./DocumentView";
+import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView";
// FieldTextBox: Displays an editable plain text node that maps to a specified Key of a Document
@@ -34,7 +34,7 @@ import { DocumentView } from "./DocumentView";
//
export class FieldTextBox extends React.Component<FieldViewProps> {
- public static LayoutString() { return "<FieldTextBox doc={Document} documentViewContainer={ContainingDocumentView} fieldKey={DataKey} />"; }
+ public static LayoutString() { return "<FieldTextBox doc={Document} documentViewContainer={DocumentContentsView} fieldKey={DataKey} />"; }
private _ref: React.RefObject<HTMLDivElement>;
private _editorView: Opt<EditorView>;
private _reactionDisposer: Opt<IReactionDisposer>;
@@ -111,7 +111,7 @@ export class FieldTextBox extends React.Component<FieldViewProps> {
}
onPointerDown = (e: React.PointerEvent): void => {
let me = this;
- if (e.buttons === 1 && me.props.documentViewContainer instanceof DocumentView && SelectionManager.IsSelected(me.props.documentViewContainer)) {
+ if (e.buttons === 1 && me.props.documentViewContainer instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(me.props.documentViewContainer)) {
e.stopPropagation();
}
}
diff --git a/src/views/nodes/FieldView.tsx b/src/views/nodes/FieldView.tsx
index b7a1d0526..9f0404dbf 100644
--- a/src/views/nodes/FieldView.tsx
+++ b/src/views/nodes/FieldView.tsx
@@ -1,5 +1,4 @@
import React = require("react")
-import { DocumentView, DocumentContentsView } from "./DocumentView";
import { Document } from "../../fields/Document";
import { observer } from "mobx-react";
import { computed } from "mobx";
@@ -11,6 +10,7 @@ import { FieldTextBox } from "./FieldTextBox";
import { ImageField } from "../../fields/ImageField";
import { ImageBox } from "./ImageBox";
import { Key } from "../../fields/Key";
+import { DocumentView } from "./DocumentView";
//
// these properties get assigned through the render() method of the DocumentView when it creates this node.
@@ -20,7 +20,7 @@ import { Key } from "../../fields/Key";
export interface FieldViewProps {
fieldKey: Key;
doc: Document;
- documentViewContainer: DocumentContentsView
+ documentViewContainer: DocumentView
}
@observer
diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx
index d2f567423..a4254ce39 100644
--- a/src/views/nodes/ImageBox.tsx
+++ b/src/views/nodes/ImageBox.tsx
@@ -6,7 +6,7 @@ import "./ImageBox.scss";
import React = require("react")
import { ImageField } from '../../fields/ImageField';
import { FieldViewProps } from './FieldView';
-import { DocumentView } from './DocumentView';
+import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView';
interface ImageBoxState {
photoIndex: number,
@@ -15,7 +15,7 @@ interface ImageBoxState {
export class ImageBox extends React.Component<FieldViewProps, ImageBoxState> {
- public static LayoutString() { return "<ImageBox doc={Document} documentViewContainer={ContainingDocumentView} fieldKey={DataKey} />"; }
+ public static LayoutString() { return "<ImageBox doc={Document} documentViewContainer={DocumentContentsView} fieldKey={DataKey} />"; }
private _ref: React.RefObject<HTMLDivElement>;
private _downX: number = 0;
private _downY: number = 0;
@@ -39,7 +39,7 @@ export class ImageBox extends React.Component<FieldViewProps, ImageBoxState> {
onPointerDown = (e: React.PointerEvent): void => {
if (Date.now() - this._lastTap < 300) {
- if (e.buttons === 1 && this.props.documentViewContainer instanceof DocumentView && SelectionManager.IsSelected(this.props.documentViewContainer)) {
+ if (e.buttons === 1 && this.props.documentViewContainer instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.documentViewContainer)) {
e.stopPropagation();
this._downX = e.clientX;
this._downY = e.clientY;
@@ -67,7 +67,7 @@ export class ImageBox extends React.Component<FieldViewProps, ImageBoxState> {
const images = [path,];
var lightbox = () => {
const { photoIndex } = this.state;
- if (this.state.isOpen && this.props.documentViewContainer instanceof DocumentView && SelectionManager.IsSelected(this.props.documentViewContainer)) {
+ if (this.state.isOpen && this.props.documentViewContainer instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.documentViewContainer)) {
return (<Lightbox
mainSrc={images[photoIndex]}
nextSrc={photoIndex + 1 < images.length ? images[(photoIndex + 1) % images.length] : undefined}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-02-24 20:35:48 +0000