Merge branch 'master' into alyssa-starter

1 files changed, 21 insertions, 18 deletions

diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 55f28f415..2e82371cb 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -20,6 +20,7 @@
     
     Most of the operations that can be performed on an InkStroke (eg delete a point, rotate, stretch) are implemented in the InkStrokeProperties helper class
 */
+import { Property } from 'csstype';
 import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -28,6 +29,7 @@ import { Doc } from '../../fields/Doc';
 import { InkData, InkField } from '../../fields/InkField';
 import { BoolCast, Cast, NumCast, RTFCast, StrCast } from '../../fields/Types';
 import { TraceMobx } from '../../fields/util';
+import { Gestures } from '../../pen-gestures/GestureTypes';
 import { CognitiveServices } from '../cognitive_services/CognitiveServices';
 import { Docs } from '../documents/Documents';
 import { DocumentType } from '../documents/DocumentTypes';
@@ -35,7 +37,6 @@ import { InteractionUtils } from '../util/InteractionUtils';
 import { SnappingManager } from '../util/SnappingManager';
 import { UndoManager } from '../util/UndoManager';
 import { ContextMenu } from './ContextMenu';
-import { ViewBoxInterface } from './ViewBoxInterface';
 import { ViewBoxAnnotatableComponent } from './DocComponent';
 import { Colors } from './global/globalEnums';
 import { InkControlPtHandles, InkEndPtHandles } from './InkControlPtHandles';
@@ -46,7 +47,9 @@ import { FieldView, FieldViewProps } from './nodes/FieldView';
 import { FormattedTextBox, FormattedTextBoxProps } from './nodes/formattedText/FormattedTextBox';
 import { PinDocView, PinProps } from './PinFuncs';
 import { StyleProp } from './StyleProp';
+import { ViewBoxInterface } from './ViewBoxInterface';
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { INK_MASK_SIZE } = require('./global/globalCssVariables.module.scss'); // prettier-ignore
 
 @observer
@@ -292,7 +295,7 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>()
      * @param boundsTop the screen space top coordinate of the ink stroke
      * @returns the JSX controls for displaying an editing UI for the stroke (control point & tangent handles)
      */
-    componentUI = (boundsLeft: number, boundsTop: number) => {
+    componentUI = (boundsLeft: number, boundsTop: number): null | JSX.Element => {
         const inkDoc = this.Document;
         const { inkData, inkStrokeWidth } = this.inkScaledData();
         const screenSpaceCenterlineStrokeWidth = Math.min(3, inkStrokeWidth * this.ScreenToLocalBoxXf().inverse().Scale); // the width of the blue line widget that shows the centerline of the ink stroke
@@ -317,8 +320,8 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>()
                     Colors.MEDIUM_BLUE,
                     screenInkWidth[0],
                     screenSpaceCenterlineStrokeWidth,
-                    StrCast(inkDoc.stroke_lineJoin),
-                    StrCast(this.layoutDoc.stroke_lineCap),
+                    StrCast(inkDoc.stroke_lineJoin) as Property.StrokeLinejoin,
+                    StrCast(this.layoutDoc.stroke_lineCap) as Property.StrokeLinecap,
                     StrCast(inkDoc.stroke_bezier),
                     'none',
                     startMarker,
@@ -327,7 +330,7 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>()
                     StrCast(inkDoc.stroke_dash),
                     1,
                     1,
-                    '',
+                    '' as Gestures,
                     'none',
                     1.0,
                     false
@@ -344,12 +347,12 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>()
     };
     @computed get fillColor(): string {
         const isInkMask = BoolCast(this.layoutDoc.stroke_isInkMask);
-        return isInkMask ? DashColor(StrCast(this.layoutDoc.fillColor, 'transparent')).blacken(0).rgb().toString() : this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FillColor) ?? 'transparent';
+        return isInkMask ? DashColor(StrCast(this.layoutDoc.fillColor, 'transparent')).blacken(0).rgb().toString() : ((this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FillColor) as 'string') ?? 'transparent');
     }
     @computed get strokeColor() {
         const { inkData } = this.inkScaledData();
         const { fillColor } = this;
-        return !InkingStroke.IsClosed(inkData) && fillColor && fillColor !== 'transparent' ? fillColor : this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) ?? StrCast(this.layoutDoc.color);
+        return !InkingStroke.IsClosed(inkData) && fillColor && fillColor !== 'transparent' ? fillColor : ((this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as 'string') ?? StrCast(this.layoutDoc.color));
     }
     render() {
         TraceMobx();
@@ -370,8 +373,8 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>()
             });
         }
         const highlight = !this.controlUndo && this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Highlighting);
