more work on scaling and animations -- almost works...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ui (gen4)/experiments/scale-origin.html

@@ -94,18 +94,11 @@ function setOrigin(l, t, no_comp){
 	var o = getElementOrigin(block)
 
 	if(!no_comp){
-		var s = getElementScale(block)
-
-		var offset = getElementOffset(block)
-
-		// calculate the offset change and compensate...
-		var cl = offset.left + ((o.left - o.left*s) - (l - l*s))
-		var ct = offset.top + ((o.top - o.top*s) - (t - t*s))
-
-		setElementOffset(block, cl, ct)
+		shiftOriginTo(block, l, t)
+	} else {
+		setElementOrigin(block, l+'px', t+'px')
 	}
 
-	setElementOrigin(block, l+'px', t+'px')
 
 	setElementOffset($('.point'), l, t)
 	setElementOffset($('.point-old'), o.left, o.top)
@@ -144,7 +137,7 @@ function centerBlock(l, t, scale){
 $(function(){
 	setOrigin(100, 100)
 	setOffset(50, 100)
-	setScale(0.7)
+	setScale(1.3)
 })
 
 </script>

ui (gen4)/index.html

@@ -61,6 +61,52 @@
 }
 
 
+
+
+.container-center {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 10px;
+	height: 10px;
+
+	border-top: solid 1px black;
+	border-left: solid 1px black;
+}
+.container-center:after {
+	content: "";
+	position: absolute;
+	top: -11px;
+	left: -11px;
+	width: 10px;
+	height: 10px;
+
+	border-top: none;
+	border-left: none;
+	border-bottom: solid 1px black;
+	border-right: solid 1px black;
+}
+.point {
+	position: absolute;
+	width: 4px;
+	height: 4px;
+	border: solid 1px blue;
+	margin-top: -2px;
+	margin-left: -2px;
+
+	background: yellow;
+
+	transition-origin: 50% 50%;
+
+	z-index: 9999;
+}
+.point {
+	-webkit-transition: all 0.2s linear;
+	-moz-transition: all 0.2s linear;
+	transition: all 0.2s linear;
+}
+
+
 </style>
 
 <!--script>
@@ -82,7 +128,9 @@ require('nw.gui').Window.get().showDevTools()
 
 <div class="viewer gray marks-visible">
 
-	<div class="ribbon-set"></div>
+	<div class="ribbon-set">
+		<div class="point" title="current origin point"> </div>
+	</div>
 
 
 	<!-- XXX should these be here???
@@ -91,6 +139,7 @@ require('nw.gui').Window.get().showDevTools()
 		<div class="content"></div>
 	</div>
 	-->
+	<div class="container-center"> </div>
 
 </div>
 

ui (gen4)/lib/jli.js

@@ -589,6 +589,7 @@ function getRelativeOffset(container, block, point){
 
 	scale = scale == 'screen' ? 1 
 		: scale == 'elem' ? s
+		: scale == null ? s
 		: scale
 
 	// normalize the l,t to element scale...

ui (gen4)/ribbons.js

@@ -341,37 +341,25 @@ module.RibbonsPrototype = {
 	*/
 	setOrigin: function(a, b){
 		var ribbon_set = this.viewer.find('.ribbon-set')
+		var ro = ribbon_set.offset()
 
 		if(typeof(a) == typeof(123) && typeof(b) == typeof(123)){
-			var t = a
-			var l = b
+			var l = a - ro.top
+			var t = b - ro.left
 
-		} else {
-			if(a == null){
-				var img = this.getImage()
 		} else {
 			var img = this.getImage(a)
-			}
-
 			var s = this.getScale()
 			var io = img.offset()
-			var vo = this.viewer.offset()
+			var w = img.width()
+			var h = img.height()
 
-			// get distance from center of image to top left corner of 
-			// screen...
-			// NOTE: the result should be scale-neutral.
-			var l = (io.left - vo.left) + (img.width()*s)/2
-			var t = (io.top - vo.top) + (img.height()*s)/2
+			var l = (io.left - ro.left)/s + w/2
+			var t = (io.top - ro.top)/s + h/2
 		}
 
-		var rs = getElementOffset(ribbon_set)
-
-		var ot = t - rs.top
-		var ol = l - rs.left
-
-		console.log('### origin:', ol, ot)
-
-		shiftOriginTo(ribbon_set, ol, ot)
+		shiftOriginTo(ribbon_set, l, t)
+		setElementOffset($('.point'), l, t)
 
 		return this
 	},
@@ -1471,6 +1459,7 @@ module.RibbonsPrototype = {
 	},
 	// center a ribbon vertically...
 	// 
+	/*
 	centerRibbon: function(target, offset, scale){
 		scale = scale == null ? this.getScale() : scale
 		// NOTE: when woring with origin we do not care about scale...
@@ -1488,20 +1477,40 @@ module.RibbonsPrototype = {
 		// 		...it's getting closer when enlarging and blows up when scale -> 0
 		offset -= (ot/scale - ot)
 
-		/*
-		var ribbon_set = this.viewer.find('.ribbon-set')
-		// XXX this needs the correct origin set before centering...
-		// XXX at scale this does not center corretly if ribbon is offset...
-		// 		...calling it multiple times gets it closer and closer...
-		var offset = getRelativeOffset(this.viewer, ribbon_set).top
-		*/
-
 		console.log('### offset-top:', offset)
 
 		setElementOffset(this.viewer.find('.ribbon-set'), 0, offset)
 
 		return this
 	},
+	*/
+
+
+	// XXX experimental...
+	centerRibbon: function(target, offset, scale){
+		var ribbon_set = this.viewer.find('.ribbon-set')
+
+		//this.setOrigin(target)
+		
+		target = this.getImage(target)
+		var s = this.getScale()
+		var ro = ribbon_set.offset()
+		var io = target.offset()
+		var h = target.height()
+
+		var t = (io.top - ro.top)/s + h/2
+
+		var offset = getRelativeOffset(this.viewer, ribbon_set, {
+			top: t,
+			left: 0,
+		}).top
+		
+		setElementOffset(ribbon_set, 0, offset)
+
+		return this
+	},
+
+
 	// center an image horizontally...
 	// 
 	centerImage: function(target, mode, offset, scale){
@@ -1565,6 +1574,19 @@ Ribbons.prototype.constructor = Ribbons
 
 
 
+/*********************************************************************/
+
+
+window.getOrigin = function(l, t){
+	return getElementOrigin($('.ribbon-set'))
+}
+window.setOrigin = function(l, t){
+	shiftOriginTo($('.ribbon-set'), l, t)
+	setElementOffset($('.point'), l, t)
+}
+
+
+
 /**********************************************************************
 * vim:set ts=4 sw=4 :                                                */
 return module })