Merge branch 'master' into alyssa-starter

1 files changed, 32 insertions, 30 deletions

diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 8c100f238..76cb119ab 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -1,6 +1,3 @@
-/* eslint-disable jsx-a11y/alt-text */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@mui/material';
@@ -16,13 +13,14 @@ import { Id } from '../../fields/FieldSymbols';
 import { ScriptField } from '../../fields/ScriptField';
 import { BoolCast, Cast, DocCast, ImageCast, NumCast, ScriptCast, StrCast } from '../../fields/Types';
 import { AudioAnnoState } from '../../server/SharedMediaTypes';
-import { emptyPath } from '../../Utils';
 import { CollectionViewType, DocumentType } from '../documents/DocumentTypes';
 import { IsFollowLinkScript } from '../documents/DocUtils';
 import { SnappingManager } from '../util/SnappingManager';
-import { undoBatch, UndoManager } from '../util/UndoManager';
+import { undoable, UndoManager } from '../util/UndoManager';
 import { TreeSort } from './collections/TreeSort';
 import { Colors } from './global/globalEnums';
+import { TagsView } from './TagsView';
+import { CollectionFreeFormDocumentView } from './nodes/CollectionFreeFormDocumentView';
 import { DocumentView, DocumentViewProps } from './nodes/DocumentView';
 import { FieldViewProps } from './nodes/FieldView';
 import { StyleProp } from './StyleProp';
