From 19aa61f593c896f4d3bd0ffae6dbe306c2a9546d Mon Sep 17 00:00:00 2001 From: mehekj Date: Wed, 10 Aug 2022 11:51:41 -0400 Subject: basic table in progress --- .../collectionSchema/CollectionSchemaView.scss | 626 ++------------------- 1 file changed, 43 insertions(+), 583 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 19401c7f0..0a51aea4e 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -1,599 +1,59 @@ @import '../../global/globalCssVariables.scss'; -@import '../../../../../node_modules/react-table/react-table.css'; -.collectionSchemaView-container { - border-width: $COLLECTION_BORDER_WIDTH; - border-color: $medium-gray; - border-style: solid; - border-radius: $border-radius; - box-sizing: border-box; - position: relative; - top: 0; - width: 100%; - height: 100%; - margin-top: 0; - transition: top 0.5s; - display: flex; - justify-content: space-between; - flex-wrap: nowrap; - touch-action: none; - div { - touch-action: none; - } - .collectionSchemaView-tableContainer { - width: 100%; - height: 100%; - } - .collectionSchemaView-dividerDragger { - position: relative; - height: 100%; - width: $SCHEMA_DIVIDER_WIDTH; - z-index: 20; - right: 0; - top: 0; - background: gray; - cursor: col-resize; - } - // .documentView-node:first-child { - // background: $white; - // } -} - -.collectionSchemaView-searchContainer { - border-width: $COLLECTION_BORDER_WIDTH; - border-color: $medium-gray; - border-style: solid; - border-radius: $border-radius; - box-sizing: border-box; - position: relative; - top: 0; - width: 100%; - height: 100%; - margin-top: 0; - transition: top 0.5s; - display: flex; - justify-content: space-between; - flex-wrap: nowrap; - touch-action: none; - padding: 2px; - div { - touch-action: none; - } - .collectionSchemaView-tableContainer { - width: 100%; - height: 100%; - } - .collectionSchemaView-dividerDragger { - position: relative; - height: 100%; - width: 20px; - z-index: 20; - right: 0; - top: 0; - background: gray; - cursor: col-resize; - } - // .documentView-node:first-child { - // background: $white; - // } -} - -.ReactTable { - width: 100%; - background: white; - box-sizing: border-box; - border: none !important; - float: none !important; - .rt-table { - height: 100%; - display: -webkit-inline-box; - direction: ltr; - overflow: visible; - } - .rt-noData { - display: none; - } - .rt-thead { - width: 100%; - z-index: 100; - overflow-y: visible; - &.-header { - font-size: 12px; - height: 30px; - box-shadow: none; - z-index: 100; - overflow-y: visible; - } - .rt-resizable-header-content { - height: 100%; - overflow: visible; - } - .rt-th { - padding: 0; - border-left: solid 1px $light-gray; - } - } - .rt-th { - font-size: 13px; - text-align: center; - &:last-child { - overflow: visible; - } - } - .rt-tbody { - width: 100%; - direction: rtl; - overflow: visible; - .rt-td { - border-right: 1px solid rgba(0, 0, 0, 0.2); - } - } - .rt-tr-group { - direction: ltr; - flex: 0 1 auto; - min-height: 30px; - border: 0 !important; - } - .rt-tr-group:nth-of-type(even) { - direction: ltr; - flex: 0 1 auto; - min-height: 30px; - border: 0 !important; - background-color: red; - } - .rt-tr { - width: 100%; - min-height: 30px; - } - .rt-td { - padding: 0; - font-size: 13px; - text-align: center; - white-space: nowrap; - display: flex; - align-items: center; - .imageBox-cont { - position: relative; - max-height: 100%; - } - .imageBox-cont img { - object-fit: contain; - max-width: 100%; - height: 100%; - } - .videoBox-cont { - object-fit: contain; - width: auto; - height: 100%; - } - } - .rt-td.rt-expandable { - display: flex; - align-items: center; - height: inherit; - } - .rt-resizer { - width: 8px; - right: -4px; - } - .rt-resizable-header { - padding: 0; - height: 30px; - } - .rt-resizable-header:last-child { - overflow: visible; - .rt-resizer { - width: 5px !important; - } - } -} - -.documentView-node-topmost { - text-align: left; - transform-origin: center top; - display: inline-block; -} - -.collectionSchema-col { - height: 100%; -} - -.collectionSchema-header-menu { - height: auto; - z-index: 100; - position: absolute; - background: white; - padding: 5px; - position: fixed; - background: white; - border: black 1px solid; - .collectionSchema-header-toggler { - z-index: 100; - width: 100%; - height: 100%; - padding: 4px; - letter-spacing: 2px; - text-transform: uppercase; - svg { - margin-right: 4px; - } - } -} - -.collectionSchemaView-header { - height: 100%; - color: gray; - z-index: 100; - overflow-y: visible; - display: flex; - justify-content: space-between; - flex-wrap: wrap; -} - -button.add-column { - width: 28px; -} -.collectionSchemaView-menuOptions-wrapper { - background: rgb(241, 239, 235); - display: flex; +.collectionSchemaView { cursor: default; - height: 100%; - align-content: center; - align-items: center; -} -.collectionSchema-header-menuOptions { - color: black; - width: 180px; - text-align: left; - .collectionSchema-headerMenu-group { - padding: 7px 0; - border-bottom: 1px solid lightgray; - cursor: pointer; - &:first-child { - padding-top: 0; - } - &:last-child { - border: none; - text-align: center; - padding: 12px 0 0 0; - } - } - label { - color: $medium-gray; - font-weight: normal; - letter-spacing: 2px; - text-transform: uppercase; - } - input { - color: black; - width: 100%; - } - .columnMenu-option { - cursor: pointer; - padding: 3px; - background-color: white; - transition: background-color 0.2s; - &:hover { - background-color: $light-gray; - } - &.active { - font-weight: bold; - border: 2px solid $light-gray; - } - svg { - color: gray; - margin-right: 5px; - width: 10px; - } - } + .schema-table { + background-color: $white; - .keys-dropdown { - position: relative; - //width: 100%; - background-color: white; - input { - border: 2px solid $light-gray; - padding: 3px; - height: 28px; - font-weight: bold; - letter-spacing: '2px'; - text-transform: 'uppercase'; - &:focus { - font-weight: normal; - } - } - } - .columnMenu-colors { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - .columnMenu-colorPicker { - cursor: pointer; - width: 20px; - height: 20px; - border-radius: 10px; - &.active { - border: 2px solid white; - box-shadow: 0 0 0 2px lightgray; + .schema-header-row, + .schema-row { + display: flex; + flex-direction: row; + + .schema-column-header, + .schema-table-cell, + .row-menu { + min-width: 50px; + border: 1px solid $medium-gray; + padding: 5px; + overflow: hidden; } } - } -} - -.schema-icon { - cursor: pointer; - width: 25px; - height: 25px; - display: flex; - align-items: center; - justify-content: center; - align-content: center; - background-color: $medium-blue; - color: white; - margin-right: 5px; - font-size: 10px; - border-radius: 3px; -} -.keys-options-wrapper { - position: absolute; - text-align: left; - height: fit-content; - top: 100%; - z-index: 21; - background-color: #ffffff; - box-shadow: 0px 3px 4px rgba(0, 0, 0, 30%); - padding: 1px; - .key-option { - cursor: pointer; - color: #000000; - width: 100%; - height: 25px; - font-weight: 400; - display: flex; - justify-content: left; - align-items: center; - padding-left: 5px; - &:hover { - background-color: $light-gray; - } - } -} + .schema-header-row { + justify-content: flex-end; -.collectionSchema-row { - height: 100%; - background-color: white; - &.row-focused .rt-td { - background-color: $light-blue; //$light-gray; - overflow: visible; - } - &.row-wrapped { - .rt-td { - white-space: normal; - } - } - .row-dragger { - display: flex; - justify-content: space-evenly; - width: 58px; - position: absolute; - /* max-width: 50px; */ - min-height: 30px; - align-items: center; - color: lightgray; - background-color: white; - transition: color 0.1s ease; - .row-option { - color: black; - cursor: pointer; - position: relative; - transition: color 0.1s ease; - display: flex; - flex-direction: column; - justify-content: center; - z-index: 2; - border-radius: 3px; - padding: 3px; - &:hover { - background-color: $light-gray; + .schema-column-header { + font-weight: bold; } } - } - .collectionSchema-row-wrapper { - &.row-above { - border-top: 1px solid $medium-blue; - } - &.row-below { - border-bottom: 1px solid $medium-blue; - } - &.row-inside { - border: 2px dashed $medium-blue; - } - .row-dragging { - background-color: blue; - } - } -} - -.collectionSchemaView-cellContainer { - width: 100%; - height: unset; -} -.collectionSchemaView-cellContents { - width: 100%; -} + .schema-row { + justify-content: space-evenly; + + .row-menu { + display: flex; + flex-direction: row; + justify-content: center; + width: 100px; + + .row-button { + width: 20px; + height: 20px; + border-radius: 100%; + background-color: $dark-gray; + color: white; + padding: 5px; + cursor: pointer; + } + } -.collectionSchemaView-cellWrapper { - display: flex; - height: 100%; - text-align: left; - padding-left: 19px; - position: relative; - align-items: center; - align-content: center; - &:focus { - outline: none; - } - &.editing { - padding: 0; - box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); - transform: scale(1.1); - z-index: 40; - input { - outline: 0; - border: none; - background-color: $white; - width: 100%; - height: fit-content; - min-height: 26px; - } - } - &.focused { - overflow: hidden; - &.inactive { - border: none; - } - } - p { - width: 100%; - height: 100%; - } - &:hover .collectionSchemaView-cellContents-docExpander { - display: block; - } - .collectionSchemaView-cellContents-document { - display: inline-block; - } - .collectionSchemaView-cellContents-docButton { - float: right; - width: '15px'; - height: '15px'; - } - .collectionSchemaView-dropdownWrapper { - border: grey; - border-style: solid; - border-width: 1px; - height: 30px; - .collectionSchemaView-dropdownButton { - //display: inline-block; - float: left; - height: 100%; - } - .collectionSchemaView-dropdownText { - display: inline-block; - //float: right; - height: 100%; - display: 'flex'; - font-size: 13; - justify-content: 'center'; - align-items: 'center'; - } - } - .collectionSchemaView-dropdownContainer { - position: absolute; - border: 1px solid rgba(0, 0, 0, 0.04); - box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14); - .collectionSchemaView-dropdownOption:hover { - background-color: rgba(0, 0, 0, 0.14); - cursor: pointer; + .row-cells { + display: flex; + flex-direction: row; + justify-content: flex-end; + } } } } - -.collectionSchemaView-cellContents-docExpander { - height: 30px; - width: 30px; - display: none; - position: absolute; - top: 0; - right: 0; - background-color: lightgray; -} - -.doc-drag-over { - background-color: red; -} - -.collectionSchemaView-toolbar { - z-index: 100; -} - -.collectionSchemaView-toolbar { - height: 30px; - display: flex; - justify-content: flex-end; - padding: 0 10px; - border-bottom: 2px solid gray; - .collectionSchemaView-toolbar-item { - display: flex; - flex-direction: column; - justify-content: center; - } -} - -#preview-schema-checkbox-div { - margin-left: 20px; - font-size: 12px; -} - -.collectionSchemaView-table { - width: 100%; - height: 100%; - overflow: auto; - padding: 3px; -} - -.rt-td.rt-expandable { - overflow: visible; - position: relative; - height: 100%; - z-index: 1; -} - -.reactTable-sub { - background-color: rgb(252, 252, 252); - width: 100%; - .rt-thead { - display: none; - } - .row-dragger { - background-color: rgb(252, 252, 252); - } - .rt-table { - background-color: rgb(252, 252, 252); - } - .collectionSchemaView-table { - width: 100%; - border: solid 1px; - overflow: visible; - padding: 0px; - } -} - -.collectionSchemaView-expander { - height: 100%; - min-height: 30px; - position: absolute; - color: gray; - width: 20; - height: auto; - left: 55; - svg { - position: absolute; - top: 50%; - left: 10; - transform: translate(-50%, -50%); - } -} - -.collectionSchemaView-addRow { - color: gray; - letter-spacing: 2px; - text-transform: uppercase; - cursor: pointer; - font-size: 10.5px; - margin-left: 50px; - margin-top: 10px; -} -- cgit v1.2.3-70-g09d2 From 9f39b14b2e321e09d071ad1c5bf8e3978ff7f181 Mon Sep 17 00:00:00 2001 From: mehekj Date: Wed, 10 Aug 2022 19:33:19 -0400 Subject: basic selection complete --- .../collections/CollectionStackedTimeline.scss | 1 + .../collections/CollectionStackedTimeline.tsx | 2 +- .../collectionSchema/CollectionSchemaView.scss | 1 - .../collectionSchema/CollectionSchemaView.tsx | 57 ++++++++++++++-------- .../collections/collectionSchema/SchemaRowBox.tsx | 35 +++++++++---- src/client/views/nodes/AudioBox.tsx | 1 + 6 files changed, 65 insertions(+), 32 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') 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 -
+
{formatTime(this._hoverTime - this.clipStart)}
{this._thumbnail && }
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(); @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 (
@@ -63,17 +85,13 @@ export class CollectionSchemaView extends CollectionSubView() { ))}
@@ -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; + selectRow: (doc: Doc, cmd?: boolean, shift?: boolean) => void; } @observer -export class SchemaRowBox extends ViewBoxAnnotatableComponent() { +export class SchemaRowBox extends ViewBoxBaseComponent() { + 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 ( -
-
-
this.props.removeDocument?.(this.props.Document))}> - +
+
+
{e.stopPropagation(); this.props.removeDocument?.(this.props.Document)})}> + +
+
{e.stopPropagation(); this.props.addDocTab(this.props.Document, 'add:right')}}> +
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 -- cgit v1.2.3-70-g09d2 From ee77b8ff032d4b06c2f0b6ac8153a32e54ab8355 Mon Sep 17 00:00:00 2001 From: mehekj Date: Thu, 11 Aug 2022 14:28:09 -0400 Subject: drag and drop rows works, needs cleaning up --- .../collectionSchema/CollectionSchemaView.scss | 1 + .../collectionSchema/CollectionSchemaView.tsx | 78 ++++++++++++---------- .../collections/collectionSchema/SchemaRowBox.tsx | 14 +++- 3 files changed, 54 insertions(+), 39 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 0f4053127..5ead99c02 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -2,6 +2,7 @@ .collectionSchemaView { cursor: default; + height: 100%; .schema-table { background-color: $white; diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 9ca1644e3..dc0cd8eac 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -1,18 +1,15 @@ import React = require('react'); -import { action, computed, observable, ObservableMap, ObservableSet } from 'mobx'; +import { action, computed, observable, 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 { DragManager } from '../../../util/DragManager'; import { CollectionSubView } from '../CollectionSubView'; import './CollectionSchemaView.scss'; import { SchemaColumnHeader } from './SchemaColumnHeader'; import { SchemaRowBox } from './SchemaRowBox'; -import { DragManager } from '../../../util/DragManager'; -import { PresBox } from '../../nodes/trails/PresBox'; -import { UndoManager } from '../../../util/UndoManager'; -import { returnFalse } from '../../../../Utils'; export enum ColumnType { Number, @@ -26,9 +23,12 @@ const defaultColumnKeys: string[] = ['title', 'type', 'author', 'text', 'data', @observer export class CollectionSchemaView extends CollectionSubView() { + private _ref: HTMLDivElement | null = null; private _lastSelectedRow: number | undefined; + private _selectedDocSortedArray: Doc[] = []; + private _closestDropIndex: number = 0; - @observable _rowMenuWidth: number = 60; + @observable _rowMenuWidth: number = 100; @observable _selectedDocs: ObservableSet = new ObservableSet(); @observable _isDragging: boolean = false; @@ -53,13 +53,12 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - selectRow = (e: React.PointerEvent, doc: Doc) => { + selectRow = (e: React.PointerEvent, doc: Doc, index: number) => { const ctrl = e.ctrlKey || e.metaKey; const shift = e.shiftKey; if (shift && this._lastSelectedRow !== undefined) { - const currRowIndex = this.childDocs.indexOf(doc); - const startRow = Math.min(this._lastSelectedRow, currRowIndex); - const endRow = Math.max(this._lastSelectedRow, currRowIndex); + const startRow = Math.min(this._lastSelectedRow, index); + const endRow = Math.max(this._lastSelectedRow, index); for (let i = startRow; i <= endRow; i++) { const currDoc: Doc = this.childDocs[i]; if (!this._selectedDocs.has(currDoc)) this._selectedDocs.add(currDoc); @@ -68,14 +67,14 @@ export class CollectionSchemaView extends CollectionSubView() { } else if (ctrl) { if (!this._selectedDocs.has(doc)) { this._selectedDocs.add(doc); - this._lastSelectedRow = this.childDocs.indexOf(doc); + this._lastSelectedRow = index; } else { this._selectedDocs.delete(doc); } } else { this._selectedDocs.clear(); this._selectedDocs.add(doc); - this._lastSelectedRow = this.childDocs.indexOf(doc); + this._lastSelectedRow = index; } }; @@ -84,17 +83,19 @@ export class CollectionSchemaView extends CollectionSubView() { return this.childDocs.filter(doc => this._selectedDocs.has(doc)); }; - @action.bound - moveDocument = (document: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => { - console.log('hello'); - console.log(targetCollection?.title); - if (Doc.AreProtosEqual(this.props.Document, targetCollection)) { - console.log('hi'); - return true; - } - const first = document instanceof Doc ? document : document[0]; - if (!first?._stayInCollection && addDocument !== returnFalse) { - UndoManager.RunInTempBatch(() => this.props.removeDocument?.(document) && addDocument(document)); + setDropIndex = (index: number) => { + this._closestDropIndex = index; + }; + + @action + onInternalDrop = (e: Event, de: DragManager.DropEvent) => { + if (super.onInternalDrop(e, de)) { + this._isDragging = false; + const pushedDocs: Doc[] = this.childDocs.filter((doc: Doc, index: number) => index >= this._closestDropIndex && !this._selectedDocs.has(doc)); + this.props.removeDocument?.(pushedDocs); + this.props.removeDocument?.(this._selectedDocSortedArray); + this.addDocument(this._selectedDocSortedArray); + this.addDocument(pushedDocs); return true; } return false; @@ -102,14 +103,18 @@ export class CollectionSchemaView extends CollectionSubView() { @action startDrag = (e: React.PointerEvent, doc: Doc) => { - if (this._selectedDocs.size === 0) this._selectedDocs.add(doc); + if (!this._selectedDocs.has(doc)) { + this._selectedDocs.clear(); + this._selectedDocs.add(doc); + } this._isDragging = true; - const dragData = new DragManager.DocumentDragData(this.sortedSelectedDocs(), 'move'); - dragData.moveDocument = this.moveDocument; + this._selectedDocSortedArray = this.sortedSelectedDocs(); + const dragData = new DragManager.DocumentDragData(this._selectedDocSortedArray, 'move'); + dragData.moveDocument = this.props.moveDocument; const dragItem: HTMLElement[] = []; const dragDiv = document.createElement('div'); dragDiv.className = 'presItem-multiDrag'; - dragDiv.innerText = 'Move ' + this._selectedDocs.size + ' rows'; + dragDiv.innerText = 'Move ' + this._selectedDocs.size + ' row' + (this._selectedDocs.size > 1 ? 's' : ''); dragDiv.style.position = 'absolute'; dragDiv.style.top = e.clientY + 'px'; dragDiv.style.left = e.clientX - 50 + 'px'; @@ -122,18 +127,18 @@ export class CollectionSchemaView extends CollectionSubView() { e.clientY, undefined ); - this._isDragging = false; return true; }; - @action - endDrag = (e: React.PointerEvent) => { - // this._isDragging = false; - }; - render() { return ( -
+
{ + this._ref = ele; + this.createDashEventsTarget(ele); + }} + onPointerDown={() => this._selectedDocs.clear()}>
{this.columnKeys.map((key, index) => ( @@ -141,20 +146,21 @@ export class CollectionSchemaView extends CollectionSubView() { ))}
- {this.childDocs.map((doc: Doc) => ( + {this.childDocs.map((doc: Doc, index: number) => ( ))}
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 0065a0938..8b658d834 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -13,14 +13,15 @@ import { emptyFunction, setupMoveUpEvents } from '../../../../Utils'; import { DragManager } from '../../../util/DragManager'; export interface SchemaRowBoxProps extends FieldViewProps { + rowIndex: number; columnKeys: string[]; columnWidths: number[]; rowMenuWidth: number; selectedRows: ObservableSet; - selectRow: (e: any, doc: Doc) => void; + selectRow: (e: any, doc: Doc, index: number) => void; startDrag: (e: any, doc: Doc) => boolean; - endDrag: (e: any) => void dragging: boolean; + dropIndex: (index: number) => void; } @observer @@ -38,16 +39,18 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { this, e, (e) => this.props.startDrag(e, this.props.Document), emptyFunction, - (e) => this.props.selectRow(e, this.props.Document) + (e) => this.props.selectRow(e, this.props.Document, 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.selectedRows.has(doc); @@ -60,9 +63,11 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { 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); } } }; @@ -85,6 +90,9 @@ export class SchemaRowBox extends ViewBoxBaseComponent() {
{e.stopPropagation(); this.props.addDocTab(this.props.Document, 'add:right')}}>
+
+ {this.props.rowIndex} +
{this.props.columnKeys.map((key, index) => ( -- cgit v1.2.3-70-g09d2 From d0d10426510e1bc8397eea927a65714b5b48f966 Mon Sep 17 00:00:00 2001 From: mehekj Date: Mon, 15 Aug 2022 22:36:56 -0400 Subject: add new doc as schema row --- .../collectionSchema/CollectionSchemaView.scss | 11 ++- .../collectionSchema/CollectionSchemaView.tsx | 107 ++++++++++++++++++++- .../collections/collectionSchema/SchemaRowBox.tsx | 7 +- 3 files changed, 111 insertions(+), 14 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 5ead99c02..4f644717b 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -31,7 +31,7 @@ } .schema-row { - justify-content: space-evenly; + justify-content: flex-end; .row-menu { display: flex; @@ -39,13 +39,16 @@ justify-content: center; .row-button { - width: 20px; - height: 20px; + width: 25px; + height: 25px; border-radius: 100%; background-color: $dark-gray; color: white; - padding: 5px; + margin: 3px; cursor: pointer; + display: flex; + align-items: center; + justify-content: center; } } diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index dc0cd8eac..02bc55e7a 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -1,15 +1,26 @@ import React = require('react'); import { action, computed, observable, ObservableSet } from 'mobx'; import { observer } from 'mobx-react'; -import { Doc } from '../../../../fields/Doc'; +import { Doc, DocListCast } from '../../../../fields/Doc'; import { List } from '../../../../fields/List'; import { listSpec } from '../../../../fields/Schema'; -import { Cast } from '../../../../fields/Types'; +import { Cast, StrCast } from '../../../../fields/Types'; import { DragManager } from '../../../util/DragManager'; import { CollectionSubView } from '../CollectionSubView'; import './CollectionSchemaView.scss'; import { SchemaColumnHeader } from './SchemaColumnHeader'; import { SchemaRowBox } from './SchemaRowBox'; +import { SelectionManager } from '../../../util/SelectionManager'; +import { undoBatch } from '../../../util/UndoManager'; +import { EditableView } from '../../EditableView'; +import { returnEmptyString } from '../../../../Utils'; +import { Docs, DocUtils } from '../../../documents/Documents'; +import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; +import { ContextMenu } from '../../ContextMenu'; +import { ContextMenuProps } from '../../ContextMenuItem'; +import { Id } from '../../../../fields/FieldSymbols'; +import { RichTextField } from '../../../../fields/RichTextField'; +import { ImageField } from '../../../../fields/URLField'; export enum ColumnType { Number, @@ -33,18 +44,19 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _isDragging: boolean = false; @computed get columnKeys() { - return Cast(this.props.Document.columnKeys, listSpec('string'), defaultColumnKeys); + return Cast(this.layoutDoc.columnKeys, listSpec('string'), defaultColumnKeys); } @computed get columnWidths() { return Cast( - this.props.Document.columnWidths, + this.layoutDoc.columnWidths, listSpec('number'), this.columnKeys.map(() => (this.props.PanelWidth() - this._rowMenuWidth) / this.columnKeys.length) ); } @action + @undoBatch changeColumnKey = (index: number, newKey: string) => { let currKeys = this.columnKeys; currKeys[index] = newKey; @@ -76,6 +88,13 @@ export class CollectionSchemaView extends CollectionSubView() { this._selectedDocs.add(doc); this._lastSelectedRow = index; } + + if (this._lastSelectedRow && this._selectedDocs.size > 0) { + SelectionManager.SelectSchemaViewDoc(this.childDocs[this._lastSelectedRow]); + } + else { + SelectionManager.SelectSchemaViewDoc(undefined); + } }; @action @@ -106,6 +125,8 @@ export class CollectionSchemaView extends CollectionSubView() { if (!this._selectedDocs.has(doc)) { this._selectedDocs.clear(); this._selectedDocs.add(doc); + this._lastSelectedRow = this.childDocs.indexOf(doc); + SelectionManager.SelectSchemaViewDoc(doc); } this._isDragging = true; this._selectedDocSortedArray = this.sortedSelectedDocs(); @@ -130,6 +151,83 @@ export class CollectionSchemaView extends CollectionSubView() { return true; }; + @action + addNewTextDoc = (value: string, shiftDown?: boolean, forceEmptyNote?: boolean) => { + if (!value && !forceEmptyNote) return false; + const newDoc = Docs.Create.TextDocument(value, {title: value}); + FormattedTextBox.SelectOnLoad = newDoc[Id]; + FormattedTextBox.SelectOnLoadChar = forceEmptyNote ? '' : ' '; + return this.props.addDocument?.(newDoc) || false; + }; + + menuCallback = (x: number, y: number) => { + ContextMenu.Instance.clearItems(); + const layoutItems: ContextMenuProps[] = []; + const docItems: ContextMenuProps[] = []; + const dataDoc = this.props.DataDoc || this.props.Document; + + DocUtils.addDocumentCreatorMenuItems( + doc => { + FormattedTextBox.SelectOnLoad = StrCast(doc[Id]); + return this.addDocument(doc); + }, + this.addDocument, + x, + y, + true + ); + + Array.from(Object.keys(Doc.GetProto(dataDoc))) + .filter(fieldKey => dataDoc[fieldKey] instanceof RichTextField || dataDoc[fieldKey] instanceof ImageField || typeof dataDoc[fieldKey] === 'string') + .map(fieldKey => + docItems.push({ + description: ':' + fieldKey, + event: () => { + const created = DocUtils.DocumentFromField(dataDoc, fieldKey, Doc.GetProto(this.props.Document)); + if (created) { + if (this.props.Document.isTemplateDoc) { + Doc.MakeMetadataFieldTemplate(created, this.props.Document); + } + return this.props.addDocument?.(created); + } + }, + icon: 'compress-arrows-alt', + }) + ); + Array.from(Object.keys(Doc.GetProto(dataDoc))) + .filter(fieldKey => DocListCast(dataDoc[fieldKey]).length) + .map(fieldKey => + docItems.push({ + description: ':' + fieldKey, + event: () => { + const created = Docs.Create.CarouselDocument([], { _width: 400, _height: 200, title: fieldKey }); + if (created) { + const container = this.props.Document.resolvedDataDoc ? Doc.GetProto(this.props.Document) : this.props.Document; + if (container.isTemplateDoc) { + Doc.MakeMetadataFieldTemplate(created, container); + return Doc.AddDocToList(container, Doc.LayoutFieldKey(container), created); + } + return this.props.addDocument?.(created) || false; + } + }, + icon: 'compress-arrows-alt', + }) + ); + !Doc.noviceMode && ContextMenu.Instance.addItem({ description: 'Doc Fields ...', subitems: docItems, icon: 'eye' }); + !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 }); + if (created) { + if (this.props.Document.isTemplateDoc) { + Doc.MakeMetadataFieldTemplate(created, this.props.Document); + } + this.props.addDocument?.(created); + } + }); + ContextMenu.Instance.displayMenu(x, y, undefined, true); + }; + render() { return (
+
); } diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 8b658d834..ea2ebed7a 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -90,14 +90,9 @@ export class SchemaRowBox extends ViewBoxBaseComponent() {
{e.stopPropagation(); this.props.addDocTab(this.props.Document, 'add:right')}}>
-
- {this.props.rowIndex} -
- {this.props.columnKeys.map((key, index) => ( - - ))} + {this.props.columnKeys.map((key, index) => ())}
); -- cgit v1.2.3-70-g09d2 From fb1e291b1bed4b60a645030b4a79c0760ba73fdc Mon Sep 17 00:00:00 2001 From: mehekj Date: Tue, 16 Aug 2022 18:10:15 -0400 Subject: add and remove columns (remove buggy for same named headers) --- .vscode/settings.json | 5 ++- .../collectionSchema/CollectionSchemaView.scss | 40 +++++++++++++++------- .../collectionSchema/CollectionSchemaView.tsx | 20 +++++++++-- .../collectionSchema/SchemaColumnHeader.tsx | 20 +++++++++++ 4 files changed, 69 insertions(+), 16 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/.vscode/settings.json b/.vscode/settings.json index f0cebd6fd..8849f30dd 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -10,5 +10,8 @@ "editor.detectIndentation": false, "search.usePCRE2": true, "typescript.tsdk": "node_modules/typescript/lib", - "editor.defaultFormatter": "esbenp.prettier-vscode" + "editor.defaultFormatter": "esbenp.prettier-vscode", + "[typescriptreact]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + } } diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 4f644717b..83164a82a 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -27,6 +27,10 @@ .schema-column-header { font-weight: bold; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; } } @@ -37,19 +41,6 @@ display: flex; flex-direction: row; justify-content: center; - - .row-button { - width: 25px; - height: 25px; - border-radius: 100%; - background-color: $dark-gray; - color: white; - margin: 3px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - } } .row-cells { @@ -58,5 +49,28 @@ justify-content: flex-end; } } + + .schema-header-menu { + display: flex; + flex-direction: row; + } + + .row-button, + .schema-header-button { + width: 20px; + height: 20px; + border-radius: 100%; + background-color: $dark-gray; + color: white; + margin: 3px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + + svg { + width: 12px; + } + } } } diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index bcfa695f0..4d96d5f7e 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -55,8 +55,8 @@ export class CollectionSchemaView extends CollectionSubView() { ); } - @action @undoBatch + @action changeColumnKey = (index: number, newKey: string) => { let currKeys = this.columnKeys; currKeys[index] = newKey; @@ -64,6 +64,22 @@ export class CollectionSchemaView extends CollectionSubView() { return true; }; + @undoBatch + @action + addColumn = (index: number) => { + let currKeys = this.columnKeys; + currKeys.splice(index, 0, 'title'); + this.layoutDoc.columnKeys = new List(currKeys); + }; + + @undoBatch + @action + removeColumn = (index: number) => { + let currKeys = this.columnKeys; + currKeys.splice(index, 1); + this.layoutDoc.columnKeys = new List(currKeys); + }; + @action selectRow = (e: React.PointerEvent, doc: Doc, index: number) => { const ctrl = e.ctrlKey || e.metaKey; @@ -239,7 +255,7 @@ export class CollectionSchemaView extends CollectionSubView() {
{this.columnKeys.map((key, index) => ( - + ))}
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index b9dbf4f57..f93a3d13d 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -3,12 +3,15 @@ import { computed } from 'mobx'; import { observer } from 'mobx-react'; import { EditableView } from '../../EditableView'; import './CollectionSchemaView.scss'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; export interface SchemaColumnHeaderProps { columnKeys: string[]; columnWidths: number[]; columnIndex: number; changeColumnKey: (index: number, newKey: string) => boolean; + addColumn: (index: number) => void; + removeColumn: (index: number) => void; } @observer @@ -21,6 +24,23 @@ export class SchemaColumnHeader extends React.Component return (
this.props.changeColumnKey(this.props.columnIndex, newKey)} GetValue={() => this.fieldKey} contents={this.fieldKey} /> + +
+
{ + this.props.addColumn(this.props.columnIndex + 1); + }}> + +
+
{ + this.props.removeColumn(this.props.columnIndex); + }}> + +
+
); } -- cgit v1.2.3-70-g09d2 From 330752fa253b61136b78ce7147e09e9d6004f833 Mon Sep 17 00:00:00 2001 From: mehekj Date: Thu, 18 Aug 2022 14:08:31 -0400 Subject: added external drop and column resize --- .../collectionSchema/CollectionSchemaView.scss | 32 ++++++- .../collectionSchema/CollectionSchemaView.tsx | 105 ++++++++++++++++++--- .../collectionSchema/SchemaColumnHeader.tsx | 8 +- .../collections/collectionSchema/SchemaRowBox.tsx | 6 +- 4 files changed, 133 insertions(+), 18 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 83164a82a..1d0ab459d 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -11,11 +11,12 @@ .schema-row { display: flex; flex-direction: row; + max-height: 70px; + overflow: auto; .schema-column-header, .schema-table-cell, .row-menu { - min-width: 50px; border: 1px solid $medium-gray; padding: 5px; overflow: hidden; @@ -31,6 +32,34 @@ flex-direction: row; justify-content: space-between; align-items: center; + padding: 0; + + .schema-column-title { + flex-grow: 2; + margin: 5px; + } + + .schema-header-menu { + margin: 5px; + } + + .schema-column-resizer { + height: 100%; + width: 3px; + cursor: ew-resize; + + &:hover { + background-color: $light-blue; + } + } + + .schema-column-resizer.right { + align-self: flex-end; + } + + .schema-column-resizer.left { + align-self: flex-start; + } } } @@ -41,6 +70,7 @@ display: flex; flex-direction: row; justify-content: center; + min-width: 50px; } .row-cells { diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 4d96d5f7e..a09d2722c 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -2,25 +2,25 @@ import React = require('react'); import { action, computed, observable, ObservableSet } from 'mobx'; import { observer } from 'mobx-react'; import { Doc, DocListCast } 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 { ImageField } from '../../../../fields/URLField'; +import { emptyFunction, returnEmptyString, setupMoveUpEvents } from '../../../../Utils'; +import { Docs, DocUtils } from '../../../documents/Documents'; import { DragManager } from '../../../util/DragManager'; -import { CollectionSubView } from '../CollectionSubView'; -import './CollectionSchemaView.scss'; -import { SchemaColumnHeader } from './SchemaColumnHeader'; -import { SchemaRowBox } from './SchemaRowBox'; import { SelectionManager } from '../../../util/SelectionManager'; import { undoBatch } from '../../../util/UndoManager'; -import { EditableView } from '../../EditableView'; -import { returnEmptyString } from '../../../../Utils'; -import { Docs, DocUtils } from '../../../documents/Documents'; -import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; import { ContextMenu } from '../../ContextMenu'; import { ContextMenuProps } from '../../ContextMenuItem'; -import { Id } from '../../../../fields/FieldSymbols'; -import { RichTextField } from '../../../../fields/RichTextField'; -import { ImageField } from '../../../../fields/URLField'; +import { EditableView } from '../../EditableView'; +import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; +import { CollectionSubView } from '../CollectionSubView'; +import './CollectionSchemaView.scss'; +import { SchemaColumnHeader } from './SchemaColumnHeader'; +import { SchemaRowBox } from './SchemaRowBox'; export enum ColumnType { Number, @@ -38,16 +38,18 @@ export class CollectionSchemaView extends CollectionSubView() { private _lastSelectedRow: number | undefined; private _selectedDocSortedArray: Doc[] = []; private _closestDropIndex: number = 0; + private _minColWidth: number = 120; @observable _rowMenuWidth: number = 100; @observable _selectedDocs: ObservableSet = new ObservableSet(); @observable _isDragging: boolean = false; + @observable _displayColumnWidths: number[] | undefined; @computed get columnKeys() { return Cast(this.layoutDoc.columnKeys, listSpec('string'), defaultColumnKeys); } - @computed get columnWidths() { + @computed get storedColumnWidths() { return Cast( this.layoutDoc.columnWidths, listSpec('number'), @@ -55,6 +57,10 @@ export class CollectionSchemaView extends CollectionSubView() { ); } + @computed get displayColumnWidths() { + return this._displayColumnWidths ?? this.storedColumnWidths; + } + @undoBatch @action changeColumnKey = (index: number, newKey: string) => { @@ -80,6 +86,51 @@ export class CollectionSchemaView extends CollectionSubView() { this.layoutDoc.columnKeys = new List(currKeys); }; + @action + startResize = (e: any, index: number, left: boolean) => { + this._displayColumnWidths = this.storedColumnWidths; + setupMoveUpEvents(this, e, (e, delta) => this.resizeColumn(e, index, left), this.finishResize, emptyFunction); + }; + + @action + resizeColumn = (e: PointerEvent, index: number, left: boolean) => { + if (this._displayColumnWidths) { + let shrinking; + let growing; + + let change = e.movementX; + + if (left && index !== 0) { + growing = change < 0 ? index : index - 1; + shrinking = change < 0 ? index - 1 : index; + } else if (!left && index !== this.columnKeys.length - 1) { + growing = change > 0 ? index : index + 1; + shrinking = change > 0 ? index + 1 : index; + } + + if (shrinking === undefined || growing === undefined) return true; + + change = Math.abs(change); + if (this._displayColumnWidths[shrinking] - change < this._minColWidth) { + change = this._displayColumnWidths[shrinking] - this._minColWidth; + } + + this._displayColumnWidths[shrinking] -= change; + this._displayColumnWidths[growing] += change; + + return false; + } + return true; + }; + + // @undoBatch + @action + finishResize = () => { + console.log('finished'); + this.layoutDoc.columnWidths = new List(this._displayColumnWidths); + this._displayColumnWidths = undefined; + }; + @action selectRow = (e: React.PointerEvent, doc: Doc, index: number) => { const ctrl = e.ctrlKey || e.metaKey; @@ -135,6 +186,21 @@ export class CollectionSchemaView extends CollectionSubView() { return false; }; + @action + onExternalDrop = async (e: React.DragEvent): Promise => { + console.log('hello'); + super.onExternalDrop( + e, + {}, + undoBatch( + action(docus => { + this._isDragging = false; + docus.map((doc: Doc) => this.addDocument(doc)); + }) + ) + ); + }; + @action startDrag = (e: React.PointerEvent, doc: Doc) => { if (!this._selectedDocs.has(doc)) { @@ -251,11 +317,20 @@ export class CollectionSchemaView extends CollectionSubView() { this._ref = ele; this.createDashEventsTarget(ele); }} - onPointerDown={() => this._selectedDocs.clear()}> + onPointerDown={() => this._selectedDocs.clear()} + onDrop={this.onExternalDrop.bind(this)}>
{this.columnKeys.map((key, index) => ( - + ))}
@@ -267,7 +342,7 @@ export class CollectionSchemaView extends CollectionSubView() { ContainingCollectionView={this.props.CollectionView} rowIndex={index} columnKeys={this.columnKeys} - columnWidths={this.columnWidths} + columnWidths={this.displayColumnWidths} rowMenuWidth={this._rowMenuWidth} selectedRows={this._selectedDocs} selectRow={this.selectRow} diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index f93a3d13d..bee76bb24 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -12,6 +12,7 @@ export interface SchemaColumnHeaderProps { changeColumnKey: (index: number, newKey: string) => boolean; addColumn: (index: number) => void; removeColumn: (index: number) => void; + resizeColumn: (e: any, index: number, left: boolean) => void; } @observer @@ -23,7 +24,10 @@ export class SchemaColumnHeader extends React.Component render() { return (
- this.props.changeColumnKey(this.props.columnIndex, newKey)} GetValue={() => this.fieldKey} contents={this.fieldKey} /> +
this.props.resizeColumn(e, this.props.columnIndex, true)}>
+
+ this.props.changeColumnKey(this.props.columnIndex, newKey)} GetValue={() => this.fieldKey} contents={this.fieldKey} /> +
+ +
this.props.resizeColumn(e, this.props.columnIndex, false)}>
); } diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 3d1fa0ee2..661056553 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -6,7 +6,7 @@ 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 { FieldView, FieldViewProps } from '../../nodes/FieldView'; import './CollectionSchemaView.scss'; import { SchemaTableCell } from './SchemaTableCell'; import { emptyFunction, setupMoveUpEvents } from '../../../../Utils'; @@ -26,6 +26,10 @@ export interface SchemaRowBoxProps extends FieldViewProps { @observer export class SchemaRowBox extends ViewBoxBaseComponent() { + public static LayoutString(fieldKey: string) { + return FieldView.LayoutString(SchemaRowBox, fieldKey); + } + private _ref: HTMLDivElement | null = null; isSelected = () => this.props.selectedRows.has(this.props.Document); -- cgit v1.2.3-70-g09d2 From 5425b61d62beef22d068e259ae3e2003f08e0c05 Mon Sep 17 00:00:00 2001 From: mehekj Date: Mon, 24 Oct 2022 15:06:47 -0400 Subject: switched drag element to show rows --- .../collectionSchema/CollectionSchemaView.scss | 98 +++++++++++----------- .../collectionSchema/CollectionSchemaView.tsx | 34 ++++---- .../collections/collectionSchema/SchemaRowBox.tsx | 14 ++-- 3 files changed, 73 insertions(+), 73 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 1d0ab459d..4d7e8c39f 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -7,22 +7,6 @@ .schema-table { background-color: $white; - .schema-header-row, - .schema-row { - display: flex; - flex-direction: row; - max-height: 70px; - overflow: auto; - - .schema-column-header, - .schema-table-cell, - .row-menu { - border: 1px solid $medium-gray; - padding: 5px; - overflow: hidden; - } - } - .schema-header-row { justify-content: flex-end; @@ -63,44 +47,60 @@ } } - .schema-row { - justify-content: flex-end; - - .row-menu { - display: flex; - flex-direction: row; - justify-content: center; - min-width: 50px; - } - - .row-cells { - display: flex; - flex-direction: row; - justify-content: flex-end; - } - } - .schema-header-menu { display: flex; flex-direction: row; } + } +} - .row-button, - .schema-header-button { - width: 20px; - height: 20px; - border-radius: 100%; - background-color: $dark-gray; - color: white; - margin: 3px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; +.schema-header-row, +.schema-row { + display: flex; + flex-direction: row; + max-height: 70px; + overflow: auto; + + .schema-column-header, + .schema-table-cell, + .row-menu { + border: 1px solid $medium-gray; + padding: 5px; + overflow: hidden; + } +} - svg { - width: 12px; - } - } +.schema-row { + justify-content: flex-end; + + .row-menu { + display: flex; + flex-direction: row; + justify-content: center; + min-width: 50px; + } + + .row-cells { + display: flex; + flex-direction: row; + justify-content: flex-end; + } +} + +.schema-row-button, +.schema-header-button { + width: 20px; + height: 20px; + border-radius: 100%; + background-color: $dark-gray; + color: white; + margin: 3px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + + svg { + width: 12px; } } diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 69a49598d..84a69d4b9 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -1,5 +1,5 @@ import React = require('react'); -import { action, computed, observable, ObservableSet } from 'mobx'; +import { action, computed, observable, ObservableMap, ObservableSet } from 'mobx'; import { observer } from 'mobx-react'; import { Doc, DocListCast } from '../../../../fields/Doc'; import { Id } from '../../../../fields/FieldSymbols'; @@ -41,7 +41,7 @@ export class CollectionSchemaView extends CollectionSubView() { private _minColWidth: number = 120; @observable _rowMenuWidth: number = 100; - @observable _selectedDocs: ObservableSet = new ObservableSet(); + @observable _selectedDocs: ObservableMap = new ObservableMap(); @observable _isDragging: boolean = false; @observable _displayColumnWidths: number[] | undefined; @@ -149,7 +149,7 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - selectRow = (e: React.PointerEvent, doc: Doc, index: number) => { + selectRow = (e: React.PointerEvent, doc: Doc, ref: HTMLDivElement, index: number) => { const ctrl = e.ctrlKey || e.metaKey; const shift = e.shiftKey; if (shift && this._lastSelectedRow !== undefined) { @@ -157,19 +157,19 @@ export class CollectionSchemaView extends CollectionSubView() { const endRow = Math.max(this._lastSelectedRow, index); for (let i = startRow; i <= endRow; i++) { const currDoc: Doc = this.childDocs[i]; - if (!this._selectedDocs.has(currDoc)) this._selectedDocs.add(currDoc); + if (!this._selectedDocs.has(currDoc)) this._selectedDocs.set(currDoc, ref); } this._lastSelectedRow = endRow; } else if (ctrl) { if (!this._selectedDocs.has(doc)) { - this._selectedDocs.add(doc); + this._selectedDocs.set(doc, ref); this._lastSelectedRow = index; } else { this._selectedDocs.delete(doc); } } else { this._selectedDocs.clear(); - this._selectedDocs.add(doc); + this._selectedDocs.set(doc, ref); this._lastSelectedRow = index; } @@ -219,25 +219,25 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - startDrag = (e: React.PointerEvent, doc: Doc) => { + startDrag = (e: React.PointerEvent, doc: Doc, ref: HTMLDivElement, index: number) => { if (!this._selectedDocs.has(doc)) { this._selectedDocs.clear(); - this._selectedDocs.add(doc); - this._lastSelectedRow = this.childDocs.indexOf(doc); + this._selectedDocs.set(doc, ref); + this._lastSelectedRow = index; SelectionManager.SelectSchemaViewDoc(doc); } this._isDragging = true; this._selectedDocSortedArray = this.sortedSelectedDocs(); const dragData = new DragManager.DocumentDragData(this._selectedDocSortedArray, 'move'); dragData.moveDocument = this.props.moveDocument; - const dragItem: HTMLElement[] = []; - const dragDiv = document.createElement('div'); - dragDiv.className = 'presItem-multiDrag'; - dragDiv.innerText = 'Move ' + this._selectedDocs.size + ' row' + (this._selectedDocs.size > 1 ? 's' : ''); - dragDiv.style.position = 'absolute'; - dragDiv.style.top = e.clientY + 'px'; - dragDiv.style.left = e.clientX - 50 + 'px'; - dragItem.push(dragDiv); + const dragItem: HTMLElement[] = Array.from(this._selectedDocs.values()); + // const dragDiv = document.createElement('div'); + // dragDiv.className = 'presItem-multiDrag'; + // dragDiv.innerText = 'Move ' + this._selectedDocs.size + ' row' + (this._selectedDocs.size > 1 ? 's' : ''); + // dragDiv.style.position = 'absolute'; + // dragDiv.style.top = e.clientY + 'px'; + // dragDiv.style.left = e.clientX - 50 + 'px'; + // dragItem.push(dragDiv); DragManager.StartDocumentDrag( dragItem.map(ele => ele), diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 661056553..66cc3a47a 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -17,9 +17,9 @@ export interface SchemaRowBoxProps extends FieldViewProps { columnKeys: string[]; columnWidths: number[]; rowMenuWidth: number; - selectedRows: ObservableSet; - selectRow: (e: any, doc: Doc, index: number) => void; - startDrag: (e: any, doc: Doc) => boolean; + selectedRows: ObservableMap; + selectRow: (e: any, doc: Doc, ref: HTMLDivElement, index: number) => void; + startDrag: (e: any, doc: Doc, ref: HTMLDivElement, index: number) => boolean; dragging: boolean; dropIndex: (index: number) => void; } @@ -42,9 +42,9 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { setupMoveUpEvents( this, e, - e => this.props.startDrag(e, this.props.Document), + e => this.props.startDrag(e, this.props.Document, this._ref!, this.props.rowIndex), emptyFunction, - e => this.props.selectRow(e, this.props.Document, this.props.rowIndex) + e => this.props.selectRow(e, this.props.Document, this._ref!, this.props.rowIndex) ); }; @@ -96,7 +96,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { ref={(row: HTMLDivElement | null) => (this._ref = row)}>
{ e.stopPropagation(); this.props.removeDocument?.(this.props.Document); @@ -104,7 +104,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() {
{ e.stopPropagation(); this.props.addDocTab(this.props.Document, 'add:right'); -- cgit v1.2.3-70-g09d2 From 213a92ba3aa39d144754029fde32b9d69b0f51cf Mon Sep 17 00:00:00 2001 From: mehekj Date: Mon, 7 Nov 2022 12:57:44 -0500 Subject: basic key selection menu created --- .../collectionSchema/CollectionSchemaView.scss | 8 ++ .../collectionSchema/CollectionSchemaView.tsx | 150 +++++++++++++++------ .../collectionSchema/SchemaColumnHeader.tsx | 105 +++++++++++++-- .../collections/collectionSchema/SchemaRowBox.tsx | 12 +- 4 files changed, 223 insertions(+), 52 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 4d7e8c39f..0631cd21d 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -44,6 +44,13 @@ .schema-column-resizer.left { align-self: flex-start; } + + .schema-column-menu { + background: $light-gray; + width: inherit; + position: absolute; + top: 35px; + } } } @@ -72,6 +79,7 @@ .schema-row { justify-content: flex-end; + background: white; .row-menu { display: flex; diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 84a69d4b9..7516b95b8 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -1,7 +1,7 @@ import React = require('react'); -import { action, computed, observable, ObservableMap, ObservableSet } from 'mobx'; +import { action, computed, observable, ObservableMap, ObservableSet, untracked } from 'mobx'; import { observer } from 'mobx-react'; -import { Doc, DocListCast } from '../../../../fields/Doc'; +import { Doc, DocListCast, StrListCast } from '../../../../fields/Doc'; import { Id } from '../../../../fields/FieldSymbols'; import { List } from '../../../../fields/List'; import { RichTextField } from '../../../../fields/RichTextField'; @@ -41,10 +41,26 @@ export class CollectionSchemaView extends CollectionSubView() { private _minColWidth: number = 120; @observable _rowMenuWidth: number = 100; - @observable _selectedDocs: ObservableMap = new ObservableMap(); + @observable _selectedDocs: ObservableSet = new ObservableSet(); + @observable _rowEles: ObservableMap = new ObservableMap(); @observable _isDragging: boolean = false; @observable _displayColumnWidths: number[] | undefined; + get documentKeys() { + const docs = this.childDocs; + const keys: { [key: string]: boolean } = {}; + // bcz: ugh. this is untracked since otherwise a large collection of documents will blast the server for all their fields. + // then as each document's fields come back, we update the documents _proxies. Each time we do this, the whole schema will be + // invalidated and re-rendered. This workaround will inquire all of the document fields before the options button is clicked. + // then by the time the options button is clicked, all of the fields should be in place. If a new field is added while this menu + // is displayed (unlikely) it won't show up until something else changes. + //TODO Types + untracked(() => docs.map(doc => Doc.GetAllPrototypes(doc).map(proto => Object.keys(proto).forEach(key => (keys[key] = false))))); + + // this.columns.forEach(key => (keys[key.heading] = true)); + return Array.from(Object.keys(keys)); + } + @computed get columnKeys() { return Cast(this.layoutDoc.columnKeys, listSpec('string'), defaultColumnKeys); } @@ -64,6 +80,10 @@ export class CollectionSchemaView extends CollectionSubView() { @undoBatch @action changeColumnKey = (index: number, newKey: string) => { + if (!this.documentKeys.includes(newKey)) { + this.addNewKey(newKey); + } + let currKeys = this.columnKeys; currKeys[index] = newKey; this.layoutDoc.columnKeys = new List(currKeys); @@ -72,10 +92,10 @@ export class CollectionSchemaView extends CollectionSubView() { @undoBatch @action - addColumn = (index: number) => { - let currKeys = this.columnKeys; - currKeys.splice(index, 0, 'title'); - this.layoutDoc.columnKeys = new List(currKeys); + addColumn = (index: number, key: string) => { + if (!this.documentKeys.includes(key)) { + this.addNewKey(key); + } const newColWidth = this._minColWidth; let currWidths = this.storedColumnWidths; @@ -83,17 +103,22 @@ export class CollectionSchemaView extends CollectionSubView() { const proportion = w / (this.props.PanelWidth() - this._rowMenuWidth); return proportion * (this.props.PanelWidth() - this._rowMenuWidth - newColWidth); }); - currWidths.splice(index, 0, newColWidth); + currWidths.splice(index + 1, 0, newColWidth); this.layoutDoc.columnWidths = new List(currWidths); + + let currKeys = this.columnKeys; + currKeys.splice(index + 1, 0, key); + this.layoutDoc.columnKeys = new List(currKeys); + }; + + @action + addNewKey = (key: string) => { + this.childDocs.forEach(doc => (doc[key] = key + ' default val')); }; @undoBatch @action removeColumn = (index: number) => { - let currKeys = this.columnKeys; - currKeys.splice(index, 1); - this.layoutDoc.columnKeys = new List(currKeys); - let currWidths = this.storedColumnWidths; const removedColWidth = currWidths[index]; currWidths = currWidths.map(w => { @@ -102,6 +127,10 @@ export class CollectionSchemaView extends CollectionSubView() { }); currWidths.splice(index, 1); this.layoutDoc.columnWidths = new List(currWidths); + + let currKeys = this.columnKeys; + currKeys.splice(index, 1); + this.layoutDoc.columnKeys = new List(currKeys); }; @action @@ -143,11 +172,55 @@ export class CollectionSchemaView extends CollectionSubView() { @action finishResize = () => { - console.log('finished'); this.layoutDoc.columnWidths = new List(this._displayColumnWidths); this._displayColumnWidths = undefined; }; + @undoBatch + @action + swapColumns = (index1: number, index2: number) => { + console.log(index1, index2); + const tempKey = this.columnKeys[index1]; + const tempWidth = this.storedColumnWidths[index1]; + + let currKeys = this.columnKeys; + currKeys[index1] = currKeys[index2]; + currKeys[index2] = tempKey; + this.layoutDoc.columnKeys = new List(currKeys); + + let currWidths = this.storedColumnWidths; + currWidths[index1] = currWidths[index2]; + currWidths[index2] = tempWidth; + this.layoutDoc.columnWidths = new List(currWidths); + }; + + @action + dragColumn = (e: any, index: number) => { + console.log(index); + e.stopPropagation(); + e.preventDefault(); + const rect = e.target.getBoundingClientRect(); + if (e.clientX < rect.x) { + console.log('left', e.clientX, rect.x); + if (index < 1) return true; + this.swapColumns(index - 1, index); + return true; + } + if (e.clientX > rect.x + rect.width) { + console.log('right', e.clientX, rect.x + rect.width); + if (index === this.columnKeys.length) return true; + console.log(index); + this.swapColumns(index, index + 1); + return true; + } + return false; + }; + + @action + addRowRef = (doc: Doc, ref: HTMLDivElement) => { + this._rowEles.set(doc, ref); + }; + @action selectRow = (e: React.PointerEvent, doc: Doc, ref: HTMLDivElement, index: number) => { const ctrl = e.ctrlKey || e.metaKey; @@ -157,19 +230,19 @@ export class CollectionSchemaView extends CollectionSubView() { const endRow = Math.max(this._lastSelectedRow, index); for (let i = startRow; i <= endRow; i++) { const currDoc: Doc = this.childDocs[i]; - if (!this._selectedDocs.has(currDoc)) this._selectedDocs.set(currDoc, ref); + if (!this._selectedDocs.has(currDoc)) this._selectedDocs.add(currDoc); } this._lastSelectedRow = endRow; } else if (ctrl) { if (!this._selectedDocs.has(doc)) { - this._selectedDocs.set(doc, ref); + this._selectedDocs.add(doc); this._lastSelectedRow = index; } else { this._selectedDocs.delete(doc); } } else { this._selectedDocs.clear(); - this._selectedDocs.set(doc, ref); + this._selectedDocs.add(doc); this._lastSelectedRow = index; } @@ -205,7 +278,6 @@ export class CollectionSchemaView extends CollectionSubView() { @action onExternalDrop = async (e: React.DragEvent): Promise => { - console.log('hello'); super.onExternalDrop( e, {}, @@ -222,7 +294,7 @@ export class CollectionSchemaView extends CollectionSubView() { startDrag = (e: React.PointerEvent, doc: Doc, ref: HTMLDivElement, index: number) => { if (!this._selectedDocs.has(doc)) { this._selectedDocs.clear(); - this._selectedDocs.set(doc, ref); + this._selectedDocs.add(doc); this._lastSelectedRow = index; SelectionManager.SelectSchemaViewDoc(doc); } @@ -230,14 +302,7 @@ export class CollectionSchemaView extends CollectionSubView() { this._selectedDocSortedArray = this.sortedSelectedDocs(); const dragData = new DragManager.DocumentDragData(this._selectedDocSortedArray, 'move'); dragData.moveDocument = this.props.moveDocument; - const dragItem: HTMLElement[] = Array.from(this._selectedDocs.values()); - // const dragDiv = document.createElement('div'); - // dragDiv.className = 'presItem-multiDrag'; - // dragDiv.innerText = 'Move ' + this._selectedDocs.size + ' row' + (this._selectedDocs.size > 1 ? 's' : ''); - // dragDiv.style.position = 'absolute'; - // dragDiv.style.top = e.clientY + 'px'; - // dragDiv.style.left = e.clientX - 50 + 'px'; - // dragItem.push(dragDiv); + const dragItem: HTMLElement[] = Array.from(this._selectedDocs.values()).map((doc: Doc) => this._rowEles.get(doc)); DragManager.StartDocumentDrag( dragItem.map(ele => ele), @@ -334,21 +399,27 @@ export class CollectionSchemaView extends CollectionSubView() { this._ref = ele; this.createDashEventsTarget(ele); }} - onPointerDown={() => this._selectedDocs.clear()} + onPointerDown={action(() => { + this._selectedDocs.clear(); + })} onDrop={this.onExternalDrop.bind(this)}>
- {this.columnKeys.map((key, index) => ( - - ))} + {this.columnKeys.map((key, index) => { + return ( + + ); + })}
{this.childDocs.map((doc: Doc, index: number) => ( @@ -361,11 +432,12 @@ export class CollectionSchemaView extends CollectionSubView() { columnKeys={this.columnKeys} columnWidths={this.displayColumnWidths} rowMenuWidth={this._rowMenuWidth} - selectedRows={this._selectedDocs} + selectedDocs={this._selectedDocs} selectRow={this.selectRow} startDrag={this.startDrag} dragging={this._isDragging} dropIndex={this.setDropIndex} + addRowRef={this.addRowRef} /> ))}
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index bee76bb24..a6140bafd 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -1,39 +1,124 @@ import React = require('react'); -import { computed } from 'mobx'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; -import { EditableView } from '../../EditableView'; +import { emptyFunction, setupMoveUpEvents } from '../../../../Utils'; import './CollectionSchemaView.scss'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; export interface SchemaColumnHeaderProps { columnKeys: string[]; columnWidths: number[]; columnIndex: number; + possibleKeys: string[]; changeColumnKey: (index: number, newKey: string) => boolean; - addColumn: (index: number) => void; + addColumn: (index: number, key: string) => void; removeColumn: (index: number) => void; resizeColumn: (e: any, index: number, left: boolean) => void; + dragColumn: (e: any, index: number) => boolean; } @observer export class SchemaColumnHeader extends React.Component { + @observable _menuVisible: boolean = false; + @observable _menuValue: string = ''; + @observable _menuOptions: string[] = []; + private _makeNewColumn = false; + @computed get fieldKey() { return this.props.columnKeys[this.props.columnIndex]; } + @computed get renderColumnMenu() { + return ( +
+ e.stopPropagation()} /> + {this._menuOptions.map(key => ( +
{ + e.stopPropagation(); + this.setKey(key); + }}> + {key} +
+ ))} +
{ + e.stopPropagation(); + this.setKey(this._menuValue); + }}> + + new field +
+
+ ); + } + + onSearchKeyDown = (e: React.KeyboardEvent) => { + switch (e.key) { + case 'Enter': + this.setKey(this._menuOptions.length > 0 ? this._menuOptions[0] : this._menuValue); + break; + case 'Escape': + this.toggleColumnMenu(); + break; + } + }; + + @action + setKey = (key: string) => { + if (this._makeNewColumn) { + this.props.addColumn(this.props.columnIndex, key); + } else { + this.props.changeColumnKey(this.props.columnIndex, key); + } + this.toggleColumnMenu(); + }; + + @action + updateKeySearch = (e: React.ChangeEvent) => { + this._menuValue = e.target.value; + this._menuOptions = this.props.possibleKeys.filter(value => value.toLowerCase().includes(this._menuValue.toLowerCase())); + }; + + @action + onPointerDown = (e: React.PointerEvent) => { + e.stopPropagation(); + + setupMoveUpEvents(this, e, e => this.props.dragColumn(e, this.props.columnIndex), emptyFunction, emptyFunction); + }; + + @action + toggleColumnMenu = (newCol?: boolean) => { + this._makeNewColumn = false; + if (this._menuVisible) { + this._menuVisible = false; + } else { + this._menuVisible = true; + this._menuValue = this.fieldKey; + this._menuOptions = this.props.possibleKeys; + if (newCol) { + this._makeNewColumn = true; + } + } + }; + render() { return ( -
+
this.props.resizeColumn(e, this.props.columnIndex, true)}>
-
- this.props.changeColumnKey(this.props.columnIndex, newKey)} GetValue={() => this.fieldKey} contents={this.fieldKey} /> -
+
{this.fieldKey}
{ - this.props.addColumn(this.props.columnIndex + 1); + this.toggleColumnMenu(); + }}> + +
+
{ + this.toggleColumnMenu(true); }}>
@@ -47,6 +132,8 @@ export class SchemaColumnHeader extends React.Component
this.props.resizeColumn(e, this.props.columnIndex, false)}>
+ + {this._menuVisible && this.renderColumnMenu}
); } diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 66cc3a47a..bfce61952 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -17,11 +17,12 @@ export interface SchemaRowBoxProps extends FieldViewProps { columnKeys: string[]; columnWidths: number[]; rowMenuWidth: number; - selectedRows: ObservableMap; + selectedDocs: ObservableSet; selectRow: (e: any, doc: Doc, ref: HTMLDivElement, index: number) => void; startDrag: (e: any, doc: Doc, ref: HTMLDivElement, index: number) => boolean; dragging: boolean; dropIndex: (index: number) => void; + addRowRef: (doc: Doc, ref: HTMLDivElement) => void; } @observer @@ -32,7 +33,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { private _ref: HTMLDivElement | null = null; - isSelected = () => this.props.selectedRows.has(this.props.Document); + isSelected = () => this.props.selectedDocs.has(this.props.Document); bounds = () => this._ref?.getBoundingClientRect(); @action @@ -58,7 +59,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { if (!this.props.dragging) return; let dragIsRow: boolean = true; DragManager.docsBeingDragged.forEach(doc => { - dragIsRow = this.props.selectedRows.has(doc); + dragIsRow = this.props.selectedDocs.has(doc); }); if (this._ref && dragIsRow) { const rect = this._ref.getBoundingClientRect(); @@ -93,7 +94,10 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { onPointerDown={this.onRowPointerDown} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave} - ref={(row: HTMLDivElement | null) => (this._ref = row)}> + ref={(row: HTMLDivElement | null) => { + row && this.props.addRowRef(this.props.Document, row); + this._ref = row; + }}>
Date: Mon, 14 Nov 2022 10:22:29 -0500 Subject: added menu for creating new keys --- .../collectionSchema/CollectionSchemaView.scss | 2 + .../collectionSchema/CollectionSchemaView.tsx | 16 ++-- .../collectionSchema/SchemaColumnHeader.tsx | 103 +++++++++++++++++---- 3 files changed, 93 insertions(+), 28 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 0631cd21d..696bfd67c 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -50,6 +50,8 @@ width: inherit; position: absolute; top: 35px; + min-width: 200px; + padding: 10px; } } } diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 7516b95b8..0466ce343 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -79,26 +79,25 @@ export class CollectionSchemaView extends CollectionSubView() { @undoBatch @action - changeColumnKey = (index: number, newKey: string) => { + changeColumnKey = (index: number, newKey: string, defaultVal?: any) => { if (!this.documentKeys.includes(newKey)) { - this.addNewKey(newKey); + this.addNewKey(newKey, defaultVal); } let currKeys = this.columnKeys; currKeys[index] = newKey; this.layoutDoc.columnKeys = new List(currKeys); - return true; }; @undoBatch @action - addColumn = (index: number, key: string) => { + addColumn = (index: number, key: string, defaultVal?: any) => { if (!this.documentKeys.includes(key)) { - this.addNewKey(key); + this.addNewKey(key, defaultVal); } - const newColWidth = this._minColWidth; 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); @@ -112,8 +111,9 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - addNewKey = (key: string) => { - this.childDocs.forEach(doc => (doc[key] = key + ' default val')); + addNewKey = (key: string, defaultVal: any) => { + console.log(defaultVal); + this.childDocs.forEach(doc => (doc[key] = defaultVal)); }; @undoBatch diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index a6140bafd..cdae79d0c 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -4,14 +4,15 @@ import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; import { emptyFunction, setupMoveUpEvents } from '../../../../Utils'; import './CollectionSchemaView.scss'; +import { ColumnType } from './CollectionSchemaView'; export interface SchemaColumnHeaderProps { columnKeys: string[]; columnWidths: number[]; columnIndex: number; possibleKeys: string[]; - changeColumnKey: (index: number, newKey: string) => boolean; - addColumn: (index: number, key: string) => void; + changeColumnKey: (index: number, newKey: string, defaultVal?: any) => void; + addColumn: (index: number, key: string, defaultVal?: any) => void; removeColumn: (index: number) => void; resizeColumn: (e: any, index: number, left: boolean) => void; dragColumn: (e: any, index: number) => boolean; @@ -20,6 +21,9 @@ export interface SchemaColumnHeaderProps { @observer export class SchemaColumnHeader extends React.Component { @observable _menuVisible: boolean = false; + @observable _makeNewField: boolean = false; + @observable _newFieldType: ColumnType = ColumnType.Number; + @observable _newFieldDefault: any = 0; @observable _menuValue: string = ''; @observable _menuOptions: string[] = []; private _makeNewColumn = false; @@ -28,26 +32,85 @@ export class SchemaColumnHeader extends React.Component return this.props.columnKeys[this.props.columnIndex]; } + @computed get fieldDefaultInput() { + switch (this._newFieldType) { + case ColumnType.Number: + return e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />; + case ColumnType.Boolean: + return e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />; + case ColumnType.String: + return e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />; + } + } + @computed get renderColumnMenu() { return (
e.stopPropagation()} /> - {this._menuOptions.map(key => ( -
{ - e.stopPropagation(); - this.setKey(key); - }}> - {key} + {this._makeNewField ? ( +
+ { + this._newFieldType = ColumnType.Number; + this._newFieldDefault = 0; + })} + />{' '} + math + { + this._newFieldType = ColumnType.Boolean; + this._newFieldDefault = false; + })} + />{' '} + boolean + { + this._newFieldType = ColumnType.String; + this._newFieldDefault = ''; + })} + />{' '} + string + {this.fieldDefaultInput} +
{ + this.setKey(this._menuValue, this._newFieldDefault); + this._makeNewField = false; + })}> + done +
- ))} -
{ - e.stopPropagation(); - this.setKey(this._menuValue); - }}> - + new field -
+ ) : ( +
+
{ + e.stopPropagation(); + this._makeNewField = true; + })}> + + new field +
+ {this._menuOptions.map(key => ( +
{ + e.stopPropagation(); + this.setKey(key); + }}> + {key} +
+ ))} +
+ )}
); } @@ -64,11 +127,11 @@ export class SchemaColumnHeader extends React.Component }; @action - setKey = (key: string) => { + setKey = (key: string, defaultVal?: any) => { if (this._makeNewColumn) { - this.props.addColumn(this.props.columnIndex, key); + this.props.addColumn(this.props.columnIndex, key, defaultVal); } else { - this.props.changeColumnKey(this.props.columnIndex, key); + this.props.changeColumnKey(this.props.columnIndex, key, defaultVal); } this.toggleColumnMenu(); }; -- cgit v1.2.3-70-g09d2 From a58e71a9eea2717151e1a8c73e27068b02256390 Mon Sep 17 00:00:00 2001 From: mehekj Date: Mon, 14 Nov 2022 11:19:48 -0500 Subject: cleanup --- .../collectionSchema/CollectionSchemaView.scss | 56 ++++++++++- .../collectionSchema/CollectionSchemaView.tsx | 2 +- .../collectionSchema/SchemaColumnHeader.tsx | 107 ++++++++++++--------- 3 files changed, 118 insertions(+), 47 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 696bfd67c..99f49eb0e 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -51,7 +51,61 @@ position: absolute; top: 35px; min-width: 200px; - padding: 10px; + display: flex; + flex-direction: column; + align-items: flex-start; + + .schema-key-search-input { + width: calc(100% - 20px); + margin: 10px; + } + + .schema-key-search-result { + cursor: pointer; + padding: 2px 10px; + width: 100%; + + &:hover { + background-color: $medium-gray; + } + } + + .schema-key-search, + .schema-new-key-options { + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + } + + .schema-key-list { + width: 100%; + max-height: 300px; + overflow-y: auto; + } + + .schema-key-type-option { + margin: 2px 10px; + + input { + margin-right: 5px; + } + } + + .schema-key-default-val { + margin: 5px 10px; + } + + .schema-column-menu-button { + cursor: pointer; + padding: 2px 5px; + background: $medium-blue; + border-radius: 9999px; + color: $white; + width: fit-content; + margin: 5px; + align-self: center; + } } } } diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 0466ce343..24008a21d 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -38,7 +38,7 @@ export class CollectionSchemaView extends CollectionSubView() { private _lastSelectedRow: number | undefined; private _selectedDocSortedArray: Doc[] = []; private _closestDropIndex: number = 0; - private _minColWidth: number = 120; + private _minColWidth: number = 150; @observable _rowMenuWidth: number = 100; @observable _selectedDocs: ObservableSet = new ObservableSet(); diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index cdae79d0c..b9e25a473 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -37,7 +37,12 @@ export class SchemaColumnHeader extends React.Component case ColumnType.Number: return e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />; case ColumnType.Boolean: - return e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />; + return ( + <> + e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} /> + {this._newFieldDefault ? 'true' : 'false'} + + ); case ColumnType.String: return e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />; } @@ -46,44 +51,51 @@ export class SchemaColumnHeader extends React.Component @computed get renderColumnMenu() { return (
- e.stopPropagation()} /> + e.stopPropagation()} /> {this._makeNewField ? (
- { - this._newFieldType = ColumnType.Number; - this._newFieldDefault = 0; - })} - />{' '} - math - { - this._newFieldType = ColumnType.Boolean; - this._newFieldDefault = false; - })} - />{' '} - boolean - { - this._newFieldType = ColumnType.String; - this._newFieldDefault = ''; - })} - />{' '} - string - {this.fieldDefaultInput} +
+ { + this._newFieldType = ColumnType.Number; + this._newFieldDefault = 0; + })} + /> + number +
+
+ { + this._newFieldType = ColumnType.Boolean; + this._newFieldDefault = false; + })} + /> + boolean +
+
+ { + this._newFieldType = ColumnType.String; + this._newFieldDefault = ''; + })} + /> + string +
+
value: {this.fieldDefaultInput}
{ this.setKey(this._menuValue, this._newFieldDefault); this._makeNewField = false; @@ -94,21 +106,25 @@ export class SchemaColumnHeader extends React.Component ) : (
{ e.stopPropagation(); this._makeNewField = true; })}> + new field
- {this._menuOptions.map(key => ( -
{ - e.stopPropagation(); - this.setKey(key); - }}> - {key} -
- ))} +
+ {this._menuOptions.map(key => ( +
{ + e.stopPropagation(); + this.setKey(key); + }}> + {key} +
+ ))} +
)}
@@ -158,6 +174,7 @@ export class SchemaColumnHeader extends React.Component this._menuVisible = true; this._menuValue = this.fieldKey; this._menuOptions = this.props.possibleKeys; + this._makeNewField = false; if (newCol) { this._makeNewColumn = true; } -- cgit v1.2.3-70-g09d2 From 73d3c63658c4bdf3268ea81a02eb96566869b855 Mon Sep 17 00:00:00 2001 From: mehekj Date: Mon, 21 Nov 2022 12:38:37 -0500 Subject: column deletion and new key menu fixes --- .../collectionSchema/CollectionSchemaView.scss | 13 +++- .../collectionSchema/CollectionSchemaView.tsx | 73 +++++++++++++--------- .../collectionSchema/SchemaColumnHeader.tsx | 31 +++++---- .../collections/collectionSchema/SchemaRowBox.tsx | 2 +- 4 files changed, 74 insertions(+), 45 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 99f49eb0e..4fa5d80e2 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -78,6 +78,15 @@ align-items: flex-start; } + .schema-new-key-options { + margin: 10px; + .schema-key-warning { + color: red; + font-weight: normal; + align-self: center; + } + } + .schema-key-list { width: 100%; max-height: 300px; @@ -85,7 +94,7 @@ } .schema-key-type-option { - margin: 2px 10px; + margin: 2px 0px; input { margin-right: 5px; @@ -93,7 +102,7 @@ } .schema-key-default-val { - margin: 5px 10px; + margin: 5px 0; } .schema-column-menu-button { diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 24008a21d..f7c68c803 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -1,5 +1,5 @@ import React = require('react'); -import { action, computed, observable, ObservableMap, ObservableSet, untracked } from 'mobx'; +import { action, computed, observable, ObservableMap, ObservableSet, trace, untracked } from 'mobx'; import { observer } from 'mobx-react'; import { Doc, DocListCast, StrListCast } from '../../../../fields/Doc'; import { Id } from '../../../../fields/FieldSymbols'; @@ -66,11 +66,22 @@ export class CollectionSchemaView extends CollectionSubView() { } @computed get storedColumnWidths() { - return Cast( + let widths = Cast( this.layoutDoc.columnWidths, listSpec('number'), this.columnKeys.map(() => (this.props.PanelWidth() - this._rowMenuWidth) / this.columnKeys.length) ); + + const totalWidth = widths.reduce((sum, width) => sum + width, 0); + if (totalWidth !== this.props.PanelWidth() - this._rowMenuWidth) { + widths = widths.map(w => { + const proportion = w / totalWidth; + return proportion * (this.props.PanelWidth() - this._rowMenuWidth); + }); + // this.layoutDoc.columnWidths = new List(widths); + } + + return widths; } @computed get displayColumnWidths() { @@ -84,7 +95,7 @@ export class CollectionSchemaView extends CollectionSubView() { this.addNewKey(newKey, defaultVal); } - let currKeys = this.columnKeys; + let currKeys = [...this.columnKeys]; currKeys[index] = newKey; this.layoutDoc.columnKeys = new List(currKeys); }; @@ -96,7 +107,7 @@ export class CollectionSchemaView extends CollectionSubView() { this.addNewKey(key, defaultVal); } - let currWidths = this.storedColumnWidths; + let currWidths = [...this.storedColumnWidths]; const newColWidth = this.props.PanelWidth() / (currWidths.length + 1); currWidths = currWidths.map(w => { const proportion = w / (this.props.PanelWidth() - this._rowMenuWidth); @@ -105,21 +116,21 @@ export class CollectionSchemaView extends CollectionSubView() { currWidths.splice(index + 1, 0, newColWidth); this.layoutDoc.columnWidths = new List(currWidths); - let currKeys = this.columnKeys; + let currKeys = [...this.columnKeys]; currKeys.splice(index + 1, 0, key); this.layoutDoc.columnKeys = new List(currKeys); }; @action addNewKey = (key: string, defaultVal: any) => { - console.log(defaultVal); this.childDocs.forEach(doc => (doc[key] = defaultVal)); }; @undoBatch @action removeColumn = (index: number) => { - let currWidths = this.storedColumnWidths; + if (this.columnKeys.length === 1) return; + let currWidths = [...this.storedColumnWidths]; const removedColWidth = currWidths[index]; currWidths = currWidths.map(w => { const proportion = w / (this.props.PanelWidth() - this._rowMenuWidth - removedColWidth); @@ -128,9 +139,11 @@ export class CollectionSchemaView extends CollectionSubView() { currWidths.splice(index, 1); this.layoutDoc.columnWidths = new List(currWidths); - let currKeys = this.columnKeys; + let currKeys = [...this.columnKeys]; currKeys.splice(index, 1); this.layoutDoc.columnKeys = new List(currKeys); + console.log([...this.storedColumnWidths]); + console.log([...this.columnKeys]); }; @action @@ -179,7 +192,6 @@ export class CollectionSchemaView extends CollectionSubView() { @undoBatch @action swapColumns = (index1: number, index2: number) => { - console.log(index1, index2); const tempKey = this.columnKeys[index1]; const tempWidth = this.storedColumnWidths[index1]; @@ -194,27 +206,23 @@ export class CollectionSchemaView extends CollectionSubView() { this.layoutDoc.columnWidths = new List(currWidths); }; - @action - dragColumn = (e: any, index: number) => { - console.log(index); - e.stopPropagation(); - e.preventDefault(); - const rect = e.target.getBoundingClientRect(); - if (e.clientX < rect.x) { - console.log('left', e.clientX, rect.x); - if (index < 1) return true; - this.swapColumns(index - 1, index); - return true; - } - if (e.clientX > rect.x + rect.width) { - console.log('right', e.clientX, rect.x + rect.width); - if (index === this.columnKeys.length) return true; - console.log(index); - this.swapColumns(index, index + 1); - return true; - } - return false; - }; + // @action + // dragColumn = (e: any, index: number) => { + // e.stopPropagation(); + // e.preventDefault(); + // const rect = e.target.getBoundingClientRect(); + // if (e.clientX < rect.x) { + // if (index < 1) return true; + // this.swapColumns(index - 1, index); + // return true; + // } + // if (e.clientX > rect.x + rect.width) { + // if (index === this.columnKeys.length) return true; + // this.swapColumns(index, index + 1); + // return true; + // } + // return false; + // }; @action addRowRef = (doc: Doc, ref: HTMLDivElement) => { @@ -405,9 +413,11 @@ export class CollectionSchemaView extends CollectionSubView() { onDrop={this.onExternalDrop.bind(this)}>
+
{this.columnKeys.map((key, index) => { return ( ); })} @@ -425,6 +435,7 @@ export class CollectionSchemaView extends CollectionSubView() { {this.childDocs.map((doc: Doc, index: number) => ( void; removeColumn: (index: number) => void; resizeColumn: (e: any, index: number, left: boolean) => void; - dragColumn: (e: any, index: number) => boolean; + // dragColumn: (e: any, index: number) => boolean; } @observer @@ -24,6 +24,7 @@ export class SchemaColumnHeader extends React.Component @observable _makeNewField: boolean = false; @observable _newFieldType: ColumnType = ColumnType.Number; @observable _newFieldDefault: any = 0; + @observable _newFieldWarning: string = ''; @observable _menuValue: string = ''; @observable _menuOptions: string[] = []; private _makeNewColumn = false; @@ -94,11 +95,17 @@ export class SchemaColumnHeader extends React.Component string
value: {this.fieldDefaultInput}
+
{this._newFieldWarning}
{ - this.setKey(this._menuValue, this._newFieldDefault); - this._makeNewField = false; + if (this.props.possibleKeys.includes(this._menuValue)) { + this._newFieldWarning = 'Field already exists'; + } else if (this._menuValue.length === 0) { + this._newFieldWarning = 'Field cannot be an empty string'; + } else { + this.setKey(this._menuValue, this._newFieldDefault); + } })}> done
@@ -134,7 +141,7 @@ export class SchemaColumnHeader extends React.Component onSearchKeyDown = (e: React.KeyboardEvent) => { switch (e.key) { case 'Enter': - this.setKey(this._menuOptions.length > 0 ? this._menuOptions[0] : this._menuValue); + this.setKey(this._menuOptions.length > 0 && this._menuValue.length > 0 ? this._menuOptions[0] : this._menuValue); break; case 'Escape': this.toggleColumnMenu(); @@ -158,12 +165,12 @@ export class SchemaColumnHeader extends React.Component this._menuOptions = this.props.possibleKeys.filter(value => value.toLowerCase().includes(this._menuValue.toLowerCase())); }; - @action - onPointerDown = (e: React.PointerEvent) => { - e.stopPropagation(); + // @action + // onPointerDown = (e: React.PointerEvent) => { + // e.stopPropagation(); - setupMoveUpEvents(this, e, e => this.props.dragColumn(e, this.props.columnIndex), emptyFunction, emptyFunction); - }; + // setupMoveUpEvents(this, e, e => this.props.dragColumn(e, this.props.columnIndex), emptyFunction, emptyFunction); + // }; @action toggleColumnMenu = (newCol?: boolean) => { @@ -172,9 +179,11 @@ export class SchemaColumnHeader extends React.Component this._menuVisible = false; } else { this._menuVisible = true; - this._menuValue = this.fieldKey; + this._menuValue = ''; this._menuOptions = this.props.possibleKeys; this._makeNewField = false; + this._newFieldWarning = ''; + this._makeNewField = false; if (newCol) { this._makeNewColumn = true; } @@ -183,7 +192,7 @@ export class SchemaColumnHeader extends React.Component render() { return ( -
+
this.props.resizeColumn(e, this.props.columnIndex, true)}>
{this.fieldKey}
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index bfce61952..5c1f32565 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -118,7 +118,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() {
{this.props.columnKeys.map((key, index) => ( - + ))}
-- cgit v1.2.3-70-g09d2 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 --- package-lock.json | 39 - src/client/documents/Documents.ts | 4 + .../collectionSchema/CollectionSchemaView.scss | 6 + .../collectionSchema/CollectionSchemaView.tsx | 129 +- .../collections/collectionSchema/SchemaRowBox.tsx | 80 +- .../OldCollectionSchemaCells.tsx | 1366 +++++++++---------- .../OldCollectionSchemaMovableColumn.tsx | 250 ++-- .../OldCollectionSchemaMovableRow.tsx | 274 ++-- .../OldCollectionSchemaView.tsx | 1298 +++++++++--------- .../old_collectionSchema/OldSchemaTable.tsx | 1388 ++++++++++---------- src/client/views/nodes/DocumentContentsView.tsx | 2 + 11 files changed, 2451 insertions(+), 2385 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/package-lock.json b/package-lock.json index 26e7a41d7..7f93ef3c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5303,16 +5303,6 @@ "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=", "dev": true }, - "d": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz", - "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==", - "dev": true, - "requires": { - "es5-ext": "^0.10.50", - "type": "^1.0.1" - } - }, "d3-array": { "version": "2.12.1", "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz", @@ -6480,28 +6470,6 @@ "is-symbol": "^1.0.2" } }, - "es5-ext": { - "version": "0.10.62", - "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz", - "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==", - "dev": true, - "requires": { - "es6-iterator": "^2.0.3", - "es6-symbol": "^3.1.3", - "next-tick": "^1.1.0" - } - }, - "es6-iterator": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz", - "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==", - "dev": true, - "requires": { - "d": "1", - "es5-ext": "^0.10.35", - "es6-symbol": "^3.1.1" - } - }, "es6-promise": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.2.1.tgz", @@ -6513,7 +6481,6 @@ "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==", "dev": true, "requires": { - "d": "^1.0.1", "ext": "^1.1.2" } }, @@ -21699,12 +21666,6 @@ "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz", "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=" }, - "type": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz", - "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==", - "dev": true - }, "type-check": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz", diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 1fd07d61d..58e318879 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -1150,6 +1150,10 @@ export namespace Docs { return InstanceFromProto(Prototypes.get(DocumentType.DATAVIZ), new CsvField(url), { title: 'Data Viz', ...options }); } + export function SchemaRowDocument(options?: DocumentOptions) { + return InstanceFromProto(Prototypes.get(DocumentType.SCHEMAROW), undefined, { ...(options || {}) }); + } + export function DockDocument(documents: Array, config: string, options: DocumentOptions, id?: string) { return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { freezeChildren: 'remove|add', ...options, viewType: CollectionViewType.Docking, _viewType: CollectionViewType.Docking, dockingConfig: config }, id); } diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 4fa5d80e2..e0d0101a2 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -126,10 +126,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 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} + /> +
+ ); + + // + })}
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 5c1f32565..f790e9dbf 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -1,8 +1,8 @@ import React = require('react'); import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, ObservableMap, ObservableSet } from 'mobx'; +import { action, computed, ObservableMap, ObservableSet } from 'mobx'; import { observer } from 'mobx-react'; -import { Doc } from '../../../../fields/Doc'; +import { Doc, StrListCast } from '../../../../fields/Doc'; import { undoBatch } from '../../../util/UndoManager'; import { ViewBoxBaseComponent } from '../../DocComponent'; import { Colors } from '../../global/globalEnums'; @@ -11,6 +11,10 @@ import './CollectionSchemaView.scss'; import { SchemaTableCell } from './SchemaTableCell'; import { emptyFunction, setupMoveUpEvents } from '../../../../Utils'; import { DragManager } from '../../../util/DragManager'; +import { OpenWhere } from '../../nodes/DocumentView'; +import { Cast } from '../../../../fields/Types'; +import { listSpec } from '../../../../fields/Schema'; +import { CollectionSchemaView } from './CollectionSchemaView'; export interface SchemaRowBoxProps extends FieldViewProps { rowIndex: number; @@ -26,40 +30,61 @@ 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; - isSelected = () => this.props.selectedDocs.has(this.props.Document); bounds = () => this._ref?.getBoundingClientRect(); + @computed get columnKeys() { + return StrListCast(this.props.ContainingCollectionDoc?.columnKeys); + } + + @computed get storedColumnWidths() { + let widths = Cast( + this.props.ContainingCollectionDoc?.columnWidths, + listSpec('number'), + 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() - CollectionSchemaView._rowMenuWidth) { + widths = widths.map(w => { + const proportion = w / totalWidth; + return proportion * (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth); + }); + } + + return widths; + } + @action onRowPointerDown = (e: React.PointerEvent) => { e.stopPropagation(); - 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) - ); + // 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; + // if (!this.props.dragging) return; document.removeEventListener('pointermove', this.onPointerMove); document.addEventListener('pointermove', this.onPointerMove); }; onPointerMove = (e: any) => { - if (!this.props.dragging) return; + // if (!this.props.dragging) return; let dragIsRow: boolean = true; DragManager.docsBeingDragged.forEach(doc => { - dragIsRow = this.props.selectedDocs.has(doc); + // dragIsRow = this.props.selectedDocs.has(doc); }); if (this._ref && dragIsRow) { const rect = this._ref.getBoundingClientRect(); @@ -69,11 +94,11 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { if (y <= halfLine) { this._ref.style.borderTop = `solid 2px ${Colors.MEDIUM_BLUE}`; this._ref.style.borderBottom = '0px'; - this.props.dropIndex(this.props.rowIndex); + // 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); + // this.props.dropIndex(this.props.rowIndex + 1); } } }; @@ -90,15 +115,22 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { return (
{ - row && this.props.addRowRef(this.props.Document, row); + // row && this.props.addRowRef(this.props.Document, row); this._ref = row; }}> -
+
{ @@ -111,14 +143,14 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { className="schema-row-button" onPointerDown={e => { e.stopPropagation(); - this.props.addDocTab(this.props.Document, 'add:right'); + this.props.addDocTab(this.props.Document, OpenWhere.addRight); }}>
- {this.props.columnKeys.map((key, index) => ( - + {this.columnKeys.map((key, index) => ( + ))}
diff --git a/src/client/views/collections/old_collectionSchema/OldCollectionSchemaCells.tsx b/src/client/views/collections/old_collectionSchema/OldCollectionSchemaCells.tsx index 97a6c5c18..5953f85ad 100644 --- a/src/client/views/collections/old_collectionSchema/OldCollectionSchemaCells.tsx +++ b/src/client/views/collections/old_collectionSchema/OldCollectionSchemaCells.tsx @@ -1,683 +1,683 @@ -import React = require('react'); -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, observable } from 'mobx'; -import { observer } from 'mobx-react'; -import { extname } from 'path'; -import DatePicker from 'react-datepicker'; -import { CellInfo } from 'react-table'; -import { DateField } from '../../../../fields/DateField'; -import { Doc, DocListCast, Field, Opt } from '../../../../fields/Doc'; -import { Id } from '../../../../fields/FieldSymbols'; -import { List } from '../../../../fields/List'; -import { SchemaHeaderField } from '../../../../fields/SchemaHeaderField'; -import { ComputedField } from '../../../../fields/ScriptField'; -import { BoolCast, Cast, DateCast, FieldValue, StrCast } from '../../../../fields/Types'; -import { ImageField } from '../../../../fields/URLField'; -import { emptyFunction, Utils } from '../../../../Utils'; -import { Docs } from '../../../documents/Documents'; -import { DocumentType } from '../../../documents/DocumentTypes'; -import { DocumentManager } from '../../../util/DocumentManager'; -import { DragManager } from '../../../util/DragManager'; -import { KeyCodes } from '../../../util/KeyCodes'; -import { CompileScript } from '../../../util/Scripting'; -import { SearchUtil } from '../../../util/SearchUtil'; -import { SnappingManager } from '../../../util/SnappingManager'; -import { undoBatch } from '../../../util/UndoManager'; -import '../../../views/DocumentDecorations.scss'; -import { EditableView } from '../../EditableView'; -import { MAX_ROW_HEIGHT } from '../../global/globalCssVariables.scss'; -import { DocumentIconContainer } from '../../nodes/DocumentIcon'; -import { OverlayView } from '../../OverlayView'; -import { CollectionView } from '../CollectionView'; -import './CollectionSchemaView.scss'; -import { OpenWhere } from '../../nodes/DocumentView'; -import { PinProps } from '../../nodes/trails'; - -// intialize cell properties -export interface CellProps { - row: number; - col: number; - rowProps: CellInfo; - // currently unused - CollectionView: Opt; - // currently unused - ContainingCollection: Opt; - Document: Doc; - // column name - fieldKey: string; - // currently unused - renderDepth: number; - // called when a button is pressed on the node itself - addDocTab: (document: Doc, where: OpenWhere) => boolean; - pinToPres: (document: Doc, pinProps: PinProps) => void; - moveDocument?: (document: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => boolean; - isFocused: boolean; - changeFocusedCellByIndex: (row: number, col: number) => void; - // set whether the cell is in the isEditing mode - setIsEditing: (isEditing: boolean) => void; - isEditable: boolean; - setPreviewDoc: (doc: Doc) => void; - setComputed: (script: string, doc: Doc, field: string, row: number, col: number) => boolean; - getField: (row: number, col?: number) => void; - // currnetly unused - showDoc: (doc: Doc | undefined, dataDoc?: any, screenX?: number, screenY?: number) => void; -} - -@observer -export class CollectionSchemaCell extends React.Component { - // return a field key that is corrected for whether it COMMENT - public static resolvedFieldKey(column: string, rowDoc: Doc) { - const fieldKey = column; - if (fieldKey.startsWith('*')) { - const rootKey = fieldKey.substring(1); - const allKeys = [...Array.from(Object.keys(rowDoc)), ...Array.from(Object.keys(Doc.GetProto(rowDoc)))]; - const matchedKeys = allKeys.filter(key => key.includes(rootKey)); - if (matchedKeys.length) return matchedKeys[0]; - } - return fieldKey; - } - @observable protected _isEditing: boolean = false; - protected _focusRef = React.createRef(); - protected _rowDoc = this.props.rowProps.original; - // Gets the serialized data in proto form of the base proto that this document's proto inherits from - protected _rowDataDoc = Doc.GetProto(this.props.rowProps.original); - // methods for dragging and dropping - protected _dropDisposer?: DragManager.DragDropDisposer; - @observable contents: string = ''; - - componentDidMount() { - document.addEventListener('keydown', this.onKeyDown); - } - componentWillUnmount() { - document.removeEventListener('keydown', this.onKeyDown); - } - - @action - onKeyDown = (e: KeyboardEvent): void => { - // If a cell is editable and clicked, hitting enter shoudl allow the user to edit it - if (this.props.isFocused && this.props.isEditable && e.keyCode === KeyCodes.ENTER) { - document.removeEventListener('keydown', this.onKeyDown); - this._isEditing = true; - this.props.setIsEditing(true); - } - }; - - @action - isEditingCallback = (isEditing: boolean): void => { - // a general method that takes a boolean that determines whether the cell should be in - // is-editing mode - // remove the event listener if it's there - document.removeEventListener('keydown', this.onKeyDown); - // it's not already in is-editing mode, re-add the event listener - isEditing && document.addEventListener('keydown', this.onKeyDown); - this._isEditing = isEditing; - this.props.setIsEditing(isEditing); - this.props.changeFocusedCellByIndex(this.props.row, this.props.col); - }; - - @action - onPointerDown = async (e: React.PointerEvent): Promise => { - // pan to the cell - this.onItemDown(e); - // focus on it - this.props.changeFocusedCellByIndex(this.props.row, this.props.col); - this.props.setPreviewDoc(this.props.rowProps.original); - - let url: string; - if ((url = StrCast(this.props.rowProps.row.href))) { - // opens up the the doc in a new window, blurring the old one - try { - new URL(url); - const temp = window.open(url)!; - temp.blur(); - window.focus(); - } catch {} - } - - const doc = Cast(this._rowDoc[this.renderFieldKey], Doc, null); - doc && this.props.setPreviewDoc(doc); - }; - - @undoBatch - applyToDoc = (doc: Doc, row: number, col: number, run: (args?: { [name: string]: any }) => any) => { - // apply a specified change to the cell - const res = run({ this: doc, $r: row, $c: col, $: (r: number = 0, c: number = 0) => this.props.getField(r + row, c + col) }); - if (!res.success) return false; - // change what is rendered to this new changed cell content - doc[this.renderFieldKey] = res.result; - return true; - // return whether the change was successful - }; - - private drop = (e: Event, de: DragManager.DropEvent) => { - // if the drag has data at its completion - if (de.complete.docDragData) { - // if only one doc was dragged - if (de.complete.docDragData.draggedDocuments.length === 1) { - // update the renderFieldKey - this._rowDataDoc[this.renderFieldKey] = de.complete.docDragData.draggedDocuments[0]; - } else { - // create schema document reflecting the new column arrangement - const coll = Docs.Create.SchemaDocument([new SchemaHeaderField('title', '#f1efeb')], de.complete.docDragData.draggedDocuments, {}); - this._rowDataDoc[this.renderFieldKey] = coll; - } - e.stopPropagation(); - } - }; - - protected dropRef = (ele: HTMLElement | null) => { - // if the drop disposer is not undefined, run its function - this._dropDisposer?.(); - // if ele is not null, give ele a non-undefined drop disposer - ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this))); - }; - - returnHighlights(contents: string, positions?: number[]) { - if (positions) { - const results = []; - StrCast(this.props.Document._searchString); - const length = StrCast(this.props.Document._searchString).length; - const color = contents ? 'black' : 'grey'; - - results.push( - - {contents?.slice(0, positions[0])} - - ); - positions.forEach((num, cur) => { - results.push( - - {contents?.slice(num, num + length)} - - ); - let end = 0; - cur === positions.length - 1 ? (end = contents.length) : (end = positions[cur + 1]); - results.push( - - {contents?.slice(num + length, end)} - - ); - }); - return results; - } - return {contents ? contents?.valueOf() : 'undefined'}; - } - - @computed get renderFieldKey() { - // gets the resolved field key of this cell - return CollectionSchemaCell.resolvedFieldKey(this.props.rowProps.column.id!, this.props.rowProps.original); - } - - onItemDown = async (e: React.PointerEvent) => { - // if the document is a document used to change UI for search results in schema view - if (this.props.Document._searchDoc) { - const aliasdoc = await SearchUtil.GetAliasesOfDocument(this._rowDataDoc); - const targetContext = aliasdoc.length <= 0 ? undefined : Cast(aliasdoc[0].context, Doc, null); - // Jump to the this document - DocumentManager.Instance.jumpToDocument(this._rowDoc, { willPan: true }, emptyFunction, targetContext ? [targetContext] : [], () => this.props.setPreviewDoc(this._rowDoc)); - } - }; - - renderCellWithType(type: string | undefined) { - const dragRef: React.RefObject = React.createRef(); - - // the column - const fieldKey = this.renderFieldKey; - // the exact cell - const field = this._rowDoc[fieldKey]; - - const onPointerEnter = (e: React.PointerEvent): void => { - // e.buttons === 1 means the left moue pointer is down - if (e.buttons === 1 && SnappingManager.GetIsDragging() && (type === 'document' || type === undefined)) { - dragRef.current!.className = 'collectionSchemaView-cellContainer doc-drag-over'; - } - }; - const onPointerLeave = (e: React.PointerEvent): void => { - // change the class name to indicate that the cell is no longer being dragged - dragRef.current!.className = 'collectionSchemaView-cellContainer'; - }; - - let contents = Field.toString(field as Field); - // display 2 hyphens instead of a blank box for empty cells - contents = contents === '' ? '--' : contents; - - // classname reflects the tatus of the cell - let className = 'collectionSchemaView-cellWrapper'; - if (this._isEditing) className += ' editing'; - if (this.props.isFocused && this.props.isEditable) className += ' focused'; - if (this.props.isFocused && !this.props.isEditable) className += ' inactive'; - - const positions = []; - if (StrCast(this.props.Document._searchString).toLowerCase() !== '') { - // term is ...promise pending... if the field is a Promise, otherwise it is the cell's contents - let term = field instanceof Promise ? '...promise pending...' : contents.toLowerCase(); - const search = StrCast(this.props.Document._searchString).toLowerCase(); - let start = term.indexOf(search); - let tally = 0; - // if search is found in term - if (start !== -1) { - positions.push(start); - } - // if search is found in term, continue finding all instances of search in term - while (start < contents?.length && start !== -1) { - term = term.slice(start + search.length + 1); - tally += start + search.length + 1; - start = term.indexOf(search); - positions.push(tally + start); - } - // remove the last position - if (positions.length > 1) { - positions.pop(); - } - } - const placeholder = type === 'number' ? '0' : contents === '' ? '--' : 'undefined'; - return ( -
(this._isEditing = true))} - onPointerEnter={onPointerEnter} - onPointerLeave={onPointerLeave}> -
-
- {!this.props.Document._searchDoc ? ( - { - const cfield = ComputedField.WithoutComputed(() => FieldValue(field)); - const cscript = cfield instanceof ComputedField ? cfield.script.originalScript : undefined; - const cfinalScript = cscript?.split('return')[cscript.split('return').length - 1]; - return cscript ? (cfinalScript?.endsWith(';') ? `:=${cfinalScript?.substring(0, cfinalScript.length - 2)}` : cfinalScript) : Field.IsField(cfield) ? Field.toScriptString(cfield) : ''; - }} - SetValue={action((value: string) => { - // sets what is displayed after the user makes an input - let retVal = false; - if (value.startsWith(':=') || value.startsWith('=:=')) { - // decides how to compute a value when given either of the above strings - const script = value.substring(value.startsWith('=:=') ? 3 : 2); - retVal = this.props.setComputed(script, value.startsWith(':=') ? this._rowDataDoc : this._rowDoc, this.renderFieldKey, this.props.row, this.props.col); - } else { - // check if the input is a number - let inputIsNum = true; - for (const s of value) { - if (isNaN(parseInt(s)) && !(s === '.') && !(s === ',')) { - inputIsNum = false; - } - } - // check if the input is a boolean - const inputIsBool: boolean = value === 'false' || value === 'true'; - // what to do in the case - if (!inputIsNum && !inputIsBool && !value.startsWith('=')) { - // if it's not a number, it's a string, and should be processed as such - // strips the string of quotes when it is edited to prevent quotes form being added to the text automatically - // after each edit - let valueSansQuotes = value; - if (this._isEditing) { - const vsqLength = valueSansQuotes.length; - // get rid of outer quotes - valueSansQuotes = valueSansQuotes.substring(value.startsWith('"') ? 1 : 0, valueSansQuotes.charAt(vsqLength - 1) === '"' ? vsqLength - 1 : vsqLength); - } - let inputAsString = '"'; - // escape any quotes in the string - for (const i of valueSansQuotes) { - if (i === '"') { - inputAsString += '\\"'; - } else { - inputAsString += i; - } - } - // add a closing quote - inputAsString += '"'; - //two options here: we can strip off outer quotes or we can figure out what's going on with the script - const script = CompileScript(inputAsString, { requiredType: type, typecheck: false, editable: true, addReturn: true, params: { this: Doc.name, $r: 'number', $c: 'number', $: 'any' } }); - const changeMade = inputAsString.length !== value.length || inputAsString.length - 2 !== value.length; - // change it if a change is made, otherwise, just compile using the old cell conetnts - script.compiled && (retVal = this.applyToDoc(changeMade ? this._rowDoc : this._rowDataDoc, this.props.row, this.props.col, script.run)); - // handle numbers and expressions - } else if (inputIsNum || value.startsWith('=')) { - //TODO: make accept numbers - const inputscript = value.substring(value.startsWith('=') ? 1 : 0); - // if commas are not stripped, the parser only considers the numbers after the last comma - let inputSansCommas = ''; - for (const s of inputscript) { - if (!(s === ',')) { - inputSansCommas += s; - } - } - const script = CompileScript(inputSansCommas, { requiredType: type, typecheck: false, editable: true, addReturn: true, params: { this: Doc.name, $r: 'number', $c: 'number', $: 'any' } }); - const changeMade = value.length - 2 !== value.length; - script.compiled && (retVal = this.applyToDoc(changeMade ? this._rowDoc : this._rowDataDoc, this.props.row, this.props.col, script.run)); - // handle booleans - } else if (inputIsBool) { - const script = CompileScript(value, { requiredType: type, typecheck: false, editable: true, addReturn: true, params: { this: Doc.name, $r: 'number', $c: 'number', $: 'any' } }); - const changeMade = value.length - 2 !== value.length; - script.compiled && (retVal = this.applyToDoc(changeMade ? this._rowDoc : this._rowDataDoc, this.props.row, this.props.col, script.run)); - } - } - if (retVal) { - this._isEditing = false; // need to set this here. otherwise, the assignment of the field will invalidate & cause render() to be called with the wrong value for 'editing' - this.props.setIsEditing(false); - } - return retVal; - })} - OnFillDown={async (value: string) => { - // computes all of the value preceded by := - const script = CompileScript(value, { requiredType: type, typecheck: false, editable: true, addReturn: true, params: { this: Doc.name, $r: 'number', $c: 'number', $: 'any' } }); - script.compiled && - DocListCast(this.props.Document[this.props.fieldKey]).forEach((doc, i) => - value.startsWith(':=') ? this.props.setComputed(value.substring(2), Doc.GetProto(doc), this.renderFieldKey, i, this.props.col) : this.applyToDoc(Doc.GetProto(doc), i, this.props.col, script.run) - ); - }} - /> - ) : ( - this.returnHighlights(contents, positions) - )} -
-
-
- ); - } - - render() { - return this.renderCellWithType(undefined); - } -} - -@observer -export class CollectionSchemaNumberCell extends CollectionSchemaCell { - render() { - return this.renderCellWithType('number'); - } -} - -@observer -export class CollectionSchemaBooleanCell extends CollectionSchemaCell { - render() { - return this.renderCellWithType('boolean'); - } -} - -@observer -export class CollectionSchemaStringCell extends CollectionSchemaCell { - render() { - return this.renderCellWithType('string'); - } -} - -@observer -export class CollectionSchemaDateCell extends CollectionSchemaCell { - @computed get _date(): Opt { - // if the cell is a date field, cast then contents to a date. Otherrwwise, make the contents undefined. - return this._rowDoc[this.renderFieldKey] instanceof DateField ? DateCast(this._rowDoc[this.renderFieldKey]) : undefined; - } - - @action - handleChange = (date: any) => { - // const script = CompileScript(date.toString(), { requiredType: "Date", addReturn: true, params: { this: Doc.name } }); - // if (script.compiled) { - // this.applyToDoc(this._document, this.props.row, this.props.col, script.run); - // } else { - // ^ DateCast is always undefined for some reason, but that is what the field should be set to - this._rowDoc[this.renderFieldKey] = new DateField(date as Date); - //} - }; - - render() { - return !this.props.isFocused ? ( - {this._date ? Field.toString(this._date as Field) : '--'} - ) : ( - this.handleChange(date)} onChange={date => this.handleChange(date)} /> - ); - } -} - -@observer -export class CollectionSchemaDocCell extends CollectionSchemaCell { - _overlayDisposer?: () => void; - - @computed get _doc() { - return FieldValue(Cast(this._rowDoc[this.renderFieldKey], Doc)); - } - - @action - onSetValue = (value: string) => { - this._doc && (Doc.GetProto(this._doc).title = value); - - const script = CompileScript(value, { - addReturn: true, - typecheck: true, - transformer: DocumentIconContainer.getTransformer(), - }); - // compile the script - const results = script.compiled && script.run(); - // if the script was compiled and run - if (results && results.success) { - this._rowDoc[this.renderFieldKey] = results.result; - return true; - } - return false; - }; - - componentWillUnmount() { - this.onBlur(); - } - - onBlur = () => { - this._overlayDisposer?.(); - }; - onFocus = () => { - this.onBlur(); - this._overlayDisposer = OverlayView.Instance.addElement(, { x: 0, y: 0 }); - }; - - @action - isEditingCallback = (isEditing: boolean): void => { - // the isEditingCallback from a general CollectionSchemaCell - document.removeEventListener('keydown', this.onKeyDown); - isEditing && document.addEventListener('keydown', this.onKeyDown); - this._isEditing = isEditing; - this.props.setIsEditing(isEditing); - this.props.changeFocusedCellByIndex(this.props.row, this.props.col); - }; - - render() { - // if there's a doc, render it - return !this._doc ? ( - this.renderCellWithType('document') - ) : ( -
-
- StrCast(this._doc?.title)} - SetValue={action((value: string) => { - this.onSetValue(value); - return true; - })} - /> -
-
this._doc && this.props.addDocTab(this._doc, OpenWhere.addRight)} className="collectionSchemaView-cellContents-docButton"> - -
-
- ); - } -} - -@observer -export class CollectionSchemaImageCell extends CollectionSchemaCell { - choosePath(url: URL) { - if (url.protocol === 'data') return url.href; // if the url ises the data protocol, just return the href - if (url.href.indexOf(window.location.origin) === -1) return Utils.CorsProxy(url.href); // otherwise, put it through the cors proxy erver - if (!/\.(png|jpg|jpeg|gif|webp)$/.test(url.href.toLowerCase())) return url.href; //Why is this here — good question - - const ext = extname(url.href); - return url.href.replace(ext, '_o' + ext); - } - - render() { - const field = Cast(this._rowDoc[this.renderFieldKey], ImageField, null); // retrieve the primary image URL that is being rendered from the data doc - const alts = DocListCast(this._rowDoc[this.renderFieldKey + '-alternates']); // retrieve alternate documents that may be rendered as alternate images - const altpaths = alts - .map(doc => Cast(doc[Doc.LayoutFieldKey(doc)], ImageField, null)?.url) - .filter(url => url) - .map(url => this.choosePath(url)); // access the primary layout data of the alternate documents - const paths = field ? [this.choosePath(field.url), ...altpaths] : altpaths; - // If there is a path, follow it; otherwise, follow a link to a default image icon - const url = paths.length ? paths : [Utils.CorsProxy('http://www.cs.brown.edu/~bcz/noImage.png')]; - - const aspect = Doc.NativeAspect(this._rowDoc); // aspect ratio - let width = Math.min(75, this.props.rowProps.width); // get a with that is no smaller than 75px - const height = Math.min(75, width / aspect); // get a height either proportional to that or 75 px - width = height * aspect; // increase the width of the image if necessary to maintain proportionality - - const reference = React.createRef(); - return ( -
-
- -
-
- ); - } -} - -@observer -export class CollectionSchemaListCell extends CollectionSchemaCell { - _overlayDisposer?: () => void; - - @computed get _field() { - return this._rowDoc[this.renderFieldKey]; - } - @computed get _optionsList() { - return this._field as List; - } - @observable private _opened = false; // whether the list is opened - @observable private _text = 'select an item'; - @observable private _selectedNum = 0; // the index of the list item selected - - @action - onSetValue = (value: string) => { - // change if it's a document - this._optionsList[this._selectedNum] = this._text = value; - - (this._field as List).splice(this._selectedNum, 1, value); - }; - - @action - onSelected = (element: string, index: number) => { - // if an item is selected, the private variables should update to reflect this - this._text = element; - this._selectedNum = index; - }; - - onFocus = () => { - this._overlayDisposer?.(); - this._overlayDisposer = OverlayView.Instance.addElement(, { x: 0, y: 0 }); - }; - - render() { - const link = false; - const reference = React.createRef(); - - // if the list is not opened, don't display it; otherwise, do. - if (this._optionsList?.length) { - const options = !this._opened ? null : ( -
- {this._optionsList.map((element, index) => { - const val = Field.toString(element); - return ( -
this.onSelected(StrCast(element), index)}> - {val} -
- ); - })} -
- ); - - const plainText =
{this._text}
; - const textarea = ( -
- this._text} - SetValue={action((value: string) => { - // add special for params - this.onSetValue(value); - return true; - })} - /> -
- ); - - //☰ - return ( -
-
-
- -
{link ? plainText : textarea}
-
- {options} -
-
- ); - } - return this.renderCellWithType('list'); - } -} - -@observer -export class CollectionSchemaCheckboxCell extends CollectionSchemaCell { - @computed get _isChecked() { - return BoolCast(this._rowDoc[this.renderFieldKey]); - } - - render() { - const reference = React.createRef(); - return ( -
- (this._rowDoc[this.renderFieldKey] = e.target.checked)} /> -
- ); - } -} - -@observer -export class CollectionSchemaButtons extends CollectionSchemaCell { - // the navigation buttons for schema view when it is used for search. - render() { - return !this.props.Document._searchDoc || ![DocumentType.PDF, DocumentType.RTF].includes(StrCast(this._rowDoc.type) as DocumentType) ? ( - <> - ) : ( -
- - -
- ); - } -} +// import React = require('react'); +// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +// import { action, computed, observable } from 'mobx'; +// import { observer } from 'mobx-react'; +// import { extname } from 'path'; +// import DatePicker from 'react-datepicker'; +// import { CellInfo } from 'react-table'; +// import { DateField } from '../../../../fields/DateField'; +// import { Doc, DocListCast, Field, Opt } from '../../../../fields/Doc'; +// import { Id } from '../../../../fields/FieldSymbols'; +// import { List } from '../../../../fields/List'; +// import { SchemaHeaderField } from '../../../../fields/SchemaHeaderField'; +// import { ComputedField } from '../../../../fields/ScriptField'; +// import { BoolCast, Cast, DateCast, FieldValue, StrCast } from '../../../../fields/Types'; +// import { ImageField } from '../../../../fields/URLField'; +// import { emptyFunction, Utils } from '../../../../Utils'; +// import { Docs } from '../../../documents/Documents'; +// import { DocumentType } from '../../../documents/DocumentTypes'; +// import { DocumentManager } from '../../../util/DocumentManager'; +// import { DragManager } from '../../../util/DragManager'; +// import { KeyCodes } from '../../../util/KeyCodes'; +// import { CompileScript } from '../../../util/Scripting'; +// import { SearchUtil } from '../../../util/SearchUtil'; +// import { SnappingManager } from '../../../util/SnappingManager'; +// import { undoBatch } from '../../../util/UndoManager'; +// import '../../../views/DocumentDecorations.scss'; +// import { EditableView } from '../../EditableView'; +// import { MAX_ROW_HEIGHT } from '../../global/globalCssVariables.scss'; +// import { DocumentIconContainer } from '../../nodes/DocumentIcon'; +// import { OverlayView } from '../../OverlayView'; +// import { CollectionView } from '../CollectionView'; +// import './CollectionSchemaView.scss'; +// import { OpenWhere } from '../../nodes/DocumentView'; +// import { PinProps } from '../../nodes/trails'; + +// // intialize cell properties +// export interface CellProps { +// row: number; +// col: number; +// rowProps: CellInfo; +// // currently unused +// CollectionView: Opt; +// // currently unused +// ContainingCollection: Opt; +// Document: Doc; +// // column name +// fieldKey: string; +// // currently unused +// renderDepth: number; +// // called when a button is pressed on the node itself +// addDocTab: (document: Doc, where: OpenWhere) => boolean; +// pinToPres: (document: Doc, pinProps: PinProps) => void; +// moveDocument?: (document: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => boolean; +// isFocused: boolean; +// changeFocusedCellByIndex: (row: number, col: number) => void; +// // set whether the cell is in the isEditing mode +// setIsEditing: (isEditing: boolean) => void; +// isEditable: boolean; +// setPreviewDoc: (doc: Doc) => void; +// setComputed: (script: string, doc: Doc, field: string, row: number, col: number) => boolean; +// getField: (row: number, col?: number) => void; +// // currnetly unused +// showDoc: (doc: Doc | undefined, dataDoc?: any, screenX?: number, screenY?: number) => void; +// } + +// @observer +// export class CollectionSchemaCell extends React.Component { +// // return a field key that is corrected for whether it COMMENT +// public static resolvedFieldKey(column: string, rowDoc: Doc) { +// const fieldKey = column; +// if (fieldKey.startsWith('*')) { +// const rootKey = fieldKey.substring(1); +// const allKeys = [...Array.from(Object.keys(rowDoc)), ...Array.from(Object.keys(Doc.GetProto(rowDoc)))]; +// const matchedKeys = allKeys.filter(key => key.includes(rootKey)); +// if (matchedKeys.length) return matchedKeys[0]; +// } +// return fieldKey; +// } +// @observable protected _isEditing: boolean = false; +// protected _focusRef = React.createRef(); +// protected _rowDoc = this.props.rowProps.original; +// // Gets the serialized data in proto form of the base proto that this document's proto inherits from +// protected _rowDataDoc = Doc.GetProto(this.props.rowProps.original); +// // methods for dragging and dropping +// protected _dropDisposer?: DragManager.DragDropDisposer; +// @observable contents: string = ''; + +// componentDidMount() { +// document.addEventListener('keydown', this.onKeyDown); +// } +// componentWillUnmount() { +// document.removeEventListener('keydown', this.onKeyDown); +// } + +// @action +// onKeyDown = (e: KeyboardEvent): void => { +// // If a cell is editable and clicked, hitting enter shoudl allow the user to edit it +// if (this.props.isFocused && this.props.isEditable && e.keyCode === KeyCodes.ENTER) { +// document.removeEventListener('keydown', this.onKeyDown); +// this._isEditing = true; +// this.props.setIsEditing(true); +// } +// }; + +// @action +// isEditingCallback = (isEditing: boolean): void => { +// // a general method that takes a boolean that determines whether the cell should be in +// // is-editing mode +// // remove the event listener if it's there +// document.removeEventListener('keydown', this.onKeyDown); +// // it's not already in is-editing mode, re-add the event listener +// isEditing && document.addEventListener('keydown', this.onKeyDown); +// this._isEditing = isEditing; +// this.props.setIsEditing(isEditing); +// this.props.changeFocusedCellByIndex(this.props.row, this.props.col); +// }; + +// @action +// onPointerDown = async (e: React.PointerEvent): Promise => { +// // pan to the cell +// this.onItemDown(e); +// // focus on it +// this.props.changeFocusedCellByIndex(this.props.row, this.props.col); +// this.props.setPreviewDoc(this.props.rowProps.original); + +// let url: string; +// if ((url = StrCast(this.props.rowProps.row.href))) { +// // opens up the the doc in a new window, blurring the old one +// try { +// new URL(url); +// const temp = window.open(url)!; +// temp.blur(); +// window.focus(); +// } catch {} +// } + +// const doc = Cast(this._rowDoc[this.renderFieldKey], Doc, null); +// doc && this.props.setPreviewDoc(doc); +// }; + +// @undoBatch +// applyToDoc = (doc: Doc, row: number, col: number, run: (args?: { [name: string]: any }) => any) => { +// // apply a specified change to the cell +// const res = run({ this: doc, $r: row, $c: col, $: (r: number = 0, c: number = 0) => this.props.getField(r + row, c + col) }); +// if (!res.success) return false; +// // change what is rendered to this new changed cell content +// doc[this.renderFieldKey] = res.result; +// return true; +// // return whether the change was successful +// }; + +// private drop = (e: Event, de: DragManager.DropEvent) => { +// // if the drag has data at its completion +// if (de.complete.docDragData) { +// // if only one doc was dragged +// if (de.complete.docDragData.draggedDocuments.length === 1) { +// // update the renderFieldKey +// this._rowDataDoc[this.renderFieldKey] = de.complete.docDragData.draggedDocuments[0]; +// } else { +// // create schema document reflecting the new column arrangement +// const coll = Docs.Create.SchemaDocument([new SchemaHeaderField('title', '#f1efeb')], de.complete.docDragData.draggedDocuments, {}); +// this._rowDataDoc[this.renderFieldKey] = coll; +// } +// e.stopPropagation(); +// } +// }; + +// protected dropRef = (ele: HTMLElement | null) => { +// // if the drop disposer is not undefined, run its function +// this._dropDisposer?.(); +// // if ele is not null, give ele a non-undefined drop disposer +// ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this))); +// }; + +// returnHighlights(contents: string, positions?: number[]) { +// if (positions) { +// const results = []; +// StrCast(this.props.Document._searchString); +// const length = StrCast(this.props.Document._searchString).length; +// const color = contents ? 'black' : 'grey'; + +// results.push( +// +// {contents?.slice(0, positions[0])} +// +// ); +// positions.forEach((num, cur) => { +// results.push( +// +// {contents?.slice(num, num + length)} +// +// ); +// let end = 0; +// cur === positions.length - 1 ? (end = contents.length) : (end = positions[cur + 1]); +// results.push( +// +// {contents?.slice(num + length, end)} +// +// ); +// }); +// return results; +// } +// return {contents ? contents?.valueOf() : 'undefined'}; +// } + +// @computed get renderFieldKey() { +// // gets the resolved field key of this cell +// return CollectionSchemaCell.resolvedFieldKey(this.props.rowProps.column.id!, this.props.rowProps.original); +// } + +// onItemDown = async (e: React.PointerEvent) => { +// // if the document is a document used to change UI for search results in schema view +// if (this.props.Document._searchDoc) { +// const aliasdoc = await SearchUtil.GetAliasesOfDocument(this._rowDataDoc); +// const targetContext = aliasdoc.length <= 0 ? undefined : Cast(aliasdoc[0].context, Doc, null); +// // Jump to the this document +// DocumentManager.Instance.jumpToDocument(this._rowDoc, { willPan: true }, emptyFunction, targetContext ? [targetContext] : [], () => this.props.setPreviewDoc(this._rowDoc)); +// } +// }; + +// renderCellWithType(type: string | undefined) { +// const dragRef: React.RefObject = React.createRef(); + +// // the column +// const fieldKey = this.renderFieldKey; +// // the exact cell +// const field = this._rowDoc[fieldKey]; + +// const onPointerEnter = (e: React.PointerEvent): void => { +// // e.buttons === 1 means the left moue pointer is down +// if (e.buttons === 1 && SnappingManager.GetIsDragging() && (type === 'document' || type === undefined)) { +// dragRef.current!.className = 'collectionSchemaView-cellContainer doc-drag-over'; +// } +// }; +// const onPointerLeave = (e: React.PointerEvent): void => { +// // change the class name to indicate that the cell is no longer being dragged +// dragRef.current!.className = 'collectionSchemaView-cellContainer'; +// }; + +// let contents = Field.toString(field as Field); +// // display 2 hyphens instead of a blank box for empty cells +// contents = contents === '' ? '--' : contents; + +// // classname reflects the tatus of the cell +// let className = 'collectionSchemaView-cellWrapper'; +// if (this._isEditing) className += ' editing'; +// if (this.props.isFocused && this.props.isEditable) className += ' focused'; +// if (this.props.isFocused && !this.props.isEditable) className += ' inactive'; + +// const positions = []; +// if (StrCast(this.props.Document._searchString).toLowerCase() !== '') { +// // term is ...promise pending... if the field is a Promise, otherwise it is the cell's contents +// let term = field instanceof Promise ? '...promise pending...' : contents.toLowerCase(); +// const search = StrCast(this.props.Document._searchString).toLowerCase(); +// let start = term.indexOf(search); +// let tally = 0; +// // if search is found in term +// if (start !== -1) { +// positions.push(start); +// } +// // if search is found in term, continue finding all instances of search in term +// while (start < contents?.length && start !== -1) { +// term = term.slice(start + search.length + 1); +// tally += start + search.length + 1; +// start = term.indexOf(search); +// positions.push(tally + start); +// } +// // remove the last position +// if (positions.length > 1) { +// positions.pop(); +// } +// } +// const placeholder = type === 'number' ? '0' : contents === '' ? '--' : 'undefined'; +// return ( +//
(this._isEditing = true))} +// onPointerEnter={onPointerEnter} +// onPointerLeave={onPointerLeave}> +//
+//
+// {!this.props.Document._searchDoc ? ( +// { +// const cfield = ComputedField.WithoutComputed(() => FieldValue(field)); +// const cscript = cfield instanceof ComputedField ? cfield.script.originalScript : undefined; +// const cfinalScript = cscript?.split('return')[cscript.split('return').length - 1]; +// return cscript ? (cfinalScript?.endsWith(';') ? `:=${cfinalScript?.substring(0, cfinalScript.length - 2)}` : cfinalScript) : Field.IsField(cfield) ? Field.toScriptString(cfield) : ''; +// }} +// SetValue={action((value: string) => { +// // sets what is displayed after the user makes an input +// let retVal = false; +// if (value.startsWith(':=') || value.startsWith('=:=')) { +// // decides how to compute a value when given either of the above strings +// const script = value.substring(value.startsWith('=:=') ? 3 : 2); +// retVal = this.props.setComputed(script, value.startsWith(':=') ? this._rowDataDoc : this._rowDoc, this.renderFieldKey, this.props.row, this.props.col); +// } else { +// // check if the input is a number +// let inputIsNum = true; +// for (const s of value) { +// if (isNaN(parseInt(s)) && !(s === '.') && !(s === ',')) { +// inputIsNum = false; +// } +// } +// // check if the input is a boolean +// const inputIsBool: boolean = value === 'false' || value === 'true'; +// // what to do in the case +// if (!inputIsNum && !inputIsBool && !value.startsWith('=')) { +// // if it's not a number, it's a string, and should be processed as such +// // strips the string of quotes when it is edited to prevent quotes form being added to the text automatically +// // after each edit +// let valueSansQuotes = value; +// if (this._isEditing) { +// const vsqLength = valueSansQuotes.length; +// // get rid of outer quotes +// valueSansQuotes = valueSansQuotes.substring(value.startsWith('"') ? 1 : 0, valueSansQuotes.charAt(vsqLength - 1) === '"' ? vsqLength - 1 : vsqLength); +// } +// let inputAsString = '"'; +// // escape any quotes in the string +// for (const i of valueSansQuotes) { +// if (i === '"') { +// inputAsString += '\\"'; +// } else { +// inputAsString += i; +// } +// } +// // add a closing quote +// inputAsString += '"'; +// //two options here: we can strip off outer quotes or we can figure out what's going on with the script +// const script = CompileScript(inputAsString, { requiredType: type, typecheck: false, editable: true, addReturn: true, params: { this: Doc.name, $r: 'number', $c: 'number', $: 'any' } }); +// const changeMade = inputAsString.length !== value.length || inputAsString.length - 2 !== value.length; +// // change it if a change is made, otherwise, just compile using the old cell conetnts +// script.compiled && (retVal = this.applyToDoc(changeMade ? this._rowDoc : this._rowDataDoc, this.props.row, this.props.col, script.run)); +// // handle numbers and expressions +// } else if (inputIsNum || value.startsWith('=')) { +// //TODO: make accept numbers +// const inputscript = value.substring(value.startsWith('=') ? 1 : 0); +// // if commas are not stripped, the parser only considers the numbers after the last comma +// let inputSansCommas = ''; +// for (const s of inputscript) { +// if (!(s === ',')) { +// inputSansCommas += s; +// } +// } +// const script = CompileScript(inputSansCommas, { requiredType: type, typecheck: false, editable: true, addReturn: true, params: { this: Doc.name, $r: 'number', $c: 'number', $: 'any' } }); +// const changeMade = value.length - 2 !== value.length; +// script.compiled && (retVal = this.applyToDoc(changeMade ? this._rowDoc : this._rowDataDoc, this.props.row, this.props.col, script.run)); +// // handle booleans +// } else if (inputIsBool) { +// const script = CompileScript(value, { requiredType: type, typecheck: false, editable: true, addReturn: true, params: { this: Doc.name, $r: 'number', $c: 'number', $: 'any' } }); +// const changeMade = value.length - 2 !== value.length; +// script.compiled && (retVal = this.applyToDoc(changeMade ? this._rowDoc : this._rowDataDoc, this.props.row, this.props.col, script.run)); +// } +// } +// if (retVal) { +// this._isEditing = false; // need to set this here. otherwise, the assignment of the field will invalidate & cause render() to be called with the wrong value for 'editing' +// this.props.setIsEditing(false); +// } +// return retVal; +// })} +// OnFillDown={async (value: string) => { +// // computes all of the value preceded by := +// const script = CompileScript(value, { requiredType: type, typecheck: false, editable: true, addReturn: true, params: { this: Doc.name, $r: 'number', $c: 'number', $: 'any' } }); +// script.compiled && +// DocListCast(this.props.Document[this.props.fieldKey]).forEach((doc, i) => +// value.startsWith(':=') ? this.props.setComputed(value.substring(2), Doc.GetProto(doc), this.renderFieldKey, i, this.props.col) : this.applyToDoc(Doc.GetProto(doc), i, this.props.col, script.run) +// ); +// }} +// /> +// ) : ( +// this.returnHighlights(contents, positions) +// )} +//
+//
+//
+// ); +// } + +// render() { +// return this.renderCellWithType(undefined); +// } +// } + +// @observer +// export class CollectionSchemaNumberCell extends CollectionSchemaCell { +// render() { +// return this.renderCellWithType('number'); +// } +// } + +// @observer +// export class CollectionSchemaBooleanCell extends CollectionSchemaCell { +// render() { +// return this.renderCellWithType('boolean'); +// } +// } + +// @observer +// export class CollectionSchemaStringCell extends CollectionSchemaCell { +// render() { +// return this.renderCellWithType('string'); +// } +// } + +// @observer +// export class CollectionSchemaDateCell extends CollectionSchemaCell { +// @computed get _date(): Opt { +// // if the cell is a date field, cast then contents to a date. Otherrwwise, make the contents undefined. +// return this._rowDoc[this.renderFieldKey] instanceof DateField ? DateCast(this._rowDoc[this.renderFieldKey]) : undefined; +// } + +// @action +// handleChange = (date: any) => { +// // const script = CompileScript(date.toString(), { requiredType: "Date", addReturn: true, params: { this: Doc.name } }); +// // if (script.compiled) { +// // this.applyToDoc(this._document, this.props.row, this.props.col, script.run); +// // } else { +// // ^ DateCast is always undefined for some reason, but that is what the field should be set to +// this._rowDoc[this.renderFieldKey] = new DateField(date as Date); +// //} +// }; + +// render() { +// return !this.props.isFocused ? ( +// {this._date ? Field.toString(this._date as Field) : '--'} +// ) : ( +// this.handleChange(date)} onChange={date => this.handleChange(date)} /> +// ); +// } +// } + +// @observer +// export class CollectionSchemaDocCell extends CollectionSchemaCell { +// _overlayDisposer?: () => void; + +// @computed get _doc() { +// return FieldValue(Cast(this._rowDoc[this.renderFieldKey], Doc)); +// } + +// @action +// onSetValue = (value: string) => { +// this._doc && (Doc.GetProto(this._doc).title = value); + +// const script = CompileScript(value, { +// addReturn: true, +// typecheck: true, +// transformer: DocumentIconContainer.getTransformer(), +// }); +// // compile the script +// const results = script.compiled && script.run(); +// // if the script was compiled and run +// if (results && results.success) { +// this._rowDoc[this.renderFieldKey] = results.result; +// return true; +// } +// return false; +// }; + +// componentWillUnmount() { +// this.onBlur(); +// } + +// onBlur = () => { +// this._overlayDisposer?.(); +// }; +// onFocus = () => { +// this.onBlur(); +// this._overlayDisposer = OverlayView.Instance.addElement(, { x: 0, y: 0 }); +// }; + +// @action +// isEditingCallback = (isEditing: boolean): void => { +// // the isEditingCallback from a general CollectionSchemaCell +// document.removeEventListener('keydown', this.onKeyDown); +// isEditing && document.addEventListener('keydown', this.onKeyDown); +// this._isEditing = isEditing; +// this.props.setIsEditing(isEditing); +// this.props.changeFocusedCellByIndex(this.props.row, this.props.col); +// }; + +// render() { +// // if there's a doc, render it +// return !this._doc ? ( +// this.renderCellWithType('document') +// ) : ( +//
+//
+// StrCast(this._doc?.title)} +// SetValue={action((value: string) => { +// this.onSetValue(value); +// return true; +// })} +// /> +//
+//
this._doc && this.props.addDocTab(this._doc, OpenWhere.addRight)} className="collectionSchemaView-cellContents-docButton"> +// +//
+//
+// ); +// } +// } + +// @observer +// export class CollectionSchemaImageCell extends CollectionSchemaCell { +// choosePath(url: URL) { +// if (url.protocol === 'data') return url.href; // if the url ises the data protocol, just return the href +// if (url.href.indexOf(window.location.origin) === -1) return Utils.CorsProxy(url.href); // otherwise, put it through the cors proxy erver +// if (!/\.(png|jpg|jpeg|gif|webp)$/.test(url.href.toLowerCase())) return url.href; //Why is this here — good question + +// const ext = extname(url.href); +// return url.href.replace(ext, '_o' + ext); +// } + +// render() { +// const field = Cast(this._rowDoc[this.renderFieldKey], ImageField, null); // retrieve the primary image URL that is being rendered from the data doc +// const alts = DocListCast(this._rowDoc[this.renderFieldKey + '-alternates']); // retrieve alternate documents that may be rendered as alternate images +// const altpaths = alts +// .map(doc => Cast(doc[Doc.LayoutFieldKey(doc)], ImageField, null)?.url) +// .filter(url => url) +// .map(url => this.choosePath(url)); // access the primary layout data of the alternate documents +// const paths = field ? [this.choosePath(field.url), ...altpaths] : altpaths; +// // If there is a path, follow it; otherwise, follow a link to a default image icon +// const url = paths.length ? paths : [Utils.CorsProxy('http://www.cs.brown.edu/~bcz/noImage.png')]; + +// const aspect = Doc.NativeAspect(this._rowDoc); // aspect ratio +// let width = Math.min(75, this.props.rowProps.width); // get a with that is no smaller than 75px +// const height = Math.min(75, width / aspect); // get a height either proportional to that or 75 px +// width = height * aspect; // increase the width of the image if necessary to maintain proportionality + +// const reference = React.createRef(); +// return ( +//
+//
+// +//
+//
+// ); +// } +// } + +// @observer +// export class CollectionSchemaListCell extends CollectionSchemaCell { +// _overlayDisposer?: () => void; + +// @computed get _field() { +// return this._rowDoc[this.renderFieldKey]; +// } +// @computed get _optionsList() { +// return this._field as List; +// } +// @observable private _opened = false; // whether the list is opened +// @observable private _text = 'select an item'; +// @observable private _selectedNum = 0; // the index of the list item selected + +// @action +// onSetValue = (value: string) => { +// // change if it's a document +// this._optionsList[this._selectedNum] = this._text = value; + +// (this._field as List).splice(this._selectedNum, 1, value); +// }; + +// @action +// onSelected = (element: string, index: number) => { +// // if an item is selected, the private variables should update to reflect this +// this._text = element; +// this._selectedNum = index; +// }; + +// onFocus = () => { +// this._overlayDisposer?.(); +// this._overlayDisposer = OverlayView.Instance.addElement(, { x: 0, y: 0 }); +// }; + +// render() { +// const link = false; +// const reference = React.createRef(); + +// // if the list is not opened, don't display it; otherwise, do. +// if (this._optionsList?.length) { +// const options = !this._opened ? null : ( +//
+// {this._optionsList.map((element, index) => { +// const val = Field.toString(element); +// return ( +//
this.onSelected(StrCast(element), index)}> +// {val} +//
+// ); +// })} +//
+// ); + +// const plainText =
{this._text}
; +// const textarea = ( +//
+// this._text} +// SetValue={action((value: string) => { +// // add special for params +// this.onSetValue(value); +// return true; +// })} +// /> +//
+// ); + +// //☰ +// return ( +//
+//
+//
+// +//
{link ? plainText : textarea}
+//
+// {options} +//
+//
+// ); +// } +// return this.renderCellWithType('list'); +// } +// } + +// @observer +// export class CollectionSchemaCheckboxCell extends CollectionSchemaCell { +// @computed get _isChecked() { +// return BoolCast(this._rowDoc[this.renderFieldKey]); +// } + +// render() { +// const reference = React.createRef(); +// return ( +//
+// (this._rowDoc[this.renderFieldKey] = e.target.checked)} /> +//
+// ); +// } +// } + +// @observer +// export class CollectionSchemaButtons extends CollectionSchemaCell { +// // the navigation buttons for schema view when it is used for search. +// render() { +// return !this.props.Document._searchDoc || ![DocumentType.PDF, DocumentType.RTF].includes(StrCast(this._rowDoc.type) as DocumentType) ? ( +// <> +// ) : ( +//
+// +// +//
+// ); +// } +// } diff --git a/src/client/views/collections/old_collectionSchema/OldCollectionSchemaMovableColumn.tsx b/src/client/views/collections/old_collectionSchema/OldCollectionSchemaMovableColumn.tsx index 28d2e6ab1..c2182ae0c 100644 --- a/src/client/views/collections/old_collectionSchema/OldCollectionSchemaMovableColumn.tsx +++ b/src/client/views/collections/old_collectionSchema/OldCollectionSchemaMovableColumn.tsx @@ -1,138 +1,138 @@ -import React = require('react'); -import { action } from 'mobx'; -import { SchemaHeaderField } from '../../../../fields/SchemaHeaderField'; -import { DragManager } from '../../../util/DragManager'; -import { SnappingManager } from '../../../util/SnappingManager'; -import { Transform } from '../../../util/Transform'; -import './CollectionSchemaView.scss'; +// import React = require('react'); +// import { action } from 'mobx'; +// import { SchemaHeaderField } from '../../../../fields/SchemaHeaderField'; +// import { DragManager } from '../../../util/DragManager'; +// import { SnappingManager } from '../../../util/SnappingManager'; +// import { Transform } from '../../../util/Transform'; +// import './CollectionSchemaView.scss'; -export interface MovableColumnProps { - columnRenderer: React.ReactNode; - columnValue: SchemaHeaderField; - allColumns: SchemaHeaderField[]; - reorderColumns: (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columns: SchemaHeaderField[]) => void; - ScreenToLocalTransform: () => Transform; -} -export class MovableColumn extends React.Component { - // The header of the column - private _header?: React.RefObject = React.createRef(); - // The container of the function that is responsible for moving the column over to a new plac - private _colDropDisposer?: DragManager.DragDropDisposer; - // initial column position - private _startDragPosition: { x: number; y: number } = { x: 0, y: 0 }; - // sensitivity to being dragged, in pixels - private _sensitivity: number = 16; - // Column reference ID - private _dragRef: React.RefObject = React.createRef(); +// export interface MovableColumnProps { +// columnRenderer: React.ReactNode; +// columnValue: SchemaHeaderField; +// allColumns: SchemaHeaderField[]; +// reorderColumns: (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columns: SchemaHeaderField[]) => void; +// ScreenToLocalTransform: () => Transform; +// } +// export class MovableColumn extends React.Component { +// // The header of the column +// private _header?: React.RefObject = React.createRef(); +// // The container of the function that is responsible for moving the column over to a new plac +// private _colDropDisposer?: DragManager.DragDropDisposer; +// // initial column position +// private _startDragPosition: { x: number; y: number } = { x: 0, y: 0 }; +// // sensitivity to being dragged, in pixels +// private _sensitivity: number = 16; +// // Column reference ID +// private _dragRef: React.RefObject = React.createRef(); - onPointerEnter = (e: React.PointerEvent): void => { - // if the column is left-clicked and it is being dragged - if (e.buttons === 1 && SnappingManager.GetIsDragging()) { - this._header!.current!.className = 'collectionSchema-col-wrapper'; - document.addEventListener('pointermove', this.onDragMove, true); - } - }; +// onPointerEnter = (e: React.PointerEvent): void => { +// // if the column is left-clicked and it is being dragged +// if (e.buttons === 1 && SnappingManager.GetIsDragging()) { +// this._header!.current!.className = 'collectionSchema-col-wrapper'; +// document.addEventListener('pointermove', this.onDragMove, true); +// } +// }; - onPointerLeave = (e: React.PointerEvent): void => { - this._header!.current!.className = 'collectionSchema-col-wrapper'; - document.removeEventListener('pointermove', this.onDragMove, true); - !e.buttons && document.removeEventListener('pointermove', this.onPointerMove); - }; +// onPointerLeave = (e: React.PointerEvent): void => { +// this._header!.current!.className = 'collectionSchema-col-wrapper'; +// document.removeEventListener('pointermove', this.onDragMove, true); +// !e.buttons && document.removeEventListener('pointermove', this.onPointerMove); +// }; - onDragMove = (e: PointerEvent): void => { - // only take into account the horizonal direction when a column is dragged - const x = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY); - const rect = this._header!.current!.getBoundingClientRect(); - // Now store the point at the top center of the column when it was in its original position - const bounds = this.props.ScreenToLocalTransform().transformPoint(rect.left + (rect.right - rect.left) / 2, rect.top); - // to be compared with its new horizontal position - const before = x[0] < bounds[0]; - this._header!.current!.className = 'collectionSchema-col-wrapper'; - if (before) this._header!.current!.className += ' col-before'; - if (!before) this._header!.current!.className += ' col-after'; - e.stopPropagation(); - }; +// onDragMove = (e: PointerEvent): void => { +// // only take into account the horizonal direction when a column is dragged +// const x = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY); +// const rect = this._header!.current!.getBoundingClientRect(); +// // Now store the point at the top center of the column when it was in its original position +// const bounds = this.props.ScreenToLocalTransform().transformPoint(rect.left + (rect.right - rect.left) / 2, rect.top); +// // to be compared with its new horizontal position +// const before = x[0] < bounds[0]; +// this._header!.current!.className = 'collectionSchema-col-wrapper'; +// if (before) this._header!.current!.className += ' col-before'; +// if (!before) this._header!.current!.className += ' col-after'; +// e.stopPropagation(); +// }; - createColDropTarget = (ele: HTMLDivElement) => { - this._colDropDisposer?.(); - if (ele) { - this._colDropDisposer = DragManager.MakeDropTarget(ele, this.colDrop.bind(this)); - } - }; +// createColDropTarget = (ele: HTMLDivElement) => { +// this._colDropDisposer?.(); +// if (ele) { +// this._colDropDisposer = DragManager.MakeDropTarget(ele, this.colDrop.bind(this)); +// } +// }; - colDrop = (e: Event, de: DragManager.DropEvent) => { - document.removeEventListener('pointermove', this.onDragMove, true); - // we only care about whether the column is shifted to the side - const x = this.props.ScreenToLocalTransform().transformPoint(de.x, de.y); - // get the dimensions of the smallest rectangle that bounds the header - const rect = this._header!.current!.getBoundingClientRect(); - const bounds = this.props.ScreenToLocalTransform().transformPoint(rect.left + (rect.right - rect.left) / 2, rect.top); - // get whether the column was dragged before or after where it is now - const before = x[0] < bounds[0]; - const colDragData = de.complete.columnDragData; - // if there is colDragData, which happen when the drag is complete, reorder the columns according to the established variables - if (colDragData) { - e.stopPropagation(); - this.props.reorderColumns(colDragData.colKey, this.props.columnValue, before, this.props.allColumns); - return true; - } - return false; - }; +// colDrop = (e: Event, de: DragManager.DropEvent) => { +// document.removeEventListener('pointermove', this.onDragMove, true); +// // we only care about whether the column is shifted to the side +// const x = this.props.ScreenToLocalTransform().transformPoint(de.x, de.y); +// // get the dimensions of the smallest rectangle that bounds the header +// const rect = this._header!.current!.getBoundingClientRect(); +// const bounds = this.props.ScreenToLocalTransform().transformPoint(rect.left + (rect.right - rect.left) / 2, rect.top); +// // get whether the column was dragged before or after where it is now +// const before = x[0] < bounds[0]; +// const colDragData = de.complete.columnDragData; +// // if there is colDragData, which happen when the drag is complete, reorder the columns according to the established variables +// if (colDragData) { +// e.stopPropagation(); +// this.props.reorderColumns(colDragData.colKey, this.props.columnValue, before, this.props.allColumns); +// return true; +// } +// return false; +// }; - onPointerMove = (e: PointerEvent) => { - const onRowMove = (e: PointerEvent) => { - e.stopPropagation(); - e.preventDefault(); +// onPointerMove = (e: PointerEvent) => { +// const onRowMove = (e: PointerEvent) => { +// e.stopPropagation(); +// e.preventDefault(); - document.removeEventListener('pointermove', onRowMove); - document.removeEventListener('pointerup', onRowUp); - const dragData = new DragManager.ColumnDragData(this.props.columnValue); - DragManager.StartColumnDrag(this._dragRef.current!, dragData, e.x, e.y); - }; - const onRowUp = (): void => { - document.removeEventListener('pointermove', onRowMove); - document.removeEventListener('pointerup', onRowUp); - }; - // if the left mouse button is the one being held - if (e.buttons === 1) { - const [dx, dy] = this.props.ScreenToLocalTransform().transformDirection(e.clientX - this._startDragPosition.x, e.clientY - this._startDragPosition.y); - // If the movemnt of the drag exceeds the sensitivity value - if (Math.abs(dx) + Math.abs(dy) > this._sensitivity) { - document.removeEventListener('pointermove', this.onPointerMove); - e.stopPropagation(); +// document.removeEventListener('pointermove', onRowMove); +// document.removeEventListener('pointerup', onRowUp); +// const dragData = new DragManager.ColumnDragData(this.props.columnValue); +// DragManager.StartColumnDrag(this._dragRef.current!, dragData, e.x, e.y); +// }; +// const onRowUp = (): void => { +// document.removeEventListener('pointermove', onRowMove); +// document.removeEventListener('pointerup', onRowUp); +// }; +// // if the left mouse button is the one being held +// if (e.buttons === 1) { +// const [dx, dy] = this.props.ScreenToLocalTransform().transformDirection(e.clientX - this._startDragPosition.x, e.clientY - this._startDragPosition.y); +// // If the movemnt of the drag exceeds the sensitivity value +// if (Math.abs(dx) + Math.abs(dy) > this._sensitivity) { +// document.removeEventListener('pointermove', this.onPointerMove); +// e.stopPropagation(); - document.addEventListener('pointermove', onRowMove); - document.addEventListener('pointerup', onRowUp); - } - } - }; +// document.addEventListener('pointermove', onRowMove); +// document.addEventListener('pointerup', onRowUp); +// } +// } +// }; - onPointerUp = (e: React.PointerEvent) => { - document.removeEventListener('pointermove', this.onPointerMove); - }; +// onPointerUp = (e: React.PointerEvent) => { +// document.removeEventListener('pointermove', this.onPointerMove); +// }; - @action - onPointerDown = (e: React.PointerEvent, ref: React.RefObject) => { - this._dragRef = ref; - const [dx, dy] = this.props.ScreenToLocalTransform().transformDirection(e.clientX, e.clientY); - // If the cell thing dragged is not being edited - if (!(e.target as any)?.tagName.includes('INPUT')) { - this._startDragPosition = { x: dx, y: dy }; - document.addEventListener('pointermove', this.onPointerMove); - } - }; +// @action +// onPointerDown = (e: React.PointerEvent, ref: React.RefObject) => { +// this._dragRef = ref; +// const [dx, dy] = this.props.ScreenToLocalTransform().transformDirection(e.clientX, e.clientY); +// // If the cell thing dragged is not being edited +// if (!(e.target as any)?.tagName.includes('INPUT')) { +// this._startDragPosition = { x: dx, y: dy }; +// document.addEventListener('pointermove', this.onPointerMove); +// } +// }; - render() { - const reference = React.createRef(); +// render() { +// const reference = React.createRef(); - return ( -
-
-
this.onPointerDown(e, reference)} onPointerUp={this.onPointerUp}> - {this.props.columnRenderer} -
-
-
- ); - } -} +// return ( +//
+//
+//
this.onPointerDown(e, reference)} onPointerUp={this.onPointerUp}> +// {this.props.columnRenderer} +//
+//
+//
+// ); +// } +// } diff --git a/src/client/views/collections/old_collectionSchema/OldCollectionSchemaMovableRow.tsx b/src/client/views/collections/old_collectionSchema/OldCollectionSchemaMovableRow.tsx index 3cb2df7d3..2b39df201 100644 --- a/src/client/views/collections/old_collectionSchema/OldCollectionSchemaMovableRow.tsx +++ b/src/client/views/collections/old_collectionSchema/OldCollectionSchemaMovableRow.tsx @@ -1,152 +1,152 @@ -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action } from 'mobx'; -import * as React from 'react'; -import { ReactTableDefaults, RowInfo } from 'react-table'; -import { Doc } from '../../../../fields/Doc'; -import { Cast, FieldValue, StrCast } from '../../../../fields/Types'; -import { DocumentManager } from '../../../util/DocumentManager'; -import { DragManager, dropActionType, SetupDrag } from '../../../util/DragManager'; -import { SnappingManager } from '../../../util/SnappingManager'; -import { Transform } from '../../../util/Transform'; -import { undoBatch } from '../../../util/UndoManager'; -import { ContextMenu } from '../../ContextMenu'; -import { OpenWhere } from '../../nodes/DocumentView'; -import './CollectionSchemaView.scss'; +// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +// import { action } from 'mobx'; +// import * as React from 'react'; +// import { ReactTableDefaults, RowInfo } from 'react-table'; +// import { Doc } from '../../../../fields/Doc'; +// import { Cast, FieldValue, StrCast } from '../../../../fields/Types'; +// import { DocumentManager } from '../../../util/DocumentManager'; +// import { DragManager, dropActionType, SetupDrag } from '../../../util/DragManager'; +// import { SnappingManager } from '../../../util/SnappingManager'; +// import { Transform } from '../../../util/Transform'; +// import { undoBatch } from '../../../util/UndoManager'; +// import { ContextMenu } from '../../ContextMenu'; +// import { OpenWhere } from '../../nodes/DocumentView'; +// import './CollectionSchemaView.scss'; -export interface MovableRowProps { - rowInfo: RowInfo; - ScreenToLocalTransform: () => Transform; - addDoc: (doc: Doc | Doc[], relativeTo?: Doc, before?: boolean) => boolean; - removeDoc: (doc: Doc | Doc[]) => boolean; - rowFocused: boolean; - textWrapRow: (doc: Doc) => void; - rowWrapped: boolean; - dropAction: string; - addDocTab: any; -} +// export interface MovableRowProps { +// rowInfo: RowInfo; +// ScreenToLocalTransform: () => Transform; +// addDoc: (doc: Doc | Doc[], relativeTo?: Doc, before?: boolean) => boolean; +// removeDoc: (doc: Doc | Doc[]) => boolean; +// rowFocused: boolean; +// textWrapRow: (doc: Doc) => void; +// rowWrapped: boolean; +// dropAction: string; +// addDocTab: any; +// } -export class MovableRow extends React.Component> { - private _header?: React.RefObject = React.createRef(); - private _rowDropDisposer?: DragManager.DragDropDisposer; +// export class MovableRow extends React.Component> { +// private _header?: React.RefObject = React.createRef(); +// private _rowDropDisposer?: DragManager.DragDropDisposer; - // Event listeners are only necessary when the user is hovering over the table - // Create one when the mouse starts hovering... - onPointerEnter = (e: React.PointerEvent): void => { - if (e.buttons === 1 && SnappingManager.GetIsDragging()) { - this._header!.current!.className = 'collectionSchema-row-wrapper'; - document.addEventListener('pointermove', this.onDragMove, true); - } - }; - // ... and delete it when the mouse leaves - onPointerLeave = (e: React.PointerEvent): void => { - this._header!.current!.className = 'collectionSchema-row-wrapper'; - document.removeEventListener('pointermove', this.onDragMove, true); - }; - // The method for the event listener, reorders columns when dragged to their new locations. - onDragMove = (e: PointerEvent): void => { - const x = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY); - const rect = this._header!.current!.getBoundingClientRect(); - const bounds = this.props.ScreenToLocalTransform().transformPoint(rect.left, rect.top + rect.height / 2); - const before = x[1] < bounds[1]; - this._header!.current!.className = 'collectionSchema-row-wrapper'; - if (before) this._header!.current!.className += ' row-above'; - if (!before) this._header!.current!.className += ' row-below'; - e.stopPropagation(); - }; - componentWillUnmount() { - this._rowDropDisposer?.(); - } - // - createRowDropTarget = (ele: HTMLDivElement) => { - this._rowDropDisposer?.(); - if (ele) { - this._rowDropDisposer = DragManager.MakeDropTarget(ele, this.rowDrop.bind(this)); - } - }; - // Controls what hppens when a row is dragged and dropped - rowDrop = (e: Event, de: DragManager.DropEvent) => { - this.onPointerLeave(e as any); - const rowDoc = FieldValue(Cast(this.props.rowInfo.original, Doc)); - if (!rowDoc) return false; +// // Event listeners are only necessary when the user is hovering over the table +// // Create one when the mouse starts hovering... +// onPointerEnter = (e: React.PointerEvent): void => { +// if (e.buttons === 1 && SnappingManager.GetIsDragging()) { +// this._header!.current!.className = 'collectionSchema-row-wrapper'; +// document.addEventListener('pointermove', this.onDragMove, true); +// } +// }; +// // ... and delete it when the mouse leaves +// onPointerLeave = (e: React.PointerEvent): void => { +// this._header!.current!.className = 'collectionSchema-row-wrapper'; +// document.removeEventListener('pointermove', this.onDragMove, true); +// }; +// // The method for the event listener, reorders columns when dragged to their new locations. +// onDragMove = (e: PointerEvent): void => { +// const x = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY); +// const rect = this._header!.current!.getBoundingClientRect(); +// const bounds = this.props.ScreenToLocalTransform().transformPoint(rect.left, rect.top + rect.height / 2); +// const before = x[1] < bounds[1]; +// this._header!.current!.className = 'collectionSchema-row-wrapper'; +// if (before) this._header!.current!.className += ' row-above'; +// if (!before) this._header!.current!.className += ' row-below'; +// e.stopPropagation(); +// }; +// componentWillUnmount() { +// this._rowDropDisposer?.(); +// } +// // +// createRowDropTarget = (ele: HTMLDivElement) => { +// this._rowDropDisposer?.(); +// if (ele) { +// this._rowDropDisposer = DragManager.MakeDropTarget(ele, this.rowDrop.bind(this)); +// } +// }; +// // Controls what hppens when a row is dragged and dropped +// rowDrop = (e: Event, de: DragManager.DropEvent) => { +// this.onPointerLeave(e as any); +// const rowDoc = FieldValue(Cast(this.props.rowInfo.original, Doc)); +// if (!rowDoc) return false; - const x = this.props.ScreenToLocalTransform().transformPoint(de.x, de.y); - const rect = this._header!.current!.getBoundingClientRect(); - const bounds = this.props.ScreenToLocalTransform().transformPoint(rect.left, rect.top + rect.height / 2); - const before = x[1] < bounds[1]; +// const x = this.props.ScreenToLocalTransform().transformPoint(de.x, de.y); +// const rect = this._header!.current!.getBoundingClientRect(); +// const bounds = this.props.ScreenToLocalTransform().transformPoint(rect.left, rect.top + rect.height / 2); +// const before = x[1] < bounds[1]; - const docDragData = de.complete.docDragData; - if (docDragData) { - e.stopPropagation(); - if (docDragData.draggedDocuments[0] === rowDoc) return true; - const addDocument = (doc: Doc | Doc[]) => this.props.addDoc(doc, rowDoc, before); - const movedDocs = docDragData.draggedDocuments; - return docDragData.dropAction || docDragData.userDropAction - ? docDragData.droppedDocuments.reduce((added: boolean, d) => this.props.addDoc(d, rowDoc, before) || added, false) - : docDragData.moveDocument - ? movedDocs.reduce((added: boolean, d) => docDragData.moveDocument?.(d, rowDoc, addDocument) || added, false) - : docDragData.droppedDocuments.reduce((added: boolean, d) => this.props.addDoc(d, rowDoc, before), false); - } - return false; - }; +// const docDragData = de.complete.docDragData; +// if (docDragData) { +// e.stopPropagation(); +// if (docDragData.draggedDocuments[0] === rowDoc) return true; +// const addDocument = (doc: Doc | Doc[]) => this.props.addDoc(doc, rowDoc, before); +// const movedDocs = docDragData.draggedDocuments; +// return docDragData.dropAction || docDragData.userDropAction +// ? docDragData.droppedDocuments.reduce((added: boolean, d) => this.props.addDoc(d, rowDoc, before) || added, false) +// : docDragData.moveDocument +// ? movedDocs.reduce((added: boolean, d) => docDragData.moveDocument?.(d, rowDoc, addDocument) || added, false) +// : docDragData.droppedDocuments.reduce((added: boolean, d) => this.props.addDoc(d, rowDoc, before), false); +// } +// return false; +// }; - onRowContextMenu = (e: React.MouseEvent): void => { - const description = this.props.rowWrapped ? 'Unwrap text on row' : 'Text wrap row'; - ContextMenu.Instance.addItem({ description: description, event: () => this.props.textWrapRow(this.props.rowInfo.original), icon: 'file-pdf' }); - }; +// onRowContextMenu = (e: React.MouseEvent): void => { +// const description = this.props.rowWrapped ? 'Unwrap text on row' : 'Text wrap row'; +// ContextMenu.Instance.addItem({ description: description, event: () => this.props.textWrapRow(this.props.rowInfo.original), icon: 'file-pdf' }); +// }; - @undoBatch - @action - move: DragManager.MoveFunction = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDoc) => { - const targetView = targetCollection && DocumentManager.Instance.getDocumentView(targetCollection); - return doc !== targetCollection && doc !== targetView?.props.ContainingCollectionDoc && this.props.removeDoc(doc) && addDoc(doc); - }; +// @undoBatch +// @action +// move: DragManager.MoveFunction = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDoc) => { +// const targetView = targetCollection && DocumentManager.Instance.getDocumentView(targetCollection); +// return doc !== targetCollection && doc !== targetView?.props.ContainingCollectionDoc && this.props.removeDoc(doc) && addDoc(doc); +// }; - @action - onKeyDown = (e: React.KeyboardEvent) => { - console.log('yes'); - if (e.key === 'Backspace' || e.key === 'Delete') { - undoBatch(() => this.props.removeDoc(this.props.rowInfo.original)); - } - }; +// @action +// onKeyDown = (e: React.KeyboardEvent) => { +// console.log('yes'); +// if (e.key === 'Backspace' || e.key === 'Delete') { +// undoBatch(() => this.props.removeDoc(this.props.rowInfo.original)); +// } +// }; - render() { - const { children = null, rowInfo } = this.props; +// render() { +// const { children = null, rowInfo } = this.props; - if (!rowInfo) { - return {children}; - } +// if (!rowInfo) { +// return {children}; +// } - const { original } = rowInfo; - const doc = FieldValue(Cast(original, Doc)); +// const { original } = rowInfo; +// const doc = FieldValue(Cast(original, Doc)); - if (!doc) return null; +// if (!doc) return null; - const reference = React.createRef(); - const onItemDown = SetupDrag(reference, () => doc, this.move, StrCast(this.props.dropAction) as dropActionType); +// const reference = React.createRef(); +// const onItemDown = SetupDrag(reference, () => doc, this.move, StrCast(this.props.dropAction) as dropActionType); - let className = 'collectionSchema-row'; - if (this.props.rowFocused) className += ' row-focused'; - if (this.props.rowWrapped) className += ' row-wrapped'; +// let className = 'collectionSchema-row'; +// if (this.props.rowFocused) className += ' row-focused'; +// if (this.props.rowWrapped) className += ' row-wrapped'; - return ( -
-
- -
-
this.props.removeDoc(this.props.rowInfo.original))}> - -
-
- -
-
this.props.addDocTab(this.props.rowInfo.original, OpenWhere.addRight)}> - -
-
- {children} - -
-
- ); - } -} +// return ( +//
+//
+// +//
+//
this.props.removeDoc(this.props.rowInfo.original))}> +// +//
+//
+// +//
+//
this.props.addDocTab(this.props.rowInfo.original, OpenWhere.addRight)}> +// +//
+//
+// {children} +// +//
+//
+// ); +// } +// } diff --git a/src/client/views/collections/old_collectionSchema/OldCollectionSchemaView.tsx b/src/client/views/collections/old_collectionSchema/OldCollectionSchemaView.tsx index 260db4b88..f3f09cbf0 100644 --- a/src/client/views/collections/old_collectionSchema/OldCollectionSchemaView.tsx +++ b/src/client/views/collections/old_collectionSchema/OldCollectionSchemaView.tsx @@ -1,649 +1,649 @@ -import React = require('react'); -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, observable, untracked } from 'mobx'; -import { observer } from 'mobx-react'; -import Measure from 'react-measure'; -// import { Resize } from 'react-table'; -import { Doc, Opt } from '../../../../fields/Doc'; -import { List } from '../../../../fields/List'; -import { listSpec } from '../../../../fields/Schema'; -import { PastelSchemaPalette, SchemaHeaderField } from '../../../../fields/SchemaHeaderField'; -import { Cast, NumCast } from '../../../../fields/Types'; -import { TraceMobx } from '../../../../fields/util'; -import { emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../Utils'; -import { DocUtils } from '../../../documents/Documents'; -import { SelectionManager } from '../../../util/SelectionManager'; -import { SnappingManager } from '../../../util/SnappingManager'; -import { Transform } from '../../../util/Transform'; -import { undoBatch } from '../../../util/UndoManager'; -import { ContextMenu } from '../../ContextMenu'; -import { ContextMenuProps } from '../../ContextMenuItem'; -import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../global/globalCssVariables.scss'; -import { DocumentView } from '../../nodes/DocumentView'; -import { DefaultStyleProvider } from '../../StyleProvider'; -import { CollectionSubView } from '../CollectionSubView'; -import './CollectionSchemaView.scss'; -// import { SchemaTable } from './SchemaTable'; -// bcz: need to add drag and drop of rows and columns. This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657 - -export enum ColumnType { - Any, - Number, - String, - Boolean, - Doc, - Image, - List, - Date, -} -// this map should be used for keys that should have a const type of value -const columnTypes: Map = new Map([ - ['title', ColumnType.String], - ['x', ColumnType.Number], - ['y', ColumnType.Number], - ['_width', ColumnType.Number], - ['_height', ColumnType.Number], - ['_nativeWidth', ColumnType.Number], - ['_nativeHeight', ColumnType.Number], - ['isPrototype', ColumnType.Boolean], - ['_curPage', ColumnType.Number], - ['_currentTimecode', ColumnType.Number], - ['zIndex', ColumnType.Number], -]); - -@observer -export class CollectionSchemaView extends CollectionSubView() { - private _previewCont?: HTMLDivElement; - - @observable _previewDoc: Doc | undefined = undefined; - @observable _focusedTable: Doc = this.props.Document; - @observable _col: any = ''; - @observable _menuWidth = 0; - @observable _headerOpen = false; - @observable _headerIsEditing = false; - @observable _menuHeight = 0; - @observable _pointerX = 0; - @observable _pointerY = 0; - @observable _openTypes: boolean = false; - - @computed get previewWidth() { - return () => NumCast(this.props.Document.schemaPreviewWidth); - } - @computed get previewHeight() { - return () => this.props.PanelHeight() - 2 * this.borderWidth; - } - @computed get tableWidth() { - return this.props.PanelWidth() - 2 * this.borderWidth - Number(SCHEMA_DIVIDER_WIDTH) - this.previewWidth(); - } - @computed get borderWidth() { - return Number(COLLECTION_BORDER_WIDTH); - } - @computed get scale() { - return this.props.ScreenToLocalTransform().Scale; - } - @computed get columns() { - return Cast(this.props.Document._schemaHeaders, listSpec(SchemaHeaderField), []); - } - set columns(columns: SchemaHeaderField[]) { - this.props.Document._schemaHeaders = new List(columns); - } - - @computed get menuCoordinates() { - let searchx = 0; - let searchy = 0; - if (this.props.Document._searchDoc) { - const el = document.getElementsByClassName('collectionSchemaView-searchContainer')[0]; - if (el !== undefined) { - const rect = el.getBoundingClientRect(); - searchx = rect.x; - searchy = rect.y; - } - } - const x = Math.max(0, Math.min(document.body.clientWidth - this._menuWidth, this._pointerX)) - searchx; - const y = Math.max(0, Math.min(document.body.clientHeight - this._menuHeight, this._pointerY)) - searchy; - return this.props.ScreenToLocalTransform().transformPoint(x, y); - } - - get documentKeys() { - const docs = this.childDocs; - const keys: { [key: string]: boolean } = {}; - // bcz: ugh. this is untracked since otherwise a large collection of documents will blast the server for all their fields. - // then as each document's fields come back, we update the documents _proxies. Each time we do this, the whole schema will be - // invalidated and re-rendered. This workaround will inquire all of the document fields before the options button is clicked. - // then by the time the options button is clicked, all of the fields should be in place. If a new field is added while this menu - // is displayed (unlikely) it won't show up until something else changes. - //TODO Types - untracked(() => docs.map(doc => Doc.GetAllPrototypes(doc).map(proto => Object.keys(proto).forEach(key => (keys[key] = false))))); - - this.columns.forEach(key => (keys[key.heading] = true)); - return Array.from(Object.keys(keys)); - } - - @action setHeaderIsEditing = (isEditing: boolean) => (this._headerIsEditing = isEditing); - - @undoBatch - setColumnType = action((columnField: SchemaHeaderField, type: ColumnType): void => { - this._openTypes = false; - if (columnTypes.get(columnField.heading)) return; - - const columns = this.columns; - const index = columns.indexOf(columnField); - if (index > -1) { - columnField.setType(NumCast(type)); - columns[index] = columnField; - this.columns = columns; - } - }); - - @undoBatch - setColumnColor = (columnField: SchemaHeaderField, color: string): void => { - const columns = this.columns; - const index = columns.indexOf(columnField); - if (index > -1) { - columnField.setColor(color); - columns[index] = columnField; - this.columns = columns; // need to set the columns to trigger rerender - } - }; - - @undoBatch - @action - setColumnSort = (columnField: SchemaHeaderField, descending: boolean | undefined) => { - const columns = this.columns; - columns.forEach(col => col.setDesc(undefined)); - - const index = columns.findIndex(c => c.heading === columnField.heading); - const column = columns[index]; - column.setDesc(descending); - columns[index] = column; - this.columns = columns; - }; - - renderTypes = (col: any) => { - if (columnTypes.get(col.heading)) return null; - - const type = col.type; - - const anyType = ( -
this.setColumnType(col, ColumnType.Any)}> - - Any -
- ); - - const numType = ( -
this.setColumnType(col, ColumnType.Number)}> - - Number -
- ); - - const textType = ( -
this.setColumnType(col, ColumnType.String)}> - - Text -
- ); - - const boolType = ( -
this.setColumnType(col, ColumnType.Boolean)}> - - Checkbox -
- ); - - const listType = ( -
this.setColumnType(col, ColumnType.List)}> - - List -
- ); - - const docType = ( -
this.setColumnType(col, ColumnType.Doc)}> - - Document -
- ); - - const imageType = ( -
this.setColumnType(col, ColumnType.Image)}> - - Image -
- ); - - const dateType = ( -
this.setColumnType(col, ColumnType.Date)}> - - Date -
- ); - - const allColumnTypes = ( -
- {anyType} - {numType} - {textType} - {boolType} - {listType} - {docType} - {imageType} - {dateType} -
- ); - - const justColType = - type === ColumnType.Any - ? anyType - : type === ColumnType.Number - ? numType - : type === ColumnType.String - ? textType - : type === ColumnType.Boolean - ? boolType - : type === ColumnType.List - ? listType - : type === ColumnType.Doc - ? docType - : type === ColumnType.Date - ? dateType - : imageType; - - return ( -
(this._openTypes = !this._openTypes))}> -
- - -
- {this._openTypes ? allColumnTypes : justColType} -
- ); - }; - - renderSorting = (col: any) => { - const sort = col.desc; - return ( -
- -
-
this.setColumnSort(col, true)}> - - Sort descending -
-
this.setColumnSort(col, false)}> - - Sort ascending -
-
this.setColumnSort(col, undefined)}> - - Clear sorting -
-
-
- ); - }; - - renderColors = (col: any) => { - const selected = col.color; - - const pink = PastelSchemaPalette.get('pink2'); - const purple = PastelSchemaPalette.get('purple2'); - const blue = PastelSchemaPalette.get('bluegreen1'); - const yellow = PastelSchemaPalette.get('yellow4'); - const red = PastelSchemaPalette.get('red2'); - const gray = '#f1efeb'; - - return ( -
- -
-
this.setColumnColor(col, pink!)}>
-
this.setColumnColor(col, purple!)}>
-
this.setColumnColor(col, blue!)}>
-
this.setColumnColor(col, yellow!)}>
-
this.setColumnColor(col, red!)}>
-
this.setColumnColor(col, gray)}>
-
-
- ); - }; - - @undoBatch - @action - changeColumns = (oldKey: string, newKey: string, addNew: boolean, filter?: string) => { - const columns = this.columns; - if (columns === undefined) { - this.columns = new List([new SchemaHeaderField(newKey, 'f1efeb')]); - } else { - if (addNew) { - columns.push(new SchemaHeaderField(newKey, 'f1efeb')); - this.columns = columns; - } else { - const index = columns.map(c => c.heading).indexOf(oldKey); - if (index > -1) { - const column = columns[index]; - column.setHeading(newKey); - columns[index] = column; - this.columns = columns; - if (filter) { - Doc.setDocFilter(this.props.Document, newKey, filter, 'match'); - } else { - this.props.Document._docFilters = undefined; - } - } - } - } - }; - - @action - openHeader = (col: any, screenx: number, screeny: number) => { - this._col = col; - this._headerOpen = true; - this._pointerX = screenx; - this._pointerY = screeny; - }; - - @action - closeHeader = () => { - this._headerOpen = false; - }; - - @undoBatch - @action - deleteColumn = (key: string) => { - const columns = this.columns; - if (columns === undefined) { - this.columns = new List([]); - } else { - const index = columns.map(c => c.heading).indexOf(key); - if (index > -1) { - columns.splice(index, 1); - this.columns = columns; - } - } - this.closeHeader(); - }; - - getPreviewTransform = (): Transform => { - return this.props.ScreenToLocalTransform().translate(-this.borderWidth - NumCast(COLLECTION_BORDER_WIDTH) - this.tableWidth, -this.borderWidth); - }; - - @action - onHeaderClick = (e: React.PointerEvent) => { - e.stopPropagation(); - }; - - @action - onWheel(e: React.WheelEvent) { - const scale = this.props.ScreenToLocalTransform().Scale; - this.props.isContentActive(true) && e.stopPropagation(); - } - - @computed get renderMenuContent() { - TraceMobx(); - return ( -
- {this.renderTypes(this._col)} - {this.renderColors(this._col)} -
- -
-
- ); - } - - private createTarget = (ele: HTMLDivElement) => { - this._previewCont = ele; - super.CreateDropTarget(ele); - }; - - isFocused = (doc: Doc, outsideReaction: boolean): boolean => this.props.isSelected(outsideReaction) && doc === this._focusedTable; - - @action setFocused = (doc: Doc) => (this._focusedTable = doc); - - @action setPreviewDoc = (doc: Opt) => { - SelectionManager.SelectSchemaViewDoc(doc); - this._previewDoc = doc; - }; - - //toggles preview side-panel of schema - @action - toggleExpander = () => { - this.props.Document.schemaPreviewWidth = this.previewWidth() === 0 ? Math.min(this.tableWidth / 3, 200) : 0; - }; - - onDividerDown = (e: React.PointerEvent) => { - setupMoveUpEvents(this, e, this.onDividerMove, emptyFunction, this.toggleExpander); - }; - @action - onDividerMove = (e: PointerEvent, down: number[], delta: number[]) => { - const nativeWidth = this._previewCont!.getBoundingClientRect(); - const minWidth = 40; - const maxWidth = 1000; - const movedWidth = this.props.ScreenToLocalTransform().transformDirection(nativeWidth.right - e.clientX, 0)[0]; - const width = movedWidth < minWidth ? minWidth : movedWidth > maxWidth ? maxWidth : movedWidth; - this.props.Document.schemaPreviewWidth = width; - return false; - }; - - onPointerDown = (e: React.PointerEvent): void => { - if (e.button === 0 && !e.altKey && !e.ctrlKey && !e.metaKey) { - if (this.props.isSelected(true)) e.stopPropagation(); - else this.props.select(false); - } - }; - - @computed - get previewDocument(): Doc | undefined { - return this._previewDoc; - } - - @computed - get dividerDragger() { - return this.previewWidth() === 0 ? null : ( -
-
-
- ); - } - - @computed - get previewPanel() { - return ( -
- {!this.previewDocument ? null : ( - - )} -
- ); - } - - @computed - get schemaTable() { - return ( - - ); - } - - @computed - public get schemaToolbar() { - return ( -
-
-
- - Show Preview -
-
-
- ); - } - - onSpecificMenu = (e: React.MouseEvent) => { - if ((e.target as any)?.className?.includes?.('collectionSchemaView-cell') || e.target instanceof HTMLSpanElement) { - const cm = ContextMenu.Instance; - const options = cm.findByDescription('Options...'); - const optionItems: ContextMenuProps[] = options && 'subitems' in options ? options.subitems : []; - optionItems.push({ description: 'remove', event: () => this._previewDoc && this.props.removeDocument?.(this._previewDoc), icon: 'trash' }); - !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'compass' }); - cm.displayMenu(e.clientX, e.clientY); - (e.nativeEvent as any).SchemaHandled = true; // not sure why this is needed, but if you right-click quickly on a cell, the Document/Collection contextMenu handlers still fire without this. - e.stopPropagation(); - } - }; - - @action - onTableClick = (e: React.MouseEvent): void => { - if (!(e.target as any)?.className?.includes?.('collectionSchemaView-cell') && !(e.target instanceof HTMLSpanElement)) { - this.setPreviewDoc(undefined); - } else { - e.stopPropagation(); - } - this.setFocused(this.props.Document); - this.closeHeader(); - }; - - onResizedChange = (newResized: Resize[], event: any) => { - const columns = this.columns; - newResized.forEach(resized => { - const index = columns.findIndex(c => c.heading === resized.id); - const column = columns[index]; - column.setWidth(resized.value); - columns[index] = column; - }); - this.columns = columns; - }; - - @action - setColumns = (columns: SchemaHeaderField[]) => (this.columns = columns); - - @undoBatch - reorderColumns = (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columnsValues: SchemaHeaderField[]) => { - const columns = [...columnsValues]; - const oldIndex = columns.indexOf(toMove); - const relIndex = columns.indexOf(relativeTo); - const newIndex = oldIndex > relIndex && !before ? relIndex + 1 : oldIndex < relIndex && before ? relIndex - 1 : relIndex; - - if (oldIndex === newIndex) return; - - columns.splice(newIndex, 0, columns.splice(oldIndex, 1)[0]); - this.columns = columns; - }; - - onZoomMenu = (e: React.WheelEvent) => this.props.isContentActive(true) && e.stopPropagation(); - - render() { - TraceMobx(); - if (!this.props.isContentActive()) setTimeout(() => this.closeHeader(), 0); - const menuContent = this.renderMenuContent; - const menu = ( -
this.onZoomMenu(e)} onPointerDown={e => this.onHeaderClick(e)} style={{ transform: `translate(${this.menuCoordinates[0]}px, ${this.menuCoordinates[1]}px)` }}> - { - const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height); - this._menuWidth = dim[0]; - this._menuHeight = dim[1]; - })}> - {({ measureRef }) =>
{menuContent}
} - -
- ); - return ( -
-
this.props.isContentActive(true) && e.stopPropagation()} - onDrop={e => this.onExternalDrop(e, {})} - ref={this.createTarget}> - {this.schemaTable} -
- {this.dividerDragger} - {!this.previewWidth() ? null : this.previewPanel} - {this._headerOpen && this.props.isContentActive() ? menu : null} -
- ); - TraceMobx(); - return
HELLO
; - } -} +// import React = require('react'); +// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +// import { action, computed, observable, untracked } from 'mobx'; +// import { observer } from 'mobx-react'; +// import Measure from 'react-measure'; +// // import { Resize } from 'react-table'; +// import { Doc, Opt } from '../../../../fields/Doc'; +// import { List } from '../../../../fields/List'; +// import { listSpec } from '../../../../fields/Schema'; +// import { PastelSchemaPalette, SchemaHeaderField } from '../../../../fields/SchemaHeaderField'; +// import { Cast, NumCast } from '../../../../fields/Types'; +// import { TraceMobx } from '../../../../fields/util'; +// import { emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../Utils'; +// import { DocUtils } from '../../../documents/Documents'; +// import { SelectionManager } from '../../../util/SelectionManager'; +// import { SnappingManager } from '../../../util/SnappingManager'; +// import { Transform } from '../../../util/Transform'; +// import { undoBatch } from '../../../util/UndoManager'; +// import { ContextMenu } from '../../ContextMenu'; +// import { ContextMenuProps } from '../../ContextMenuItem'; +// import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../global/globalCssVariables.scss'; +// import { DocumentView } from '../../nodes/DocumentView'; +// import { DefaultStyleProvider } from '../../StyleProvider'; +// import { CollectionSubView } from '../CollectionSubView'; +// import './CollectionSchemaView.scss'; +// // import { SchemaTable } from './SchemaTable'; +// // bcz: need to add drag and drop of rows and columns. This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657 + +// export enum ColumnType { +// Any, +// Number, +// String, +// Boolean, +// Doc, +// Image, +// List, +// Date, +// } +// // this map should be used for keys that should have a const type of value +// const columnTypes: Map = new Map([ +// ['title', ColumnType.String], +// ['x', ColumnType.Number], +// ['y', ColumnType.Number], +// ['_width', ColumnType.Number], +// ['_height', ColumnType.Number], +// ['_nativeWidth', ColumnType.Number], +// ['_nativeHeight', ColumnType.Number], +// ['isPrototype', ColumnType.Boolean], +// ['_curPage', ColumnType.Number], +// ['_currentTimecode', ColumnType.Number], +// ['zIndex', ColumnType.Number], +// ]); + +// @observer +// export class CollectionSchemaView extends CollectionSubView() { +// private _previewCont?: HTMLDivElement; + +// @observable _previewDoc: Doc | undefined = undefined; +// @observable _focusedTable: Doc = this.props.Document; +// @observable _col: any = ''; +// @observable _menuWidth = 0; +// @observable _headerOpen = false; +// @observable _headerIsEditing = false; +// @observable _menuHeight = 0; +// @observable _pointerX = 0; +// @observable _pointerY = 0; +// @observable _openTypes: boolean = false; + +// @computed get previewWidth() { +// return () => NumCast(this.props.Document.schemaPreviewWidth); +// } +// @computed get previewHeight() { +// return () => this.props.PanelHeight() - 2 * this.borderWidth; +// } +// @computed get tableWidth() { +// return this.props.PanelWidth() - 2 * this.borderWidth - Number(SCHEMA_DIVIDER_WIDTH) - this.previewWidth(); +// } +// @computed get borderWidth() { +// return Number(COLLECTION_BORDER_WIDTH); +// } +// @computed get scale() { +// return this.props.ScreenToLocalTransform().Scale; +// } +// @computed get columns() { +// return Cast(this.props.Document._schemaHeaders, listSpec(SchemaHeaderField), []); +// } +// set columns(columns: SchemaHeaderField[]) { +// this.props.Document._schemaHeaders = new List(columns); +// } + +// @computed get menuCoordinates() { +// let searchx = 0; +// let searchy = 0; +// if (this.props.Document._searchDoc) { +// const el = document.getElementsByClassName('collectionSchemaView-searchContainer')[0]; +// if (el !== undefined) { +// const rect = el.getBoundingClientRect(); +// searchx = rect.x; +// searchy = rect.y; +// } +// } +// const x = Math.max(0, Math.min(document.body.clientWidth - this._menuWidth, this._pointerX)) - searchx; +// const y = Math.max(0, Math.min(document.body.clientHeight - this._menuHeight, this._pointerY)) - searchy; +// return this.props.ScreenToLocalTransform().transformPoint(x, y); +// } + +// get documentKeys() { +// const docs = this.childDocs; +// const keys: { [key: string]: boolean } = {}; +// // bcz: ugh. this is untracked since otherwise a large collection of documents will blast the server for all their fields. +// // then as each document's fields come back, we update the documents _proxies. Each time we do this, the whole schema will be +// // invalidated and re-rendered. This workaround will inquire all of the document fields before the options button is clicked. +// // then by the time the options button is clicked, all of the fields should be in place. If a new field is added while this menu +// // is displayed (unlikely) it won't show up until something else changes. +// //TODO Types +// untracked(() => docs.map(doc => Doc.GetAllPrototypes(doc).map(proto => Object.keys(proto).forEach(key => (keys[key] = false))))); + +// this.columns.forEach(key => (keys[key.heading] = true)); +// return Array.from(Object.keys(keys)); +// } + +// @action setHeaderIsEditing = (isEditing: boolean) => (this._headerIsEditing = isEditing); + +// @undoBatch +// setColumnType = action((columnField: SchemaHeaderField, type: ColumnType): void => { +// this._openTypes = false; +// if (columnTypes.get(columnField.heading)) return; + +// const columns = this.columns; +// const index = columns.indexOf(columnField); +// if (index > -1) { +// columnField.setType(NumCast(type)); +// columns[index] = columnField; +// this.columns = columns; +// } +// }); + +// @undoBatch +// setColumnColor = (columnField: SchemaHeaderField, color: string): void => { +// const columns = this.columns; +// const index = columns.indexOf(columnField); +// if (index > -1) { +// columnField.setColor(color); +// columns[index] = columnField; +// this.columns = columns; // need to set the columns to trigger rerender +// } +// }; + +// @undoBatch +// @action +// setColumnSort = (columnField: SchemaHeaderField, descending: boolean | undefined) => { +// const columns = this.columns; +// columns.forEach(col => col.setDesc(undefined)); + +// const index = columns.findIndex(c => c.heading === columnField.heading); +// const column = columns[index]; +// column.setDesc(descending); +// columns[index] = column; +// this.columns = columns; +// }; + +// renderTypes = (col: any) => { +// if (columnTypes.get(col.heading)) return null; + +// const type = col.type; + +// const anyType = ( +//
this.setColumnType(col, ColumnType.Any)}> +// +// Any +//
+// ); + +// const numType = ( +//
this.setColumnType(col, ColumnType.Number)}> +// +// Number +//
+// ); + +// const textType = ( +//
this.setColumnType(col, ColumnType.String)}> +// +// Text +//
+// ); + +// const boolType = ( +//
this.setColumnType(col, ColumnType.Boolean)}> +// +// Checkbox +//
+// ); + +// const listType = ( +//
this.setColumnType(col, ColumnType.List)}> +// +// List +//
+// ); + +// const docType = ( +//
this.setColumnType(col, ColumnType.Doc)}> +// +// Document +//
+// ); + +// const imageType = ( +//
this.setColumnType(col, ColumnType.Image)}> +// +// Image +//
+// ); + +// const dateType = ( +//
this.setColumnType(col, ColumnType.Date)}> +// +// Date +//
+// ); + +// const allColumnTypes = ( +//
+// {anyType} +// {numType} +// {textType} +// {boolType} +// {listType} +// {docType} +// {imageType} +// {dateType} +//
+// ); + +// const justColType = +// type === ColumnType.Any +// ? anyType +// : type === ColumnType.Number +// ? numType +// : type === ColumnType.String +// ? textType +// : type === ColumnType.Boolean +// ? boolType +// : type === ColumnType.List +// ? listType +// : type === ColumnType.Doc +// ? docType +// : type === ColumnType.Date +// ? dateType +// : imageType; + +// return ( +//
(this._openTypes = !this._openTypes))}> +//
+// +// +//
+// {this._openTypes ? allColumnTypes : justColType} +//
+// ); +// }; + +// renderSorting = (col: any) => { +// const sort = col.desc; +// return ( +//
+// +//
+//
this.setColumnSort(col, true)}> +// +// Sort descending +//
+//
this.setColumnSort(col, false)}> +// +// Sort ascending +//
+//
this.setColumnSort(col, undefined)}> +// +// Clear sorting +//
+//
+//
+// ); +// }; + +// renderColors = (col: any) => { +// const selected = col.color; + +// const pink = PastelSchemaPalette.get('pink2'); +// const purple = PastelSchemaPalette.get('purple2'); +// const blue = PastelSchemaPalette.get('bluegreen1'); +// const yellow = PastelSchemaPalette.get('yellow4'); +// const red = PastelSchemaPalette.get('red2'); +// const gray = '#f1efeb'; + +// return ( +//
+// +//
+//
this.setColumnColor(col, pink!)}>
+//
this.setColumnColor(col, purple!)}>
+//
this.setColumnColor(col, blue!)}>
+//
this.setColumnColor(col, yellow!)}>
+//
this.setColumnColor(col, red!)}>
+//
this.setColumnColor(col, gray)}>
+//
+//
+// ); +// }; + +// @undoBatch +// @action +// changeColumns = (oldKey: string, newKey: string, addNew: boolean, filter?: string) => { +// const columns = this.columns; +// if (columns === undefined) { +// this.columns = new List([new SchemaHeaderField(newKey, 'f1efeb')]); +// } else { +// if (addNew) { +// columns.push(new SchemaHeaderField(newKey, 'f1efeb')); +// this.columns = columns; +// } else { +// const index = columns.map(c => c.heading).indexOf(oldKey); +// if (index > -1) { +// const column = columns[index]; +// column.setHeading(newKey); +// columns[index] = column; +// this.columns = columns; +// if (filter) { +// Doc.setDocFilter(this.props.Document, newKey, filter, 'match'); +// } else { +// this.props.Document._docFilters = undefined; +// } +// } +// } +// } +// }; + +// @action +// openHeader = (col: any, screenx: number, screeny: number) => { +// this._col = col; +// this._headerOpen = true; +// this._pointerX = screenx; +// this._pointerY = screeny; +// }; + +// @action +// closeHeader = () => { +// this._headerOpen = false; +// }; + +// @undoBatch +// @action +// deleteColumn = (key: string) => { +// const columns = this.columns; +// if (columns === undefined) { +// this.columns = new List([]); +// } else { +// const index = columns.map(c => c.heading).indexOf(key); +// if (index > -1) { +// columns.splice(index, 1); +// this.columns = columns; +// } +// } +// this.closeHeader(); +// }; + +// getPreviewTransform = (): Transform => { +// return this.props.ScreenToLocalTransform().translate(-this.borderWidth - NumCast(COLLECTION_BORDER_WIDTH) - this.tableWidth, -this.borderWidth); +// }; + +// @action +// onHeaderClick = (e: React.PointerEvent) => { +// e.stopPropagation(); +// }; + +// @action +// onWheel(e: React.WheelEvent) { +// const scale = this.props.ScreenToLocalTransform().Scale; +// this.props.isContentActive(true) && e.stopPropagation(); +// } + +// @computed get renderMenuContent() { +// TraceMobx(); +// return ( +//
+// {this.renderTypes(this._col)} +// {this.renderColors(this._col)} +//
+// +//
+//
+// ); +// } + +// private createTarget = (ele: HTMLDivElement) => { +// this._previewCont = ele; +// super.CreateDropTarget(ele); +// }; + +// isFocused = (doc: Doc, outsideReaction: boolean): boolean => this.props.isSelected(outsideReaction) && doc === this._focusedTable; + +// @action setFocused = (doc: Doc) => (this._focusedTable = doc); + +// @action setPreviewDoc = (doc: Opt) => { +// SelectionManager.SelectSchemaViewDoc(doc); +// this._previewDoc = doc; +// }; + +// //toggles preview side-panel of schema +// @action +// toggleExpander = () => { +// this.props.Document.schemaPreviewWidth = this.previewWidth() === 0 ? Math.min(this.tableWidth / 3, 200) : 0; +// }; + +// onDividerDown = (e: React.PointerEvent) => { +// setupMoveUpEvents(this, e, this.onDividerMove, emptyFunction, this.toggleExpander); +// }; +// @action +// onDividerMove = (e: PointerEvent, down: number[], delta: number[]) => { +// const nativeWidth = this._previewCont!.getBoundingClientRect(); +// const minWidth = 40; +// const maxWidth = 1000; +// const movedWidth = this.props.ScreenToLocalTransform().transformDirection(nativeWidth.right - e.clientX, 0)[0]; +// const width = movedWidth < minWidth ? minWidth : movedWidth > maxWidth ? maxWidth : movedWidth; +// this.props.Document.schemaPreviewWidth = width; +// return false; +// }; + +// onPointerDown = (e: React.PointerEvent): void => { +// if (e.button === 0 && !e.altKey && !e.ctrlKey && !e.metaKey) { +// if (this.props.isSelected(true)) e.stopPropagation(); +// else this.props.select(false); +// } +// }; + +// @computed +// get previewDocument(): Doc | undefined { +// return this._previewDoc; +// } + +// @computed +// get dividerDragger() { +// return this.previewWidth() === 0 ? null : ( +//
+//
+//
+// ); +// } + +// @computed +// get previewPanel() { +// return ( +//
+// {!this.previewDocument ? null : ( +// +// )} +//
+// ); +// } + +// @computed +// get schemaTable() { +// return ( +// +// ); +// } + +// @computed +// public get schemaToolbar() { +// return ( +//
+//
+//
+// +// Show Preview +//
+//
+//
+// ); +// } + +// onSpecificMenu = (e: React.MouseEvent) => { +// if ((e.target as any)?.className?.includes?.('collectionSchemaView-cell') || e.target instanceof HTMLSpanElement) { +// const cm = ContextMenu.Instance; +// const options = cm.findByDescription('Options...'); +// const optionItems: ContextMenuProps[] = options && 'subitems' in options ? options.subitems : []; +// optionItems.push({ description: 'remove', event: () => this._previewDoc && this.props.removeDocument?.(this._previewDoc), icon: 'trash' }); +// !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'compass' }); +// cm.displayMenu(e.clientX, e.clientY); +// (e.nativeEvent as any).SchemaHandled = true; // not sure why this is needed, but if you right-click quickly on a cell, the Document/Collection contextMenu handlers still fire without this. +// e.stopPropagation(); +// } +// }; + +// @action +// onTableClick = (e: React.MouseEvent): void => { +// if (!(e.target as any)?.className?.includes?.('collectionSchemaView-cell') && !(e.target instanceof HTMLSpanElement)) { +// this.setPreviewDoc(undefined); +// } else { +// e.stopPropagation(); +// } +// this.setFocused(this.props.Document); +// this.closeHeader(); +// }; + +// onResizedChange = (newResized: Resize[], event: any) => { +// const columns = this.columns; +// newResized.forEach(resized => { +// const index = columns.findIndex(c => c.heading === resized.id); +// const column = columns[index]; +// column.setWidth(resized.value); +// columns[index] = column; +// }); +// this.columns = columns; +// }; + +// @action +// setColumns = (columns: SchemaHeaderField[]) => (this.columns = columns); + +// @undoBatch +// reorderColumns = (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columnsValues: SchemaHeaderField[]) => { +// const columns = [...columnsValues]; +// const oldIndex = columns.indexOf(toMove); +// const relIndex = columns.indexOf(relativeTo); +// const newIndex = oldIndex > relIndex && !before ? relIndex + 1 : oldIndex < relIndex && before ? relIndex - 1 : relIndex; + +// if (oldIndex === newIndex) return; + +// columns.splice(newIndex, 0, columns.splice(oldIndex, 1)[0]); +// this.columns = columns; +// }; + +// onZoomMenu = (e: React.WheelEvent) => this.props.isContentActive(true) && e.stopPropagation(); + +// render() { +// TraceMobx(); +// if (!this.props.isContentActive()) setTimeout(() => this.closeHeader(), 0); +// const menuContent = this.renderMenuContent; +// const menu = ( +//
this.onZoomMenu(e)} onPointerDown={e => this.onHeaderClick(e)} style={{ transform: `translate(${this.menuCoordinates[0]}px, ${this.menuCoordinates[1]}px)` }}> +// { +// const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height); +// this._menuWidth = dim[0]; +// this._menuHeight = dim[1]; +// })}> +// {({ measureRef }) =>
{menuContent}
} +// +//
+// ); +// return ( +//
+//
this.props.isContentActive(true) && e.stopPropagation()} +// onDrop={e => this.onExternalDrop(e, {})} +// ref={this.createTarget}> +// {this.schemaTable} +//
+// {this.dividerDragger} +// {!this.previewWidth() ? null : this.previewPanel} +// {this._headerOpen && this.props.isContentActive() ? menu : null} +//
+// ); +// TraceMobx(); +// return
HELLO
; +// } +// } diff --git a/src/client/views/collections/old_collectionSchema/OldSchemaTable.tsx b/src/client/views/collections/old_collectionSchema/OldSchemaTable.tsx index 1b4fcf0a4..bc33f3be5 100644 --- a/src/client/views/collections/old_collectionSchema/OldSchemaTable.tsx +++ b/src/client/views/collections/old_collectionSchema/OldSchemaTable.tsx @@ -1,694 +1,694 @@ -import { IconProp } from '@fortawesome/fontawesome-svg-core'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, observable } from 'mobx'; -import { observer } from 'mobx-react'; -import * as React from 'react'; -import ReactTable, { CellInfo, Column, ComponentPropsGetterR, Resize, SortingRule } from 'react-table'; -import { DateField } from '../../../../fields/DateField'; -import { AclPrivate, AclReadonly, DataSym, Doc, DocListCast, Field, Opt } from '../../../../fields/Doc'; -import { Id } from '../../../../fields/FieldSymbols'; -import { List } from '../../../../fields/List'; -import { listSpec } from '../../../../fields/Schema'; -import { SchemaHeaderField } from '../../../../fields/SchemaHeaderField'; -import { ComputedField } from '../../../../fields/ScriptField'; -import { Cast, FieldValue, NumCast, StrCast } from '../../../../fields/Types'; -import { ImageField } from '../../../../fields/URLField'; -import { GetEffectiveAcl } from '../../../../fields/util'; -import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../../../Utils'; -import { Docs, DocumentOptions, DocUtils } from '../../../documents/Documents'; -import { DocumentType } from '../../../documents/DocumentTypes'; -import { CompileScript, Transformer, ts } from '../../../util/Scripting'; -import { Transform } from '../../../util/Transform'; -import { undoBatch } from '../../../util/UndoManager'; -import '../../../views/DocumentDecorations.scss'; -import { ContextMenu } from '../../ContextMenu'; -import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../global/globalCssVariables.scss'; -import { DocumentView, OpenWhere } from '../../nodes/DocumentView'; -import { PinProps } from '../../nodes/trails'; -import { DefaultStyleProvider } from '../../StyleProvider'; -import { CollectionView } from '../CollectionView'; -import { - CellProps, - CollectionSchemaButtons, - CollectionSchemaCell, - CollectionSchemaCheckboxCell, - CollectionSchemaDateCell, - CollectionSchemaDocCell, - CollectionSchemaImageCell, - CollectionSchemaListCell, - CollectionSchemaNumberCell, - CollectionSchemaStringCell, -} from './CollectionSchemaCells'; -import { CollectionSchemaAddColumnHeader, KeysDropdown } from './CollectionSchemaHeaders'; -import { MovableColumn } from './OldCollectionSchemaMovableColumn'; -import { MovableRow } from './CollectionSchemaMovableRow'; -import './CollectionSchemaView.scss'; - -enum ColumnType { - Any, - Number, - String, - Boolean, - Doc, - Image, - List, - Date, -} - -// this map should be used for keys that should have a const type of value -const columnTypes: Map = new Map([ - ['title', ColumnType.String], - ['x', ColumnType.Number], - ['y', ColumnType.Number], - ['_width', ColumnType.Number], - ['_height', ColumnType.Number], - ['_nativeWidth', ColumnType.Number], - ['_nativeHeight', ColumnType.Number], - ['isPrototype', ColumnType.Boolean], - ['_curPage', ColumnType.Number], - ['_currentTimecode', ColumnType.Number], - ['zIndex', ColumnType.Number], -]); - -export interface SchemaTableProps { - Document: Doc; // child doc - dataDoc?: Doc; - PanelHeight: () => number; - PanelWidth: () => number; - childDocs?: Doc[]; - CollectionView: Opt; - ContainingCollectionView: Opt; - ContainingCollectionDoc: Opt; - fieldKey: string; - renderDepth: number; - deleteDocument?: (document: Doc | Doc[]) => boolean; - addDocument?: (document: Doc | Doc[]) => boolean; - moveDocument?: (document: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => boolean; - ScreenToLocalTransform: () => Transform; - active: (outsideReaction: boolean | undefined) => boolean | undefined; - onDrop: (e: React.DragEvent, options: DocumentOptions, completed?: (() => void) | undefined) => void; - addDocTab: (document: Doc, where: OpenWhere) => boolean; - pinToPres: (document: Doc, pinProps: PinProps) => void; - isSelected: (outsideReaction?: boolean) => boolean; - isFocused: (document: Doc, outsideReaction: boolean) => boolean; - setFocused: (document: Doc) => void; - setPreviewDoc: (document: Opt) => void; - columns: SchemaHeaderField[]; - documentKeys: any[]; - headerIsEditing: boolean; - openHeader: (column: any, screenx: number, screeny: number) => void; - onClick: (e: React.MouseEvent) => void; - onPointerDown: (e: React.PointerEvent) => void; - onResizedChange: (newResized: Resize[], event: any) => void; - setColumns: (columns: SchemaHeaderField[]) => void; - reorderColumns: (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columnsValues: SchemaHeaderField[]) => void; - changeColumns: (oldKey: string, newKey: string, addNew: boolean) => void; - setHeaderIsEditing: (isEditing: boolean) => void; - changeColumnSort: (columnField: SchemaHeaderField, descending: boolean | undefined) => void; -} - -@observer -export class SchemaTable extends React.Component { - @observable _cellIsEditing: boolean = false; - @observable _focusedCell: { row: number; col: number } = { row: 0, col: 0 }; - @observable _openCollections: Set = new Set(); - - @observable _showDoc: Doc | undefined; - @observable _showDataDoc: any = ''; - @observable _showDocPos: number[] = []; - - @observable _showTitleDropdown: boolean = false; - - @computed get previewWidth() { - return () => NumCast(this.props.Document.schemaPreviewWidth); - } - @computed get previewHeight() { - return () => this.props.PanelHeight() - 2 * this.borderWidth; - } - @computed get tableWidth() { - return this.props.PanelWidth() - 2 * this.borderWidth - Number(SCHEMA_DIVIDER_WIDTH) - this.previewWidth(); - } - - @computed get childDocs() { - if (this.props.childDocs) return this.props.childDocs; - - const doc = this.props.dataDoc ? this.props.dataDoc : this.props.Document; - return DocListCast(doc[this.props.fieldKey]); - } - set childDocs(docs: Doc[]) { - const doc = this.props.dataDoc ? this.props.dataDoc : this.props.Document; - doc[this.props.fieldKey] = new List(docs); - } - - @computed get textWrappedRows() { - return Cast(this.props.Document.textwrappedSchemaRows, listSpec('string'), []); - } - set textWrappedRows(textWrappedRows: string[]) { - this.props.Document.textwrappedSchemaRows = new List(textWrappedRows); - } - - @computed get resized(): { id: string; value: number }[] { - return this.props.columns.reduce((resized, shf) => { - shf.width > -1 && resized.push({ id: shf.heading, value: shf.width }); - return resized; - }, [] as { id: string; value: number }[]); - } - @computed get sorted(): SortingRule[] { - return this.props.columns.reduce((sorted, shf) => { - shf.desc !== undefined && sorted.push({ id: shf.heading, desc: shf.desc }); - return sorted; - }, [] as SortingRule[]); - } - - @action - changeSorting = (col: any) => { - this.props.changeColumnSort(col, col.desc === true ? false : col.desc === false ? undefined : true); - }; - - @action - changeTitleMode = () => (this._showTitleDropdown = !this._showTitleDropdown); - - @computed get borderWidth() { - return Number(COLLECTION_BORDER_WIDTH); - } - @computed get tableColumns(): Column[] { - const possibleKeys = this.props.documentKeys.filter(key => this.props.columns.findIndex(existingKey => existingKey.heading.toUpperCase() === key.toUpperCase()) === -1); - const columns: Column[] = []; - const tableIsFocused = this.props.isFocused(this.props.Document, false); - const focusedRow = this._focusedCell.row; - const focusedCol = this._focusedCell.col; - const isEditable = !this.props.headerIsEditing; - - columns.push({ - expander: true, - Header: '', - width: 58, - Expander: rowInfo => { - return rowInfo.original.type !== DocumentType.COL ? null : ( -
this._openCollections[rowInfo.isExpanded ? 'delete' : 'add'](rowInfo.viewIndex))}> - -
- ); - }, - }); - columns.push( - ...this.props.columns.map(col => { - const icon: IconProp = - this.getColumnType(col) === ColumnType.Number - ? 'hashtag' - : this.getColumnType(col) === ColumnType.String - ? 'font' - : this.getColumnType(col) === ColumnType.Boolean - ? 'check-square' - : this.getColumnType(col) === ColumnType.Doc - ? 'file' - : this.getColumnType(col) === ColumnType.Image - ? 'image' - : this.getColumnType(col) === ColumnType.List - ? 'list-ul' - : this.getColumnType(col) === ColumnType.Date - ? 'calendar' - : 'align-justify'; - - const keysDropdown = ( - c.heading)} - canAddNew={true} - addNew={false} - onSelect={this.props.changeColumns} - setIsEditing={this.props.setHeaderIsEditing} - docs={this.props.childDocs} - Document={this.props.Document} - dataDoc={this.props.dataDoc} - fieldKey={this.props.fieldKey} - ContainingCollectionDoc={this.props.ContainingCollectionDoc} - ContainingCollectionView={this.props.ContainingCollectionView} - active={this.props.active} - openHeader={this.props.openHeader} - icon={icon} - col={col} - // try commenting this out - width={'100%'} - /> - ); - - const sortIcon = col.desc === undefined ? 'caret-right' : col.desc === true ? 'caret-down' : 'caret-up'; - const header = ( -
- {keysDropdown} -
this.changeSorting(col)} style={{ width: 21, padding: 1, display: 'inline', zIndex: 1, background: 'inherit', cursor: 'pointer' }}> - -
- {/* {this.props.Document._chromeHidden || this.props.addDocument == returnFalse ? undefined :
+ new
} */} -
- ); - - return { - Header: , - accessor: (doc: Doc) => (doc ? Field.toString(doc[col.heading] as Field) : 0), - id: col.heading, - Cell: (rowProps: CellInfo) => { - const rowIndex = rowProps.index; - const columnIndex = this.props.columns.map(c => c.heading).indexOf(rowProps.column.id!); - const isFocused = focusedRow === rowIndex && focusedCol === columnIndex && tableIsFocused; - - const props: CellProps = { - row: rowIndex, - col: columnIndex, - rowProps: rowProps, - isFocused: isFocused, - changeFocusedCellByIndex: this.changeFocusedCellByIndex, - CollectionView: this.props.CollectionView, - ContainingCollection: this.props.ContainingCollectionView, - Document: this.props.Document, - fieldKey: this.props.fieldKey, - renderDepth: this.props.renderDepth, - addDocTab: this.props.addDocTab, - pinToPres: this.props.pinToPres, - moveDocument: this.props.moveDocument, - setIsEditing: this.setCellIsEditing, - isEditable: isEditable, - setPreviewDoc: this.props.setPreviewDoc, - setComputed: this.setComputed, - getField: this.getField, - showDoc: this.showDoc, - }; - - switch (this.getColumnType(col, rowProps.original, rowProps.column.id)) { - case ColumnType.Number: - return ; - case ColumnType.String: - return ; - case ColumnType.Boolean: - return ; - case ColumnType.Doc: - return ; - case ColumnType.Image: - return ; - case ColumnType.List: - return ; - case ColumnType.Date: - return ; - default: - return ; - } - }, - minWidth: 200, - }; - }) - ); - columns.push({ - Header: , - accessor: (doc: Doc) => 0, - id: 'add', - Cell: (rowProps: CellInfo) => { - const rowIndex = rowProps.index; - const columnIndex = this.props.columns.map(c => c.heading).indexOf(rowProps.column.id!); - const isFocused = focusedRow === rowIndex && focusedCol === columnIndex && tableIsFocused; - return ( - - ); - }, - width: 28, - resizable: false, - }); - return columns; - } - - constructor(props: SchemaTableProps) { - super(props); - if (this.props.Document._schemaHeaders === undefined) { - this.props.Document._schemaHeaders = new List([ - new SchemaHeaderField('title', '#f1efeb'), - new SchemaHeaderField('author', '#f1efeb'), - new SchemaHeaderField('*lastModified', '#f1efeb', ColumnType.Date), - new SchemaHeaderField('text', '#f1efeb', ColumnType.String), - new SchemaHeaderField('type', '#f1efeb'), - new SchemaHeaderField('context', '#f1efeb', ColumnType.Doc), - ]); - } - } - - componentDidMount() { - document.addEventListener('keydown', this.onKeyDown); - } - - componentWillUnmount() { - document.removeEventListener('keydown', this.onKeyDown); - } - - tableAddDoc = (doc: Doc, relativeTo?: Doc, before?: boolean) => { - const tableDoc = this.props.Document[DataSym]; - const effectiveAcl = GetEffectiveAcl(tableDoc); - - if (effectiveAcl !== AclPrivate && effectiveAcl !== AclReadonly) { - doc.context = this.props.Document; - tableDoc[this.props.fieldKey + '-lastModified'] = new DateField(new Date(Date.now())); - return Doc.AddDocToList(this.props.Document, this.props.fieldKey, doc, relativeTo, before); - } - return false; - }; - - private getTrProps: ComponentPropsGetterR = (state, rowInfo) => { - return !rowInfo - ? {} - : { - ScreenToLocalTransform: this.props.ScreenToLocalTransform, - addDoc: this.tableAddDoc, - removeDoc: this.props.deleteDocument, - rowInfo, - rowFocused: !this.props.headerIsEditing && rowInfo.index === this._focusedCell.row && this.props.isFocused(this.props.Document, true), - textWrapRow: this.toggleTextWrapRow, - rowWrapped: this.textWrappedRows.findIndex(id => rowInfo.original[Id] === id) > -1, - dropAction: StrCast(this.props.Document.childDropAction), - addDocTab: this.props.addDocTab, - }; - }; - - private getTdProps: ComponentPropsGetterR = (state, rowInfo, column, instance) => { - if (!rowInfo || column) return {}; - - const row = rowInfo.index; - //@ts-ignore - const col = this.columns.map(c => c.heading).indexOf(column!.id); - const isFocused = this._focusedCell.row === row && this._focusedCell.col === col && this.props.isFocused(this.props.Document, true); - // TODO: editing border doesn't work :( - return { - style: { border: !this.props.headerIsEditing && isFocused ? '2px solid rgb(255, 160, 160)' : '1px solid #f1efeb' }, - }; - }; - - @action setCellIsEditing = (isEditing: boolean) => (this._cellIsEditing = isEditing); - - @action - onKeyDown = (e: KeyboardEvent): void => { - if (!this._cellIsEditing && !this.props.headerIsEditing && this.props.isFocused(this.props.Document, true)) { - // && this.props.isSelected(true)) { - const direction = e.key === 'Tab' ? 'tab' : e.which === 39 ? 'right' : e.which === 37 ? 'left' : e.which === 38 ? 'up' : e.which === 40 ? 'down' : ''; - this._focusedCell = this.changeFocusedCellByDirection(direction, this._focusedCell.row, this._focusedCell.col); - - if (direction) { - const pdoc = FieldValue(this.childDocs[this._focusedCell.row]); - pdoc && this.props.setPreviewDoc(pdoc); - e.stopPropagation(); - } - } else if (e.keyCode === 27) { - this.props.setPreviewDoc(undefined); - e.stopPropagation(); // stopPropagation for left/right arrows - } - }; - - changeFocusedCellByDirection = (direction: string, curRow: number, curCol: number) => { - switch (direction) { - case 'tab': - return { row: curRow + 1 === this.childDocs.length ? 0 : curRow + 1, col: curCol + 1 === this.props.columns.length ? 0 : curCol + 1 }; - case 'right': - return { row: curRow, col: curCol + 1 === this.props.columns.length ? curCol : curCol + 1 }; - case 'left': - return { row: curRow, col: curCol === 0 ? curCol : curCol - 1 }; - case 'up': - return { row: curRow === 0 ? curRow : curRow - 1, col: curCol }; - case 'down': - return { row: curRow + 1 === this.childDocs.length ? curRow : curRow + 1, col: curCol }; - } - return this._focusedCell; - }; - - @action - changeFocusedCellByIndex = (row: number, col: number): void => { - if (this._focusedCell.row !== row || this._focusedCell.col !== col) { - this._focusedCell = { row: row, col: col }; - } - this.props.setFocused(this.props.Document); - }; - - @undoBatch - createRow = action(() => { - this.props.addDocument?.(Docs.Create.TextDocument('', { title: '', _width: 100, _height: 30 })); - this._focusedCell = { row: this.childDocs.length, col: this._focusedCell.col }; - }); - - @undoBatch - @action - createColumn = () => { - const newFieldName = (index: number) => `New field${index ? ` (${index})` : ''}`; - for (let index = 0; index < 100; index++) { - if (this.props.columns.findIndex(col => col.heading === newFieldName(index)) === -1) { - this.props.columns.push(new SchemaHeaderField(newFieldName(index), '#f1efeb')); - break; - } - } - }; - - @action - getColumnType = (column: SchemaHeaderField, doc?: Doc, field?: string): ColumnType => { - if (doc && field && column.type === ColumnType.Any) { - const val = doc[CollectionSchemaCell.resolvedFieldKey(field, doc)]; - if (val instanceof ImageField) return ColumnType.Image; - if (val instanceof Doc) return ColumnType.Doc; - if (val instanceof DateField) return ColumnType.Date; - if (val instanceof List) return ColumnType.List; - } - if (column.type && column.type !== 0) { - return column.type; - } - if (columnTypes.get(column.heading)) { - return (column.type = columnTypes.get(column.heading)!); - } - return (column.type = ColumnType.Any); - }; - - @undoBatch - @action - toggleTextwrap = async () => { - const textwrappedRows = Cast(this.props.Document.textwrappedSchemaRows, listSpec('string'), []); - if (textwrappedRows.length) { - this.props.Document.textwrappedSchemaRows = new List([]); - } else { - const docs = DocListCast(this.props.Document[this.props.fieldKey]); - const allRows = docs instanceof Doc ? [docs[Id]] : docs.map(doc => doc[Id]); - this.props.Document.textwrappedSchemaRows = new List(allRows); - } - }; - - @action - toggleTextWrapRow = (doc: Doc): void => { - const textWrapped = this.textWrappedRows; - const index = textWrapped.findIndex(id => doc[Id] === id); - - index > -1 ? textWrapped.splice(index, 1) : textWrapped.push(doc[Id]); - - this.textWrappedRows = textWrapped; - }; - - @computed - get reactTable() { - const children = this.childDocs; - const hasCollectionChild = children.reduce((found, doc) => found || doc.type === DocumentType.COL, false); - const expanded: { [name: string]: any } = {}; - Array.from(this._openCollections.keys()).map(col => (expanded[col.toString()] = true)); - const rerender = [...this.textWrappedRows]; // TODO: get component to rerender on text wrap change without needign to console.log :(((( - - return ( - - row.original.type !== DocumentType.COL ? null : ( -
- -
- ) - } - /> - ); - } - - onContextMenu = (e: React.MouseEvent): void => { - ContextMenu.Instance.addItem({ description: 'Toggle text wrapping', event: this.toggleTextwrap, icon: 'table' }); - }; - - getField = (row: number, col?: number) => { - const docs = this.childDocs; - - row = row % docs.length; - while (row < 0) row += docs.length; - const columns = this.props.columns; - const doc = docs[row]; - if (col === undefined) { - return doc; - } - if (col >= 0 && col < columns.length) { - const column = this.props.columns[col].heading; - return doc[column]; - } - return undefined; - }; - - createTransformer = (row: number, col: number): Transformer => { - const self = this; - const captures: { [name: string]: Field } = {}; - - const transformer: ts.TransformerFactory = context => { - return root => { - function visit(node: ts.Node) { - node = ts.visitEachChild(node, visit, context); - if (ts.isIdentifier(node)) { - const isntPropAccess = !ts.isPropertyAccessExpression(node.parent) || node.parent.expression === node; - const isntPropAssign = !ts.isPropertyAssignment(node.parent) || node.parent.name !== node; - if (isntPropAccess && isntPropAssign) { - if (node.text === '$r') { - return ts.createNumericLiteral(row.toString()); - } else if (node.text === '$c') { - return ts.createNumericLiteral(col.toString()); - } else if (node.text === '$') { - if (ts.isCallExpression(node.parent)) { - // captures.doc = self.props.Document; - // captures.key = self.props.fieldKey; - } - } - } - } - - return node; - } - return ts.visitNode(root, visit); - }; - }; - - // const getVars = () => { - // return { capturedVariables: captures }; - // }; - - return { transformer /*getVars*/ }; - }; - - setComputed = (script: string, doc: Doc, field: string, row: number, col: number): boolean => { - script = `const $ = (row:number, col?:number) => { - const rval = (doc as any)[key][row + ${row}]; - return col === undefined ? rval : rval[(doc as any)._schemaHeaders[col + ${col}].heading]; - } - return ${script}`; - const compiled = CompileScript(script, { params: { this: Doc.name }, capturedVariables: { doc: this.props.Document, key: this.props.fieldKey }, typecheck: false, transformer: this.createTransformer(row, col) }); - if (compiled.compiled) { - doc[field] = new ComputedField(compiled); - return true; - } - return false; - }; - - @action - showDoc = (doc: Doc | undefined, dataDoc?: Doc, screenX?: number, screenY?: number) => { - this._showDoc = doc; - if (dataDoc && screenX && screenY) { - this._showDocPos = this.props.ScreenToLocalTransform().transformPoint(screenX, screenY); - } - }; - - onOpenClick = () => { - this._showDoc && this.props.addDocTab(this._showDoc, OpenWhere.addRight); - }; - - getPreviewTransform = (): Transform => { - return this.props.ScreenToLocalTransform().translate(-this.borderWidth - 4 - this.tableWidth, -this.borderWidth); - }; - - render() { - const preview = ''; - return ( -
this.props.active(true) && e.stopPropagation()} - onDrop={e => this.props.onDrop(e, {})} - onContextMenu={this.onContextMenu}> - {this.reactTable} - {this.props.Document._chromeHidden || this.props.addDocument === returnFalse ? undefined : ( -
- + new -
- )} - {!this._showDoc ? null : ( -
- 150} - PanelHeight={() => 150} - ScreenToLocalTransform={this.getPreviewTransform} - docFilters={returnEmptyFilter} - docRangeFilters={returnEmptyFilter} - searchFilterDocs={returnEmptyDoclist} - ContainingCollectionDoc={this.props.CollectionView?.props.Document} - ContainingCollectionView={this.props.CollectionView} - moveDocument={this.props.moveDocument} - whenChildContentsActiveChanged={emptyFunction} - addDocTab={this.props.addDocTab} - pinToPres={this.props.pinToPres} - bringToFront={returnFalse}> -
- )} -
- ); - } -} +// import { IconProp } from '@fortawesome/fontawesome-svg-core'; +// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +// import { action, computed, observable } from 'mobx'; +// import { observer } from 'mobx-react'; +// import * as React from 'react'; +// import ReactTable, { CellInfo, Column, ComponentPropsGetterR, Resize, SortingRule } from 'react-table'; +// import { DateField } from '../../../../fields/DateField'; +// import { AclPrivate, AclReadonly, DataSym, Doc, DocListCast, Field, Opt } from '../../../../fields/Doc'; +// import { Id } from '../../../../fields/FieldSymbols'; +// import { List } from '../../../../fields/List'; +// import { listSpec } from '../../../../fields/Schema'; +// import { SchemaHeaderField } from '../../../../fields/SchemaHeaderField'; +// import { ComputedField } from '../../../../fields/ScriptField'; +// import { Cast, FieldValue, NumCast, StrCast } from '../../../../fields/Types'; +// import { ImageField } from '../../../../fields/URLField'; +// import { GetEffectiveAcl } from '../../../../fields/util'; +// import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../../../Utils'; +// import { Docs, DocumentOptions, DocUtils } from '../../../documents/Documents'; +// import { DocumentType } from '../../../documents/DocumentTypes'; +// import { CompileScript, Transformer, ts } from '../../../util/Scripting'; +// import { Transform } from '../../../util/Transform'; +// import { undoBatch } from '../../../util/UndoManager'; +// import '../../../views/DocumentDecorations.scss'; +// import { ContextMenu } from '../../ContextMenu'; +// import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../global/globalCssVariables.scss'; +// import { DocumentView, OpenWhere } from '../../nodes/DocumentView'; +// import { PinProps } from '../../nodes/trails'; +// import { DefaultStyleProvider } from '../../StyleProvider'; +// import { CollectionView } from '../CollectionView'; +// import { +// CellProps, +// CollectionSchemaButtons, +// CollectionSchemaCell, +// CollectionSchemaCheckboxCell, +// CollectionSchemaDateCell, +// CollectionSchemaDocCell, +// CollectionSchemaImageCell, +// CollectionSchemaListCell, +// CollectionSchemaNumberCell, +// CollectionSchemaStringCell, +// } from './CollectionSchemaCells'; +// import { CollectionSchemaAddColumnHeader, KeysDropdown } from './CollectionSchemaHeaders'; +// import { MovableColumn } from './OldCollectionSchemaMovableColumn'; +// import { MovableRow } from './CollectionSchemaMovableRow'; +// import './CollectionSchemaView.scss'; + +// enum ColumnType { +// Any, +// Number, +// String, +// Boolean, +// Doc, +// Image, +// List, +// Date, +// } + +// // this map should be used for keys that should have a const type of value +// const columnTypes: Map = new Map([ +// ['title', ColumnType.String], +// ['x', ColumnType.Number], +// ['y', ColumnType.Number], +// ['_width', ColumnType.Number], +// ['_height', ColumnType.Number], +// ['_nativeWidth', ColumnType.Number], +// ['_nativeHeight', ColumnType.Number], +// ['isPrototype', ColumnType.Boolean], +// ['_curPage', ColumnType.Number], +// ['_currentTimecode', ColumnType.Number], +// ['zIndex', ColumnType.Number], +// ]); + +// export interface SchemaTableProps { +// Document: Doc; // child doc +// dataDoc?: Doc; +// PanelHeight: () => number; +// PanelWidth: () => number; +// childDocs?: Doc[]; +// CollectionView: Opt; +// ContainingCollectionView: Opt; +// ContainingCollectionDoc: Opt; +// fieldKey: string; +// renderDepth: number; +// deleteDocument?: (document: Doc | Doc[]) => boolean; +// addDocument?: (document: Doc | Doc[]) => boolean; +// moveDocument?: (document: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => boolean; +// ScreenToLocalTransform: () => Transform; +// active: (outsideReaction: boolean | undefined) => boolean | undefined; +// onDrop: (e: React.DragEvent, options: DocumentOptions, completed?: (() => void) | undefined) => void; +// addDocTab: (document: Doc, where: OpenWhere) => boolean; +// pinToPres: (document: Doc, pinProps: PinProps) => void; +// isSelected: (outsideReaction?: boolean) => boolean; +// isFocused: (document: Doc, outsideReaction: boolean) => boolean; +// setFocused: (document: Doc) => void; +// setPreviewDoc: (document: Opt) => void; +// columns: SchemaHeaderField[]; +// documentKeys: any[]; +// headerIsEditing: boolean; +// openHeader: (column: any, screenx: number, screeny: number) => void; +// onClick: (e: React.MouseEvent) => void; +// onPointerDown: (e: React.PointerEvent) => void; +// onResizedChange: (newResized: Resize[], event: any) => void; +// setColumns: (columns: SchemaHeaderField[]) => void; +// reorderColumns: (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columnsValues: SchemaHeaderField[]) => void; +// changeColumns: (oldKey: string, newKey: string, addNew: boolean) => void; +// setHeaderIsEditing: (isEditing: boolean) => void; +// changeColumnSort: (columnField: SchemaHeaderField, descending: boolean | undefined) => void; +// } + +// @observer +// export class SchemaTable extends React.Component { +// @observable _cellIsEditing: boolean = false; +// @observable _focusedCell: { row: number; col: number } = { row: 0, col: 0 }; +// @observable _openCollections: Set = new Set(); + +// @observable _showDoc: Doc | undefined; +// @observable _showDataDoc: any = ''; +// @observable _showDocPos: number[] = []; + +// @observable _showTitleDropdown: boolean = false; + +// @computed get previewWidth() { +// return () => NumCast(this.props.Document.schemaPreviewWidth); +// } +// @computed get previewHeight() { +// return () => this.props.PanelHeight() - 2 * this.borderWidth; +// } +// @computed get tableWidth() { +// return this.props.PanelWidth() - 2 * this.borderWidth - Number(SCHEMA_DIVIDER_WIDTH) - this.previewWidth(); +// } + +// @computed get childDocs() { +// if (this.props.childDocs) return this.props.childDocs; + +// const doc = this.props.dataDoc ? this.props.dataDoc : this.props.Document; +// return DocListCast(doc[this.props.fieldKey]); +// } +// set childDocs(docs: Doc[]) { +// const doc = this.props.dataDoc ? this.props.dataDoc : this.props.Document; +// doc[this.props.fieldKey] = new List(docs); +// } + +// @computed get textWrappedRows() { +// return Cast(this.props.Document.textwrappedSchemaRows, listSpec('string'), []); +// } +// set textWrappedRows(textWrappedRows: string[]) { +// this.props.Document.textwrappedSchemaRows = new List(textWrappedRows); +// } + +// @computed get resized(): { id: string; value: number }[] { +// return this.props.columns.reduce((resized, shf) => { +// shf.width > -1 && resized.push({ id: shf.heading, value: shf.width }); +// return resized; +// }, [] as { id: string; value: number }[]); +// } +// @computed get sorted(): SortingRule[] { +// return this.props.columns.reduce((sorted, shf) => { +// shf.desc !== undefined && sorted.push({ id: shf.heading, desc: shf.desc }); +// return sorted; +// }, [] as SortingRule[]); +// } + +// @action +// changeSorting = (col: any) => { +// this.props.changeColumnSort(col, col.desc === true ? false : col.desc === false ? undefined : true); +// }; + +// @action +// changeTitleMode = () => (this._showTitleDropdown = !this._showTitleDropdown); + +// @computed get borderWidth() { +// return Number(COLLECTION_BORDER_WIDTH); +// } +// @computed get tableColumns(): Column[] { +// const possibleKeys = this.props.documentKeys.filter(key => this.props.columns.findIndex(existingKey => existingKey.heading.toUpperCase() === key.toUpperCase()) === -1); +// const columns: Column[] = []; +// const tableIsFocused = this.props.isFocused(this.props.Document, false); +// const focusedRow = this._focusedCell.row; +// const focusedCol = this._focusedCell.col; +// const isEditable = !this.props.headerIsEditing; + +// columns.push({ +// expander: true, +// Header: '', +// width: 58, +// Expander: rowInfo => { +// return rowInfo.original.type !== DocumentType.COL ? null : ( +//
this._openCollections[rowInfo.isExpanded ? 'delete' : 'add'](rowInfo.viewIndex))}> +// +//
+// ); +// }, +// }); +// columns.push( +// ...this.props.columns.map(col => { +// const icon: IconProp = +// this.getColumnType(col) === ColumnType.Number +// ? 'hashtag' +// : this.getColumnType(col) === ColumnType.String +// ? 'font' +// : this.getColumnType(col) === ColumnType.Boolean +// ? 'check-square' +// : this.getColumnType(col) === ColumnType.Doc +// ? 'file' +// : this.getColumnType(col) === ColumnType.Image +// ? 'image' +// : this.getColumnType(col) === ColumnType.List +// ? 'list-ul' +// : this.getColumnType(col) === ColumnType.Date +// ? 'calendar' +// : 'align-justify'; + +// const keysDropdown = ( +// c.heading)} +// canAddNew={true} +// addNew={false} +// onSelect={this.props.changeColumns} +// setIsEditing={this.props.setHeaderIsEditing} +// docs={this.props.childDocs} +// Document={this.props.Document} +// dataDoc={this.props.dataDoc} +// fieldKey={this.props.fieldKey} +// ContainingCollectionDoc={this.props.ContainingCollectionDoc} +// ContainingCollectionView={this.props.ContainingCollectionView} +// active={this.props.active} +// openHeader={this.props.openHeader} +// icon={icon} +// col={col} +// // try commenting this out +// width={'100%'} +// /> +// ); + +// const sortIcon = col.desc === undefined ? 'caret-right' : col.desc === true ? 'caret-down' : 'caret-up'; +// const header = ( +//
+// {keysDropdown} +//
this.changeSorting(col)} style={{ width: 21, padding: 1, display: 'inline', zIndex: 1, background: 'inherit', cursor: 'pointer' }}> +// +//
+// {/* {this.props.Document._chromeHidden || this.props.addDocument == returnFalse ? undefined :
+ new
} */} +//
+// ); + +// return { +// Header: , +// accessor: (doc: Doc) => (doc ? Field.toString(doc[col.heading] as Field) : 0), +// id: col.heading, +// Cell: (rowProps: CellInfo) => { +// const rowIndex = rowProps.index; +// const columnIndex = this.props.columns.map(c => c.heading).indexOf(rowProps.column.id!); +// const isFocused = focusedRow === rowIndex && focusedCol === columnIndex && tableIsFocused; + +// const props: CellProps = { +// row: rowIndex, +// col: columnIndex, +// rowProps: rowProps, +// isFocused: isFocused, +// changeFocusedCellByIndex: this.changeFocusedCellByIndex, +// CollectionView: this.props.CollectionView, +// ContainingCollection: this.props.ContainingCollectionView, +// Document: this.props.Document, +// fieldKey: this.props.fieldKey, +// renderDepth: this.props.renderDepth, +// addDocTab: this.props.addDocTab, +// pinToPres: this.props.pinToPres, +// moveDocument: this.props.moveDocument, +// setIsEditing: this.setCellIsEditing, +// isEditable: isEditable, +// setPreviewDoc: this.props.setPreviewDoc, +// setComputed: this.setComputed, +// getField: this.getField, +// showDoc: this.showDoc, +// }; + +// switch (this.getColumnType(col, rowProps.original, rowProps.column.id)) { +// case ColumnType.Number: +// return ; +// case ColumnType.String: +// return ; +// case ColumnType.Boolean: +// return ; +// case ColumnType.Doc: +// return ; +// case ColumnType.Image: +// return ; +// case ColumnType.List: +// return ; +// case ColumnType.Date: +// return ; +// default: +// return ; +// } +// }, +// minWidth: 200, +// }; +// }) +// ); +// columns.push({ +// Header: , +// accessor: (doc: Doc) => 0, +// id: 'add', +// Cell: (rowProps: CellInfo) => { +// const rowIndex = rowProps.index; +// const columnIndex = this.props.columns.map(c => c.heading).indexOf(rowProps.column.id!); +// const isFocused = focusedRow === rowIndex && focusedCol === columnIndex && tableIsFocused; +// return ( +// +// ); +// }, +// width: 28, +// resizable: false, +// }); +// return columns; +// } + +// constructor(props: SchemaTableProps) { +// super(props); +// if (this.props.Document._schemaHeaders === undefined) { +// this.props.Document._schemaHeaders = new List([ +// new SchemaHeaderField('title', '#f1efeb'), +// new SchemaHeaderField('author', '#f1efeb'), +// new SchemaHeaderField('*lastModified', '#f1efeb', ColumnType.Date), +// new SchemaHeaderField('text', '#f1efeb', ColumnType.String), +// new SchemaHeaderField('type', '#f1efeb'), +// new SchemaHeaderField('context', '#f1efeb', ColumnType.Doc), +// ]); +// } +// } + +// componentDidMount() { +// document.addEventListener('keydown', this.onKeyDown); +// } + +// componentWillUnmount() { +// document.removeEventListener('keydown', this.onKeyDown); +// } + +// tableAddDoc = (doc: Doc, relativeTo?: Doc, before?: boolean) => { +// const tableDoc = this.props.Document[DataSym]; +// const effectiveAcl = GetEffectiveAcl(tableDoc); + +// if (effectiveAcl !== AclPrivate && effectiveAcl !== AclReadonly) { +// doc.context = this.props.Document; +// tableDoc[this.props.fieldKey + '-lastModified'] = new DateField(new Date(Date.now())); +// return Doc.AddDocToList(this.props.Document, this.props.fieldKey, doc, relativeTo, before); +// } +// return false; +// }; + +// private getTrProps: ComponentPropsGetterR = (state, rowInfo) => { +// return !rowInfo +// ? {} +// : { +// ScreenToLocalTransform: this.props.ScreenToLocalTransform, +// addDoc: this.tableAddDoc, +// removeDoc: this.props.deleteDocument, +// rowInfo, +// rowFocused: !this.props.headerIsEditing && rowInfo.index === this._focusedCell.row && this.props.isFocused(this.props.Document, true), +// textWrapRow: this.toggleTextWrapRow, +// rowWrapped: this.textWrappedRows.findIndex(id => rowInfo.original[Id] === id) > -1, +// dropAction: StrCast(this.props.Document.childDropAction), +// addDocTab: this.props.addDocTab, +// }; +// }; + +// private getTdProps: ComponentPropsGetterR = (state, rowInfo, column, instance) => { +// if (!rowInfo || column) return {}; + +// const row = rowInfo.index; +// //@ts-ignore +// const col = this.columns.map(c => c.heading).indexOf(column!.id); +// const isFocused = this._focusedCell.row === row && this._focusedCell.col === col && this.props.isFocused(this.props.Document, true); +// // TODO: editing border doesn't work :( +// return { +// style: { border: !this.props.headerIsEditing && isFocused ? '2px solid rgb(255, 160, 160)' : '1px solid #f1efeb' }, +// }; +// }; + +// @action setCellIsEditing = (isEditing: boolean) => (this._cellIsEditing = isEditing); + +// @action +// onKeyDown = (e: KeyboardEvent): void => { +// if (!this._cellIsEditing && !this.props.headerIsEditing && this.props.isFocused(this.props.Document, true)) { +// // && this.props.isSelected(true)) { +// const direction = e.key === 'Tab' ? 'tab' : e.which === 39 ? 'right' : e.which === 37 ? 'left' : e.which === 38 ? 'up' : e.which === 40 ? 'down' : ''; +// this._focusedCell = this.changeFocusedCellByDirection(direction, this._focusedCell.row, this._focusedCell.col); + +// if (direction) { +// const pdoc = FieldValue(this.childDocs[this._focusedCell.row]); +// pdoc && this.props.setPreviewDoc(pdoc); +// e.stopPropagation(); +// } +// } else if (e.keyCode === 27) { +// this.props.setPreviewDoc(undefined); +// e.stopPropagation(); // stopPropagation for left/right arrows +// } +// }; + +// changeFocusedCellByDirection = (direction: string, curRow: number, curCol: number) => { +// switch (direction) { +// case 'tab': +// return { row: curRow + 1 === this.childDocs.length ? 0 : curRow + 1, col: curCol + 1 === this.props.columns.length ? 0 : curCol + 1 }; +// case 'right': +// return { row: curRow, col: curCol + 1 === this.props.columns.length ? curCol : curCol + 1 }; +// case 'left': +// return { row: curRow, col: curCol === 0 ? curCol : curCol - 1 }; +// case 'up': +// return { row: curRow === 0 ? curRow : curRow - 1, col: curCol }; +// case 'down': +// return { row: curRow + 1 === this.childDocs.length ? curRow : curRow + 1, col: curCol }; +// } +// return this._focusedCell; +// }; + +// @action +// changeFocusedCellByIndex = (row: number, col: number): void => { +// if (this._focusedCell.row !== row || this._focusedCell.col !== col) { +// this._focusedCell = { row: row, col: col }; +// } +// this.props.setFocused(this.props.Document); +// }; + +// @undoBatch +// createRow = action(() => { +// this.props.addDocument?.(Docs.Create.TextDocument('', { title: '', _width: 100, _height: 30 })); +// this._focusedCell = { row: this.childDocs.length, col: this._focusedCell.col }; +// }); + +// @undoBatch +// @action +// createColumn = () => { +// const newFieldName = (index: number) => `New field${index ? ` (${index})` : ''}`; +// for (let index = 0; index < 100; index++) { +// if (this.props.columns.findIndex(col => col.heading === newFieldName(index)) === -1) { +// this.props.columns.push(new SchemaHeaderField(newFieldName(index), '#f1efeb')); +// break; +// } +// } +// }; + +// @action +// getColumnType = (column: SchemaHeaderField, doc?: Doc, field?: string): ColumnType => { +// if (doc && field && column.type === ColumnType.Any) { +// const val = doc[CollectionSchemaCell.resolvedFieldKey(field, doc)]; +// if (val instanceof ImageField) return ColumnType.Image; +// if (val instanceof Doc) return ColumnType.Doc; +// if (val instanceof DateField) return ColumnType.Date; +// if (val instanceof List) return ColumnType.List; +// } +// if (column.type && column.type !== 0) { +// return column.type; +// } +// if (columnTypes.get(column.heading)) { +// return (column.type = columnTypes.get(column.heading)!); +// } +// return (column.type = ColumnType.Any); +// }; + +// @undoBatch +// @action +// toggleTextwrap = async () => { +// const textwrappedRows = Cast(this.props.Document.textwrappedSchemaRows, listSpec('string'), []); +// if (textwrappedRows.length) { +// this.props.Document.textwrappedSchemaRows = new List([]); +// } else { +// const docs = DocListCast(this.props.Document[this.props.fieldKey]); +// const allRows = docs instanceof Doc ? [docs[Id]] : docs.map(doc => doc[Id]); +// this.props.Document.textwrappedSchemaRows = new List(allRows); +// } +// }; + +// @action +// toggleTextWrapRow = (doc: Doc): void => { +// const textWrapped = this.textWrappedRows; +// const index = textWrapped.findIndex(id => doc[Id] === id); + +// index > -1 ? textWrapped.splice(index, 1) : textWrapped.push(doc[Id]); + +// this.textWrappedRows = textWrapped; +// }; + +// @computed +// get reactTable() { +// const children = this.childDocs; +// const hasCollectionChild = children.reduce((found, doc) => found || doc.type === DocumentType.COL, false); +// const expanded: { [name: string]: any } = {}; +// Array.from(this._openCollections.keys()).map(col => (expanded[col.toString()] = true)); +// const rerender = [...this.textWrappedRows]; // TODO: get component to rerender on text wrap change without needign to console.log :(((( + +// return ( +// +// row.original.type !== DocumentType.COL ? null : ( +//
+// +//
+// ) +// } +// /> +// ); +// } + +// onContextMenu = (e: React.MouseEvent): void => { +// ContextMenu.Instance.addItem({ description: 'Toggle text wrapping', event: this.toggleTextwrap, icon: 'table' }); +// }; + +// getField = (row: number, col?: number) => { +// const docs = this.childDocs; + +// row = row % docs.length; +// while (row < 0) row += docs.length; +// const columns = this.props.columns; +// const doc = docs[row]; +// if (col === undefined) { +// return doc; +// } +// if (col >= 0 && col < columns.length) { +// const column = this.props.columns[col].heading; +// return doc[column]; +// } +// return undefined; +// }; + +// createTransformer = (row: number, col: number): Transformer => { +// const self = this; +// const captures: { [name: string]: Field } = {}; + +// const transformer: ts.TransformerFactory = context => { +// return root => { +// function visit(node: ts.Node) { +// node = ts.visitEachChild(node, visit, context); +// if (ts.isIdentifier(node)) { +// const isntPropAccess = !ts.isPropertyAccessExpression(node.parent) || node.parent.expression === node; +// const isntPropAssign = !ts.isPropertyAssignment(node.parent) || node.parent.name !== node; +// if (isntPropAccess && isntPropAssign) { +// if (node.text === '$r') { +// return ts.createNumericLiteral(row.toString()); +// } else if (node.text === '$c') { +// return ts.createNumericLiteral(col.toString()); +// } else if (node.text === '$') { +// if (ts.isCallExpression(node.parent)) { +// // captures.doc = self.props.Document; +// // captures.key = self.props.fieldKey; +// } +// } +// } +// } + +// return node; +// } +// return ts.visitNode(root, visit); +// }; +// }; + +// // const getVars = () => { +// // return { capturedVariables: captures }; +// // }; + +// return { transformer /*getVars*/ }; +// }; + +// setComputed = (script: string, doc: Doc, field: string, row: number, col: number): boolean => { +// script = `const $ = (row:number, col?:number) => { +// const rval = (doc as any)[key][row + ${row}]; +// return col === undefined ? rval : rval[(doc as any)._schemaHeaders[col + ${col}].heading]; +// } +// return ${script}`; +// const compiled = CompileScript(script, { params: { this: Doc.name }, capturedVariables: { doc: this.props.Document, key: this.props.fieldKey }, typecheck: false, transformer: this.createTransformer(row, col) }); +// if (compiled.compiled) { +// doc[field] = new ComputedField(compiled); +// return true; +// } +// return false; +// }; + +// @action +// showDoc = (doc: Doc | undefined, dataDoc?: Doc, screenX?: number, screenY?: number) => { +// this._showDoc = doc; +// if (dataDoc && screenX && screenY) { +// this._showDocPos = this.props.ScreenToLocalTransform().transformPoint(screenX, screenY); +// } +// }; + +// onOpenClick = () => { +// this._showDoc && this.props.addDocTab(this._showDoc, OpenWhere.addRight); +// }; + +// getPreviewTransform = (): Transform => { +// return this.props.ScreenToLocalTransform().translate(-this.borderWidth - 4 - this.tableWidth, -this.borderWidth); +// }; + +// render() { +// const preview = ''; +// return ( +//
this.props.active(true) && e.stopPropagation()} +// onDrop={e => this.props.onDrop(e, {})} +// onContextMenu={this.onContextMenu}> +// {this.reactTable} +// {this.props.Document._chromeHidden || this.props.addDocument === returnFalse ? undefined : ( +//
+// + new +//
+// )} +// {!this._showDoc ? null : ( +//
+// 150} +// PanelHeight={() => 150} +// ScreenToLocalTransform={this.getPreviewTransform} +// docFilters={returnEmptyFilter} +// docRangeFilters={returnEmptyFilter} +// searchFilterDocs={returnEmptyDoclist} +// ContainingCollectionDoc={this.props.CollectionView?.props.Document} +// ContainingCollectionView={this.props.CollectionView} +// moveDocument={this.props.moveDocument} +// whenChildContentsActiveChanged={emptyFunction} +// addDocTab={this.props.addDocTab} +// pinToPres={this.props.pinToPres} +// bringToFront={returnFalse}> +//
+// )} +//
+// ); +// } +// } 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 From 6c58ca9d473103624be82c6f2da90f22bafd7b98 Mon Sep 17 00:00:00 2001 From: mehekj Date: Sat, 28 Jan 2023 23:27:17 -0500 Subject: version without schemarow as documentview --- src/client/documents/DocumentTypes.ts | 1 - src/client/documents/Documents.ts | 11 --- .../collectionSchema/CollectionSchemaView.scss | 6 -- .../collectionSchema/CollectionSchemaView.tsx | 94 ++++++---------------- .../collectionSchema/SchemaColumnHeader.tsx | 2 +- .../collections/collectionSchema/SchemaRowBox.tsx | 88 +++++++------------- src/client/views/nodes/DocumentContentsView.tsx | 2 - 7 files changed, 53 insertions(+), 151 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts index b910b26b0..d99cd2dac 100644 --- a/src/client/documents/DocumentTypes.ts +++ b/src/client/documents/DocumentTypes.ts @@ -40,7 +40,6 @@ export enum DocumentType { SEARCHITEM = 'searchitem', COMPARISON = 'comparison', GROUP = 'group', - SCHEMAROW = 'schemarow', LINKDB = 'linkdb', // database of links ??? why do we have this SCRIPTDB = 'scriptdb', // database of scripts diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index f6104d655..7de1221cc 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -26,7 +26,6 @@ import { ScriptingGlobals } from '../util/ScriptingGlobals'; import { undoBatch, UndoManager } from '../util/UndoManager'; import { CollectionDockingView } from '../views/collections/CollectionDockingView'; import { DimUnit } from '../views/collections/collectionMulticolumn/CollectionMulticolumnView'; -import { SchemaRowBox } from '../views/collections/collectionSchema/SchemaRowBox'; import { CollectionView } from '../views/collections/CollectionView'; import { ContextMenu } from '../views/ContextMenu'; import { ContextMenuProps } from '../views/ContextMenuItem'; @@ -650,12 +649,6 @@ export namespace Docs { options: { _fitWidth: true, nativeDimModifiable: true, links: '@links(self)' }, }, ], - [ - DocumentType.SCHEMAROW, - { - layout: { view: SchemaRowBox, dataField: defaultDataKey }, - }, - ], [ DocumentType.LOADING, { @@ -1148,10 +1141,6 @@ export namespace Docs { return InstanceFromProto(Prototypes.get(DocumentType.DATAVIZ), new CsvField(url), { title: 'Data Viz', ...options }); } - export function SchemaRowDocument(options?: DocumentOptions) { - return InstanceFromProto(Prototypes.get(DocumentType.SCHEMAROW), undefined, { ...(options || {}) }); - } - export function DockDocument(documents: Array, config: string, options: DocumentOptions, id?: string) { return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { freezeChildren: 'remove|add', ...options, viewType: CollectionViewType.Docking, _viewType: CollectionViewType.Docking, dockingConfig: config }, id); } diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index e0d0101a2..4fa5d80e2 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -126,16 +126,10 @@ } } -.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 c9f934aec..29b22c0d5 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -1,29 +1,28 @@ import React = require('react'); -import { action, computed, observable, ObservableMap, ObservableSet, trace, untracked } from 'mobx'; +import { action, computed, observable, ObservableMap, ObservableSet, untracked } from 'mobx'; import { observer } from 'mobx-react'; -import { DataSym, Doc, DocListCast, Opt, StrListCast } from '../../../../fields/Doc'; +import { Doc, DocListCast, Opt } from '../../../../fields/Doc'; import { Id } from '../../../../fields/FieldSymbols'; import { List } from '../../../../fields/List'; import { RichTextField } from '../../../../fields/RichTextField'; import { listSpec } from '../../../../fields/Schema'; import { BoolCast, Cast, StrCast } from '../../../../fields/Types'; import { ImageField } from '../../../../fields/URLField'; -import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents, smoothScroll, Utils } from '../../../../Utils'; +import { emptyFunction, returnEmptyString, setupMoveUpEvents, Utils } from '../../../../Utils'; import { Docs, DocUtils } from '../../../documents/Documents'; import { DragManager } from '../../../util/DragManager'; import { SelectionManager } from '../../../util/SelectionManager'; +import { Transform } from '../../../util/Transform'; import { undoBatch } from '../../../util/UndoManager'; import { ContextMenu } from '../../ContextMenu'; import { ContextMenuProps } from '../../ContextMenuItem'; import { EditableView } from '../../EditableView'; +import { DocumentView } from '../../nodes/DocumentView'; import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; 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, @@ -33,7 +32,7 @@ export enum ColumnType { Image, } -const defaultColumnKeys: string[] = ['title', 'type', 'author', 'text', 'data', 'tags']; +const defaultColumnKeys: string[] = ['title', 'type', 'author', 'text', 'data', 'creationDate']; @observer export class CollectionSchemaView extends CollectionSubView() { @@ -399,25 +398,6 @@ 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; @@ -465,52 +445,24 @@ export class CollectionSchemaView extends CollectionSubView() { 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} - /> -
+ ); - - // })}
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index a6a5f66ab..8e6d3d78a 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -40,7 +40,7 @@ export class SchemaColumnHeader extends React.Component case ColumnType.Boolean: return ( <> - e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} /> + e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.checked))} /> {this._newFieldDefault ? 'true' : 'false'} ); diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index f790e9dbf..2cf0a1b79 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -1,20 +1,17 @@ import React = require('react'); import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, ObservableMap, ObservableSet } from 'mobx'; +import { action, ObservableSet } from 'mobx'; import { observer } from 'mobx-react'; -import { Doc, StrListCast } from '../../../../fields/Doc'; +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 { FieldView, FieldViewProps } from '../../nodes/FieldView'; +import { OpenWhere } from '../../nodes/DocumentView'; +import { FieldViewProps } from '../../nodes/FieldView'; import './CollectionSchemaView.scss'; import { SchemaTableCell } from './SchemaTableCell'; -import { emptyFunction, setupMoveUpEvents } from '../../../../Utils'; -import { DragManager } from '../../../util/DragManager'; -import { OpenWhere } from '../../nodes/DocumentView'; -import { Cast } from '../../../../fields/Types'; -import { listSpec } from '../../../../fields/Schema'; -import { CollectionSchemaView } from './CollectionSchemaView'; +import { setupMoveUpEvents, emptyFunction } from '../../../../Utils'; export interface SchemaRowBoxProps extends FieldViewProps { rowIndex: number; @@ -30,61 +27,37 @@ export interface SchemaRowBoxProps extends FieldViewProps { } @observer -export class SchemaRowBox extends ViewBoxBaseComponent() { - public static LayoutString(fieldKey: string) { - return FieldView.LayoutString(SchemaRowBox, fieldKey); - } - +export class SchemaRowBox extends ViewBoxBaseComponent() { private _ref: HTMLDivElement | null = null; bounds = () => this._ref?.getBoundingClientRect(); - @computed get columnKeys() { - return StrListCast(this.props.ContainingCollectionDoc?.columnKeys); - } - - @computed get storedColumnWidths() { - let widths = Cast( - this.props.ContainingCollectionDoc?.columnWidths, - listSpec('number'), - 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() - CollectionSchemaView._rowMenuWidth) { - widths = widths.map(w => { - const proportion = w / totalWidth; - return proportion * (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth); - }); - } - - return widths; - } + isSelected = () => this.props.selectedDocs.has(this.props.Document); @action onRowPointerDown = (e: React.PointerEvent) => { e.stopPropagation(); - // 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) - // ); + 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; + if (!this.props.dragging) return; document.removeEventListener('pointermove', this.onPointerMove); document.addEventListener('pointermove', this.onPointerMove); }; onPointerMove = (e: any) => { - // if (!this.props.dragging) return; + if (!this.props.dragging) return; let dragIsRow: boolean = true; DragManager.docsBeingDragged.forEach(doc => { - // dragIsRow = this.props.selectedDocs.has(doc); + dragIsRow = this.props.selectedDocs.has(doc); }); if (this._ref && dragIsRow) { const rect = this._ref.getBoundingClientRect(); @@ -94,11 +67,11 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { if (y <= halfLine) { this._ref.style.borderTop = `solid 2px ${Colors.MEDIUM_BLUE}`; this._ref.style.borderBottom = '0px'; - // this.props.dropIndex(this.props.rowIndex); + 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); + this.props.dropIndex(this.props.rowIndex + 1); } } }; @@ -115,22 +88,19 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { return (
{ - // row && this.props.addRowRef(this.props.Document, row); + row && this.props.addRowRef(this.props.Document, row); this._ref = row; }}>
+ style={{ + width: this.props.rowMenuWidth, + }}>
{ @@ -149,8 +119,8 @@ export class SchemaRowBox extends ViewBoxBaseComponent() {
- {this.columnKeys.map((key, index) => ( - + {this.props.columnKeys.map((key, index) => ( + ))}
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 459554ebe..569579996 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -44,7 +44,6 @@ 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? @@ -269,7 +268,6 @@ export class DocumentContentsView extends React.Component< HTMLtag, ComparisonBox, LoadingBox, - SchemaRowBox, }} bindings={bindings} jsx={layoutFrame} -- cgit v1.2.3-70-g09d2 From ca3868b494bfd00c0349424f622bb5010b0e1197 Mon Sep 17 00:00:00 2001 From: mehekj Date: Thu, 9 Feb 2023 00:03:32 -0500 Subject: doc preview and arrow key movement --- package-lock.json | 50 ++++---- .../collectionSchema/CollectionSchemaView.scss | 8 ++ .../collectionSchema/CollectionSchemaView.tsx | 136 ++++++++++++++++++--- .../collectionSchema/SchemaColumnHeader.tsx | 3 +- 4 files changed, 156 insertions(+), 41 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/package-lock.json b/package-lock.json index f63aaf774..307221f4a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2288,7 +2288,7 @@ "@types/strip-bom": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@types/strip-bom/-/strip-bom-3.0.0.tgz", - "integrity": "sha1-FKjsOVbC6B7bdSB5CuzyHCkK69I=", + "integrity": "sha512-xevGOReSYGM7g/kUBZzPqCrR/KYAo+F0yiPc85WFTJa0MSLtyFTVTU6cJu/aV4mid7IffDIWqo69THF2o4JiEQ==", "dev": true }, "@types/strip-json-comments": { @@ -2639,7 +2639,7 @@ "textarea-caret": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/textarea-caret/-/textarea-caret-3.0.2.tgz", - "integrity": "sha512-gRzeti2YS4did7UJnPQ47wrjD+vp+CJIe9zbsu0bJ987d8QVLvLNG9757rqiQTIy4hGIeFauTTJt5Xkn51UkXg==" + "integrity": "sha1-82DEhpmqGr9xhoCkOjGoUGZcLK8=" } } }, @@ -2738,7 +2738,7 @@ "after": { "version": "0.8.2", "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz", - "integrity": "sha512-QbJ0NTQ/I9DI3uSJA4cbexiwQeRAfjPScqIbSjUDd9TOrcg6pTkdgziesOqxBMBzit8vFCTwrP27t13vFOORRA==" + "integrity": "sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=" }, "agent-base": { "version": "6.0.2", @@ -3530,7 +3530,7 @@ "backo2": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz", - "integrity": "sha512-zj6Z6M7Eq+PBZ7PQxl5NT665MvJdAkzp0f60nAJ+sLaSCBPMwVak5ZegFbgVCzFcCJTKFoMizvM5Ld7+JrRJHA==" + "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc=" }, "bail": { "version": "2.0.2", @@ -3600,7 +3600,7 @@ "base64-arraybuffer": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz", - "integrity": "sha512-a1eIFi4R9ySrbiMuyTGx5e92uRH5tQY6kArNcFaKBUleIoLjdjBg7Zxm3Mqm3Kmkf27HLR/1fnxX9q8GQ7Iavg==" + "integrity": "sha1-mBjHngWbE1X5fgQooBfIOOkLqBI=" }, "base64-js": { "version": "1.5.1", @@ -4577,7 +4577,7 @@ "component-bind": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz", - "integrity": "sha512-WZveuKPeKAG9qY+FkYDeADzdHyTYdIboXS59ixDeRJL5ZhxpqUnxSOwop4FQjMsiYm3/Or8cegVbpAHNA7pHxw==" + "integrity": "sha1-AMYIq33Nk4l8AAllGx06jh5zu9E=" }, "component-emitter": { "version": "1.3.0", @@ -4587,7 +4587,7 @@ "component-inherit": { "version": "0.0.3", "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz", - "integrity": "sha512-w+LhYREhatpVqTESyGFg3NlP6Iu0kEKUHETY9GoZP/pQyW4mHFZuFWRUCIqVPZ36ueVLtoOEZaAqbCF2RDndaA==" + "integrity": "sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM=" }, "compress-brotli": { "version": "1.3.8", @@ -5295,7 +5295,7 @@ "custom-event": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz", - "integrity": "sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg==" + "integrity": "sha1-XQKkaFCt8bSjF5RqOSj8y1v9BCU=" }, "cyclist": { "version": "1.0.1", @@ -6201,7 +6201,7 @@ "dynamic-dedupe": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/dynamic-dedupe/-/dynamic-dedupe-0.3.0.tgz", - "integrity": "sha1-BuRMIj9eTpTXjvnbI6ZRXOL5YqE=", + "integrity": "sha512-ssuANeD+z97meYOqd50e04Ze5qp4bPqo8cCkI4TRjZkzAUgIDTrXV1R8QCdINpiI+hw14+rYazvTRdQrz0/rFQ==", "dev": true, "requires": { "xtend": "^4.0.0" @@ -6331,7 +6331,7 @@ "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" }, "ws": { "version": "7.4.6", @@ -8678,7 +8678,7 @@ "fs-extra": { "version": "0.26.7", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.26.7.tgz", - "integrity": "sha1-muH92UiXeY7at20JGM9C0MMYT6k=", + "integrity": "sha512-waKu+1KumRhYv8D8gMRCKJGAMI9pRnPuEb1mvgYD0f7wBscg+h6bW4FDTmEZhB9VKxvoTtxW+Y7bnIlB7zja6Q==", "requires": { "graceful-fs": "^4.1.2", "jsonfile": "^2.1.0", @@ -9316,14 +9316,14 @@ "isarray": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz", - "integrity": "sha512-c2cu3UxbI+b6kR3fy0nRnAhodsvR9dx7U5+znCOzdj6IfP3upFURTr0Xl5BlQZNKZjEtxrmVyfSdeE3O57smoQ==" + "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=" } } }, "has-cors": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz", - "integrity": "sha512-g5VNKdkFuUuVCP9gYfDJHjK2nqdQJ7aDLTnycnc2+RvsOQbuLdF5pm7vuE5J76SEBIQjs4kQY/BWq74JUmjbXA==" + "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=" }, "has-flag": { "version": "3.0.0", @@ -9916,7 +9916,7 @@ "indexof": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz", - "integrity": "sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg==" + "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=" }, "inflight": { "version": "1.0.6", @@ -10969,7 +10969,7 @@ "jsonfile": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz", - "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=", + "integrity": "sha512-PKllAqbgLgxHaj8TElYymKCAgrASebJrWpTnEkOaTowt23VKXXN0sUeriJ+eh7y6ufb/CC5ap11pz71/cM0hUw==", "requires": { "graceful-fs": "^4.1.6" } @@ -11393,7 +11393,7 @@ "lodash.isequal": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", - "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==" + "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=" }, "lodash.isplainobject": { "version": "4.0.6", @@ -11654,7 +11654,7 @@ "mathquill": { "version": "0.10.1-a", "resolved": "https://registry.npmjs.org/mathquill/-/mathquill-0.10.1-a.tgz", - "integrity": "sha512-snSAEwAtwdwBFSor+nVBnWWQtTw67kgAgKMyAIxuz4ZPboy0qkWZmd7BL3lfOXp/INihhRlU1PcfaAtDaRhmzA==", + "integrity": "sha1-vyylaQEAY6w0vNXVKa3Ag3zVPD8=", "requires": { "jquery": "^1.12.3" }, @@ -11662,7 +11662,7 @@ "jquery": { "version": "1.12.4", "resolved": "https://registry.npmjs.org/jquery/-/jquery-1.12.4.tgz", - "integrity": "sha512-UEVp7PPK9xXYSk8xqXCJrkXnKZtlgWkd2GsAQbMRFK6S/ePU2JN5G2Zum8hIVjzR3CpdfSqdqAzId/xd4TJHeg==" + "integrity": "sha1-AeHfuikP5z3rp3zurLD5ui/sngw=" } } }, @@ -19974,7 +19974,7 @@ "component-emitter": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz", - "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=" + "integrity": "sha512-jPatnhd33viNplKjqXKRkGU345p263OIWzDL2wH3LGIGp5Kojo+uXizHmOADRvhGFFTnJqX3jBAKP6vvmSDKcA==" }, "debug": { "version": "4.1.1", @@ -19987,7 +19987,7 @@ "isarray": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz", - "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=" + "integrity": "sha512-c2cu3UxbI+b6kR3fy0nRnAhodsvR9dx7U5+znCOzdj6IfP3upFURTr0Xl5BlQZNKZjEtxrmVyfSdeE3O57smoQ==" } } }, @@ -20852,7 +20852,7 @@ "to-array": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz", - "integrity": "sha512-LhVdShQD/4Mk4zXNroIQZJC+Ap3zgLcDuwEdcmLv9CCO73NWockQDwyUnW/m8VX/EElfL6FcYx7EeutN4HJA6A==" + "integrity": "sha1-F+bBH3PdTz10zaek/zI46a2b+JA=" }, "to-fast-properties": { "version": "2.0.0", @@ -21223,7 +21223,7 @@ "strip-bom": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", - "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=", + "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==", "dev": true } } @@ -22424,7 +22424,7 @@ "resolve-cwd": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz", - "integrity": "sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=", + "integrity": "sha512-ccu8zQTrzVr954472aUVPLEcB3YpKSYR3cg/3lo1okzobPBM+1INXBbBZlDbnI/hbEocnf8j0QVo43hQKrbchg==", "dev": true, "requires": { "resolve-from": "^3.0.0" @@ -22433,7 +22433,7 @@ "resolve-from": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", - "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=", + "integrity": "sha512-GnlH6vxLymXJNMBo7XP1fJIzBFbdYt49CuTwmB/6N53t+kMPRMFKz783LlQ4tv28XoQfMWinAJX6WCGf2IlaIw==", "dev": true }, "semver": { @@ -22974,7 +22974,7 @@ "yeast": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz", - "integrity": "sha512-8HFIh676uyGYP6wP13R/j6OJ/1HwJ46snpvzE7aHAN3Ryqh2yX6Xox2B4CUmTwwOIzlG3Bs7ocsP5dZH/R1Qbg==" + "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk=" }, "yn": { "version": "3.1.1", diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 4fa5d80e2..bd0fc11b3 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -3,6 +3,8 @@ .collectionSchemaView { cursor: default; height: 100%; + display: flex; + flex-direction: row; .schema-table { background-color: $white; @@ -124,6 +126,12 @@ flex-direction: row; } } + + .schema-preview-divider { + height: 100%; + background: black; + cursor: ew-resize; + } } .schema-header-row, diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 4fb3f68c1..5d4777e12 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, returnEmptyString, setupMoveUpEvents, Utils } from '../../../../Utils'; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents, Utils } from '../../../../Utils'; import { Docs, DocUtils } from '../../../documents/Documents'; import { DragManager } from '../../../util/DragManager'; import { SelectionManager } from '../../../util/SelectionManager'; @@ -23,6 +23,7 @@ import { CollectionSubView } from '../CollectionSubView'; import './CollectionSchemaView.scss'; import { SchemaColumnHeader } from './SchemaColumnHeader'; import { SchemaRowBox } from './SchemaRowBox'; +import { DefaultStyleProvider } from '../../StyleProvider'; export enum ColumnType { Number, @@ -43,10 +44,12 @@ export class CollectionSchemaView extends CollectionSubView() { private _minColWidth: number = 150; public static _rowMenuWidth: number = 100; + public static _previewDividerWidth: number = 4; @observable _selectedDocs: ObservableSet = new ObservableSet(); @observable _rowEles: ObservableMap = new ObservableMap(); @observable _isDragging: boolean = false; @observable _displayColumnWidths: number[] | undefined; + @observable _previewDoc: Doc | undefined; get documentKeys() { const docs = this.childDocs; @@ -63,6 +66,14 @@ export class CollectionSchemaView extends CollectionSubView() { return Array.from(Object.keys(keys)); } + @computed get previewWidth() { + return NumCast(this.props.Document.schemaPreviewWidth); + } + + @computed get tableWidth() { + return this.props.PanelWidth() - this.previewWidth - CollectionSchemaView._previewDividerWidth; + } + @computed get columnKeys() { return Cast(this.layoutDoc.columnKeys, listSpec('string'), defaultColumnKeys); } @@ -71,14 +82,14 @@ export class CollectionSchemaView extends CollectionSubView() { let widths = Cast( this.layoutDoc.columnWidths, listSpec('number'), - this.columnKeys.map(() => (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth) / this.columnKeys.length) + this.columnKeys.map(() => (this.tableWidth - CollectionSchemaView._rowMenuWidth) / this.columnKeys.length) ); const totalWidth = widths.reduce((sum, width) => sum + width, 0); - if (totalWidth !== this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth) { + if (totalWidth !== this.tableWidth - CollectionSchemaView._rowMenuWidth) { widths = widths.map(w => { const proportion = w / totalWidth; - return proportion * (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth); + return proportion * (this.tableWidth - CollectionSchemaView._rowMenuWidth); }); } @@ -97,6 +108,42 @@ export class CollectionSchemaView extends CollectionSubView() { return BoolCast(this.layoutDoc.sortDesc); } + componentDidMount() { + document.addEventListener('keydown', this.onKeyDown); + } + + componentWillUnmount() { + document.removeEventListener('keydown', this.onKeyDown); + } + + @action + onKeyDown = (e: KeyboardEvent) => { + if (this._selectedDocs.size > 0) { + if (e.key == 'ArrowDown') { + const lastDoc = Array.from(this._selectedDocs.values()).lastElement(); + const lastIndex = this.childDocs.indexOf(lastDoc); + if (lastIndex >= 0 && lastIndex < this.childDocs.length - 1) { + this._selectedDocs.clear(); + const newDoc = this.childDocs[lastIndex + 1]; + this._selectedDocs.add(newDoc); + SelectionManager.SelectSchemaViewDoc(newDoc); + this._previewDoc = newDoc; + } + } + if (e.key == 'ArrowUp') { + const firstDoc = Array.from(this._selectedDocs.values())[0]; + const firstIndex = this.childDocs.indexOf(firstDoc); + if (firstIndex > 0) { + this._selectedDocs.clear(); + const newDoc = this.childDocs[firstIndex - 1]; + this._selectedDocs.add(newDoc); + SelectionManager.SelectSchemaViewDoc(newDoc); + this._previewDoc = newDoc; + } + } + } + }; + @undoBatch @action setSort = (field: string, desc: boolean) => { @@ -134,10 +181,10 @@ export class CollectionSchemaView extends CollectionSubView() { } let currWidths = [...this.storedColumnWidths]; - const newColWidth = this.props.PanelWidth() / (currWidths.length + 1); + const newColWidth = this.tableWidth / (currWidths.length + 1); currWidths = currWidths.map(w => { - const proportion = w / (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth); - return proportion * (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth - newColWidth); + const proportion = w / (this.tableWidth - CollectionSchemaView._rowMenuWidth); + return proportion * (this.tableWidth - CollectionSchemaView._rowMenuWidth - newColWidth); }); currWidths.splice(index + 1, 0, newColWidth); this.layoutDoc.columnWidths = new List(currWidths); @@ -159,8 +206,8 @@ export class CollectionSchemaView extends CollectionSubView() { let currWidths = [...this.storedColumnWidths]; const removedColWidth = currWidths[index]; currWidths = currWidths.map(w => { - const proportion = w / (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth - removedColWidth); - return proportion * (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth); + const proportion = w / (this.tableWidth - CollectionSchemaView._rowMenuWidth - removedColWidth); + return proportion * (this.tableWidth - CollectionSchemaView._rowMenuWidth); }); currWidths.splice(index, 1); this.layoutDoc.columnWidths = new List(currWidths); @@ -283,6 +330,12 @@ export class CollectionSchemaView extends CollectionSubView() { } else { SelectionManager.SelectSchemaViewDoc(undefined); } + + if (this._selectedDocs.size == 1) { + this._previewDoc = Array.from(this._selectedDocs)[0]; + } else { + this._previewDoc = undefined; + } }; @action @@ -346,6 +399,21 @@ export class CollectionSchemaView extends CollectionSubView() { return true; }; + onDividerDown = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, this.onDividerMove, emptyFunction, emptyFunction); + }; + + @action + onDividerMove = (e: PointerEvent, down: number[], delta: number[]) => { + // const nativeWidth = this._previewCont!.getBoundingClientRect(); + // const minWidth = 40; + // const maxWidth = 1000; + // const movedWidth = this.props.ScreenToLocalTransform().transformDirection(nativeWidth.right - e.clientX, 0)[0]; + // const width = movedWidth < minWidth ? minWidth : movedWidth > maxWidth ? maxWidth : movedWidth; + this.props.Document.schemaPreviewWidth = this.previewWidth - delta[0]; + return false; + }; + @action addNewTextDoc = (value: string, shiftDown?: boolean, forceEmptyNote?: boolean) => { if (!value && !forceEmptyNote) return false; @@ -440,11 +508,14 @@ export class CollectionSchemaView extends CollectionSubView() { this._ref = ele; this.createDashEventsTarget(ele); }} - onPointerDown={action(() => { - this._selectedDocs.clear(); - })} onDrop={this.onExternalDrop.bind(this)}> -
+
{ + this._selectedDocs.clear(); + SelectionManager.SelectSchemaViewDoc(undefined); + this._previewDoc = undefined; + })}>
{this.columnKeys.map((key, index) => { @@ -467,7 +538,7 @@ export class CollectionSchemaView extends CollectionSubView() { ); })}
-
+
e.stopPropagation()}> {this.childDocs.map((doc: Doc, index: number) => { const dataDoc = !doc.isTemplateDoc && !doc.isTemplateForField && !doc.PARAMS ? undefined : this.props.DataDoc; let dref: Opt; @@ -493,8 +564,43 @@ export class CollectionSchemaView extends CollectionSubView() { ); })}
+
- +
+ {this.previewWidth > 0 && ( +
+ {this._previewDoc && ( + this.previewWidth} + PanelHeight={this.props.PanelHeight} + isContentActive={returnTrue} + isDocumentActive={returnFalse} + ScreenToLocalTransform={() => this.props.ScreenToLocalTransform().translate(-this.tableWidth, 0)} + docFilters={this.childDocFilters} + docRangeFilters={this.childDocRangeFilters} + searchFilterDocs={this.searchFilterDocs} + styleProvider={DefaultStyleProvider} + docViewPath={returnEmptyDoclist} + ContainingCollectionDoc={this.props.CollectionView?.props.Document} + ContainingCollectionView={this.props.CollectionView} + moveDocument={this.props.moveDocument} + addDocument={this.props.addDocument} + removeDocument={this.props.removeDocument} + whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged} + addDocTab={this.props.addDocTab} + pinToPres={this.props.pinToPres} + bringToFront={returnFalse} + /> + )} +
+ )}
); } diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 9d5dfe507..2e303f91c 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -5,6 +5,7 @@ import { observer } from 'mobx-react'; import { emptyFunction, setupMoveUpEvents } from '../../../../Utils'; import './CollectionSchemaView.scss'; import { ColumnType } from './CollectionSchemaView'; +import { Colors } from 'browndash-components'; export interface SchemaColumnHeaderProps { columnKeys: string[]; @@ -253,7 +254,7 @@ export class SchemaColumnHeader extends React.Component }}>
-
+
this.toggleFilterMenu()}> -- cgit v1.2.3-70-g09d2 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 --- package-lock.json | 39 +++++++ .../collectionSchema/CollectionSchemaView.scss | 6 ++ .../collectionSchema/CollectionSchemaView.tsx | 96 ++++++++++++----- .../collections/collectionSchema/SchemaRowBox.tsx | 120 ++++++++++++--------- .../collectionSchema/SchemaTableCell.tsx | 12 ++- src/client/views/nodes/DocumentContentsView.tsx | 2 + 6 files changed, 195 insertions(+), 80 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/package-lock.json b/package-lock.json index 3c2dccbf8..8806887df 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5308,6 +5308,16 @@ "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=", "dev": true }, + "d": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz", + "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==", + "dev": true, + "requires": { + "es5-ext": "^0.10.50", + "type": "^1.0.1" + } + }, "d3-array": { "version": "2.12.1", "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz", @@ -6475,6 +6485,28 @@ "is-symbol": "^1.0.2" } }, + "es5-ext": { + "version": "0.10.62", + "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz", + "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==", + "dev": true, + "requires": { + "es6-iterator": "^2.0.3", + "es6-symbol": "^3.1.3", + "next-tick": "^1.1.0" + } + }, + "es6-iterator": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz", + "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==", + "dev": true, + "requires": { + "d": "1", + "es5-ext": "^0.10.35", + "es6-symbol": "^3.1.1" + } + }, "es6-promise": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.2.1.tgz", @@ -6486,6 +6518,7 @@ "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==", "dev": true, "requires": { + "d": "^1.0.1", "ext": "^1.1.2" } }, @@ -21371,6 +21404,12 @@ "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz", "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=" }, + "type": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz", + "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==", + "dev": true + }, "type-check": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz", 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 From d7d94fb4a9480a699eafa250a95821f7c584911d Mon Sep 17 00:00:00 2001 From: mehekj Date: Tue, 28 Feb 2023 15:15:48 -0500 Subject: rows are documentviews (again) --- .../collections/collectionSchema/CollectionSchemaView.scss | 4 ++-- .../collections/collectionSchema/CollectionSchemaView.tsx | 14 ++++++++------ .../views/collections/collectionSchema/SchemaRowBox.tsx | 2 +- 3 files changed, 11 insertions(+), 9 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 46c2e2d1a..5c0b6d88b 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -135,7 +135,7 @@ } .schema-row-wrapper { - max-height: 70px; + // max-height: 70px; overflow: hidden; } @@ -144,7 +144,7 @@ display: flex; flex-direction: row; height: 100%; - max-height: 70px; + // max-height: 70px; overflow: auto; .schema-column-header, diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 379676f41..bd9303997 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -33,7 +33,7 @@ export enum ColumnType { Image, } -const defaultColumnKeys: string[] = ['title', 'type', 'author', 'text', 'data', 'creationDate']; +const defaultColumnKeys: string[] = ['title', 'type', 'author', 'creationDate', 'links']; @observer export class CollectionSchemaView extends CollectionSubView() { @@ -43,6 +43,7 @@ export class CollectionSchemaView extends CollectionSubView() { private _closestDropIndex: number = 0; private _previewRef: HTMLDivElement | null = null; + public static _rowHeight: number = 50; public static _minColWidth: number = 150; public static _rowMenuWidth: number = 100; public static _previewDividerWidth: number = 4; @@ -419,7 +420,7 @@ export class CollectionSchemaView extends CollectionSubView() { @action addNewTextDoc = (value: string, shiftDown?: boolean, forceEmptyNote?: boolean) => { if (!value && !forceEmptyNote) return false; - const newDoc = Docs.Create.TextDocument(value, { title: value }); + const newDoc = Docs.Create.TextDocument(value, { title: value, _autoHeight: true }); FormattedTextBox.SelectOnLoad = newDoc[Id]; FormattedTextBox.SelectOnLoadChar = forceEmptyNote ? '' : ' '; return this.props.addDocument?.(newDoc) || false; @@ -534,7 +535,7 @@ export class CollectionSchemaView extends CollectionSubView() { SelectionManager.SelectSchemaViewDoc(undefined); this._previewDoc = undefined; })}> -
+
{this.columnKeys.map((key, index) => { return ( @@ -561,7 +562,7 @@ export class CollectionSchemaView extends CollectionSubView() { const dataDoc = !doc.isTemplateDoc && !doc.isTemplateForField && !doc.PARAMS ? undefined : this.props.DataDoc; let dref: Opt; return ( -
+
(dref = r || undefined)} @@ -573,7 +574,7 @@ export class CollectionSchemaView extends CollectionSubView() { ContainingCollectionView={this.props.CollectionView} ContainingCollectionDoc={this.Document} PanelWidth={() => this.tableWidth} - PanelHeight={() => 70} + PanelHeight={() => CollectionSchemaView._rowHeight} styleProvider={DefaultStyleProvider} focus={this.focusDocument} docFilters={this.childDocFilters} @@ -581,12 +582,13 @@ export class CollectionSchemaView extends CollectionSubView() { docRangeFilters={this.childDocRangeFilters} searchFilterDocs={this.searchFilterDocs} rootSelected={this.rootSelected} - ScreenToLocalTransform={() => this.getDocTransform(doc, dref)} + ScreenToLocalTransform={Transform.Identity} bringToFront={emptyFunction} isContentActive={this.isChildContentActive} hideDecorations={true} hideTitle={true} hideDocumentButtonBar={true} + fitWidth={returnTrue} />
); diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 0378fa67e..e72ed3c4f 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -102,7 +102,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { return (
Date: Mon, 6 Mar 2023 17:53:36 -0500 Subject: moved column menu --- .../collectionSchema/CollectionSchemaView.scss | 144 +++++++-------- .../collectionSchema/CollectionSchemaView.tsx | 185 ++++++++++++++++++- .../collectionSchema/SchemaColumnHeader.tsx | 199 +-------------------- .../collectionSchema/SchemaTableCell.tsx | 17 +- 4 files changed, 254 insertions(+), 291 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 5c0b6d88b..931645857 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -9,6 +9,77 @@ .schema-table { background-color: $white; + .schema-column-menu { + background: $light-gray; + position: absolute; + min-width: 200px; + display: flex; + flex-direction: column; + align-items: flex-start; + z-index: 1; + + .schema-key-search-input { + width: calc(100% - 20px); + margin: 10px; + } + + .schema-key-search-result { + cursor: pointer; + padding: 2px 10px; + width: 100%; + + &:hover { + background-color: $medium-gray; + } + } + + .schema-key-search, + .schema-new-key-options { + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + } + + .schema-new-key-options { + margin: 10px; + .schema-key-warning { + color: red; + font-weight: normal; + align-self: center; + } + } + + .schema-key-list { + width: 100%; + max-height: 300px; + overflow-y: auto; + } + + .schema-key-type-option { + margin: 2px 0px; + + input { + margin-right: 5px; + } + } + + .schema-key-default-val { + margin: 5px 0; + } + + .schema-column-menu-button { + cursor: pointer; + padding: 2px 5px; + background: $medium-blue; + border-radius: 9999px; + color: $white; + width: fit-content; + margin: 5px; + align-self: center; + } + } + .schema-header-row { justify-content: flex-end; @@ -19,6 +90,7 @@ justify-content: space-between; align-items: center; padding: 0; + z-index: 1; .schema-column-title { flex-grow: 2; @@ -46,78 +118,6 @@ .schema-column-resizer.left { align-self: flex-start; } - - .schema-column-menu { - background: $light-gray; - width: inherit; - position: absolute; - top: 35px; - min-width: 200px; - display: flex; - flex-direction: column; - align-items: flex-start; - - .schema-key-search-input { - width: calc(100% - 20px); - margin: 10px; - } - - .schema-key-search-result { - cursor: pointer; - padding: 2px 10px; - width: 100%; - - &:hover { - background-color: $medium-gray; - } - } - - .schema-key-search, - .schema-new-key-options { - width: 100%; - display: flex; - flex-direction: column; - align-items: flex-start; - } - - .schema-new-key-options { - margin: 10px; - .schema-key-warning { - color: red; - font-weight: normal; - align-self: center; - } - } - - .schema-key-list { - width: 100%; - max-height: 300px; - overflow-y: auto; - } - - .schema-key-type-option { - margin: 2px 0px; - - input { - margin-right: 5px; - } - } - - .schema-key-default-val { - margin: 5px 0; - } - - .schema-column-menu-button { - cursor: pointer; - padding: 2px 5px; - background: $medium-blue; - border-radius: 9999px; - color: $white; - width: fit-content; - margin: 5px; - align-self: center; - } - } } } diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index c52a7f3e4..fd7790c4b 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -26,6 +26,7 @@ import { SchemaRowBox } from './SchemaRowBox'; import { DefaultStyleProvider } from '../../StyleProvider'; import { DocumentManager } from '../../../util/DocumentManager'; import { ScriptField } from '../../../../fields/ScriptField'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; export enum ColumnType { Number, @@ -43,16 +44,25 @@ export class CollectionSchemaView extends CollectionSubView() { private _selectedDocSortedArray: Doc[] = []; private _closestDropIndex: number = 0; private _previewRef: HTMLDivElement | null = null; + private _makeNewColumn: boolean = false; public static _rowHeight: number = 50; public static _minColWidth: number = 150; public static _rowMenuWidth: number = 100; public static _previewDividerWidth: number = 4; + @observable _lastSelectedRow: number | undefined; @observable _selectedDocs: ObservableSet = new ObservableSet(); @observable _rowEles: ObservableMap = new ObservableMap(); @observable _isDragging: boolean = false; @observable _displayColumnWidths: number[] | undefined; + @observable _columnMenuIndex: number | undefined; + @observable _menuOptions: string[] = []; + @observable _newFieldWarning: string = ''; + @observable _makeNewField: boolean = false; + @observable _newFieldDefault: any = 0; + @observable _newFieldType: ColumnType = ColumnType.Number; + @observable _menuValue: string = ''; get documentKeys() { const docs = this.childDocs; @@ -154,8 +164,6 @@ export class CollectionSchemaView extends CollectionSubView() { this.layoutDoc.sortField = field; this.layoutDoc.sortDesc = desc; - console.log(field, desc); - if (field === undefined) return; this.childDocs.sort((docA, docB) => { @@ -189,7 +197,7 @@ export class CollectionSchemaView extends CollectionSubView() { @undoBatch @action - addColumn = (index: number, key: string, defaultVal?: any) => { + addColumn = (key: string, defaultVal?: any) => { if (!this.documentKeys.includes(key)) { this.addNewKey(key, defaultVal); } @@ -200,11 +208,11 @@ export class CollectionSchemaView extends CollectionSubView() { const proportion = w / (this.tableWidth - CollectionSchemaView._rowMenuWidth); return proportion * (this.tableWidth - CollectionSchemaView._rowMenuWidth - newColWidth); }); - currWidths.splice(index + 1, 0, newColWidth); + currWidths.splice(0, 0, newColWidth); this.layoutDoc.columnWidths = new List(currWidths); let currKeys = [...this.columnKeys]; - currKeys.splice(index + 1, 0, key); + currKeys.splice(0, 0, key); this.layoutDoc.columnKeys = new List(currKeys); }; @@ -386,6 +394,7 @@ export class CollectionSchemaView extends CollectionSubView() { this.addDocument(this._selectedDocSortedArray); this.addDocument(pushedDocs); this.setSort(undefined); + this.clearSelection(); return true; } return false; @@ -543,6 +552,157 @@ export class CollectionSchemaView extends CollectionSubView() { isChildContentActive = () => this.props.isDocumentActive?.() && (this.props.childDocumentsActive?.() || BoolCast(this.rootDoc.childDocumentsActive)) ? true : this.props.childDocumentsActive?.() === false || this.rootDoc.childDocumentsActive === false ? false : undefined; + @computed get fieldDefaultInput() { + switch (this._newFieldType) { + case ColumnType.Number: + return e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />; + case ColumnType.Boolean: + return ( + <> + e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.checked))} /> + {this._newFieldDefault ? 'true' : 'false'} + + ); + case ColumnType.String: + return e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />; + } + } + + onSearchKeyDown = (e: React.KeyboardEvent) => { + switch (e.key) { + case 'Enter': + this._menuOptions.length > 0 && this._menuValue.length > 0 ? this.setKey(this._menuOptions[0]) : action(() => (this._makeNewField = true))(); + break; + case 'Escape': + this.toggleColumnMenu(this._columnMenuIndex); + break; + } + }; + + @action + setKey = (key: string, defaultVal?: any) => { + if (this._makeNewColumn) { + this.addColumn(key, defaultVal); + } else { + this.changeColumnKey(this._columnMenuIndex!, key, defaultVal); + } + this.toggleColumnMenu(this._columnMenuIndex); + }; + + @action + toggleColumnMenu = (index: number | undefined, newCol?: boolean) => { + this._makeNewColumn = false; + if (this._columnMenuIndex !== undefined && index === this._columnMenuIndex) { + this._columnMenuIndex = undefined; + } else { + this._columnMenuIndex = index; + this._menuValue = ''; + this._menuOptions = this.documentKeys; + this._makeNewField = false; + this._newFieldWarning = ''; + this._makeNewField = false; + if (newCol) { + this._makeNewColumn = true; + } + } + }; + + @action + updateKeySearch = (e: React.ChangeEvent) => { + this._menuValue = e.target.value; + this._menuOptions = this.documentKeys.filter(value => value.toLowerCase().includes(this._menuValue.toLowerCase())); + }; + + @computed get renderColumnMenu() { + const x = this.displayColumnWidths.reduce((total, curr, index) => total + (index < this._columnMenuIndex! ? curr : 0), CollectionSchemaView._rowMenuWidth); + return ( +
+ e.stopPropagation()} /> + {this._makeNewField ? ( +
+
+ { + this._newFieldType = ColumnType.Number; + this._newFieldDefault = 0; + })} + /> + number +
+
+ { + this._newFieldType = ColumnType.Boolean; + this._newFieldDefault = false; + })} + /> + boolean +
+
+ { + this._newFieldType = ColumnType.String; + this._newFieldDefault = ''; + })} + /> + string +
+
value: {this.fieldDefaultInput}
+
{this._newFieldWarning}
+
{ + if (this.documentKeys.includes(this._menuValue)) { + this._newFieldWarning = 'Field already exists'; + } else if (this._menuValue.length === 0) { + this._newFieldWarning = 'Field cannot be an empty string'; + } else { + this.setKey(this._menuValue, this._newFieldDefault); + } + })}> + done +
+
+ ) : ( +
+
{ + e.stopPropagation(); + this._makeNewField = true; + })}> + + new field +
+
+ {this._menuOptions.map(key => ( +
{ + e.stopPropagation(); + this.setKey(key); + }}> + {key} +
+ ))} +
+
+ )} +
+ ); + } + render() { return (
-
+
+
{ + this.toggleColumnMenu(-1, true); + }}> + +
+
{this.columnKeys.map((key, index) => { return ( ); })}
+ {this._columnMenuIndex !== undefined && this.renderColumnMenu}
e.stopPropagation()}> {this.childDocs.map((doc: Doc, index: number) => { const dataDoc = !doc.isTemplateDoc && !doc.isTemplateForField && !doc.PARAMS ? undefined : this.props.DataDoc; diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 2e303f91c..ba63b352b 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -11,29 +11,17 @@ export interface SchemaColumnHeaderProps { columnKeys: string[]; columnWidths: number[]; columnIndex: number; - possibleKeys: string[]; sortField: string; sortDesc: boolean; setSort: (field: string, desc: boolean) => void; - changeColumnKey: (index: number, newKey: string, defaultVal?: any) => void; - addColumn: (index: number, key: string, defaultVal?: any) => void; removeColumn: (index: number) => void; resizeColumn: (e: any, index: number, left: boolean) => void; + toggleColumnMenu: (index: number | undefined, newCol?: boolean) => void; // dragColumn: (e: any, index: number) => boolean; } @observer export class SchemaColumnHeader extends React.Component { - @observable _menuVisible: boolean = false; - @observable _makeNewField: boolean = false; - @observable _newFieldType: ColumnType = ColumnType.Number; - @observable _newFieldDefault: any = 0; - @observable _newFieldWarning: string = ''; - @observable _menuValue: string = ''; - @observable _menuOptions: string[] = []; - @observable _filterVisible: boolean = false; - private _makeNewColumn = false; - @computed get fieldKey() { return this.props.columnKeys[this.props.columnIndex]; } @@ -49,146 +37,6 @@ export class SchemaColumnHeader extends React.Component } }; - @computed get fieldDefaultInput() { - switch (this._newFieldType) { - case ColumnType.Number: - return e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />; - case ColumnType.Boolean: - return ( - <> - e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.checked))} /> - {this._newFieldDefault ? 'true' : 'false'} - - ); - case ColumnType.String: - return e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />; - } - } - - @computed get renderColumnMenu() { - return ( -
- e.stopPropagation()} /> - {this._makeNewField ? ( -
-
- { - this._newFieldType = ColumnType.Number; - this._newFieldDefault = 0; - })} - /> - number -
-
- { - this._newFieldType = ColumnType.Boolean; - this._newFieldDefault = false; - })} - /> - boolean -
-
- { - this._newFieldType = ColumnType.String; - this._newFieldDefault = ''; - })} - /> - string -
-
value: {this.fieldDefaultInput}
-
{this._newFieldWarning}
-
{ - if (this.props.possibleKeys.includes(this._menuValue)) { - this._newFieldWarning = 'Field already exists'; - } else if (this._menuValue.length === 0) { - this._newFieldWarning = 'Field cannot be an empty string'; - } else { - this.setKey(this._menuValue, this._newFieldDefault); - } - })}> - done -
-
- ) : ( -
-
{ - e.stopPropagation(); - this._makeNewField = true; - })}> - + new field -
-
- {this._menuOptions.map(key => ( -
{ - e.stopPropagation(); - this.setKey(key); - }}> - {key} -
- ))} -
-
- )} -
- ); - } - - @computed get columnFilterMenu() { - return ( -
- e.stopPropagation()} /> -
- ); - } - - onSearchKeyDown = (e: React.KeyboardEvent) => { - switch (e.key) { - case 'Enter': - this.setKey(this._menuOptions.length > 0 && this._menuValue.length > 0 ? this._menuOptions[0] : this._menuValue); - break; - case 'Escape': - this.toggleColumnMenu(); - break; - } - }; - - @action - setKey = (key: string, defaultVal?: any) => { - if (this._makeNewColumn) { - this.props.addColumn(this.props.columnIndex, key, defaultVal); - } else { - this.props.changeColumnKey(this.props.columnIndex, key, defaultVal); - } - this.toggleColumnMenu(); - }; - - @action - updateKeySearch = (e: React.ChangeEvent) => { - this._menuValue = e.target.value; - this._menuOptions = this.props.possibleKeys.filter(value => value.toLowerCase().includes(this._menuValue.toLowerCase())); - }; - // @action // onPointerDown = (e: React.PointerEvent) => { // e.stopPropagation(); @@ -196,36 +44,6 @@ export class SchemaColumnHeader extends React.Component // setupMoveUpEvents(this, e, e => this.props.dragColumn(e, this.props.columnIndex), emptyFunction, emptyFunction); // }; - @action - toggleColumnMenu = (newCol?: boolean) => { - this._makeNewColumn = false; - if (this._menuVisible) { - this._menuVisible = false; - } else { - this._filterVisible = false; - this._menuVisible = true; - this._menuValue = ''; - this._menuOptions = this.props.possibleKeys; - this._makeNewField = false; - this._newFieldWarning = ''; - this._makeNewField = false; - if (newCol) { - this._makeNewColumn = true; - } - } - }; - - @action - toggleFilterMenu = () => { - console.log(this._filterVisible); - if (this._filterVisible) { - this._filterVisible = false; - } else { - this._filterVisible = true; - this._menuVisible = false; - } - }; - render() { return (
@@ -236,17 +54,10 @@ export class SchemaColumnHeader extends React.Component
{ - this.toggleColumnMenu(); + this.props.toggleColumnMenu(this.props.columnIndex, false); }}>
-
{ - this.toggleColumnMenu(true); - }}> - -
{ @@ -257,15 +68,9 @@ export class SchemaColumnHeader extends React.Component
-
this.toggleFilterMenu()}> - -
this.props.resizeColumn(e, this.props.columnIndex, false)}>
- - {this._menuVisible && this.renderColumnMenu} - {this._filterVisible && this.columnFilterMenu}
); } diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 0f832e7c4..43b7da544 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -1,20 +1,14 @@ import React = require('react'); import { observer } from 'mobx-react'; -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 { Doc, Field } from '../../../../fields/Doc'; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero } from '../../../../Utils'; +import { Transform } from '../../../util/Transform'; import { EditableView } from '../../EditableView'; -import { MAX_ROW_HEIGHT } from '../../global/globalCssVariables.scss'; import { FieldView, FieldViewProps } from '../../nodes/FieldView'; import { KeyValueBox } from '../../nodes/KeyValueBox'; -import { returnEmptyFilter, returnEmptyDoclist, returnFalse, emptyFunction, returnZero } from '../../../../Utils'; import { DefaultStyleProvider } from '../../StyleProvider'; -import { Transform } from '../../../util/Transform'; import { CollectionSchemaView } from './CollectionSchemaView'; +import './CollectionSchemaView.scss'; export interface SchemaTableCellProps { Document: Doc; @@ -28,7 +22,6 @@ export class SchemaTableCell extends React.Component { render() { const props: FieldViewProps = { Document: this.props.Document, - // DataDoc: this.props.doc, docFilters: returnEmptyFilter, docRangeFilters: returnEmptyFilter, searchFilterDocs: returnEmptyDoclist, @@ -56,8 +49,6 @@ export class SchemaTableCell extends React.Component { return (
- {/* {Field.toString(this.props.Document[this.props.fieldKey] as Field)} */} - {/* Field.toKeyValueString(this.props.Document, this.props.fieldKey)} SetValue={(value: string) => true} /> */} } height={'auto'} -- cgit v1.2.3-70-g09d2 From c68e751531f972fcf201089f26e69627cfe4fe3c Mon Sep 17 00:00:00 2001 From: mehekj Date: Tue, 14 Mar 2023 19:31:52 -0400 Subject: single filter through search added --- .../collectionSchema/CollectionSchemaView.scss | 35 ++- .../collectionSchema/CollectionSchemaView.tsx | 323 ++++++++++++++------- .../collectionSchema/SchemaColumnHeader.tsx | 31 +- 3 files changed, 258 insertions(+), 131 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 931645857..5eb5cc86d 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -9,7 +9,8 @@ .schema-table { background-color: $white; - .schema-column-menu { + .schema-column-menu, + .schema-filter-menu { background: $light-gray; position: absolute; min-width: 200px; @@ -83,6 +84,11 @@ .schema-header-row { justify-content: flex-end; + .row-menu { + display: flex; + justify-content: flex-end; + } + .schema-column-header { font-weight: bold; display: flex; @@ -112,10 +118,12 @@ } .schema-column-resizer.right { + margin-left: 5px; align-self: flex-end; } .schema-column-resizer.left { + margin-right: 5px; align-self: flex-start; } } @@ -139,6 +147,10 @@ overflow: hidden; } +.schema-header-row { + background-color: $light-gray; +} + .schema-header-row, .schema-row { display: flex; @@ -163,8 +175,8 @@ .row-menu { display: flex; flex-direction: row; - justify-content: center; min-width: 50px; + justify-content: flex-end; } .row-cells { @@ -176,9 +188,22 @@ .schema-row-button, .schema-header-button { - width: 20px; - height: 20px; - border-radius: 100%; + color: $dark-gray; + margin: 3px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + + svg { + width: 15px; + } +} + +.schema-sort-button { + width: 17px; + height: 17px; + border-radius: 30%; background-color: $dark-gray; color: white; margin: 3px; diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index fd7790c4b..e1c2d989f 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -1,7 +1,7 @@ import React = require('react'); import { action, computed, observable, ObservableMap, ObservableSet, untracked } from 'mobx'; import { observer } from 'mobx-react'; -import { Doc, DocListCast, Field, Opt } from '../../../../fields/Doc'; +import { Doc, DocListCast, Field, Opt, StrListCast } from '../../../../fields/Doc'; import { Id } from '../../../../fields/FieldSymbols'; import { List } from '../../../../fields/List'; import { RichTextField } from '../../../../fields/RichTextField'; @@ -17,7 +17,7 @@ import { undoBatch } from '../../../util/UndoManager'; import { ContextMenu } from '../../ContextMenu'; import { ContextMenuProps } from '../../ContextMenuItem'; import { EditableView } from '../../EditableView'; -import { DocComponentView, DocFocusOptions, DocumentView, ViewAdjustment } from '../../nodes/DocumentView'; +import { DocComponentView, DocFocusOptions, DocumentView } from '../../nodes/DocumentView'; import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; import { CollectionSubView } from '../CollectionSubView'; import './CollectionSchemaView.scss'; @@ -46,7 +46,7 @@ export class CollectionSchemaView extends CollectionSubView() { private _previewRef: HTMLDivElement | null = null; private _makeNewColumn: boolean = false; - public static _rowHeight: number = 50; + public static _rowHeight: number = 40; public static _minColWidth: number = 150; public static _rowMenuWidth: number = 100; public static _previewDividerWidth: number = 4; @@ -63,6 +63,8 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _newFieldDefault: any = 0; @observable _newFieldType: ColumnType = ColumnType.Number; @observable _menuValue: string = ''; + @observable _filterColumnIndex: number | undefined; + @observable _filterValue: string = ''; get documentKeys() { const docs = this.childDocs; @@ -533,20 +535,18 @@ export class CollectionSchemaView extends CollectionSubView() { 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); + let focusSpeed = options.zoomTime ?? 500; + smoothScroll(focusSpeed, this._mainCont!, localTop[1] + this._mainCont!.scrollTop, options.easeFunc); + return focusSpeed; } } - 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)), - }); + return undefined; }; isChildContentActive = () => @@ -574,7 +574,7 @@ export class CollectionSchemaView extends CollectionSubView() { this._menuOptions.length > 0 && this._menuValue.length > 0 ? this.setKey(this._menuOptions[0]) : action(() => (this._makeNewField = true))(); break; case 'Escape': - this.toggleColumnMenu(this._columnMenuIndex); + this.closeColumnMenu(); break; } }; @@ -586,25 +586,63 @@ export class CollectionSchemaView extends CollectionSubView() { } else { this.changeColumnKey(this._columnMenuIndex!, key, defaultVal); } - this.toggleColumnMenu(this._columnMenuIndex); + this.closeColumnMenu(); }; @action - toggleColumnMenu = (index: number | undefined, newCol?: boolean) => { + openColumnMenu = (index: number, newCol: boolean) => { this._makeNewColumn = false; - if (this._columnMenuIndex !== undefined && index === this._columnMenuIndex) { - this._columnMenuIndex = undefined; - } else { - this._columnMenuIndex = index; - this._menuValue = ''; - this._menuOptions = this.documentKeys; - this._makeNewField = false; - this._newFieldWarning = ''; - this._makeNewField = false; - if (newCol) { - this._makeNewColumn = true; - } - } + this._columnMenuIndex = index; + this._menuValue = ''; + this._menuOptions = this.documentKeys; + this._makeNewField = false; + this._newFieldWarning = ''; + this._makeNewField = false; + this._makeNewColumn = newCol; + }; + + @action + closeColumnMenu = () => { + this._columnMenuIndex = undefined; + }; + + @action + openFilterMenu = (index: number) => { + this._filterColumnIndex = index; + this._filterValue = this.getFieldFilters(this.columnKeys[this._filterColumnIndex!]).map(filter => filter.split(':')[1])[0]; + }; + + @action + closeFilterMenu = () => { + this._filterColumnIndex = undefined; + }; + + openContextMenu = (x: number, y: number, index: number) => { + this.closeColumnMenu(); + this.closeFilterMenu(); + ContextMenu.Instance.clearItems(); + ContextMenu.Instance.addItem({ + description: 'Change field', + event: () => { + this.openColumnMenu(index, false); + }, + icon: 'pencil-alt', + }); + ContextMenu.Instance.addItem({ + description: 'Filter field', + event: () => { + this.openFilterMenu(index); + }, + icon: 'filter', + }); + ContextMenu.Instance.addItem({ + description: 'Delete column', + event: () => { + this.removeColumn(index); + }, + icon: 'trash', + }); + ContextMenu.Instance.displayMenu(x, y, undefined, false); }; @action @@ -613,92 +651,156 @@ export class CollectionSchemaView extends CollectionSubView() { this._menuOptions = this.documentKeys.filter(value => value.toLowerCase().includes(this._menuValue.toLowerCase())); }; - @computed get renderColumnMenu() { - const x = this.displayColumnWidths.reduce((total, curr, index) => total + (index < this._columnMenuIndex! ? curr : 0), CollectionSchemaView._rowMenuWidth); + getFieldFilters = (field: string) => { + return StrListCast(this.Document._docFilters).filter(filter => filter.split(':')[0] == field); + }; + + removeFieldFilters = (field: string) => { + this.getFieldFilters(field).forEach(filter => { + Doc.setDocFilter(this.Document, field, filter.split(':')[1], 'remove'); + }); + }; + + onFilterKeyDown = (e: React.KeyboardEvent) => { + switch (e.key) { + case 'Enter': + if (this._filterValue !== '') { + Doc.setDocFilter(this.Document, this.columnKeys[this._filterColumnIndex!], this._filterValue, 'check', false, undefined, false); + } else { + this.removeFieldFilters(this.columnKeys[this._filterColumnIndex!]); + } + this.closeFilterMenu(); + break; + case 'Escape': + this.closeFilterMenu(); + break; + } + }; + + @action + updateFilterSearch = (e: React.ChangeEvent) => { + this._filterValue = e.target.value; + }; + + @computed get newFieldMenu() { return ( -
- e.stopPropagation()} /> - {this._makeNewField ? ( -
-
- { - this._newFieldType = ColumnType.Number; - this._newFieldDefault = 0; - })} - /> - number -
-
- { - this._newFieldType = ColumnType.Boolean; - this._newFieldDefault = false; - })} - /> - boolean -
-
- { - this._newFieldType = ColumnType.String; - this._newFieldDefault = ''; - })} - /> - string -
-
value: {this.fieldDefaultInput}
-
{this._newFieldWarning}
-
{ - if (this.documentKeys.includes(this._menuValue)) { - this._newFieldWarning = 'Field already exists'; - } else if (this._menuValue.length === 0) { - this._newFieldWarning = 'Field cannot be an empty string'; - } else { - this.setKey(this._menuValue, this._newFieldDefault); - } - })}> - done -
-
- ) : ( -
+
+
+ { + this._newFieldType = ColumnType.Number; + this._newFieldDefault = 0; + })} + /> + number +
+
+ { + this._newFieldType = ColumnType.Boolean; + this._newFieldDefault = false; + })} + /> + boolean +
+
+ { + this._newFieldType = ColumnType.String; + this._newFieldDefault = ''; + })} + /> + string +
+
value: {this.fieldDefaultInput}
+
{this._newFieldWarning}
+
{ + if (this.documentKeys.includes(this._menuValue)) { + this._newFieldWarning = 'Field already exists'; + } else if (this._menuValue.length === 0) { + this._newFieldWarning = 'Field cannot be an empty string'; + } else { + this.setKey(this._menuValue, this._newFieldDefault); + } + })}> + done +
+
+ ); + } + + @computed get keysDropdown() { + return ( +
+
{ + e.stopPropagation(); + this._makeNewField = true; + })}> + + new field +
+
+ {this._menuOptions.map(key => (
{ + className="schema-key-search-result" + onPointerDown={e => { e.stopPropagation(); - this._makeNewField = true; - })}> - + new field + this.setKey(key); + }}> + {key}
-
- {this._menuOptions.map(key => ( -
{ - e.stopPropagation(); - this.setKey(key); - }}> - {key} -
- ))} -
-
- )} + ))} +
+
+ ); + } + + @computed get renderColumnMenu() { + const x = this._columnMenuIndex! == -1 ? 0 : this.displayColumnWidths.reduce((total, curr, index) => total + (index < this._columnMenuIndex! ? curr : 0), CollectionSchemaView._rowMenuWidth); + return ( +
+ e.stopPropagation()} /> + {this._makeNewField ? this.newFieldMenu : this.keysDropdown} +
{ + e.stopPropagation(); + this.closeColumnMenu(); + })}> + cancel +
+
+ ); + } + + @computed get renderFilterMenu() { + const x = this.displayColumnWidths.reduce((total, curr, index) => total + (index < this._filterColumnIndex! ? curr : 0), CollectionSchemaView._rowMenuWidth); + return ( +
+ e.stopPropagation()} /> +
{ + e.stopPropagation(); + this.closeFilterMenu(); + })}> + cancel +
); } @@ -722,7 +824,7 @@ export class CollectionSchemaView extends CollectionSubView() {
{ - this.toggleColumnMenu(-1, true); + this.openColumnMenu(-1, true); }}>
@@ -739,12 +841,13 @@ export class CollectionSchemaView extends CollectionSubView() { setSort={this.setSort} removeColumn={this.removeColumn} resizeColumn={this.startResize} - toggleColumnMenu={this.toggleColumnMenu} + openContextMenu={this.openContextMenu} /> ); })}
{this._columnMenuIndex !== undefined && this.renderColumnMenu} + {this._filterColumnIndex !== undefined && this.renderFilterMenu}
e.stopPropagation()}> {this.childDocs.map((doc: Doc, index: number) => { const dataDoc = !doc.isTemplateDoc && !doc.isTemplateForField && !doc.PARAMS ? undefined : this.props.DataDoc; diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index ba63b352b..42626697a 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -5,7 +5,17 @@ import { observer } from 'mobx-react'; import { emptyFunction, setupMoveUpEvents } from '../../../../Utils'; import './CollectionSchemaView.scss'; import { ColumnType } from './CollectionSchemaView'; -import { Colors } from 'browndash-components'; +import { IconButton } from 'browndash-components'; +import { Colors } from '../../global/globalEnums'; +import { ContextMenu } from '../../ContextMenu'; +import { Doc, DocListCast } from '../../../../fields/Doc'; +import { Id } from '../../../../fields/FieldSymbols'; +import { RichTextField } from '../../../../fields/RichTextField'; +import { StrCast } from '../../../../fields/Types'; +import { ImageField } from '../../../../fields/URLField'; +import { DocUtils, Docs } from '../../../documents/Documents'; +import { ContextMenuProps } from '../../ContextMenuItem'; +import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; export interface SchemaColumnHeaderProps { columnKeys: string[]; @@ -16,8 +26,8 @@ export interface SchemaColumnHeaderProps { setSort: (field: string, desc: boolean) => void; removeColumn: (index: number) => void; resizeColumn: (e: any, index: number, left: boolean) => void; - toggleColumnMenu: (index: number | undefined, newCol?: boolean) => void; // dragColumn: (e: any, index: number) => boolean; + openContextMenu: (x: number, y: number, index: number) => void; } @observer @@ -51,21 +61,10 @@ export class SchemaColumnHeader extends React.Component
{this.fieldKey}
-
{ - this.props.toggleColumnMenu(this.props.columnIndex, false); - }}> - +
this.props.openContextMenu(e.clientX, e.clientY, this.props.columnIndex)}> +
-
{ - this.props.removeColumn(this.props.columnIndex); - }}> - -
-
+
-- cgit v1.2.3-70-g09d2 From 61ce7b4d434aff7e642d2af17b8643297f99e4a3 Mon Sep 17 00:00:00 2001 From: mehekj Date: Wed, 15 Mar 2023 18:15:18 -0400 Subject: column drag in progress --- src/client/util/DragManager.ts | 14 +- .../collectionSchema/CollectionSchemaView.scss | 112 ++++++------- .../collectionSchema/CollectionSchemaView.tsx | 40 +++-- .../collectionSchema/SchemaColumnHeader.tsx | 21 ++- .../collectionSchema/SchemaTableCell.tsx | 16 +- .../views/nodes/RecordingBox/RecordingView.tsx | 177 ++++++++++----------- 6 files changed, 197 insertions(+), 183 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index a56f87075..1b413c73b 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -149,10 +149,14 @@ export namespace DragManager { linkDragView: DocumentView; } export class ColumnDragData { - constructor(colKey: SchemaHeaderField) { - this.colKey = colKey; + // constructor(colKey: SchemaHeaderField) { + // this.colKey = colKey; + // } + // colKey: SchemaHeaderField; + constructor(colIndex: number) { + this.colIndex = colIndex; } - colKey: SchemaHeaderField; + colIndex: number; } // used by PDFs,Text,Image,Video,Web to conditionally (if the drop completes) create a text annotation when dragging the annotate button from the AnchorMenu when a text/region selection has been made. // this is pretty clunky and should be rethought out using linkDrag or DocumentDrag @@ -256,8 +260,8 @@ export namespace DragManager { } // drags a column from a schema view - export function StartColumnDrag(ele: HTMLElement, dragData: ColumnDragData, downX: number, downY: number, options?: DragOptions) { - StartDrag([ele], dragData, downX, downY, options); + export function StartColumnDrag(ele: HTMLElement[], dragData: ColumnDragData, downX: number, downY: number, options?: DragOptions) { + StartDrag(ele, dragData, downX, downY, options); } export function SetSnapLines(horizLines: number[], vertLines: number[]) { diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 5eb5cc86d..1853fb589 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -8,6 +8,7 @@ .schema-table { background-color: $white; + cursor: default; .schema-column-menu, .schema-filter-menu { @@ -80,68 +81,70 @@ align-self: center; } } + } - .schema-header-row { - justify-content: flex-end; + .schema-preview-divider { + height: 100%; + background: black; + cursor: ew-resize; + } +} - .row-menu { - display: flex; - justify-content: flex-end; - } +.schema-header-row { + cursor: grab; + justify-content: flex-end; - .schema-column-header { - font-weight: bold; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - padding: 0; - z-index: 1; - - .schema-column-title { - flex-grow: 2; - margin: 5px; - } + .row-menu { + display: flex; + justify-content: flex-end; + } +} - .schema-header-menu { - margin: 5px; - } +.schema-column-header { + background-color: $light-gray; + font-weight: bold; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 0; + z-index: 1; - .schema-column-resizer { - height: 100%; - width: 3px; - cursor: ew-resize; + .schema-column-title { + flex-grow: 2; + margin: 5px; + } - &:hover { - background-color: $light-blue; - } - } + .schema-header-menu { + margin: 5px; + } - .schema-column-resizer.right { - margin-left: 5px; - align-self: flex-end; - } + .schema-column-resizer { + height: 100%; + width: 3px; + cursor: ew-resize; - .schema-column-resizer.left { - margin-right: 5px; - align-self: flex-start; - } - } + &:hover { + background-color: $light-blue; } + } - .schema-header-menu { - display: flex; - flex-direction: row; - } + .schema-column-resizer.right { + margin-left: 5px; + align-self: flex-end; } - .schema-preview-divider { - height: 100%; - background: black; - cursor: ew-resize; + .schema-column-resizer.left { + margin-right: 5px; + align-self: flex-start; } } +.schema-header-menu { + display: flex; + flex-direction: row; +} + .schema-row-wrapper { // max-height: 70px; overflow: hidden; @@ -158,17 +161,18 @@ height: 100%; // max-height: 70px; overflow: auto; +} - .schema-column-header, - .schema-table-cell, - .row-menu { - border: 1px solid $medium-gray; - padding: 5px; - overflow: hidden; - } +.schema-column-header, +.schema-table-cell, +.row-menu { + border: 1px solid $medium-gray; + padding: 5px; + overflow: hidden; } .schema-row { + cursor: default; justify-content: flex-end; background: white; diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index e1c2d989f..b0114a226 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -54,6 +54,7 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _lastSelectedRow: number | undefined; @observable _selectedDocs: ObservableSet = new ObservableSet(); @observable _rowEles: ObservableMap = new ObservableMap(); + @observable _colEles: HTMLDivElement[] = []; @observable _isDragging: boolean = false; @observable _displayColumnWidths: number[] | undefined; @observable _columnMenuIndex: number | undefined; @@ -301,29 +302,32 @@ export class CollectionSchemaView extends CollectionSubView() { this.layoutDoc.columnWidths = new List(currWidths); }; - // @action - // dragColumn = (e: any, index: number) => { - // e.stopPropagation(); - // e.preventDefault(); - // const rect = e.target.getBoundingClientRect(); - // if (e.clientX < rect.x) { - // if (index < 1) return true; - // this.swapColumns(index - 1, index); - // return true; - // } - // if (e.clientX > rect.x + rect.width) { - // if (index === this.columnKeys.length) return true; - // this.swapColumns(index, index + 1); - // return true; - // } - // return false; - // }; + @action + dragColumn = (e: PointerEvent, index: number) => { + const dragData = new DragManager.ColumnDragData(index); + const dragEles = [this._colEles[index]]; + this.childDocs.forEach(doc => { + dragEles.push(this._rowEles.get(doc).children[1].children[index]); + }); + DragManager.StartColumnDrag(dragEles, dragData, e.x, e.y); + + return true; + }; @action addRowRef = (doc: Doc, ref: HTMLDivElement) => { this._rowEles.set(doc, ref); }; + @action + setColRef = (index: number, ref: HTMLDivElement) => { + if (this._colEles.length <= index) { + this._colEles.push(ref); + } else { + this._colEles[index] = ref; + } + }; + @action addDocToSelection = (doc: Doc, extendSelection: boolean, index: number) => { this._selectedDocs.add(doc); @@ -842,6 +846,8 @@ export class CollectionSchemaView extends CollectionSubView() { removeColumn={this.removeColumn} resizeColumn={this.startResize} openContextMenu={this.openContextMenu} + dragColumn={this.dragColumn} + setColRef={this.setColRef} /> ); })} diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 42626697a..e648356f4 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -26,8 +26,9 @@ export interface SchemaColumnHeaderProps { setSort: (field: string, desc: boolean) => void; removeColumn: (index: number) => void; resizeColumn: (e: any, index: number, left: boolean) => void; - // dragColumn: (e: any, index: number) => boolean; + dragColumn: (e: any, index: number) => boolean; openContextMenu: (x: number, y: number, index: number) => void; + setColRef: (index: number, ref: HTMLDivElement) => void; } @observer @@ -47,16 +48,20 @@ export class SchemaColumnHeader extends React.Component } }; - // @action - // onPointerDown = (e: React.PointerEvent) => { - // e.stopPropagation(); - - // setupMoveUpEvents(this, e, e => this.props.dragColumn(e, this.props.columnIndex), emptyFunction, emptyFunction); - // }; + @action + onPointerDown = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, e => this.props.dragColumn(e, this.props.columnIndex), emptyFunction, emptyFunction); + }; render() { return ( -
+
{ + col && this.props.setColRef(this.props.columnIndex, col); + }}>
this.props.resizeColumn(e, this.props.columnIndex, true)}>
{this.fieldKey}
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index 43b7da544..91b292b28 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -48,13 +48,15 @@ export class SchemaTableCell extends React.Component { }; return ( -
- } - height={'auto'} - GetValue={() => Field.toKeyValueString(this.props.Document, this.props.fieldKey)} - SetValue={(value: string) => KeyValueBox.SetField(this.props.Document, this.props.fieldKey, value)} - /> +
+
+ } + GetValue={() => Field.toKeyValueString(this.props.Document, this.props.fieldKey)} + SetValue={(value: string) => KeyValueBox.SetField(this.props.Document, this.props.fieldKey, value)} + editing={this.props.isRowActive() ? undefined : false} + /> +
); } diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx index ec5917b9e..6efe62e0b 100644 --- a/src/client/views/nodes/RecordingBox/RecordingView.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx @@ -1,32 +1,31 @@ import * as React from 'react'; -import "./RecordingView.scss"; -import { useEffect, useRef, useState } from "react"; -import { ProgressBar } from "./ProgressBar" +import './RecordingView.scss'; +import { useEffect, useRef, useState } from 'react'; +import { ProgressBar } from './ProgressBar'; import { MdBackspace } from 'react-icons/md'; import { FaCheckCircle } from 'react-icons/fa'; -import { IconContext } from "react-icons"; +import { IconContext } from 'react-icons'; import { Networking } from '../../../Network'; import { Upload } from '../../../../server/SharedMediaTypes'; import { returnFalse, returnTrue, setupMoveUpEvents } from '../../../../Utils'; import { Presentation, TrackMovements } from '../../../util/TrackMovements'; export interface MediaSegment { - videoChunks: any[], - endTime: number, - startTime: number, - presentation?: Presentation, + videoChunks: any[]; + endTime: number; + startTime: number; + presentation?: Presentation; } interface IRecordingViewProps { - setResult: (info: Upload.AccessPathInfo, presentation?: Presentation) => void - setDuration: (seconds: number) => void - id: string + setResult: (info: Upload.AccessPathInfo, presentation?: Presentation) => void; + setDuration: (seconds: number) => void; + id: string; } const MAXTIME = 100000; export function RecordingView(props: IRecordingViewProps) { - const [recording, setRecording] = useState(false); const recordingTimerRef = useRef(0); const [recordingTimer, setRecordingTimer] = useState(0); // unit is 0.01 second @@ -46,19 +45,16 @@ export function RecordingView(props: IRecordingViewProps) { const [finished, setFinished] = useState(false); const [trackScreen, setTrackScreen] = useState(false); - - const DEFAULT_MEDIA_CONSTRAINTS = { video: { width: 1280, height: 720, - }, audio: { echoCancellation: true, noiseSuppression: true, - sampleRate: 44100 - } + sampleRate: 44100, + }, }; useEffect(() => { @@ -71,12 +67,11 @@ export function RecordingView(props: IRecordingViewProps) { const videoFiles = videos.map((vid, i) => new File(vid.videoChunks, `segvideo${i}.mkv`, { type: vid.videoChunks[0].type, lastModified: Date.now() })); // upload the segments to the server and get their server access paths - const serverPaths: string[] = (await Networking.UploadFilesToServer(videoFiles)) - .map(res => (res.result instanceof Error) ? '' : res.result.accessPaths.agnostic.server) + const serverPaths: string[] = (await Networking.UploadFilesToServer(videoFiles)).map(res => (res.result instanceof Error ? '' : res.result.accessPaths.agnostic.server)); // concat the segments together using post call const result: Upload.AccessPathInfo | Error = await Networking.PostToServer('/concatVideos', serverPaths); - !(result instanceof Error) ? props.setResult(result, concatPres || undefined) : console.error("video conversion failed"); + !(result instanceof Error) ? props.setResult(result, concatPres || undefined) : console.error('video conversion failed'); })(); } }, [videos]); @@ -87,7 +82,9 @@ export function RecordingView(props: IRecordingViewProps) { }, [finished]); // check if the browser supports media devices on first load - useEffect(() => { if (!navigator.mediaDevices) alert('This browser does not support getUserMedia.'); }, []); + useEffect(() => { + if (!navigator.mediaDevices) alert('This browser does not support getUserMedia.'); + }, []); useEffect(() => { let interval: any = null; @@ -102,24 +99,24 @@ export function RecordingView(props: IRecordingViewProps) { }, [recording]); useEffect(() => { - setVideoProgressHelper(recordingTimer) + setVideoProgressHelper(recordingTimer); recordingTimerRef.current = recordingTimer; }, [recordingTimer]); const setVideoProgressHelper = (progress: number) => { const newProgress = (progress / MAXTIME) * 100; setProgress(newProgress); - } + }; const startShowingStream = async (mediaConstraints = DEFAULT_MEDIA_CONSTRAINTS) => { const stream = await navigator.mediaDevices.getUserMedia(mediaConstraints); - videoElementRef.current!.src = ""; + videoElementRef.current!.src = ''; videoElementRef.current!.srcObject = stream; videoElementRef.current!.muted = true; return stream; - } + }; const record = async () => { // don't need to start a new stream every time we start recording a new segment @@ -145,29 +142,28 @@ export function RecordingView(props: IRecordingViewProps) { const nextVideo = { videoChunks, endTime: recordingTimerRef.current, - startTime: videos?.lastElement()?.endTime || 0 + startTime: videos?.lastElement()?.endTime || 0, }; // depending on if a presenation exists, add it to the video const presentation = TrackMovements.Instance.yieldPresentation(); - setVideos(videos => [...videos, (presentation != null && trackScreen) ? { ...nextVideo, presentation } : nextVideo]); + setVideos(videos => [...videos, presentation != null && trackScreen ? { ...nextVideo, presentation } : nextVideo]); } // reset the temporary chunks videoChunks = []; setRecording(false); - } + }; videoRecorder.current.start(200); - } - + }; // if this is called, then we're done recording all the segments const finish = (e: React.PointerEvent) => { e.stopPropagation(); // call stop on the video recorder if active - videoRecorder.current?.state !== "inactive" && videoRecorder.current?.stop(); + videoRecorder.current?.state !== 'inactive' && videoRecorder.current?.stop(); // end the streams (audio/video) to remove recording icon const stream = videoElementRef.current!.srcObject; @@ -178,94 +174,91 @@ export function RecordingView(props: IRecordingViewProps) { // this will call upon progessbar to update videos to be in the correct order setFinished(true); - } + }; const pause = (e: React.PointerEvent) => { e.stopPropagation(); // if recording, then this is just a new segment - videoRecorder.current?.state === "recording" && videoRecorder.current.stop(); - } + videoRecorder.current?.state === 'recording' && videoRecorder.current.stop(); + }; const start = (e: React.PointerEvent) => { - setupMoveUpEvents({}, e, returnTrue, returnFalse, e => { - // start recording if not already recording - if (!videoRecorder.current || videoRecorder.current.state === "inactive") record(); - - return true; // cancels propagation to documentView to avoid selecting it. - }, false, false); - } + setupMoveUpEvents( + {}, + e, + returnTrue, + returnFalse, + e => { + // start recording if not already recording + if (!videoRecorder.current || videoRecorder.current.state === 'inactive') record(); + + return true; // cancels propagation to documentView to avoid selecting it. + }, + false, + false + ); + }; const undoPrevious = (e: React.PointerEvent) => { e.stopPropagation(); setDoUndo(prev => !prev); - } + }; - const handleOnTimeUpdate = () => { playing && setVideoProgressHelper(videoElementRef.current!.currentTime); }; + const handleOnTimeUpdate = () => { + playing && setVideoProgressHelper(videoElementRef.current!.currentTime); + }; const millisecondToMinuteSecond = (milliseconds: number) => { const toTwoDigit = (digit: number) => { - return String(digit).length == 1 ? "0" + digit : digit - } + return String(digit).length == 1 ? '0' + digit : digit; + }; const minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((milliseconds % (1000 * 60)) / 1000); - return toTwoDigit(minutes) + " : " + toTwoDigit(seconds); - } + return toTwoDigit(minutes) + ' : ' + toTwoDigit(seconds); + }; return (
-
-
) -} \ No newline at end of file +
+ ); +} -- cgit v1.2.3-70-g09d2 From 3fed87fe05a70a5ef63ed7989c7a28faee68bf4b Mon Sep 17 00:00:00 2001 From: mehekj Date: Wed, 22 Mar 2023 17:42:28 -0400 Subject: shift enter shortcut to fill column --- .../views/collections/collectionSchema/CollectionSchemaView.scss | 7 +++---- .../views/collections/collectionSchema/CollectionSchemaView.tsx | 7 +++++++ src/client/views/collections/collectionSchema/SchemaRowBox.tsx | 9 ++++++++- .../views/collections/collectionSchema/SchemaTableCell.tsx | 8 +++++++- 4 files changed, 25 insertions(+), 6 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 1853fb589..287e2b01b 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -109,6 +109,8 @@ align-items: center; padding: 0; z-index: 1; + border: 1px solid $medium-gray; + overflow: hidden; .schema-column-title { flex-grow: 2; @@ -146,7 +148,6 @@ } .schema-row-wrapper { - // max-height: 70px; overflow: hidden; } @@ -159,16 +160,14 @@ display: flex; flex-direction: row; height: 100%; - // max-height: 70px; overflow: auto; } -.schema-column-header, .schema-table-cell, .row-menu { border: 1px solid $medium-gray; - padding: 5px; overflow: hidden; + padding: 5px; } .schema-row { diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 4498a2258..48db1467c 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -28,6 +28,7 @@ import { DocumentManager } from '../../../util/DocumentManager'; import { ScriptField } from '../../../../fields/ScriptField'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { IconButton } from 'browndash-components'; +import { KeyValueBox } from '../../nodes/KeyValueBox'; export enum ColumnType { Number, @@ -607,6 +608,12 @@ export class CollectionSchemaView extends CollectionSubView() { this.closeColumnMenu(); }; + setColumnValues = (key: string, value: string) => { + let success: boolean = true; + this.childDocs.forEach(doc => success && KeyValueBox.SetField(doc, key, value)); + return success; + }; + @action openColumnMenu = (index: number, newCol: boolean) => { this._makeNewColumn = false; diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 05197d05f..37999484d 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -120,7 +120,14 @@ export class SchemaRowBox extends ViewBoxBaseComponent() {
{this.schemaView?.columnKeys?.map((key, index) => ( - + this.schemaView?.setColumnValues(field, value) ?? false} + /> ))}
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index d475c3b6f..13e45963e 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -15,6 +15,7 @@ export interface SchemaTableCellProps { fieldKey: string; columnWidth: number; isRowActive: () => boolean | undefined; + setColumnValues: (field: string, value: string) => boolean; } @observer @@ -53,7 +54,12 @@ export class SchemaTableCell extends React.Component { } GetValue={() => Field.toKeyValueString(this.props.Document, this.props.fieldKey)} - SetValue={(value: string) => KeyValueBox.SetField(this.props.Document, this.props.fieldKey, value)} + SetValue={(value: string, shiftDown?: boolean, enterKey?: boolean) => { + if (shiftDown && enterKey) { + this.props.setColumnValues(this.props.fieldKey, value); + } + return KeyValueBox.SetField(this.props.Document, this.props.fieldKey, value); + }} editing={this.props.isRowActive() ? undefined : false} />
-- cgit v1.2.3-70-g09d2 From 3131630ba45444ca52e1db0df4b1649c1770206a Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 23 Mar 2023 18:03:52 -0400 Subject: updated add/remove column in schema view to fit UI better and change css to truncate field name. changed min col width to 25. --- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- .../collectionSchema/CollectionSchemaView.scss | 2 ++ .../collectionSchema/CollectionSchemaView.tsx | 29 ++++++++-------------- .../collectionSchema/SchemaColumnHeader.tsx | 15 ++--------- 4 files changed, 16 insertions(+), 32 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index c80bafe26..3a8edb1a5 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1358,7 +1358,7 @@ export class CollectionFreeFormView extends CollectionSubView { const pt = this.getTransform().transformPoint(NumCast(doc.x), NumCast(doc.y)); doc.x = pt[0]; diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 287e2b01b..c96773298 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -115,6 +115,8 @@ .schema-column-title { flex-grow: 2; margin: 5px; + overflow: hidden; + min-width: 20%; } .schema-header-menu { diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index b97a2393d..d92ccc344 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -38,7 +38,7 @@ export enum ColumnType { Image, } -const defaultColumnKeys: string[] = ['title', 'type', 'author', 'creationDate', 'links']; +const defaultColumnKeys: string[] = ['title', 'type', 'author', 'creationDate', 'text']; @observer export class CollectionSchemaView extends CollectionSubView() { @@ -49,7 +49,7 @@ export class CollectionSchemaView extends CollectionSubView() { private _makeNewColumn: boolean = false; public static _rowHeight: number = 40; - public static _minColWidth: number = 150; + public static _minColWidth: number = 25; public static _rowMenuWidth: number = 100; public static _previewDividerWidth: number = 4; @@ -207,16 +207,13 @@ export class CollectionSchemaView extends CollectionSubView() { this.addNewKey(key, defaultVal); } - let currWidths = [...this.storedColumnWidths]; - const newColWidth = this.tableWidth / (currWidths.length + 1); - currWidths = currWidths.map(w => { - const proportion = w / (this.tableWidth - CollectionSchemaView._rowMenuWidth); - return proportion * (this.tableWidth - CollectionSchemaView._rowMenuWidth - newColWidth); - }); + const newColWidth = this.tableWidth / (this.storedColumnWidths.length + 1); + const currWidths = this.storedColumnWidths.slice(); currWidths.splice(0, 0, newColWidth); - this.layoutDoc.columnWidths = new List(currWidths); + const newDesiredTableWidth = currWidths.reduce((w, cw) => w + cw, 0); + this.layoutDoc.columnWidths = new List(currWidths.map(w => (w / newDesiredTableWidth) * (this.tableWidth - CollectionSchemaView._rowMenuWidth))); - let currKeys = [...this.columnKeys]; + let currKeys = this.columnKeys.slice(); currKeys.splice(0, 0, key); this.layoutDoc.columnKeys = new List(currKeys); }; @@ -230,16 +227,12 @@ export class CollectionSchemaView extends CollectionSubView() { @action removeColumn = (index: number) => { if (this.columnKeys.length === 1) return; - let currWidths = [...this.storedColumnWidths]; - const removedColWidth = currWidths[index]; - currWidths = currWidths.map(w => { - const proportion = w / (this.tableWidth - CollectionSchemaView._rowMenuWidth - removedColWidth); - return proportion * (this.tableWidth - CollectionSchemaView._rowMenuWidth); - }); + const currWidths = this.storedColumnWidths.slice(); currWidths.splice(index, 1); - this.layoutDoc.columnWidths = new List(currWidths); + const newDesiredTableWidth = currWidths.reduce((w, cw) => w + cw, 0); + this.layoutDoc.columnWidths = new List(currWidths.map(w => (w / newDesiredTableWidth) * (this.tableWidth - CollectionSchemaView._rowMenuWidth))); - let currKeys = [...this.columnKeys]; + let currKeys = this.columnKeys.slice(); currKeys.splice(index, 1); this.layoutDoc.columnKeys = new List(currKeys); }; diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index e648356f4..fffe0f4b4 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -1,21 +1,10 @@ import React = require('react'); import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, observable } from 'mobx'; +import { action, computed } from 'mobx'; import { observer } from 'mobx-react'; import { emptyFunction, setupMoveUpEvents } from '../../../../Utils'; -import './CollectionSchemaView.scss'; -import { ColumnType } from './CollectionSchemaView'; -import { IconButton } from 'browndash-components'; import { Colors } from '../../global/globalEnums'; -import { ContextMenu } from '../../ContextMenu'; -import { Doc, DocListCast } from '../../../../fields/Doc'; -import { Id } from '../../../../fields/FieldSymbols'; -import { RichTextField } from '../../../../fields/RichTextField'; -import { StrCast } from '../../../../fields/Types'; -import { ImageField } from '../../../../fields/URLField'; -import { DocUtils, Docs } from '../../../documents/Documents'; -import { ContextMenuProps } from '../../ContextMenuItem'; -import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; +import './CollectionSchemaView.scss'; export interface SchemaColumnHeaderProps { columnKeys: string[]; -- cgit v1.2.3-70-g09d2 From 8cbe8e5a1375e9e762b4893a2af71e4b2d22f11d Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 23 Mar 2023 19:15:09 -0400 Subject: more adjustments to schema column resizing. --- .../collections/collectionSchema/CollectionSchemaView.scss | 13 +++++++++++-- .../collections/collectionSchema/CollectionSchemaView.tsx | 4 ++-- 2 files changed, 13 insertions(+), 4 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index c96773298..55f320f14 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -110,7 +110,7 @@ padding: 0; z-index: 1; border: 1px solid $medium-gray; - overflow: hidden; + //overflow: hidden; .schema-column-title { flex-grow: 2; @@ -136,11 +136,15 @@ .schema-column-resizer.right { margin-left: 5px; align-self: flex-end; + background-color: red; + display: none; } .schema-column-resizer.left { - margin-right: 5px; + min-width: 5px; + transform: translate(-3px, 0px); align-self: flex-start; + background-color: $medium-gray; } } @@ -155,6 +159,7 @@ .schema-header-row { background-color: $light-gray; + overflow: hidden; } .schema-header-row, @@ -165,6 +170,10 @@ overflow: auto; } +.schema-header-row > .schema-column-header:nth-child(2) > .left { + display: none; +} + .schema-table-cell, .row-menu { border: 1px solid $medium-gray; diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 4fc4c4881..d079bf839 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -266,8 +266,8 @@ export class CollectionSchemaView extends CollectionSubView() { change = this._displayColumnWidths[shrinking] - CollectionSchemaView._minColWidth; } - this._displayColumnWidths[shrinking] -= change; - this._displayColumnWidths[growing] += change; + this._displayColumnWidths[shrinking] -= change * this.props.ScreenToLocalTransform().Scale; + this._displayColumnWidths[growing] += change * this.props.ScreenToLocalTransform().Scale; return false; } -- cgit v1.2.3-70-g09d2 From e4e1e346d2d0959336406edfda79c46b45787d25 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 23 Mar 2023 19:18:33 -0400 Subject: got rid of right resizer in schema view columns --- .../collections/collectionSchema/CollectionSchemaView.scss | 7 ------- .../collections/collectionSchema/CollectionSchemaView.tsx | 11 ++++------- .../views/collections/collectionSchema/SchemaColumnHeader.tsx | 6 ++---- 3 files changed, 6 insertions(+), 18 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 55f320f14..769afbbf6 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -133,13 +133,6 @@ } } - .schema-column-resizer.right { - margin-left: 5px; - align-self: flex-end; - background-color: red; - display: none; - } - .schema-column-resizer.left { min-width: 5px; transform: translate(-3px, 0px); diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index d079bf839..28e0b07a4 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -238,25 +238,22 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - startResize = (e: any, index: number, left: boolean) => { + startResize = (e: any, index: number) => { this._displayColumnWidths = this.storedColumnWidths; - setupMoveUpEvents(this, e, (e, delta) => this.resizeColumn(e, index, left), this.finishResize, emptyFunction); + setupMoveUpEvents(this, e, (e, delta) => this.resizeColumn(e, index), this.finishResize, emptyFunction); }; @action - resizeColumn = (e: PointerEvent, index: number, left: boolean) => { + resizeColumn = (e: PointerEvent, index: number) => { if (this._displayColumnWidths) { let shrinking; let growing; let change = e.movementX; - if (left && index !== 0) { + if (index !== 0) { growing = change < 0 ? index : index - 1; shrinking = change < 0 ? index - 1 : index; - } else if (!left && index !== this.columnKeys.length - 1) { - growing = change > 0 ? index : index + 1; - shrinking = change > 0 ? index + 1 : index; } if (shrinking === undefined || growing === undefined) return true; diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index fffe0f4b4..cbdaeb933 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -14,7 +14,7 @@ export interface SchemaColumnHeaderProps { sortDesc: boolean; setSort: (field: string, desc: boolean) => void; removeColumn: (index: number) => void; - resizeColumn: (e: any, index: number, left: boolean) => void; + resizeColumn: (e: any, index: number) => void; dragColumn: (e: any, index: number) => boolean; openContextMenu: (x: number, y: number, index: number) => void; setColRef: (index: number, ref: HTMLDivElement) => void; @@ -51,7 +51,7 @@ export class SchemaColumnHeader extends React.Component ref={(col: HTMLDivElement | null) => { col && this.props.setColRef(this.props.columnIndex, col); }}> -
this.props.resizeColumn(e, this.props.columnIndex, true)}>
+
this.props.resizeColumn(e, this.props.columnIndex)}>
{this.fieldKey}
@@ -62,8 +62,6 @@ export class SchemaColumnHeader extends React.Component
- -
this.props.resizeColumn(e, this.props.columnIndex, false)}>
); } -- cgit v1.2.3-70-g09d2 From 01ef278b60020d4dafc8f7a217d6de0bf2b3bf89 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 23 Mar 2023 20:18:22 -0400 Subject: fixed schema view to not let its contents be active (selectable/draggable) unless schema itself is active. --- .../collectionSchema/CollectionSchemaView.scss | 2 +- .../collectionSchema/CollectionSchemaView.tsx | 16 ++++++++++++---- src/client/views/nodes/DocumentView.tsx | 2 +- 3 files changed, 14 insertions(+), 6 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 769afbbf6..34e591195 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -175,7 +175,7 @@ } .schema-row { - cursor: default; + cursor: grab; justify-content: flex-end; background: white; diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 28e0b07a4..a5f5ca2ae 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -881,6 +881,10 @@ export class CollectionSchemaView extends CollectionSubView() { ); } + tableWidthFunc = () => this.tableWidth; + rowHeightFunc = () => CollectionSchemaView._rowHeight; + rowClickScriptFunc = () => this.rowOnClickScript; + isContentActive = () => this.props.isSelected() || this.props.isContentActive(); render() { return (
{ this.clearSelection(); })}> @@ -941,8 +948,8 @@ export class CollectionSchemaView extends CollectionSubView() { DataDoc={dataDoc} ContainingCollectionView={this.props.CollectionView} ContainingCollectionDoc={this.Document} - PanelWidth={() => this.tableWidth} - PanelHeight={() => CollectionSchemaView._rowHeight} + PanelWidth={this.tableWidthFunc} + PanelHeight={this.rowHeightFunc} styleProvider={DefaultStyleProvider} focus={this.focusDocument} docFilters={this.childDocFilters} @@ -951,13 +958,14 @@ export class CollectionSchemaView extends CollectionSubView() { rootSelected={this.rootSelected} ScreenToLocalTransform={Transform.Identity} bringToFront={emptyFunction} - isContentActive={this.isChildContentActive} + isDocumentActive={this.isContentActive} + isContentActive={emptyFunction} hideDecorations={true} hideTitle={true} hideDocumentButtonBar={true} hideLinkAnchors={true} fitWidth={returnTrue} - onClick={() => this.rowOnClickScript} + onClick={this.rowClickScriptFunc} scriptContext={this} />
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index f34ac2b44..d7a61a797 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -319,7 +319,7 @@ export class DocumentViewInternal extends DocComponent Date: Tue, 28 Mar 2023 14:23:17 -0400 Subject: numerous changes to try to simplify event handling in DocumentView - got rid of isContentActive in DocComponent since it's in DocumentView. Including adding 'enableDragWhenActive' , 'onClickScriptDisable', --- src/Utils.ts | 17 +- src/client/documents/Documents.ts | 3 +- src/client/util/CurrentUserUtils.ts | 12 +- src/client/views/DocComponent.tsx | 13 -- src/client/views/DocumentDecorations.tsx | 8 +- src/client/views/InkingStroke.tsx | 2 +- src/client/views/MainView.tsx | 8 +- src/client/views/StyleProvider.tsx | 4 +- .../views/collections/CollectionStackingView.tsx | 2 + src/client/views/collections/TabDocView.tsx | 4 +- src/client/views/collections/TreeView.tsx | 6 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 100 +-------- .../collectionLinear/CollectionLinearView.scss | 10 +- .../collectionLinear/CollectionLinearView.tsx | 18 +- .../collectionSchema/CollectionSchemaView.scss | 3 +- .../collectionSchema/CollectionSchemaView.tsx | 46 ++-- .../collections/collectionSchema/SchemaRowBox.tsx | 8 +- src/client/views/global/globalCssVariables.scss | 3 +- .../views/global/globalCssVariables.scss.d.ts | 2 +- src/client/views/nodes/ColorBox.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 238 ++++----------------- src/client/views/nodes/FunctionPlotBox.tsx | 2 +- src/client/views/nodes/KeyValueBox.tsx | 15 +- src/client/views/nodes/KeyValuePair.tsx | 9 +- src/client/views/nodes/LinkBox.tsx | 9 +- src/client/views/nodes/ScriptingBox.tsx | 4 +- src/client/views/nodes/WebBox.tsx | 2 +- src/client/views/nodes/button/FontIconBox.scss | 10 +- src/client/views/nodes/button/FontIconBox.tsx | 6 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 9 +- src/client/views/nodes/trails/PresBox.tsx | 4 +- src/client/views/pdf/PDFViewer.tsx | 9 - src/fields/Doc.ts | 2 +- src/fields/ScriptField.ts | 2 +- 34 files changed, 171 insertions(+), 421 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/Utils.ts b/src/Utils.ts index ae1478943..0c7deaf5d 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -8,8 +8,12 @@ import { Message } from './server/Message'; import Color = require('color'); export namespace Utils { + export let CLICK_TIME = 300; export let DRAG_THRESHOLD = 4; export let SNAP_THRESHOLD = 10; + export function isClick(x: number, y: number, downX: number, downY: number, downTime: number) { + return Date.now() - downTime < Utils.CLICK_TIME && Math.abs(x - downX) < Utils.DRAG_THRESHOLD && Math.abs(y - downY) < Utils.DRAG_THRESHOLD; + } export function readUploadedFileAsText(inputFile: File) { const temporaryFileReader = new FileReader(); @@ -509,11 +513,22 @@ export function returnTrue() { return true; } +export function returnAlways(): 'always' { + return 'always'; +} +export function returnNever(): 'never' { + return 'never'; +} + +export function returnDefault(): 'default' { + return 'default'; +} + export function returnFalse() { return false; } -export function returnAll() { +export function returnAll(): 'all' { return 'all'; } diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 2bc1b5b1d..c484db0db 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -230,6 +230,7 @@ export class DocumentOptions { contextMenuIcons?: List; defaultDoubleClick?: 'ignore' | 'default'; // ignore double clicks, or deafult (undefined) means open document full screen waitForDoubleClickToClick?: 'always' | 'never' | 'default'; // whether a click function wait for double click to expire. 'default' undefined = wait only if there's a click handler, "never" = never wait, "always" = alway wait + enableDragWhenActive?: boolean; dontUndo?: boolean; // whether button clicks should be undoable (this is set to true for Undo/Redo/and sidebar buttons that open the siebar panel) description?: string; // added for links layout?: string | Doc; // default layout string for a document @@ -587,7 +588,7 @@ export namespace Docs { DocumentType.FONTICON, { layout: { view: FontIconBox, dataField: 'icon' }, - options: { defaultDoubleClick: 'ignore', waitForDoubleClickToClick: 'never', hideLinkButton: true, _width: 40, _height: 40 }, + options: { defaultDoubleClick: 'ignore', waitForDoubleClickToClick: 'never', enableDragWhenActive: true, hideLinkButton: true, _width: 40, _height: 40 }, }, ], [ diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 814b7b072..b21f53221 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -62,7 +62,7 @@ export class CurrentUserUtils { const requiredTypeNameFields:{btnOpts:DocumentOptions, templateOpts:DocumentOptions, template:(opts:DocumentOptions) => Doc}[] = [ { btnOpts: { title: "slide", icon: "address-card" }, - templateOpts: { _width: 400, _height: 300, title: "slideView", childDocumentsActive: true, _xMargin: 3, _yMargin: 3, system: true }, + templateOpts: { _width: 400, _height: 300, title: "slideView", _xMargin: 3, _yMargin: 3, system: true }, template: (opts:DocumentOptions) => Docs.Create.MultirowDocument( [ Docs.Create.MulticolumnDocument([], { title: "data", _height: 200, system: true }), @@ -95,7 +95,7 @@ export class CurrentUserUtils { const reqdOpts:DocumentOptions = { title: "Experimental Tools", _xMargin: 0, _showTitle: "title", _chromeHidden: true, - _stayInCollection: true, _hideContextMenu: true, _forceActive: true, system: true, childDocumentsActive: true, + _stayInCollection: true, _hideContextMenu: true, _forceActive: true, system: true, _autoHeight: true, _width: 500, _height: 300, _fitWidth: true, _columnWidth: 35, ignoreClick: true, _lockedPosition: true, }; const reqdScripts = { dropConverter : "convertToButtons(dragData)" }; @@ -184,10 +184,10 @@ export class CurrentUserUtils { case DocumentType.IMG : creator = imageBox; break; case DocumentType.FONTICON: creator = fontBox; break; } - const allopts = {system: true, ...opts}; + const allopts = {system: true, onClickScriptDisable: "never", ...opts}; return DocUtils.AssignScripts( (curIcon?.iconTemplate === opts.iconTemplate ? DocUtils.AssignOpts(curIcon, allopts):undefined) ?? ((templateIconsDoc[iconFieldName] = MakeTemplate(creator(allopts), true, iconFieldName, templateField))), - {onClick:"deiconifyView(documentView)", onDoubleClick: "deiconifyViewToLightbox(documentView)"}); + {onClick:"deiconifyView(documentView)", onDoubleClick: "deiconifyViewToLightbox(documentView)", }); }; const labelBox = (opts: DocumentOptions, data?:string) => Docs.Create.LabelDocument({ textTransform: "unset", letterSpacing: "unset", _singleLine: false, _minFontSize: 14, _maxFontSize: 24, borderRounding: "5px", _width: 150, _height: 70, _xPadding: 10, _yPadding: 10, ...opts @@ -314,7 +314,7 @@ export class CurrentUserUtils { const creatorBtns = CurrentUserUtils.creatorBtnDescriptors(doc).map((reqdOpts) => { const btn = dragCreatorDoc ? DocListCast(dragCreatorDoc.data).find(doc => doc.title === reqdOpts.title): undefined; const opts:DocumentOptions = {...OmitKeys(reqdOpts, ["funcs", "scripts", "backgroundColor"]).omit, - _nativeWidth: 50, _nativeHeight: 50, _width: 35, _height: 35, _hideContextMenu: true, _stayInCollection: true, + _width: 35, _height: 35, _hideContextMenu: true, _stayInCollection: true, btnType: ButtonType.ToolButton, backgroundColor: reqdOpts.backgroundColor ?? Colors.DARK_GRAY, color: Colors.WHITE, system: true, _removeDropProperties: new List(["_stayInCollection"]), }; @@ -324,7 +324,7 @@ export class CurrentUserUtils { const reqdOpts:DocumentOptions = { title: "Basic Item Creators", _showTitle: "title", _xMargin: 0, _stayInCollection: true, _hideContextMenu: true, _chromeHidden: true, system: true, _autoHeight: true, _width: 500, _height: 300, _fitWidth: true, _columnWidth: 40, ignoreClick: true, _lockedPosition: true, _forceActive: true, - childDocumentsActive: true, childDropAction: 'alias' + childDropAction: 'alias' }; const reqdScripts = { dropConverter: "convertToButtons(dragData)" }; return DocUtils.AssignScripts(DocUtils.AssignOpts(dragCreatorDoc, reqdOpts, creatorBtns) ?? Docs.Create.MasonryDocument(creatorBtns, reqdOpts), reqdScripts); diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index 0b92fd864..9fc1487a0 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -82,12 +82,6 @@ export function ViewBoxBaseComponent

() { return this.props.fieldKey; } - isContentActive = (outsideReaction?: boolean) => - this.props.isContentActive?.() === false - ? false - : Doc.ActiveTool !== InkTool.None || this.props.isContentActive?.() || this.props.Document.forceActive || this.props.isSelected(outsideReaction) || this.props.rootSelected(outsideReaction) - ? true - : undefined; protected _multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer; } return Component; @@ -135,13 +129,6 @@ export function ViewBoxAnnotatableComponent

() isAnyChildContentActive = () => this._isAnyChildContentActive; - isContentActive = (outsideReaction?: boolean) => - this.props.isContentActive?.() === false - ? false - : Doc.ActiveTool !== InkTool.None || this.props.isContentActive?.() || this.props.Document.forceActive || this.props.isSelected(outsideReaction) || this.props.rootSelected(outsideReaction) || this.isAnyChildContentActive() - ? true - : undefined; - lookupField = (field: string) => ScriptCast((this.layoutDoc as any).lookupField)?.script.run({ self: this.layoutDoc, data: this.rootDoc, field: field }).result; protected _multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer; diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 2d2d3c2f6..985e6f88f 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -916,9 +916,11 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P pointerEvents: 'none', }}> {this._isRotating ? null : ( -

e.preventDefault()}> - } isCircle={true} hoverStyle={'lighten'} backgroundColor={Colors.DARK_GRAY} color={Colors.LIGHT_GRAY} /> -
+ tap to set rotate center, drag to rotate
}> +
e.preventDefault()}> + } isCircle={true} hoverStyle={'lighten'} backgroundColor={Colors.DARK_GRAY} color={Colors.LIGHT_GRAY} /> +
+ )}
{!this._showRotCenter ? null : ( diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index a085b69a5..e3642fdaf 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -473,7 +473,7 @@ export class InkingStroke extends ViewBoxBaseComponent() { dontRegisterView={true} noSidebar={true} dontScale={true} - isContentActive={this.isContentActive} + isContentActive={this.props.isContentActive} />
)} diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index c84d204d5..f5adc17d0 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -40,7 +40,7 @@ import { DashboardView } from './DashboardView'; import { DictationOverlay } from './DictationOverlay'; import { DocumentDecorations } from './DocumentDecorations'; import { GestureOverlay } from './GestureOverlay'; -import { DASHBOARD_SELECTOR_HEIGHT, LEFT_MENU_WIDTH } from './global/globalCssVariables.scss'; +import { TOPBAR_HEIGHT, LEFT_MENU_WIDTH } from './global/globalCssVariables.scss'; import { Colors } from './global/globalEnums'; import { KeyManager } from './GlobalKeyHandler'; import { InkTranscription } from './InkTranscription'; @@ -86,7 +86,7 @@ export class MainView extends React.Component { return this._hideUI ? 0 : 27; } // 27 comes form lm.config.defaultConfig.dimensions.headerHeight in goldenlayout.js @computed private get topOfDashUI() { - return this._hideUI || LightboxView.LightboxDoc ? 0 : Number(DASHBOARD_SELECTOR_HEIGHT.replace('px', '')); + return this._hideUI || LightboxView.LightboxDoc ? 0 : Number(TOPBAR_HEIGHT.replace('px', '')); } @computed private get topOfHeaderBarDoc() { return this.topOfDashUI; @@ -872,7 +872,7 @@ export class MainView extends React.Component { @computed get docButtons() { return !Doc.MyDockedBtns ? null : ( -
+
dv.rootDoc.showSnapLines) ? null : (
{SnappingManager.horizSnapLines().map(l => ( diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 1b5eb3342..faaa4e1f9 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -89,6 +89,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt doc && BoolCast(doc._lockedPosition); const backgroundCol = () => props?.styleProvider?.(doc, props, StyleProp.BackgroundColor); @@ -200,7 +201,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt, props: Opt { ContainingCollectionDoc={undefined} onBrowseClick={MainView.Instance.exploreMode} isContentActive={returnTrue} + isDocumentActive={returnFalse} PanelWidth={this.PanelWidth} PanelHeight={this.PanelHeight} styleProvider={DefaultStyleProvider} diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 257428d56..99b7549c0 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -573,6 +573,7 @@ export class TreeView extends React.Component {
)}
    { ); } else if (this.treeViewExpandedView === 'fields') { return ( -
      +
        {this.expandedField}
      ); @@ -903,7 +904,8 @@ export class TreeView extends React.Component { hideDecorationTitle={this.props.treeView.outlineMode} hideResizeHandles={this.props.treeView.outlineMode} styleProvider={this.titleStyleProvider} - onClickScriptDisable="never" + enableDragWhenActive={true} + onClickScriptDisable="never" // tree docViews have a script to show fields, etc. docViewPath={returnEmptyDoclist} treeViewDoc={this.props.treeView.props.Document} addDocument={undefined} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 8104ab1a7..aed3683d4 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -821,9 +821,7 @@ export class CollectionFreeFormView extends CollectionSubView) => { - if (!e.cancelBubble) { - const myTouches = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true); - if (myTouches[0]) { - if (Doc.ActiveTool === InkTool.None) { - if (this.tryDragCluster(e, this._hitCluster)) { - e.stopPropagation(); // doesn't actually stop propagation since all our listeners are listening to events on 'document' however it does mark the event as cancelBubble=true which we test for in the move event handlers - e.preventDefault(); - document.removeEventListener('pointermove', this.onPointerMove); - return; - } - // TODO: nda - this allows us to pan collections with finger -> only want to do this when collection is selected' - this.pan(myTouches[0]); - } - } - // e.stopPropagation(); - e.preventDefault(); - } - }; - - handle2PointersMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent) => { - // pinch zooming - if (!e.cancelBubble) { - const myTouches = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true); - const pt1 = myTouches[0]; - const pt2 = myTouches[1]; - - if (this.prevPoints.size === 2) { - const oldPoint1 = this.prevPoints.get(pt1.identifier); - const oldPoint2 = this.prevPoints.get(pt2.identifier); - if (oldPoint1 && oldPoint2) { - const dir = InteractionUtils.Pinching(pt1, pt2, oldPoint1, oldPoint2); - - // if zooming, zoom - if (dir !== 0) { - const d1 = Math.sqrt(Math.pow(pt1.clientX - oldPoint1.clientX, 2) + Math.pow(pt1.clientY - oldPoint1.clientY, 2)); - const d2 = Math.sqrt(Math.pow(pt2.clientX - oldPoint2.clientX, 2) + Math.pow(pt2.clientY - oldPoint2.clientY, 2)); - const centerX = Math.min(pt1.clientX, pt2.clientX) + Math.abs(pt2.clientX - pt1.clientX) / 2; - const centerY = Math.min(pt1.clientY, pt2.clientY) + Math.abs(pt2.clientY - pt1.clientY) / 2; - - // calculate the raw delta value - const rawDelta = dir * (d1 + d2); - - // this floors and ceils the delta value to prevent jitteriness - const delta = Math.sign(rawDelta) * Math.min(Math.abs(rawDelta), 8); - this.zoom(centerX, centerY, delta * window.devicePixelRatio); - this.prevPoints.set(pt1.identifier, pt1); - this.prevPoints.set(pt2.identifier, pt2); - } - // this is not zooming. derive some form of panning from it. - else { - // use the centerx and centery as the "new mouse position" - const centerX = Math.min(pt1.clientX, pt2.clientX) + Math.abs(pt2.clientX - pt1.clientX) / 2; - const centerY = Math.min(pt1.clientY, pt2.clientY) + Math.abs(pt2.clientY - pt1.clientY) / 2; - // const transformed = this.getTransform().inverse().transformPoint(centerX, centerY); - - this._lastX = centerX; - this._lastY = centerY; - } - } - } - // e.stopPropagation(); - e.preventDefault(); - } - }; - - @action - handle2PointersDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent) => { - if (this.props.isContentActive(true)) { - // const pt1: React.Touch | null = e.targetTouches.item(0); - // const pt2: React.Touch | null = e.targetTouches.item(1); - // // if (!pt1 || !pt2) return; - const myTouches = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true); - const pt1 = myTouches[0]; - const pt2 = myTouches[1]; - if (pt1 && pt2) { - const centerX = Math.min(pt1.clientX, pt2.clientX) + Math.abs(pt2.clientX - pt1.clientX) / 2; - const centerY = Math.min(pt1.clientY, pt2.clientY) + Math.abs(pt2.clientY - pt1.clientY) / 2; - this._lastX = centerX; - this._lastY = centerY; - - this.removeMoveListeners(); - this.addMoveListeners(); - this.removeEndListeners(); - this.addEndListeners(); - e.stopPropagation(); - } - } - }; - cleanUpInteractions = () => { this.removeMoveListeners(); this.removeEndListeners(); @@ -1637,7 +1545,11 @@ export class CollectionFreeFormView extends CollectionSubView 5 + (this.layoutDoc.linearViewIsExpanded ? this.childDocs.length * this.rootDoc[HeightSym]() : 10), + () => 5 + this.dimension() + (this.layoutDoc.linearViewIsExpanded ? this.childDocs.filter(doc => !doc.hidden).reduce((tot, doc) => (doc[WidthSym]() || this.dimension()) + tot + 4, 0) : 0), width => this.childDocs.length && (this.layoutDoc._width = width), { fireImmediately: true } ); @@ -180,10 +178,10 @@ export class CollectionLinearView extends CollectionSubView() { ref={r => (dref = r || undefined)} style={{ pointerEvents: 'all', - width: nested ? undefined : NumCast(doc._width), - height: nested ? undefined : NumCast(doc._height), - marginLeft: !nested ? 2.5 : 0, - marginRight: !nested ? 2.5 : 0, + width: NumCast(doc._width), + height: NumCast(doc._height), + marginLeft: 2, + marginRight: 2, // width: NumCast(pair.layout._width), // height: NumCast(pair.layout._height), }}> @@ -199,7 +197,7 @@ export class CollectionLinearView extends CollectionSubView() { rootSelected={this.props.isSelected} removeDocument={this.props.removeDocument} ScreenToLocalTransform={docXf} - PanelWidth={nested ? doc[WidthSym] : this.dimension} + PanelWidth={doc[WidthSym]} PanelHeight={nested || doc._height ? doc[HeightSym] : this.dimension} renderDepth={this.props.renderDepth + 1} dontRegisterView={BoolCast(this.rootDoc.childDontRegisterViews)} @@ -236,7 +234,7 @@ export class CollectionLinearView extends CollectionSubView() { return (
      -
      +
      {!this.props.Document.linearViewExpandable ? null : ( {isExpanded ? 'Close' : 'Open'}
      } placement="top"> {menuOpener} diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 34e591195..1ef2fb4ef 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -8,7 +8,8 @@ .schema-table { background-color: $white; - cursor: default; + cursor: grab; + overflow: scroll; .schema-column-menu, .schema-filter-menu { diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 60202a19e..d47c9762c 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -9,7 +9,7 @@ import { RichTextField } from '../../../../fields/RichTextField'; import { listSpec } from '../../../../fields/Schema'; import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../../fields/Types'; import { ImageField } from '../../../../fields/URLField'; -import { emptyFunction, returnEmptyDoclist, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../Utils'; +import { emptyFunction, returnDefault, returnEmptyDoclist, returnEmptyString, returnFalse, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../Utils'; import { Docs, DocUtils } from '../../../documents/Documents'; import { DocumentManager } from '../../../util/DocumentManager'; import { DragManager } from '../../../util/DragManager'; @@ -46,7 +46,7 @@ export class CollectionSchemaView extends CollectionSubView() { public static _rowHeight: number = 40; public static _minColWidth: number = 25; - public static _rowMenuWidth: number = 100; + public static _rowMenuWidth: number = 60; public static _previewDividerWidth: number = 4; @computed get _selectedDocs() { @@ -364,7 +364,11 @@ export class CollectionSchemaView extends CollectionSubView() { this.dataDoc[this.fieldKey ?? 'data'] = new List([...removed, ...draggedDocs, ...pushedDocs]); this.setSort(undefined); SelectionManager.DeselectAll(); - setTimeout(() => draggedDocs.forEach(doc => DocumentManager.Instance.AddViewRenderedCb(doc, dv => dv.select(true))), 100); + draggedDocs.forEach(doc => { + const draggedView = DocumentManager.Instance.getFirstDocumentView(doc); + if (draggedView) DocumentManager.Instance.RemoveView(draggedView); + DocumentManager.Instance.AddViewRenderedCb(doc, dv => dv.select(true)); + }); e.stopPropagation(); return true; } @@ -812,26 +816,17 @@ export class CollectionSchemaView extends CollectionSubView() { previewWidthFunc = () => this.previewWidth; render() { return ( -
      { - this.createDashEventsTarget(ele); - }} - onPointerDown={e => { - // this is analogous to the panning code for a freeform view. - // however, schema views don't pan so it does nothing. but it does eat the pointerDown event - // if the content is active to prevent the schema from being dragged - this.isContentActive() && setupMoveUpEvents(this, e, returnFalse, emptyFunction, emptyFunction, false); - }} - onDrop={this.onExternalDrop.bind(this)}> -
      +
      this.createDashEventsTarget(ele)} onDrop={this.onExternalDrop.bind(this)}> +
      this.props.isContentActive() && e.stopPropagation()} + ref={r => { + // prevent wheel events from passively propagating up through containers + r?.addEventListener('wheel', (e: WheelEvent) => {}, { passive: false }); + }}>
      -
      { - this._columnMenuIndex && this._columnMenuIndex === -1 ? this.closeColumnMenu() : this.openColumnMenu(-1, true); - }}> +
      (this._columnMenuIndex === -1 ? this.closeColumnMenu() : this.openColumnMenu(-1, true))}>
      @@ -867,8 +862,9 @@ export class CollectionSchemaView extends CollectionSubView() { DataDoc={undefined} fitContentsToBox={returnTrue} dontCenter={'y'} + onClickScriptDisable="always" focus={DocUtils.DefaultFocus} - renderDepth={this.props.renderDepth} + renderDepth={this.props.renderDepth + 1} rootSelected={this.rootSelected} PanelWidth={this.previewWidthFunc} PanelHeight={this.props.PanelHeight} @@ -915,16 +911,22 @@ class CollectionSchemaViewDocs extends React.Component () { return (
      { @@ -103,7 +99,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { className="row-menu" style={{ width: CollectionSchemaView._rowMenuWidth, - pointerEvents: !this.isContentActive() ? 'none' : undefined, + pointerEvents: !this.props.isContentActive() ? 'none' : undefined, }}>
      () { const scaling = Math.min(this.layoutDoc.fitWidth ? 10000 : this.props.PanelHeight() / this.rootDoc[HeightSym](), this.props.PanelWidth() / this.rootDoc[WidthSym]()); return (
      e.button === 0 && !e.ctrlKey && e.stopPropagation()} onClick={e => e.stopPropagation()} style={{ transform: `scale(${scaling})`, width: `${100 * scaling}%`, height: `${100 * scaling}%` }}> diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 541dddd83..9a3e77e6e 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -5,7 +5,6 @@ import { action, computed, IReactionDisposer, observable, reaction, runInAction import { observer } from 'mobx-react'; import { Bounce, Fade, Flip, LightSpeed, Roll, Rotate, Zoom } from 'react-reveal'; import { AclAdmin, AclEdit, AclPrivate, AnimationSym, DataSym, Doc, DocListCast, Field, Opt, StrListCast, WidthSym } from '../../../fields/Doc'; -import { Document } from '../../../fields/documentSchemas'; import { Id } from '../../../fields/FieldSymbols'; import { InkTool } from '../../../fields/InkField'; import { List } from '../../../fields/List'; @@ -15,7 +14,7 @@ import { BoolCast, Cast, DocCast, ImageCast, NumCast, ScriptCast, StrCast } from import { AudioField } from '../../../fields/URLField'; import { GetEffectiveAcl, SharingPermissions, TraceMobx } from '../../../fields/util'; import { MobileInterface } from '../../../mobile/MobileInterface'; -import { emptyFunction, isTargetChildOf as isParentOf, lightOrDark, OmitKeys, returnEmptyString, returnFalse, returnNone, returnTrue, returnVal, simulateMouseClick, Utils } from '../../../Utils'; +import { emptyFunction, isTargetChildOf as isParentOf, lightOrDark, OmitKeys, returnEmptyString, returnFalse, returnTrue, returnVal, simulateMouseClick, Utils } from '../../../Utils'; import { GooglePhotos } from '../../apis/google_docs/GooglePhotosClientUtils'; import { DocServer } from '../../DocServer'; import { Docs, DocUtils } from '../../documents/Documents'; @@ -50,11 +49,9 @@ import { FieldViewProps } from './FieldView'; import { FormattedTextBox } from './formattedText/FormattedTextBox'; import { LinkAnchorBox } from './LinkAnchorBox'; import { RadialMenu } from './RadialMenu'; -import { ScriptingBox } from './ScriptingBox'; import { PresEffect, PresEffectDirection } from './trails'; import { PinProps, PresBox } from './trails/PresBox'; import React = require('react'); -import { KeyValueBox } from './KeyValueBox'; const { Howl } = require('howler'); interface Window { @@ -135,6 +132,7 @@ export interface DocComponentView { componentUI?: (boundsLeft: number, boundsTop: number) => JSX.Element | null; incrementalRendering?: () => void; fitWidth?: () => boolean; // whether the component always fits width (eg, KeyValueBox) + overridePointerEvents?: () => 'all' | 'none' | undefined; // if the conmponent overrides the pointer events for the document fieldKey?: string; annotationKey?: string; getTitle?: () => string; @@ -195,6 +193,9 @@ export interface DocumentViewSharedProps { forceAutoHeight?: boolean; disableDocBrushing?: boolean; // should highlighting for this view be disabled when same document in another view is hovered over. onClickScriptDisable?: 'never' | 'always'; // undefined = only when selected + enableDragWhenActive?: boolean; + waitForDoubleClickToClick?: () => 'never' | 'always' | undefined; + defaultDoubleClick?: () => 'default' | 'ignore' | undefined; pointerEvents?: () => Opt; scriptContext?: any; // can be assigned anything and will be passed as 'scriptContext' to any OnClick script that executes on this document createNewFilterDoc?: () => void; @@ -255,8 +256,6 @@ export class DocumentViewInternal extends DocComponent(); @@ -333,11 +332,12 @@ export class DocumentViewInternal extends DocComponent disposer?.()); } - handle1PointerHoldStart = (e: Event, me: InteractionUtils.MultiTouchEvent): any => { - this.removeMoveListeners(); - this.removeEndListeners(); - document.removeEventListener('pointermove', this.onPointerMove); - document.removeEventListener('pointerup', this.onPointerUp); - if (RadialMenu.Instance._display === false) { - this.addHoldMoveListeners(); - this.addHoldEndListeners(); - this.onRadialMenu(e, me); - const pt = me.touchEvent.touches[me.touchEvent.touches.length - 1]; - this._firstX = pt.pageX; - this._firstY = pt.pageY; - } - }; - - handle1PointerHoldMove = (e: Event, me: InteractionUtils.MultiTouchEvent): void => { - const pt = me.touchEvent.touches[me.touchEvent.touches.length - 1]; - - if (this._firstX === -1 || this._firstY === -1) { - return; - } - if (Math.abs(pt.pageX - this._firstX) > 150 || Math.abs(pt.pageY - this._firstY) > 150) { - this.handle1PointerHoldEnd(e, me); - } - }; - - handle1PointerHoldEnd = (e: Event, me: InteractionUtils.MultiTouchEvent): void => { - this.removeHoldMoveListeners(); - this.removeHoldEndListeners(); - RadialMenu.Instance.closeMenu(); - this._firstX = -1; - this._firstY = -1; - SelectionManager.DeselectAll(); - me.touchEvent.stopPropagation(); - me.touchEvent.preventDefault(); - e.stopPropagation(); - if (RadialMenu.Instance.used) { - this.onContextMenu(undefined, me.touches[0].pageX, me.touches[0].pageY); - } - }; - - handle2PointersDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent) => { - if (!this.props.isSelected()) { - e.stopPropagation(); - e.preventDefault(); - - this.removeMoveListeners(); - this.addMoveListeners(); - this.removeEndListeners(); - this.addEndListeners(); - } - }; - - handle1PointerDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent) => { - SelectionManager.DeselectAll(); - if (this.Document.onPointerDown) return; - const touch = me.touchEvent.changedTouches.item(0); - if (touch) { - this._downX = touch.clientX; - this._downY = touch.clientY; - if ((this.props.isDocumentActive?.() || this.layoutDoc.onDragStart || this.onClickHandler) && !e.ctrlKey && !this.layoutDoc._lockedPosition && !DocListCast(Doc.MyOverlayDocs?.data).includes(this.layoutDoc)) { - e.stopPropagation(); - } - this.removeMoveListeners(); - this.addMoveListeners(); - this.removeEndListeners(); - this.addEndListeners(); - e.stopPropagation(); - } - }; - - handle1PointerMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent) => { - if (e.cancelBubble && this.props.isDocumentActive?.()) { - this.removeMoveListeners(); - } else if (!e.cancelBubble && (this.props.isDocumentActive?.() || this.layoutDoc.onDragStart || this.onClickHandler) && !this.layoutDoc._lockedPosition && !DocListCast(Doc.MyOverlayDocs?.data).includes(this.layoutDoc)) { - const touch = me.touchEvent.changedTouches.item(0); - if (touch && (Math.abs(this._downX - touch.clientX) > 3 || Math.abs(this._downY - touch.clientY) > 3)) { - if (!this.topMost || this.layoutDoc.onDragStart || this.onClickHandler) { - this.cleanUpInteractions(); - this.startDragging(this._downX, this._downY, this.Document.dropAction ? (this.Document.dropAction as any) : e.ctrlKey || e.altKey ? 'alias' : undefined); - } - } - e.stopPropagation(); // doesn't actually stop propagation since all our listeners are listening to events on 'document' however it does mark the event as cancelBubble=true which we test for in the move event handlers - e.preventDefault(); - } - }; - - @action - handle2PointersMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent) => { - const myTouches = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true); - const pt1 = myTouches[0]; - const pt2 = myTouches[1]; - const oldPoint1 = this.prevPoints.get(pt1.identifier); - const oldPoint2 = this.prevPoints.get(pt2.identifier); - const pinching = InteractionUtils.Pinning(pt1, pt2, oldPoint1!, oldPoint2!); - if (pinching !== 0 && oldPoint1 && oldPoint2) { - const dW = Math.abs(pt1.clientX - pt2.clientX) - Math.abs(oldPoint1.clientX - oldPoint2.clientX); - const dH = Math.abs(pt1.clientY - pt2.clientY) - Math.abs(oldPoint1.clientY - oldPoint2.clientY); - const dX = -1 * Math.sign(dW); - const dY = -1 * Math.sign(dH); - - if (dX !== 0 || dY !== 0 || dW !== 0 || dH !== 0) { - const doc = Document(this.props.Document); - const layoutDoc = Document(Doc.Layout(this.props.Document)); - let nwidth = Doc.NativeWidth(layoutDoc); - let nheight = Doc.NativeHeight(layoutDoc); - const width = layoutDoc._width || 0; - const height = layoutDoc._height || (nheight / nwidth) * width; - const scale = this.props.ScreenToLocalTransform().Scale * this.NativeDimScaling; - const actualdW = Math.max(width + dW * scale, 20); - const actualdH = Math.max(height + dH * scale, 20); - doc.x = (doc.x || 0) + dX * (actualdW - width); - doc.y = (doc.y || 0) + dY * (actualdH - height); - const fixedAspect = e.ctrlKey || (nwidth && nheight); - if (fixedAspect && (!nwidth || !nheight)) { - Doc.SetNativeWidth(layoutDoc, (nwidth = layoutDoc._width || 0)); - Doc.SetNativeHeight(layoutDoc, (nheight = layoutDoc._height || 0)); - } - if (nwidth > 0 && nheight > 0) { - if (Math.abs(dW) > Math.abs(dH)) { - if (!fixedAspect) { - Doc.SetNativeWidth(layoutDoc, (actualdW / (layoutDoc._width || 1)) * Doc.NativeWidth(layoutDoc)); - } - layoutDoc._width = actualdW; - if (fixedAspect && !this.props.DocumentView().fitWidth) layoutDoc._height = (nheight / nwidth) * layoutDoc._width; - else layoutDoc._height = actualdH; - } else { - if (!fixedAspect) { - Doc.SetNativeHeight(layoutDoc, (actualdH / (layoutDoc._height || 1)) * Doc.NativeHeight(doc)); - } - layoutDoc._height = actualdH; - if (fixedAspect && !this.props.DocumentView().fitWidth) layoutDoc._width = (nwidth / nheight) * layoutDoc._height; - else layoutDoc._width = actualdW; - } - } else { - dW && (layoutDoc._width = actualdW); - dH && (layoutDoc._height = actualdH); - dH && layoutDoc._autoHeight && (layoutDoc._autoHeight = false); - } - } - e.stopPropagation(); - e.preventDefault(); - } - }; - @action onRadialMenu = (e: Event, me: InteractionUtils.MultiTouchEvent): void => { const pt = me.touchEvent.touches[me.touchEvent.touches.length - 1]; @@ -591,11 +446,12 @@ export class DocumentViewInternal extends DocComponent { - if (!this.Document.ignoreClick && this.props.renderDepth >= 0 && Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD && Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD) { + if (!this.Document.ignoreClick && this.pointerEvents !== 'none' && this.props.renderDepth >= 0 && Utils.isClick(e.clientX, e.clientY, this._downX, this._downY, this._downTime)) { let stopPropagate = true; let preventDefault = true; (this.rootDoc._raiseWhenDragged === undefined ? DragManager.GetRaiseWhenDragged() : this.rootDoc._raiseWhenDragged) && this.props.bringToFront(this.rootDoc); if (this._doubleTap) { + const defaultDblclick = this.props.defaultDoubleClick?.() || this.Document.defaultDoubleClick; if (this.onDoubleClickHandler?.script) { const { clientX, clientY, shiftKey, altKey, ctrlKey } = e; // or we could call e.persist() to capture variables // prettier-ignore @@ -609,7 +465,7 @@ export class DocumentViewInternal extends DocComponent (func().result?.select === true ? this.props.select(false) : ''), 'on double click'); - } else if (!Doc.IsSystem(this.rootDoc) && (this.Document.defaultDoubleClick === undefined || this.Document.defaultDoubleClick === 'default')) { + } else if (!Doc.IsSystem(this.rootDoc) && (defaultDblclick === undefined || defaultDblclick === 'default')) { UndoManager.RunInBatch(() => this.props.addDocTab(this.rootDoc, OpenWhere.lightbox), 'double tap'); SelectionManager.DeselectAll(); Doc.UnBrushDoc(this.props.Document); @@ -649,15 +505,16 @@ export class DocumentViewInternal extends DocComponent 0)) { - // onDragStart implies a button doc that we don't want to select when clicking. RootDocument & isTemplateForField implies we're clicking on part of a template instance and we want to select the whole template, not the part stopPropagate = false; // don't stop propagation for field templates -- want the selection to propagate up to the root document of the template } preventDefault = false; } this._singleClickFunc = clickFunc ?? (() => (this._componentView?.select ?? this.props.select)(e.ctrlKey || e.metaKey, e.shiftKey)); - if ((clickFunc && this.Document.waitForDoubleClickToClick !== 'never') || this.Document.waitForDoubleClickToClick === 'always') { + const waitFordblclick = this.props.waitForDoubleClickToClick?.() ?? this.Document.waitForDoubleClickToClick; + if ((clickFunc && waitFordblclick !== 'never') || waitFordblclick === 'always') { this._doubleClickTimeout && clearTimeout(this._doubleClickTimeout); this._doubleClickTimeout = setTimeout(this._singleClickFunc, 300); } else { @@ -673,55 +530,46 @@ export class DocumentViewInternal extends DocComponent { this._longPressSelector = setTimeout(() => DocumentView.LongPress && this.props.select(false), 1000); - if (!(e.nativeEvent as any).DownDocView) (e.nativeEvent as any).DownDocView = GestureOverlay.DownDocView = this.props.DocumentView(); - if (this.rootDoc.type === DocumentType.INK && Doc.ActiveTool === InkTool.Eraser) return; - // continue if the event hasn't been canceled AND we are using a mouse or this has an onClick or onDragStart function (meaning it is a button document) - if (!(InteractionUtils.IsType(e, InteractionUtils.MOUSETYPE) || [InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool))) { - if (!InteractionUtils.IsType(e, InteractionUtils.PENTYPE)) { - e.stopPropagation(); - if (SelectionManager.IsSelected(this.props.DocumentView(), true) && this.props.Document._viewType !== CollectionViewType.Docking) e.preventDefault(); // goldenlayout needs to be able to move its tabs, so can't preventDefault for it - // TODO: check here for panning/inking - } - return; - } + if (!GestureOverlay.DownDocView) GestureOverlay.DownDocView = this.props.DocumentView(); + this._downX = e.clientX; this._downY = e.clientY; this._downTime = Date.now(); if ((Doc.ActiveTool === InkTool.None || this.props.addDocTab === returnFalse) && !(this.props.Document.rootDocument && !(e.ctrlKey || e.button > 0))) { - // if this is part of a template, let the event go up to the tempalte root unless right/ctrl clicking + // click events stop here if the document is active and no modes are overriding it + // if this is part of a template, let the event go up to the template root unless right/ctrl clicking if ( - (this.props.isDocumentActive?.() || this.layoutDoc.onDragStart) && + // prettier-ignore + this.props.isDocumentActive?.() && !this.props.onBrowseClick?.() && !this.Document.ignoreClick && !e.ctrlKey && - (e.button === 0 || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) && + e.button === 0 && + this.pointerEvents !== 'none' && !DocListCast(Doc.MyOverlayDocs?.data).includes(this.layoutDoc) ) { e.stopPropagation(); // don't preventDefault anymore. Goldenlayout, PDF text selection and RTF text selection all need it to go though //if (this.props.isSelected(true) && this.rootDoc.type !== DocumentType.PDF && this.layoutDoc._viewType !== CollectionViewType.Docking) e.preventDefault(); + + // listen to move events if document content isn't active or document is draggable + if (!this.layoutDoc._lockedPosition && (!this.isContentActive() || this.props.enableDragWhenActive || this.rootDoc.enableDragWhenActive)) { + document.addEventListener('pointermove', this.onPointerMove); + } } - if (this.props.isDocumentActive?.()) { - document.removeEventListener('pointermove', this.onPointerMove); - document.addEventListener('pointermove', this.onPointerMove); - } - document.removeEventListener('pointerup', this.onPointerUp); document.addEventListener('pointerup', this.onPointerUp); } }; @action onPointerMove = (e: PointerEvent): void => { - if (this.layoutDoc._lockedPosition || DocListCast(Doc.MyOverlayDocs?.data).includes(this.layoutDoc)) return; if (InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || [InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) return; - if (((!this.topMost && this.props.isDocumentActive?.()) || this.layoutDoc.onDragStart) && (e.buttons === 1 || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE))) { + if (e.buttons === 1 || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) { if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) { this.cleanupPointerEvents(); this.startDragging(this._downX, this._downY, ((e.ctrlKey || e.altKey) && 'alias') || ((this.Document.dropAction || this.props.dropAction || undefined) as dropActionType)); } - e.stopPropagation(); // doesn't actually stop propagation since all our listeners are listening to events on 'document' however it does mark the event as cancelBubble=true which we test for in the move event handlers - e.preventDefault(); } }; @@ -738,13 +586,11 @@ export class DocumentViewInternal extends DocComponent ); } - @observable _: string = ''; + renderDoc = (style: object) => { TraceMobx(); const thumb = ImageCast(this.layoutDoc['thumb-frozen'], ImageCast(this.layoutDoc.thumb))?.url?.href.replace('.png', '_m.png'); - const isButton = this.props.Document.type === DocumentType.FONTICON; + const background = this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor + ':box'); if (!(this.props.Document instanceof Doc) || GetEffectiveAcl(this.props.Document[DataSym]) === AclPrivate || this.hidden) return null; return ( this.docContents ?? ( @@ -1399,7 +1245,7 @@ export class DocumentViewInternal extends DocComponent { TraceMobx(); const xshift = Math.abs(this.Xshift) <= 0.001 ? this.props.PanelWidth() : undefined; const yshift = Math.abs(this.Yshift) <= 0.001 ? this.props.PanelHeight() : undefined; - const isButton = this.props.Document.type === DocumentType.FONTICON || this.props.Document._viewType === CollectionViewType.Linear; return this.hidden ? null : (
      { ref={this.ContentRef} style={{ transition: this.props.dataTransition, - transform: isButton ? undefined : `translate(${this.centeringX}px, ${this.centeringY}px)`, - width: isButton ? '100%' : xshift ?? `${(100 * (this.props.PanelWidth() - this.Xshift * 2)) / this.props.PanelWidth()}%`, - height: - isButton || this.props.LayoutTemplateString?.includes(KeyValueBox.name) || this.props.forceAutoHeight - ? undefined - : yshift ?? (this.fitWidth ? `${this.panelHeight}px` : `${(((100 * this.effectiveNativeHeight) / this.effectiveNativeWidth) * this.props.PanelWidth()) / this.props.PanelHeight()}%`), + transform: `translate(${this.centeringX}px, ${this.centeringY}px)`, + width: xshift ?? `${(100 * (this.props.PanelWidth() - this.Xshift * 2)) / this.props.PanelWidth()}%`, + height: this.props.forceAutoHeight + ? undefined + : yshift ?? (this.fitWidth ? `${this.panelHeight}px` : `${(((100 * this.effectiveNativeHeight) / this.effectiveNativeWidth) * this.props.PanelWidth()) / this.props.PanelHeight()}%`), }}>
      diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx index 9c31ed3e4..57018fb93 100644 --- a/src/client/views/nodes/KeyValueBox.tsx +++ b/src/client/views/nodes/KeyValueBox.tsx @@ -4,8 +4,9 @@ import { Doc, Field, FieldResult } from '../../../fields/Doc'; import { List } from '../../../fields/List'; import { RichTextField } from '../../../fields/RichTextField'; import { ComputedField, ScriptField } from '../../../fields/ScriptField'; -import { BoolCast, DocCast, NumCast } from '../../../fields/Types'; +import { DocCast, NumCast } from '../../../fields/Types'; import { ImageField } from '../../../fields/URLField'; +import { returnAll, returnAlways, returnTrue } from '../../../Utils'; import { Docs } from '../../documents/Documents'; import { SetupDrag } from '../../util/DragManager'; import { CompiledScript, CompileScript, ScriptOptions } from '../../util/Scripting'; @@ -20,7 +21,6 @@ import './KeyValueBox.scss'; import { KeyValuePair } from './KeyValuePair'; import React = require('react'); import e = require('express'); -import { returnTrue } from '../../../Utils'; export type KVPScript = { script: CompiledScript; @@ -42,8 +42,11 @@ export class KeyValueBox extends React.Component { componentDidMount() { this.props.setContentView?.(this); } - onClickScriptDisable: () => 'always' = () => 'always'; + reverseNativeScaling = returnTrue; + able = returnAlways; fitWidth = returnTrue; + overridePointerEvents = returnAll; + onClickScriptDisable = returnAlways; @observable private rows: KeyValuePair[] = []; @@ -69,9 +72,9 @@ export class KeyValueBox extends React.Component { }; public static CompileKVPScript(value: string): KVPScript | undefined { const eq = value.startsWith('='); - value = eq ? value.substr(1) : value; - const dubEq = value.startsWith(':=') ? 'computed' : value.startsWith(';=') ? 'script' : false; - value = dubEq ? value.substr(2) : value; + value = eq ? value.substring(1) : value; + const dubEq = value.startsWith(':=') ? 'computed' : value.startsWith('$=') ? 'script' : false; + value = dubEq ? value.substring(2) : value; const options: ScriptOptions = { addReturn: true, typecheck: false, params: { this: Doc.name, self: Doc.name, _last_: 'any', _readOnly_: 'boolean' }, editable: false }; if (dubEq) options.typecheck = false; const script = CompileScript(value, options); diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx index c4adc7f1a..94434dce7 100644 --- a/src/client/views/nodes/KeyValuePair.tsx +++ b/src/client/views/nodes/KeyValuePair.tsx @@ -1,19 +1,18 @@ import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; -import { Doc, Field, Opt } from '../../../fields/Doc'; -import { emptyFunction, returnFalse, returnOne, returnZero, returnEmptyFilter, returnEmptyDoclist, emptyPath } from '../../../Utils'; -import { Docs } from '../../documents/Documents'; +import { Doc, Field } from '../../../fields/Doc'; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero } from '../../../Utils'; import { Transform } from '../../util/Transform'; import { undoBatch } from '../../util/UndoManager'; import { ContextMenu } from '../ContextMenu'; import { EditableView } from '../EditableView'; +import { DefaultStyleProvider } from '../StyleProvider'; +import { OpenWhere } from './DocumentView'; import { FieldView, FieldViewProps } from './FieldView'; import { KeyValueBox } from './KeyValueBox'; import './KeyValueBox.scss'; import './KeyValuePair.scss'; import React = require('react'); -import { DefaultStyleProvider } from '../StyleProvider'; -import { OpenWhere } from './DocumentView'; // Represents one row in a key value plane diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx index 470f7e803..46ccdecae 100644 --- a/src/client/views/nodes/LinkBox.tsx +++ b/src/client/views/nodes/LinkBox.tsx @@ -1,6 +1,6 @@ import React = require('react'); import { observer } from 'mobx-react'; -import { emptyFunction, returnFalse, returnTrue } from '../../../Utils'; +import { emptyFunction, returnAlways, returnFalse, returnTrue } from '../../../Utils'; import { ViewBoxBaseComponent } from '../DocComponent'; import { StyleProp } from '../StyleProvider'; import { ComparisonBox } from './ComparisonBox'; @@ -12,23 +12,22 @@ export class LinkBox extends ViewBoxBaseComponent() { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(LinkBox, fieldKey); } - isContentActiveFunc = () => this.isContentActive(); - onClickScriptDisable: () => 'always' = () => 'always'; + onClickScriptDisable = returnAlways; componentDidMount() { this.props.setContentView?.(this); } render() { if (this.dataDoc.treeViewOpen === undefined) setTimeout(() => (this.dataDoc.treeViewOpen = true)); return ( -
      +
      'always' = () => 'always'; + onClickScriptDisable = returnAlways; @action componentDidMount() { diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 73283263f..d57518a8d 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -876,7 +876,7 @@ export class WebBox extends ViewBoxAnnotatableComponent e.stopPropagation()} style={{ width: !this.layoutDoc.forceReflow ? NumCast(this.layoutDoc[this.fieldKey + '-nativeWidth']) || `100%` : '100%' }}> {this.urlContent} diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/button/FontIconBox.scss index 7fe1436c7..f3b43501b 100644 --- a/src/client/views/nodes/button/FontIconBox.scss +++ b/src/client/views/nodes/button/FontIconBox.scss @@ -158,7 +158,7 @@ width: 100%; border-radius: 100%; flex-direction: column; - margin-top: -4px; + // margin-top: -4px; svg { width: 60% !important; @@ -427,11 +427,11 @@ } .dropbox-background { - width: 100vw; - height: 100vh; - top: 0; + width: 200vw; + height: 200vh; + top: -100vh; z-index: 20; - left: 0; + left: -100vw; background: transparent; position: fixed; } diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx index 468bcc4d8..28e6eaf1c 100644 --- a/src/client/views/nodes/button/FontIconBox.tsx +++ b/src/client/views/nodes/button/FontIconBox.tsx @@ -618,11 +618,10 @@ ScriptingGlobals.add(function setFontAttr(attr: 'font' | 'fontColor' | 'highligh const editorView = RichTextMenu.Instance?.TextView?.EditorView; const selected = SelectionManager.Docs().lastElement(); // prettier-ignore - const map: Map<'font'|'fontColor'|'highlight'|'fontSize', { checkResult: () => any; setDoc: () => void; setMode?: () => void }> = new Map([ + const map: Map<'font'|'fontColor'|'highlight'|'fontSize', { checkResult: () => any; setDoc: () => void;}> = new Map([ ['font', { checkResult: () => RichTextMenu.Instance?.fontFamily, setDoc: () => value && RichTextMenu.Instance.setFontFamily(value), - setMode: () => Doc.UserDoc().textAlign = value, }], ['highlight', { checkResult: () =>(selected ?? Doc.UserDoc())._fontHighlight, @@ -645,8 +644,7 @@ ScriptingGlobals.add(function setFontAttr(attr: 'font' | 'fontColor' | 'highligh if (checkResult) { return map.get(attr)?.checkResult(); } - if (editorView?.state) map.get(attr)?.setDoc(); - else map.get(attr)?.setMode?.(); + map.get(attr)?.setDoc?.(); }); type attrname = 'noAutoLink' | 'dictation' | 'bold' | 'italics' | 'underline' | 'left' | 'center' | 'right' | 'bullet' | 'decimal'; diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 3ce2366f8..ee4249b02 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1470,20 +1470,14 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent { - this.props.DocumentView?.().docView?.cancelMoveEvents(); - e.stopPropagation(); - }; onSelectEnd = (e: PointerEvent) => { document.removeEventListener('pointerup', this.onSelectEnd); - document.removeEventListener('pointermove', this.onSelectMove); }; onPointerUp = (e: React.PointerEvent): void => { const editor = this._editorView!; @@ -1534,6 +1528,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent { + if (!this.props.isContentActive()) return; if ((e.nativeEvent as any).handledByInnerReactInstance) { e.stopPropagation(); return; @@ -1876,7 +1871,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent { - if (this.isContentActive()) { + if (this.props.isContentActive()) { if (!NumCast(this.layoutDoc._scrollTop) && e.deltaY <= 0) e.preventDefault(); e.stopPropagation(); } diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index e79e7472a..3376c29a9 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -1027,8 +1027,8 @@ export class PresBox extends ViewBoxBaseComponent() { removeDocument = (doc: Doc) => Doc.RemoveDocFromList(this.rootDoc, this.fieldKey, doc); getTransform = () => this.props.ScreenToLocalTransform().translate(-5, -65); // listBox padding-left and pres-box-cont minHeight panelHeight = () => this.props.PanelHeight() - 40; - isContentActive = (outsideReaction?: boolean) => - Doc.ActiveTool === InkTool.None && !this.layoutDoc._lockedPosition && (this.layoutDoc.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false; + isContentActive = (outsideReaction?: boolean) => this.props.isContentActive(outsideReaction); + //.ActiveTool === InkTool.None && !this.layoutDoc._lockedPosition && (this.layoutDoc.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false; /** * For sorting the array so that the order is maintained when it is dropped. diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index eb3087399..c5060a2c2 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -381,7 +381,6 @@ export class PDFViewer extends React.Component { const target = e.target as any; if (e.target && (target.className.includes('endOfContent') || (target.parentElement.className !== 'textLayer' && target.parentElement.parentElement?.className !== 'textLayer'))) { this._textSelecting = false; - document.addEventListener('pointermove', this.onSelectMove); // need this to prevent document from being dragged if stopPropagation doesn't get called } else { // if textLayer is hit, then we select text instead of using a marquee so clear out the marquee. setTimeout( @@ -391,7 +390,6 @@ export class PDFViewer extends React.Component { this._styleRule = addStyleSheetRule(PDFViewer._annotationStyle, 'htmlAnnotation', { 'pointer-events': 'none' }); document.addEventListener('pointerup', this.onSelectEnd); - document.addEventListener('pointermove', this.onSelectMove); } } }; @@ -401,12 +399,6 @@ export class PDFViewer extends React.Component { this.isAnnotating = false; this._marqueeing = undefined; this._textSelecting = true; - document.removeEventListener('pointermove', this.onSelectMove); - }; - - onSelectMove = (e: PointerEvent) => { - this.props.DocumentView?.().docView?.cancelMoveEvents(); - e.stopPropagation(); }; @action @@ -414,7 +406,6 @@ export class PDFViewer extends React.Component { this.isAnnotating = false; clearStyleSheetRules(PDFViewer._annotationStyle); this.props.select(false); - document.removeEventListener('pointermove', this.onSelectMove); document.removeEventListener('pointerup', this.onSelectEnd); const sel = window.getSelection(); diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index 4d82551db..553c4525c 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -31,7 +31,7 @@ export namespace Field { export function toKeyValueString(doc: Doc, key: string): string { const onDelegate = Object.keys(doc).includes(key); const field = ComputedField.WithoutComputed(() => FieldValue(doc[key])); - return !Field.IsField(field) ? '' : (onDelegate ? '=' : '') + (field instanceof ComputedField ? `:=${field.script.originalScript}` : Field.toScriptString(field)); + return !Field.IsField(field) ? '' : (onDelegate ? '=' : '') + (field instanceof ComputedField ? `:=${field.script.originalScript}` : field instanceof ScriptField ? `$=${field.script.originalScript}` : Field.toScriptString(field)); } export function toScriptString(field: Field): string { switch (typeof field) { diff --git a/src/fields/ScriptField.ts b/src/fields/ScriptField.ts index feb419597..2b8750714 100644 --- a/src/fields/ScriptField.ts +++ b/src/fields/ScriptField.ts @@ -114,7 +114,7 @@ export class ScriptField extends ObjectField { } [ToScriptString]() { - return 'script field'; + return this.script.originalScript; } [ToString]() { return this.script.originalScript; -- cgit v1.2.3-70-g09d2 From 96de14ba8ee055c3d18540fa54b979c27c2f6f13 Mon Sep 17 00:00:00 2001 From: mehekj Date: Mon, 10 Apr 2023 17:49:25 -0400 Subject: fixed schema table scroll bar css --- package-lock.json | 131 ++++++++++++++++----- .../collectionSchema/CollectionSchemaView.scss | 6 +- .../collectionSchema/CollectionSchemaView.tsx | 5 +- 3 files changed, 109 insertions(+), 33 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/package-lock.json b/package-lock.json index a231d474f..db49a5c24 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2456,7 +2456,7 @@ "@types/strip-bom": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@types/strip-bom/-/strip-bom-3.0.0.tgz", - "integrity": "sha1-FKjsOVbC6B7bdSB5CuzyHCkK69I=", + "integrity": "sha512-xevGOReSYGM7g/kUBZzPqCrR/KYAo+F0yiPc85WFTJa0MSLtyFTVTU6cJu/aV4mid7IffDIWqo69THF2o4JiEQ==", "dev": true }, "@types/strip-json-comments": { @@ -2807,7 +2807,7 @@ "textarea-caret": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/textarea-caret/-/textarea-caret-3.0.2.tgz", - "integrity": "sha512-gRzeti2YS4did7UJnPQ47wrjD+vp+CJIe9zbsu0bJ987d8QVLvLNG9757rqiQTIy4hGIeFauTTJt5Xkn51UkXg==" + "integrity": "sha1-82DEhpmqGr9xhoCkOjGoUGZcLK8=" } } }, @@ -2906,7 +2906,7 @@ "after": { "version": "0.8.2", "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz", - "integrity": "sha512-QbJ0NTQ/I9DI3uSJA4cbexiwQeRAfjPScqIbSjUDd9TOrcg6pTkdgziesOqxBMBzit8vFCTwrP27t13vFOORRA==" + "integrity": "sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=" }, "agent-base": { "version": "6.0.2", @@ -3803,7 +3803,7 @@ "backo2": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz", - "integrity": "sha512-zj6Z6M7Eq+PBZ7PQxl5NT665MvJdAkzp0f60nAJ+sLaSCBPMwVak5ZegFbgVCzFcCJTKFoMizvM5Ld7+JrRJHA==" + "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc=" }, "bail": { "version": "2.0.2", @@ -3873,7 +3873,7 @@ "base64-arraybuffer": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz", - "integrity": "sha512-a1eIFi4R9ySrbiMuyTGx5e92uRH5tQY6kArNcFaKBUleIoLjdjBg7Zxm3Mqm3Kmkf27HLR/1fnxX9q8GQ7Iavg==" + "integrity": "sha1-mBjHngWbE1X5fgQooBfIOOkLqBI=" }, "base64-js": { "version": "1.5.1", @@ -4846,7 +4846,7 @@ "component-bind": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz", - "integrity": "sha512-WZveuKPeKAG9qY+FkYDeADzdHyTYdIboXS59ixDeRJL5ZhxpqUnxSOwop4FQjMsiYm3/Or8cegVbpAHNA7pHxw==" + "integrity": "sha1-AMYIq33Nk4l8AAllGx06jh5zu9E=" }, "component-emitter": { "version": "1.3.0", @@ -4856,7 +4856,7 @@ "component-inherit": { "version": "0.0.3", "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz", - "integrity": "sha512-w+LhYREhatpVqTESyGFg3NlP6Iu0kEKUHETY9GoZP/pQyW4mHFZuFWRUCIqVPZ36ueVLtoOEZaAqbCF2RDndaA==" + "integrity": "sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM=" }, "compress-commons": { "version": "2.1.1", @@ -5563,7 +5563,7 @@ "custom-event": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz", - "integrity": "sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg==" + "integrity": "sha1-XQKkaFCt8bSjF5RqOSj8y1v9BCU=" }, "cyclist": { "version": "1.0.1", @@ -5571,10 +5571,52 @@ "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=", "dev": true }, - "D": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/D/-/D-1.0.0.tgz", - "integrity": "sha512-nQvrCBu7K2pSSEtIM0EEF03FVjcczCXInMt3moLNFbjlWx6bZrX72uT6/1uAXDbnzGUAx9gTyDiQ+vrFi663oA==" + "d": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz", + "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==", + "dev": true, + "requires": { + "es5-ext": "^0.10.50", + "type": "^1.0.1" + } + }, + "d3": { + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/d3/-/d3-7.8.4.tgz", + "integrity": "sha512-q2WHStdhiBtD8DMmhDPyJmXUxr6VWRngKyiJ5EfXMxPw+tqT6BhNjhJZ4w3BHsNm3QoVfZLY8Orq/qPFczwKRA==", + "requires": { + "d3-array": "3", + "d3-axis": "3", + "d3-brush": "3", + "d3-chord": "3", + "d3-color": "3", + "d3-contour": "4", + "d3-delaunay": "6", + "d3-dispatch": "3", + "d3-drag": "3", + "d3-dsv": "3", + "d3-ease": "3", + "d3-fetch": "3", + "d3-force": "3", + "d3-format": "3", + "d3-geo": "3", + "d3-hierarchy": "3", + "d3-interpolate": "3", + "d3-path": "3", + "d3-polygon": "3", + "d3-quadtree": "3", + "d3-random": "3", + "d3-scale": "4", + "d3-scale-chromatic": "3", + "d3-selection": "3", + "d3-shape": "3", + "d3-time": "3", + "d3-time-format": "4", + "d3-timer": "3", + "d3-transition": "3", + "d3-zoom": "3" + } }, "d3-array": { "version": "3.2.2", @@ -6634,7 +6676,7 @@ "dynamic-dedupe": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/dynamic-dedupe/-/dynamic-dedupe-0.3.0.tgz", - "integrity": "sha1-BuRMIj9eTpTXjvnbI6ZRXOL5YqE=", + "integrity": "sha512-ssuANeD+z97meYOqd50e04Ze5qp4bPqo8cCkI4TRjZkzAUgIDTrXV1R8QCdINpiI+hw14+rYazvTRdQrz0/rFQ==", "dev": true, "requires": { "xtend": "^4.0.0" @@ -6764,7 +6806,7 @@ "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" }, "ws": { "version": "7.4.6", @@ -6948,6 +6990,28 @@ "is-symbol": "^1.0.2" } }, + "es5-ext": { + "version": "0.10.62", + "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz", + "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==", + "dev": true, + "requires": { + "es6-iterator": "^2.0.3", + "es6-symbol": "^3.1.3", + "next-tick": "^1.1.0" + } + }, + "es6-iterator": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz", + "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==", + "dev": true, + "requires": { + "d": "1", + "es5-ext": "^0.10.35", + "es6-symbol": "^3.1.1" + } + }, "es6-promise": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.2.1.tgz", @@ -9272,7 +9336,7 @@ "fs-extra": { "version": "0.26.7", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.26.7.tgz", - "integrity": "sha1-muH92UiXeY7at20JGM9C0MMYT6k=", + "integrity": "sha512-waKu+1KumRhYv8D8gMRCKJGAMI9pRnPuEb1mvgYD0f7wBscg+h6bW4FDTmEZhB9VKxvoTtxW+Y7bnIlB7zja6Q==", "requires": { "graceful-fs": "^4.1.2", "jsonfile": "^2.1.0", @@ -9932,14 +9996,14 @@ "isarray": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz", - "integrity": "sha512-c2cu3UxbI+b6kR3fy0nRnAhodsvR9dx7U5+znCOzdj6IfP3upFURTr0Xl5BlQZNKZjEtxrmVyfSdeE3O57smoQ==" + "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=" } } }, "has-cors": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz", - "integrity": "sha512-g5VNKdkFuUuVCP9gYfDJHjK2nqdQJ7aDLTnycnc2+RvsOQbuLdF5pm7vuE5J76SEBIQjs4kQY/BWq74JUmjbXA==" + "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=" }, "has-flag": { "version": "3.0.0", @@ -10434,7 +10498,7 @@ "resolved": "https://registry.npmjs.org/image-size-stream/-/image-size-stream-1.1.0.tgz", "integrity": "sha1-Ivou2mbG31AQh0bacUkmSy0l+Gs=", "requires": { - "image-size": "git+https://github.com/netroy/image-size#da2c863807a3e9602617bdd357b0de3ab4a064c1", + "image-size": "github:netroy/image-size#da2c863807a3e9602617bdd357b0de3ab4a064c1", "readable-stream": "^1.0.33", "tryit": "^1.0.1" }, @@ -10515,7 +10579,7 @@ "indexof": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz", - "integrity": "sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg==" + "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=" }, "inflight": { "version": "1.0.6", @@ -11626,7 +11690,7 @@ "jsonfile": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz", - "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=", + "integrity": "sha512-PKllAqbgLgxHaj8TElYymKCAgrASebJrWpTnEkOaTowt23VKXXN0sUeriJ+eh7y6ufb/CC5ap11pz71/cM0hUw==", "requires": { "graceful-fs": "^4.1.6" } @@ -12049,7 +12113,7 @@ "lodash.isequal": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", - "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==" + "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=" }, "lodash.isplainobject": { "version": "4.0.6", @@ -12310,7 +12374,7 @@ "mathquill": { "version": "0.10.1-a", "resolved": "https://registry.npmjs.org/mathquill/-/mathquill-0.10.1-a.tgz", - "integrity": "sha512-snSAEwAtwdwBFSor+nVBnWWQtTw67kgAgKMyAIxuz4ZPboy0qkWZmd7BL3lfOXp/INihhRlU1PcfaAtDaRhmzA==", + "integrity": "sha1-vyylaQEAY6w0vNXVKa3Ag3zVPD8=", "requires": { "jquery": "^1.12.3" }, @@ -12318,7 +12382,7 @@ "jquery": { "version": "1.12.4", "resolved": "https://registry.npmjs.org/jquery/-/jquery-1.12.4.tgz", - "integrity": "sha512-UEVp7PPK9xXYSk8xqXCJrkXnKZtlgWkd2GsAQbMRFK6S/ePU2JN5G2Zum8hIVjzR3CpdfSqdqAzId/xd4TJHeg==" + "integrity": "sha1-AeHfuikP5z3rp3zurLD5ui/sngw=" } } }, @@ -19101,8 +19165,15 @@ "react-resizable-rotatable-draggable": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/react-resizable-rotatable-draggable/-/react-resizable-rotatable-draggable-0.2.0.tgz", - "integrity": "sha512-F8TPx3z7/AcmRViySbYV3LpUWXFpHlGAmKmNcYMgPlS+h1eYFazRG3xYS8Z6e48hWY1EcCny/YNrwRNUrap8CQ==", - "requires": {} + "integrity": "sha512-F8TPx3z7/AcmRViySbYV3LpUWXFpHlGAmKmNcYMgPlS+h1eYFazRG3xYS8Z6e48hWY1EcCny/YNrwRNUrap8CQ==" + }, + "react-resize-detector": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-7.1.2.tgz", + "integrity": "sha512-zXnPJ2m8+6oq9Nn8zsep/orts9vQv3elrpA+R8XTcW7DVVUJ9vwDwMXaBtykAYjMnkCIaOoK9vObyR7ZgFNlOw==", + "requires": { + "lodash": "^4.17.21" + } }, "react-reveal": { "version": "1.2.2", @@ -21694,7 +21765,7 @@ "to-array": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz", - "integrity": "sha512-LhVdShQD/4Mk4zXNroIQZJC+Ap3zgLcDuwEdcmLv9CCO73NWockQDwyUnW/m8VX/EElfL6FcYx7EeutN4HJA6A==" + "integrity": "sha1-F+bBH3PdTz10zaek/zI46a2b+JA=" }, "to-fast-properties": { "version": "2.0.0", @@ -22066,7 +22137,7 @@ "strip-bom": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", - "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=", + "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==", "dev": true } } @@ -23287,7 +23358,7 @@ "resolve-cwd": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz", - "integrity": "sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=", + "integrity": "sha512-ccu8zQTrzVr954472aUVPLEcB3YpKSYR3cg/3lo1okzobPBM+1INXBbBZlDbnI/hbEocnf8j0QVo43hQKrbchg==", "dev": true, "requires": { "resolve-from": "^3.0.0" @@ -23296,7 +23367,7 @@ "resolve-from": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", - "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=", + "integrity": "sha512-GnlH6vxLymXJNMBo7XP1fJIzBFbdYt49CuTwmB/6N53t+kMPRMFKz783LlQ4tv28XoQfMWinAJX6WCGf2IlaIw==", "dev": true }, "semver": { @@ -23848,7 +23919,7 @@ "yeast": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz", - "integrity": "sha512-8HFIh676uyGYP6wP13R/j6OJ/1HwJ46snpvzE7aHAN3Ryqh2yX6Xox2B4CUmTwwOIzlG3Bs7ocsP5dZH/R1Qbg==" + "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk=" }, "yn": { "version": "3.1.1", diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 1ef2fb4ef..6118aef3f 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -9,7 +9,11 @@ .schema-table { background-color: $white; cursor: grab; - overflow: scroll; + + .schema-table-content { + overflow: overlay; + scroll-behavior: smooth; + } .schema-column-menu, .schema-filter-menu { diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 632abd6cf..46ab08dcd 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -45,6 +45,7 @@ export class CollectionSchemaView extends CollectionSubView() { public static _minColWidth: number = 25; public static _rowMenuWidth: number = 60; public static _previewDividerWidth: number = 4; + public static _newNodeInputHeight: number = 30; @computed get _selectedDocs() { return SelectionManager.Docs().filter(doc => Doc.AreProtosEqual(DocCast(doc.context), this.props.Document)); @@ -778,7 +779,7 @@ export class CollectionSchemaView extends CollectionSubView() { {this._filterColumnIndex !== undefined && this.renderFilterMenu} - +
      {this.previewWidth > 0 &&
      } {this.previewWidth > 0 && ( @@ -833,7 +834,7 @@ class CollectionSchemaViewDocs extends React.Component () => this.props.schema.props.ScreenToLocalTransform().translate(0, -CollectionSchemaView._rowHeight - index * this.rowHeightFunc())); render() { return ( -
      +
      {this.props.childDocs().docs.map((doc: Doc, index: number) => { const dataDoc = !doc.isTemplateDoc && !doc.isTemplateForField ? undefined : this.props.schema.props.DataDoc; return ( -- cgit v1.2.3-70-g09d2 From fb9ec75c46bc237bc6c8df24ee998e6de90168a1 Mon Sep 17 00:00:00 2001 From: mehekj Date: Wed, 12 Apr 2023 20:55:14 -0400 Subject: readonly fields and schema key info display --- src/client/documents/Documents.ts | 51 ++++++++++++---------- .../collectionSchema/CollectionSchemaView.scss | 11 ++++- .../collectionSchema/CollectionSchemaView.tsx | 48 +++++++++++++++----- .../collections/collectionSchema/SchemaRowBox.tsx | 1 + .../collectionSchema/SchemaTableCell.tsx | 8 +++- 5 files changed, 82 insertions(+), 37 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 979b294e0..6b60c1801 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -69,12 +69,14 @@ class EmptyBox { } export abstract class FInfo { description: string = ''; + readOnly: boolean = false; fieldType?: string; values?: Field[]; // format?: string; // format to display values (e.g, decimal places, $, etc) // parse?: ScriptField; // parse a value from a string - constructor(d: string) { + constructor(d: string, readOnly?: boolean) { this.description = d; + this.readOnly = readOnly ?? false; } } class BoolInfo extends FInfo { @@ -84,16 +86,16 @@ class BoolInfo extends FInfo { class NumInfo extends FInfo { fieldType? = 'number'; values?: number[] = []; - constructor(d: string, values?: number[]) { - super(d); + constructor(d: string, readOnly?: boolean, values?: number[]) { + super(d, readOnly); this.values = values; } } class StrInfo extends FInfo { fieldType? = 'string'; values?: string[] = []; - constructor(d: string, values?: string[]) { - super(d); + constructor(d: string, readOnly?: boolean, values?: string[]) { + super(d, readOnly); this.values = values; } } @@ -101,21 +103,24 @@ class DocInfo extends FInfo { fieldType? = 'Doc'; values?: Doc[] = []; constructor(d: string, values?: Doc[]) { - super(d); + super(d, true); this.values = values; } } class DimInfo extends FInfo { fieldType? = 'DimUnit'; values? = [DimUnit.Pixel, DimUnit.Ratio]; + readOnly = true; } class PEInfo extends FInfo { fieldType? = 'pointerEvents'; values? = ['all', 'none']; + readOnly = true; } class DAInfo extends FInfo { fieldType? = 'dropActionType'; values? = ['alias', 'copy', 'move', 'same', 'proto', 'none']; + readOnly = true; } type BOOLt = BoolInfo | boolean; type NUMt = NumInfo | number; @@ -127,12 +132,12 @@ type DROPt = DAInfo | dropActionType; export class DocumentOptions { x?: NUMt = new NumInfo('x coordinate of document in a freeform view'); y?: NUMt = new NumInfo('y coordinage of document in a freeform view'); - z?: NUMt = new NumInfo('whether document is in overlay (1) or not (0)', [1, 0]); - system?: BOOLt = new BoolInfo('is this a system created/owned doc'); - type?: STRt = new StrInfo('type of document', Array.from(Object.keys(DocumentType))); + z?: NUMt = new NumInfo('whether document is in overlay (1) or not (0)', false, [1, 0]); + system?: BOOLt = new BoolInfo('is this a system created/owned doc', true); + type?: STRt = new StrInfo('type of document', true, Array.from(Object.keys(DocumentType))); title?: string; _dropAction?: DROPt = new DAInfo("what should happen to this document when it's dropped somewhere else"); - allowOverlayDrop?: BOOLt = new BoolInfo('can documents be dropped onto this document without using dragging title bar or holding down embed key (ctrl)?'); + allowOverlayDrop?: BOOLt = new BoolInfo('can documents be dropped onto this document without using dragging title bar or holding down embed key (ctrl)?', true); childDropAction?: DROPt = new DAInfo("what should happen to the source document when it's dropped onto a child of a collection "); targetDropAction?: DROPt = new DAInfo('what should happen to the source document when ??? '); userColor?: STRt = new StrInfo('color associated with a Dash user (seen in header fields of shared documents)'); @@ -146,14 +151,14 @@ export class DocumentOptions { _panY?: NUMt = new NumInfo('vertical pan location of a freeform view'); _width?: NUMt = new NumInfo('displayed width of a document'); _height?: NUMt = new NumInfo('displayed height of document'); - _nativeWidth?: NUMt = new NumInfo('native width of document contents (e.g., the pixel width of an image)'); - _nativeHeight?: NUMt = new NumInfo('native height of document contents (e.g., the pixel height of an image)'); - _nativeDimModifiable?: BOOLt = new BoolInfo('native dimensions can be modified using document decoration reizers'); - _nativeHeightUnfrozen?: BOOLt = new BoolInfo('native height can be changed independent of width by dragging decoration resizers'); - _dimMagnitude?: NUMt = new NumInfo("magnitude of collectionMulti{row,col} element's width or height"); - _dimUnit?: DIMt = new DimInfo("units of collectionMulti{row,col} element's width or height - 'px' or '*' for pixels or relative units"); - _fitWidth?: BOOLt = new BoolInfo('whether document should scale its contents to fit its rendered width or not (e.g., for PDFviews)'); - _fitContentsToBox?: BOOLt = new BoolInfo('whether a freeformview should zoom/scale to create a shrinkwrapped view of its content'); + _nativeWidth?: NUMt = new NumInfo('native width of document contents (e.g., the pixel width of an image)', true); + _nativeHeight?: NUMt = new NumInfo('native height of document contents (e.g., the pixel height of an image)', true); + _nativeDimModifiable?: BOOLt = new BoolInfo('native dimensions can be modified using document decoration reizers', true); + _nativeHeightUnfrozen?: BOOLt = new BoolInfo('native height can be changed independent of width by dragging decoration resizers', true); + _dimMagnitude?: NUMt = new NumInfo("magnitude of collectionMulti{row,col} element's width or height", true); + _dimUnit?: DIMt = new DimInfo("units of collectionMulti{row,col} element's width or height - 'px' or '*' for pixels or relative units", true); + _fitWidth?: BOOLt = new BoolInfo('whether document should scale its contents to fit its rendered width or not (e.g., for PDFviews)', true); + _fitContentsToBox?: BOOLt = new BoolInfo('whether a freeformview should zoom/scale to create a shrinkwrapped view of its content', true); _contentBounds?: List; // the (forced) bounds of the document to display. format is: [left, top, right, bottom] _lockedPosition?: boolean; // lock the x,y coordinates of the document so that it can't be dragged _lockedTransform?: boolean; // lock the panx,pany and scale parameters of the document so that it be panned/zoomed @@ -196,11 +201,11 @@ export class DocumentOptions { _timecodeToShow?: number; // the time that a document should be displayed (e.g., when an annotation shows up as a video plays) _timecodeToHide?: number; // the time that a document should be hidden _timelineLabel?: boolean; // whether the document exists on a timeline - '_carousel-caption-xMargin'?: NUMt = new NumInfo('x margin of caption inside of a carouself collection'); - '_carousel-caption-yMargin'?: NUMt = new NumInfo('y margin of caption inside of a carouself collection'); - 'icon-nativeWidth'?: NUMt = new NumInfo('native width of icon view'); - 'icon-nativeHeight'?: NUMt = new NumInfo('native height of icon view'); - 'dragFactory-count'?: NUMt = new NumInfo('number of items created from a drag button (used for setting title with incrementing index)'); + '_carousel-caption-xMargin'?: NUMt = new NumInfo('x margin of caption inside of a carouself collection', true); + '_carousel-caption-yMargin'?: NUMt = new NumInfo('y margin of caption inside of a carouself collection', true); + 'icon-nativeWidth'?: NUMt = new NumInfo('native width of icon view', true); + 'icon-nativeHeight'?: NUMt = new NumInfo('native height of icon view', true); + 'dragFactory-count'?: NUMt = new NumInfo('number of items created from a drag button (used for setting title with incrementing index)', true); openFactoryLocation?: string; // an OpenWhere value to place the factory created document openFactoryAsDelegate?: boolean; // lat?: number; diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 6118aef3f..a9434fde3 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -20,6 +20,7 @@ background: $light-gray; position: absolute; min-width: 200px; + max-width: 400px; display: flex; flex-direction: column; align-items: flex-start; @@ -30,14 +31,20 @@ margin: 10px; } - .schema-key-search-result { + .schema-search-result { cursor: pointer; - padding: 2px 10px; + padding: 5px 10px; width: 100%; &:hover { background-color: $medium-gray; } + + .schema-search-result-type, + .schema-search-result-desc { + color: $dark-gray; + font-size: $body-text; + } } .schema-key-search, diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 245e1abc0..d3992d12c 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -9,7 +9,7 @@ import { List } from '../../../../fields/List'; import { listSpec } from '../../../../fields/Schema'; import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../../fields/Types'; import { emptyFunction, returnDefault, returnEmptyDoclist, returnEmptyString, returnFalse, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../Utils'; -import { Docs, DocUtils } from '../../../documents/Documents'; +import { Docs, DocumentOptions, DocUtils, FInfo } from '../../../documents/Documents'; import { DocumentManager } from '../../../util/DocumentManager'; import { DragManager } from '../../../util/DragManager'; import { SelectionManager } from '../../../util/SelectionManager'; @@ -40,6 +40,7 @@ export class CollectionSchemaView extends CollectionSubView() { private _closestDropIndex: number = 0; private _previewRef: HTMLDivElement | null = null; private _makeNewColumn: boolean = false; + private _documentOptions: DocumentOptions = new DocumentOptions(); public static _rowHeight: number = 40; public static _minColWidth: number = 25; @@ -54,7 +55,7 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _colEles: HTMLDivElement[] = []; @observable _displayColumnWidths: number[] | undefined; @observable _columnMenuIndex: number | undefined; - @observable _menuOptions: string[] = []; + @observable _menuOptions: [string, { description: string; type: string; readOnly: boolean }][] = []; @observable _newFieldWarning: string = ''; @observable _makeNewField: boolean = false; @observable _newFieldDefault: any = 0; @@ -63,7 +64,7 @@ export class CollectionSchemaView extends CollectionSubView() { @observable _filterColumnIndex: number | undefined; @observable _filterSearchValue: string = ''; - get documentKeys() { + get keyInfos() { const docs = this.childDocs; const keys: { [key: string]: boolean } = {}; // bcz: ugh. this is untracked since otherwise a large collection of documents will blast the server for all their fields. @@ -75,7 +76,22 @@ export class CollectionSchemaView extends CollectionSubView() { untracked(() => docs.map(doc => Doc.GetAllPrototypes(doc).map(proto => Object.keys(proto).forEach(key => (keys[key] = false))))); // this.columns.forEach(key => (keys[key.heading] = true)); - return Array.from(Object.keys(keys)); + + let computedKeys: { [key: string]: { description: string; type: string; readOnly: boolean } } = {}; + Object.keys(keys).forEach((key: string) => { + computedKeys[key] = { description: '', type: '', readOnly: false }; + }); + + Object.entries(this._documentOptions).forEach((pair: [string, any]) => { + const info: FInfo = pair[1]; + computedKeys[pair[0]] = { description: info.description, type: info.fieldType ?? '', readOnly: info.readOnly }; + }); + + return computedKeys; + } + + get documentKeys() { + return Object.keys(this.keyInfos); } @computed get previewWidth() { @@ -441,7 +457,8 @@ export class CollectionSchemaView extends CollectionSubView() { onSearchKeyDown = (e: React.KeyboardEvent) => { switch (e.key) { case 'Enter': - this._menuOptions.length > 0 && this._menuValue.length > 0 ? this.setKey(this._menuOptions[0]) : action(() => (this._makeNewField = true))(); + const menuKeys = Object.keys(this._menuOptions); + menuKeys.length > 0 && this._menuValue.length > 0 ? this.setKey(menuKeys[0]) : action(() => (this._makeNewField = true))(); break; case 'Escape': this.closeColumnMenu(); @@ -470,7 +487,7 @@ export class CollectionSchemaView extends CollectionSubView() { this._makeNewColumn = false; this._columnMenuIndex = index; this._menuValue = ''; - this._menuOptions = this.documentKeys; + this._menuOptions = Object.entries(this.keyInfos); this._makeNewField = false; this._newFieldWarning = ''; this._makeNewField = false; @@ -516,7 +533,7 @@ export class CollectionSchemaView extends CollectionSubView() { @action updateKeySearch = (e: React.ChangeEvent) => { this._menuValue = e.target.value; - this._menuOptions = this.documentKeys.filter(value => value.toLowerCase().includes(this._menuValue.toLowerCase())); + this._menuOptions = Object.entries(this.keyInfos).filter(value => value[0].toLowerCase().includes(this._menuValue.toLowerCase())); }; getFieldFilters = (field: string) => StrListCast(this.Document._docFilters).filter(filter => filter.split(':')[0] == field); @@ -618,14 +635,23 @@ export class CollectionSchemaView extends CollectionSubView() { { passive: false } ) }> - {this._menuOptions.map(key => ( + {this._menuOptions.map(([key, info]) => (
      { e.stopPropagation(); this.setKey(key); }}> - {key} +

      + + {key} + {info.type ? ', ' : ''} + + + {info.type} + +

      +

      {info.description}

      ))}
      @@ -825,7 +851,7 @@ class CollectionSchemaViewDocs extends React.Component { const dataDoc = !doc.isTemplateDoc && !doc.isTemplateForField ? undefined : this.props.schema.props.DataDoc; return ( -
      +
      () { boolean | undefined; @@ -20,6 +22,10 @@ export interface SchemaTableCellProps { @observer export class SchemaTableCell extends React.Component { + get readOnly() { + return this.props.schemaView?.keyInfos[this.props.fieldKey].readOnly; + } + render() { const props: FieldViewProps = { Document: this.props.Document, @@ -50,7 +56,7 @@ export class SchemaTableCell extends React.Component { return (
      -
      +
      } GetValue={() => Field.toKeyValueString(this.props.Document, this.props.fieldKey)} -- cgit v1.2.3-70-g09d2 From dca61505ba138eef3819b16b760ec81becf9329e Mon Sep 17 00:00:00 2001 From: bobzel Date: Sat, 13 May 2023 09:55:48 -0400 Subject: changed EditableViews to support oneline and multiline. Also added transformer UI to allow documents to be entered. changed transformer to write doc id's, not variables.. made schema view support oneline and fixed bug with docdecoration hader occluding things invisibly. updated web pages to be zoomable and for its anchors to update web page and scroll location properly. made autolinkanchor directly go to target on click. --- package-lock.json | 39 +++ src/client/documents/Documents.ts | 4 +- src/client/util/CurrentUserUtils.ts | 5 +- src/client/util/DocumentManager.ts | 24 +- src/client/util/Scripting.ts | 30 +- src/client/views/DocumentDecorations.tsx | 8 +- src/client/views/EditableView.scss | 11 +- src/client/views/EditableView.tsx | 98 ++++-- src/client/views/MarqueeAnnotator.tsx | 3 +- src/client/views/ScriptingRepl.scss | 5 +- src/client/views/ScriptingRepl.tsx | 113 ++++--- .../views/collections/CollectionStackingView.scss | 6 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 18 +- .../collectionSchema/CollectionSchemaView.scss | 4 +- .../collectionSchema/CollectionSchemaView.tsx | 23 +- .../collectionSchema/SchemaColumnHeader.tsx | 1 + .../collections/collectionSchema/SchemaRowBox.tsx | 10 +- .../collectionSchema/SchemaTableCell.tsx | 44 ++- .../views/nodes/CollectionFreeFormDocumentView.tsx | 3 +- src/client/views/nodes/DocumentIcon.tsx | 56 ++-- src/client/views/nodes/DocumentView.tsx | 4 +- src/client/views/nodes/KeyValueBox.tsx | 6 +- src/client/views/nodes/KeyValuePair.scss | 64 ++-- src/client/views/nodes/KeyValuePair.tsx | 8 +- src/client/views/nodes/WebBox.tsx | 359 ++++++++++----------- src/client/views/nodes/button/FontIconBox.tsx | 13 +- .../views/nodes/formattedText/DashFieldView.tsx | 150 ++------- .../views/nodes/formattedText/FormattedTextBox.tsx | 3 +- src/client/views/nodes/formattedText/marks_rts.ts | 2 +- src/client/views/nodes/trails/PresBox.tsx | 18 +- src/client/views/pdf/PDFViewer.tsx | 3 +- src/fields/Doc.ts | 2 +- 32 files changed, 605 insertions(+), 532 deletions(-) (limited to 'src/client/views/collections/collectionSchema/CollectionSchemaView.scss') diff --git a/package-lock.json b/package-lock.json index 196906718..111d1838a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5597,6 +5597,16 @@ "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=", "dev": true }, + "d": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz", + "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==", + "dev": true, + "requires": { + "es5-ext": "^0.10.50", + "type": "^1.0.1" + } + }, "d3": { "version": "7.8.4", "resolved": "https://registry.npmjs.org/d3/-/d3-7.8.4.tgz", @@ -6977,6 +6987,28 @@ "is-symbol": "^1.0.2" } }, + "es5-ext": { + "version": "0.10.62", + "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz", + "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==", + "dev": true, + "requires": { + "es6-iterator": "^2.0.3", + "es6-symbol": "^3.1.3", + "next-tick": "^1.1.0" + } + }, + "es6-iterator": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz", + "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==", + "dev": true, + "requires": { + "d": "1", + "es5-ext": "^0.10.35", + "es6-symbol": "^3.1.1" + } + }, "es6-promise": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.2.1.tgz", @@ -6988,6 +7020,7 @@ "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==", "dev": true, "requires": { + "d": "^1.0.1", "ext": "^1.1.2" } }, @@ -22660,6 +22693,12 @@ "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz", "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=" }, + "type": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz", + "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==", + "dev": true + }, "type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 5a7894c08..bb12ce568 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -1054,8 +1054,8 @@ export namespace Docs { return inst; } - export function WebanchorDocument(url?: string, options: DocumentOptions = {}, id?: string) { - return InstanceFromProto(Prototypes.get(DocumentType.MARKER), url, options, id); + export function WebanchorDocument(options: DocumentOptions = {}, id?: string) { + return InstanceFromProto(Prototypes.get(DocumentType.MARKER), undefined, options, id); } export function CollectionAnchorDocument(options: DocumentOptions = {}, id?: string) { diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 80a5f0993..fbfe306a4 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -669,7 +669,10 @@ export class CurrentUserUtils { } static schemaTools():Button[] { - return [{ title: "Show preview", toolTip: "Show selection preview", btnType: ButtonType.ToggleButton, buttonText: "Show Preview", icon: "eye", scripts:{ onClick: '{ return toggleSchemaPreview(_readOnly_); }'}, }]; + return [ + {title: "Show preview", toolTip: "Show selection preview", btnType: ButtonType.ToggleButton, buttonText: "Show Preview", icon: "eye", scripts:{ onClick: '{ return toggleSchemaPreview(_readOnly_); }'} }, + {title: "Single Lines", toolTip: "Single Line Rows", btnType: ButtonType.ToggleButton, buttonText: "Single Line", icon: "eye", scripts:{ onClick: '{ return toggleSingleLineSchema(_readOnly_); }'} }, + ]; } static webTools() { diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index 3a192f712..695b003a6 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -1,4 +1,4 @@ -import { action, observable, ObservableSet } from 'mobx'; +import { action, computed, observable, ObservableSet } from 'mobx'; import { AnimationSym, Doc, Opt } from '../../fields/Doc'; import { Id } from '../../fields/FieldSymbols'; import { listSpec } from '../../fields/Schema'; @@ -10,6 +10,7 @@ import { TabDocView } from '../views/collections/TabDocView'; import { LightboxView } from '../views/LightboxView'; import { DocFocusOptions, DocumentView, DocumentViewInternal, OpenWhere, OpenWhereMod } from '../views/nodes/DocumentView'; import { FormattedTextBox } from '../views/nodes/formattedText/FormattedTextBox'; +import { KeyValueBox } from '../views/nodes/KeyValueBox'; import { LinkAnchorBox } from '../views/nodes/LinkAnchorBox'; import { PresBox } from '../views/nodes/trails'; import { ScriptingGlobals } from './ScriptingGlobals'; @@ -18,10 +19,13 @@ const { Howl } = require('howler'); export class DocumentManager { //global holds all of the nodes (regardless of which collection they're in) - @observable public DocumentViews = new Set(); + @observable _documentViews = new Set(); @observable public LinkAnchorBoxViews: DocumentView[] = []; @observable public RecordingEvent = 0; @observable public LinkedDocumentViews: { a: DocumentView; b: DocumentView; l: Doc }[] = []; + @computed public get DocumentViews() { + return Array.from(this._documentViews).filter(view => !(view.ComponentView instanceof KeyValueBox)); + } private static _instance: DocumentManager; public static get Instance(): DocumentManager { @@ -78,7 +82,7 @@ export class DocumentManager { // this.LinkedDocumentViews.forEach(view => console.log(" LV = " + view.a.props.Document.title + "/" + view.a.props.LayoutTemplateString + " --> " + // view.b.props.Document.title + "/" + view.b.props.LayoutTemplateString)); } else { - this.DocumentViews.add(view); + this._documentViews.add(view); } this.callAddViewFuncs(view); }; @@ -96,7 +100,7 @@ export class DocumentManager { const index = this.LinkAnchorBoxViews.indexOf(view); this.LinkAnchorBoxViews.splice(index, 1); } else { - this.DocumentViews.delete(view); + this._documentViews.delete(view); } SelectionManager.DeselectView(view); }); @@ -104,13 +108,13 @@ export class DocumentManager { //gets all views public getDocumentViewsById(id: string) { const toReturn: DocumentView[] = []; - Array.from(DocumentManager.Instance.DocumentViews).map(view => { + DocumentManager.Instance.DocumentViews.forEach(view => { if (view.rootDoc[Id] === id) { toReturn.push(view); } }); if (toReturn.length === 0) { - Array.from(DocumentManager.Instance.DocumentViews).map(view => { + DocumentManager.Instance.DocumentViews.forEach(view => { const doc = view.rootDoc.proto; if (doc && doc[Id] && doc[Id] === id) { toReturn.push(view); @@ -133,7 +137,7 @@ export class DocumentManager { // ((DocCast(dv.rootDoc.annotationOn)?.data as any)?.url?.href && (DocCast(dv.rootDoc.annotationOn)?.data as any)?.url?.href === (DocCast(toFind.annotationOn)?.data as any)?.url?.href) // )?.rootDoc ?? toFind; - const docViewArray = Array.from(DocumentManager.Instance.DocumentViews); + const docViewArray = DocumentManager.Instance.DocumentViews; const passes = !doc ? [] : preferredCollection ? [preferredCollection, undefined] : [undefined]; return passes.reduce( (pass, toReturn) => @@ -146,7 +150,7 @@ export class DocumentManager { public getLightboxDocumentView = (toFind: Doc, originatingDoc: Opt = undefined): DocumentView | undefined => { const views: DocumentView[] = []; - Array.from(DocumentManager.Instance.DocumentViews).map(view => LightboxView.IsLightboxDocView(view.docViewPath) && Doc.AreProtosEqual(view.rootDoc, toFind) && views.push(view)); + DocumentManager.Instance.DocumentViews.forEach(view => LightboxView.IsLightboxDocView(view.docViewPath) && Doc.AreProtosEqual(view.rootDoc, toFind) && views.push(view)); return views?.find(view => view.ContentDiv?.getBoundingClientRect().width /*&& view.props.focus !== returnFalse) || views?.find(view => view.props.focus !== returnFalse*/) || (views.length ? views[0] : undefined); }; public getFirstDocumentView = (toFind: Doc, originatingDoc: Opt = undefined): DocumentView | undefined => { @@ -164,8 +168,8 @@ export class DocumentManager { toFindIn; const toReturn: DocumentView[] = []; - const docViews = Array.from(DocumentManager.Instance.DocumentViews).filter(view => !LightboxView.IsLightboxDocView(view.docViewPath)); - const lightViews = Array.from(DocumentManager.Instance.DocumentViews).filter(view => LightboxView.IsLightboxDocView(view.docViewPath)); + const docViews = DocumentManager.Instance.DocumentViews.filter(view => !LightboxView.IsLightboxDocView(view.docViewPath)); + const lightViews = DocumentManager.Instance.DocumentViews.filter(view => LightboxView.IsLightboxDocView(view.docViewPath)); // heuristic to return the "best" documents first: // choose a document in the lightbox first diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts index f17a98616..70c2e3842 100644 --- a/src/client/util/Scripting.ts +++ b/src/client/util/Scripting.ts @@ -7,8 +7,6 @@ import * as typescriptlib from '!!raw-loader!./type_decls.d'; import * as ts from 'typescript'; import { Doc, Field } from '../../fields/Doc'; -import { ToScriptString } from '../../fields/FieldSymbols'; -import { ObjectField } from '../../fields/ObjectField'; import { RefField } from '../../fields/RefField'; import { ScriptField } from '../../fields/ScriptField'; import { scriptingGlobals, ScriptingGlobals } from './ScriptingGlobals'; @@ -60,7 +58,14 @@ function Run(script: string | undefined, customParams: string[], diagnostics: an // let fieldTypes = [Doc, ImageField, PdfField, VideoField, AudioField, List, RichTextField, ScriptField, ComputedField, CompileScript]; // let paramNames = ["Docs", ...fieldTypes.map(fn => fn.name)]; // let params: any[] = [Docs, ...fieldTypes]; - const compiledFunction = new Function(...paramNames, `return ${script}`); + const compiledFunction = (() => { + try { + return new Function(...paramNames, `return ${script}`); + } catch { + return undefined; + } + })(); + if (!compiledFunction) return { compiled: false, errors }; const { capturedVariables = {} } = options; const run = (args: { [name: string]: any } = {}, onError?: (e: any) => void, errorVal?: any): ScriptResult => { const argsArray: any[] = []; @@ -155,7 +160,7 @@ export type Traverser = (node: ts.Node, indentation: string) => boolean | void; export type TraverserParam = Traverser | { onEnter: Traverser; onLeave: Traverser }; export type Transformer = { transformer: ts.TransformerFactory; - getVars?: () => { capturedVariables: { [name: string]: Field } }; + getVars?: () => { [name: string]: Field }; }; export interface ScriptOptions { requiredType?: string; // does function required a typed return value @@ -205,16 +210,17 @@ export function CompileScript(script: string, options: ScriptOptions = {}): Comp if (options.transformer) { const sourceFile = ts.createSourceFile('script.ts', script, ts.ScriptTarget.ES2015, true); const result = ts.transform(sourceFile, [options.transformer.transformer]); - if (options.transformer.getVars) { - const newCaptures = options.transformer.getVars(); + const newCaptures = options.transformer.getVars?.(); + if (Object.keys(newCaptures ?? {}).length) { // tslint:disable-next-line: prefer-object-spread - options.capturedVariables = Object.assign(capturedVariables, newCaptures.capturedVariables) as any; + //options.capturedVariables = Object.assign(capturedVariables, newCaptures!) as any; + + const transformed = result.transformed; + const printer = ts.createPrinter({ + newLine: ts.NewLineKind.LineFeed, + }); + script = printer.printFile(transformed[0]); } - const transformed = result.transformed; - const printer = ts.createPrinter({ - newLine: ts.NewLineKind.LineFeed, - }); - script = printer.printFile(transformed[0]); result.dispose(); } const paramNames: string[] = []; diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 85d36dbf8..26b64bfdd 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -867,11 +867,11 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P width: bounds.r - bounds.x + this._resizeBorderWidth + 'px', height: bounds.b - bounds.y + this._resizeBorderWidth + this._titleHeight + 'px', }}> -
      - {hideDeleteButton ?
      : topBtn('close', 'times', undefined, e => this.onCloseClick(true), 'Close')} - {hideResizers || hideDeleteButton ?
      : topBtn('minimize', 'window-maximize', undefined, e => this.onCloseClick(undefined), 'Minimize')} +
      + {hideDeleteButton ? null : topBtn('close', 'times', undefined, e => this.onCloseClick(true), 'Close')} + {hideResizers || hideDeleteButton ? null : topBtn('minimize', 'window-maximize', undefined, e => this.onCloseClick(undefined), 'Minimize')} {hideTitle ? null : titleArea} - {hideOpenButton ?
      : topBtn('open', 'external-link-alt', this.onMaximizeDown, undefined, 'Open in Lightbox (ctrl: as alias, shift: in new collection)')} + {hideOpenButton ? null : topBtn('open', 'external-link-alt', this.onMaximizeDown, undefined, 'Open in Lightbox (ctrl: as alias, shift: in new collection)')}
      {hideResizers ? null : ( <> diff --git a/src/client/views/EditableView.scss b/src/client/views/EditableView.scss index ed7ec9dc1..0955ba8ff 100644 --- a/src/client/views/EditableView.scss +++ b/src/client/views/EditableView.scss @@ -10,12 +10,14 @@ .editableView-container-editing-oneLine { width: 100%; + height: max-content; span { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: block; + p { + white-space: pre; + overflow: hidden; + text-overflow: ellipsis; + } } input { @@ -33,4 +35,3 @@ border: none; outline: none; } - \ No newline at end of file diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index d1311a60a..6b4132814 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -1,9 +1,11 @@ import React = require('react'); -import { action, observable } from 'mobx'; +import { action, IReactionDisposer, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as Autosuggest from 'react-autosuggest'; import { ObjectField } from '../../fields/ObjectField'; import './EditableView.scss'; +import { DocumentIconContainer } from './nodes/DocumentIcon'; +import { OverlayView } from './OverlayView'; export interface EditableProps { /** @@ -37,7 +39,8 @@ export interface EditableProps { onChange: (e: React.ChangeEvent, { newValue }: { newValue: string }) => void; autosuggestProps: Autosuggest.AutosuggestProps; }; - oneLine?: boolean; + oneLine?: boolean; // whether to display the editable view as a single input line or as a textarea + allowCRs?: boolean; // can carriage returns be entered editing?: boolean; isEditingCallback?: (isEditing: boolean) => void; menuCallback?: (x: number, y: number) => void; @@ -45,6 +48,7 @@ export interface EditableProps { showMenuOnLoad?: boolean; background?: string | undefined; placeholder?: string; + wrap?: string; // nowrap, pre-wrap, etc } /** @@ -55,7 +59,9 @@ export interface EditableProps { @observer export class EditableView extends React.Component { private _ref = React.createRef(); - private _inputref = React.createRef(); + private _inputref: HTMLInputElement | HTMLTextAreaElement | null = null; + _overlayDisposer?: () => void; + _editingDisposer?: IReactionDisposer; @observable _editing: boolean = false; constructor(props: EditableProps) { @@ -63,21 +69,53 @@ export class EditableView extends React.Component { this._editing = this.props.editing ? true : false; } + componentDidMount(): void { + this._editingDisposer = reaction( + () => this._editing, + editing => { + if (editing) { + setTimeout(() => { + if (this._inputref?.value.startsWith('=') || this._inputref?.value.startsWith(':=')) { + this._overlayDisposer?.(); + this._overlayDisposer = OverlayView.Instance.addElement(, { x: 0, y: 0 }); + } + }); + } else { + this._overlayDisposer?.(); + this._overlayDisposer = undefined; + } + }, + { fireImmediately: true } + ); + } + @action componentDidUpdate() { if (this._editing && this.props.editing === false) { - this._inputref.current?.value && this.finalizeEdit(this._inputref.current.value, false, true, false); + this._inputref?.value && this.finalizeEdit(this._inputref.value, false, true, false); } else if (this.props.editing !== undefined) { this._editing = this.props.editing; } } componentWillUnmount() { - this._inputref.current?.value && this.finalizeEdit(this._inputref.current.value, false, true, false); + this._overlayDisposer?.(); + this._editingDisposer?.(); + this._inputref?.value && this.finalizeEdit(this._inputref.value, false, true, false); } + onChange = (e: React.ChangeEvent) => { + const targVal = (e.target as any).value; + if (!(targVal.startsWith(':=') || targVal.startsWith('='))) { + this._overlayDisposer?.(); + this._overlayDisposer = undefined; + } else if (!this._overlayDisposer) { + this._overlayDisposer = OverlayView.Instance.addElement(, { x: 0, y: 0 }); + } + }; + @action - onKeyDown = (e: React.KeyboardEvent) => { + onKeyDown = (e: React.KeyboardEvent) => { switch (e.key) { case 'Tab': e.stopPropagation(); @@ -89,13 +127,15 @@ export class EditableView extends React.Component { if (!e.currentTarget.value) this.props.OnEmpty?.(); break; case 'Enter': - e.stopPropagation(); - if (!e.ctrlKey) { - this.finalizeEdit(e.currentTarget.value, e.shiftKey, false, true); - } else if (this.props.OnFillDown) { - this.props.OnFillDown(e.currentTarget.value); - this._editing = false; - this.props.isEditingCallback?.(false); + if (this.props.allowCRs !== true) { + e.stopPropagation(); + if (!e.ctrlKey) { + this.finalizeEdit(e.currentTarget.value, e.shiftKey, false, true); + } else if (this.props.OnFillDown) { + this.props.OnFillDown(e.currentTarget.value); + this._editing = false; + this.props.isEditingCallback?.(false); + } } break; case 'Escape': @@ -103,9 +143,6 @@ export class EditableView extends React.Component { this._editing = false; this.props.isEditingCallback?.(false); break; - case ':': - this.props.menuCallback?.(e.currentTarget.getBoundingClientRect().x, e.currentTarget.getBoundingClientRect().y); - break; case 'ArrowUp': case 'ArrowDown': case 'ArrowLeft': @@ -117,6 +154,12 @@ export class EditableView extends React.Component { case 'Meta': case 'Control': break; + case ':': + if (this.props.menuCallback) { + this.props.menuCallback(e.currentTarget.getBoundingClientRect().x, e.currentTarget.getBoundingClientRect().y); + break; + } + default: if (this.props.textCallback?.(e.key)) { this._editing = false; @@ -186,15 +229,32 @@ export class EditableView extends React.Component { onChange: this.props.autosuggestProps.onChange, }} /> - ) : ( + ) : this.props.oneLine !== false && this.props.GetValue()?.toString().indexOf('\n') === -1 ? ( (this._inputref = r)} style={{ display: this.props.display, overflow: 'auto', fontSize: this.props.fontSize, minWidth: 20, background: this.props.background }} placeholder={this.props.placeholder} onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true, false)} defaultValue={this.props.GetValue()} autoFocus={true} + onChange={this.onChange} + onKeyDown={this.onKeyDown} + onKeyPress={this.stopPropagation} + onPointerDown={this.stopPropagation} + onClick={this.stopPropagation} + onPointerUp={this.stopPropagation} + /> + ) : ( +