From 9e4dd13ae2f0061ebea6aa8809a5607b51b9d8c3 Mon Sep 17 00:00:00 2001 From: ab Date: Mon, 8 Apr 2019 18:11:22 -0400 Subject: fixed on drop undo redo bug and implemented undo for inking --- src/client/documents/Documents.ts | 17 ++++++++--------- src/client/views/InkingCanvas.tsx | 21 ++++++++++++++++----- src/server/public/files/.gitignore | 1 + 3 files changed, 25 insertions(+), 14 deletions(-) create mode 100644 src/server/public/files/.gitignore (limited to 'src') 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 { - 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 { 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 { } 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 diff --git a/src/server/public/files/.gitignore b/src/server/public/files/.gitignore new file mode 100644 index 000000000..f59ec20aa --- /dev/null +++ b/src/server/public/files/.gitignore @@ -0,0 +1 @@ +* \ No newline at end of file -- cgit v1.2.3-70-g09d2