From 99275b5425572614bedccf39551beb3d8ede26b5 Mon Sep 17 00:00:00 2001
From: Jeremy Ruston <jeremy@osmosoft.com>
Date: Tue, 27 Nov 2012 18:30:21 +0000
Subject: [PATCH] Improvements to zoomable pan and zoom

---
 core/modules/macros/zoomable.js           |  9 ++++-----
 core/styles/tiddlywiki.css                | 10 ++++++++++
 cssbuild/tiddlywiki.less                  |  8 ++++++++
 editions/tw5.com/wiki/DefaultTiddlers.tid |  1 -
 4 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/core/modules/macros/zoomable.js b/core/modules/macros/zoomable.js
index 6426aa01b..91f988dda 100644
--- a/core/modules/macros/zoomable.js
+++ b/core/modules/macros/zoomable.js
@@ -22,7 +22,7 @@ exports.info = {
 };
 
 exports.executeMacro = function() {
-	var innerClasses = ["tw-scrollable-inner"],
+	var innerClasses = ["tw-zoomable-inner"],
 		innerAttributes = {
 			"class": innerClasses,
 			style: {
@@ -30,7 +30,7 @@ exports.executeMacro = function() {
 				position: "relative"
 			}
 		},
-		outerClasses = ["tw-scrollable","tw-scrollable-outer"],
+		outerClasses = ["tw-zoomable","tw-zoomable-outer"],
 		outerAttributes = {
 			"class": outerClasses,
 			style: {
@@ -82,7 +82,7 @@ exports.setViewPort = function(domNode) {
 			$tw.utils.setStyle(this.innerFrame.domNode,[
 				{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
 				{transformOrigin: "0% 0%"},
-				{transform: "scale(" + this.scale + ") translateX(" + this.translateX + "px) translateY(" + this.translateY + "px)"}
+				{transform: "translate(" + this.translateX * this.scale + "px," + this.translateY * this.scale + "px) scale(" + this.scale + ")"}
 			]);
 		}
 	}
@@ -122,7 +122,7 @@ exports.zoomAll = function() {
 	$tw.utils.setStyle(this.innerFrame.domNode,[
 		{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
 		{transformOrigin: "0% 0%"},
-		{transform: "scale(" + this.scale + ") translateX(" + this.translateX + "px) translateY(" + this.translateY + "px)"}
+		{transform: "translate(" + this.translateX * this.scale + "px," + this.translateY * this.scale + "px) scale(" + this.scale + ")"}
 	]);
 };
 
@@ -138,7 +138,6 @@ exports.handleEvent = function(event) {
 }
 
 exports.handleScrollEvent = function(event) {
-console.log("Zoomable got scroll event to",event.target);
 	this.setViewPort(event.target);
 	event.stopPropagation();
 	return false;
diff --git a/core/styles/tiddlywiki.css b/core/styles/tiddlywiki.css
index a82063766..6810003d4 100644
--- a/core/styles/tiddlywiki.css
+++ b/core/styles/tiddlywiki.css
@@ -6089,6 +6089,16 @@ a.tw-tiddlylink-missing {
           box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
 }
 
+.tw-zoomable .tw-tiddler-frame {
+  width: auto;
+  padding: 30px 30px 30px 30px;
+  margin: 0 0px 0px 0px;
+  background-color: #fff;
+  -webkit-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
+     -moz-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
+          box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
+}
+
 .tw-menu-list-item {
   padding-bottom: 0.5em;
   word-wrap: break-word;
diff --git a/cssbuild/tiddlywiki.less b/cssbuild/tiddlywiki.less
index d40961c22..13cce891c 100644
--- a/cssbuild/tiddlywiki.less
+++ b/cssbuild/tiddlywiki.less
@@ -195,6 +195,14 @@ a.tw-tiddlylink-missing {
 	width: 400px;
 }
 
+.tw-zoomable .tw-tiddler-frame {
+	margin: 0px 0px 0px 0px;
+	padding: 30px 30px 30px 30px;
+	.box-shadow(1px 1px 6px rgba(0,0,0,0.4));
+	background-color: #fff;
+	width: auto;
+}
+
 .tw-menu-list-item {
 	word-wrap: break-word;
 	padding-bottom: 0.5em;
diff --git a/editions/tw5.com/wiki/DefaultTiddlers.tid b/editions/tw5.com/wiki/DefaultTiddlers.tid
index 1f9755313..eca9f746d 100644
--- a/editions/tw5.com/wiki/DefaultTiddlers.tid
+++ b/editions/tw5.com/wiki/DefaultTiddlers.tid
@@ -1,7 +1,6 @@
 title: $:/DefaultTiddlers
 
 HelloThere
-SidewaysView
 CecilySubView
 Introduction
 Improvements