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.
This commit is contained in:
Joel Martin 2010-07-30 09:53:33 -05:00
parent 29ad96c526
commit 125d8bbb8f
2 changed files with 67 additions and 16 deletions

View File

@ -20,19 +20,20 @@ prefer_js : false, // make private
force_canvas : false, // make private
cursor_uri : true, // make private
true_color : false,
colourMap : [],
true_color : true,
colourMap : [],
c_wx : 0,
c_wy : 0,
ctx : null,
scale : 1,
c_wx : 0,
c_wy : 0,
ctx : null,
prevStyle: "",
prevStyle : "",
focused : true,
keyPress : null,
mouseButton : null,
mouseMove : null,
focused : true,
keyPress : null,
mouseButton : null,
mouseMove : null,
onMouseButton: function(e, down) {
var evt, pos, bmask;
@ -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 () {

View File

@ -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};
};