1 files changed, 18 insertions, 4 deletions
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 52efbdfd7..520d40abf 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -25,7 +25,7 @@ import { action, IReactionDisposer, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc, HeightSym, WidthSym } from '../../fields/Doc';
 import { InkData, InkField, InkTool } from '../../fields/InkField';
-import { BoolCast, Cast, NumCast, RTFCast, StrCast } from '../../fields/Types';
+import { BoolCast, Cast, FieldValue, NumCast, RTFCast, StrCast } from '../../fields/Types';
 import { TraceMobx } from '../../fields/util';
 import { OmitKeys, returnFalse, setupMoveUpEvents } from '../../Utils';
 import { CognitiveServices } from '../cognitive_services/CognitiveServices';
@@ -45,6 +45,9 @@ import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
 import { INK_MASK_SIZE } from './global/globalCssVariables.scss';
 import './InkStroke.scss';
 import Color = require('color');
+import { ComputedField } from '../../fields/ScriptField';
+import { listSpec } from '../../fields/Schema';
+import { List } from '../../fields/List';
 
 @observer
 export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() {
@@ -56,7 +59,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() {
         return inkData && inkData.lastElement().X === inkData[0].X && inkData.lastElement().Y === inkData[0].Y;
     }
     private _handledClick = false; // flag denoting whether ink stroke has handled a psuedo-click onPointerUp so that the real onClick event can be stopPropagated
-    private _selDisposer?: IReactionDisposer;
+    private _disposers: { [key: string]: IReactionDisposer } = {};
 
     @observable _nearestSeg?: number; // nearest Bezier segment along the ink stroke to the cursor (used for displaying the Add Point highlight)
     @observable _nearestT?: number; // nearest t value within the nearest Bezier segment "
@@ -64,13 +67,24 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps>() {
 
     componentDidMount() {
         this.props.setContentView?.(this);
-        this._selDisposer = reaction(
+        this._disposers.activeFrame = reaction(
+            () => this.rootDoc.activeFrame !== undefined && !(ComputedField.WithoutComputed(() => FieldValue(this.rootDoc[this.fieldKey])) instanceof ComputedField),
+            () => {
+                const newPoints = Cast(this.rootDoc[this.fieldKey], InkField, null).inkData;
+                this.rootDoc[this.fieldKey] = ComputedField.MakeInterpolated(this.fieldKey, 'activeFrame', this.rootDoc, NumCast(this.rootDoc.activeFrame));
+                const findexed = Cast(this.rootDoc[`data-indexed`], listSpec(InkField), []).slice();
+                findexed[NumCast(this.rootDoc.activeFrame)] = new InkField(newPoints);
+                this.rootDoc[this.fieldKey + '-indexed'] = new List<InkField>(findexed);
+            },
+            { fireImmediately: true }
+        );
+        this._disposers.selfDisper = reaction(
             () => this.props.isSelected(), // react to stroke being deselected by turning off ink handles
             selected => !selected && (InkStrokeProperties.Instance._controlButton = false)
         );
     }
     componentWillUnmount() {
-        this._selDisposer?.();
+        Object.keys(this._disposers).forEach(key => this._disposers[key]());
     }
 
     // transform is the inherited screentolocal xf plus any scaling that was done to make the stroke