basic selection complete

6 files changed, 65 insertions, 32 deletions

diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss
index 6611477e5..c296e1172 100644
--- a/src/client/views/collections/CollectionStackedTimeline.scss
+++ b/src/client/views/collections/CollectionStackedTimeline.scss
@@ -2,6 +2,7 @@
 
 .collectionStackedTimeline-timelineContainer {
     height: 100%;
+    position: absolute;
     overflow-x: auto;
     overflow-y: hidden;
     border: none;
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index 48e3abbc7..2543624d3 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -668,7 +668,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
                         )}
                     </div>
                 </div>
-                <div className="timeline-hoverUI" style={{ left: `calc(${((this._hoverTime - this.clipStart) / this.clipDuration) * 100}%` }}>
+                <div className="timeline-hoverUI" style={{ left: ((this._hoverTime - this.clipStart) / this.clipDuration) * this.timelineContentWidth - this._scroll }}>
                     <div className="hoverTime">{formatTime(this._hoverTime - this.clipStart)}</div>
                     {this._thumbnail && <img className="videoBox-thumbnail" src={this._thumbnail} />}
                 </div>
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index 0a51aea4e..0f4053127 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -36,7 +36,6 @@
                 display: flex;
                 flex-direction: row;
                 justify-content: center;
-                width: 100px;
 
                 .row-button {
                     width: 20px;
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 7e903ca92..20d809232 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -1,15 +1,14 @@
 import React = require('react');
+import { action, computed, observable, ObservableMap, ObservableSet } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc } from '../../../../fields/Doc';
+import { List } from '../../../../fields/List';
+import { listSpec } from '../../../../fields/Schema';
+import { Cast } from '../../../../fields/Types';
 import { CollectionSubView } from '../CollectionSubView';
 import './CollectionSchemaView.scss';
