aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/InkingStroke.tsx
diff options
context:
space:
mode:
authorbobzel <zzzman@gmail.com>2024-07-22 15:26:27 -0400
committerbobzel <zzzman@gmail.com>2024-07-22 15:26:27 -0400
commit31b1872be1e8d010d2cbe08e92c589505e86d293 (patch)
treec28adb82ecaae00c780d9ba3f560d93e3df69eef /src/client/views/InkingStroke.tsx
parenta357ea1c8415230527350393c1bfedd2c6cc3827 (diff)
adding type fixes to avoid 'any's
Diffstat (limited to 'src/client/views/InkingStroke.tsx')
-rw-r--r--src/client/views/InkingStroke.tsx17
1 files changed, 9 insertions, 8 deletions
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 55f28f415..784d252a3 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -47,6 +47,7 @@ import { FormattedTextBox, FormattedTextBoxProps } from './nodes/formattedText/F
import { PinDocView, PinProps } from './PinFuncs';
import { StyleProp } from './StyleProp';
+// eslint-disable-next-line @typescript-eslint/no-var-requires
const { INK_MASK_SIZE } = require('./global/globalCssVariables.module.scss'); // prettier-ignore
@observer
@@ -292,7 +293,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
@@ -344,12 +345,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 +371,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.
@@ -401,12 +402,12 @@ 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),
@@ -420,7 +421,7 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>()
inkScaleX,
inkScaleY,
'',
- this._props.pointerEvents?.() ?? 'visiblepainted',
+ this._props.pointerEvents?.() ?? 'visiblePainted',
0.0,
false,
downHdlr,