Mending the zoomin effect

Navigating forwards works OK

core/modules/macros/navigator.js

@@ -97,9 +97,13 @@ exports.eventMap["tw-navigate"] = function(event) {
 	if(this.hasParameter("set")) {
 		this.wiki.setTextReference(this.params.set,event.navigateTo);
 	}
-	// Add the tiddler to the top of the history stack
+	// Add a new record to the top of the history stack
 	this.getHistory();
-	this.history.stack.push({title: event.navigateTo});
+	this.history.stack.push({
+		title: event.navigateTo,
+		fromTitle: event.navigateFromTitle,
+		fromPosition: event.navigateFrom.getNodeBounds()
+	});
 	this.saveHistory();
 	event.stopPropagation();
 	return false;

core/modules/macros/story/story.js

@@ -291,14 +291,14 @@ exports.processHistoryChange = function() {
 		for(t=this.prevHistory.stack.length-1; t>=topCommon; t--) {
 			index = this.findStoryElementByTitle(0,this.prevHistory.stack[t].title);
 			if(index !== undefined && this.storyview.navigateBack) {
-				this.storyview.navigateBack(this.storyNode.children[index]);
+				this.storyview.navigateBack(this.storyNode.children[index],this.history.stack[t]);
 			}
 		}
 		// And now we navigate forwards through the new history to get to the latest tiddler
 		for(t=topCommon; t<this.history.stack.length; t++) {
 			index = this.findStoryElementByTitle(0,this.history.stack[t].title);
 			if(index !== undefined && this.storyview.navigateForward) {
-				this.storyview.navigateForward(this.storyNode.children[index]);
+				this.storyview.navigateForward(this.storyNode.children[index],this.history.stack[t]);
 			}
 		}
 	}

core/modules/macros/story/views/classic.js

@@ -48,11 +48,11 @@ ClassicScroller.prototype.remove = function(storyElementNode) {
 	return true;
 };
 
-ClassicScroller.prototype.navigateBack = function(storyElementNode) {
+ClassicScroller.prototype.navigateBack = function(storyElementNode,historyInfo) {
 	$tw.utils.scrollIntoView(storyElementNode.domNode);
 };
 
-ClassicScroller.prototype.navigateForward = function(storyElementNode) {
+ClassicScroller.prototype.navigateForward = function(storyElementNode,historyInfo) {
 	$tw.utils.scrollIntoView(storyElementNode.domNode);
 };
 

core/modules/macros/story/views/zoomin.js

@@ -54,26 +54,11 @@ function findTitleNode(node) {
 	return null;
 }
 
-/*
-Given a tree node find the bounding rectange of its first child element
-*/
-function getNodeBounds(node) {
-	if(node && node.domNode) {
-		if(node.domNode.nodeType === Node.TEXT_NODE) {
-			return node.domNode.parentNode.getBoundingClientRect();
-		} else {
-			return node.domNode.getBoundingClientRect();
-		}
-	} else {
-		return getNodeBounds(node.child);
-	}
-}
-
 /*
 Visualise removal of the the specified tiddler macro, optionally specifying a source node for the visualisation
 	storyElementNode: tree node of the tiddler macro we're navigating to
 */
-Zoomin.prototype.navigateForward = function(storyElementNode) {
+Zoomin.prototype.navigateForward = function(storyElementNode,historyInfo) {
 	// Do nothing if the target tiddler is already the current tiddler
 	if(storyElementNode === this.currTiddler) {
 		return;
@@ -85,7 +70,7 @@ Zoomin.prototype.navigateForward = function(storyElementNode) {
 	storyElementNode.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(1)";
 	storyElementNode.domNode.style[$tw.browser.transition] = "none";
 	// Get the position of the source node, or use the centre of the window as the source position
-	var sourceBounds = {
+	var sourceBounds = historyInfo.fromPosition || {
 			left: window.innerWidth/2 - 2,
 			top: window.innerHeight/2 - 2,
 			width: 4,
@@ -94,8 +79,8 @@ Zoomin.prototype.navigateForward = function(storyElementNode) {
 	// Try to find the title node in the target tiddler
 	var titleNode = findTitleNode(storyElementNode) || storyElementNode;
 	// Compute the transform for the target tiddler to make the title lie over the source rectange
-	var targetBounds = getNodeBounds(storyElementNode),
+	var targetBounds = storyElementNode.getNodeBounds(),
-		titleBounds = getNodeBounds(titleNode),
+		titleBounds = titleNode.getNodeBounds(),
 		scale = sourceBounds.width / titleBounds.width,
 		x = sourceBounds.left - targetBounds.left - (titleBounds.left - targetBounds.left) * scale,
 		y = sourceBounds.top - targetBounds.top - (titleBounds.top - targetBounds.top) * scale;
@@ -108,7 +93,7 @@ Zoomin.prototype.navigateForward = function(storyElementNode) {
 		currTiddler = this.currTiddler;
 	$tw.utils.nextTick(function() {
 		// Transform the target tiddler
-		var currTiddlerBounds = getNodeBounds(currTiddler),
+		var currTiddlerBounds = currTiddler.getNodeBounds(),
 			x = (currTiddlerBounds.left - targetBounds.left),
 			y = (currTiddlerBounds.top - targetBounds.top);
 		storyElementNode.domNode.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, opacity " + d + " ease-out";

core/modules/treenodes/node.js

@@ -9,7 +9,7 @@ Base class for all other tree nodes
 (function(){
 
 /*jslint node: true, browser: true */
-/*global $tw: false */
+/*global $tw: false, Node: false */
 "use strict";
 
 /*
@@ -82,6 +82,32 @@ Node.prototype.addStyles = function(styles) {
 
 };
 
+/*
+Given a tree node find the bounding rectange of its first child element
+*/
+Node.prototype.getNodeBounds = function() {
+	var t,bounds;
+	if(this.domNode) {
+		if(this.domNode.nodeType === 3) { // Node.TEXT_NODE
+			return this.domNode.parentNode.getBoundingClientRect();
+		} else {
+			return this.domNode.getBoundingClientRect();
+		}
+	} else {
+		if(this.child) {
+			return this.child.getNodeBounds();
+		} else if(this.children) {
+			for(t=0; t<this.children.length; t++) {
+				bounds = this.children[t].getNodeBounds();
+				if(bounds) {
+					return bounds;
+				}
+			}
+		}
+	}
+	re
+}
+
 exports.Node = Node;
 
 })();