From 31b1872be1e8d010d2cbe08e92c589505e86d293 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 22 Jul 2024 15:26:27 -0400
Subject: adding type fixes to avoid 'any's

---
 .../CollectionFreeFormLayoutEngines.tsx            | 20 +++---
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 77 +++++++++++-----------
 2 files changed, 51 insertions(+), 46 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
index de51cc73c..79aad0ef2 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
@@ -9,7 +9,7 @@ import { aggregateBounds } from '../../../../Utils';
 
 export interface ViewDefBounds {
     type: string;
-    payload: any;
+    payload: unknown;
     x: number;
     y: number;
     z?: number;
@@ -72,11 +72,15 @@ function toLabel(target: FieldResult<FieldType>) {
  */
 function getTextWidth(text: string, font: string): number {
     // re-use canvas object for better performance
-    const canvas = (getTextWidth as any).canvas || ((getTextWidth as any).canvas = document.createElement('canvas'));
+    const selfStoreHack = getTextWidth as unknown as { canvas: Element };
+    const canvas = (selfStoreHack.canvas = (selfStoreHack.canvas as unknown as HTMLCanvasElement) ?? document.createElement('canvas'));
     const context = canvas.getContext('2d');
-    context.font = font;
-    const metrics = context.measureText(text);
-    return metrics.width;
+    if (context) {
+        context.font = font;
+        const metrics = context.measureText(text);
+        return metrics.width;
+    }
+    return 0;
 }
 
 interface PivotColumn {
@@ -131,13 +135,13 @@ export function computeStarburstLayout(poolData: Map<string, PoolData>, pivotDoc
     return normalizeResults(burstDiam, 12, docMap, poolData, viewDefsToJSX, [], 0, [divider]);
 }
 
-export function computePivotLayout(poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: any) {
+export function computePivotLayout(poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: unknown) {
     const docMap = new Map<string, PoolData>();
     const fieldKey = 'data';
     const pivotColumnGroups = new Map<FieldResult<FieldType>, PivotColumn>();
 
     let nonNumbers = 0;
-    const pivotFieldKey = toLabel(engineProps?.pivotField ?? pivotDoc._pivotField) || 'author';
+    const pivotFieldKey = toLabel((engineProps as { pivotField?: string })?.pivotField ?? pivotDoc._pivotField) || 'author';
     childPairs.forEach(pair => {
         const listValue = Cast(pair.layout[pivotFieldKey], listSpec('string'), null);
 
@@ -265,7 +269,7 @@ export function computePivotLayout(poolData: Map<string, PoolData>, pivotDoc: Do
         y: -maxColHeight + pivotAxisWidth,
         width: pivotAxisWidth * numCols * expander,
         height: maxColHeight,
-        payload: pivotColumnGroups.get(key)!.filters,
+        payload: pivotColumnGroups.get(key)?.filters,
     }));
     groupNames.push(...dividers);
     // eslint-disable-next-line no-use-before-define
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 812aa5fa3..39c3da7a5 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1,6 +1,4 @@
 /* eslint-disable react/jsx-props-no-spreading */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
 import { Bezier } from 'bezier-js';
 import { Colors } from 'browndash-components';
 import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx';
@@ -9,7 +7,7 @@ import { computedFn } from 'mobx-utils';
 import * as React from 'react';
 import { ClientUtils, DashColor, lightOrDark, OmitKeys, returnFalse, returnZero, setupMoveUpEvents, UpdateIcon } from '../../../../ClientUtils';
 import { DateField } from '../../../../fields/DateField';
-import { Doc, DocListCast, Field, FieldType, Opt } from '../../../../fields/Doc';
+import { Doc, DocListCast, Field, FieldType, Opt, StrListCast } from '../../../../fields/Doc';
 import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveEraserWidth, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, ActiveIsInkMask, SetActiveInkColor, SetActiveInkWidth } from '../../nodes/DocumentView';
 import { DocData, Height, Width } from '../../../../fields/DocSymbols';
 import { Id } from '../../../../fields/FieldSymbols';
@@ -46,7 +44,7 @@ import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
 import { OpenWhere, OpenWhereMod } from '../../nodes/OpenWhere';
 import { PinDocView, PinProps } from '../../PinFuncs';
 import { StyleProp } from '../../StyleProp';
-import { CollectionSubView } from '../CollectionSubView';
+import { CollectionSubView, SubCollectionViewProps } from '../CollectionSubView';
 import { TreeViewType } from '../CollectionTreeViewType';
 import { CollectionFreeFormBackgroundGrid } from './CollectionFreeFormBackgroundGrid';
 import { CollectionFreeFormClusters } from './CollectionFreeFormClusters';
@@ -71,7 +69,7 @@ export interface collectionFreeformViewProps {
     childPointerEvents?: () => string | undefined;
     viewField?: string;
     noOverlay?: boolean; // used to suppress docs in the overlay (z) layer (ie, for minimap since overlay doesn't scale)
-    engineProps?: any;
+    engineProps?: unknown;
     getScrollHeight?: () => number | undefined;
 }
 
@@ -123,14 +121,14 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     @observable _marqueeViewRef = React.createRef<MarqueeView>();
     @observable _brushedView: { width: number; height: number; panX: number; panY: number } | undefined = undefined; // highlighted region of freeform canvas used by presentations to indicate a region
     @observable GroupChildDrag: boolean = false; // child document view being dragged.  needed to update drop areas of groups when a group item is dragged.
-    @observable _childPointerEvents: 'none' | 'all' | 'visiblepainted' | undefined = undefined;
+    @observable _childPointerEvents: 'none' | 'all' | 'visiblePainted' | undefined = undefined;
     @observable _lightboxDoc: Opt<Doc> = undefined;
     @observable _paintedId = 'id' + Utils.GenerateGuid().replace(/-/g, '');
     @observable _keyframeEditing = false;
     @observable _eraserX: number = 0;
     @observable _eraserY: number = 0;
     @observable _showEraserCircle: boolean = false; // to determine whether the radius eraser should show
-    constructor(props: collectionFreeformViewProps) {
+    constructor(props: SubCollectionViewProps) {
         super(props);
         makeObservable(this);
     }
@@ -140,12 +138,12 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     @computed get childPointerEvents() {
         return SnappingManager.IsResizing
             ? 'none'
-            : this._props.childPointerEvents?.() ??
+            : (this._props.childPointerEvents?.() ??
                   (this._props.viewDefDivClick || //
                   (this.layoutEngine === computePassLayout.name && !this._props.isSelected()) ||
                   this.isContentActive() === false
                       ? 'none'
-                      : this._props.pointerEvents?.());
+                      : this._props.pointerEvents?.()));
     }
     @computed get contentViews() {
         const viewsMask = this._layoutElements.filter(ele => ele.bounds && !ele.bounds.z && ele.inkMask !== -1 && ele.inkMask !== undefined).map(ele => ele.ele);
@@ -185,7 +183,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             .transform(this.panZoomXf);
     }
     @computed get backgroundColor() {
-        return this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor);
+        return this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor) as string;
     }
     @computed get fitWidth() {
         return this._props.fitWidth?.(this.Document) ?? this.layoutDoc.layout_fitWidth;
@@ -357,7 +355,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
      * @param options
      * @returns
      */
-    focus = (anchor: Doc, options: FocusViewOptions): any => {
+    focus = (anchor: Doc, options: FocusViewOptions) => {
         if (anchor.isGroup && !options.docTransform && options.contextPath?.length) {
             // don't focus on group if there's a context path because we're about to focus on a group item
             // which will override any group focus. (If we allowed the group to focus, it would mark didMove even if there were no net movement)
@@ -374,14 +372,14 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         const xfToCollection = options?.docTransform ?? Transform.Identity();
         const savedState = { panX: NumCast(this.Document[this.panXFieldKey]), panY: NumCast(this.Document[this.panYFieldKey]), scale: options?.willZoomCentered ? this.Document[this.scaleFieldKey] : undefined };
         const cantTransform = this.fitContentsToBox || ((this.Document.isGroup || this.layoutDoc._lockedTransform) && !DocumentView.LightboxDoc());
-        const { panX, panY, scale } = cantTransform || (!options.willPan && !options.willZoomCentered) ? savedState : this.calculatePanIntoView(anchor, xfToCollection, options?.willZoomCentered ? options?.zoomScale ?? 0.75 : undefined);
+        const { panX, panY, scale } = cantTransform || (!options.willPan && !options.willZoomCentered) ? savedState : this.calculatePanIntoView(anchor, xfToCollection, options?.willZoomCentered ? (options?.zoomScale ?? 0.75) : undefined);
 
         // focus on the document in the collection
         const didMove = !cantTransform && !anchor.z && (panX !== savedState.panX || panY !== savedState.panY || scale !== savedState.scale);
         if (didMove) options.didMove = true;
         // glr: freeform transform speed can be set by adjusting presentation_transition field - needs a way of knowing when presentation is not active...
         if (didMove) {
-            const focusTime = options?.instant ? 0 : options.zoomTime ?? 500;
+            const focusTime = options?.instant ? 0 : (options.zoomTime ?? 500);
             (options.zoomScale ?? options.willZoomCentered) && scale && (this.Document[this.scaleFieldKey] = scale);
             this.setPan(panX, panY, focusTime); // docs that are floating in their collection can't be panned to from their collection -- need to propagate the pan to a parent freeform somehow
             return focusTime;
@@ -1178,6 +1176,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     // for some reason bezier.js doesn't handle the case of intersecting a linear curve, so we wrap the intersection
     // call in a test for linearity
     bintersects = (curve: Bezier, otherCurve: Bezier) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if ((curve as any)._linear) {
             // bezier.js doesn't intersect properly if the curve is actually a line -- so get intersect other curve against this line, then figure out the t coordinates of the intersection on this line
             const intersections = otherCurve.lineIntersects({ p1: curve.points[0], p2: curve.points[3] });
@@ -1187,6 +1186,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 return intT ? [intT] : [];
             }
         }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if ((otherCurve as any)._linear) {
             return curve.lineIntersects({ p1: otherCurve.points[0], p2: otherCurve.points[3] });
         }
@@ -1478,7 +1478,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         return ret;
     };
     childPointerEventsFunc = () => this._childPointerEvents;
-    childContentsActive = () => (this._props.childContentsActive ?? this.isContentActive() === false ? returnFalse : emptyFunction)();
+    childContentsActive = () => ((this._props.childContentsActive ?? this.isContentActive() === false) ? returnFalse : emptyFunction)();
     getChildDocView(entry: PoolData) {
         const childLayout = entry.pair.layout;
         const childData = entry.pair.data;
@@ -1603,7 +1603,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         };
     }
 
-    onViewDefDivClick = (e: React.MouseEvent, payload: any) => {
+    onViewDefDivClick = (e: React.MouseEvent, payload: unknown) => {
         (this._props.viewDefDivClick || ScriptCast(this.Document.onViewDefDivClick))?.script.run({ this: this.Document, payload });
         e.stopPropagation();
     };
@@ -1637,7 +1637,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                       ele: (
                           <div
                               className="collectionFreeform-customDiv"
-                              title={viewDef.payload?.join(' ')}
+                              title={StrListCast(viewDef.payload as string).join(' ')}
                               key={'div' + x + y + z + viewDef.payload}
                               onClick={e => this.onViewDefDivClick(e, viewDef)}
                               style={{ width, height, backgroundColor: color, transform }}
@@ -1658,7 +1658,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
 
     doEngineLayout(
         poolData: Map<string, PoolData>,
-        engine: (poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: any) => ViewDefResult[]
+        engine: (poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: unknown) => ViewDefResult[]
     ) {
         return engine(poolData, this.Document, this.childLayoutPairs, [this._props.PanelWidth(), this._props.PanelHeight()], this.viewDefsToJSX, this._props.engineProps);
     }
@@ -1688,7 +1688,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             .forEach(entry =>
                 elements.push({
                     ele: this.getChildDocView(entry[1]),
-                    bounds: (entry[1].opacity === 0 ? { payload:undefined, type:"", ...entry[1], width: 0, height: 0 } : { payload:undefined,  type:"",...entry[1] }),
+                    bounds: entry[1].opacity === 0 ? { payload: undefined, type: '', ...entry[1], width: 0, height: 0 } : { payload: undefined, type: '', ...entry[1] },
                     inkMask: BoolCast(entry[1].pair.layout.stroke_isInkMask) ? NumCast(entry[1].pair.layout.opacity, 1) : -1,
                 })
             );
@@ -1771,7 +1771,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 this._disposers.pointerevents = reaction(
                     () => this.childPointerEvents,
                     pointerevents => {
-                        this._childPointerEvents = pointerevents as any;
+                        this._childPointerEvents = pointerevents as 'none' | 'all' | 'visiblePainted' | undefined;
                     },
                     { fireImmediately: true }
                 );
@@ -1812,24 +1812,25 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
 
     updateIcon = () => {
         const contentDiv = this.DocumentView?.().ContentDiv;
-        contentDiv && UpdateIcon(
-            this.layoutDoc[Id] + '-icon' + new Date().getTime(),
-            contentDiv,
-            NumCast(this.layoutDoc._width),
-            NumCast(this.layoutDoc._height),
-            this._props.PanelWidth(),
-            this._props.PanelHeight(),
-            0,
-            1,
-            false,
-            '',
-            (iconFile, nativeWidth, nativeHeight) => {
-                this.dataDoc.icon = new ImageField(iconFile);
-                this.dataDoc.icon_nativeWidth = nativeWidth;
-                this.dataDoc.icon_nativeHeight = nativeHeight;
-            }
-        );
-    }
+        contentDiv &&
+            UpdateIcon(
+                this.layoutDoc[Id] + '-icon' + new Date().getTime(),
+                contentDiv,
+                NumCast(this.layoutDoc._width),
+                NumCast(this.layoutDoc._height),
+                this._props.PanelWidth(),
+                this._props.PanelHeight(),
+                0,
+                1,
+                false,
+                '',
+                (iconFile, nativeWidth, nativeHeight) => {
+                    this.dataDoc.icon = new ImageField(iconFile);
+                    this.dataDoc.icon_nativeWidth = nativeWidth;
+                    this.dataDoc.icon_nativeHeight = nativeHeight;
+                }
+            );
+    };
 
     @action
     onCursorMove = (e: React.PointerEvent) => {
@@ -2134,7 +2135,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 onDragOver={e => e.preventDefault()}
                 onContextMenu={this.onContextMenu}
                 style={{
-                    pointerEvents: this._props.isContentActive() && SnappingManager.IsDragging ? 'all' : (this._props.pointerEvents?.() as any),
+                    pointerEvents: this._props.isContentActive() && SnappingManager.IsDragging ? 'all' : this._props.pointerEvents?.(),
                     textAlign: this.isAnnotationOverlay ? 'initial' : undefined,
                     transform: `scale(${this.nativeDimScaling})`,
                     width: `${100 / this.nativeDimScaling}%`,
-- 
cgit v1.2.3-70-g09d2