can toggle base layout

2 files changed, 32 insertions, 18 deletions

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 9fe3cdc75..231d85050 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -24,6 +24,7 @@ export class DocumentDecorations extends React.Component {
     private _linkButton = React.createRef<HTMLDivElement>();
     @observable private _hidden = false;
     @observable private _templatesActive: boolean = false;
+    @observable private _showBase: boolean = true;
 
     constructor(props: Readonly<{}>) {
         super(props)
@@ -204,6 +205,13 @@ export class DocumentDecorations extends React.Component {
     }
 
     @action
+    toggleBase = (event: React.ChangeEvent<HTMLInputElement>): void => {
+        let view = SelectionManager.SelectedDocuments()[0];
+        view.toggleBase(event.target.checked);
+        this._showBase = !this._showBase;
+    }
+
+    @action
     toggleTemplateActivity = (): void => {
         this._templatesActive = !this._templatesActive;
     }
@@ -236,6 +244,7 @@ export class DocumentDecorations extends React.Component {
 
         let templateMenu = !this._templatesActive ? (null) : (
             <ul id="template-list">
+                <li><input type="checkbox" onChange={(event) => this.toggleBase(event)} checked={this._showBase} />Base layout</li>
                 {Array.from(Object.values(Templates)).map(template => {
                     return (
                         <li>
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index e5c6859f8..2ede6d28e 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -95,7 +95,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     private _downY: number = 0;
     private _reactionDisposer: Opt<IReactionDisposer>;
     private _templates: Set<Template> = new Set<Template>();
-    private _basicLayout: string = this.props.Document.GetText(KeyStore.Layout, "<p>Error loading layout data</p>");
+    private _useBase: boolean = true;
+    private _baseLayout: string = this.props.Document.GetText(KeyStore.Layout, "<p>Error loading layout data</p>");
     @computed get active(): boolean { return SelectionManager.IsSelected(this) || !this.props.ContainingCollectionView || this.props.ContainingCollectionView.active(); }
     @computed get topMost(): boolean { return !this.props.ContainingCollectionView || this.props.ContainingCollectionView.collectionViewType == CollectionViewType.Docking; }
     @computed get layout(): string { return this.props.Document.GetText(KeyStore.Layout, "<p>Error loading layout data</p>"); }
@@ -275,30 +276,34 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         }
     }
 
-    @action
-    addTemplate = (template: Template) => {
-        this._templates.add(template);
-
-        // TODO: apply templates to original layout
-        this.props.Document.SetText(KeyStore.Layout, this._basicLayout);
+    updateLayout = (): void => {
+        let base = this._useBase ? this._baseLayout : "<div style='margin: auto; width: 100%; height: 100%; border: 1px solid black'></div>";
+        // this.props.Document.SetText(KeyStore.Layout, base);
         this._templates.forEach(temp => {
             let text = temp.Layout;
-            let oldLayout = this.props.Document.GetText(KeyStore.Layout, "");
-            let layout = text.replace("{layout}", oldLayout);
-            this.props.Document.SetText(KeyStore.Layout, layout);
+            base = text.replace("{layout}", base);
+            // let oldLayout = this.props.Document.GetText(KeyStore.Layout, "");
+            // let layout = text.replace("{layout}", oldLayout);
+            // this.props.Document.SetText(KeyStore.Layout, layout);
         });
+        this.props.Document.SetText(KeyStore.Layout, base);
+    }
+
+    @action
+    toggleBase = (useBase: boolean) => {
+        this._useBase = useBase;
+        this.updateLayout();
+    }
+
+    @action
+    addTemplate = (template: Template) => {
+        this._templates.add(template);
+        this.updateLayout();
     }
 
     @action removeTemplate = (template: Template) => {
         this._templates.delete(template);
-
-        this.props.Document.SetText(KeyStore.Layout, this._basicLayout);
-        this._templates.forEach(temp => {
-            let text = temp.Layout;
-            let oldLayout = this.props.Document.GetText(KeyStore.Layout, "");
-            let layout = text.replace("{layout}", oldLayout);
-            this.props.Document.SetText(KeyStore.Layout, layout);
-        });
+        this.updateLayout();
     }
 
     @action