Merge pull request #10 from brianlow/brian/keyboard

Keyboard shortcuts

app.css

@@ -270,4 +270,17 @@ input[type=radio]:checked + label.radiolabel.z:hover, label.radiolabel.z:hover {
 
 .part-buttons {
     margin-bottom: 10px;
-}
+}
+
+.key {
+    display: inline-block;
+    padding: 3px 5px;
+    line-height: 10px;
+    font: 10px monospace;
+    color: #555;
+    vertical-align: middle;
+    background-color: #eee;
+    border: solid 1px #ccc;
+    border-radius: 3px;
+    box-shadow: inset 0 -1px 0 #bbb;
+}

index.html

@@ -193,10 +193,40 @@
                 <div class="cell"><button id="applymeasurements">Apply</button></div>
             </div>
         </details>
-        
+
         <details open>
             <summary>About</summary>
             <p>This is a free online CAD tool to create custom LEGO&reg; Technic compatible construction parts for 3D printing.</p>
+            <p>
+            <table>
+                <tr>
+                    <td><span class="key">1</span> <span class="key">2</span> <span class="key">3</span>
+                        <span class="key">4</span> <span class="key">5</span> <span class="key">6</span>
+                    </td>
+                    <td>set type</td>
+                </tr>
+                <tr>
+                    <td><span class="key">x</span> <span class="key">y</span> <span class="key">z</span></td>
+                    <td>set orientation</td>
+                </tr>
+                <tr>
+                    <td><span class="key">←</span> <span class="key">→</span> <span class="key">↑</span>
+                        <span class="key">↓</span> <span class="key">PgUp</span> <span class="key">PgDown</span>
+                    </td>
+                    <td>
+                        move cursor
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <span class="key">Del</span>, <span class="key">BkSp</span>
+                    </td>
+                    <td>
+                        remove block
+                    </td>
+                </tr>
+            </table>
+            </p>
             <p>You can find the source code for this project on <a href="https://github.com/marian42/partdesigner" target="_blank">Github</a>.</p>
             <p class="fineprint">
                 <a href="https://marian42.de/" target="_blank">marian42.de</a>&nbsp;&middot;&nbsp;

src/editor/Editor.ts

@@ -74,6 +74,7 @@ class Editor {
 		this.canvas.addEventListener("mousemove", (event: MouseEvent) => this.onMouseMove(event));
 		this.canvas.addEventListener("contextmenu", (event: Event) => event.preventDefault());
 		this.canvas.addEventListener("wheel", (event: WheelEvent) => this.onScroll(event));
+		window.addEventListener("keydown", (event: KeyboardEvent) => this.onKeydown(event));
 		document.getElementById("clear").addEventListener("click", (event: MouseEvent) => this.clear());
 		document.getElementById("share").addEventListener("click", (event: MouseEvent) => this.share());
 		document.getElementById("save-stl").addEventListener("click", (event: MouseEvent) => this.saveSTL());
@@ -254,6 +255,31 @@ class Editor {
 		this.camera.render();
 	}
 
+	private onKeydown(event: KeyboardEvent) {
+		const keyActions: { [key: string]: () => void } = {
+			'1': () => this.setType('pinhole'),
+			'2': () => this.setType('axlehole'),
+			'3': () => this.setType('pin'),
+			'4': () => this.setType('axle'),
+			'5': () => this.setType('solid'),
+			'6': () => this.setType('balljoint'),
+			'y': () => this.setOrientation('y'),
+			'z': () => this.setOrientation('z'),
+			'x': () => this.setOrientation('x'),
+			'PageUp': () => this.handles.move(new Vector3(0, 1, 0)),
+			'PageDown': () => this.handles.move(new Vector3(0, -1, 0)),
+			'ArrowLeft': () => this.handles.move(new Vector3(0, 0, 1)),
+			'ArrowRight': () => this.handles.move(new Vector3(0, 0, -1)),
+			'ArrowUp': () => this.handles.move(new Vector3(-1, 0, 0)),
+			'ArrowDown': () => this.handles.move(new Vector3(1, 0, 0)),
+			'Backspace': () => this.remove(),
+			'Delete': () => this.remove(),
+		};
+
+		if (keyActions[event.key]) {
+			keyActions[event.key]();
+		}
+	}
 	private displayMeasurements() {
 		for (var namedMeasurement of NAMED_MEASUREMENTS) {
 			namedMeasurement.applyToDom(this.measurements);

src/editor/Handles.ts

@@ -242,6 +242,13 @@ class Handles implements Renderer {
 		}
 	}
 
+	public move(direction: Vector3) {
+		this.position = this.position.plus(direction);
+		this.block = this.getBlock(this.position);
+		this.updateTransforms();
+		this.camera.render();
+	}
+
 	public getSelectedBlock(): Vector3 {
 		return this.block;
 	}