From 9ce4e3c0c4b1ef39f4f040abf6d6cb6054f57f9b Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Tue, 2 May 2017 14:57:25 +0300 Subject: [PATCH] some refactoring... Signed-off-by: Alex A. Naanou --- ui (gen4)/features/base.js | 39 +++- ui (gen4)/features/ui-partial-ribbons-vdom.js | 19 +- ui (gen4)/features/ui.js | 219 ++++++++++-------- 3 files changed, 174 insertions(+), 103 deletions(-) diff --git a/ui (gen4)/features/base.js b/ui (gen4)/features/base.js index c580e797..5475f3c9 100755 --- a/ui (gen4)/features/base.js +++ b/ui (gen4)/features/base.js @@ -57,7 +57,6 @@ var undoShift = function(undo){ var BaseActions = module.BaseActions = actions.Actions({ - config: { // XXX should this be here??? version: 'gen4', @@ -857,20 +856,20 @@ actions.Actions({ var Base = -module.Base = core.ImageGridFeatures.Feature({ +module.Base = +core.ImageGridFeatures.Feature({ title: 'ImageGrid base', tag: 'base', depends: [ 'changes', ], - /* suggested: [ - 'tags', - 'sort', - 'tasks', + 'base-edit', + //'tags', + //'sort', + //'tasks', ], - //*/ actions: BaseActions, @@ -994,6 +993,32 @@ module.Base = core.ImageGridFeatures.Feature({ }) +//--------------------------------------------------------------------- +// Edit... +var BaseEditActions = +module.BaseEditActions = +actions.Actions({ + config: { + }, + + // XXX +}) + +var BaseEdit = +module.BaseEdit = +core.ImageGridFeatures.Feature({ + title: 'ImageGrid base editor', + + tag: 'base-edit', + depends: [ + 'base', + ], + + actions: BaseEditActions, +}) + + + //--------------------------------------------------------------------- // Tags... diff --git a/ui (gen4)/features/ui-partial-ribbons-vdom.js b/ui (gen4)/features/ui-partial-ribbons-vdom.js index fc89b6fa..74f6ceba 100755 --- a/ui (gen4)/features/ui-partial-ribbons-vdom.js +++ b/ui (gen4)/features/ui-partial-ribbons-vdom.js @@ -65,6 +65,11 @@ FORCE.prototype.hook = function(elem, prop){ } //--------------------------------------------------------------------- +// +// - take care of DOM construction and update... +// - alignment is done via .centerRibbon(..) / .centerImage(..) +// - preview updates (XXX) +// - update onload (a-la .ribbons._loadImagePreviewURL(..)) var VirtualDOMRibbonsClassPrototype = { // XXX ??? @@ -341,6 +346,17 @@ object.makeConstructor('VirtualDOMRibbons', /*********************************************************************/ +// XXX TODO: +// - shifting images +// - use .virtualdom.sync() + shadow animation instead of .ribbons.* +// - would be nice to make this an alternative feature... +// ...split out ribbon editing into a feature and do two +// implementations, the original and virtualdom... +// - current image indicator... +// - custom align: .alignByOrder(..) / .alignByFirst(..) / .. +// - ribbon rotation: .ribbonRotation(..) / .rotateRibbonCW(..) / .. +// - cropping??? +// var PartialRibbonsActions = actions.Actions({ config: { @@ -372,10 +388,9 @@ var PartialRibbonsActions = actions.Actions({ || this.config['ribbon-size-screens'] || 9) * w + // XXX DEBUG size = 5 - // XXX add threshold test -- we do not need this on every action... - this.virtualdom.sync(target, size) this.centerViewer(target) }], diff --git a/ui (gen4)/features/ui.js b/ui (gen4)/features/ui.js index 6055d6a9..a8ddd4a9 100755 --- a/ui (gen4)/features/ui.js +++ b/ui (gen4)/features/ui.js @@ -710,12 +710,6 @@ module.ViewerActions = actions.Actions({ this.focusImage(t, r) } }], - setBaseRibbon: [ - function(target){ - var r = this.data.getRibbon(target) - r = r == null ? this.ribbons.getRibbon(target) : r - this.ribbons.setBaseRibbon(r) - }], // NOTE: these prioritize whole images, i.e. each image will at least // once be fully shown. @@ -917,58 +911,6 @@ module.ViewerActions = actions.Actions({ fitScreen: ['Zoom/Fit image to screen', function(){ this.screenfit = 1 }], - shiftImageLeft: [ - function(target){ this.ribbons.placeImage(target, -1) }], - shiftImageRight: [ - function(target){ this.ribbons.placeImage(target, 1) }], - - /* - // XXX how should these animate??? - travelImageUp: [ - function(){ - }], - travelImageDown: [ - function(){ - }], - */ - - shiftRibbonUp: [ - function(target){ - target = this.ribbons.getRibbon(target) - var i = this.ribbons.getRibbonOrder(target) - if(i > 0){ - this.ribbons.placeRibbon(target, i-1) - } - }], - shiftRibbonDown: [ - function(target){ - target = this.ribbons.getRibbon(target) - var i = this.ribbons.getRibbonOrder(target) - if(i < this.data.ribbon_order.length-1){ - this.ribbons.placeRibbon(target, i+1) - } - }], - - reverseImages: [ reloadAfter() ], - reverseRibbons: [ reloadAfter() ], - sortImages: [ reloadAfter(true) ], - - // basic image editing... - // - // XXX should we have .rotate(..) and .flip(..) generic actions??? - rotateCW: [ - function(target){ this.ribbons.rotateCW(target) }], - rotateCCW: [ - function(target){ this.ribbons.rotateCCW(target) }], - flipVertical: [ - function(target){ this.ribbons.flipVertical(target, 'view') }], - flipHorizontal: [ - function(target){ this.ribbons.flipHorizontal(target, 'view') }], - - // XXX this needs an interactive mode -- mark A, mark B, align between - alignToRibbon: [ reloadAfter(true) ], - - // ribbon rotation... // ribbonRotation: ['- Interface|Ribbon/', @@ -1003,42 +945,6 @@ module.ViewerActions = actions.Actions({ function(){ this.ribbonRotation(0) }], - // tags... - tag: [ - function(tags, gids){ - gids = gids != null && gids.constructor !== Array ? [gids] : gids - return function(){ - //this.ribbons.updateImage(gids) - this.refresh(gids) - } - }], - untag: [ - function(tags, gids){ - gids = gids != null && gids.constructor !== Array ? [gids] : gids - return function(){ - //this.ribbons.updateImage(gids) - this.refresh(gids) - } - }], - - - // group stuff... - group: [ reloadAfter(true) ], - ungroup: [ reloadAfter(true) ], - groupTo: [ reloadAfter(true) ], - groupMarked: [ reloadAfter(true) ], - expandGroup: [ reloadAfter(true) ], - collapseGroup: [ reloadAfter(true) ], - - - // XXX BUG? reloadAfter() here does not remove some images... - crop: [ reloadAfter(true) ], - // XXX BUG? reloadAfter() produces an align error... - uncrop: [ reloadAfter(true) ], - // XXX might be a good idea to do this in a new viewer in an overlay... - cropGroup: [ reloadAfter() ], - - // XXX experimental: not sure if this is the right way to go... // XXX make this play nice with crops... // ...should this be a crop??? @@ -1075,6 +981,10 @@ module.Viewer = core.ImageGridFeatures.Feature({ 'workspace', 'introspection', ], + suggested: [ + // XXX is this the right way??? + 'ui-edit', + ], actions: ViewerActions, @@ -1152,6 +1062,127 @@ module.Viewer = core.ImageGridFeatures.Feature({ }) +//--------------------------------------------------------------------- + +// XXX Q: should this be further split into groups and tags??? +var ViewerEditActions = +module.ViewerEditActions = +actions.Actions({ + config: { + }, + + setBaseRibbon: [ + function(target){ + var r = this.data.getRibbon(target) + r = r == null ? this.ribbons.getRibbon(target) : r + this.ribbons.setBaseRibbon(r) + }], + + shiftImageLeft: [ + function(target){ this.ribbons.placeImage(target, -1) }], + shiftImageRight: [ + function(target){ this.ribbons.placeImage(target, 1) }], + + /* + // XXX how should these animate??? + travelImageUp: [ + function(){ + }], + travelImageDown: [ + function(){ + }], + */ + + shiftRibbonUp: [ + function(target){ + target = this.ribbons.getRibbon(target) + var i = this.ribbons.getRibbonOrder(target) + if(i > 0){ + this.ribbons.placeRibbon(target, i-1) + } + }], + shiftRibbonDown: [ + function(target){ + target = this.ribbons.getRibbon(target) + var i = this.ribbons.getRibbonOrder(target) + if(i < this.data.ribbon_order.length-1){ + this.ribbons.placeRibbon(target, i+1) + } + }], + + reverseImages: [ reloadAfter() ], + reverseRibbons: [ reloadAfter() ], + sortImages: [ reloadAfter(true) ], + + // basic image editing... + // + // XXX should we have .rotate(..) and .flip(..) generic actions??? + rotateCW: [ + function(target){ this.ribbons.rotateCW(target) }], + rotateCCW: [ + function(target){ this.ribbons.rotateCCW(target) }], + flipVertical: [ + function(target){ this.ribbons.flipVertical(target, 'view') }], + flipHorizontal: [ + function(target){ this.ribbons.flipHorizontal(target, 'view') }], + + // XXX this needs an interactive mode -- mark A, mark B, align between + alignToRibbon: [ reloadAfter(true) ], + + + // tags... + tag: [ + function(tags, gids){ + gids = gids != null && gids.constructor !== Array ? [gids] : gids + return function(){ + //this.ribbons.updateImage(gids) + this.refresh(gids) + } + }], + untag: [ + function(tags, gids){ + gids = gids != null && gids.constructor !== Array ? [gids] : gids + return function(){ + //this.ribbons.updateImage(gids) + this.refresh(gids) + } + }], + + + // group stuff... + group: [ reloadAfter(true) ], + ungroup: [ reloadAfter(true) ], + groupTo: [ reloadAfter(true) ], + groupMarked: [ reloadAfter(true) ], + expandGroup: [ reloadAfter(true) ], + collapseGroup: [ reloadAfter(true) ], + + + // XXX BUG? reloadAfter() here does not remove some images... + crop: [ reloadAfter(true) ], + // XXX BUG? reloadAfter() produces an align error... + uncrop: [ reloadAfter(true) ], + // XXX might be a good idea to do this in a new viewer in an overlay... + cropGroup: [ reloadAfter() ], +}) + +var ViewerEdit = +module.ViewerEdit = +core.ImageGridFeatures.Feature({ + title: 'Graphical User Interface', + + tag: 'ui-edit', + + depends: [ + 'base-edit', + 'ui', + ], + + actions: ViewerEditActions, + +}) + + /*********************************************************************/ // User interfaces for different base features...