Fix issue #7: Create an Ellipse tool. This commit shows that there are too many different places to register things for a new tool: A Tool subclass, an Action, a Toolbar button, a custom element, registering the custom element, a key binding, and handles to the new Tool in the editor.

Author: codedread

src/actions.ts

@@ -13,6 +13,7 @@ export const CarveAction = {
 
   // Drawing Actions.
   RECTANGLE_MODE: 'rectangle_mode',
+  ELLIPSE_MODE: 'ellipse_mode',
 }
 
 // It is confusing to have a type the same name as the above object, but Typescript allows this.

src/carve.ts

@@ -1,9 +1,10 @@
-import { CarveNewButton, CarveOpenButton, CarveRectangleButton } from './core-toolbar-buttons.js';
+import { CarveEllipseButton, CarveNewButton, CarveOpenButton, CarveRectangleButton } from './core-toolbar-buttons.js';
 import { CarveEditor } from './editor.js';
 
 customElements.define('carve-editor', CarveEditor);
 customElements.define('carve-new-button', CarveNewButton);
 customElements.define('carve-open-button', CarveOpenButton);
 customElements.define('carve-rectangle-button', CarveRectangleButton);
+customElements.define('carve-ellipse-button', CarveEllipseButton);
 
 console.log(`Carve custom elements registered.`);

src/core-toolbar-buttons.ts

@@ -37,3 +37,13 @@ export class CarveRectangleButton extends ToolbarModeButton {
     </svg>`;
   }
 }
+
+export class CarveEllipseButton extends ToolbarModeButton {
+  getAction(): CarveAction { return CarveAction.ELLIPSE_MODE; }
+  getButtonDOM(): string {
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+      <title>Rectangle Tool</title>
+      <ellipse cx="50" cy="50" rx="40" ry="20" fill="green" stroke-width="4" stroke="black" />
+    </svg>`;
+  }
+}

src/editor.ts

@@ -1,7 +1,7 @@
 import { CarveAction } from './actions.js';
 import { CarveDocument, createDocumentFromFile, createNewDocument } from './document.js';
 import { CarveMouseEvent } from './carve-mouse-event.js';
-import { CarveRectangleButton } from './core-toolbar-buttons.js';
+import { CarveRectangleButton, CarveEllipseButton } from './core-toolbar-buttons.js';
 import { Command } from './commands/command.js';
 import { EditorHost } from './editor-host.js';
 import { FileSystemFileHandle } from './types/filesystem.js';
@@ -10,6 +10,7 @@ import { SVGNS } from './constants.js';
 import { Tool } from './tools/tool.js';
 import { ToolbarClickedEvent, TOOLBAR_CLICKED_TYPE } from './toolbar-button.js';
 import { keyToAction } from './keys.js';
+import { EllipseTool } from './tools/ellipse.js';
 
 const CARVE_TOP_DIV = 'carveTopDiv';
 const CARVE_WORK_AREA = 'carveWorkArea';
@@ -32,13 +33,15 @@ export class CarveEditor extends HTMLElement implements EditorHost {
 
   // Known tools.
   private rectTool: RectangleTool;
+  private ellipseTool: EllipseTool;
 
   constructor() {
     super();
     this.createShadowDOM();
 
     // Set up tools.
     this.rectTool = new RectangleTool(this);
+    this.ellipseTool = new EllipseTool(this);
 
     // Listen for events.
     window.addEventListener('keyup', this);
@@ -87,6 +90,10 @@ export class CarveEditor extends HTMLElement implements EditorHost {
           (this.querySelector('carve-rectangle-button') as CarveRectangleButton).active = true;
           this.currentModeTool = this.rectTool;
           break;
+        case CarveAction.ELLIPSE_MODE:
+          (this.querySelector('carve-ellipse-button') as CarveEllipseButton).active = true;
+          this.currentModeTool = this.ellipseTool;
+          break;
       }
     }
   }

src/index.html

@@ -13,6 +13,7 @@
       <carve-new-button slot="toolbar"></carve-new-button>
       <carve-open-button slot="toolbar"></carve-open-button>
       <carve-rectangle-button slot="toolbar"></carve-rectangle-button>
+      <carve-ellipse-button slot="toolbar"></carve-ellipse-button>
     </carve-editor>
   </body>
 </html>

