merge

2 files changed, 90 insertions, 68 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index f73c037f4..190e4ff2a 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -1,9 +1,8 @@
 import React = require('react');
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, observable, ObservableMap, observe, trace } from 'mobx';
+import { action, computed, observable, ObservableMap, observe } from 'mobx';
 import { observer } from 'mobx-react';
-import { computedFn } from 'mobx-utils';
-import { Doc, DocListCast, Field, NumListCast, StrListCast } from '../../../../fields/Doc';
+import { Doc, DocListCast, Field, NumListCast, Opt, StrListCast } from '../../../../fields/Doc';
 import { Id } from '../../../../fields/FieldSymbols';
 import { List } from '../../../../fields/List';
 import { listSpec } from '../../../../fields/Schema';
@@ -17,9 +16,9 @@ import { undoable, undoBatch } from '../../../util/UndoManager';
 import { ContextMenu } from '../../ContextMenu';
 import { EditableView } from '../../EditableView';
 import { Colors } from '../../global/globalEnums';
-import { DocFocusOptions, DocumentView } from '../../nodes/DocumentView';
+import { DocFocusOptions, DocumentView, DocumentViewProps } from '../../nodes/DocumentView';
 import { KeyValueBox } from '../../nodes/KeyValueBox';
-import { DefaultStyleProvider } from '../../StyleProvider';
+import { DefaultStyleProvider, StyleProp } from '../../StyleProvider';
 import { CollectionSubView } from '../CollectionSubView';
 import './CollectionSchemaView.scss';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
@@ -86,7 +85,17 @@ export class CollectionSchemaView extends CollectionSubView() {
     }
 
     @computed get _selectedDocs() {
-        return SelectionManager.Docs().filter(doc => Doc.AreProtosEqual(DocCast(doc.embedContainer), this.rootDoc));
+        const selected = SelectionManager.Docs().filter(doc => Doc.AreProtosEqual(DocCast(doc.embedContainer), this.rootDoc));
+        if (!selected.length) {
+            for (const sel of SelectionManager.Docs()) {
+                const contextPath = DocumentManager.GetContextPath(sel, true);
+                if (contextPath.includes(this.rootDoc)) {
+                    const parentInd = contextPath.indexOf(this.rootDoc);
+                    return parentInd < contextPath.length - 1 ? [contextPath[parentInd + 1]] : [];
+                }
+            }
+        }
+        return selected;
     }
 
     @computed get documentKeys() {
@@ -236,10 +245,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         this.layoutDoc.sortDesc = desc;
     };
 
-    addRow = (doc: Doc | Doc[]) => {
-        const result: boolean = this.addDocument(doc);
-        return result;
-    };
+    addRow = (doc: Doc | Doc[]) => this.addDocument(doc);
 
     @undoBatch
     @action
@@ -550,9 +556,8 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     setColumnValues = (key: string, value: string) => {
-        let success: boolean = true;
-        this.childDocs.forEach(doc => success && KeyValueBox.SetField(doc, key, value));
-        return success;
+        this.childDocs.forEach(doc => KeyValueBox.SetField(doc, key, value));
+        return true;
     };
 
     @action
