From 65a1a272b15fb9c08ef75a12946d7f3751a500c7 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 19 Sep 2024 02:54:28 -0400 Subject: added stop propagation for clicking on tags and icon tags. fixed dragging crash from doc nested in card view to card view. still needs more work for card view to honor canEmbed --- src/client/views/TagsView.tsx | 25 +++++++++++++++-- .../views/collections/CollectionCardDeckView.tsx | 32 +++++++++++----------- .../views/collections/CollectionNoteTakingView.tsx | 1 - .../collectionFreeForm/CollectionFreeFormView.tsx | 1 - src/client/views/nodes/IconTagBox.tsx | 14 ++++++---- 5 files changed, 47 insertions(+), 26 deletions(-) (limited to 'src') diff --git a/src/client/views/TagsView.tsx b/src/client/views/TagsView.tsx index a9224e437..cae30218c 100644 --- a/src/client/views/TagsView.tsx +++ b/src/client/views/TagsView.tsx @@ -207,7 +207,10 @@ export class TagItem extends ObservableReactComponent { return false; }, returnFalse, - emptyFunction + clickEv => { + clickEv.stopPropagation(); + this._props.setToEditing(); + } ); e.preventDefault(); }; @@ -220,7 +223,7 @@ export class TagItem extends ObservableReactComponent { this._props.tagDoc && setTimeout(() => this._props.docs.forEach(doc => TagItem.addTagToDoc(doc, this._props.tag))); // bcz: hack to make sure that Docs are added to their tag Doc collection since metadata can get set anywhere without a guard triggering an add to the collection const metadata = this._props.tag.startsWith('@') ? this._props.tag.replace(/^@/, '') : ''; return ( -
+
{metadata ? ( {'@' + metadata}  @@ -364,7 +367,23 @@ export class TagsView extends ObservableReactComponent {
{this._props.Views.length === 1 && !this.View.showTags ? null : ( // - this.setToEditing(!this._isEditing)} icon={} /> + + setupMoveUpEvents( + this, + e, + returnFalse, + emptyFunction, + upEv => { + this.setToEditing(!this._isEditing); + upEv.stopPropagation(); + } + ) + } + icon={} + /> )} {Array.from(tagsList) diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index 8fea3dbd6..cab7d51e4 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -6,6 +6,7 @@ import { emptyFunction } from '../../../Utils'; import { Doc, StrListCast } from '../../../fields/Doc'; import { DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; +import { List } from '../../../fields/List'; import { BoolCast, DateCast, DocCast, NumCast, RTFCast, ScriptCast, StrCast } from '../../../fields/Types'; import { URLField } from '../../../fields/URLField'; import { gptImageLabel } from '../../apis/gpt/GPT'; @@ -21,7 +22,6 @@ import { DocumentView } from '../nodes/DocumentView'; import { GPTPopup, GPTPopupMode } from '../pdf/GPTPopup/GPTPopup'; import './CollectionCardDeckView.scss'; import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView'; -import { List } from '../../../fields/List'; enum cardSortings { Time = 'time', @@ -51,7 +51,6 @@ export class CollectionCardView extends CollectionSubView() { @observable _docRefs = new ObservableMap(); @observable _maxRowCount = 10; @observable _docDraggedIndex: number = -1; - @observable _isACardBeingDragged: boolean = false; @observable overIndex: number = -1; static imageUrlToBase64 = async (imageUrl: string): Promise => { @@ -76,7 +75,6 @@ export class CollectionCardView extends CollectionSubView() { makeObservable(this); this.setRegenerateCallback(); } - protected createDashEventsTarget = (ele: HTMLDivElement | null) => { this._dropDisposer?.(); if (ele) { @@ -269,11 +267,10 @@ export class CollectionCardView extends CollectionSubView() { */ @action - onPointerMove = (e: React.PointerEvent) => { - if (DragManager.docsBeingDragged.length != 0) { - this._isACardBeingDragged = true; - - const newIndex = this.findCardDropIndex(e.clientX, e.clientY); + onPointerMove = (x: number, y: number) => { + this._docDraggedIndex = -1; + if (DragManager.docsBeingDragged.length) { + const newIndex = this.findCardDropIndex(x, y); if (newIndex !== this._docDraggedIndex && newIndex != -1) { this._docDraggedIndex = newIndex; @@ -297,18 +294,19 @@ export class CollectionCardView extends CollectionSubView() { onInternalDrop = undoable( action((e: Event, de: DragManager.DropEvent) => { if (de.complete.docDragData) { - this._isACardBeingDragged = false; const dragIndex = this._docDraggedIndex; - if (dragIndex > -1) { + const draggedDoc = DragManager.docsBeingDragged[0]; + if (dragIndex > -1 && draggedDoc) { this._docDraggedIndex = -1; - const draggedDoc = DragManager.docsBeingDragged[0]; const sorted = this.sortedDocs; const originalIndex = sorted.findIndex(doc => doc === draggedDoc); this.Document.cardSort = ''; - sorted.splice(originalIndex, 1); + originalIndex !== -1 && sorted.splice(originalIndex, 1); sorted.splice(dragIndex, 0, draggedDoc); - this.dataDoc[this.fieldKey] = new List(sorted); + if (de.complete.docDragData.removeDocument?.(draggedDoc)) { + this.dataDoc[this.fieldKey] = new List(sorted); + } } e.stopPropagation(); return true; @@ -397,7 +395,7 @@ export class CollectionCardView extends CollectionSubView() { const draggedDoc = DragManager.docsBeingDragged[0]; const originalIndex = docs.findIndex(doc => doc === draggedDoc); - docs.splice(originalIndex, 1); + originalIndex !== -1 && docs.splice(originalIndex, 1); docs.splice(dragIndex, 0, draggedDoc); } @@ -619,7 +617,8 @@ export class CollectionCardView extends CollectionSubView() { const realIndex = sortedDocs.indexOf(doc); const calcRowIndex = this.overflowIndexCalc(realIndex); const amCards = this.overflowAmCardsCalc(realIndex); - const isSelected = DocumentView.SelectedDocs().includes(doc); + const view = DocumentView.getDocumentView(doc, this.DocumentView?.()); + const isSelected = view?.ComponentView?.isAnyChildContentActive?.() || view?.IsSelected ? true : false; const childScreenToLocal = () => { this._forceChildXf; @@ -645,6 +644,7 @@ export class CollectionCardView extends CollectionSubView() { key={doc[Id]} className={`card-item${isSelected ? '-active' : anySelected ? '-inactive' : ''}`} onPointerUp={() => { + if (DocumentView.SelectedDocs().includes(doc)) return; // this turns off documentDecorations during a transition, then turns them back on afterward. SnappingManager.SetIsResizing(doc[Id]); setTimeout( @@ -675,9 +675,9 @@ export class CollectionCardView extends CollectionSubView() { return (
this.onPointerMove(e)} className="collectionCardView-outer" ref={(ele: HTMLDivElement | null) => this.createDashEventsTarget(ele)} + onPointerMove={e => this.onPointerMove(e.clientX, e.clientY)} onDrop={this.onExternalDrop.bind(this)} style={{ background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) as string, diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index e1f0a3e41..ac8e37358 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -653,7 +653,6 @@ export class CollectionNoteTakingView extends CollectionSubView() { const sections = Array.from(this.Sections.entries()); return sections.reduce((list, sec, i) => { list.push(this.sectionNoteTaking(sec[0], sec[1])); - // eslint-disable-next-line react/no-array-index-key i !== sections.length - 1 && list.push(); return list; }, [] as JSX.Element[]); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index cbbf063b4..f106eba26 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1783,7 +1783,6 @@ export class CollectionFreeFormView extends CollectionSubView { -- cgit v1.2.3-70-g09d2