diff options
| -rw-r--r-- | src/client/documents/Documents.ts | 7 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionFreeFormView.tsx | 24 | ||||
| -rw-r--r-- | src/fields/KeyStore.ts | 1 |
3 files changed, 32 insertions, 0 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 6ec5aa711..e0d44e535 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -112,6 +112,12 @@ export namespace Documents { + FormattedTextBox.LayoutString("CaptionKey") + `</div> </div>` }; + function OverlayLayoutString() { + return `<div style="position:absolute; height:100%; width:100%"> + <div style="position:absolute; max-height:10%; width:100%; min-height:10%; overflow:scroll;text-align:center;bottom:0;">` + + FormattedTextBox.LayoutString("CaptionKey") + + `</div> + </div>` }; export function ImageDocument(url: string, options: DocumentOptions = {}): Document { let doc = GetImagePrototype().MakeDelegate(); @@ -119,6 +125,7 @@ export namespace Documents { doc.Set(KeyStore.Data, new ImageField(new URL(url))); doc.Set(KeyStore.Caption, new TextField("my caption...")); doc.Set(KeyStore.BackgroundLayout, new TextField(CaptionLayoutString())); + //doc.Set(KeyStore.OverlayLayout, new TextField(OverlayLayoutString())); doc.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data, KeyStore.Annotations, KeyStore.Caption])); let annotation = Documents.TextDocument({ title: "hello" }); diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 4799eda97..ee0f3730d 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -161,6 +161,12 @@ export class CollectionFreeFormView extends CollectionViewBase { return field.Data; } } + @computed get overlayLayout(): string | undefined { + let field = this.props.Document.GetT(KeyStore.OverlayLayout, TextField); + if (field && field !== "<Waiting>") { + return field.Data; + } + } @computed get views() { const { fieldKey, Document } = this.props; @@ -192,6 +198,17 @@ export class CollectionFreeFormView extends CollectionViewBase { onError={(test: any) => console.log(test)} />); } + @computed + get overlayView() { + return !this.overlayLayout ? (null) : + (<JsxParser + components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView }} + 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).transform(this.getLocalTransform()) getLocalTransform = (): Transform => Transform.Identity.translate(-this.panX, -this.panY).scale(1 / this.scale); noScaling = () => 1; @@ -199,6 +216,12 @@ export class CollectionFreeFormView extends CollectionViewBase { render() { const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0); const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0); + var overlay = this.overlayView ? + <div style={{ position: "absolute", width: "100%", height: "100%" }}> + {this.overlayView} + </div> + : + (null); return ( <div className="collectionfreeformview-container" onPointerDown={this.onPointerDown} @@ -214,6 +237,7 @@ export class CollectionFreeFormView extends CollectionViewBase { {this.backgroundView} {this.views} </div> + {overlay} </div> ); } diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts index 42e3f6b58..78ed09efd 100644 --- a/src/fields/KeyStore.ts +++ b/src/fields/KeyStore.ts @@ -19,6 +19,7 @@ export namespace KeyStore { export const ViewType = new Key("ViewType"); export const Layout = new Key("Layout"); export const BackgroundLayout = new Key("BackgroundLayout"); + export const OverlayLayout = new Key("OverlayLayout"); export const LayoutKeys = new Key("LayoutKeys"); export const LayoutFields = new Key("LayoutFields"); export const ColumnsKey = new Key("SchemaColumns"); |