diff options
Diffstat (limited to 'src/client')
| -rw-r--r-- | src/client/util/jsx-decl.d.ts | 1 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionFreeFormView.tsx | 62 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 70 |
3 files changed, 85 insertions, 48 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 a94539312..5c0eab392 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -17,7 +17,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"; @@ -252,6 +252,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() { @@ -261,18 +276,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; @@ -281,24 +285,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 4b50e40a3..f7bc751b7 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -75,6 +75,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>(); @@ -274,26 +318,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); @@ -317,8 +341,12 @@ export class DocumentView extends React.Component<DocumentViewProps> { }} onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown} > +<<<<<<< HEAD + <DocumentContents {...this.props} isSelected={this.isSelected} select={this.select} layoutKey={KeyStore.Layout} /> +======= <DocumentContentsView {...this.getProps} /> - </div> +>>>>>>> 914114aaffbbd492f68c5e580acf6a28f43dc2c7 + </div > ) } }
\ No newline at end of file |
