1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-13 09:09:25 +00:00

Improvements to zoomable pan and zoom

This commit is contained in:
Jeremy Ruston 2012-11-27 18:30:21 +00:00
parent e4fb532ecd
commit 99275b5425
4 changed files with 22 additions and 6 deletions

View File

@ -22,7 +22,7 @@ exports.info = {
}; };
exports.executeMacro = function() { exports.executeMacro = function() {
var innerClasses = ["tw-scrollable-inner"], var innerClasses = ["tw-zoomable-inner"],
innerAttributes = { innerAttributes = {
"class": innerClasses, "class": innerClasses,
style: { style: {
@ -30,7 +30,7 @@ exports.executeMacro = function() {
position: "relative" position: "relative"
} }
}, },
outerClasses = ["tw-scrollable","tw-scrollable-outer"], outerClasses = ["tw-zoomable","tw-zoomable-outer"],
outerAttributes = { outerAttributes = {
"class": outerClasses, "class": outerClasses,
style: { style: {
@ -82,7 +82,7 @@ exports.setViewPort = function(domNode) {
$tw.utils.setStyle(this.innerFrame.domNode,[ $tw.utils.setStyle(this.innerFrame.domNode,[
{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out"}, {transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
{transformOrigin: "0% 0%"}, {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,[ $tw.utils.setStyle(this.innerFrame.domNode,[
{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out"}, {transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
{transformOrigin: "0% 0%"}, {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) { exports.handleScrollEvent = function(event) {
console.log("Zoomable got scroll event to",event.target);
this.setViewPort(event.target); this.setViewPort(event.target);
event.stopPropagation(); event.stopPropagation();
return false; return false;

View File

@ -6089,6 +6089,16 @@ a.tw-tiddlylink-missing {
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4); 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 { .tw-menu-list-item {
padding-bottom: 0.5em; padding-bottom: 0.5em;
word-wrap: break-word; word-wrap: break-word;

View File

@ -195,6 +195,14 @@ a.tw-tiddlylink-missing {
width: 400px; 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 { .tw-menu-list-item {
word-wrap: break-word; word-wrap: break-word;
padding-bottom: 0.5em; padding-bottom: 0.5em;

View File

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