src/keys.ts

@@ -8,6 +8,7 @@ export function keyToAction(key: string): CarveAction {
     case 'o': return CarveAction.OPEN_DOCUMENT;
     // Drawing modes.
     case 'r': return CarveAction.RECTANGLE_MODE;
+    case 'e': return CarveAction.ELLIPSE_MODE;
   }
 
   return null;

src/tools/ellipse.ts

@@ -0,0 +1,70 @@
+import { EditorHost } from '../editor-host.js';
+import { Point } from '../math/point.js';
+import { SVGNS } from '../constants.js';
+import { Tool } from './tool.js';
+import { InsertElementCommand } from '../commands/insert-element-command.js';
+import { CarveMouseEvent } from '../carve-mouse-event.js';
+
+/** A tool for drawing an ellipse. */
+export class EllipseTool extends Tool {
+  private isDrawing: boolean = false;
+  private startPoint: Point;
+  private endPoint: Point;
+  private drawingElem: SVGEllipseElement;
+
+  constructor(host: EditorHost) {
+    super(host);
+  }
+
+  onMouseDown(evt: CarveMouseEvent) {
+    this.isDrawing = true;
+    this.startPoint = new Point(evt.carveX, evt.carveY);
+    this.endPoint = new Point(evt.carveX, evt.carveY);
+
+    const elem = document.createElementNS(SVGNS, 'ellipse');
+    elem.setAttribute('cx', `${evt.carveX}`);
+    elem.setAttribute('cy', `${evt.carveY}`);
+    elem.setAttribute('fill', 'green');
+    elem.setAttribute('stroke-width', '1');
+    elem.setAttribute('stroke', 'black');
+
+    this.drawingElem = elem;
+    this.host.getOverlay().appendChild(elem);
+    console.log(`EllipseTool: Started creating an ellipse`);
+  }
+
+  onMouseUp(evt: CarveMouseEvent) {
+    if (this.isDrawing) {
+      this.isDrawing = false;
+      this.endPoint = new Point(evt.carveX, evt.carveY);
+
+      // Do not create a rect if it would be zero width/height.
+      if (this.startPoint.x !== this.endPoint.x && this.startPoint.y !== this.endPoint.y) {
+        this.host.execute(new InsertElementCommand(this.drawingElem));
+        console.log(`EllipseTool: Created an ellipse`);
+      } else {
+        this.drawingElem.parentElement.removeChild(this.drawingElem);
+        console.log(`EllipseTool: Abandoned creating an ellipse`);
+      }
+
+      this.host.getOverlay().innerHTML = '';
+      this.cleanUp();
+    }
+  }
+
+  onMouseMove(evt: CarveMouseEvent) {
+    if (this.isDrawing) {
+      this.endPoint.x = evt.carveX;
+      this.endPoint.y = evt.carveY;
+      this.drawingElem.setAttribute('rx', `${Math.abs(this.endPoint.x - this.startPoint.x)}`);
+      this.drawingElem.setAttribute('ry', `${Math.abs(this.endPoint.y - this.startPoint.y)}`);
+    }
+  }
+
+  private cleanUp() {
+    this.isDrawing = false;
+    this.startPoint = null;
+    this.endPoint = null;
+    this.drawingElem = null;
+  }
+}

src/tools/rectangle.ts

@@ -25,6 +25,8 @@ export class RectangleTool extends Tool {
     elem.setAttribute('x', `${evt.carveX}`);
     elem.setAttribute('y', `${evt.carveY}`);
     elem.setAttribute('fill', 'red');
+    elem.setAttribute('stroke-width', '1');
+    elem.setAttribute('stroke', 'black');
 
     this.drawingElem = elem;
     this.host.getOverlay().appendChild(elem);
@@ -60,8 +62,6 @@ export class RectangleTool extends Tool {
           `${(this.endPoint.x < this.startPoint.x) ? this.endPoint.x : this.startPoint.x}`);
       this.drawingElem.setAttribute('y',
           `${(this.endPoint.y < this.startPoint.y) ? this.endPoint.y : this.startPoint.y}`);
-      this.drawingElem.setAttribute('stroke-width', '1');
-      this.drawingElem.setAttribute('stroke', 'black');
     }
   }