diff options
Diffstat (limited to 'src/client/views')
4 files changed, 43 insertions, 16 deletions
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index e48994586..76cb119ab 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -236,6 +236,8 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & case DocumentType.MAP: case DocumentType.SCREENSHOT: case DocumentType.VID: docColor = docColor || (Colors.LIGHT_GRAY); break; + case DocumentType.UFACE: docColor = docColor || "dimgray";break; + case DocumentType.FACECOLLECTION: docColor = docColor || Colors.DARK_GRAY;break; case DocumentType.COL: docColor = docColor || (doc && Doc.IsSystem(doc) ? SnappingManager.userBackgroundColor diff --git a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.scss b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.scss index 00297a97d..a72efc948 100644 --- a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.scss +++ b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.scss @@ -5,6 +5,7 @@ top: 0; position: absolute; width: 100%; + height: 100%; h1 { color: white; @@ -25,10 +26,8 @@ .face-document-top { position: relative; top: 0; - margin: auto; width: 100%; left: 0; - height: 60px; } .face-document-image-container { @@ -89,3 +88,11 @@ // } } } + +.faceCollectionBox { + width: 100%; + height: 100%; + top: 0; + left: 0; + position: absolute; +} 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> ); } } diff --git a/src/client/views/search/FaceRecognitionHandler.tsx b/src/client/views/search/FaceRecognitionHandler.tsx index f613f78ce..7c8043219 100644 --- a/src/client/views/search/FaceRecognitionHandler.tsx +++ b/src/client/views/search/FaceRecognitionHandler.tsx @@ -230,6 +230,7 @@ export class FaceRecognitionHandler { * @param imgDoc The document being analyzed. */ private classifyFacesInImage = async (imgDoc: Doc) => { + if (!Doc.UserDoc().recognizeFaceImages) return; const activeDashboard = Doc.ActiveDashboard; if (!this._apiModelReady || !activeDashboard) { this._pendingAPIModelReadyDocs.push(imgDoc); |