From 2e4354462579b672003cac426c5bc42b6d72a739 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Wed, 22 Oct 2014 01:05:59 +0400 Subject: [PATCH] some work on cropping, fixed several bugs in Data.updateData(..) and friends... Signed-off-by: Alex A. Naanou --- ui (gen4)/data.js | 42 +++++++++++++++++++++---- ui (gen4)/ribbons.js | 38 ++++++++++++----------- ui (gen4)/ui.js | 21 ++++--------- ui (gen4)/viewer.js | 73 +++++++++++++++++++++++++++++++++++--------- 4 files changed, 121 insertions(+), 53 deletions(-) diff --git a/ui (gen4)/data.js b/ui (gen4)/data.js index 2f022019..637a70b3 100755 --- a/ui (gen4)/data.js +++ b/ui (gen4)/data.js @@ -422,7 +422,7 @@ module.DataPrototype = { // normalize the list to a sparse list of gids... list = list == null ? this.ribbons[this.getRibbon(target)] - : list.constructor.name == 'Array' ? + : list.constructor === Array ? this.makeSparseImages(list) : this.ribbons[this.getRibbon(list)] @@ -1348,13 +1348,43 @@ module.DataPrototype = { // // XXX flatten as an option... // XXX should this link to .root and .parent data??? - crop: function(list){ + crop: function(list, flatten){ var crop = this.clone() list = crop.makeSparseImages(list) - for(var k in crop.ribbons){ - crop.ribbons[k] = crop.makeSparseImages(crop.ribbons[k].filter(function(_, i){ - return list[i] != null - })) + + if(!flatten){ + // place images in ribbons... + for(var k in crop.ribbons){ + crop.ribbons[k] = crop.makeSparseImages(crop.ribbons[k].filter(function(_, i){ + return list[i] != null + })) + } + + // flatten the crop... + } else { + crop.ribbons = {} + crop.ribbon_order = [] + crop.ribbons[crop.newRibbon()] = list + } + + // clear empty ribbons... + Object.keys(crop.ribbons) + .forEach(function(k){ + if(crop.ribbons[k].length == 0){ + crop.ribbon_order.splice(crop.ribbon_order.indexOf(k), 1) + delete crop.ribbons[k] + } + }) + + // set the current image in the crop... + var r = this.getRibbon() + // if current ribbon is not empty get the closest image in it... + if(r in crop.ribbons && crop.ribbons[r].length > 0){ + crop.focusImage(this.current, 'after', this.getRibbon()) + + // if ribbon got deleted, get the closest loaded image... + } else { + crop.focusImage(this.current, list) } // XXX ??? diff --git a/ui (gen4)/ribbons.js b/ui (gen4)/ribbons.js index 1d9c95dc..235ab4f1 100755 --- a/ui (gen4)/ribbons.js +++ b/ui (gen4)/ribbons.js @@ -203,7 +203,6 @@ module.RibbonsPrototype = { getComputedStyle(v).transition } }, - noTransitions: function(func){ this.preventTransitions() func.apply(this, args2array(arguments).slice(1)) @@ -966,14 +965,18 @@ module.RibbonsPrototype = { })) }, - // update a set of images in a ribbon... + // Update a set of images in a ribbon... // // This will reuse the images that already exist, thus if updating or // adding images to an already loaded set this should be very fast. // // NOTE: gids and ribbon must be .getImage(..) and .getRibbon(..) // compatible... + // + // XXX at this point this expects gids to be a list of gids, need + // to make this compatible with jQuery collections... updateRibbon: function(gids, ribbon){ + var that = this // get/create the ribbon... var r = this.getRibbon(ribbon) if(r.length == 0){ @@ -982,24 +985,30 @@ module.RibbonsPrototype = { } var loaded = r.find('.image') + + // remove all images that we do not need... + loaded = loaded + .filter(function(i, img){ + // XXX .indexOf(..) will not work for a jQuery collection... + if(gids.indexOf(that.getElemGID($(img))) >= 0){ + return true + } + $(img).remove() + return false + }) - var that = this $(gids).each(function(i, gid){ // support for sparse ribbons... if(gid == null){ return } // get/create image... + // XXX this may affect other ribbons... var img = that.getImage(gid) img = img.length == 0 ? that.createImage(gid) : img - // clear a chunk of images that are not in gids until one that is... + // see of we are loaded in the right position... var g = loaded.length > i ? that.getElemGID(loaded.eq(i)) : null - while(g != null && gids.indexOf(g) < 0){ - that.clear(g) - loaded.splice(i, 1) - g = loaded.length > i ? that.getElemGID(loaded.eq(i)) : null - } // check if we need to reattach the image... if(gid != g){ @@ -1111,14 +1120,9 @@ module.RibbonsPrototype = { // clear the ribbons that did not get updated... if(!settings.keep_ribbons && (data.ribbon_order != null || data.ribbons != null)){ - var ribbons = [] - ribbons = data.ribbon_order != null - ? ribbons.concat(Object.keys(data.ribbon_order)) - : ribbons - ribbons = data.ribbons != null - ? ribbons.concat(Object.keys(data.ribbons)) - : ribbons - ribbons.push(data.base) + var ribbons = data.ribbon_order != null ? data.ribbon_order.slice() + : data.ribbons != null ? Object.keys(data.ribbons) + : [] that.viewer.find('.ribbon').each(function(){ var r = $(this) diff --git a/ui (gen4)/ui.js b/ui (gen4)/ui.js index 693735a0..864e0529 100755 --- a/ui (gen4)/ui.js +++ b/ui (gen4)/ui.js @@ -49,11 +49,14 @@ module.GLOBAL_KEYBOARD = { pattern: '*', F4: { + alt: 'close', + /* alt: doc('Close viewer', function(){ window.close() return false }), + */ }, F5: doc('Full reload viewer', function(){ @@ -66,25 +69,13 @@ module.GLOBAL_KEYBOARD = { location.reload() return false }), - F12: doc('Show devTools', - function(){ - if(window.showDevTools != null){ - showDevTools() - return false - - // if no showDevTools defined pass the button further... - } else { - return true - } - }), + F12: 'showDevTools', // NOTE: these are for systems where F** keys are not available // or do other stuff... R: { - 'ctrl+alt': 'reload!', + default: 'reverseImages!', + ctrl: 'reload!', 'ctrl+shift': 'F5', - - // XXX testing... - ctrl: 'reverseImages!', }, P: { 'ctrl+shift': 'F12', diff --git a/ui (gen4)/viewer.js b/ui (gen4)/viewer.js index cfc10019..ba133461 100755 --- a/ui (gen4)/viewer.js +++ b/ui (gen4)/viewer.js @@ -350,33 +350,46 @@ actions.Actions({ // crop... // - // XXX crop: [ - function(list){ + function(list, flatten){ + list = list || this.data.order if(this.crop_stack == null){ this.crop_stack = [] } - this.crop_stack.push(this.data) - this.data = this.data.crop(list) - - this.focusImage() + this.data = this.data.crop(list, flatten) }], - // XXX add level... - uncrop: ['', - function(){ + uncrop: ['Uncrop ribbons', + function(level, restore_current){ + level = level || 1 + + var cur = this.current + if(this.crop_stack == null){ return } - this.data = this.crop_stack.pop() + // uncrop all... + if(level == 'all'){ + this.data = this.crop_stack[0] + this.crop_stack = [] - if(this.crop_stack.length == 0){ - delete this.crop_stac + // get the element at level and drop the tail... + } else { + this.data = this.crop_stack.splice(-level, this.crop_stack.length)[0] } - this.focusImage() + // by default set the current from the crop... + if(!restore_current){ + this.data.focusImage(cur) + } + + if(this.crop_stack.length == 0){ + delete this.crop_stack + } }], + uncropAll: ['', + function(restore_current){ this.uncrop('all', restore_current) }], // XXX same as uncrop but will also try and merge changes... mergeCrop: ['', function(){ @@ -427,22 +440,27 @@ actions.Actions(Client, { }], + // XXX move this to a viewer window action set close: ['Cloase viewer', function(){ // XXX should we do anything else here like auto-save??? window.close() }], + // XXX where should toggleFullscreenMode(..) be defined... toggleFullScreen: ['', function(){ - // XXX + toggleFullscreenMode() }], toggleSingleImage: ['', function(){ // XXX }], + // XXX revise this... showDevTools: ['', function(){ - // XXX + if(window.showDevTools != null){ + showDevTools() + } }], @@ -641,6 +659,30 @@ actions.Actions(Client, { crop: [ reloadAfter() ], uncrop: [ reloadAfter() ], + + // XXX need flat version of these... + cropRibbon: ['Crop current ribbon', + function(ribbon, flatten){ + ribbon = ribbon || 'current' + this.crop(this.data.getImages(ribbon), flatten) + }], + cropRibbonAndAbove: ['', + function(ribbon, flatten){ + ribbon = ribbon || this.data.getRibbon() + + var data = this.data + var that = this + + var i = data.ribbon_order.indexOf(ribbon) + var ribbons = data.ribbon_order.slice(0, i) + var images = ribbons + .reduce(function(a, b){ + return data.getImages(a).concat(data.getImages(b)) + }, data.getImages(ribbon)) + .compact() + + this.crop(data.getImages(images), flatten) + }], }) @@ -678,6 +720,7 @@ module.Animation = { } +// XXX var CurrentIndicator = module.CurrentIndicator = { tag: 'ui-current-indicator',