1 files changed, 13 insertions, 5 deletions
diff --git a/src/client/views/InkControls.tsx b/src/client/views/InkControls.tsx
index eeddfce4c..4d8b2c6b5 100644
--- a/src/client/views/InkControls.tsx
+++ b/src/client/views/InkControls.tsx
@@ -22,17 +22,17 @@ export class InkControls extends React.Component<InkControlProps> {
 
     /**
      * Handles the movement of a selected control point when the user clicks and drags.
-     * @param controlNum The index of the currently selected control point.
+     * @param controlIndex The index of the currently selected control point.
      */
     @action
-    onControlDown = (e: React.PointerEvent, controlNum: number): void => {
+    onControlDown = (e: React.PointerEvent, controlIndex: number): void => {
         if (InkStrokeProperties.Instance) {
             InkStrokeProperties.Instance.moveControl(0, 0, 1);
             const controlUndo = UndoManager.StartBatch("DocDecs set radius");
             const screenScale = this.props.ScreenToLocalTransform().Scale;
             setupMoveUpEvents(this, e,
                 (e: PointerEvent, down: number[], delta: number[]) => {
-                    InkStrokeProperties.Instance?.moveControl(-delta[0] * screenScale, -delta[1] * screenScale, controlNum);
+                    InkStrokeProperties.Instance?.moveControl(-delta[0] * screenScale, -delta[1] * screenScale, controlIndex);
                     return false;
                 },
                 () => controlUndo?.end(), emptyFunction);
@@ -60,12 +60,20 @@ export class InkControls extends React.Component<InkControlProps> {
         }
     }
 
+    /**
+     * Updates whether a user has hovered over a particular control point or point that could be added
+     * on click.
+     */
     @action onEnterControl = (i: number) => { this._overControl = i; };
     @action onLeaveControl = () => { this._overControl = -1; };
     @action onEnterAddPoint = (i: number) => { this._overAddPoint = i; };
     @action onLeaveAddPoint = () => { this._overAddPoint = -1; };
  
     render() {
+        const formatInstance = InkStrokeProperties.Instance;
+        if (!formatInstance) return (null);
+
+        // Accessing the current ink's data and extracting all control points.
         const data = this.props.data;
         const controlPoints: ControlPoint[] = [];
         if (data.length >= 4) {
@@ -87,7 +95,7 @@ export class InkControls extends React.Component<InkControlProps> {
                             r={strokeWidth / 2} 
                             stroke={this._overAddPoint === i ? "#1F85DE" : "transparent"} 
                             strokeWidth={dotsize / 4} fill={this._overAddPoint === i ? "#1F85DE" : "transparent"}
-                            onPointerDown={() => { InkStrokeProperties.Instance?.addPoints(pts.X, pts.Y, addedPoints, i, controlPoints); }} 
+                            onPointerDown={() => { formatInstance?.addPoints(pts.X, pts.Y, addedPoints, i, controlPoints); }} 
                             onMouseEnter={() => this.onEnterAddPoint(i)} 
                             onMouseLeave={this.onLeaveAddPoint} 
                             pointerEvents="all" 
@@ -103,7 +111,7 @@ export class InkControls extends React.Component<InkControlProps> {
                             height={this._overControl === i ? strokeWidth * 1.5 : strokeWidth} 
                             width={this._overControl === i ? strokeWidth * 1.5 : strokeWidth} 
                             strokeWidth={strokeWidth / 6} stroke="#1F85DE" 
-                            fill={InkStrokeProperties.Instance?._currentPoint === control.I ? "#1F85DE" : "white"}
+                            fill={formatInstance?._currentPoint === control.I ? "#1F85DE" : "white"}
                             onPointerDown={(e) => { this.changeCurrPoint(control.I); this.onControlDown(e, control.I); }} 
                             onMouseEnter={() => this.onEnterControl(i)} 
                             onMouseLeave={this.onLeaveControl}