--- zogiLib/js/Attic/navigation.js 2004/04/16 14:07:08 1.3 +++ zogiLib/js/Attic/navigation.js 2004/04/28 09:03:21 1.4 @@ -32,6 +32,12 @@ var dlTrafo = new Transform(); if (! Array.prototype.push) { Array.prototype.push = function(val) { this[this.length] = val; + return this.length; + } + Array.prototype.pop = function() { + var val = this[this.length-1]; + this.length -= 1; + return val; } } @@ -42,16 +48,16 @@ function cropFloat(x) { function newParameter(name, defaultValue, detail) { // create a new parameter with a name and a default value - if ( !dlParams[name] ) { + if (dlParams[name]) { + alert("Fatal: An object with name '" + name + "' already exists - cannot recreate!"); + return false; + } else { dlParams[name] = new Object(); dlParams[name].defaultValue = defaultValue; dlParams[name].hasValue = false; dlParams[name].value = defaultValue; dlParams[name].detail = detail; return dlParams[name]; - } else { - alert("Fatal: An object with name '" + name + "' already exists - cannot recreate!"); - return false; } } @@ -64,7 +70,7 @@ function getParameter(name) { return dlParams[name].defaultValue; } } else { - return false; + return undefined; } } @@ -73,7 +79,9 @@ function setParameter(name, value) { if (dlParams[name]) { dlParams[name].value = value; dlParams[name].hasValue = true; + return true; } + return false; } function getAllParameters(detail) { @@ -112,17 +120,19 @@ function setParamFromRect(rect) { setParameter("wy", cropFloat(rect.y)); setParameter("ww", cropFloat(rect.width)); setParameter("wh", cropFloat(rect.height)); + return true; } function parseTrafo() { // returns Transform from current dlArea and picsize - var picsize = getElementSize("scaler"); + var picsize = getElementSize("pic"); var trafo = new Transform(); // subtract area offset and size trafo.concat(getTranslation(new Position(-dlArea.x, -dlArea.y))); trafo.concat(getScale(new Size(1/dlArea.width, 1/dlArea.height))); // scale to screen size trafo.concat(getScale(picsize)); + trafo.concat(getTranslation(picsize)); // rotate //trafo.concat(getRotation(- getParameter("rot"), new Position(0.5*picsize.width, 0.5*picsize.height))); // mirror @@ -157,42 +167,47 @@ function getAllMarks() { return marks.join(";"); } -function addMark(x, y) { +function addMark(pos) { // add a mark - dlMarks.push(new Position(x, y)); + dlMarks.push(pos); setParameter("mk", getAllMarks()); + return true; } function deleteMark() { // delete the last mark dlMarks.pop(); setParameter("mk", getAllMarks()); + return true; } function hasFlag(mode) { // returns if mode flag is set - return (dlFlags[mode] && (dlFlags[mode] != null)); + return (dlFlags[mode]); } function addFlag(mode) { // add a mode flag dlFlags[mode] = mode; + return true; } function removeFlag(mode) { // remove a mode flag if (dlFlags[mode]) { - dlFlags[mode] = null; + delete dlFlags[mode]; } + return true; } function toggleFlag(mode) { // change a mode flag if (dlFlags[mode]) { - dlFlags[mode] = null; + delete dlFlags[mode]; } else { dlFlags[mode] = mode; } + return true; } function getAllFlags() { @@ -225,6 +240,7 @@ function parseFlags() { function Size(w, h) { this.width = parseFloat(w); this.height = parseFloat(h); + return this; } /* @@ -233,6 +249,20 @@ function Size(w, h) { function Position(x, y) { this.x = parseFloat(x); this.y = parseFloat(y); + return this; +} +function evtPosition(evt) { + // returns the on-screen Position of the Event + var x; + var y; + if (document.all) { + x = parseInt(document.body.scrollLeft+event.clientX); + y = parseInt(document.body.scrollLeft+event.clientY); + } else { + x = parseInt(evt.pageX); + y = parseInt(evt.pageY); + } + return new Position(x, y); } /* @@ -243,6 +273,7 @@ function Rectangle(x, y, w, h) { this.y = parseFloat(y); this.width = parseFloat(w); this.height = parseFloat(h); + return this; } Rectangle.prototype.copy = function() { // returns a copy of this Rectangle @@ -298,6 +329,7 @@ function Transform() { this.m20 = 0.0; this.m21 = 0.0; this.m22 = 1.0; + return this; } Transform.prototype.concat = function(traf) { for (var i = 0; i < 3; i++) { @@ -309,6 +341,7 @@ Transform.prototype.concat = function(tr this["m"+i+j] = c; } } + return this; } Transform.prototype.transform = function(pos) { var x = this.m00 * pos.x + this.m01 * pos.y + this.m02; @@ -349,11 +382,13 @@ function getScale(size) { function getElement(tagid) { // returns the named element object - if (document.all) { - return document.all[tagid]; - } else if (document.getElementById) { + if (document.getElementById) { return document.getElementById(tagid); + } else if (document.all) { + alert("document.all!"); + return document.all[tagid]; } else { + alert("no document.all!"); return document[tagid]; } } @@ -365,16 +400,27 @@ function getElementSize(tagid) { var width = 0; var height = 0; var elem = getElement(tagid); - if (elem.offsetWidth) { - x = parseInt(elem.offsetLeft); - y = parseInt(elem.offsetTop); - width = parseInt(elem.offsetWidth); - height = parseInt(elem.offsetHeight); - } else { - x = parseInt(elem.left); - y = parseInt(elem.top); - width = parseInt(elem.clip.width); - height = parseInt(elem.clip.height); + if (elem.left) { + alert("elem.left!"); + x = elem.left; + y = elem.top; + width = elem.width; + height = elem.height; + } else { + if (elem.clientLeft) { + // spass mit IE + x = elem.clientLeft; + y = elem.clientTop; + } else { + var e = elem; + while (e) { + x += e.offsetLeft; + y += e.offsetTop; + e = e.offsetParent; + } + } + width = elem.offsetWidth; + height = elem.offsetHeight; } return new Rectangle(x, y, width, height); } @@ -383,11 +429,14 @@ function moveElement(tagid, pos) { // moves the named element to the indicated position var elem = getElement(tagid); if (elem.style) { - elem.style.left = pos.x; - elem.style.top = pos.y; + elem.style.left = pos.x + "px"; + elem.style.top = pos.y + "px"; } else { alert("moveelement: no style property!"); + elem.left = pos.x; + elem.top = pos.y; } + return true; } function showElement(tagid, show) { @@ -402,6 +451,7 @@ function showElement(tagid, show) { } else { alert("showelement: no style property!"); } + return true; } function registerMouseDown(tagid, handler) { @@ -414,6 +464,7 @@ function registerMouseDown(tagid, handle document[tagid].captureEvents(Event.MOUSEDOWN); document[tagid].onmousedown = handler; } + return true; } function unregisterMouseDown(tagid, handler) { @@ -425,6 +476,7 @@ function unregisterMouseDown(tagid, hand } else { document[tagid].releaseEvents(Event.MOUSEDOWN); } + return true; } function registerMouseMove(tagid, handler) { @@ -437,6 +489,7 @@ function registerMouseMove(tagid, handle document[tagid].captureEvents(Event.MOUSEMOVE); document[tagid].onmousemove = handler; } + return true; } function unregisterMouseMove(tagid, handler) { @@ -448,6 +501,7 @@ function unregisterMouseMove(tagid, hand } else { document[tagid].releaseEvents(Event.MOUSEMOVE); } + return true; } function registerKeyDown(handler) { @@ -460,6 +514,7 @@ function registerKeyDown(handler) { window.captureEvents(Event.KEYDOWN); window.onkeydown = handler; } + return true; } function getWinSize() { @@ -483,12 +538,12 @@ function getWinSize() { function bestPicSize(tagid) { // returns a Size with the best image size for the given tagid - var inset = 5; - var ps = getWinSize(); - var scaler = document.getElementById(tagid); - ps.width = ps.width - scaler.offsetLeft - inset; - ps.height = ps.height - scaler.offsetTop - inset; - return ps; + var inset = 0; + var ws = getWinSize(); + var es = getElementSize(tagid); + ws.width = ws.width - es.x - inset; + ws.height = ws.height - es.y - inset; + return ws; } @@ -520,54 +575,6 @@ function display(detail) { } -/* - * Point class - */ -function Point() { -} -Point.prototype.setWithEvent = function(evt) { - // set point values from event - - if ( document.all ) { - - this.pageX = parseInt(document.body.scrollLeft+event.clientX); - this.pageY = parseInt(document.body.scrollLeft+event.clientY); - - this.x = this.pageX-parseInt(document.all.scaler.offsetLeft); - this.y = this.pageY-parseInt(document.all.scaler.offsetTop); - - this.relX = cropFloat(parseFloat(dlParams.wx.value)+(dlParams.ww.value*this.x/document.all.scaler.offsetWidth)); - this.relY = cropFloat(parseFloat(dlParams.wy.value)+(dlParams.wh.value*this.y/document.all.scaler.offsetHeight)); - - } else { - - this.pageX = parseInt(evt.pageX); - this.pageY = parseInt(evt.pageY); - - if ( typeof(document.getElementById) == "function" ) { - - this.x = this.pageX-parseInt(document.getElementById("scaler").offsetLeft); - this.y = this.pageY-parseInt(document.getElementById("scaler").offsetTop); - // top("2"+"::"+this.pageX+"::"+parseInt(document.getElementById("scaler").offsetLeft)+'::'+document.getElementById("scaler").offsetLeft); - this.relX = cropFloat(parseFloat(dlParams.wx.value)+(dlParams.ww.value*this.x/document.pic.offsetWidth)); - this.relY = cropFloat(parseFloat(dlParams.wy.value)+(dlParams.wh.value*this.y/document.pic.offsetHeight)); - - } else { - - this.x = this.pageX-document.scaler.left; - this.y = this.pageY-document.scaler.top; - - this.relX = cropFloat(parseFloat(dlParams.wx.value)+(dlParams.ww.value*this.x/document.scaler.clip.width)); - this.relY = cropFloat(parseFloat(dlParams.wy.value)+(dlParams.wh.value*this.y/document.scaler.clip.height)); - - } - - } - - return this; - -} - function page(page, details) { @@ -618,15 +625,8 @@ function mark() { function markEvent(evt) { // event handler adding a new mark unregisterMouseDown("scaler", markEvent); - var point = new Point(); - point.setWithEvent(evt); - var point2 = dlTrafo.invtransform(new Position(point.x, point.y)); - //alert("p0: "+point.x+", "+point.y); - //alert("p1: "+point.relX+", "+point.relY+" p2: "+point2.x+", "+point2.y); - var point3 = dlTrafo.transform(point2); - //alert("p3: "+point3.x+", "+point3.y); - //addMark(point.relX, point.relY); - addMark(point2.x, point2.y); + var p = dlTrafo.invtransform(evtPosition(evt)); + addMark(p); placeMarks(); } @@ -648,16 +648,15 @@ function placeMarks() { if (picelem && picelem.complete == false) { setTimeout("placeMarks()", 100); } else { - var picsize = getElementSize("scaler"); + var picsize = getElementSize("pic"); dlTrafo = parseTrafo(); for (var i = 0; i < 8; i++) { if (i < mark_count) { if (dlArea.containsPosition(dlMarks[i])) { var mpos = dlTrafo.transform(dlMarks[i]); - //alert("mark: "+mpos.x+" "+mpos.y); // suboptimal to place -5 pixels and not half size of mark-image - mpos.x = mpos.x + picsize.x -5; - mpos.y = mpos.y + picsize.y -5; + mpos.x = mpos.x -5; + mpos.y = mpos.y -5; moveElement("dot"+i, mpos); showElement("dot"+i, true); } @@ -672,25 +671,22 @@ function placeMarks() { function zoomPoint(inout) { // zoom image in or out around the clicked point - window.focus(); var zoom = ZOOMFACTOR; if (inout < 0) { zoom = 1/ZOOMFACTOR; } + window.focus(); function zoomPointEvent(evt) { // take new center and set zoom parameters - var point = new Point(); - point.setWithEvent(evt); + var p = dlTrafo.invtransform(evtPosition(evt)); var neww = Math.min(dlArea.width * (1/zoom), 1.0); var newh = Math.min(dlArea.height * (1/zoom), 1.0); - var newx = point.relX - 0.5 * neww; - var newy = point.relY - 0.5 * newh; + var newx = p.x - 0.5 * neww; + var newy = p.y - 0.5 * newh; var zoomarea = new Rectangle(newx, newy, neww, newh); - //alert("za1: "+zoomarea.x+","+zoomarea.y+" "+zoomarea.width+","+zoomarea.height); // check bounds zoomarea = dlMaxArea.fit(zoomarea); - //alert("za2: "+zoomarea.x+","+zoomarea.y+" "+zoomarea.width+","+zoomarea.height); // set parameters setParameter("wx", cropFloat(zoomarea.x)); setParameter("wy", cropFloat(zoomarea.y)); @@ -699,6 +695,7 @@ function zoomPoint(inout) { parseArea(); display(3); } + // starting event capture registerMouseDown("scaler", zoomPointEvent); } @@ -715,13 +712,12 @@ function zoomArea() { if (click == 1) { // first click -- start moving click = 2; - pt1 = new Point(); - pt1.setWithEvent(evt); + pt1 = evtPosition(evt); pt2 = pt1; - eck1pos = new Position(pt1.pageX, pt1.pageY); - eck2pos = new Position(pt1.pageX - 12, pt1.pageY); - eck3pos = new Position(pt1.pageX, pt1.pageY - 12); - eck4pos = new Position(pt1.pageX- 12, pt1.pageY - 12); + eck1pos = pt1; + eck2pos = new Position(pt1.x - 12, pt1.y); + eck3pos = new Position(pt1.x, pt1.y - 12); + eck4pos = new Position(pt1.y - 12, pt1.y - 12); moveElement("eck1", eck1pos); moveElement("eck2", eck2pos); moveElement("eck3", eck3pos); @@ -734,8 +730,7 @@ function zoomArea() { registerMouseMove("eck4", zoomMove); } else { // second click -- end moving - pt2 = new Point(); - pt2.setWithEvent(evt); + pt2 = evtPosition(evt); showElement("eck1", false); showElement("eck2", false); showElement("eck3", false); @@ -744,11 +739,13 @@ function zoomArea() { unregisterMouseMove("eck4", zoomMove); unregisterMouseDown("scaler", zoomClick); unregisterMouseDown("eck4", zoomClick); - var ww = pt2.relX-pt1.relX; - var wh = pt2.relY-pt1.relY; + var p1 = dlTrafo.invtransform(pt1); + var p2 = dlTrafo.invtransform(pt2); + var ww = p2.x-p1.x; + var wh = p2.y-p1.y; if ((ww > 0)&&(wh > 0)) { - setParameter("wx", cropFloat(pt1.relX)); - setParameter("wy", cropFloat(pt1.relY)); + setParameter("wx", cropFloat(p1.x)); + setParameter("wy", cropFloat(p1.y)); setParameter("ww", cropFloat(ww)); setParameter("wh", cropFloat(wh)); parseArea(); @@ -759,18 +756,18 @@ function zoomArea() { function zoomMove(evt) { // mouse move handler - pt2 = new Point(); - pt2.setWithEvent(evt); + pt2 = evtPosition(evt); // restrict marks to move right and down - eck1pos = new Position(pt1.pageX, pt1.pageY); - eck2pos = new Position(Math.max(pt1.pageX, pt2.pageX)-12, pt1.pageY); - eck3pos = new Position(pt1.pageX, Math.max(pt1.pageY, pt2.pageY)-12); - eck4pos = new Position(Math.max(pt1.pageX, pt2.pageX)-12, Math.max(pt1.pageY, pt2.pageY)-12); + eck1pos = pt1; + eck2pos = new Position(Math.max(pt1.x, pt2.x)-12, pt1.y); + eck3pos = new Position(pt1.x, Math.max(pt1.y, pt2.y)-12); + eck4pos = new Position(Math.max(pt1.x, pt2.x)-12, Math.max(pt1.y, pt2.y)-12); moveElement("eck1", eck1pos); moveElement("eck2", eck2pos); moveElement("eck3", eck3pos); moveElement("eck4", eck4pos); } + // starting event capture registerMouseDown("scaler", zoomClick); registerMouseDown("eck4", zoomClick); @@ -789,17 +786,16 @@ function zoomFullpage() { function moveTo() { - if ( (parseFloat(dlParams.ww.value) == 1.0) && (parseFloat(dlParams.wh.value) == 1.0) ) { + if ( (dlArea.width == 1.0) && (dlArea.height == 1.0) ) { alert("This function is only available when zoomed in!"); return; } function moveToEvent(event) { // move to handler - var point = new Point(); - point.setWithEvent(eventt); - var newarea = new Rectangle(point.relX-0.5*dlParams.ww.value, point.relY-0.5*dlParams.wh.value, dlArea.width, dlArea.height); - newarea = dlMaxArea.intersect(newarea); + var pt = evtPosition(evt); + var newarea = new Rectangle(pt.x-0.5*dlArea.width, pt.y-0.5*dlArea.height, dlArea.width, dlArea.height); + newarea = dlMaxArea.fit(newarea); // stopping event capture unregisterMouseDown("scaler", moveToEvent); // set parameters @@ -809,6 +805,7 @@ function moveTo() { setParameter("wh", cropFloat(newarea.height)); display(3); } + // starting event capture registerMouseDown("scaler", moveToEvent); }