1 files changed, 21 insertions, 15 deletions

diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index 40c687b7e..9795febbe 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -54,16 +54,12 @@ export class KeyValueBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @observable private rows: KeyValuePair[] = [];
     @observable _splitPercentage = 50;
 
-    get fieldDocToLayout() {
-        return DocCast(this.Document);
-    }
-
     @action
     onEnterKey = (e: React.KeyboardEvent): void => {
         if (e.key === 'Enter') {
             e.stopPropagation();
-            if (this._keyInput.current?.value && this._valInput.current?.value && this.fieldDocToLayout) {
-                if (KeyValueBox.SetField(this.fieldDocToLayout, this._keyInput.current.value, this._valInput.current.value)) {
+            if (this._keyInput.current?.value && this._valInput.current?.value && this._props.Document) {
+                if (KeyValueBox.SetField(this._props.Document, this._keyInput.current.value, this._valInput.current.value)) {
                     this._keyInput.current.value = '';
                     this._valInput.current.value = '';
                     document.body.focus();
@@ -114,7 +110,7 @@ export class KeyValueBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     if (key) target[key] = script.originalScript;
                     return false;
                 }
-                field === undefined && (field = res.result instanceof Array ? new List<FieldType>(res.result) : (typeof res.result === 'function' ? res.result.name : res.result as FieldType));
+                field === undefined && (field = res.result instanceof Array ? new List<FieldType>(res.result) : typeof res.result === 'function' ? res.result.name : (res.result as FieldType));
             }
         }
         if (!key) return false;
@@ -141,7 +137,7 @@ export class KeyValueBox extends ViewBoxBaseComponent<FieldViewProps>() {
     rowHeight = () => 30;
 
     @computed get createTable() {
-        const doc = this.fieldDocToLayout;
+        const doc = this._props.Document;
         if (!doc) {
             return (
                 <tr>
@@ -149,25 +145,35 @@ export class KeyValueBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 </tr>
             );
         }
-        const realDoc = doc;
 
         const ids: { [key: string]: string } = {};
         const protos = Doc.GetAllPrototypes(doc);
         protos.forEach(proto => {
             Object.keys(proto).forEach(key => {
-                if (!(key in ids) && realDoc[key] !== ComputedField.undefined) {
+                if (!(key in ids) && doc[key] !== ComputedField.undefined) {
                     ids[key] = key;
                 }
             });
         });
 
+        const layoutProtos = Doc.GetAllPrototypes(this.layoutDoc);
+        layoutProtos.forEach(proto => {
+            Object.keys(proto)
+                .map(key => '_' + key)
+                .forEach(key => {
+                    if (!(key.replace(/^_/, '') in ids) && doc[key] !== ComputedField.undefined) {
+                        ids[key] = key;
+                    }
+                });
+        });
+
         const rows: JSX.Element[] = [];
         let i = 0;
         const keys = Object.keys(ids).slice();
         // for (const key of [...keys.filter(id => id !== 'layout' && !id.includes('_')).sort(), ...keys.filter(id => id === 'layout' || id.includes('_')).sort()]) {
         const sortedKeys = keys.sort((a: string, b: string) => {
-            const a_ = a.split('_')[0];
-            const b_ = b.split('_')[0];
+            const a_ = a.replace(/^_/, '').split('_')[0];
+            const b_ = b.replace(/^_/, '').split('_')[0];
             if (a_ < b_) return -1;
             if (a_ > b_) return 1;
             if (a === a_) return -1;
@@ -177,7 +183,7 @@ export class KeyValueBox extends ViewBoxBaseComponent<FieldViewProps>() {
         sortedKeys.forEach(key => {
             rows.push(
                 <KeyValuePair
-                    doc={realDoc}
+                    doc={doc}
                     addDocTab={this._props.addDocTab}
                     PanelWidth={this._props.PanelWidth}
                     PanelHeight={this.rowHeight}
@@ -299,8 +305,8 @@ export class KeyValueBox extends ViewBoxBaseComponent<FieldViewProps>() {
         openItems.push({
             description: 'Default Perspective',
             event: () => {
-                this._props.addDocTab(this.Document, OpenWhere.close);
-                this._props.addDocTab(this.fieldDocToLayout, OpenWhere.addRight);
+                this._props.addDocTab(this._props.Document, OpenWhere.close);
+                this._props.addDocTab(this._props.Document, OpenWhere.addRight);
             },
             icon: 'image',
         });