From 3f31aaa6b667e7b5f31b2f2b4e13a0879348602c Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 26 Aug 2024 16:46:13 -0400
Subject: added recognizeFaces for face images

---
 .../collectionFreeForm/FaceCollectionBox.tsx       | 45 +++++++++++++++-------
 1 file changed, 31 insertions(+), 14 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx')

diff --git a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx
index 33fc3c210..7820af8aa 100644
--- a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx
+++ b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx
@@ -43,6 +43,8 @@ export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() {
     }
     private _dropDisposer?: DragManager.DragDropDisposer;
     private _oldWheel: HTMLElement | null = null;
+    private _disposers: { [key: string]: IReactionDisposer } = {};
+    private _lastHeight = 0;
 
     constructor(props: FieldViewProps) {
         super(props);
@@ -50,13 +52,17 @@ export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() {
     }
     @observable _headerRef: HTMLDivElement | null = null;
     @observable _listRef: HTMLDivElement | null = null;
-    _disposers: { [key: string]: IReactionDisposer } = {};
-    _lastHeight = 0;
-    observer = new ResizeObserver(() => this._props.setHeight?.((this.props.Document._face_showImages ? 20 : 0) + (!this._headerRef ? 0 : DivHeight(this._headerRef)) + (!this._listRef ? 0 : DivHeight(this._listRef))));
+    observer = new ResizeObserver(a => {
+        this._props.setHeight?.(
+            (this.props.Document._face_showImages ? 20 : 0) + //
+                (!this._headerRef ? 0 : DivHeight(this._headerRef)) +
+                (!this._listRef ? 0 : DivHeight(this._listRef))
+        );
+    });
 
     componentDidMount(): void {
         this._disposers.refList = reaction(
-            () => ({ refList: [this._headerRef, this._listRef], autoHeight: this.layoutDoc._layout_autoHeight && !DocumentView.LightboxContains(this.DocumentView?.()) }),
+            () => ({ refList: [this._headerRef, this._listRef], autoHeight: this.layoutDoc._layout_autoHeight }),
             ({ refList, autoHeight }) => {
                 this.observer.disconnect();
                 if (autoHeight) refList.filter(r => r).forEach(r => this.observer.observe(r!));
@@ -66,7 +72,8 @@ export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() {
     }
 
     componentWillUnmount(): void {
-        //this._disposers?.();
+        this.observer.disconnect();
+        Object.keys(this._disposers).forEach(key => this._disposers[key]());
     }
     protected createDropTarget = (ele: HTMLDivElement) => {
         this._dropDisposer?.();
@@ -213,17 +220,27 @@ 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));
 
+    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);
+    };
     render() {
         return !Doc.ActiveDashboard ? null : (
-            <CollectionStackingView
-                {...this._props} //
-                Document={Doc.ActiveDashboard}
-                fieldKey="myUniqueFaces"
-                moveDocument={this.moveDocument}
-                isContentActive={returnTrue}
-                isAnyChildContentActive={returnTrue}
-                childHideDecorations={true}
-            />
+            <div className="faceCollectionBox">
+                <div className="documentButtonMenu">
+                    <div className="documentExplanation" onClick={action(() => (Doc.UserDoc().recognizeFaceImages = !Doc.UserDoc().recognizeFaceImages))}>{`Face Recgognition is ${Doc.UserDoc().recognizeFaceImages ? 'on' : 'off'}`}</div>
+                </div>
+                <CollectionStackingView
+                    {...this._props} //
+                    styleProvider={this.stackingStyleProvider}
+                    Document={Doc.ActiveDashboard}
+                    fieldKey="myUniqueFaces"
+                    moveDocument={this.moveDocument}
+                    isContentActive={returnTrue}
+                    isAnyChildContentActive={returnTrue}
+                    childHideDecorations={true}
+                />
+            </div>
         );
     }
 }
-- 
cgit v1.2.3-70-g09d2

