Change document, viewport, and canvas terminology

client/web/.eslintrc.js

@@ -19,6 +19,6 @@ module.exports = {
 		"linebreak-style": ["error", "unix"],
 		indent: ["error", "tab"],
 		quotes: ["error", "double"],
-		camelcase: ["error", { ignoreImports: true, ignoreDestructuring: true }]
+		camelcase: ["error", { ignoreImports: true, ignoreDestructuring: true }],
 	},
 };

client/web/src/components/panel-system/DockablePanel.vue

@@ -166,7 +166,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import Viewport from "../panels/ViewportPanel.vue";
+import Document from "../panels/DocumentPanel.vue";
 import Properties from "../panels/PropertiesPanel.vue";
 import Layers from "../panels/LayersPanel.vue";
 import Minimap from "../panels/MinimapPanel.vue";
@@ -175,7 +175,7 @@ import CloseX from "../../../assets/svg/16x16-bounds-12x12-icon/close-x.svg";
 
 export default defineComponent({
 	components: {
-		Viewport,
+		Document,
 		Properties,
 		Layers,
 		Minimap,

client/web/src/components/panel-system/PanelArea.vue

@@ -1,7 +1,7 @@
 <template>
 	<LayoutRow class="dockable-grid-subdivision">
 		<LayoutCol class="dockable-grid-subdivision" style="flex-grow: 1597;">
-			<DockablePanel :panelType="'Viewport'" :tabCloseButtons="true" :tabMinWidths="true" :tabLabels="['X-35B Over Death Valley*', 'Document 2', 'Document 3', 'Document 4', 'Document 5']" :tabActiveIndex="0" />
+			<DockablePanel :panelType="'Document'" :tabCloseButtons="true" :tabMinWidths="true" :tabLabels="['X-35B Over Death Valley*', 'Document 2', 'Document 3', 'Document 4', 'Document 5']" :tabActiveIndex="0" />
 		</LayoutCol>
 		<LayoutCol class="dockable-grid-resize-gutter"></LayoutCol>
 		<LayoutCol class="dockable-grid-subdivision" style="flex-grow: 319;">

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

@@ -1,5 +1,5 @@
 <template>
-	<LayoutCol :class="'viewport'">
+	<LayoutCol :class="'document'">
 		<LayoutRow :class="'options-bar'">
 			<div class="left side">
 				<!-- <span class="label">Select</span>
@@ -10,22 +10,24 @@
 				<!-- <span class="label">Layer 1</span> -->
 			</div>
 		</LayoutRow>
-		<LayoutRow :class="'tools-and-viewport'">
-			<LayoutCol :class="'tools'"></LayoutCol>
-			<LayoutCol
-				:class="'canvas'"
-				@mousedown="canvasMouseDown"
-				@mouseup="canvasMouseUp"
-				@mousemove="canvasMouseMove"
-			>
-				<svg></svg>
+		<LayoutRow :class="'toolbar-and-viewport'">
+			<LayoutCol :class="'toolbar'"></LayoutCol>
+			<LayoutCol :class="'viewport'">
+				<div
+					class="canvas"
+					@mousedown="canvasMouseDown"
+					@mouseup="canvasMouseUp"
+					@mousemove="canvasMouseMove"
+				>
+					<svg></svg>
+				</div>
 			</LayoutCol>
 		</LayoutRow>
 	</LayoutCol>
 </template>
 
 <style lang="scss">
-.viewport {
+.document {
 	height: 100%;
 
 	.options-bar {
@@ -59,19 +61,25 @@
 		}
 	}
 
-	.tools-and-viewport {
-		.tools {
+	.toolbar-and-viewport {
+		.toolbar {
 			flex: 0 0 32px;
 		}
 
-		.canvas {
-			background: #111;
+		.viewport {
 			flex: 1 1 100%;
 
-			svg {
+			.canvas {
+				background: #111;
 				width: 100%;
 				height: 100%;
+
+				svg {
+					width: 100%;
+					height: 100%;
+				}
 			}
+
 		}
 }
 }
@@ -91,17 +99,14 @@ export default defineComponent({
 	},
 	methods: {
 		async canvasMouseDown(e: MouseEvent) {
-			console.log(e);
 			const { on_mouse_down } = await wasm;
 			on_mouse_down(e.offsetX, e.offsetY, e.buttons);
 		},
 		async canvasMouseUp(e: MouseEvent) {
-			console.log(e);
 			const { on_mouse_up } = await wasm;
 			on_mouse_up(e.offsetX, e.offsetY, e.buttons);
 		},
 		async canvasMouseMove(e: MouseEvent) {
-			console.log(e);
 			const { on_mouse_move } = await wasm;
 			on_mouse_move(e.offsetX, e.offsetY);
 		},

client/web/src/wasm-callback-processor.js

@@ -1,3 +1,3 @@
-export function update_canvas(svg) {
-    document.querySelector(".canvas svg").innerHTML = svg;
+export function updateCanvas(svg) {
+	document.querySelector(".document .canvas svg").innerHTML = svg;
 }

client/web/wasm/src/document.rs

@@ -13,30 +13,34 @@ pub fn select_tool(tool: String) -> Result<(), JsValue> {
 	})
 }
 
-/// Mouse movement with the bounds of the canvas
+// TODO: When a mouse button is down that started in the viewport, this should trigger even when the mouse is outside the viewport (or even the browser window if the browser supports it)
+/// Mouse movement within the screenspace bounds of the viewport
 #[wasm_bindgen]
 pub fn on_mouse_move(x: u32, y: u32) -> Result<(), JsValue> {
-	let ev = events::Event::MouseMovement(events::CanvasPosition { x, y });
+	// TODO: Convert these screenspace viewport coordinates to canvas coordinates based on the current zoom and pan
+	let ev = events::Event::MouseMovement(events::ViewportPosition { x, y });
 	EDITOR_STATE.with(|editor| editor.borrow_mut().handle_event(ev)).map_err(|err| Error::new(&err.to_string()).into())
 }
 
-/// Mouse click within the bounds of the canvas
+/// A mouse button depressed within screenspace the bounds of the viewport
 #[wasm_bindgen]
 pub fn on_mouse_down(x: u32, y: u32, mouse_keys: u8) -> Result<(), JsValue> {
+	// TODO: Convert these screenspace viewport coordinates to canvas coordinates based on the current zoom and pan
 	let mouse_keys = events::MouseKeys::from_bits(mouse_keys).expect("invalid modifier keys");
 	let ev = events::Event::MouseDown(events::MouseState {
-		position: events::CanvasPosition { x, y },
+		position: events::ViewportPosition { x, y },
 		mouse_keys,
 	});
 	EDITOR_STATE.with(|editor| editor.borrow_mut().handle_event(ev)).map_err(|err| Error::new(&err.to_string()).into())
 }
 
-/// Mouse released
+/// A mouse button released
 #[wasm_bindgen]
 pub fn on_mouse_up(x: u32, y: u32, mouse_keys: u8) -> Result<(), JsValue> {
+	// TODO: Convert these screenspace viewport coordinates to canvas coordinates based on the current zoom and pan
 	let mouse_keys = events::MouseKeys::from_bits(mouse_keys).expect("invalid modifier keys");
 	let ev = events::Event::MouseUp(events::MouseState {
-		position: events::CanvasPosition { x, y },
+		position: events::ViewportPosition { x, y },
 		mouse_keys,
 	});
 	EDITOR_STATE.with(|editor| editor.borrow_mut().handle_event(ev)).map_err(|err| Error::new(&err.to_string()).into())

client/web/wasm/src/lib.rs

@@ -1,6 +1,6 @@
+pub mod document;
 mod shims;
 pub mod utils;
-pub mod viewport;
 pub mod window;
 pub mod wrappers;
 
@@ -18,13 +18,13 @@ pub fn init() {
 
 fn handle_response(response: Response) {
 	match response {
-		Response::UpdateCanvas { document } => update_canvas(document),
+		Response::UpdateCanvas { document } => updateCanvas(document),
 	}
 }
 
 #[wasm_bindgen(module = "/../src/wasm-callback-processor.js")]
 extern "C" {
-	fn update_canvas(svg: String);
+	fn updateCanvas(svg: String);
 }
 
 #[wasm_bindgen]