@@ -577,9 +582,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @action
-    closeFilterMenu = () => {
-        this._filterColumnIndex = undefined;
-    };
+    closeFilterMenu = () => (this._filterColumnIndex = undefined);
 
     openContextMenu = (x: number, y: number, index: number) => {
         this.closeColumnMenu();
@@ -836,7 +839,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                 <div ref={this._menuTarget} style={{ background: 'red', top: 0, left: 0, position: 'absolute', zIndex: 10000 }}></div>
                 <div
                     className="schema-table"
-                    style={{ width: `calc(100% - ${this.previewWidth + 4}px)` }}
+                    style={{ width: `calc(100% - ${this.previewWidth}px)` }}
                     onWheel={e => this.props.isContentActive() && e.stopPropagation()}
                     ref={r => {
                         // prevent wheel events from passively propagating up through containers
@@ -932,51 +935,68 @@ interface CollectionSchemaViewDocsProps {
 
 @observer
 class CollectionSchemaViewDocs extends React.Component<CollectionSchemaViewDocsProps> {
-    tableWidthFunc = () => this.props.schema.tableWidth;
-    childScreenToLocal = computedFn((index: number) => () => this.props.schema.props.ScreenToLocalTransform().translate(0, -this.props.rowHeight() - index * this.props.rowHeight()));
     render() {
         return (
             <div className="schema-table-content" ref={this.props.setRef} style={{ height: `calc(100% - ${CollectionSchemaView._newNodeInputHeight + this.props.rowHeight()}px)` }}>
-                {this.props.childDocs().docs.map((doc: Doc, index: number) => {
-                    const dataDoc = !doc.isTemplateDoc && !doc.isTemplateForField ? undefined : this.props.schema.props.DataDoc;
-                    return (
-                        <div className="schema-row-wrapper" style={{ height: this.props.rowHeight() }}>
-                            <DocumentView
-                                key={doc[Id]}
-                                {...this.props.schema.props}
-                                LayoutTemplate={this.props.schema.props.childLayoutTemplate}
-                                LayoutTemplateString={SchemaRowBox.LayoutString(this.props.schema.props.fieldKey)}
-                                Document={doc}
-                                DataDoc={dataDoc}
-                                yPadding={index}
-                                renderDepth={this.props.schema.props.renderDepth + 1}
-                                PanelWidth={this.tableWidthFunc}
-                                PanelHeight={this.props.rowHeight}
-                                styleProvider={DefaultStyleProvider}
-                                waitForDoubleClickToClick={returnNever}
-                                defaultDoubleClick={returnIgnore}
-                                dragAction="move"
-                                onClickScriptDisable="always"
-                                focus={this.props.schema.focusDocument}
-                                childFilters={this.props.schema.childDocFilters}
-                                childFiltersByRanges={this.props.schema.childDocRangeFilters}
-                                searchFilterDocs={this.props.schema.searchFilterDocs}
-                                rootSelected={this.props.schema.rootSelected}
-                                ScreenToLocalTransform={this.childScreenToLocal(index)}
-                                bringToFront={emptyFunction}
-                                isDocumentActive={this.props.schema.props.childDocumentsActive?.() ? this.props.schema.props.isDocumentActive : this.props.schema.isContentActive}
-                                isContentActive={emptyFunction}
-                                whenChildContentsActiveChanged={this.props.schema.props.whenChildContentsActiveChanged}
-                                hideDecorations={true}
-                                hideTitle={true}
-                                hideDocumentButtonBar={true}
-                                hideLinkAnchors={true}
-                                layout_fitWidth={returnTrue}
-                            />
-                        </div>
-                    );
-                })}
+                {this.props.childDocs().docs.map((doc: Doc, index: number) => (
+                    <div className="schema-row-wrapper" style={{ height: this.props.rowHeight() }}>
+                        <CollectionSchemaViewDoc doc={doc} schema={this.props.schema} index={index} rowHeight={this.props.rowHeight} />
+                    </div>
+                ))}
             </div>
         );
     }
 }
+
+interface CollectionSchemaViewDocProps {
+    schema: CollectionSchemaView;
+    index: number;
+    doc: Doc;
+    rowHeight: () => number;
+}
+
+@observer
+class CollectionSchemaViewDoc extends React.Component<CollectionSchemaViewDocProps> {
+    tableWidthFunc = () => this.props.schema.tableWidth;
+    screenToLocalXf = () => this.props.schema.props.ScreenToLocalTransform().translate(0, -this.props.rowHeight() - this.props.index * this.props.rowHeight());
+    noOpacityStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string) => {
+        if (property === StyleProp.Opacity) return 1;
+        return DefaultStyleProvider(doc, props, property);
+    };
+    render() {
+        return (
+            <DocumentView
+                key={this.props.doc[Id]}
+                {...this.props.schema.props}
+                LayoutTemplate={this.props.schema.props.childLayoutTemplate}
+                LayoutTemplateString={SchemaRowBox.LayoutString(this.props.schema.props.fieldKey, this.props.index)}
+                Document={this.props.doc}
+                DataDoc={undefined}
+                renderDepth={this.props.schema.props.renderDepth + 1}
+                PanelWidth={this.tableWidthFunc}
+                PanelHeight={this.props.rowHeight}
+                styleProvider={this.noOpacityStyleProvider}
+                waitForDoubleClickToClick={returnNever}
+                defaultDoubleClick={returnIgnore}
+                dragAction="move"
+                onClickScriptDisable="always"
+                focus={this.props.schema.focusDocument}
+                childFilters={this.props.schema.childDocFilters}
+                childFiltersByRanges={this.props.schema.childDocRangeFilters}
+                searchFilterDocs={this.props.schema.searchFilterDocs}
+                rootSelected={this.props.schema.rootSelected}
+                ScreenToLocalTransform={this.screenToLocalXf}
+                bringToFront={emptyFunction}
+                dragWhenActive={true}
+                isDocumentActive={this.props.schema.props.childDocumentsActive?.() ? this.props.schema.props.isDocumentActive : this.props.schema.isContentActive}
+                isContentActive={emptyFunction}
+                whenChildContentsActiveChanged={this.props.schema.props.whenChildContentsActiveChanged}
+                hideDecorations={true}
+                hideTitle={true}
+                hideDocumentButtonBar={true}
+                hideLinkAnchors={true}
+                layout_fitWidth={returnTrue}
+            />
+        );
+    }
+}
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 4e418728f..7346c4f12 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -1,12 +1,16 @@
 import React = require('react');
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconButton, Size } from 'browndash-components';
 import { computed } from 'mobx';
 import { observer } from 'mobx-react';
 import { computedFn } from 'mobx-utils';
+import { CgClose } from 'react-icons/cg';
+import { FaExternalLinkAlt } from 'react-icons/fa';
 import { Doc } from '../../../../fields/Doc';
 import { BoolCast } from '../../../../fields/Types';
+import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../../Utils';
 import { DragManager } from '../../../util/DragManager';
 import { SnappingManager } from '../../../util/SnappingManager';
+import { Transform } from '../../../util/Transform';
 import { undoable } from '../../../util/UndoManager';
 import { ViewBoxBaseComponent } from '../../DocComponent';
 import { Colors } from '../../global/globalEnums';
@@ -15,16 +19,14 @@ import { FieldView, FieldViewProps } from '../../nodes/FieldView';
 import { CollectionSchemaView } from './CollectionSchemaView';
 import './CollectionSchemaView.scss';
 import { SchemaTableCell } from './SchemaTableCell';
-import { Transform } from '../../../util/Transform';
-import { IconButton, Size } from 'browndash-components';
-import { CgClose } from 'react-icons/cg';
-import { FaExternalLinkAlt } from 'react-icons/fa';
-import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../../Utils';
 
+interface SchemaRowBoxProps {
+    rowIndex: number;
+}
 @observer
-export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() {
-    public static LayoutString(fieldKey: string) {
-        return FieldView.LayoutString(SchemaRowBox, fieldKey);
+export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps & SchemaRowBoxProps>() {
+    public static LayoutString(fieldKey: string, rowIndex: number) {
+        return FieldView.LayoutString(SchemaRowBox, fieldKey).replace('fieldKey', `rowIndex={${rowIndex}} fieldKey`);
     }
 
     private _ref: HTMLDivElement | null = null;
@@ -170,7 +172,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             transform={() => {
                                 const ind = index === this.schemaView.columnKeys.length - 1 ? this.schemaView.columnKeys.length - 3 : index;
                                 const x = this.schemaView?.displayColumnWidths.reduce((p, c, i) => (i <= ind ? p + c : p), 0);
-                                const y = (this.props.yPadding ?? 0) * this.props.PanelHeight();
+                                const y = (this.props.rowIndex ?? 0) * this.props.PanelHeight();
                                 return new Transform(x + CollectionSchemaView._rowMenuWidth, y, 1);
                             }}
                         />