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 | 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 | 392 | availableBackgroundColors: [ |
| 374 | 393 | { 'color': 'none', 'value': 'None' }, |
| 375 | 394 | { 'key': '[0,0,0]', 'color': '#000000', 'value': 'Black' }, |
| ... | ... |
js/app/views/PlotComponents/PlotColorPicker.js
| ... | ... | @@ -3,7 +3,240 @@ |
| 3 | 3 | * To change this template file, choose Tools | Templates |
| 4 | 4 | * and open the template in the editor. |
| 5 | 5 | */ |
| 6 | + | |
| 6 | 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 | 407 | this.addStandardCombo(namePrefix + '-style', 'Style', amdaPlotObj.PlotObjectConfig.availableLinesStyles), |
| 408 | 408 | this.addStandardFloat(namePrefix + '-width', 'Width', 1, 10), |
| 409 | 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 | 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 | 432 | init: function (config) { |
| ... | ... |