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 })