Improvements to zoomable pan and zoom

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;

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;

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;

editions/tw5.com/wiki/DefaultTiddlers.tid

@@ -1,7 +1,6 @@
 title: $:/DefaultTiddlers
 
 HelloThere
-SidewaysView
 CecilySubView
 Introduction
 Improvements