-        const highlightIndex = highlight?.highlightIndex;
-        const highlightColor = !this._props.isSelected() && !isInkMask && highlight?.highlightIndex ? highlight?.highlightColor : undefined;
+        const { highlightIndex, highlightColor: hColor } = (highlight as { highlightIndex?: number; highlightColor?: string }) ?? { highlightIndex: undefined, highlightColor: undefined };
+        const highlightColor = !this._props.isSelected() && !isInkMask && highlightIndex ? hColor : undefined;
         const color = StrCast(this.layoutDoc.stroke_outlineColor, !closed && fillColor && fillColor !== 'transparent' ? StrCast(this.layoutDoc.color, 'transparent') : 'transparent');
 
         // Visually renders the polygonal line made by the user.
@@ -382,8 +385,8 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>()
             this.strokeColor,
             inkStrokeWidth,
             inkStrokeWidth,
-            StrCast(this.layoutDoc.stroke_lineJoin),
-            StrCast(this.layoutDoc.stroke_lineCap),
+            StrCast(this.layoutDoc.stroke_lineJoin) as Property.StrokeLinejoin,
+            StrCast(this.layoutDoc.stroke_lineCap) as Property.StrokeLinecap,
             StrCast(this.layoutDoc.stroke_bezier),
             !closed ? 'none' : fillColor === 'transparent' ? 'none' : fillColor,
             startMarker,
@@ -392,7 +395,7 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>()
             StrCast(this.layoutDoc.stroke_dash),
             inkScaleX,
             inkScaleY,
-            '',
+            '' as Gestures,
             'none',
             1.0,
             false,
@@ -401,16 +404,16 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>()
         );
         const higlightMargin = Math.min(12, Math.max(2, 0.3 * inkStrokeWidth));
         // Invisible polygonal line that enables the ink to be selected by the user.
-        const clickableLine = (downHdlr?: (e: React.PointerEvent) => void, mask: boolean = false): any =>
+        const clickableLine = (downHdlr?: (e: React.PointerEvent) => void, mask: boolean = false) =>
             InteractionUtils.CreatePolyline(
                 inkData,
                 inkLeft,
                 inkTop,
-                mask && color === 'transparent' ? this.strokeColor : highlightColor ?? color,
+                mask && color === 'transparent' ? this.strokeColor : (highlightColor ?? color),
                 inkStrokeWidth,
                 inkStrokeWidth + NumCast(this.layoutDoc.stroke_borderWidth) + (fillColor ? (closed ? higlightMargin : (highlightIndex ?? 0) + higlightMargin) : higlightMargin),
-                StrCast(this.layoutDoc.stroke_lineJoin),
-                StrCast(this.layoutDoc.stroke_lineCap),
+                StrCast(this.layoutDoc.stroke_lineJoin) as Property.StrokeLinejoin,
+                StrCast(this.layoutDoc.stroke_lineCap) as Property.StrokeLinecap,
                 StrCast(this.layoutDoc.stroke_bezier),
                 !closed || !fillColor || DashColor(fillColor).alpha() === 0 ? 'none' : fillColor,
                 startMarker,
@@ -419,8 +422,8 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 StrCast(this.layoutDoc.stroke_dash),
                 inkScaleX,
                 inkScaleY,
-                '',
-                this._props.pointerEvents?.() ?? 'visiblepainted',
+                '' as Gestures,
+                this._props.pointerEvents?.() ?? 'visiblePainted',
                 0.0,
                 false,
                 downHdlr,