not waveforms respect image rotation/flip...

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

ui (gen4)/features/metadata.js

@@ -397,23 +397,48 @@ var MetadataUIActions = actions.Actions({
 								},
 							}) }
 					// XXX EXPERIMENTAL: graph
-					// XXX make this actually update the elem if it exists...
 					// XXX do the calculations in a worker...
 					make.dialog.updateGraph = function(gid, size){
+						// prevent from updating too often...
+						if(this.__graph_updating){
+							// request an update...
+							this.__graph_updating = [gid, size]
+							return this.graph }
+						this.__graph_updating = true
+						setTimeout(function(){
+							// update was requested while we were out -> update now...
+							this.__graph_updating instanceof Array
+								&& this.updateGraph(...this.__graph_updating)
+							delete this.__graph_updating }.bind(this), 200)
+
+						// graph disabled...
 						if(!graph || !that.config['metadata-graph']){
 							return }
+
+						// data...
 						gid = that.data.getImage(gid || 'current')
 						var config = that.config['metadata-graph-config'] || {}
 						var url = that.images[gid].preview ?
 							that.images.getBestPreview(gid, size || 300, null, true).url
 							: that.getImagePath(gid)
+						var flipped = (that.images[gid] || {}).flipped || []
+						flipped = flipped.length == 1 ? 
+								flipped[0]
+							: flipped.length == 2 ?
+								'both'
+							: null
+
+						// build the element...
 						var elem = this.graph = 
 							Object.assign(
 								this.graph 
 									|| document.createElement('ig-image-graph'), 
 								config,
 								// orientation....
-								{orientation: (that.images[gid] || {}).orientation || 0})
+								{
+									orientation: (that.images[gid] || {}).orientation || 0,
+									flipped: flipped, 
+								})
 						Object.assign(elem.style, {
 							width: '500px',
 							height: '200px',

ui (gen4)/lib/components/ig-image-graph.js

@@ -2,7 +2,6 @@
 * 
 *
 *
-* XXX still thinking on how to package this correctly...
 * XXX add worker support...
 *
 **********************************************************************/
@@ -48,6 +47,42 @@ module.Filters = {
 		context.putImageData(data, 0, 0)
 	},
 
+	// get image pixels normalized to a square of size s, rotated and flipped...
+	//
+	// NOTE: flip is applied to the image before it is rotated... (XXX ???)
+	getNormalizedPixels: function(img, s, rotate, flip){
+		s = s || Math.max(img.width, img.height)
+		rotate = rotate || 0
+
+		;(rotate == 90 || rotate == 270)
+			&& (flip = flip == 'horizontal' ?
+					'vertical'
+				: flip == 'vertical' ?
+					'horizontal'
+				: flip)
+		var [h, v] = flip == 'both' ?
+				[-1, -1]
+			: flip == 'horizontal' ?
+				[-1, 1]
+			: flip == 'vertical' ?
+				[1, -1]
+			: [1, 1]
+
+		var c = this.makeCanvas(s, s)
+		var context = c.getContext('2d')
+		context.rect(0, 0, s, s)
+		context.fillStyle = 'black'
+		context.fill()
+
+		if(img){
+			context.setTransform(h*1, 0, 0, v*1, s/2, s/2)
+			context.rotate(rotate * Math.PI/180)
+			context.drawImage(img, -s/2, -s/2, s, s)
+		}
+
+		return context.getImageData(0, 0, s, s)
+	}, 
+
 	filterImage: function(filter, image, var_args){
 		var args = [this.getPixels(image)]
 		for(var i=2; i<arguments.length; i++){
@@ -229,14 +264,13 @@ module.Filters = {
 var WAVEFORM_SIZE =
 module.WAVEFORM_SIZE = 1000
 
-// XXX need to account for image rotation...
 var waveform = 
 module.waveform = 
-function(img, canvas, mode, color, rotation){
-	// XXX rotate...
-	var d = Filters.getPixels(img, WAVEFORM_SIZE)
+function(img, canvas, mode, color, rotate, flip){
+	var d = Filters.getNormalizedPixels(img, WAVEFORM_SIZE, rotate, flip)
 	var w = Filters.waveform(d, mode, color)
-	Filters.setPixels(canvas, w) }
+	Filters.setPixels(canvas, w) 
+}
 
 
 var HISTOGRAM_SIZE =
@@ -339,6 +373,7 @@ object.Constructor('igImageGraph', HTMLElement, {
 			'color',
 			'graph',
 			'orientation',
+			'flipped',
 			'nocontrols',
 		]},
 	attributeChangedCallback: function(name, from, to){
@@ -391,6 +426,7 @@ object.Constructor('igImageGraph', HTMLElement, {
 		value === undefined
 			&& this.removeAttribute('color') 
 		this.update() },
+
 	get orientation(){
 		return this.getAttribute('orientation') || 0 },
 	set orientation(value){
@@ -400,6 +436,16 @@ object.Constructor('igImageGraph', HTMLElement, {
 		value == null
 			&& this.removeAttribute('orientation') 
 		this.update() },
+	get flipped(){
+		return this.getAttribute('flipped') },
+	set flipped(value){
+		;(['vertical', 'horizontal', 'both'].includes(value)
+				|| typeof(value) == typeof(123))
+			&& this.setAttribute('flipped', value) 
+		value == null
+			&& this.removeAttribute('flipped') 
+		this.update() },
+
 	get nocontrols(){
 		return this.getAttribute('nocontrols') != null },
 	set nocontrols(value){
@@ -495,7 +541,11 @@ object.Constructor('igImageGraph', HTMLElement, {
 				{top: 180, left: 90, bottom: 0, right: 270}[orientation] 
 				|| orientation)
 
-			graph(this.image, canvas, this.mode, this.color, orientation)
+			graph(this.image, canvas, 
+				this.mode, 
+				this.color, 
+				Math.round(orientation),
+				this.flipped)
 
 		} else if(this.src){
 			this.src = this.src

ui (gen4)/lib/widget/widget.js

@@ -95,9 +95,8 @@ function(){
 /*********************************************************************/
 
 var WidgetClassPrototype = {
-	//make: function(obj, client, options){
-	//	console.error('Widget must define a .make method.')
-	//},
+	make: function(obj, client, options){
+		throw new Error('Widget must define a .make method.') },
 }