-import { SchemaRowBox } from './SchemaRowBox';
-import { action, computed, observable } from 'mobx';
-import { BoolCast, Cast, StrCast } from '../../../../fields/Types';
-import { listSpec } from '../../../../fields/Schema';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
-import { List } from '../../../../fields/List';
-import { dropActionType } from '../../../util/DragManager';
+import { SchemaRowBox } from './SchemaRowBox';
 
 export enum ColumnType {
     Number,
@@ -23,11 +22,10 @@ const defaultColumnKeys: string[] = ['title', 'type', 'author', 'text', 'data',
 
 @observer
 export class CollectionSchemaView extends CollectionSubView() {
-    isChildContentActive = () => (this.props.isDocumentActive?.() && (this.props.childDocumentsActive?.() || BoolCast(this.rootDoc.childDocumentsActive)) ? true : undefined);
+    private _lastSelectedRow: number | undefined;
 
-    @computed get layoutDoc() {
-        return Doc.Layout(this.props.Document);
-    }
+    @observable _rowMenuWidth: number = 60;
+    @observable _selectedDocs: ObservableSet = new ObservableSet<Doc>();
 
     @computed get columnKeys() {
         return Cast(this.props.Document.columnKeys, listSpec('string'), defaultColumnKeys);
@@ -37,7 +35,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         return Cast(
             this.props.Document.columnWidths,
             listSpec('number'),
-            this.columnKeys.map(() => (this.props.PanelWidth() - 100) / this.columnKeys.length)
+            this.columnKeys.map(() => (this.props.PanelWidth() - this._rowMenuWidth) / this.columnKeys.length)
         );
     }
 
@@ -49,6 +47,30 @@ export class CollectionSchemaView extends CollectionSubView() {
         return true;
     };
 
+    @action
+    selectRow = (doc: Doc, ctrl?: boolean, shift?: boolean) => {
+        if (shift && this._lastSelectedRow !== undefined) {
+            const currSelectedRow = this.childDocs.indexOf(doc);
+            const startRow = Math.min(this._lastSelectedRow, currSelectedRow);
+            const endRow = Math.max(this._lastSelectedRow, currSelectedRow);
+            for (let i = startRow; i <= endRow; i++) {
+                const currDoc = this.childDocs[i];
+                if (!this._selectedDocs.has(currDoc)) this._selectedDocs.add(currDoc);
+            }
+        } else if (ctrl) {
+            if (!this._selectedDocs.has(doc)) {
+                this._selectedDocs.add(doc);
+                this._lastSelectedRow = this.childDocs.indexOf(doc);
+            } else {
+                this._selectedDocs.delete(doc);
+            }
+        } else {
+            this._selectedDocs.clear();
+            this._selectedDocs.add(doc);
+            this._lastSelectedRow = this.childDocs.indexOf(doc);
+        }
+    };
+
     render() {
         return (
             <div className="collectionSchemaView">
@@ -63,17 +85,13 @@ export class CollectionSchemaView extends CollectionSubView() {
                             <SchemaRowBox
                                 {...this.props}
                                 Document={doc}
-                                renderDepth={this.props.renderDepth + 1}
-                                isContentActive={this.isChildContentActive}
-                                rootSelected={this.rootSelected}
-                                dropAction={StrCast(this.layoutDoc.childDropAction) as dropActionType}
-                                docFilters={this.childDocFilters}
-                                docRangeFilters={this.childDocRangeFilters}
-                                searchFilterDocs={this.searchFilterDocs}
                                 ContainingCollectionDoc={this.props.CollectionView?.props.Document}
                                 ContainingCollectionView={this.props.CollectionView}
                                 columnKeys={this.columnKeys}
                                 columnWidths={this.columnWidths}
+                                rowMenuWidth={this._rowMenuWidth}
+                                selectedRows={this._selectedDocs}
+                                selectRow={this.selectRow}
                             />
                         ))}
                     </div>
@@ -82,6 +100,3 @@ export class CollectionSchemaView extends CollectionSubView() {
         );
     }
 }
-function DocListCast(childDocs: Doc[]): any {
-    throw new Error('Function not implemented.');
-}
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 50e2502dc..33f4e0bfc 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -1,25 +1,42 @@
 import React = require('react');
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { action, ObservableMap, ObservableSet } from 'mobx';
 import { observer } from 'mobx-react';
-import './CollectionSchemaView.scss';
-import { ViewBoxAnnotatableComponent, ViewBoxBaseComponent } from '../../DocComponent';
+import { Doc } from '../../../../fields/Doc';
+import { undoBatch } from '../../../util/UndoManager';
+import { ViewBoxBaseComponent } from '../../DocComponent';
+import { Colors } from '../../global/globalEnums';
 import { FieldViewProps } from '../../nodes/FieldView';
+import './CollectionSchemaView.scss';
 import { SchemaTableCell } from './SchemaTableCell';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { undoBatch } from '../../../util/UndoManager';
 
 export interface SchemaRowBoxProps extends FieldViewProps {
     columnKeys: string[];
     columnWidths: number[];
+    rowMenuWidth: number;
+    selectedRows: ObservableSet<Doc>;
+    selectRow: (doc: Doc, cmd?: boolean, shift?: boolean) => void;
 }
 
 @observer
-export class SchemaRowBox extends ViewBoxAnnotatableComponent<SchemaRowBoxProps>() {
+export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
+    isSelected = () => this.props.selectedRows.has(this.props.Document);
+
+    @action
+    onRowPointerDown = (e: React.PointerEvent) => {
+        e.stopPropagation();
+        this.props.selectRow(this.props.Document, e.ctrlKey || e.metaKey, e.shiftKey);
+    }
+
     render() {
         return (
-            <div className="schema-row" /*style={this.props.isSelected() ? { backgroundColor: 'grey' } : {}}*/>
-                <div className="row-menu">
-                    <div className="row-button" onPointerDown={undoBatch(() => this.props.removeDocument?.(this.props.Document))}>
-                        <FontAwesomeIcon icon={'times'} />
+            <div className="schema-row" style={this.isSelected() ? { backgroundColor: Colors.LIGHT_BLUE } : {}} onPointerDown={this.onRowPointerDown}>
+                <div className="row-menu" style={{width: this.props.rowMenuWidth}}>
+                    <div className="row-button" onPointerDown={undoBatch((e) => {e.stopPropagation(); this.props.removeDocument?.(this.props.Document)})}>
+                        <FontAwesomeIcon icon="times" />
+                    </div>
+                    <div className="row-button" onPointerDown={(e) => {e.stopPropagation(); this.props.addDocTab(this.props.Document, 'add:right')}}>
+                        <FontAwesomeIcon icon="external-link-alt" />
                     </div>
                 </div>
                 <div className="row-cells">
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 8437736ae..7bbd7c055 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -18,6 +18,7 @@ import { ContextMenuProps } from '../ContextMenuItem';
 import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../DocComponent';
 import './AudioBox.scss';
 import { FieldView, FieldViewProps } from './FieldView';
+import { SelectionManager } from '../../util/SelectionManager';
 
 /**
  * AudioBox