Preliminary scaling code (deactivated).

Uses the CSS "scale()" operation. The main problem is that the DOM
container is not rescaled, only the size of the displayed content
within it so there will need to be some sort of mechanism to handle
this better so other elements reflow to the new size. Or it might just
not work and be removed later. The zoom property seems to do the right
behavior, but it's not widely supported. Worth exploring though.

include/canvas.js

@@ -20,14 +20,15 @@ prefer_js    : false, // make private
 force_canvas : false, // make private
 cursor_uri   : true,  // make private
 
-true_color : false,
+true_color   : true,
 colourMap    : [],
 
+scale        : 1,
 c_wx         : 0,
 c_wy         : 0,
 ctx          : null,
 
-prevStyle: "",
+prevStyle    : "",
 
 focused      : true,
 keyPress     : null,
@@ -40,7 +41,7 @@ onMouseButton: function(e, down) {
         return true;
     }
     evt = (e ? e : window.event);
-    pos = Util.getEventPosition(e, $(Canvas.id));
+    pos = Util.getEventPosition(e, $(Canvas.id), Canvas.scale);
     bmask = 1 << evt.button;
     //Util.Debug('mouse ' + pos.x + "," + pos.y + " down: " + down + " bmask: " + bmask);
     if (Canvas.mouseButton) {
@@ -61,7 +62,7 @@ onMouseUp: function (e) {
 onMouseWheel: function (e) {
     var evt, pos, bmask, wheelData;
     evt = (e ? e : window.event);
-    pos = Util.getEventPosition(e, $(Canvas.id));
+    pos = Util.getEventPosition(e, $(Canvas.id), Canvas.scale);
     wheelData = evt.detail ? evt.detail * -1 : evt.wheelDelta / 40;
     if (wheelData > 0) {
         bmask = 1 << 3;
@@ -81,7 +82,7 @@ onMouseWheel: function (e) {
 onMouseMove: function (e) {
     var evt, pos;
     evt = (e ? e : window.event);
-    pos = Util.getEventPosition(e, $(Canvas.id));
+    pos = Util.getEventPosition(e, $(Canvas.id), Canvas.scale);
     //Util.Debug('mouse ' + evt.which + '/' + evt.button + ' up:' + pos.x + "," + pos.y);
     if (Canvas.mouseMove) {
         Canvas.mouseMove(pos.x, pos.y);
@@ -203,7 +204,6 @@ init: function (id) {
     }
     c.style.cursor = curSave;
 
-
     Canvas.colourMap = [];
     Canvas.prevStyle = "";
     Canvas.focused = true;
@@ -254,6 +254,34 @@ resize: function (width, height, true_color) {
 
     Canvas.c_wx = c.offsetWidth;
     Canvas.c_wy = c.offsetHeight;
+
+    //Canvas.rescale(Canvas.scale);
+},
+
+rescale: function (factor) {
+    var c, tp, x, y, 
+        properties = ['transform', 'WebkitTransform', 'MozTransform', null];
+    c = $(Canvas.id);
+    while (tp = properties.shift()) {
+        if (typeof c.style[tp] != 'undefined') {
+            break;
+        }
+    }
+
+    if (tp === null) {
+        Util.Debug("No scaling support");
+        return;
+    }
+
+    if (Canvas.scale === factor) {
+        //Util.Debug("Canvas already scaled to '" + factor + "'");
+        return;
+    }
+
+    Canvas.scale = factor;
+    x = c.width - c.width * factor;
+    y = c.height - c.height * factor;
+    c.style[tp] = "scale(" + Canvas.scale + ") translate(-" + x + "px, -" + y + "px)";
 },
 
 stop: function () {

include/util.js

@@ -167,6 +167,26 @@ Util.getQueryVar = function(name, defVal) {
     return (document.location.href.match(re) || ['',defVal])[1];
 };
 
+// Set defaults for Crockford style function namespaces
+Util.conf_default = function(cfg, api, v, val) {
+    if (typeof cfg[v] === 'undefined') {
+        cfg[v] = val;
+    }
+    // Default getter
+    if (typeof api['get_' + v] === 'undefined') {
+        api['get_' + v] = function () {
+                return cfg[v];
+            };
+    }
+    // Default setter
+    if (typeof api['set_' + v] === 'undefined') {
+        api['set_' + v] = function (val) {
+                cfg[v] = val;
+            };
+    }
+};
+
+
 
 /*
  * Cross-browser routines
@@ -186,7 +206,7 @@ Util.getPosition = function (obj) {
 };
 
 // Get mouse event position in DOM element
-Util.getEventPosition = function (e, obj) {
+Util.getEventPosition = function (e, obj, scale) {
     var evt, docX, docY, pos;
     //if (!e) evt = window.event;
     evt = (e ? e : window.event);
@@ -200,7 +220,10 @@ Util.getEventPosition = function (e, obj) {
             document.documentElement.scrollTop;
     }
     pos = Util.getPosition(obj);
-    return {'x': docX - pos.x, 'y': docY - pos.y};
+    if (typeof scale === "undefined") {
+        scale = 1;
+    }
+    return {'x': (docX - pos.x) / scale, 'y': (docY - pos.y) / scale};
 };