Merge pull request #16 from wiredjs/undo

basic undo-redo support

Author: pshihn

src/components/undo-redo.ts

@@ -0,0 +1,49 @@
+import { BaseElement, element } from '../base-element.js';
+import UndoRedo from 'udrd';
+import { Op, UndoableOp } from '../ops.js';
+
+@element('undo-redo')
+export class UndoRedoElement extends BaseElement {
+  private readonly undoRedo = new UndoRedo<Op>();
+  private canRedo = false;
+  private canUndo = false;
+
+  push(uop: UndoableOp) {
+    this.undoRedo.push(uop.do, uop.undo);
+    this.refreshCans();
+  }
+
+  undo() {
+    const op = this.undoRedo.undo();
+    if (op) {
+      this.fireEvent('do-op', op);
+      this.refreshCans();
+    }
+  }
+
+  redo() {
+    const op = this.undoRedo.redo();
+    if (op) {
+      this.fireEvent('do-op', op);
+      this.refreshCans();
+    }
+  }
+
+  private refreshCans() {
+    let fire = false;
+    if (this.canRedo !== this.undoRedo.canRedo()) {
+      this.canRedo = !this.canRedo;
+      fire = true;
+    }
+    if (this.canUndo !== this.undoRedo.canUndo()) {
+      this.canUndo = !this.canUndo;
+      fire = true;
+    }
+    if (fire) {
+      this.fireEvent('undo-state-change', {
+        canRedo: this.canRedo,
+        canUndo: this.canUndo
+      });
+    }
+  }
+}

src/designer/design-section.ts

@@ -65,25 +65,31 @@ export class DesignSection extends BaseElement {
   private handleOp(e: CustomEvent) {
     const uop = e.detail as UndoableOp;
     if (uop) {
-      this.doOp(uop.do);
+      this.doOp(uop.do, true);
     }
   }
 
-  private doOp(op: Op) {
+  doOp(op: Op, skipSelection?: boolean) {
+    let s: Shape | null = op.shape;
     switch (op.type) {
       case 'add':
-        this.canvas.addShape(op.shape);
+        this.canvas.addShape(s);
         break;
       case 'delete':
         this.selectedShape = null;
-        this.canvas.deleteShape(op.shape);
+        this.canvas.deleteShape(s);
+        s = null;
         break;
       case 'update':
-        this.canvas.updateShape(op.shape);
+        this.canvas.updateShape(s);
         break;
       default:
+        s = null;
         break;
     }
+    if (s && (!skipSelection)) {
+      this.selectedShape = s;
+    }
   }
 
   private onSelect(e: CustomEvent) {

src/main-app.ts

@@ -1,9 +1,13 @@
 import { BaseElement, html, element, property } from './base-element.js';
 import { flexStyles } from './flex-styles.js';
+import { UndoableOp, Op } from './ops.js';
+import { UndoRedoElement } from './components/undo-redo.js';
+import { DesignSection } from './designer/design-section';
 import './components/dac-tab-bar';
 import './components/dac-tab';
 import './components/dac-icon';
 import './designer/design-section';
+import './components/undo-redo.js';
 
 @element('main-app')
 export class MainApp extends BaseElement {
@@ -54,11 +58,11 @@ export class MainApp extends BaseElement {
     <div id="toolbar" class="horizontal layout center">
       <div class="flex">Draw A Component</div>
       <div id="appControls">
-        <button id="undoBtn" disabled title="Undo">
+        <button id="undoBtn" disabled title="Undo" @click="${() => this.ur.undo()}">
           <dac-icon icon="undo"></dac-icon>
           <div>Undo</div>
         </button>
-        <button id="redoBtn" disabled title="Undo">
+        <button id="redoBtn" disabled title="Redo" @click="${() => this.ur.redo()}">
           <dac-icon icon="redo"></dac-icon>
           <div>Redo</div>
         </button>
@@ -75,15 +79,44 @@ export class MainApp extends BaseElement {
       </dac-tab-bar>
     </div>
     <main class="flex horizontal layout">
-      <design-section class="flex" style="${this.selectedTab === 'design' ? '' : 'display: none;'}"></design-section>
+      <design-section class="flex" style="${this.selectedTab === 'design' ? '' : 'display: none;'}" @op="${this.onOp}"></design-section>
       <div class="flex" style="${this.selectedTab === 'preview' ? '' : 'display: none;'}">
         <p>Preview goes here</p>
       </div>
     </div>
+    <undo-redo @do-op="${this.doOp}" @undo-state-change="${this.updateUndoState}"></undo-redo>
     `;
   }
 
+  private get ur(): UndoRedoElement {
+    return this.$$('undo-redo') as UndoRedoElement;
+  }
+
+  private get designSection(): DesignSection {
+    return this.$$('design-section') as DesignSection;
+  }
+
   private tabClick(e: Event) {
     this.selectedTab = (e.currentTarget as HTMLElement).getAttribute('name') || 'design';
   }
+
+  private onOp(e: CustomEvent) {
+    const uop = e.detail as UndoableOp;
+    if (uop) {
+      this.ur.push(uop);
+    }
+  }
+
+  private doOp(e: CustomEvent) {
+    const op = e.detail as Op;
+    if (op) {
+      this.designSection.doOp(op);
+    }
+  }
+
+  private updateUndoState(e: CustomEvent) {
+    const detail = e.detail;
+    (this.$('undoBtn') as HTMLButtonElement).disabled = !detail.canUndo;
+    (this.$('redoBtn') as HTMLButtonElement).disabled = !detail.canRedo;
+  }
 }