Add RadioPicker; add view mode picker to document options bar

client/web/assets/svg/24x24-bounds-16x16-icon/view-mode-normal.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24">
+	<circle cx="12" cy="12" r="8" />
+</svg>

client/web/assets/svg/24x24-bounds-16x16-icon/view-mode-outline.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24">
+	<path d="M12,5c3.86,0,7,3.14,7,7s-3.14,7-7,7s-7-3.14-7-7S8.14,5,12,5 M12,4c-4.42,0-8,3.58-8,8s3.58,8,8,8s8-3.58,8-8S16.42,4,12,4L12,4z" />
+</svg>

client/web/assets/svg/24x24-bounds-16x16-icon/view-mode-pixels.svg

@@ -0,0 +1,23 @@
+<svg viewBox="0 0 24 24">
+	<rect x="11" y="5" width="2" height="2" />
+	<rect x="17" y="8" width="2" height="2" />
+	<rect x="17" y="11" width="2" height="2" />
+	<rect x="17" y="14" width="2" height="2" />
+	<rect x="11" y="17" width="2" height="2" />
+	<rect x="14" y="17" width="2" height="2" />
+	<rect x="8" y="17" width="2" height="2" />
+	<rect x="5" y="14" width="2" height="2" />
+	<rect x="5" y="11" width="2" height="2" />
+	<rect x="5" y="8" width="2" height="2" />
+	<rect x="8" y="5" width="2" height="2" />
+	<rect x="14" y="14" width="2" height="2" />
+	<rect x="8" y="14" width="2" height="2" />
+	<rect x="11" y="14" width="2" height="2" />
+	<rect x="14" y="11" width="2" height="2" />
+	<rect x="8" y="11" width="2" height="2" />
+	<rect x="11" y="11" width="2" height="2" />
+	<rect x="14" y="8" width="2" height="2" />
+	<rect x="8" y="8" width="2" height="2" />
+	<rect x="11" y="8" width="2" height="2" />
+	<rect x="14" y="5" width="2" height="2" />
+</svg>

client/web/src/components/panels/Document.vue

@@ -31,6 +31,15 @@
 			</div>
 			<div class="spacer"></div>
 			<div class="right side">
+				<RadioPicker :initialIndex="0" @changed="viewModeChanged">
+					<IconButton :size="24" title="View Mode: Normal"><ViewModeNormal /></IconButton>
+					<IconButton :size="24" title="View Mode: Outline"><ViewModeOutline /></IconButton>
+					<IconButton :size="24" title="View Mode: Pixels"><ViewModePixels /></IconButton>
+					<DropdownButton />
+				</RadioPicker>
+
+				<ItemDivider />
+
 				<IconButton :size="24" title="Zoom Out"><ZoomOut /></IconButton>
 				<IconButton :size="24" title="Zoom In"><ZoomIn /></IconButton>
 				<IconButton :size="24" title="Zoom to 100%"><ZoomReset /></IconButton>
