diff options
| -rw-r--r-- | src/client/util/CurrentUserUtils.ts | 2 | ||||
| -rw-r--r-- | src/client/util/SettingsManager.tsx | 11 | ||||
| -rw-r--r-- | src/client/views/StyleProvider.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/FaceCollectionBox.scss | 11 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx | 45 | ||||
| -rw-r--r-- | src/client/views/search/FaceRecognitionHandler.tsx | 1 |
6 files changed, 55 insertions, 17 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 0681a21cb..dc0c95121 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -497,7 +497,7 @@ pie title Minerals in my tap water static setupFaceCollection(doc: Doc, field: string) { return DocUtils.AssignDocField(doc, field, (opts) => Docs.Create.FaceCollectionDocument(opts), { - dontRegisterView: true, backgroundColor: "dimgray", ignoreClick: true, title: "Face Collection", isSystem: true, childDragAction: dropActionType.embed, + dontRegisterView: true, ignoreClick: true, title: "Face Collection", isSystem: true, childDragAction: dropActionType.embed, _lockedPosition: true, _type_collection: CollectionViewType.Schema }); } diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 2d8763b63..fde8869e3 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -232,6 +232,17 @@ export class SettingsManager extends React.Component<object> { color={SettingsManager.userColor} /> <Toggle + formLabel="Recognize Face Images" + formLabelPlacement="right" + toggleType={ToggleType.SWITCH} + onClick={() => { + Doc.UserDoc().recognizeFaceImages = !Doc.UserDoc().recognizeFaceImages; + }} + toggleStatus={BoolCast(Doc.UserDoc().recognizeFaceImages)} + size={Size.XSMALL} + color={SettingsManager.userColor} + /> + <Toggle formLabel="Show Full Toolbar" formLabelPlacement="right" toggleType={ToggleType.SWITCH} 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); |