Commit 7faaee3c928952c186afced85af28a5c80056198
1 parent
40d460aa
Exists in
master
and in
64 other branches
wip
Showing
3 changed files
with
263 additions
and
165 deletions
Show diff stats
js/app/models/PlotObjects/PlotObjectConfig.js
| @@ -370,6 +370,25 @@ Ext.define('amdaPlotObj.PlotObjectConfig', { | @@ -370,6 +370,25 @@ Ext.define('amdaPlotObj.PlotObjectConfig', { | ||
| 370 | { 'key': '[0,64,64]', 'color': '#004040', 'value': 'Cyprus' } | 370 | { 'key': '[0,64,64]', 'color': '#004040', 'value': 'Cyprus' } |
| 371 | ], | 371 | ], |
| 372 | 372 | ||
| 373 | + availableColorsNew: [ | ||
| 374 | + "#000000", "#0000ff", "#ff0000", "#00ffff", "#ff00ff", "#008000", "#800000", | ||
| 375 | + "#000080", "#808000", "#800080", "#c0c0c0", "#008080", "#ffff00", "#004040", | ||
| 376 | + "#29d8d7", "#6b9842", "#73a9b4", "#1c883d", "#808080", "#4342dd", "#e84130", | ||
| 377 | + "#dee2e6", "#ced4da", "#adb5bd", "#868e96", "#495057", "#343a40", "#212529", | ||
| 378 | + "#ffa8a8", "#ff8787", "#ff6b6b", "#fa5252", "#f03e3e", "#e03131", "#c92a2a", | ||
| 379 | + "#faa2c1", "#f783ac", "#f06595", "#e64980", "#d6336c", "#c2255c", "#a61e4d", | ||
| 380 | + "#e599f7", "#da77f2", "#cc5de8", "#be4bdb", "#ae3ec9", "#9c36b5", "#862e9c", | ||
| 381 | + "#b197fc", "#9775fa", "#845ef7", "#7950f2", "#7048e8", "#6741d9", "#5f3dc4", | ||
| 382 | + "#91a7ff", "#748ffc", "#5c7cfa", "#4c6ef5", "#4263eb", "#3b5bdb", "#364fc7", | ||
| 383 | + "#74c0fc", "#4dabf7", "#339af0", "#228be6", "#1c7ed6", "#1971c2", "#1864ab", | ||
| 384 | + "#66d9e8", "#3bc9db", "#22b8cf", "#15aabf", "#1098ad", "#0c8599", "#0b7285", | ||
| 385 | + "#63e6be", "#38d9a9", "#20c997", "#12b886", "#0ca678", "#099268", "#087f5b", | ||
| 386 | + "#8ce99a", "#69db7c", "#51cf66", "#40c057", "#37b24d", "#2f9e44", "#2b8a3e", | ||
| 387 | + "#c0eb75", "#a9e34b", "#94d82d", "#82c91e", "#74b816", "#66a80f", "#5c940d", | ||
| 388 | + "#ffe066", "#ffd43b", "#fcc419", "#fab005", "#f59f00", "#f08c00", "#e67700", | ||
| 389 | + "#ffc078", "#ffa94d", "#ff922b", "#fd7e14", "#f76707", "#e8590c", "#d9480f" | ||
| 390 | + ], | ||
| 391 | + | ||
| 373 | availableBackgroundColors: [ | 392 | availableBackgroundColors: [ |
| 374 | { 'color': 'none', 'value': 'None' }, | 393 | { 'color': 'none', 'value': 'None' }, |
| 375 | { 'key': '[0,0,0]', 'color': '#000000', 'value': 'Black' }, | 394 | { 'key': '[0,0,0]', 'color': '#000000', 'value': 'Black' }, |
js/app/views/PlotComponents/PlotColorPicker.js
| @@ -3,7 +3,240 @@ | @@ -3,7 +3,240 @@ | ||
| 3 | * To change this template file, choose Tools | Templates | 3 | * To change this template file, choose Tools | Templates |
| 4 | * and open the template in the editor. | 4 | * and open the template in the editor. |
| 5 | */ | 5 | */ |
| 6 | + | ||
| 6 | Ext.define('amdaPlotComp.PlotColorPicker', { | 7 | Ext.define('amdaPlotComp.PlotColorPicker', { |
| 7 | - extend: 'Ext.picker.Color', | ||
| 8 | - }); | 8 | + extend: 'Ext.form.FieldSet', |
| 9 | + | ||
| 10 | + predefinedColorPicker: null, | ||
| 11 | + | ||
| 12 | + colorDisplayer: null, | ||
| 13 | + | ||
| 14 | + rgbColorPicker: null, | ||
| 15 | + | ||
| 16 | + constructor: function(config) { | ||
| 17 | + this.init(config); | ||
| 18 | + this.callParent(arguments); | ||
| 19 | + }, | ||
| 20 | + | ||
| 21 | + /*setHexColor: function(hexColor) { | ||
| 22 | + this.colorDisplayer.setValue(hexColor); | ||
| 23 | + this.rgbColorPicker.setRgbColor(this.hexToRgb(hexColor)); | ||
| 24 | + },*/ | ||
| 25 | + | ||
| 26 | + rgbToHex : function(rgb) { | ||
| 27 | + return "#" + ((1 << 24) + (rgb[0] << 16) + (rgb[1] << 8) + rgb[2] ).toString(16).slice(1).toUpperCase(); | ||
| 28 | + }, | ||
| 29 | + | ||
| 30 | + hexToRgb: function(hex) { | ||
| 31 | + hex = hex.replace('#',''); | ||
| 32 | + var arrBuff = new ArrayBuffer(4); | ||
| 33 | + var vw = new DataView(arrBuff); | ||
| 34 | + vw.setUint32(0,parseInt(hex, 16),false); | ||
| 35 | + var arrByte = (new Uint8Array(arrBuff)); | ||
| 36 | + return arrByte.slice(1,4); | ||
| 37 | + }, | ||
| 38 | + | ||
| 39 | + // Override createCheckboxCmp method | ||
| 40 | + createCheckboxCmp: function() { | ||
| 41 | + console.log('createCheckboxCmp'); | ||
| 42 | + var me = this, | ||
| 43 | + suffix = '-checkbox'; | ||
| 44 | + | ||
| 45 | + me.checkboxCmp = Ext.widget({ | ||
| 46 | + xtype: 'checkbox', | ||
| 47 | + hideEmptyLabel: true, | ||
| 48 | + name: me.checkboxName || me.id + suffix, | ||
| 49 | + cls: me.baseCls + '-header' + suffix, | ||
| 50 | + id: me.id + '-legendChk', | ||
| 51 | + checked: !me.collapsed, | ||
| 52 | + listeners: { | ||
| 53 | + change: me.onCheckChange, | ||
| 54 | + scope: me | ||
| 55 | + } | ||
| 56 | + }); | ||
| 57 | + return me.checkboxCmp; | ||
| 58 | + }, | ||
| 59 | + | ||
| 60 | + init : function(config) { | ||
| 61 | + var me = this; | ||
| 62 | + | ||
| 63 | + this.predefinedColorPicker = new Ext.button.Button({ | ||
| 64 | + onSelectColor: me.onSelectPredefinedColor, | ||
| 65 | + text: 'Select Color', | ||
| 66 | + flex: 4, | ||
| 67 | + initComponent : function(){ | ||
| 68 | + this.menu = Ext.create('Ext.menu.ColorPicker', { | ||
| 69 | + minWidth: 80, | ||
| 70 | + maxWidth: 100, | ||
| 71 | + minHeight: 225, | ||
| 72 | + listeners: { | ||
| 73 | + select: function(picker, selColor, eOpts) { | ||
| 74 | + this.colorDisplayer.setValue('#'+selColor); | ||
| 75 | + }, | ||
| 76 | + scope: me | ||
| 77 | + } | ||
| 78 | + }); | ||
| 79 | + this.menu.addCls('amda-color-picker'); | ||
| 80 | + if (config.colors) { | ||
| 81 | + var customColors = []; | ||
| 82 | + Ext.Array.each(config.colors, function(color) { | ||
| 83 | + customColors.push(color.replace('#','').toUpperCase()); | ||
| 84 | + }); | ||
| 85 | + this.menu.picker.colors = customColors; | ||
| 86 | + } | ||
| 87 | + } | ||
| 88 | + }); | ||
| 89 | + | ||
| 90 | + this.colorDisplayer = new Ext.form.field.Display({ | ||
| 91 | + border:2, | ||
| 92 | + //fieldLabel: 'HEX:', | ||
| 93 | + value:"#000000", | ||
| 94 | + flex: 3, | ||
| 95 | + //inExpandCollapseEvent: false, | ||
| 96 | + name: config.name ? config.name : '', | ||
| 97 | + style: { | ||
| 98 | + borderStyle: 'solid', | ||
| 99 | + background: '#000000', | ||
| 100 | + }, | ||
| 101 | + listeners: { | ||
| 102 | + change: function (field, newValue, oldValue, eOpts) { | ||
| 103 | + /*if (config.onChange) { | ||
| 104 | + config.onChange(config.name, newValue, oldValue); | ||
| 105 | + }*/ | ||
| 106 | + | ||
| 107 | + if ((newValue == 'auto') && this.checkboxCmp.getValue()) { | ||
| 108 | + this.collapse(); | ||
| 109 | + return; | ||
| 110 | + } | ||
| 111 | + else if ((newValue != 'auto') && !this.checkboxCmp.getValue()) { | ||
| 112 | + this.expand(); | ||
| 113 | + return; | ||
| 114 | + } | ||
| 115 | + /*console.log('displayer change - ' + this.colorDisplayer.inExpandCollapseEvent); | ||
| 116 | + console.log(newValue + ' - ' + oldValue); | ||
| 117 | + if (!this.colorDisplayer.inExpandCollapseEvent) { | ||
| 118 | + if (newValue == 'auto') | ||
| 119 | + this.collapse(); | ||
| 120 | + else | ||
| 121 | + this.expand(); | ||
| 122 | + }*/ | ||
| 123 | + console.log('============> ' + newValue); | ||
| 124 | + field.getEl().applyStyles({'background':newValue}); | ||
| 125 | + this.rgbColorPicker.setRgbColor(this.hexToRgb(newValue)); | ||
| 126 | + if (config.onChange) { | ||
| 127 | + config.onChange(config.name, newValue, oldValue); | ||
| 128 | + } | ||
| 129 | + }, | ||
| 130 | + scope: this | ||
| 131 | + } | ||
| 132 | + }); | ||
| 133 | + | ||
| 134 | + this.rgbColorPicker = new Ext.toolbar.Toolbar({ | ||
| 135 | + bodyStyle: { background: '#dfe8f6' }, | ||
| 136 | + border: false, | ||
| 137 | + rgbColor: [0,0,0], | ||
| 138 | + setRgbColor: function(rgb) { | ||
| 139 | + this.rgbColor = [rgb[0], rgb[1], rgb[2]]; | ||
| 140 | + this.items.items[0].setRawValue(rgb[0]); | ||
| 141 | + this.items.items[2].setRawValue(rgb[1]); | ||
| 142 | + this.items.items[4].setRawValue(rgb[2]); | ||
| 143 | + }, | ||
| 144 | + items: [ | ||
| 145 | + { | ||
| 146 | + xtype: 'numberfield', | ||
| 147 | + fieldLabel: 'R', | ||
| 148 | + labelWidth: 12, | ||
| 149 | + width: 65, | ||
| 150 | + maxValue: 255, | ||
| 151 | + minValue: 0, | ||
| 152 | + value: 0, | ||
| 153 | + listeners: { | ||
| 154 | + change: function (field, newValue, oldValue, eOpts) { | ||
| 155 | + this.rgbColorPicker.rgbColor[0] = newValue; | ||
| 156 | + this.colorDisplayer.setValue(this.rgbToHex(this.rgbColorPicker.rgbColor)); | ||
| 157 | + }, | ||
| 158 | + scope: this | ||
| 159 | + } | ||
| 160 | + }, | ||
| 161 | + ' ', | ||
| 162 | + { | ||
| 163 | + xtype: 'numberfield', | ||
| 164 | + fieldLabel: 'G', | ||
| 165 | + labelWidth: 12, | ||
| 166 | + width: 65, | ||
| 167 | + maxValue: 255, | ||
| 168 | + minValue: 0, | ||
| 169 | + value: 0, | ||
| 170 | + listeners: { | ||
| 171 | + change: function (field, newValue, oldValue, eOpts) { | ||
| 172 | + this.rgbColorPicker.rgbColor[1] = newValue; | ||
| 173 | + this.colorDisplayer.setValue(this.rgbToHex(this.rgbColorPicker.rgbColor)); | ||
| 174 | + }, | ||
| 175 | + scope: this | ||
| 176 | + } | ||
| 177 | + }, | ||
| 178 | + ' ', | ||
| 179 | + { | ||
| 180 | + xtype: 'numberfield', | ||
| 181 | + fieldLabel: 'B', | ||
| 182 | + labelWidth: 12, | ||
| 183 | + width: 65, | ||
| 184 | + maxValue: 255, | ||
| 185 | + minValue: 0, | ||
| 186 | + value: 0, | ||
| 187 | + listeners: { | ||
| 188 | + change: function (field, newValue, oldValue, eOpts) { | ||
| 189 | + this.rgbColorPicker.rgbColor[2] = newValue; | ||
| 190 | + this.colorDisplayer.setValue(this.rgbToHex(this.rgbColorPicker.rgbColor)); | ||
| 191 | + }, | ||
| 192 | + scope: this | ||
| 193 | + } | ||
| 194 | + } | ||
| 195 | + ] | ||
| 196 | + }); | ||
| 197 | + | ||
| 198 | + var myConf = { | ||
| 199 | + cls: 'child-fieldset', | ||
| 200 | + title: config.label ? config.label : 'Color', | ||
| 201 | + collapsible: true, | ||
| 202 | + collapsed: false, | ||
| 203 | + checkboxToggle: true, | ||
| 204 | + layout: { | ||
| 205 | + type: 'vbox', | ||
| 206 | + pack: 'start', | ||
| 207 | + align: 'stretch' | ||
| 208 | + }, | ||
| 209 | + items: [ | ||
| 210 | + { | ||
| 211 | + xtype: 'container', | ||
| 212 | + layout: { | ||
| 213 | + type: 'hbox', | ||
| 214 | + align: 'stretch' | ||
| 215 | + }, | ||
| 216 | + items: [ | ||
| 217 | + this.predefinedColorPicker, | ||
| 218 | + this.colorDisplayer, | ||
| 219 | + ] | ||
| 220 | + }, | ||
| 221 | + this.rgbColorPicker | ||
| 222 | + ], | ||
| 223 | + listeners: { | ||
| 224 | + expand: function (fieldset, eOpts) { | ||
| 225 | + console.log(eOpts); | ||
| 226 | + if (config.onChange) { | ||
| 227 | + config.onChange(config.name, '#000000', 'auto'); | ||
| 228 | + } | ||
| 229 | + }, | ||
| 230 | + collapse: function (fieldset, eOpts) { | ||
| 231 | + if (config.onChange) { | ||
| 232 | + config.onChange(config.name, 'auto', this.colorDisplayer.getValue()); | ||
| 233 | + } | ||
| 234 | + }, | ||
| 235 | + scope: this | ||
| 236 | + } | ||
| 237 | + }; | ||
| 238 | + | ||
| 239 | + Ext.apply (this , Ext.apply (arguments, myConf)); | ||
| 240 | + } | ||
| 241 | +}); | ||
| 9 | 242 |
js/app/views/PlotComponents/PlotStandardForm.js
| @@ -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', 'Color') | 410 | + this.addColorsPicker(namePrefix + '-color', 'Color', amdaPlotObj.PlotObjectConfig.availableColorsNew) |
| 411 | ]; | 411 | ]; |
| 412 | }, | 412 | }, |
| 413 | 413 | ||
| @@ -418,169 +418,15 @@ Ext.define('amdaPlotComp.PlotStandardForm', { | @@ -418,169 +418,15 @@ Ext.define('amdaPlotComp.PlotStandardForm', { | ||
| 418 | this.addStandardColor(namePrefix + '-color', 'Color', amdaPlotObj.PlotObjectConfig.availableColors) | 418 | this.addStandardColor(namePrefix + '-color', 'Color', amdaPlotObj.PlotObjectConfig.availableColors) |
| 419 | ]; | 419 | ]; |
| 420 | }, | 420 | }, |
| 421 | - manageRGBcolors: function(namePrefix){ | ||
| 422 | - var rgb = this.object.get(namePrefix+'-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 | - } | ||
| 428 | - }, | ||
| 429 | - manageHEXcolors: function(namePrefix){ | ||
| 430 | - var hex = this.object.get(namePrefix); | ||
| 431 | - if(hex){ | ||
| 432 | - this.object.set(namePrefix+'-rgb', hexToRgb(hex)); | ||
| 433 | - } | ||
| 434 | - }, | ||
| 435 | - rgbToHex : function(rgb) { | ||
| 436 | - return "#" + ((1 << 24) + (rgb[0] << 16) + (rgb[1] << 8) + rgb[2] ).toString(16).slice(1).toUpperCase(); | ||
| 437 | - }, | ||
| 438 | - hexToRgb: function(hex) { | ||
| 439 | - var arrBuff = new ArrayBuffer(4); | ||
| 440 | - var vw = new DataView(arrBuff); | ||
| 441 | - vw.setUint32(0,parseInt(hex, 16),false); | ||
| 442 | - var arrByte = (new Uint8Array(arrBuff)); | ||
| 443 | - | ||
| 444 | - return arrByte.slice(1,4); | ||
| 445 | - }, | ||
| 446 | 421 | ||
| 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; | ||
| 455 | - | ||
| 456 | - var colorPicker = Ext.create('amdaPlotComp.PlotColorPicker', { | ||
| 457 | - value: '000000', // initial selected color | ||
| 458 | - renderTo: Ext.getBody(), | ||
| 459 | - listeners: { | ||
| 460 | - select: function(picker, 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 | - } | ||
| 470 | - }, | ||
| 471 | - scope: this | ||
| 472 | - } | ||
| 473 | - }); | ||
| 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 = | ||
| 493 | - { | ||
| 494 | - xtype: 'toolbar', | ||
| 495 | - bodyStyle: { background: '#dfe8f6' }, | ||
| 496 | - border: false, | ||
| 497 | - name:namePrefix+'-rgb', | ||
| 498 | - items: [ | ||
| 499 | - | ||
| 500 | - { | ||
| 501 | - xtype: 'numberfield', | ||
| 502 | - name: namePrefix+'-R', | ||
| 503 | - fieldLabel: 'R', | ||
| 504 | - labelWidth: 12, | ||
| 505 | - width: 65, | ||
| 506 | - maxValue: 255, | ||
| 507 | - minValue: 0, | ||
| 508 | - value: 0, | ||
| 509 | - listeners: { | ||
| 510 | - change: function (field, newValue, oldValue, eOpts) { | ||
| 511 | - var rgb = this.object.get(namePrefix+"-rgb"); | ||
| 512 | - if(rgb && rgb.length ==3 ) | ||
| 513 | - rgb[0] = newValue; | ||
| 514 | - else | ||
| 515 | - rgb = [newValue,0,0]; | ||
| 516 | - this.object.set(namePrefix+"-rgb", rgb) | ||
| 517 | - this.manageRGBcolors(namePrefix); | ||
| 518 | - }, | ||
| 519 | - scope: this | ||
| 520 | - } | ||
| 521 | - }, | ||
| 522 | - ' ', | ||
| 523 | - { | ||
| 524 | - xtype: 'numberfield', | ||
| 525 | - name: namePrefix+'-G', | ||
| 526 | - fieldLabel: 'G', | ||
| 527 | - labelWidth: 12, | ||
| 528 | - width: 65, | ||
| 529 | - maxValue: 255, | ||
| 530 | - minValue: 0, | ||
| 531 | - value: 0, | ||
| 532 | - listeners: { | ||
| 533 | - change: function (field, newValue, oldValue, eOpts) { | ||
| 534 | - var rgb = this.object.get(namePrefix+"-rgb"); | ||
| 535 | - if(rgb && rgb.length ==3 ) | ||
| 536 | - rgb[1] = newValue; | ||
| 537 | - else | ||
| 538 | - rgb = [0, newValue, 0]; | ||
| 539 | - this.object.set(namePrefix+"-rgb", rgb); | ||
| 540 | - this.manageRGBcolors(namePrefix); | ||
| 541 | - }, | ||
| 542 | - scope: this | ||
| 543 | - } | ||
| 544 | - }, | ||
| 545 | - ' ', | ||
| 546 | - { | ||
| 547 | - xtype: 'numberfield', | ||
| 548 | - name: namePrefix+'-B', | ||
| 549 | - fieldLabel: 'B', | ||
| 550 | - labelWidth: 12, | ||
| 551 | - width: 65, | ||
| 552 | - maxValue: 255, | ||
| 553 | - minValue: 0, | ||
| 554 | - value: 0, | ||
| 555 | - listeners: { | ||
| 556 | - change: function (field, newValue, oldValue, eOpts) { | ||
| 557 | - var rgb = this.object.get(namePrefix+"-rgb"); | ||
| 558 | - if(rgb && rgb.length ==3 ) | ||
| 559 | - rgb[2] = newValue; | ||
| 560 | - else | ||
| 561 | - rgb = [0,0,newValue]; | ||
| 562 | - this.object.set(namePrefix+"-rgb", rgb); | ||
| 563 | - this.manageRGBcolors(namePrefix); | ||
| 564 | - }, | ||
| 565 | - scope: this | ||
| 566 | - } | ||
| 567 | - }, | ||
| 568 | - | ||
| 569 | - ] | ||
| 570 | - } | ||
| 571 | - | ||
| 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); | 422 | + addColorsPicker: function (name, label, availableColors, onChange) { |
| 423 | + var me =this; | ||
| 424 | + return new amdaPlotComp.PlotColorPicker({name: name, label: label, colors: availableColors, onChange: function(name, newValue, oldValue) { | ||
| 425 | + me.object.set(name, newValue); | ||
| 426 | + console.log(newValue); | ||
| 427 | + if (onChange != null) | ||
| 428 | + onChange(name, newValue, oldValue); | ||
| 429 | + }}); | ||
| 584 | }, | 430 | }, |
| 585 | 431 | ||
| 586 | init: function (config) { | 432 | init: function (config) { |