From 9d2af1180f0dd5af5ab86b922cd8b0cdfcf4ea09 Mon Sep 17 00:00:00 2001 From: mehekj Date: Sat, 28 Jan 2023 22:38:41 -0500 Subject: checkpoint: schemarow as documentview functioning --- .../collectionSchema/CollectionSchemaView.tsx | 129 +++++++++++++++------ 1 file changed, 95 insertions(+), 34 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.tsx') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index f7c68c803..c9f934aec 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -1,14 +1,14 @@ import React = require('react'); import { action, computed, observable, ObservableMap, ObservableSet, trace, untracked } from 'mobx'; import { observer } from 'mobx-react'; -import { Doc, DocListCast, StrListCast } from '../../../../fields/Doc'; +import { DataSym, Doc, DocListCast, Opt, StrListCast } from '../../../../fields/Doc'; import { Id } from '../../../../fields/FieldSymbols'; import { List } from '../../../../fields/List'; import { RichTextField } from '../../../../fields/RichTextField'; import { listSpec } from '../../../../fields/Schema'; -import { Cast, StrCast } from '../../../../fields/Types'; +import { BoolCast, Cast, StrCast } from '../../../../fields/Types'; import { ImageField } from '../../../../fields/URLField'; -import { emptyFunction, returnEmptyString, setupMoveUpEvents } from '../../../../Utils'; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents, smoothScroll, Utils } from '../../../../Utils'; import { Docs, DocUtils } from '../../../documents/Documents'; import { DragManager } from '../../../util/DragManager'; import { SelectionManager } from '../../../util/SelectionManager'; @@ -21,6 +21,9 @@ import { CollectionSubView } from '../CollectionSubView'; import './CollectionSchemaView.scss'; import { SchemaColumnHeader } from './SchemaColumnHeader'; import { SchemaRowBox } from './SchemaRowBox'; +import { DocFocusOptions, DocumentView, ViewAdjustment } from '../../nodes/DocumentView'; +import { DefaultStyleProvider } from '../../StyleProvider'; +import { Transform } from '../../../util/Transform'; export enum ColumnType { Number, @@ -40,7 +43,7 @@ export class CollectionSchemaView extends CollectionSubView() { private _closestDropIndex: number = 0; private _minColWidth: number = 150; - @observable _rowMenuWidth: number = 100; + public static _rowMenuWidth: number = 100; @observable _selectedDocs: ObservableSet = new ObservableSet(); @observable _rowEles: ObservableMap = new ObservableMap(); @observable _isDragging: boolean = false; @@ -69,16 +72,15 @@ export class CollectionSchemaView extends CollectionSubView() { let widths = Cast( this.layoutDoc.columnWidths, listSpec('number'), - this.columnKeys.map(() => (this.props.PanelWidth() - this._rowMenuWidth) / this.columnKeys.length) + this.columnKeys.map(() => (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth) / this.columnKeys.length) ); const totalWidth = widths.reduce((sum, width) => sum + width, 0); - if (totalWidth !== this.props.PanelWidth() - this._rowMenuWidth) { + if (totalWidth !== this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth) { widths = widths.map(w => { const proportion = w / totalWidth; - return proportion * (this.props.PanelWidth() - this._rowMenuWidth); + return proportion * (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth); }); - // this.layoutDoc.columnWidths = new List(widths); } return widths; @@ -110,8 +112,8 @@ export class CollectionSchemaView extends CollectionSubView() { let currWidths = [...this.storedColumnWidths]; const newColWidth = this.props.PanelWidth() / (currWidths.length + 1); currWidths = currWidths.map(w => { - const proportion = w / (this.props.PanelWidth() - this._rowMenuWidth); - return proportion * (this.props.PanelWidth() - this._rowMenuWidth - newColWidth); + const proportion = w / (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth); + return proportion * (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth - newColWidth); }); currWidths.splice(index + 1, 0, newColWidth); this.layoutDoc.columnWidths = new List(currWidths); @@ -133,8 +135,8 @@ export class CollectionSchemaView extends CollectionSubView() { let currWidths = [...this.storedColumnWidths]; const removedColWidth = currWidths[index]; currWidths = currWidths.map(w => { - const proportion = w / (this.props.PanelWidth() - this._rowMenuWidth - removedColWidth); - return proportion * (this.props.PanelWidth() - this._rowMenuWidth); + const proportion = w / (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth - removedColWidth); + return proportion * (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth); }); currWidths.splice(index, 1); this.layoutDoc.columnWidths = new List(currWidths); @@ -142,8 +144,6 @@ export class CollectionSchemaView extends CollectionSubView() { let currKeys = [...this.columnKeys]; currKeys.splice(index, 1); this.layoutDoc.columnKeys = new List(currKeys); - console.log([...this.storedColumnWidths]); - console.log([...this.columnKeys]); }; @action @@ -399,6 +399,34 @@ export class CollectionSchemaView extends CollectionSubView() { ContextMenu.Instance.displayMenu(x, y, undefined, true); }; + focusDocument = (doc: Doc, options: DocFocusOptions) => { + Doc.BrushDoc(doc); + + let focusSpeed = 0; + const found = this._mainCont && Array.from(this._mainCont.getElementsByClassName('documentView-node')).find((node: any) => node.id === doc[Id]); + if (found) { + const top = found.getBoundingClientRect().top; + const localTop = this.props.ScreenToLocalTransform().transformPoint(0, top); + if (Math.floor(localTop[1]) !== 0) { + smoothScroll((focusSpeed = options.zoomTime ?? 500), this._mainCont!, localTop[1] + this._mainCont!.scrollTop, options.easeFunc); + } + } + const endFocus = async (moved: boolean) => options?.afterFocus?.(moved) ?? ViewAdjustment.doNothing; + this.props.focus(this.rootDoc, { + ...options, + afterFocus: (didFocus: boolean) => new Promise(res => setTimeout(async () => res(await endFocus(didFocus)), focusSpeed)), + }); + }; + + isChildContentActive = () => + this.props.isDocumentActive?.() && (this.props.childDocumentsActive?.() || BoolCast(this.rootDoc.childDocumentsActive)) ? true : this.props.childDocumentsActive?.() === false || this.rootDoc.childDocumentsActive === false ? false : undefined; + + getDocTransform(doc: Doc, dref?: DocumentView) { + const { scale, translateX, translateY } = Utils.GetScreenTransform(dref?.ContentDiv || undefined); + // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform. so we have to subtract that off + return new Transform(-translateX + (dref?.centeringX || 0), -translateY + (dref?.centeringY || 0), 1).scale(this.props.ScreenToLocalTransform().Scale); + } + render() { return (
-
+
{this.columnKeys.map((key, index) => { return (
- {this.childDocs.map((doc: Doc, index: number) => ( - - ))} + {this.childDocs.map((doc: Doc, index: number) => { + const dataDoc = !doc.isTemplateDoc && !doc.isTemplateForField && !doc.PARAMS ? undefined : this.props.DataDoc; + let dref: Opt; + + return ( +
+ (dref = r || undefined)} + LayoutTemplate={this.props.childLayoutTemplate} + LayoutTemplateString={SchemaRowBox.LayoutString(this.props.fieldKey)} + renderDepth={this.props.renderDepth + 1} + Document={doc} + DataDoc={dataDoc} + ContainingCollectionView={this.props.CollectionView} + ContainingCollectionDoc={this.Document} + PanelWidth={this.props.PanelWidth} + PanelHeight={() => 70} + styleProvider={DefaultStyleProvider} + focus={this.focusDocument} + docFilters={this.childDocFilters} + docRangeFilters={this.childDocRangeFilters} + searchFilterDocs={this.searchFilterDocs} + rootSelected={this.rootSelected} + ScreenToLocalTransform={() => this.getDocTransform(doc, dref)} + bringToFront={emptyFunction} + isContentActive={this.isChildContentActive} + hideDecorations={true} + hideTitle={true} + hideDocumentButtonBar={true} + /> +
+ ); + + // + })}
-- cgit v1.2.3-70-g09d2