Commit 48fdb91ebda5ac6eca938c27da42dac698e5d79c

Authored by Hacene SI HADJ MOHAND
1 parent 92d3a6f1

us ok pour lines color

Showing 1 changed file with 71 additions and 24 deletions   Show diff stats
js/app/views/PlotComponents/PlotStandardForm.js
@@ -194,13 +194,13 @@ Ext.define('amdaPlotComp.PlotStandardForm', { @@ -194,13 +194,13 @@ Ext.define('amdaPlotComp.PlotStandardForm', {
194 }; 194 };
195 }, 195 },
196 196
197 - addStandardFieldSet: function (title, checkboxName, items, onChangeCheck) { 197 + addStandardFieldSet: function (title, checkboxName, items, onChangeCheck, collapsed_ = true) {
198 return { 198 return {
199 xtype: 'fieldset', 199 xtype: 'fieldset',
200 cls: 'child-fieldset', 200 cls: 'child-fieldset',
201 title: title, 201 title: title,
202 collapsible: true, 202 collapsible: true,
203 - collapsed: true, 203 + collapsed: collapsed_,
204 checkboxName: checkboxName, 204 checkboxName: checkboxName,
205 checkboxToggle: checkboxName != '', 205 checkboxToggle: checkboxName != '',
206 layout: { 206 layout: {
@@ -407,7 +407,7 @@ Ext.define('amdaPlotComp.PlotStandardForm', { @@ -407,7 +407,7 @@ Ext.define('amdaPlotComp.PlotStandardForm', {
407 this.addStandardCombo(namePrefix + '-style', 'Style', amdaPlotObj.PlotObjectConfig.availableLinesStyles), 407 this.addStandardCombo(namePrefix + '-style', 'Style', amdaPlotObj.PlotObjectConfig.availableLinesStyles),
408 this.addStandardFloat(namePrefix + '-width', 'Width', 1, 10), 408 this.addStandardFloat(namePrefix + '-width', 'Width', 1, 10),
409 //this.addStandardColor(namePrefix + '-color', 'Color', amdaPlotObj.PlotObjectConfig.availableColors), 409 //this.addStandardColor(namePrefix + '-color', 'Color', amdaPlotObj.PlotObjectConfig.availableColors),
410 - this.addColorsPicker('serie-lines-color') 410 + this.addColorsPicker('serie-lines-color', 'Color')
411 ]; 411 ];
412 }, 412 },
413 413
@@ -420,13 +420,17 @@ Ext.define('amdaPlotComp.PlotStandardForm', { @@ -420,13 +420,17 @@ Ext.define('amdaPlotComp.PlotStandardForm', {
420 }, 420 },
421 manageRGBcolors: function(namePrefix){ 421 manageRGBcolors: function(namePrefix){
422 var rgb = this.object.get(namePrefix+'-rgb'); 422 var rgb = this.object.get(namePrefix+'-rgb');
423 - if(rgb && rgb.length ==3 )  
424 - this.object.set(namePrefix, this.rgbToHex(rgb)); 423 + if(rgb && rgb.length == 3){
  424 + var hexColor = this.rgbToHex(rgb);
  425 + this.object.set(namePrefix, hexColor);
  426 + this.getForm().findField(namePrefix+'-displayer').setValue(hexColor);
  427 + }
425 }, 428 },
426 manageHEXcolors: function(namePrefix){ 429 manageHEXcolors: function(namePrefix){
427 var hex = this.object.get(namePrefix); 430 var hex = this.object.get(namePrefix);
428 - if(hex) 431 + if(hex){
429 this.object.set(namePrefix+'-rgb', hexToRgb(hex)); 432 this.object.set(namePrefix+'-rgb', hexToRgb(hex));
  433 + }
430 }, 434 },
431 rgbToHex : function(rgb) { 435 rgbToHex : function(rgb) {
432 return "#" + ((1 << 24) + (rgb[0] << 16) + (rgb[1] << 8) + rgb[2] ).toString(16).slice(1).toUpperCase(); 436 return "#" + ((1 << 24) + (rgb[0] << 16) + (rgb[1] << 8) + rgb[2] ).toString(16).slice(1).toUpperCase();
@@ -435,37 +439,70 @@ Ext.define(&#39;amdaPlotComp.PlotStandardForm&#39;, { @@ -435,37 +439,70 @@ Ext.define(&#39;amdaPlotComp.PlotStandardForm&#39;, {
435 var arrBuff = new ArrayBuffer(4); 439 var arrBuff = new ArrayBuffer(4);
436 var vw = new DataView(arrBuff); 440 var vw = new DataView(arrBuff);
437 vw.setUint32(0,parseInt(hex, 16),false); 441 vw.setUint32(0,parseInt(hex, 16),false);
438 - var arrByte = new Uint8Array(arrBuff); 442 + var arrByte = (new Uint8Array(arrBuff));
439 443
440 - return arrByte[1] + "," + arrByte[2] + "," + arrByte[3]; 444 + return arrByte.slice(1,4);
441 }, 445 },
442 - addColorsPicker: function (namePrefix) { 446 +
  447 + /**
  448 + *
  449 + * @param {type} namePrefix name of the variable in the opbject exp : 'serie-lines-color'
  450 + * @param {type} name name of the field exp : Color
  451 + * @returns {PlotStandardFormAnonym$0.addStandardFieldSet.PlotStandardFormAnonym$10}
  452 + */
  453 + addColorsPicker: function (namePrefix, name) {
  454 + var me = this;
443 455
444 var colorPicker = Ext.create('amdaPlotComp.PlotColorPicker', { 456 var colorPicker = Ext.create('amdaPlotComp.PlotColorPicker', {
445 - value: '993300', // initial selected color 457 + value: '000000', // initial selected color
446 renderTo: Ext.getBody(), 458 renderTo: Ext.getBody(),
447 listeners: { 459 listeners: {
448 select: function(picker, selColor) { 460 select: function(picker, selColor) {
449 this.object.set(namePrefix, selColor); 461 this.object.set(namePrefix, selColor);
  462 + this.getForm().findField(namePrefix+'-displayer').setValue('#'+selColor);
  463 +
  464 + rgb = this.hexToRgb(selColor);
  465 + if(rgb && rgb.length ==3 ){
  466 + this.getForm().findField(namePrefix+'-R').setValue(rgb[0]);
  467 + this.getForm().findField(namePrefix+'-G').setValue(rgb[1]);
  468 + this.getForm().findField(namePrefix+'-B').setValue(rgb[2]);
  469 + }
450 }, 470 },
451 scope: this 471 scope: this
452 } 472 }
453 }); 473 });
454 - var colorItems = [  
455 - colorPicker , 474 + var colorDisplayer = {
  475 + xtype: 'displayfield',
  476 + name: namePrefix + '-displayer',
  477 + border:2,
  478 + fieldLabel: 'HEX:',
  479 + value:"#000000",
  480 + region:'center',
  481 + style: {
  482 + borderStyle: 'solid',
  483 + background: '#000000',
  484 + },
  485 + listeners: {
  486 + change: function (field, newValue, oldValue, eOpts) {
  487 + field.getEl().applyStyles({'background':newValue});
  488 + },
  489 + scope: this
  490 + }
  491 + };
  492 + var rgbItems =
456 { 493 {
457 xtype: 'toolbar', 494 xtype: 'toolbar',
458 bodyStyle: { background: '#dfe8f6' }, 495 bodyStyle: { background: '#dfe8f6' },
459 border: false, 496 border: false,
460 - 497 + name:namePrefix+'-rgb',
461 items: [ 498 items: [
462 499
463 { 500 {
464 xtype: 'numberfield', 501 xtype: 'numberfield',
465 - name: 'color-R', 502 + name: namePrefix+'-R',
466 fieldLabel: 'R', 503 fieldLabel: 'R',
467 - labelWidth: 15,  
468 - width: 80, 504 + labelWidth: 12,
  505 + width: 65,
469 maxValue: 255, 506 maxValue: 255,
470 minValue: 0, 507 minValue: 0,
471 value: 0, 508 value: 0,
@@ -485,10 +522,10 @@ Ext.define(&#39;amdaPlotComp.PlotStandardForm&#39;, { @@ -485,10 +522,10 @@ Ext.define(&#39;amdaPlotComp.PlotStandardForm&#39;, {
485 ' ', 522 ' ',
486 { 523 {
487 xtype: 'numberfield', 524 xtype: 'numberfield',
488 - name: 'color-G', 525 + name: namePrefix+'-G',
489 fieldLabel: 'G', 526 fieldLabel: 'G',
490 - labelWidth: 15,  
491 - width: 80, 527 + labelWidth: 12,
  528 + width: 65,
492 maxValue: 255, 529 maxValue: 255,
493 minValue: 0, 530 minValue: 0,
494 value: 0, 531 value: 0,
@@ -508,10 +545,10 @@ Ext.define(&#39;amdaPlotComp.PlotStandardForm&#39;, { @@ -508,10 +545,10 @@ Ext.define(&#39;amdaPlotComp.PlotStandardForm&#39;, {
508 ' ', 545 ' ',
509 { 546 {
510 xtype: 'numberfield', 547 xtype: 'numberfield',
511 - name: 'color-B', 548 + name: namePrefix+'-B',
512 fieldLabel: 'B', 549 fieldLabel: 'B',
513 - labelWidth: 15,  
514 - width: 80, 550 + labelWidth: 12,
  551 + width: 65,
515 maxValue: 255, 552 maxValue: 255,
516 minValue: 0, 553 minValue: 0,
517 value: 0, 554 value: 0,
@@ -531,9 +568,19 @@ Ext.define(&#39;amdaPlotComp.PlotStandardForm&#39;, { @@ -531,9 +568,19 @@ Ext.define(&#39;amdaPlotComp.PlotStandardForm&#39;, {
531 568
532 ] 569 ]
533 } 570 }
534 - ];  
535 571
536 - return this.addStandardFieldSet('Color', namePrefix + '-activated', colorItems); 572 +
  573 + var items = [ this.addStandardCheck(namePrefix + '-auto','Auto', function(name, value, oldValue){
  574 + me.getForm( ).findField(namePrefix + '-activated').setValue(!value);
  575 + me.object.set(namePrefix,me.object.getDefaultColor(namePrefix));
  576 + }),
  577 +
  578 + this.addStandardFieldSet('Select Color', namePrefix + '-activated',[colorPicker,colorDisplayer, rgbItems], function(name, value, oldValue){
  579 + me.getForm( ).findField(namePrefix + '-auto').setValue(!value);
  580 + }),
  581 + ];
  582 +
  583 + return this.addStandardFieldSet(name,'', items, null, false);
537 }, 584 },
538 585
539 init: function (config) { 586 init: function (config) {