Make scrollbars interactable (#328)

* Make scrollbars interactable

* Add watcher for position change

* Fix case of data

* Fix updateHandlePosition capitalization

* Clean up class name thing

* Scroll bars between 0 and 1

* Allow width to be 100%

* Scrollbars reflect backend

* Include viewport in scrollbar

* Add half viewport padding for scrollbars

* Refactor scrollbar using lerp

* Send messages to backend

* Refactor

* Use glam::DVec2

* Remove glam::

* Remove unnecessary abs

* Add TrueDoctor's change

* Add missing minus

* Fix vue issues

* Fix viewport size

* Remove unnecessary log

* Linear dragging

editor/src/communication/dispatcher.rs

@@ -27,6 +27,7 @@ impl Dispatcher {
 				| Message::InputMapper(_)
 				| Message::Documents(DocumentsMessage::Document(DocumentMessage::RenderDocument))
 				| Message::Frontend(FrontendMessage::UpdateCanvas { .. })
+				| Message::Frontend(FrontendMessage::UpdateScrollbars { .. })
 				| Message::Frontend(FrontendMessage::SetCanvasZoom { .. })
 				| Message::Frontend(FrontendMessage::SetCanvasRotation { .. })
 				| Message::Documents(DocumentsMessage::Document(DocumentMessage::DispatchOperation { .. }))

editor/src/document/document_file.rs

@@ -109,12 +109,6 @@ impl From<DocumentOperation> for Message {
 }
 
 impl DocumentMessageHandler {
-	pub fn active_document(&self) -> &DocumentMessageHandler {
-		self
-	}
-	pub fn active_document_mut(&mut self) -> &mut DocumentMessageHandler {
-		self
-	}
 	fn filter_document_responses(&self, document_responses: &mut Vec<DocumentResponse>) -> bool {
 		let len = document_responses.len();
 		document_responses.retain(|response| !matches!(response, DocumentResponse::DocumentChanged));
@@ -320,9 +314,7 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 				)
 			}
 			SetBlendModeForSelectedLayers(blend_mode) => {
-				let active_document = self;
-
-				for path in active_document.layer_data.iter().filter_map(|(path, data)| data.selected.then(|| path.clone())) {
+				for path in self.layer_data.iter().filter_map(|(path, data)| data.selected.then(|| path.clone())) {
 					responses.push_back(DocumentOperation::SetLayerBlendMode { path, blend_mode }.into());
 				}
 			}
@@ -407,12 +399,32 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 				Err(e) => log::error!("DocumentError: {:?}", e),
 				Ok(_) => (),
 			},
-			RenderDocument => responses.push_back(
-				FrontendMessage::UpdateCanvas {
-					document: self.document.render_root(),
-				}
-				.into(),
-			),
+			RenderDocument => {
+				responses.push_back(
+					FrontendMessage::UpdateCanvas {
+						document: self.document.render_root(),
+					}
+					.into(),
+				);
+				let root = self.layerdata(&[]);
+				let viewport = ipp.viewport_bounds.size();
+				let [bounds1, bounds2] = self.document.visible_layers_bounding_box().unwrap_or_default();
+				let bounds1 = bounds1.min(DVec2::ZERO) - viewport * (f64::powf(2., root.scale / 3.) * 0.5);
+				let bounds2 = bounds2.max(viewport) + viewport * (f64::powf(2., root.scale / 3.) * 0.5);
+				let bounds_length = bounds2 - bounds1;
+				let scrollbar_multiplier = bounds_length - viewport;
+				let scrollbar_position = bounds1.abs() / scrollbar_multiplier;
+				let scrollbar_size = viewport / bounds_length;
+				responses.push_back(
+					FrontendMessage::UpdateScrollbars {
+						position: scrollbar_position.into(),
+						size: scrollbar_size.into(),
+						multiplier: scrollbar_multiplier.into(),
+					}
+					.into(),
+				);
+			}
+
 			NudgeSelectedLayers(x, y) => {
 				for path in self.selected_layers().cloned() {
 					let operation = DocumentOperation::TransformLayerInViewport {

editor/src/document/movement_handler.rs

@@ -30,6 +30,7 @@ pub enum MovementMessage {
 	DecreaseCanvasZoom,
 	WheelCanvasZoom,
 	ZoomCanvasToFitAll,
+	TranslateCanvas(glam::DVec2),
 }
 
 #[derive(Debug, Clone, Default, PartialEq)]
@@ -189,6 +190,12 @@ impl MessageHandler<MovementMessage, (&mut LayerData, &Document, &InputPreproces
 					self.create_document_transform_from_layerdata(layerdata, &ipp.viewport_bounds, responses);
 				}
 			}
+			TranslateCanvas(delta) => {
+				let transformed_delta = document.root.transform.inverse().transform_vector2(delta);
+
+				layerdata.translation += transformed_delta;
+				self.create_document_transform_from_layerdata(layerdata, &ipp.viewport_bounds, responses);
+			}
 		}
 	}
 	fn actions(&self) -> ActionList {

editor/src/frontend/frontend_message_handler.rs

@@ -17,6 +17,7 @@ pub enum FrontendMessage {
 	DisplayConfirmationToCloseDocument { document_index: usize },
 	DisplayConfirmationToCloseAllDocuments,
 	UpdateCanvas { document: String },
+	UpdateScrollbars { position: (f64, f64), size: (f64, f64), multiplier: (f64, f64) },
 	UpdateLayer { path: Vec<LayerId>, data: LayerPanelEntry },
 	ExportDocument { document: String, name: String },
 	SaveDocument { document: String, name: String },
@@ -50,6 +51,7 @@ impl MessageHandler<FrontendMessage, ()> for FrontendMessageHandler {
 		ExpandFolder,
 		SetActiveTool,
 		UpdateCanvas,
+		UpdateScrollbars,
 		EnableTextInput,
 		DisableTextInput,
 		SetCanvasZoom,