@@ -116,7 +125,7 @@
 
 		.side {
 			height: 100%;
-			flex: 0 1 auto;
+			flex: 0 0 auto;
 			display: flex;
 			align-items: center;
 			margin: 0 8px;
@@ -193,6 +202,7 @@ import ShelfItem from "../widgets/ShelfItem.vue";
 import ItemDivider from "../widgets/ItemDivider.vue";
 import IconButton from "../widgets/IconButton.vue";
 import DropdownButton from "../widgets/DropdownButton.vue";
+import RadioPicker from "../widgets/RadioPicker.vue";
 import NumberInput from "../widgets/NumberInput.vue";
 import SwapButton from "../../../assets/svg/16x16-bounds-12x12-icon/swap.svg";
 import ResetColorsButton from "../../../assets/svg/16x16-bounds-12x12-icon/reset-colors.svg";
@@ -233,6 +243,9 @@ import BooleanDifference from "../../../assets/svg/24x24-bounds-16x16-icon/boole
 import ZoomReset from "../../../assets/svg/24x24-bounds-16x16-icon/zoom-reset.svg";
 import ZoomIn from "../../../assets/svg/24x24-bounds-16x16-icon/zoom-in.svg";
 import ZoomOut from "../../../assets/svg/24x24-bounds-16x16-icon/zoom-out.svg";
+import ViewModeNormal from "../../../assets/svg/24x24-bounds-16x16-icon/view-mode-normal.svg";
+import ViewModeOutline from "../../../assets/svg/24x24-bounds-16x16-icon/view-mode-outline.svg";
+import ViewModePixels from "../../../assets/svg/24x24-bounds-16x16-icon/view-mode-pixels.svg";
 
 const wasm = import("../../../wasm/pkg");
 
@@ -244,6 +257,7 @@ export default defineComponent({
 		ItemDivider,
 		IconButton,
 		DropdownButton,
+		RadioPicker,
 		NumberInput,
 		SwapButton,
 		ResetColorsButton,
@@ -284,6 +298,9 @@ export default defineComponent({
 		ZoomReset,
 		ZoomIn,
 		ZoomOut,
+		ViewModeNormal,
+		ViewModeOutline,
+		ViewModePixels,
 	},
 	methods: {
 		async canvasMouseDown(e: MouseEvent) {
@@ -310,6 +327,9 @@ export default defineComponent({
 			const { select_tool } = await wasm;
 			select_tool(toolName);
 		},
+		async viewModeChanged(toolIndex: number) {
+			console.log(`The view mode has been changed to index match the icon at index ${toolIndex}`);
+		},
 	},
 	mounted() {
 		registerResponseHandler(ResponseType.UpdateCanvas, (responseData) => {

client/web/src/components/widgets/NumberInput.vue

@@ -8,7 +8,7 @@
 
 <style lang="scss">
 .number-input {
-	width: 96px;
+	width: 64px;
 	height: 22px;
 	position: relative;
 	border: 1px solid #888;
@@ -26,6 +26,7 @@
 		color: #ddd;
 		font-size: 14px;
 		text-align: center;
+		font-family: inherit;
 
 		&::selection {
 			background: #3194d6;

client/web/src/components/widgets/RadioPicker.vue

@@ -0,0 +1,83 @@
+<template>
+	<div class="radio-picker" ref="radioPicker">
+		<slot></slot>
+	</div>
+</template>
+
+<style lang="scss">
+.radio-picker {
+	font-size: 0;
+
+	button {
+		fill: #fff;
+		border-radius: 0;
+		margin: 0;
+
+		&:first-child {
+			border-radius: 2px 0 0 2px;
+		}
+
+		&:last-child {
+			border-radius: 0 2px 2px 0;
+		}
+	}
+
+	.icon-button {
+		background: #888;
+
+		& + .icon-button {
+			margin-left: 1px;
+		}
+
+		&:hover {
+			background: #555;
+		}
+
+		&.active {
+			background: #3194d6;
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+	components: {
+	},
+	props: {
+		initialIndex: { type: Number, required: true },
+		setIndex: { type: Function, required: false },
+	},
+	data() {
+		return {
+			activeIndex: this.initialIndex,
+		};
+	},
+	mounted() {
+		this.updateActiveIconButton();
+
+		(this.$refs.radioPicker as Element).querySelectorAll(".icon-button").forEach((iconButton, index) => {
+			iconButton.addEventListener("click", () => {
+				this.activeIndex = index;
+				this.$emit("changed", index);
+			});
+		});
+	},
+	watch: {
+		activeIndex() { this.updateActiveIconButton(); },
+	},
+	methods: {
+		// This method may be called by the user of this component by setting a `ref="radioPicker"` attribute and calling `(this.$refs.viewModePicker as typeof RadioPicker).setActive(...)`
+		setActive(index: number) {
+			this.activeIndex = index;
+		},
+		updateActiveIconButton() {
+			const iconButtons = (this.$refs.radioPicker as Element).querySelectorAll(".icon-button");
+			iconButtons.forEach((iconButton) => iconButton.classList.remove("active"));
+			iconButtons[this.activeIndex].classList.add("active");
+		},
+	},
+});
+</script>