zoom changes

src/css/app.css

@@ -20,7 +20,7 @@
 }
 
  #workarea {
-  display: flex;
+  display: block;
   position:absolute;
   top: var(--x8);
   left: var(--x12);

src/css/method-draw.css

@@ -32,7 +32,7 @@ html, body {
 
 ::-webkit-scrollbar-track {
     border-radius: 10px;
-    background: var(--z1);
+    background: var(--z2);
 }
 
 ::-webkit-scrollbar-thumb {

src/js/Canvas.js

@@ -78,21 +78,22 @@ MD.Canvas = function(){
   }
 
   function update(center, new_ctr) {
-    var w = workarea.offsetWidth, h = workarea.offsetHeight;
+    var w = $(workarea).width(), h = $(workarea).height();
     var w_orig = w, h_orig = h;
     var zoom = svgCanvas.getZoom();
-    var cnvs = $(el);
-
+    var cnvs = $("#svgcanvas");
+      
     var old_ctr = {
       x: workarea.scrollLeft + w_orig/2,
       y: workarea.scrollTop + h_orig/2
     };
 
-    // curConfig.canvas_expansion
-    var multi = 1;
+    var multi = 2;
     w = Math.max(w_orig, svgCanvas.contentW * zoom * multi);
     h = Math.max(h_orig, svgCanvas.contentH * zoom * multi);
 
+    workarea.style.overflow = (w == w_orig && h == h_orig) ? "hidden" : "scroll";
+
     var old_can_y = cnvs.height()/2;
     var old_can_x = cnvs.width()/2;
     cnvs.width(w).height(h);
@@ -123,6 +124,22 @@ MD.Canvas = function(){
       new_ctr.y += offset.y;
     }
 
+    if(center) {
+      // Go to top-left for larger documents
+      if(svgCanvas.contentW > $(workarea).width()) {
+        // Top-left
+        workarea.scrollLeft = offset.x - 10;
+        workarea.scrollTop = offset.y - 10;
+      } else {
+        // Center
+        workarea.scrollLeft = scroll_x;
+        workarea.scrollTop = scroll_y;
+      }
+    } else {
+      workarea.scrollLeft = new_ctr.x - w_orig/2;
+      workarea.scrollTop = new_ctr.y - h_orig/2;
+    }
+
     editor.rulers.update();
     workarea.scroll();
   }

src/js/Import.js

@@ -96,7 +96,7 @@ MD.Import = function(){
       var reader = new FileReader();
       reader.onloadend = function(e) {
         loadSvgString(e.target.result);
-        editor.canvas.update();
+        editor.canvas.update(true);
       };
       reader.readAsText(f.files[0]);
     }

src/js/Keyboard.js

@@ -55,7 +55,7 @@ MD.Keyboard = function(){
     "cmd_shift_arrowdown":{ name: "Send to back", cb: () => editor.moveToBottomSelected()},
     "escape":  { name: false,    cb: ()=> editor.escapeMode()},
     "enter":    { name: false,    cb: ()=> editor.escapeMode()},
-    " ":  { name: "Pan canvas",    cb: ()=> editor.pan.startPan()},
+    " ":  { name: "Pan canvas",    cb: (e)=> editor.pan.startPan(e)},
   };
 
   document.addEventListener("keydown", function(e){

src/js/Pan.js

@@ -5,7 +5,7 @@ MD.Pan = function(){
   let last_x = null;
   let last_y = null;
 
-  function startPan(){
+  function startPan(e){
     panning = true;
     svgCanvas.spaceKey = true;
     document.body.classList.add("dragging");

src/js/Rulers.js

@@ -43,7 +43,7 @@ MD.Rulers = function(){
   });
 
   window.addEventListener("resize", function(){
-    editor.canvas.update();
+    editor.canvas.update(true);
     update();
   })
 

src/js/Zoom.js

@@ -47,10 +47,6 @@ MD.Zoom = function(){
 
     if(!z_info) return;
 
-    if(zoomlevel < .001) {
-      changeZoom({value: .1});
-      return;
-    }
     if (typeof animatedZoom !== 'undefined') window.cancelAnimationFrame(animatedZoom)
     // zoom duration 500ms
     var start = Date.now();
@@ -65,7 +61,8 @@ MD.Zoom = function(){
       editor.rulers.update();
       tick = (Math.pow((tick-1), 3) +1);
       svgCanvas.setZoom(current_zoom + (diff*tick));
-      updateCanvas();
+      var isCentered = !Boolean(bbox.width);
+      updateCanvas(isCentered, {x: bbox.x + bbox.width/2, y: bbox.y + bbox.height/2});
       if (tick < 1 && tick > -.90) {
         window.animatedZoom = requestAnimationFrame(animateZoom)
       }

src/js/editor.js

@@ -14,7 +14,7 @@ MD.Editor = function(){
       state.set("canvasMode", "select")
       svgCanvas.clear();
       svgCanvas.setResolution(dims[0], dims[1]);
-      editor.canvas.update();
+      editor.canvas.update(true);
       editor.zoom.reset();
       editor.panel.updateContextPanel();
       editor.paintBox.fill.prep();
@@ -186,7 +186,7 @@ MD.Editor = function(){
     const mode = svgCanvas.getMode();
 
     // if the element changed was the svg, then it could be a resolution change
-    if (elems[0].tagName === "svg")  return editor.canvas.update();
+    if (elems[0].tagName === "svg")  return editor.canvas.update(true);
 
 
     editor.panel.updateContextPanel(elems);

src/js/svgcanvas.js

@@ -3421,10 +3421,17 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
 
   // Added mouseup to the container here.
   // TODO(codedread): Figure out why after the Closure compiler, the window mouseup is ignored.
-  $(container).mousedown(mouseDown).mousemove(mouseMove).click(handleLinkInCanvas).dblclick(dblClick).mouseup(mouseUp);
-//  $(window).mouseup(mouseUp);
-
-  $(container).bind("mousewheel DOMMouseScroll", function(e){
+  $(container)
+    .mousedown(mouseDown)
+    .mousemove(mouseMove)
+    .click(handleLinkInCanvas)
+    .dblclick(dblClick)
+    .mouseup(mouseUp);
+
+  container.addEventListener("mousewheel", resizeCanvas);
+  container.addEventListener("gesturechange", resizeCanvas);
+
+  function resizeCanvas(e){
     if(!e.shiftKey) return;
     e.preventDefault();
 
@@ -3437,13 +3444,11 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
       'height': 0
     };
 
-    // Respond to mouse wheel in IE/Webkit/Opera.
-    // (It returns up/dn motion in multiples of 120)
     if(e.wheelDelta) {
-      if (e.wheelDelta >= 120) {
-        bbox.factor = 2;
-      } else if (e.wheelDelta <= -120) {
-        bbox.factor = .5;
+      if (e.wheelDelta > 0) {
+        bbox.factor = 1.5;
+      } else {
+        bbox.factor = .7;
       }
     } else if(e.detail) {
       if (e.detail > 0) {
@@ -3453,9 +3458,11 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
       }       
     }
 
-    if(!bbox.factor) return;
+    if(!bbox.factor) bbox.factor = 1;
+
     call("zoomed", bbox);
-  });
+  };
+
 
 }());