aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/DocumentView.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/DocumentView.tsx')
-rw-r--r--src/client/views/nodes/DocumentView.tsx137
1 files changed, 63 insertions, 74 deletions
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index a14239e94..ce722480f 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -12,14 +12,17 @@ import { CollectionDockingView } from "../collections/CollectionDockingView";
import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
import { CollectionSchemaView } from "../collections/CollectionSchemaView";
import { CollectionView, CollectionViewType } from "../collections/CollectionView";
-import { WebView } from "./WebView";
import { ContextMenu } from "../ContextMenu";
import { FormattedTextBox } from "../nodes/FormattedTextBox";
import { ImageBox } from "../nodes/ImageBox";
+import { Documents } from "../../documents/Documents"
+import { KeyValueBox } from "./KeyValueBox"
+import { WebBox } from "../nodes/WebBox";
import "./DocumentView.scss";
import React = require("react");
const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
+
export interface DocumentViewProps {
ContainingCollectionView: Opt<CollectionView>;
Document: Document;
@@ -30,6 +33,8 @@ export interface DocumentViewProps {
ContentScaling: () => number;
PanelWidth: () => number;
PanelHeight: () => number;
+ focus: (doc: Document) => void;
+ SelectOnLoad: boolean;
}
export interface JsxArgs extends DocumentViewProps {
Keys: { [name: string]: Key }
@@ -77,7 +82,6 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
@observer 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;
@computed get active(): boolean {
@@ -100,10 +104,9 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
this._downX = e.clientX;
this._downY = e.clientY;
if (e.shiftKey && e.buttons === 1) {
- CollectionDockingView.Instance.StartOtherDrag(this._mainCont.current!, this.props.Document);
+ CollectionDockingView.Instance.StartOtherDrag(this.props.Document, e);
e.stopPropagation();
} else {
- this._contextMenuCanOpen = true;
if (this.active && !e.isDefaultPrevented()) {
e.stopPropagation();
if (e.buttons === 2) {
@@ -118,31 +121,23 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
}
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;
+ document.removeEventListener("pointermove", this.onPointerMove)
+ document.removeEventListener("pointerup", this.onPointerUp)
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
- }
- = {}
- ;
+ const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+ let dragData: { [id: string]: any } = {};
dragData["documentView"] = this;
dragData["xOffset"] = e.x - left;
dragData["yOffset"] = e.y - top;
DragManager.StartDrag(this._mainCont.current, dragData, {
handlers: {
- dragComplete: action((e: DragManager.DragCompleteEvent) => { }
- ),
- }
- , hideSource: true
- }
- )
+ dragComplete: action(() => { }),
+ },
+ hideSource: true
+ })
}
}
e.stopPropagation();
@@ -156,11 +151,18 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
SelectionManager.SelectDoc(this, e.ctrlKey);
}
}
- deleteClicked = (e: React.MouseEvent): void => {
+
+ deleteClicked = (): void => {
if (this.props.RemoveDocument) {
this.props.RemoveDocument(this.props.Document);
}
}
+
+ fieldsClicked = (e: React.MouseEvent): void => {
+ if (this.props.AddDocument) {
+ this.props.AddDocument(Documents.KVPDocument(this.props.Document));
+ }
+ }
fullScreenClicked = (e: React.MouseEvent): void => {
CollectionDockingView.Instance.OpenFullScreen(this.props.Document);
ContextMenu.Instance.clearItems();
@@ -170,6 +172,7 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
);
ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
}
+
closeFullScreenClicked = (e: React.MouseEvent): void => {
CollectionDockingView.Instance.CloseFullScreen();
ContextMenu.Instance.clearItems();
@@ -178,65 +181,50 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
})
ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
}
- @action onContextMenu = (e: React.MouseEvent): void => {
- e.preventDefault()
+
+ @action
+ onContextMenu = (e: React.MouseEvent): void => {
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;
}
- if (this.topMost) {
- ContextMenu.Instance.addItem({
- description: "Full Screen", event: this.fullScreenClicked
- })
- ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
- }
- else {
+ e.preventDefault()
+
+ ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+ ContextMenu.Instance.addItem({ description: "Fields", event: this.fieldsClicked })
+ ContextMenu.Instance.addItem({ description: "Center", event: () => this.props.focus(this.props.Document) })
+ ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) })
+ //ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
+ ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+ if (!this.topMost) {
// DocumentViews should stop propagation of this event
- 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: "Delete", event: this.deleteClicked
- }
- )
- ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
- SelectionManager.SelectDoc(this, e.ctrlKey);
+ e.stopPropagation();
}
+
+ ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
+ ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+ SelectionManager.SelectDoc(this, e.ctrlKey);
}
@computed get mainContent() {
- var val = this.props.Document.Id;
- return <JsxParser components={
- {
- FormattedTextBox,
- ImageBox,
- CollectionFreeFormView,
- CollectionDockingView,
- CollectionSchemaView,
- CollectionView,
- WebView
- }
- }
- bindings={
- this._documentBindings
- }
- jsx={
- this.layout
- }
- showWarnings={
- true
- }
- onError={
- (test: any) => {
- console.log(test)
- }
- }
+ return <JsxParser
+ components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox }}
+ bindings={this._documentBindings}
+ jsx={this.layout}
+ showWarnings={true}
+ onError={(test: any) => { console.log(test) }}
/>
}
+
+ isSelected = () => {
+ return SelectionManager.IsSelected(this);
+ }
+
+ select = (ctrlPressed: boolean) => {
+ SelectionManager.SelectDoc(this, ctrlPressed)
+ }
+
render() {
if (!this.props.Document) return <div></div>
let lkeys = this.props.Document.GetT(KeyStore.LayoutKeys, ListField);
@@ -245,9 +233,10 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
}
this._documentBindings = {
...this.props,
- isSelected: () => SelectionManager.IsSelected(this), select: (ctrlPressed: boolean) => SelectionManager.SelectDoc(this, ctrlPressed)
- }
- ;
+ isSelected: this.isSelected,
+ select: this.select,
+ focus: this.props.focus
+ };
for (const key of this.layoutKeys) {
this._documentBindings[key.Name + "Key"] = key; // this maps string values of the form <keyname>Key to an actual key Kestore.keyname e.g, "DataKey" => KeyStore.Data
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-05 20:41:15 +0000