aboutsummaryrefslogtreecommitdiff
path: root/src/views/nodes
diff options
context:
space:
mode:
Diffstat (limited to 'src/views/nodes')
-rw-r--r--src/views/nodes/DocumentView.tsx31
-rw-r--r--src/views/nodes/FieldTextBox.tsx10
-rw-r--r--src/views/nodes/FieldView.tsx17
-rw-r--r--src/views/nodes/ImageBox.tsx13
4 files changed, 29 insertions, 42 deletions
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 9e8df0d79..dd47d4455 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -11,6 +11,7 @@ import "./NodeView.scss"
import { DragManager } from "../../util/DragManager";
import { SelectionManager } from "../../util/SelectionManager";
import { Utils } from "../../Utils";
+import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "../collections/CollectionViewBase";
import { CollectionDockingView } from "../collections/CollectionDockingView";
import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
import { ContextMenu } from "../ContextMenu";
@@ -22,35 +23,9 @@ const JsxParser = require('react-jsx-parser').default;//TODO Why does this need
interface DocumentViewProps {
Document: Document;
- ContainingCollectionView: Opt<CollectionView>;
+ ContainingCollectionView: Opt<CollectionViewBase>;
ContainingDocumentView: Opt<DocumentView>;
}
-
-export interface CollectionViewProps {
- fieldKey: Key;
- Document: Document;
- ContainingDocumentView: Opt<DocumentView>;
-}
-
-//
-// these properties get assigned through the render() method of the DocumentView when it creates this node.
-// However, that only happens because the properties are "defined" in FieldTextBox's LayoutString() method
-//
-export interface DocumentFieldViewProps {
- fieldKey: Key;
- doc: Document;
- containingDocumentView: DocumentView
-}
-
-export const COLLECTION_BORDER_WIDTH = 2;
-
-interface CollectionView {
- addDocument: (doc: Document) => void;
- removeDocument: (doc: Document) => void;
- active: boolean;
- props: CollectionViewProps;
-}
-
@observer
export class DocumentContents extends React.Component<DocumentViewProps> {
@@ -325,7 +300,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
}
@action
fullScreenClicked = (e: React.MouseEvent): void => {
- CollectionDockingView.OpenFullScreen(this);
+ 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)
diff --git a/src/views/nodes/FieldTextBox.tsx b/src/views/nodes/FieldTextBox.tsx
index 1e03bf0f9..188b39a17 100644
--- a/src/views/nodes/FieldTextBox.tsx
+++ b/src/views/nodes/FieldTextBox.tsx
@@ -9,10 +9,10 @@ import { Document } from "../../fields/Document";
import { Opt } from "../../fields/Field";
import { Key } from "../../fields/Key";
import { SelectionManager } from "../../util/SelectionManager";
-import { DocumentView, DocumentFieldViewProps } from "./DocumentView";
import "./FieldTextBox.scss";
import React = require("react")
import { RichTextField } from "../../fields/RichTextField";
+import { FieldViewProps } from "./FieldView";
// FieldTextBox: Displays an editable plain text node that maps to a specified Key of a Document
@@ -31,14 +31,14 @@ import { RichTextField } from "../../fields/RichTextField";
// specified Key and assigns it to an HTML input node. When changes are made tot his node,
// this will edit the document and assign the new value to that field.
//
-export class FieldTextBox extends React.Component<DocumentFieldViewProps> {
+export class FieldTextBox extends React.Component<FieldViewProps> {
- public static LayoutString() { return "<FieldTextBox doc={Document} containingDocumentView={ContainingDocumentView} fieldKey={DataKey} />"; }
+ public static LayoutString() { return "<FieldTextBox doc={Document} documentViewContainer={ContainingDocumentView} fieldKey={DataKey} />"; }
private _ref: React.RefObject<HTMLDivElement>;
private _editorView: Opt<EditorView>;
private _reactionDisposer: Opt<IReactionDisposer>;
- constructor(props: DocumentFieldViewProps) {
+ constructor(props: FieldViewProps) {
super(props);
this._ref = React.createRef();
@@ -110,7 +110,7 @@ export class FieldTextBox extends React.Component<DocumentFieldViewProps> {
}
onPointerDown = (e: React.PointerEvent): void => {
let me = this;
- if (e.buttons === 1 && SelectionManager.IsSelected(me.props.containingDocumentView)) {
+ if (e.buttons === 1 && SelectionManager.IsSelected(me.props.documentViewContainer)) {
e.stopPropagation();
}
}
diff --git a/src/views/nodes/FieldView.tsx b/src/views/nodes/FieldView.tsx
index eec63256d..6c1cd956b 100644
--- a/src/views/nodes/FieldView.tsx
+++ b/src/views/nodes/FieldView.tsx
@@ -1,5 +1,6 @@
import React = require("react")
-import { DocumentFieldViewProps } from "./DocumentView";
+import { DocumentView } from "./DocumentView";
+import { Document } from "../../fields/Document";
import { observer } from "mobx-react";
import { computed } from "mobx";
import { Field, Opt } from "../../fields/Field";
@@ -9,9 +10,21 @@ import { RichTextField } from "../../fields/RichTextField";
import { FieldTextBox } from "./FieldTextBox";
import { ImageField } from "../../fields/ImageField";
import { ImageBox } from "./ImageBox";
+import { Key } from "../../fields/Key";
+
+//
+// these properties get assigned through the render() method of the DocumentView when it creates this node.
+// However, that only happens because the properties are "defined" in the markup for the field view.
+// See the LayoutString method on each field view : ImageBox, FieldTextBox, etc.
+//
+export interface FieldViewProps {
+ fieldKey: Key;
+ doc: Document;
+ documentViewContainer: DocumentView
+}
@observer
-export class FieldView extends React.Component<DocumentFieldViewProps> {
+export class FieldView extends React.Component<FieldViewProps> {
@computed
get field(): Opt<Field> {
const { doc, fieldKey } = this.props;
diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx
index 7577627e8..5137dbf38 100644
--- a/src/views/nodes/ImageBox.tsx
+++ b/src/views/nodes/ImageBox.tsx
@@ -2,26 +2,25 @@
import Lightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
import { SelectionManager } from "../../util/SelectionManager";
-import { DocumentFieldViewProps } from "./DocumentView";
import "./ImageBox.scss";
import React = require("react")
import { ImageField } from '../../fields/ImageField';
-import { NumberField } from '../../fields/NumberField';
+import { FieldViewProps } from './FieldView';
interface ImageBoxState {
photoIndex: number,
isOpen: boolean,
};
-export class ImageBox extends React.Component<DocumentFieldViewProps, ImageBoxState> {
+export class ImageBox extends React.Component<FieldViewProps, ImageBoxState> {
- public static LayoutString() { return "<ImageBox doc={Document} containingDocumentView={ContainingDocumentView} fieldKey={DataKey} />"; }
+ public static LayoutString() { return "<ImageBox doc={Document} documentViewContainer={ContainingDocumentView} fieldKey={DataKey} />"; }
private _ref: React.RefObject<HTMLDivElement>;
private _downX: number = 0;
private _downY: number = 0;
private _lastTap: number = 0;
- constructor(props: DocumentFieldViewProps) {
+ constructor(props: FieldViewProps) {
super(props);
this._ref = React.createRef();
@@ -39,7 +38,7 @@ export class ImageBox extends React.Component<DocumentFieldViewProps, ImageBoxSt
onPointerDown = (e: React.PointerEvent): void => {
if (Date.now() - this._lastTap < 300) {
- if (e.buttons === 1 && SelectionManager.IsSelected(this.props.containingDocumentView)) {
+ if (e.buttons === 1 && SelectionManager.IsSelected(this.props.documentViewContainer)) {
e.stopPropagation();
this._downX = e.clientX;
this._downY = e.clientY;
@@ -67,7 +66,7 @@ export class ImageBox extends React.Component<DocumentFieldViewProps, ImageBoxSt
const images = [path,];
var lightbox = () => {
const { photoIndex } = this.state;
- if (this.state.isOpen && SelectionManager.IsSelected(this.props.containingDocumentView)) {
+ if (this.state.isOpen && 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-03-03 11:13:39 +0000