@@ -43,13 +41,13 @@ function togglePaintView(e: React.MouseEvent, doc: Opt<Doc>, props: Opt<FieldVie
 }
 
 export function styleFromLayoutString(doc: Doc, props: FieldViewProps, scale: number) {
-    const style: { [key: string]: any } = {};
+    const style: { [key: string]: string } = {};
     const divKeys = ['width', 'height', 'fontSize', 'transform', 'left', 'backgroundColor', 'left', 'right', 'top', 'bottom', 'pointerEvents', 'position'];
-    const replacer = (match: any, expr: string) =>
+    const replacer = (match: string, expr: string) =>
         // bcz: this executes a script to convert a property expression string:  { script }  into a value
         ScriptField.MakeFunction(expr, { this: Doc.name, scale: 'number' })?.script.run({ this: doc, scale }).result?.toString() ?? '';
     divKeys.forEach((prop: string) => {
-        const p = (props as any)[prop];
+        const p = (props as FieldViewProps & { [key: string]: unknown })[prop];
         typeof p === 'string' && (style[prop] = p?.replace(/{([^.'][^}']+)}/g, replacer));
     });
     return style;
@@ -72,7 +70,7 @@ export function SetFilterOpener(func: () => void) {
 
 // a preliminary implementation of a dash style sheet for setting rendering properties of documents nested within a Tab
 //
-export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & DocumentViewProps>, property: string): any {
+export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & DocumentViewProps>, property: string) {
     const remoteDocHeader = 'author;author_date;noMargin';
     const isCaption = property.includes(':caption');
     const isAnchor = property.includes(':anchor');
@@ -108,11 +106,11 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
     const fieldKey = fieldKeyProp ? fieldKeyProp + '_' : isCaption ? 'caption_' : '';
     const isInk = () => layoutDoc?._layout_isSvg && !LayoutTemplateString;
     const lockedPosition = () => doc && BoolCast(doc._lockedPosition);
-    const titleHeight = () => styleProvider?.(doc, props, StyleProp.TitleHeight);
-    const backgroundCol = () => styleProvider?.(doc, props, StyleProp.BackgroundColor + ':nonTransparent' + (isNonTransparentLevel + 1));
-    const color = () => styleProvider?.(doc, props, StyleProp.Color);
+    const titleHeight = () => styleProvider?.(doc, props, StyleProp.TitleHeight) as number;
+    const backgroundCol = () => styleProvider?.(doc, props, StyleProp.BackgroundColor + ':nonTransparent' + (isNonTransparentLevel + 1)) as string;
+    const color = () => styleProvider?.(doc, props, StyleProp.Color) as string;
     const opacity = () => styleProvider?.(doc, props, StyleProp.Opacity);
-    const layoutShowTitle = () => styleProvider?.(doc, props, StyleProp.ShowTitle);
+    const layoutShowTitle = () => styleProvider?.(doc, props, StyleProp.ShowTitle) as string;
     // prettier-ignore
     switch (property.split(':')[0]) {
         case StyleProp.TreeViewIcon: {
@@ -144,7 +142,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
                         highlightStyle: doc.isGroup ? "dotted": highlightStyle,
                         highlightColor,
                         highlightIndex,
-                        highlightStroke: layoutDoc?.layout_isSvg,
+                        highlightStroke: BoolCast(layoutDoc?.layout_isSvg),
                     };
                 }
             }
@@ -152,7 +150,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
         case StyleProp.DocContents:  return undefined;
         case StyleProp.WidgetColor:  return isAnnotated ? Colors.LIGHT_BLUE : 'dimgrey';
         case StyleProp.Opacity:      return componentView?.isUnstyledView?.() ? 1 : Cast(doc?._opacity, "number", Cast(doc?.opacity, 'number', null));
-        case StyleProp.FontColor:    return StrCast(doc?.[fieldKey + 'fontColor'],  isCaption ? lightOrDark(backgroundCol()) : StrCast(Doc.UserDoc().fontColor,  color()));
+        case StyleProp.FontColor:    return StrCast(doc?.[fieldKey + 'fontColor'],  isCaption ? lightOrDark(backgroundCol()) : StrCast(Doc.UserDoc().fontColor, color()));
         case StyleProp.FontSize:     return StrCast(doc?.[fieldKey + 'fontSize'],   StrCast(Doc.UserDoc().fontSize));
         case StyleProp.FontFamily:   return StrCast(doc?.[fieldKey + 'fontFamily'], StrCast(Doc.UserDoc().fontFamily));
         case StyleProp.FontWeight:   return StrCast(doc?.[fieldKey + 'fontWeight'], StrCast(Doc.UserDoc().fontWeight));
@@ -168,7 +166,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
                     StrCast(
                         doc._layout_showTitle,
                         showTitle?.() ||
-                            (!Doc.IsSystem(doc) && [DocumentType.COL, DocumentType.FUNCPLOT, DocumentType.LABEL, DocumentType.RTF, DocumentType.IMG, DocumentType.VID].includes(doc.type as any)
+                            (!Doc.IsSystem(doc) && [DocumentType.COL, DocumentType.FUNCPLOT, DocumentType.LABEL, DocumentType.RTF, DocumentType.IMG, DocumentType.VID].includes(doc.type as DocumentType)
                                 ? doc.author === ClientUtils.CurrentUserEmail()
                                     ? StrCast(Doc.UserDoc().layout_showTitle)
                                     : remoteDocHeader
@@ -207,7 +205,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
                     };
         }
         case StyleProp.HeaderMargin:
-            return ([CollectionViewType.Stacking, CollectionViewType.NoteTaking, CollectionViewType.Masonry, CollectionViewType.Tree].includes(doc?._type_collection as any) ||
+            return ([CollectionViewType.Stacking, CollectionViewType.NoteTaking, CollectionViewType.Masonry, CollectionViewType.Tree].includes(doc?._type_collection as CollectionViewType) ||
                 (doc?.type === DocumentType.RTF && !layoutShowTitle()?.includes('noMargin')) ||
                 doc?.type === DocumentType.LABEL) &&
                 layoutShowTitle() &&
@@ -238,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
@@ -297,8 +297,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
             if (SnappingManager.ExploreMode || doc?.layout_unrendered) return isInk() ? 'visiblePainted' : 'all';
             if (pointerEvents?.() === 'none') return 'none';
             if (opacity() === 0) return 'none';
-            if (isGroupActive?.() ) return isInk()  ? 'visiblePainted':  (doc?.
-                isGroup )? undefined: 'all' 
+            if (isGroupActive?.() ) return isInk()  ? 'visiblePainted':  (doc?.isGroup ) ? undefined: 'all';
             if (isDocumentActive?.()) return isInk() ? 'visiblePainted' : 'all';
             return undefined; // fixes problem with tree view elements getting pointer events when the tree view is not active
         case StyleProp.Decorations: {
@@ -329,11 +328,12 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
                             // eslint-disable-next-line react/no-unstable-nested-components
                             iconProvider={() => <div className='styleProvider-filterShift'><FaFilter/></div>}
                             closeOnSelect
-                            setSelectedVal={((dv: DocumentView) => {
+                            setSelectedVal={((dvValue: unknown) => {
+                                    const dv = dvValue as DocumentView;
                                     dv.select(false);
                                     SnappingManager.SetPropertiesWidth(250);
                                     _filterOpener?.();
-                                }) as any // Dropdown assumes values are strings or numbers.. 
+                                })  // Dropdown assumes values are strings or numbers.. 
                             }
                             size={Size.XSMALL}
                             width={15}
@@ -345,11 +345,9 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
                             background={showFilterIcon}
                             items={[ ...(dashView ? [dashView]: []), ...(docViewPath?.()??[])]
                                     .filter(dv => StrListCast(dv?.Document.childFilters).length || StrListCast(dv?.Document.childRangeFilters).length)
-                                    .map(dv => ({
-                                text: StrCast(dv?.Document.title),
-                                val: dv as any,
-                                style: {color:SnappingManager.userColor, background:SnappingManager.userBackgroundColor},
-                            } as IListItemProps)) }
+                                    .map(dv => ({ text: StrCast(dv?.Document.title),
+                                                  val: dv as unknown,
+                                                  style: {color:SnappingManager.userColor, background:SnappingManager.userBackgroundColor} } as IListItemProps)) }
                         />
                     </div>
                 );
@@ -367,17 +365,20 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
                     </Tooltip>
                 );
             };
+            const tags = () => props?.DocumentView?.() && CollectionFreeFormDocumentView.from(props.DocumentView()) ? <TagsView View={props.DocumentView()}/> :  null;
             return (
                 <>
                     {paint()}
                     {lock()}
                     {filter()}
                     {audio()}
+                    {tags()}
                 </>
             );
         }
         default:
     }
+    return undefined;
 }
 
 export function DashboardToggleButton(doc: Doc, field: string, onIcon: IconProp, offIcon: IconProp, clickFunc?: () => void) {
@@ -386,12 +387,13 @@ export function DashboardToggleButton(doc: Doc, field: string, onIcon: IconProp,
         <IconButton
             size={Size.XSMALL}
             color={color}
-            icon={<FontAwesomeIcon icon={(doc[field] ? (onIcon as any) : offIcon) as IconProp} />}
-            onClick={undoBatch(
+            icon={<FontAwesomeIcon icon={doc[field] ? onIcon : offIcon} />}
+            onClick={undoable(
                 action((e: React.MouseEvent) => {
                     e.stopPropagation();
                     clickFunc ? clickFunc() : (doc[field] = doc[field] ? undefined : true);
-                })
+                }),
+                'toggle dashboard feature'
             )}
         />
     );
@@ -409,5 +411,5 @@ export function DashboardStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps>
 }
 
 export function returnEmptyDocViewList() {
-    return emptyPath;
+    return [] as DocumentView[];
 }