aboutsummaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
Diffstat (limited to 'src/client')
-rw-r--r--src/client/util/jsx-decl.d.ts1
-rw-r--r--src/client/views/collections/CollectionFreeFormView.tsx62
-rw-r--r--src/client/views/nodes/DocumentView.tsx81
3 files changed, 94 insertions, 50 deletions
diff --git a/src/client/util/jsx-decl.d.ts b/src/client/util/jsx-decl.d.ts
new file mode 100644
index 000000000..532f06178
--- /dev/null
+++ b/src/client/util/jsx-decl.d.ts
@@ -0,0 +1 @@
+declare module 'react-jsx-parser';
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 9dc1ae847..988c9941f 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -16,7 +16,7 @@ import { CollectionView } from "../collections/CollectionView";
import { InkingCanvas } from "../InkingCanvas";
import { AudioBox } from "../nodes/AudioBox";
import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
-import { DocumentView } from "../nodes/DocumentView";
+import { DocumentView, DocumentViewProps, DocumentContents } from "../nodes/DocumentView";
import { FormattedTextBox } from "../nodes/FormattedTextBox";
import { ImageBox } from "../nodes/ImageBox";
import { KeyValueBox } from "../nodes/KeyValueBox";
@@ -250,6 +250,21 @@ export class CollectionFreeFormView extends CollectionViewBase {
this.props.focus(this.props.Document);
}
+ getDocumentViewProps(document: Document): DocumentViewProps {
+ return {
+ Document: document,
+ AddDocument: this.props.addDocument,
+ RemoveDocument: this.props.removeDocument,
+ ScreenToLocalTransform: this.getTransform,
+ isTopMost: false,
+ SelectOnLoad: document.Id == this._selectOnLoaded,
+ PanelWidth: document.Width,
+ PanelHeight: document.Height,
+ ContentScaling: this.noScaling,
+ ContainingCollectionView: this.props.CollectionView,
+ focus: this.focusDocument
+ }
+ }
@computed
get views() {
@@ -259,18 +274,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
return lvalue.Data.map(doc => {
var page = doc.GetNumber(KeyStore.Page, 0);
return (page != curPage && page != 0) ? (null) :
- (<CollectionFreeFormDocumentView key={doc.Id} Document={doc}
- AddDocument={this.props.addDocument}
- RemoveDocument={this.props.removeDocument}
- ScreenToLocalTransform={this.getTransform}
- isTopMost={false}
- SelectOnLoad={doc.Id === this._selectOnLoaded}
- ContentScaling={this.noScaling}
- PanelWidth={doc.Width}
- PanelHeight={doc.Height}
- ContainingCollectionView={this.props.CollectionView}
- focus={this.focusDocument}
- />);
+ (<CollectionFreeFormDocumentView key={doc.Id} {...this.getDocumentViewProps(doc)} />);
})
}
return null;
@@ -279,24 +283,28 @@ export class CollectionFreeFormView extends CollectionViewBase {
@computed
get backgroundView() {
return !this.backgroundLayout ? (null) :
- (<JsxParser
- components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, CollectionVideoView, WebBox, KeyValueBox, PDFBox, VideoBox, AudioBox }}
- bindings={this.props.bindings}
- jsx={this.backgroundLayout}
- showWarnings={true}
- onError={(test: any) => console.log(test)}
- />);
+ (<DocumentContents {...this.getDocumentViewProps(this.props.Document)}
+ layoutKey={KeyStore.BackgroundLayout} isSelected={() => false} select={() => { }} />);
+ // (<JsxParser
+ // components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, CollectionVideoView, WebBox, KeyValueBox, PDFBox, VideoBox, AudioBox }}
+ // bindings={this.props.bindings}
+ // jsx={this.backgroundLayout}
+ // showWarnings={true}
+ // onError={(test: any) => console.log(test)}
+ // />);
}
@computed
get overlayView() {
return !this.overlayLayout ? (null) :
- (<JsxParser
- components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, CollectionVideoView, WebBox, KeyValueBox, PDFBox, VideoBox, AudioBox }}
- bindings={this.props.bindings}
- jsx={this.overlayLayout}
- showWarnings={true}
- onError={(test: any) => console.log(test)}
- />);
+ (<DocumentContents {...this.getDocumentViewProps(this.props.Document)}
+ layoutKey={KeyStore.OverlayLayout} isSelected={() => false} select={() => { }} />);
+ // (<JsxParser
+ // components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, CollectionVideoView, WebBox, KeyValueBox, PDFBox, VideoBox, AudioBox }}
+ // bindings={this.props.bindings}
+ // jsx={this.overlayLayout}
+ // showWarnings={true}
+ // onError={(test: any) => console.log(test)}
+ // />);
}
getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).translate(-this.centeringShiftX, -this.centeringShiftY).transform(this.getLocalTransform())
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 7a43c34d0..76127a7f3 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -14,10 +14,22 @@ import { Transform } from "../../util/Transform";
import { CollectionDockingView } from "../collections/CollectionDockingView";
import { CollectionView, CollectionViewType } from "../collections/CollectionView";
import { ContextMenu } from "../ContextMenu";
+import { FormattedTextBox } from "../nodes/FormattedTextBox"
+import { ImageBox } from "../nodes/ImageBox";
+import { CollectionFreeFormView } from "../collections/CollectionFreeFormView"
+import { PDFBox } from "../nodes/PDFBox";
+import { WebBox } from "../nodes/WebBox"
+import { CollectionSchemaView } from "../collections/CollectionSchemaView"
+import { AudioBox } from "../nodes/AudioBox";
+import { VideoBox } from "../nodes/VideoBox";
+import { CollectionPDFView } from "../collections/CollectionPDFView"
+import { CollectionVideoView } from "../collections/CollectionVideoView"
+import { KeyValueBox } from "../nodes/KeyValueBox"
import "./DocumentView.scss";
import React = require("react");
import { DocumentContentsView } from "./DocumentContentsView";
import { Utils } from "../../../Utils";
+import { faUserPlus } from "@fortawesome/free-solid-svg-icons";
const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
@@ -76,6 +88,50 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
return args;
}
+interface JsxBindings {
+ Document: Document;
+ isSelected: () => boolean;
+ select: (isCtrlPressed: boolean) => void;
+ isTopMost: boolean;
+ SelectOnLoad: boolean;
+ [prop: string]: any;
+}
+
+@observer
+export class DocumentContents extends React.Component<DocumentViewProps & {
+ isSelected: () => boolean,
+ select: (ctrl: boolean) => void,
+ layoutKey: Key
+}> {
+ @computed get layout(): string { return this.props.Document.GetText(this.props.layoutKey, "<p>Error loading layout data</p>"); }
+ @computed get layoutKeys(): Key[] { return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array<Key>()); }
+ @computed get layoutFields(): Key[] { return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array<Key>()); }
+
+ CreateBindings(): JsxBindings {
+ let bindings: JsxBindings = {
+ ...this.props,
+ };
+ for (const key of this.layoutKeys) {
+ bindings[key.Name + "Key"] = key; // this maps string values of the form <keyname>Key to an actual key Kestore.keyname e.g, "DataKey" => KeyStore.Data
+ }
+ for (const key of this.layoutFields) {
+ let field = this.props.Document.Get(key);
+ bindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field;
+ }
+ return bindings;
+ }
+
+ render() {
+ return <JsxParser
+ components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, CollectionVideoView, WebBox, KeyValueBox, PDFBox, VideoBox, AudioBox }}
+ bindings={this.CreateBindings()}
+ jsx={this.layout}
+ showWarnings={true}
+ onError={(test: any) => { console.log(test) }}
+ />
+ }
+}
+
@observer
export class DocumentView extends React.Component<DocumentViewProps> {
private _mainCont = React.createRef<HTMLDivElement>();
@@ -298,26 +354,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
SelectionManager.SelectDoc(this, ctrlPressed)
}
- @computed
- get getProps() {
- let bindings: any = {
- ...this.props,
- isSelected: this.isSelected,
- select: this.select,
- layout: this.layout
- };
- for (const key of this.layoutKeys) {
- bindings[key.Name + "Key"] = key; // this maps string values of the form <keyname>Key to an actual key Kestore.keyname e.g, "DataKey" => KeyStore.Data
- }
- for (const key of this.layoutFields) {
- let field = this.props.Document.Get(key);
- bindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field;
- }
- bindings.bindings = bindings;
-
- return bindings
- }
-
render() {
if (!this.props.Document) {
return (null);
@@ -341,9 +377,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
}}
onDrop={this.onDrop}
onContextMenu={this.onContextMenu}
- onPointerDown={this.onPointerDown}
- onPointerUp={this.stopPropogation} >
- <DocumentContentsView {...this.getProps} />
+ onPointerDown={this.onPointerDown} >
+ <DocumentContents {...this.props} isSelected={this.isSelected} select={this.select} layoutKey={KeyStore.Layout} />
</div>
)
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-09 13:31:53 +0000