From be1ac92cdc609a7931ec8427f507648da117b4ea Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 10 Apr 2024 13:53:38 -0400 Subject: fixed buttons to have an embedContainer. cleaning up notetaking view - fixing colors for input buttons, fixing when buttons appear (by extending the column targe to always be 100%) --- .../collections/CollectionNoteTakingView.scss | 38 +++++++++++--------- .../views/collections/CollectionNoteTakingView.tsx | 15 ++++---- .../collections/CollectionNoteTakingViewColumn.tsx | 41 +++++++++++++--------- 3 files changed, 55 insertions(+), 39 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionNoteTakingView.scss b/src/client/views/collections/CollectionNoteTakingView.scss index 4c2dcf9ab..81000e7a5 100644 --- a/src/client/views/collections/CollectionNoteTakingView.scss +++ b/src/client/views/collections/CollectionNoteTakingView.scss @@ -1,7 +1,7 @@ @import '../global/globalCssVariables.module.scss'; .collectionNoteTakingView-DocumentButtons { - display: none; + opacity: 0; justify-content: space-between; margin: auto; } @@ -15,7 +15,6 @@ .editableView-container-editing-oneLine, .editableView-container-editing { - color: grey; padding: 10px; width: 100%; } @@ -29,7 +28,6 @@ .editableView-input { outline-color: black; letter-spacing: 2px; - color: grey; border: 0px; padding: 12px 10px 11px 10px; } @@ -41,7 +39,6 @@ .editableView-input { outline-color: black; letter-spacing: 2px; - color: grey; border: 0px; padding: 12px 10px 11px 10px; } @@ -51,9 +48,9 @@ display: flex; } -.collectionNoteTakingViewFieldColumn:hover { +.collectionNoteTakingViewFieldColumnHover:hover { .collectionNoteTakingView-DocumentButtons { - display: flex; + opacity: 1; } } @@ -100,6 +97,9 @@ flex-direction: column; height: max-content; } + .collectionNoteTakingViewFieldColumnHover { + min-height: 100%; // if we use this, then we can't have autoHeight + } .collectionSchemaView-previewDoc { height: 100%; @@ -250,7 +250,6 @@ overflow: visible; width: 100%; display: flex; - color: gray; align-items: center; } } @@ -262,10 +261,6 @@ background: $medium-gray; // overflow: hidden; overflow is visible so the color menu isn't hidden -ftong - .editableView-input { - color: $dark-gray; - } - .editableView-input:hover, .editableView-container-editing:hover, .editableView-container-editing-oneLine:hover { @@ -288,7 +283,6 @@ .editableView-container-editing-oneLine, .editableView-container-editing { - color: grey; padding: 10px; } @@ -301,7 +295,6 @@ .editableView-input { padding: 12px 10px 11px 10px; border: 0px; - color: grey; text-align: center; letter-spacing: 2px; outline-color: black; @@ -409,7 +402,6 @@ .editableView-container-editing-oneLine, .editableView-container-editing { - color: grey; padding: 10px; width: 100%; } @@ -423,13 +415,16 @@ .editableView-input { outline-color: black; letter-spacing: 2px; - color: grey; border: 0px; padding: 12px 10px 11px 10px; + &::placeholder { + color: black; + } } } .collectionNoteTakingView-addDocumentButton { + opacity: 0.5; font-size: 75%; letter-spacing: 2px; cursor: pointer; @@ -437,10 +432,12 @@ .editableView-input { outline-color: black; letter-spacing: 2px; - color: grey; border: 0px; padding: 12px 10px 11px 10px; } + &:hover { + opacity: unset; + } } .collectionNoteTakingView-addGroupButton { @@ -499,6 +496,15 @@ } } +.collectionNoteTakingViewLight { + .collectionNoteTakingView-addDocumentButton, + .collectionNoteTakingView-addGroupButton { + .editableView-input::placeholder { + color: white; + } + } +} + @media only screen and (max-device-width: 480px) { .collectionNoteTakingView .collectionNoteTakingView-columnDragger, .collectionNoteTakingView-columnDragger { diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 5b91216cb..12e2cc1a8 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -9,7 +9,7 @@ import { listSpec } from '../../../fields/Schema'; import { SchemaHeaderField } from '../../../fields/SchemaHeaderField'; import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; import { TraceMobx } from '../../../fields/util'; -import { DivHeight, emptyFunction, returnZero, smoothScroll, Utils } from '../../../Utils'; +import { DivHeight, emptyFunction, lightOrDark, returnZero, smoothScroll, Utils } from '../../../Utils'; import { Docs, DocUtils } from '../../documents/Documents'; import { DragManager, dropActionType } from '../../util/DragManager'; import { SnappingManager } from '../../util/SnappingManager'; @@ -26,6 +26,7 @@ import './CollectionNoteTakingView.scss'; import { CollectionNoteTakingViewColumn } from './CollectionNoteTakingViewColumn'; import { CollectionNoteTakingViewDivider } from './CollectionNoteTakingViewDivider'; import { CollectionSubView } from './CollectionSubView'; +import { Colors } from '../global/globalEnums'; const _global = (window /* browser */ || global) /* node */ as any; /** @@ -500,10 +501,11 @@ export class CollectionNoteTakingView extends CollectionSubView() { editableViewProps = () => ({ GetValue: () => '', SetValue: this.addGroup, - contents: '+ New Column', + contents: '+ Column', }); refList = () => this._refList; + backgroundColor = () => this._props.DocumentView?.().backgroundColor(); // sectionNoteTaking returns a CollectionNoteTakingViewColumn (which is an individual column) sectionNoteTaking = (heading: SchemaHeaderField | undefined, docList: Doc[]) => ( @@ -511,7 +513,9 @@ export class CollectionNoteTakingView extends CollectionSubView() { key={heading?.heading ?? 'unset'} PanelWidth={this._props.PanelWidth} refList={this._refList} + backgroundColor={this.backgroundColor} select={this._props.select} + isContentActive={this.isContentActive} addDocument={this.addDocument} chromeHidden={this.chromeHidden} colHeaderData={this.colHeaderData} @@ -613,12 +617,11 @@ export class CollectionNoteTakingView extends CollectionSubView() { TraceMobx(); return (
(this._scroll = e.currentTarget.scrollTop))} diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx index db178d500..788490b82 100644 --- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx @@ -1,8 +1,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { returnEmptyString } from '../../../Utils'; +import { lightOrDark, returnEmptyString } from '../../../Utils'; import { Doc, DocListCast, Opt } from '../../../fields/Doc'; import { Id } from '../../../fields/FieldSymbols'; import { RichTextField } from '../../../fields/RichTextField'; @@ -26,6 +26,7 @@ import './CollectionNoteTakingView.scss'; interface CSVFieldColumnProps { Document: Doc; TemplateDataDocument: Opt; + backgroundColor?: (() => string) | undefined; docList: Doc[]; heading: string; pivotField: string; @@ -38,6 +39,7 @@ interface CSVFieldColumnProps { gridGap: number; headings: () => object[]; select: (ctrlPressed: boolean) => void; + isContentActive: () => boolean | undefined; renderChildren: (docs: Doc[]) => JSX.Element[]; addDocument: (doc: Doc | Doc[]) => boolean; createDropTarget: (ele: HTMLDivElement) => void; @@ -57,7 +59,12 @@ interface CSVFieldColumnProps { */ @observer export class CollectionNoteTakingViewColumn extends ObservableReactComponent { - @observable private _background = 'inherit'; + @observable private _hover = false; + + constructor(props: CSVFieldColumnProps) { + super(props); + makeObservable(this); + } // columnWidth returns the width of a column in absolute pixels @computed get columnWidth() { @@ -122,8 +129,8 @@ export class CollectionNoteTakingViewColumn extends ObservableReactComponent SnappingManager.IsDragging && (this._background = '#b4b4b4'); - @action pointerLeave = () => (this._background = 'inherit'); + @action pointerEntered = () => (this._hover = true); + @action pointerLeave = () => (this._hover = false); @undoBatch addTextNote = (char: string) => this.addNewTextDoc('-typed text-', false, true); @@ -273,11 +280,11 @@ export class CollectionNoteTakingViewColumn extends ObservableReactComponent {!this._props.chromeHidden ? ( -
-
- +
+
+
-
+
@@ -292,17 +299,17 @@ export class CollectionNoteTakingViewColumn extends ObservableReactComponent h[0] === this._props.headingObject) === 0 ? NumCast(this._props.Document.xMargin) : 0, - }} - ref={this.createColumnDropRef} - onPointerEnter={this.pointerEntered} - onPointerLeave={this.pointerLeave}> - {this.innards} + }}> +
+ {this.innards} +
); } -- cgit v1.2.3-70-g09d2 From ffb6621a7f822c3d605e4749b3f3be799ad1ef94 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 10 Apr 2024 14:04:25 -0400 Subject: enabled a notetaking category field other than 'NotetakingCategory' --- src/client/views/collections/CollectionNoteTakingView.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 12e2cc1a8..5c52d2398 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -41,7 +41,9 @@ export class CollectionNoteTakingView extends CollectionSubView() { _disposers: { [key: string]: IReactionDisposer } = {}; _masonryGridRef: HTMLDivElement | null = null; _draggerRef = React.createRef(); - notetakingCategoryField = 'NotetakingCategory'; + @computed get notetakingCategoryField() { + return StrCast(this.dataDoc.notetaking_category, 'NotetakingCategory'); + } public DividerWidth = 16; @observable docsDraggedRowCol: number[] = []; @observable _scroll = 0; @@ -370,7 +372,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { // we alter the pivot fields of the docs in case they are moved to a new column. const colIndex = this.getColumnFromXCoord(xCoord); const colHeader = colIndex === undefined ? 'unset' : StrCast(this.colHeaderData[colIndex].heading); - DragManager.docsBeingDragged.forEach(d => (d[this.notetakingCategoryField] = colHeader)); + DragManager.docsBeingDragged.map(doc => doc[DocData]).forEach(d => (d[this.notetakingCategoryField] = colHeader)); // used to notify sections to re-render this.docsDraggedRowCol.length = 0; const columnFromCoord = this.getColumnFromXCoord(xCoord); -- cgit v1.2.3-70-g09d2 From 53fbe74037f03456a678d592d0ae5660c2f0d55e Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 10 Apr 2024 21:02:05 -0400 Subject: more notetaking fixes - turn off autoSize, unobserve children. fixed typing a new note to delete placeholder text. added autoCreate for columns. added pivot column selector for notetaking view. --- .../collections/CollectionNoteTakingView.scss | 9 +++ .../views/collections/CollectionNoteTakingView.tsx | 80 +++++++++++++++++----- .../collections/CollectionNoteTakingViewColumn.tsx | 4 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 2 +- 4 files changed, 73 insertions(+), 22 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionNoteTakingView.scss b/src/client/views/collections/CollectionNoteTakingView.scss index 81000e7a5..95fda7b0a 100644 --- a/src/client/views/collections/CollectionNoteTakingView.scss +++ b/src/client/views/collections/CollectionNoteTakingView.scss @@ -494,6 +494,15 @@ .rc-switch-checked .rc-switch-inner { left: 8px; } + + .collectionNoteTaking-pivotField { + display: none; + } + &:hover { + .collectionNoteTaking-pivotField { + display: unset; + } + } } .collectionNoteTakingViewLight { diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 5c52d2398..d8a0aebb1 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -14,9 +14,10 @@ import { Docs, DocUtils } from '../../documents/Documents'; import { DragManager, dropActionType } from '../../util/DragManager'; import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; -import { undoBatch } from '../../util/UndoManager'; +import { undoable, undoBatch } from '../../util/UndoManager'; import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; +import { Colors } from '../global/globalEnums'; import { LightboxView } from '../LightboxView'; import { DocumentView } from '../nodes/DocumentView'; import { FieldViewProps, FocusViewOptions } from '../nodes/FieldView'; @@ -26,7 +27,7 @@ import './CollectionNoteTakingView.scss'; import { CollectionNoteTakingViewColumn } from './CollectionNoteTakingViewColumn'; import { CollectionNoteTakingViewDivider } from './CollectionNoteTakingViewDivider'; import { CollectionSubView } from './CollectionSubView'; -import { Colors } from '../global/globalEnums'; +import { FieldsDropdown } from '../FieldsDropdown'; const _global = (window /* browser */ || global) /* node */ as any; /** @@ -42,7 +43,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { _masonryGridRef: HTMLDivElement | null = null; _draggerRef = React.createRef(); @computed get notetakingCategoryField() { - return StrCast(this.dataDoc.notetaking_category, 'NotetakingCategory'); + return StrCast(this.dataDoc.notetaking_column, StrCast(this.layoutDoc.pivotField, 'notetaking_column')); } public DividerWidth = 16; @observable docsDraggedRowCol: number[] = []; @@ -155,25 +156,34 @@ export class CollectionNoteTakingView extends CollectionSubView() { ); }; + @computed get allFieldValues() { + return new Set(this.childDocs.map(doc => StrCast(doc[this.notetakingCategoryField]))); + } + componentDidMount() { super.componentDidMount?.(); document.addEventListener('pointerup', this.removeDocDragHighlight, true); - this._disposers.layout_autoHeight = reaction( - () => this.layoutDoc._layout_autoHeight, - layout_autoHeight => layout_autoHeight && this._props.setHeight?.(this.headerMargin + Math.max(...this._refList.map(DivHeight))) + + this._disposers.autoColumns = reaction( + () => (this.layoutDoc._notetaking_columns_autoCreate ? Array.from(this.allFieldValues) : undefined), + columns => undoable(() => columns?.filter(col => !this.colHeaderData.some(h => h.heading === col)).forEach(col => this.addColumn(col)), 'adding columns')(), + { fireImmediately: true } ); this._disposers.refList = reaction( () => ({ refList: this._refList.slice(), autoHeight: this.layoutDoc._layout_autoHeight && !LightboxView.Contains(this.DocumentView?.()) }), ({ refList, autoHeight }) => { - if (autoHeight) refList.forEach(r => this.observer.observe(r)); - else this.observer.disconnect(); + if (autoHeight) { + refList.forEach(r => this.observer.observe(r)); + this._props.setHeight?.(this.headerMargin + Math.max(...this._refList.map(DivHeight))); + } else this.observer.disconnect(); }, { fireImmediately: true } ); } componentWillUnmount() { + this.observer.disconnect(); document.removeEventListener('pointerup', this.removeDocDragHighlight, true); super.componentWillUnmount(); Object.keys(this._disposers).forEach(key => this._disposers[key]()); @@ -300,7 +310,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { getDocWidth(d: Doc) { const heading = !d[this.notetakingCategoryField] ? 'unset' : Field.toString(d[this.notetakingCategoryField] as Field); const existingHeader = this.colHeaderData.find(sh => sh.heading === heading); - const existingWidth = existingHeader?.width ? existingHeader.width : 0; + const existingWidth = this.layoutDoc._notetaking_columns_autoSize ? 1 / (this.colHeaderData.length ?? 1) : existingHeader?.width ? existingHeader.width : 0; const maxWidth = existingWidth > 0 ? existingWidth * this.availableWidth : this.maxColWidth; const width = d.layout_fitWidth ? maxWidth : NumCast(d._width); return Math.min(maxWidth - CollectionNoteTakingViewColumn.ColumnMargin, width < maxWidth ? width : maxWidth); @@ -502,7 +512,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { editableViewProps = () => ({ GetValue: () => '', - SetValue: this.addGroup, + SetValue: this.addColumn, contents: '+ Column', }); @@ -543,18 +553,26 @@ export class CollectionNoteTakingView extends CollectionSubView() { /> ); + @undoBatch + remColumn = (value: SchemaHeaderField) => { + const colHdrData = Array.from(Cast(this._props.Document[this._props.fieldKey + '_columnHeaders'], listSpec(SchemaHeaderField), null)); + if (value) { + const index = colHdrData.indexOf(value); + index !== -1 && colHdrData.splice(index, 1); + this.resizeColumns(colHdrData); + } + }; + // addGroup is called when adding a new columnHeader, adding a SchemaHeaderField to our list of // columnHeaders and resizing the existing columns to make room for our new one. @undoBatch - addGroup = (value: string) => { - if (this.colHeaderData) { - for (const header of this.colHeaderData) { - if (header.heading === value) { - alert('You cannot use an existing column name. Please try a new column name'); - return value; - } + addColumn = (value: string) => { + this.colHeaderData.forEach(header => { + if (header.heading === value) { + alert('You cannot use an existing column name. Please try a new column name'); + return value; } - } + }); const columnHeaders = Array.from(Cast(this.dataDoc[this.fieldKey + '_columnHeaders'], listSpec(SchemaHeaderField), null)); const newColWidth = 1 / (this.numGroupColumns + 1); columnHeaders.push(new SchemaHeaderField(value, undefined, undefined, newColWidth)); @@ -562,11 +580,25 @@ export class CollectionNoteTakingView extends CollectionSubView() { return true; }; + removeEmptyColumns = undoable(() => { + this.colHeaderData.filter(h => !this.allFieldValues.has(h.heading)).forEach(this.remColumn); + }, 'remove empty Columns'); + onContextMenu = (e: React.MouseEvent): void => { // need to test if propagation has stopped because GoldenLayout forces a parallel react hierarchy to be created for its top-level layout if (!e.isPropagationStopped()) { const subItems: ContextMenuProps[] = []; - subItems.push({ description: `${this.layoutDoc._columnsFill ? 'Variable Size' : 'Autosize'} Column`, event: () => (this.layoutDoc._columnsFill = !this.layoutDoc._columnsFill), icon: 'plus' }); + subItems.push({ + description: `${this.layoutDoc._notetaking_columns_autoCreate ? 'Manually' : 'Automatically'} Create columns`, + event: () => (this.layoutDoc._notetaking_columns_autoCreate = !this.layoutDoc._notetaking_columns_autoCreate), + icon: 'computer', + }); + subItems.push({ description: 'Remove Empty Columns', event: this.removeEmptyColumns, icon: 'computer' }); + subItems.push({ + description: `${this.layoutDoc._notetaking_columns_autoSize ? 'Variable Size' : 'Autosize'} Columns`, + event: () => (this.layoutDoc._notetaking_columns_autoSize = !this.layoutDoc._notetaking_columns_autoSize), + icon: 'plus', + }); subItems.push({ description: `${this.layoutDoc._layout_autoHeight ? 'Variable Height' : 'Auto Height'}`, event: () => (this.layoutDoc._layout_autoHeight = !this.layoutDoc._layout_autoHeight), icon: 'plus' }); subItems.push({ description: 'Clear All', event: () => (this.dataDoc.data = new List([])), icon: 'times' }); ContextMenu.Instance.addItem({ description: 'Options...', subitems: subItems, icon: 'eye' }); @@ -634,6 +666,16 @@ export class CollectionNoteTakingView extends CollectionSubView() { onContextMenu={this.onContextMenu} onWheel={e => this._props.isContentActive() && e.stopPropagation()}> <>{this.renderedSections} +
+ { + this.layoutDoc._pivotField = fieldKey; + this.removeEmptyColumns(); + }, 'change pivot field')} + placeholder={StrCast(this.layoutDoc._pivotField)} + /> +
); } diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx index 788490b82..448b11b05 100644 --- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx @@ -4,7 +4,6 @@ import { observer } from 'mobx-react'; import * as React from 'react'; import { lightOrDark, returnEmptyString } from '../../../Utils'; import { Doc, DocListCast, Opt } from '../../../fields/Doc'; -import { Id } from '../../../fields/FieldSymbols'; import { RichTextField } from '../../../fields/RichTextField'; import { listSpec } from '../../../fields/Schema'; import { SchemaHeaderField } from '../../../fields/SchemaHeaderField'; @@ -68,6 +67,7 @@ export class CollectionNoteTakingViewColumn extends ObservableReactComponent hd.heading === this._props.headingObject?.heading && hd.color === this._props.headingObject.color); return ((this._props.colHeaderData[i].width * this._props.availableWidth) / this._props.PanelWidth()) * 100 + '%'; @@ -154,7 +154,7 @@ export class CollectionNoteTakingViewColumn extends ObservableReactComponent { const colHdrData = Array.from(Cast(this._props.Document[this._props.fieldKey + '_columnHeaders'], listSpec(SchemaHeaderField), null)); if (this._props.headingObject) { - this._props.docList.forEach(d => (d[this._props.pivotField] = undefined)); + // this._props.docList.forEach(d => (d[DocData][this._props.pivotField] = undefined)); colHdrData.splice(colHdrData.indexOf(this._props.headingObject), 1); this._props.resizeColumns(colHdrData); } diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index c2f3a6e4b..5c59f7f60 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1255,7 +1255,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent { - if (this._editorView && this._applyingChange !== this.fieldKey) { + if (this._editorView && this._applyingChange !== this.fieldKey && incomingValue?.data !== this.dataDoc[this.fieldKey]) { if (incomingValue?.data) { const updatedState = JSON.parse(incomingValue.data.Data); if (JSON.stringify(this._editorView.state.toJSON()) !== JSON.stringify(updatedState)) { -- cgit v1.2.3-70-g09d2 From a6577f0c085d206db11e491bd4a1e4bae70e0ee6 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 12 Apr 2024 13:51:07 -0400 Subject: fixed auto play for trails. fixed presbox to allow drag and drop in addition to pin button. fixed tree view to not 'move' items that have a 'copy' drop action. fixed dragPreDrop functions in tree and stacking views to use source drag action over target drop action. --- .../views/collections/CollectionStackingView.tsx | 2 +- .../CollectionStackingViewFieldColumn.tsx | 21 ++++++++++++++++++--- src/client/views/collections/CollectionSubView.tsx | 19 +++++++++++-------- src/client/views/collections/CollectionTreeView.tsx | 14 ++++++-------- src/client/views/collections/TreeView.tsx | 4 +++- src/client/views/nodes/trails/PresBox.tsx | 7 ++++--- src/client/views/nodes/trails/PresElementBox.tsx | 2 +- 7 files changed, 44 insertions(+), 25 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 3a62a53d7..bf0393883 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -316,7 +316,7 @@ export class CollectionStackingView extends CollectionSubView r?.ContentDiv && this.docRefs.set(doc, r))} Document={doc} - TemplateDataDocument={dataDoc ?? (Doc.AreProtosEqual(doc[DocData], doc) ? undefined : doc[DocData])} + TemplateDataDocument={dataDoc} renderDepth={this._props.renderDepth + 1} PanelWidth={panelWidth} PanelHeight={panelHeight} diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index 641e01b81..c5292f880 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -12,7 +12,7 @@ import { TraceMobx } from '../../../fields/util'; import { DivHeight, DivWidth, emptyFunction, returnEmptyString, setupMoveUpEvents } from '../../../Utils'; import { Docs, DocUtils } from '../../documents/Documents'; import { DocumentType } from '../../documents/DocumentTypes'; -import { DragManager } from '../../util/DragManager'; +import { DragManager, dropActionType } from '../../util/DragManager'; import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; import { undoBatch } from '../../util/UndoManager'; @@ -66,11 +66,26 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent< _ele: HTMLElement | null = null; + protected onInternalPreDrop = (e: Event, de: DragManager.DropEvent, targetDropAction: dropActionType) => { + const dragData = de.complete.docDragData; + if (dragData) { + const sourceDragAction = dragData.dropAction; + const sameCollection = !dragData.draggedDocuments.some(d => !this._props.docList.includes(d)); + dragData.dropAction = !sameCollection // if doc from another tree + ? sourceDragAction || targetDropAction // then use the source's dragAction otherwise the target's + : sourceDragAction === dropActionType.inPlace // if source drag is inPlace + ? sourceDragAction // keep the doc in place + : dropActionType.same; // otherwise use same tree semantics to move within tree + + e.stopPropagation(); + } + }; + // This is likely similar to what we will be doing. Why do we need to make these refs? // is that the only way to have drop targets? createColumnDropRef = (ele: HTMLDivElement | null) => { this.dropDisposer?.(); - if (ele) this.dropDisposer = DragManager.MakeDropTarget(ele, this.columnDrop.bind(this), this._props.Document); + if (ele) this.dropDisposer = DragManager.MakeDropTarget(ele, this.columnDrop.bind(this), this._props.Document, this.onInternalPreDrop.bind(this)); else if (this._ele) this.props.refList.splice(this.props.refList.indexOf(this._ele), 1); this._ele = ele; }; @@ -345,7 +360,7 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent<
(moreProps?: X) { @undoBatch protected onGesture(e: Event, ge: GestureUtils.GestureEvent) {} - protected onInternalPreDrop(e: Event, de: DragManager.DropEvent, dropAction: dropActionType) { - if (de.complete.docDragData) { - // if the dropEvent's dragAction is, say 'embed', but we're just dragging within a collection, we may not actually want to make an embedding. - // so we check if our collection has a dropAction set on it and if so, we use that instead. - if (dropAction && !de.complete.docDragData.draggedDocuments.some(d => d.embedContainer === this.Document && this.childDocs.includes(d))) { - de.complete.docDragData.dropAction = dropAction; - } + protected onInternalPreDrop(e: Event, de: DragManager.DropEvent, targetDropAction: dropActionType) { + const dragData = de.complete.docDragData; + if (dragData) { + const sourceDragAction = dragData.dropAction; + const sameCollection = !dragData.draggedDocuments.some(d => d.embedContainer !== this._props.Document); + dragData.dropAction = !sameCollection // if doc from another tree + ? sourceDragAction || targetDropAction // then use the source's dragAction otherwise the target's + : sourceDragAction === dropActionType.inPlace // if source drag is inPlace + ? sourceDragAction // keep the doc in place + : dropActionType.same; // otherwise use same tree semantics to move within tree e.stopPropagation(); } } diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 293c79119..5741fc29b 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -157,14 +157,12 @@ export class CollectionTreeView extends CollectionSubView Doc.AreProtosEqual(dragData.treeViewDoc, this.Document); - const isAlreadyInTree = () => sameTree || dragData.draggedDocuments.some(d => d.embedContainer === this.Document && this.childDocs.includes(d)); - dragData.dropAction = - targetDropAction && !isAlreadyInTree() // if dropped document is not in the tree - ? targetDropAction // then use the target's drop action if it's specified - : !sameTree() || sourceDragAction === dropActionType.inPlace // if doc from another tree, or a non inPlace source drag action is specified - ? sourceDragAction // use the source dragAction - : dropActionType.same; // otherwise use same tree semantics to move within tree + const sameTree = dragData.treeViewDoc?.[DocData] === this.dataDoc; + dragData.dropAction = !sameTree // if doc from another tree + ? sourceDragAction || targetDropAction // then use the source's dragAction otherwise the target's + : sourceDragAction === dropActionType.inPlace // if source drag is inPlace + ? sourceDragAction // keep the doc in place + : dropActionType.same; // otherwise use same tree semantics to move within tree e.stopPropagation(); } }; diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 8c29c3ada..4fd49f8fe 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -449,7 +449,9 @@ export class TreeView extends ObservableReactComponent { const addDoc = inside ? this.localAdd : parentAddDoc; const canAdd = !StrCast((inside ? this.Document : this._props.treeViewParent)?.treeView_FreezeChildren).includes('add') || forceAdd; if (canAdd && (dropAction !== dropActionType.inPlace || droppedDocuments.every(d => d.embedContainer === this._props.parentTreeView?.Document))) { - const move = (!dropAction || canEmbed || dropAction === dropActionType.proto || dropAction === dropActionType.move || dropAction === dropActionType.same || dropAction === dropActionType.inPlace) && moveDocument; + const move = + (!dropAction || (canEmbed && dropAction !== dropActionType.copy) || dropAction === dropActionType.proto || dropAction === dropActionType.move || dropAction === dropActionType.same || dropAction === dropActionType.inPlace) && + moveDocument; this._props.parentTreeView instanceof TreeView && (this._props.parentTreeView.dropping = true); const res = droppedDocuments.reduce((added, d) => (move ? move(d, undefined, addDoc) || (dropAction === dropActionType.proto ? addDoc(d) : false) : addDoc(d)) || added, false); this._props.parentTreeView instanceof TreeView && (this._props.parentTreeView.dropping = false); diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index cd9fec839..91fdb90fc 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -324,8 +324,9 @@ export class PresBox extends ViewBoxBaseComponent() { // Case 2: Last slide and presLoop is toggled ON or it is in Edit mode this.nextSlide(0); progressiveReveal(true); // shows first progressive document, but without a transition effect + return 0; } - return 0; + return false; } return this.itemIndex; }; @@ -963,7 +964,7 @@ export class PresBox extends ViewBoxBaseComponent() { const func = () => { const delay = NumCast(this.activeItem.presentation_duration, this.activeItem.type === DocumentType.SCRIPTING ? 0 : 2500) + NumCast(this.activeItem.presentation_transition); this._presTimer = setTimeout(() => { - if (!this.next()) this.layoutDoc.presentation_status = this._exitTrail?.() ?? PresStatus.Manual; + if (this.next() === false) this.layoutDoc.presentation_status = this._exitTrail?.() ?? PresStatus.Manual; this.layoutDoc.presentation_status === PresStatus.Autoplay && func(); }, delay); }; @@ -1065,7 +1066,7 @@ export class PresBox extends ViewBoxBaseComponent() { } } else if (doc.type !== DocumentType.PRES) { if (!doc.presentation_targetDoc) doc.title = doc.title + ' - Slide'; - doc.presentation_targetDoc = doc.createdFrom; // dropped document will be a new embedding of an embedded document somewhere else. + doc.presentation_targetDoc = doc.createdFrom ?? doc; // dropped document will be a new embedding of an embedded document somewhere else. doc.presentation_movement = PresMovement.Zoom; if (this._expandBoolean) doc.presentation_expandInlineButton = true; } diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx index 5b2aa1cde..28139eb14 100644 --- a/src/client/views/nodes/trails/PresElementBox.tsx +++ b/src/client/views/nodes/trails/PresElementBox.tsx @@ -61,7 +61,7 @@ export class PresElementBox extends ViewBoxBaseComponent() { // Since this node is being rendered with a template, this method retrieves // the actual slide being rendered from the auto-generated rendering template @computed get slideDoc() { - return this._props.TemplateDataDocument ?? this.Document; + return DocCast(this.Document.rootDocument, this.Document); } // this is the document in the workspaces that is targeted by the slide -- cgit v1.2.3-70-g09d2 From 059218b567ce57d3afa771bd764cde6f5f55b459 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 14 Apr 2024 17:22:10 -0400 Subject: clean up of freeform centeringShift and nativeScaling --- .../CollectionFreeFormBackgroundGrid.tsx | 10 +++--- .../collectionFreeForm/CollectionFreeFormView.tsx | 37 +++++++++++----------- 2 files changed, 23 insertions(+), 24 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormBackgroundGrid.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormBackgroundGrid.tsx index 08dfb32ad..0acc99360 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormBackgroundGrid.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormBackgroundGrid.tsx @@ -14,8 +14,8 @@ export interface CollectionFreeFormViewBackgroundGridProps { nativeDimScaling: () => number; zoomScaling: () => number; layoutDoc: Doc; - cachedCenteringShiftX: number; - cachedCenteringShiftY: number; + centeringShiftX: number; + centeringShiftY: number; } @observer export class CollectionFreeFormBackgroundGrid extends React.Component { @@ -32,7 +32,7 @@ export class CollectionFreeFormBackgroundGrid extends React.Component { const ctx = el?.getContext('2d'); if (ctx) { - const Cx = this.props.cachedCenteringShiftX % renderGridSpace; - const Cy = this.props.cachedCenteringShiftY % renderGridSpace; + const Cx = this.props.centeringShiftX % renderGridSpace; + const Cy = this.props.centeringShiftY % renderGridSpace; ctx.lineWidth = Math.min(1, Math.max(0.5, this.props.zoomScaling())); ctx.setLineDash(gridSpace > 50 ? [3, 3] : [1, 5]); ctx.clearRect(0, 0, w, h); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 791124f50..3fab00968 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -169,17 +169,19 @@ export class CollectionFreeFormView extends CollectionSubView this.freeformData()?.bounds.cx ?? NumCast(this.Document[this.panXFieldKey], NumCast(Cast(this.Document.resolvedDataDoc, Doc, null)?.freeform_panX, 1)); panY = () => this.freeformData()?.bounds.cy ?? NumCast(this.Document[this.panYFieldKey], NumCast(Cast(this.Document.resolvedDataDoc, Doc, null)?.freeform_panY, 1)); zoomScaling = () => this.freeformData()?.scale ?? NumCast(Doc.Layout(this.Document)[this.scaleFieldKey], 1); //, NumCast(DocCast(this.Document.resolvedDataDoc)?.[this.scaleFieldKey], 1)); - PanZoomCenterXf = () => - this._props.isAnnotationOverlay && this.zoomScaling() === 1 ? `` : `translate(${this.cachedCenteringShiftX}px, ${this.cachedCenteringShiftY}px) scale(${this.zoomScaling()}) translate(${-this.panX()}px, ${-this.panY()}px)`; + PanZoomCenterXf = () => (this._props.isAnnotationOverlay && this.zoomScaling() === 1 ? `` : `translate(${this.centeringShiftX}px, ${this.centeringShiftY}px) scale(${this.zoomScaling()}) translate(${-this.panX()}px, ${-this.panY()}px)`); ScreenToContentsXf = () => this.screenToFreeformContentsXf.copy(); getActiveDocuments = () => this.childLayoutPairs.filter(pair => this.isCurrent(pair.layout)).map(pair => pair.layout); isAnyChildContentActive = () => this._props.isAnyChildContentActive(); @@ -1114,9 +1115,7 @@ export class CollectionFreeFormView extends CollectionSubView
); @@ -1812,7 +1811,7 @@ export class CollectionFreeFormView extends CollectionSubView {this.paintFunc ? ( // need this so that any live dashfieldviews will update the underlying text that the code eval reads -- cgit v1.2.3-70-g09d2 From 2caf7b7bb80b663b6ba585f88cdbd2d725f8505e Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 25 Apr 2024 18:49:57 -0400 Subject: pinning freeform contents now captures the layout --- .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 3fab00968..079a5d977 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1412,7 +1412,11 @@ export class CollectionFreeFormView extends CollectionSubView