2 files changed, 24 insertions, 14 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 1f0744782..340983e11 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -70,7 +70,7 @@ export namespace Documents {
             textProto = fields[textProtoId] as Document;
             histoProto = fields[histoProtoId] as Document;
             collProto = fields[collProtoId] as Document;
-            imageProto = fields[imageProtoId] as Document;
+            imageProto = fields[imageProtoId] as Document || CreateImagePrototype();
             webProto = fields[webProtoId] as Document;
             kvpProto = fields[kvpProtoId] as Document;
         });
@@ -111,15 +111,14 @@ export namespace Documents {
         return assignOptions(deleg, options);
     }
 
-    function GetImagePrototype(): Document {
-        if (!imageProto) {
-            imageProto = setupPrototypeOptions(imageProtoId, "IMAGE_PROTO", CollectionView.LayoutString("AnnotationsKey"),
-                { x: 0, y: 0, nativeWidth: 300, width: 300, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] });
-            imageProto.SetText(KeyStore.BackgroundLayout, ImageBox.LayoutString());
-            imageProto.SetNumber(KeyStore.CurPage, 0);
-        }
+    function CreateImagePrototype(): Document {
+        let imageProto = setupPrototypeOptions(imageProtoId, "IMAGE_PROTO", CollectionView.LayoutString("AnnotationsKey"),
+            { x: 0, y: 0, nativeWidth: 300, width: 300, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] });
+        imageProto.SetText(KeyStore.BackgroundLayout, ImageBox.LayoutString());
+        imageProto.SetNumber(KeyStore.CurPage, 0);
         return imageProto;
     }
+
     function GetHistogramPrototype(): Document {
         if (!histoProto) {
             histoProto = setupPrototypeOptions(histoProtoId, "HISTO PROTO", CollectionView.LayoutString("AnnotationsKey"),
@@ -175,7 +174,7 @@ export namespace Documents {
 
 
     export function ImageDocument(url: string, options: DocumentOptions = {}) {
-        return assignToDelegate(SetInstanceOptions(GetImagePrototype(), options, [new URL(url), ImageField]).MakeDelegate(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] });
+        return assignToDelegate(SetInstanceOptions(imageProto, options, [new URL(url), ImageField]).MakeDelegate(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] });
         // let doc = SetInstanceOptions(GetImagePrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] },
         //     [new URL(url), ImageField]);
         // doc.SetText(KeyStore.Caption, "my caption...");
diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx
index fed349af3..86566d516 100644
--- a/src/client/views/InkingCanvas.tsx
+++ b/src/client/views/InkingCanvas.tsx
@@ -20,11 +20,10 @@ interface InkCanvasProps {
 
 @observer
 export class InkingCanvas extends React.Component<InkCanvasProps> {
-    private strokeBatch?: UndoManager.Batch;
-
     maxCanvasDim = 8192 / 2; // 1/2 of the maximum canvas dimension for Chrome
     @observable inkMidX: number = 0;
     @observable inkMidY: number = 0;
+    private previousState?: StrokeMap;
     private _currentStrokeId: string = "";
     public static IntersectStrokeRect(stroke: StrokeData, selRect: { left: number, top: number, width: number, height: number }): boolean {
         return stroke.pathData.reduce((inside: boolean, val) => inside ||
@@ -68,18 +67,20 @@ export class InkingCanvas extends React.Component<InkCanvasProps> {
         e.stopPropagation();
         e.preventDefault();
 
+        this.previousState = this.inkData;
+
         if (InkingControl.Instance.selectedTool != InkTool.Eraser) {
             // start the new line, saves a uuid to represent the field of the stroke
             this._currentStrokeId = Utils.GenerateGuid();
-            this.strokeBatch = UndoManager.StartBatch("drawing stroke");
-            this.inkData.set(this._currentStrokeId, {
+            const data = this.inkData;
+            data.set(this._currentStrokeId, {
                 pathData: [this.relativeCoordinatesForEvent(e.clientX, e.clientY)],
                 color: InkingControl.Instance.selectedColor,
                 width: InkingControl.Instance.selectedWidth,
                 tool: InkingControl.Instance.selectedTool,
                 page: this.props.Document.GetNumber(KeyStore.CurPage, -1)
             });
-            this.strokeBatch.end();
+            this.inkData = data;
         }
     };
 
@@ -94,6 +95,16 @@ export class InkingCanvas extends React.Component<InkCanvasProps> {
         }
         e.stopPropagation();
         e.preventDefault();
+
+        const batch = UndoManager.StartBatch("One ink stroke");
+        const oldState = this.previousState || new Map;
+        this.previousState = undefined;
+        const newState = this.inkData;
+        UndoManager.AddEvent({
+            undo: () => this.inkData = oldState,
+            redo: () => this.inkData = newState,
+        });
+        batch.end();
     }
 
     @action