diff --git a/ui (gen4)/experiments/scale-origin.html b/ui (gen4)/experiments/scale-origin.html
index dfe0cb8c..f53b1425 100755
--- a/ui (gen4)/experiments/scale-origin.html
+++ b/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)
})
diff --git a/ui (gen4)/index.html b/ui (gen4)/index.html
index 37949ede..26ad889d 100755
--- a/ui (gen4)/index.html
+++ b/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;
+}
+
+
+
diff --git a/ui (gen4)/lib/jli.js b/ui (gen4)/lib/jli.js
index 327e4748..b1dea7fc 100755
--- a/ui (gen4)/lib/jli.js
+++ b/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...
diff --git a/ui (gen4)/ribbons.js b/ui (gen4)/ribbons.js
index 37ef121d..df31df3b 100755
--- a/ui (gen4)/ribbons.js
+++ b/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 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 })