From 48fdb91ebda5ac6eca938c27da42dac698e5d79c Mon Sep 17 00:00:00 2001 From: Hacene SI HADJ MOHAND Date: Tue, 8 Feb 2022 14:50:24 +0100 Subject: [PATCH] us ok pour lines color --- js/app/views/PlotComponents/PlotStandardForm.js | 95 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------ 1 file changed, 71 insertions(+), 24 deletions(-) diff --git a/js/app/views/PlotComponents/PlotStandardForm.js b/js/app/views/PlotComponents/PlotStandardForm.js index c04a4b5..1ccd0e5 100644 --- a/js/app/views/PlotComponents/PlotStandardForm.js +++ b/js/app/views/PlotComponents/PlotStandardForm.js @@ -194,13 +194,13 @@ Ext.define('amdaPlotComp.PlotStandardForm', { }; }, - addStandardFieldSet: function (title, checkboxName, items, onChangeCheck) { + addStandardFieldSet: function (title, checkboxName, items, onChangeCheck, collapsed_ = true) { return { xtype: 'fieldset', cls: 'child-fieldset', title: title, collapsible: true, - collapsed: true, + collapsed: collapsed_, checkboxName: checkboxName, checkboxToggle: checkboxName != '', layout: { @@ -407,7 +407,7 @@ Ext.define('amdaPlotComp.PlotStandardForm', { this.addStandardCombo(namePrefix + '-style', 'Style', amdaPlotObj.PlotObjectConfig.availableLinesStyles), this.addStandardFloat(namePrefix + '-width', 'Width', 1, 10), //this.addStandardColor(namePrefix + '-color', 'Color', amdaPlotObj.PlotObjectConfig.availableColors), - this.addColorsPicker('serie-lines-color') + this.addColorsPicker('serie-lines-color', 'Color') ]; }, @@ -420,13 +420,17 @@ Ext.define('amdaPlotComp.PlotStandardForm', { }, manageRGBcolors: function(namePrefix){ var rgb = this.object.get(namePrefix+'-rgb'); - if(rgb && rgb.length ==3 ) - this.object.set(namePrefix, this.rgbToHex(rgb)); + if(rgb && rgb.length == 3){ + var hexColor = this.rgbToHex(rgb); + this.object.set(namePrefix, hexColor); + this.getForm().findField(namePrefix+'-displayer').setValue(hexColor); + } }, manageHEXcolors: function(namePrefix){ var hex = this.object.get(namePrefix); - if(hex) + if(hex){ this.object.set(namePrefix+'-rgb', hexToRgb(hex)); + } }, rgbToHex : function(rgb) { return "#" + ((1 << 24) + (rgb[0] << 16) + (rgb[1] << 8) + rgb[2] ).toString(16).slice(1).toUpperCase(); @@ -435,37 +439,70 @@ Ext.define('amdaPlotComp.PlotStandardForm', { var arrBuff = new ArrayBuffer(4); var vw = new DataView(arrBuff); vw.setUint32(0,parseInt(hex, 16),false); - var arrByte = new Uint8Array(arrBuff); + var arrByte = (new Uint8Array(arrBuff)); - return arrByte[1] + "," + arrByte[2] + "," + arrByte[3]; + return arrByte.slice(1,4); }, - addColorsPicker: function (namePrefix) { + + /** + * + * @param {type} namePrefix name of the variable in the opbject exp : 'serie-lines-color' + * @param {type} name name of the field exp : Color + * @returns {PlotStandardFormAnonym$0.addStandardFieldSet.PlotStandardFormAnonym$10} + */ + addColorsPicker: function (namePrefix, name) { + var me = this; var colorPicker = Ext.create('amdaPlotComp.PlotColorPicker', { - value: '993300', // initial selected color + value: '000000', // initial selected color renderTo: Ext.getBody(), listeners: { select: function(picker, selColor) { this.object.set(namePrefix, selColor); + this.getForm().findField(namePrefix+'-displayer').setValue('#'+selColor); + + rgb = this.hexToRgb(selColor); + if(rgb && rgb.length ==3 ){ + this.getForm().findField(namePrefix+'-R').setValue(rgb[0]); + this.getForm().findField(namePrefix+'-G').setValue(rgb[1]); + this.getForm().findField(namePrefix+'-B').setValue(rgb[2]); + } }, scope: this } }); - var colorItems = [ - colorPicker , + var colorDisplayer = { + xtype: 'displayfield', + name: namePrefix + '-displayer', + border:2, + fieldLabel: 'HEX:', + value:"#000000", + region:'center', + style: { + borderStyle: 'solid', + background: '#000000', + }, + listeners: { + change: function (field, newValue, oldValue, eOpts) { + field.getEl().applyStyles({'background':newValue}); + }, + scope: this + } + }; + var rgbItems = { xtype: 'toolbar', bodyStyle: { background: '#dfe8f6' }, border: false, - + name:namePrefix+'-rgb', items: [ { xtype: 'numberfield', - name: 'color-R', + name: namePrefix+'-R', fieldLabel: 'R', - labelWidth: 15, - width: 80, + labelWidth: 12, + width: 65, maxValue: 255, minValue: 0, value: 0, @@ -485,10 +522,10 @@ Ext.define('amdaPlotComp.PlotStandardForm', { ' ', { xtype: 'numberfield', - name: 'color-G', + name: namePrefix+'-G', fieldLabel: 'G', - labelWidth: 15, - width: 80, + labelWidth: 12, + width: 65, maxValue: 255, minValue: 0, value: 0, @@ -508,10 +545,10 @@ Ext.define('amdaPlotComp.PlotStandardForm', { ' ', { xtype: 'numberfield', - name: 'color-B', + name: namePrefix+'-B', fieldLabel: 'B', - labelWidth: 15, - width: 80, + labelWidth: 12, + width: 65, maxValue: 255, minValue: 0, value: 0, @@ -531,9 +568,19 @@ Ext.define('amdaPlotComp.PlotStandardForm', { ] } - ]; - return this.addStandardFieldSet('Color', namePrefix + '-activated', colorItems); + + var items = [ this.addStandardCheck(namePrefix + '-auto','Auto', function(name, value, oldValue){ + me.getForm( ).findField(namePrefix + '-activated').setValue(!value); + me.object.set(namePrefix,me.object.getDefaultColor(namePrefix)); + }), + + this.addStandardFieldSet('Select Color', namePrefix + '-activated',[colorPicker,colorDisplayer, rgbItems], function(name, value, oldValue){ + me.getForm( ).findField(namePrefix + '-auto').setValue(!value); + }), + ]; + + return this.addStandardFieldSet(name,'', items, null, false); }, init: function (config) { -- libgit2 0.21.2