From 222f659b8c291fafce2648e367392dd9f467cb25 Mon Sep 17 00:00:00 2001 From: mehekj Date: Mon, 27 Feb 2023 17:00:49 -0500 Subject: rows are documentviews but clipped --- .../collectionSchema/CollectionSchemaView.scss | 6 ++ .../collectionSchema/CollectionSchemaView.tsx | 96 ++++++++++++----- .../collections/collectionSchema/SchemaRowBox.tsx | 120 ++++++++++++--------- .../collectionSchema/SchemaTableCell.tsx | 12 ++- src/client/views/nodes/DocumentContentsView.tsx | 2 + 5 files changed, 156 insertions(+), 80 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index bd0fc11b3..46c2e2d1a 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -134,10 +134,16 @@ } } +.schema-row-wrapper { + max-height: 70px; + overflow: hidden; +} + .schema-header-row, .schema-row { display: flex; flex-direction: row; + height: 100%; max-height: 70px; overflow: auto; diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 64c39cf1a..46510b6fe 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -8,7 +8,7 @@ import { RichTextField } from '../../../../fields/RichTextField'; import { listSpec } from '../../../../fields/Schema'; import { BoolCast, Cast, NumCast, StrCast } from '../../../../fields/Types'; import { ImageField } from '../../../../fields/URLField'; -import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents, Utils } 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'; @@ -17,7 +17,7 @@ import { undoBatch } from '../../../util/UndoManager'; import { ContextMenu } from '../../ContextMenu'; import { ContextMenuProps } from '../../ContextMenuItem'; import { EditableView } from '../../EditableView'; -import { DocumentView } from '../../nodes/DocumentView'; +import { DocFocusOptions, DocumentView, ViewAdjustment } from '../../nodes/DocumentView'; import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; import { CollectionSubView } from '../CollectionSubView'; import './CollectionSchemaView.scss'; @@ -41,9 +41,9 @@ export class CollectionSchemaView extends CollectionSubView() { private _lastSelectedRow: number | undefined; private _selectedDocSortedArray: Doc[] = []; private _closestDropIndex: number = 0; - private _minColWidth: number = 150; private _previewRef: HTMLDivElement | null = null; + public static _minColWidth: number = 150; public static _rowMenuWidth: number = 100; public static _previewDividerWidth: number = 4; @observable _selectedDocs: ObservableSet = new ObservableSet(); @@ -110,6 +110,7 @@ export class CollectionSchemaView extends CollectionSubView() { } componentDidMount() { + this.props.setContentView?.(this); document.addEventListener('keydown', this.onKeyDown); } @@ -243,8 +244,8 @@ export class CollectionSchemaView extends CollectionSubView() { if (shrinking === undefined || growing === undefined) return true; change = Math.abs(change); - if (this._displayColumnWidths[shrinking] - change < this._minColWidth) { - change = this._displayColumnWidths[shrinking] - this._minColWidth; + if (this._displayColumnWidths[shrinking] - change < CollectionSchemaView._minColWidth) { + change = this._displayColumnWidths[shrinking] - CollectionSchemaView._minColWidth; } this._displayColumnWidths[shrinking] -= change; @@ -481,7 +482,7 @@ export class CollectionSchemaView extends CollectionSubView() { !Doc.noviceMode && ContextMenu.Instance.addItem({ description: 'Containers ...', subitems: layoutItems, icon: 'eye' }); ContextMenu.Instance.setDefaultItem('::', (name: string): void => { Doc.GetProto(this.props.Document)[name] = ''; - const created = Docs.Create.TextDocument('', { title: name, _width: 250, _autoHeight: true }); + const created = Docs.Create.TextDocument('', { title: name, _autoHeight: true }); if (created) { if (this.props.Document.isTemplateDoc) { Doc.MakeMetadataFieldTemplate(created, this.props.Document); @@ -492,9 +493,25 @@ 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 @@ -543,26 +560,55 @@ export class CollectionSchemaView extends CollectionSubView() { {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.tableWidth} + PanelHeight={() => 70} + styleProvider={DefaultStyleProvider} + focus={this.focusDocument} + docFilters={this.childDocFilters} + docViewPath={this.props.docViewPath} + 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} + /> +
); + // return ( + // + // ); })} diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 2cf0a1b79..0378fa67e 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -1,17 +1,17 @@ import React = require('react'); import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, ObservableSet } from 'mobx'; +import { computed, ObservableSet } from 'mobx'; import { observer } from 'mobx-react'; import { Doc } from '../../../../fields/Doc'; -import { DragManager } from '../../../util/DragManager'; import { undoBatch } from '../../../util/UndoManager'; import { ViewBoxBaseComponent } from '../../DocComponent'; -import { Colors } from '../../global/globalEnums'; import { OpenWhere } from '../../nodes/DocumentView'; -import { FieldViewProps } from '../../nodes/FieldView'; +import { FieldView, FieldViewProps } from '../../nodes/FieldView'; +import { CollectionSchemaView } from './CollectionSchemaView'; import './CollectionSchemaView.scss'; import { SchemaTableCell } from './SchemaTableCell'; -import { setupMoveUpEvents, emptyFunction } from '../../../../Utils'; +import { Colors } from '../../global/globalEnums'; +import { DocCast, StrCast } from '../../../../fields/Types'; export interface SchemaRowBoxProps extends FieldViewProps { rowIndex: number; @@ -27,79 +27,93 @@ export interface SchemaRowBoxProps extends FieldViewProps { } @observer -export class SchemaRowBox extends ViewBoxBaseComponent() { +export class SchemaRowBox extends ViewBoxBaseComponent() { + public static LayoutString(fieldKey: string) { + return FieldView.LayoutString(SchemaRowBox, fieldKey); + } + private _ref: HTMLDivElement | null = null; bounds = () => this._ref?.getBoundingClientRect(); - isSelected = () => this.props.selectedDocs.has(this.props.Document); + @computed get schemaView() { + const vpath = this.props.docViewPath(); + console.log(vpath[vpath.length - 2]); + return vpath.length > 1 ? (vpath[vpath.length - 2].ComponentView as CollectionSchemaView) : undefined; + } - @action - onRowPointerDown = (e: React.PointerEvent) => { - e.stopPropagation(); + @computed get schemaDoc() { + return this.props.ContainingCollectionDoc!; + } - setupMoveUpEvents( - this, - e, - e => this.props.startDrag(e, this.props.Document, this._ref!, this.props.rowIndex), - emptyFunction, - e => this.props.selectRow(e, this.props.Document, this._ref!, this.props.rowIndex) - ); - }; + // isSelected = () => this.props.selectedDocs.has(this.props.Document); - onPointerEnter = (e: any) => { - if (!this.props.dragging) return; - document.removeEventListener('pointermove', this.onPointerMove); - document.addEventListener('pointermove', this.onPointerMove); - }; + // @action + // onRowPointerDown = (e: React.PointerEvent) => { + // e.stopPropagation(); - onPointerMove = (e: any) => { - if (!this.props.dragging) return; - let dragIsRow: boolean = true; - DragManager.docsBeingDragged.forEach(doc => { - dragIsRow = this.props.selectedDocs.has(doc); - }); - if (this._ref && dragIsRow) { - const rect = this._ref.getBoundingClientRect(); - const y = e.clientY - rect.top; //y position within the element. - const height = this._ref.clientHeight; - const halfLine = height / 2; - if (y <= halfLine) { - this._ref.style.borderTop = `solid 2px ${Colors.MEDIUM_BLUE}`; - this._ref.style.borderBottom = '0px'; - this.props.dropIndex(this.props.rowIndex); - } else if (y > halfLine) { - this._ref.style.borderTop = '0px'; - this._ref.style.borderBottom = `solid 2px ${Colors.MEDIUM_BLUE}`; - this.props.dropIndex(this.props.rowIndex + 1); - } - } - }; + // setupMoveUpEvents( + // this, + // e, + // e => this.props.startDrag(e, this.props.Document, this._ref!, this.props.rowIndex), + // emptyFunction, + // e => this.props.selectRow(e, this.props.Document, this._ref!, this.props.rowIndex) + // ); + // }; + + // onPointerEnter = (e: any) => { + // if (!this.props.dragging) return; + // document.removeEventListener('pointermove', this.onPointerMove); + // document.addEventListener('pointermove', this.onPointerMove); + // }; + + // onPointerMove = (e: any) => { + // if (!this.props.dragging) return; + // let dragIsRow: boolean = true; + // DragManager.docsBeingDragged.forEach(doc => { + // dragIsRow = this.props.selectedDocs.has(doc); + // }); + // if (this._ref && dragIsRow) { + // const rect = this._ref.getBoundingClientRect(); + // const y = e.clientY - rect.top; //y position within the element. + // const height = this._ref.clientHeight; + // const halfLine = height / 2; + // if (y <= halfLine) { + // this._ref.style.borderTop = `solid 2px ${Colors.MEDIUM_BLUE}`; + // this._ref.style.borderBottom = '0px'; + // this.props.dropIndex(this.props.rowIndex); + // } else if (y > halfLine) { + // this._ref.style.borderTop = '0px'; + // this._ref.style.borderBottom = `solid 2px ${Colors.MEDIUM_BLUE}`; + // this.props.dropIndex(this.props.rowIndex + 1); + // } + // } + // }; onPointerLeave = (e: any) => { if (this._ref) { this._ref.style.borderTop = '0px'; this._ref.style.borderBottom = '0px'; } - document.removeEventListener('pointermove', this.onPointerMove); + // document.removeEventListener('pointermove', this.onPointerMove); }; render() { return (
{ - row && this.props.addRowRef(this.props.Document, row); + // row && this.props.addRowRef(this.props.Document, row); this._ref = row; }}>
() {
- {this.props.columnKeys.map((key, index) => ( - + {this.schemaView?.columnKeys?.map((key, index) => ( + ))}
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 5d9474173..e2f6d99f1 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -1,7 +1,14 @@ import React = require('react'); import { observer } from 'mobx-react'; -import { Doc, Field } from '../../../../fields/Doc'; +import { Doc, DocListCast, Field } from '../../../../fields/Doc'; import './CollectionSchemaView.scss'; +import { type } from 'jquery'; +import { action } from 'mobx'; +import { ComputedField } from '../../../../fields/ScriptField'; +import { FieldValue } from '../../../../fields/Types'; +import { CompileScript } from '../../../util/Scripting'; +import { EditableView } from '../../EditableView'; +import { MAX_ROW_HEIGHT } from '../../global/globalCssVariables.scss'; export interface SchemaTableCellProps { Document: Doc; @@ -14,7 +21,8 @@ export class SchemaTableCell extends React.Component { render() { return (
- {Field.toString(this.props.Document[this.props.fieldKey] as Field)} + {/* {Field.toString(this.props.Document[this.props.fieldKey] as Field)} */} + Field.toKeyValueString(this.props.Document, this.props.fieldKey)} SetValue={(value: string) => true} />
); } diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 569579996..459554ebe 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -44,6 +44,7 @@ import { WebBox } from './WebBox'; import React = require('react'); import XRegExp = require('xregexp'); import { LoadingBox } from './LoadingBox'; +import { SchemaRowBox } from '../collections/collectionSchema/SchemaRowBox'; const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this? @@ -268,6 +269,7 @@ export class DocumentContentsView extends React.Component< HTMLtag, ComparisonBox, LoadingBox, + SchemaRowBox, }} bindings={bindings} jsx={layoutFrame} -- cgit v1.2.3-70-g09d2