diff options
| -rw-r--r-- | src/client/views/TagsView.tsx | 4 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx | 17 | ||||
| -rw-r--r-- | src/client/views/search/FaceRecognitionHandler.tsx | 5 |
3 files changed, 19 insertions, 7 deletions
diff --git a/src/client/views/TagsView.tsx b/src/client/views/TagsView.tsx index 394162f46..82c85ddf0 100644 --- a/src/client/views/TagsView.tsx +++ b/src/client/views/TagsView.tsx @@ -252,6 +252,10 @@ export class TagsView extends ObservableReactComponent<TagViewProps> { return this._isEditing && DocumentView.SelectedDocs().includes(this._props.View.Document); } + /** + * Shows or hides the editing UI for adding/removing Doc tags + * @param editing + */ @action setToEditing = (editing = true) => { this._isEditing = editing; diff --git a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx index 7820af8aa..662436ddc 100644 --- a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx +++ b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx @@ -42,7 +42,6 @@ export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() { return FieldView.LayoutString(UniqueFaceBox, fieldKey); } private _dropDisposer?: DragManager.DragDropDisposer; - private _oldWheel: HTMLElement | null = null; private _disposers: { [key: string]: IReactionDisposer } = {}; private _lastHeight = 0; @@ -50,8 +49,10 @@ export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() { super(props); makeObservable(this); } + @observable _headerRef: HTMLDivElement | null = null; @observable _listRef: HTMLDivElement | null = null; + observer = new ResizeObserver(a => { this._props.setHeight?.( (this.props.Document._face_showImages ? 20 : 0) + // @@ -75,6 +76,7 @@ export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() { this.observer.disconnect(); Object.keys(this._disposers).forEach(key => this._disposers[key]()); } + protected createDropTarget = (ele: HTMLDivElement) => { this._dropDisposer?.(); ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.Document)); @@ -111,7 +113,8 @@ export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() { } /** - * Toggles whether a Face Document displays its associated docs. + * Toggles whether a Face Document displays its associated docs. This saves and restores the last height of the Doc since + * toggling the associated Documentss overwrites the Doc height. */ onDisplayClick() { this.Document._face_showImages && (this._lastHeight = NumCast(this.Document.height)); @@ -134,6 +137,9 @@ export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() { FaceRecognitionHandler.UniqueFaceRemoveFaceImage(imgDoc, this.Document); }, 'remove doc from face'); + /** + * This stops scroll wheel events when they are used to scroll the face collection. + */ onPassiveWheel = (e: WheelEvent) => e.stopPropagation(); render() { @@ -161,9 +167,8 @@ export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() { pointerEvents: this._props.isContentActive() ? undefined : 'none', }} ref={action((ele: HTMLDivElement | null) => { + this._listRef?.removeEventListener('wheel', this.onPassiveWheel); this._listRef = ele; - this._oldWheel?.removeEventListener('wheel', this.onPassiveWheel); - this._oldWheel = ele; // prevent wheel events from passively propagating up through containers and prevents containers from preventDefault which would block scrolling ele?.addEventListener('wheel', this.onPassiveWheel, { passive: false }); })}> @@ -220,6 +225,10 @@ export class FaceCollectionBox extends ViewBoxBaseComponent<FieldViewProps>() { moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean): boolean => !!(this._props.removeDocument?.(doc) && addDocument?.(doc)); + /** + * this changes style provider requests that target the dashboard to requests that target the face collection box which is what's actually being rendered. + * This is needed, for instance, to get the default background color from the face collection, not the dashboard. + */ stackingStyleProvider = (doc: Doc | undefined, props: Opt<FieldViewProps>, property: string) => { if (doc === Doc.ActiveDashboard) return this._props.styleProvider?.(this.Document, this._props, property); return this._props.styleProvider?.(doc, this._props, property); diff --git a/src/client/views/search/FaceRecognitionHandler.tsx b/src/client/views/search/FaceRecognitionHandler.tsx index e35f860ab..8513ec94d 100644 --- a/src/client/views/search/FaceRecognitionHandler.tsx +++ b/src/client/views/search/FaceRecognitionHandler.tsx @@ -5,11 +5,10 @@ import { DocData } from '../../../fields/DocSymbols'; import { List } from '../../../fields/List'; import { listSpec } from '../../../fields/Schema'; import { Cast, ImageCast, NumCast, StrCast } from '../../../fields/Types'; -import { DocumentType } from '../../documents/DocumentTypes'; -import { DocumentManager } from '../../util/DocumentManager'; import { ImageField } from '../../../fields/URLField'; -import { UniqueFaceBox } from '../collections/collectionFreeForm/FaceCollectionBox'; +import { DocumentType } from '../../documents/DocumentTypes'; import { Docs } from '../../documents/Documents'; +import { DocumentManager } from '../../util/DocumentManager'; /** * A singleton class that handles face recognition and manages face Doc collections for each face found. |