YES WE FIXED ZOOMING!!!

Author: hannahliu123

src/constants.js

@@ -10,6 +10,10 @@ export const bottomMargin = 0.075*pageHeight;   // margin at bottom of page
 export const pageSpace = 0.02*pageHeight;       // space between pages
 export let noteSize = 0.03*width;
 
+export const zoomFactor = 0.2;  // how much to zoom in/out
+export const zoomMin = 0.75;
+export const zoomMax = 5;
+
 // Setup
 export let titleSize = 0.05*width;
 export let titleY = 0.1*pageHeight;

src/main.js

@@ -11,7 +11,10 @@ import { createMeasure, createPageGroup } from './renderer.js';
 const canvas = SVG().addTo(CONFIG.container)
     .size(CONFIG.screenWidth, CONFIG.screenHeight)
     .viewbox(-CONFIG.autoMargin, -CONFIG.autoMargin, CONFIG.screenWidth, CONFIG.screenHeight);
-canvas.panZoom({ zoomMin: 0.25, zoomMax: 5, zoomFactor: 0.1 });
+canvas.panZoom({
+    wheelZoom: false,   // custom logic instead
+    panning: true
+});
 
 setupEditorUI();    // Initialize UI
 const musicLayer = canvas.group().id("music-layer");
@@ -105,13 +108,65 @@ document.querySelectorAll(".icon").forEach(icon => {
 
 // Adding Measures
 document.getElementById("add-measure-btn").addEventListener("click", () => {
-    for (let i=0; i < 150; ++i) addMeasure();
+    for (let i=0; i < 400; ++i) addMeasure();
     addMeasure();
 });
 
 // Zooming
-document.getElementById("zoom-in").addEventListener("click", () => canvas.zoom(canvas.zoom() * 1.2));
-document.getElementById("zoom-out").addEventListener("click", () => canvas.zoom(canvas.zoom() / 1.2));
+function getZoom(zoom) {    // keep zoom within boundaries
+    return Math.min(Math.max(zoom, CONFIG.zoomMin), CONFIG.zoomMax);
+}
+document.getElementById("zoom-in").addEventListener("click", () => canvas.zoom(getZoom(canvas.zoom() * (1+CONFIG.zoomFactor))));
+document.getElementById("zoom-out").addEventListener("click", () => canvas.zoom(getZoom(canvas.zoom() / (1+CONFIG.zoomFactor))));
+canvas.on("wheel", e => {
+    e.preventDefault();
+
+    let newY = 0;   // default initialize to 0 (we change it later)
+    if (e.ctrlKey) {    // zoom
+        const zFactor = 1+CONFIG.zoomFactor;
+        let currZoom = canvas.zoom();
+        const newZoom = e.deltaY < 0? currZoom*zFactor : currZoom/zFactor;
+        const point = canvas.point(e.clientX, e.clientY);   // centers zoom around mouse
+        canvas.zoom(getZoom(newZoom), point);
+
+        // check if we zoomed past any boundaries
+        let vb = canvas.viewbox();
+        currZoom = canvas.zoom();  // update variables
+        newY = vb.y;
+        const totalHeight = musicLayer.bbox().height;   // height of all pages
+        const margin = CONFIG.autoMargin/currZoom;
+        const minY = -margin;   // highest possible height
+        let maxY = Math.max(minY, totalHeight + margin - vb.h); // lowest possible height relative to the top of the viewbox
+        
+        if (vb.h >= totalHeight + (margin * 2) || newY < minY) {   // zoomed out too far
+            newY = minY;
+        } else if (newY > maxY) {
+            newY = maxY;
+        }
+        canvas.viewbox(vb.x, newY, vb.w, vb.h);
+        
+    } else {    // manual scrolling
+        const vb = canvas.viewbox();
+        const zoom = canvas.zoom();     // use zoom so that you don't scroll by a ton when zoomed into a small area
+
+        // deltaY pos=down, negative=up
+        const scrollAmount = e.deltaY / zoom;
+        let newY = vb.y + scrollAmount;
+
+        // limit how far they can scroll vertically
+        const totalHeight = musicLayer.bbox().height;   // height of all pages
+        const margin = CONFIG.autoMargin/zoom;
+        const minY = -margin;   // highest possible height
+        let maxY = Math.max(minY, totalHeight + margin - vb.h); // lowest possible height relative to the top of the viewbox
+        
+        if (newY < minY) {
+            newY = minY;
+        } else if (newY > maxY) {
+            newY = maxY;
+        }
+        canvas.viewbox(vb.x, newY, vb.w, vb.h);     // min x coord, min y coord, width, height
+    }
+}, { passive: false });     // tells browser im preventing default behavior
 
 // Preview
 document.getElementById("preview-btn").addEventListener("click", () => {

src/renderer.js

@@ -59,17 +59,20 @@ export function createPageGroup(pageIndex, container) {
 
     const pageGroup = container.group()
         .id(`page-${pageIndex}`)
-        .translate(0, yOffset); // move is unreliabel for groups!
+        .translate(0, yOffset); // move is unreliable for groups!
 
     pageGroup.rect(CONFIG.width, CONFIG.pageHeight)
         .fill("white")
         .stroke({ color: "#ccc", width: 0.25 })
         .back();
 
-    // expand SVG canvas height (fixed) so we can scroll to the new page
-    const newHeight = yOffset + CONFIG.pageHeight + CONFIG.pageSpace;
-    canvas.size(CONFIG.screenWidth, newHeight);     // canvas svg
-    canvas.viewbox(-CONFIG.autoMargin, -CONFIG.autoMargin, CONFIG.screenWidth, newHeight);
+    // DON'T expand SVG canvas height (fixed). Only the vb changes when we scroll down
+    const newHeight = yOffset + CONFIG.pageHeight + CONFIG.pageSpace + CONFIG.autoMargin;
+    const vb = canvas.viewbox();
+    console.log("Previous VB: " + vb);
+    // canvas.viewbox(-CONFIG.autoMargin, -CONFIG.autoMargin, CONFIG.screenWidth, newHeight-CONFIG.pageSpace+CONFIG.autoMargin);
+    // console.log("New VB: " + canvas.viewbox());
+    // canvas.viewbox(-CONFIG.autoMargin, -CONFIG.autoMargin, CONFIG.screenWidth, newHeight);
 
     // ⭐⭐ change later? set viewbox to the created page? 
 

src/style.css

@@ -211,22 +211,26 @@ button:active {
     display: flex;
     gap: 2px;
     position: absolute;
-    top: 0;
-    right: 16px;
+    top: 2px;
+    right: 3px;
 }
 
 #zoom-controls button {
     border: 1px solid gray;
     padding: 0 5px;
 }
 
+/* Hide scrollbar for Chrome, Safari and Opera */
+#sheet-container::-webkit-scrollbar {
+    display: none;
+}
+
 #sheet-container {
     flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 3vw;
+    height: 100vh;
     overflow-y: scroll;
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
 }
 
 #sheet-container > svg {