Commit 48fdb91ebda5ac6eca938c27da42dac698e5d79c
1 parent
92d3a6f1
Exists in
master
and in
68 other branches
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('amdaPlotComp.PlotStandardForm', { | @@ -435,37 +439,70 @@ Ext.define('amdaPlotComp.PlotStandardForm', { | ||
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('amdaPlotComp.PlotStandardForm', { | @@ -485,10 +522,10 @@ Ext.define('amdaPlotComp.PlotStandardForm', { | ||
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('amdaPlotComp.PlotStandardForm', { | @@ -508,10 +545,10 @@ Ext.define('amdaPlotComp.PlotStandardForm', { | ||
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('amdaPlotComp.PlotStandardForm', { | @@ -531,9 +568,19 @@ Ext.define('amdaPlotComp.PlotStandardForm', { | ||
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) { |