/**
* Project : AMDA-NG
* Name : PlotStandardForm.js
* @class amdaPlotComp.PlotStandardForm
* @extends Ext.form.Panel
* @brief Standard Form used to define some options for a plot element
* @author Benjamin Renard
* @version $Id: PlotStandardForm.js benjamin $
*/
Ext.define('amdaPlotComp.PlotStandardForm', {
extend: 'Ext.form.Panel',
requires: [
'amdaPlotObj.PlotObjectConfig',
'amdaPlotComp.EraseTrigger',
'amdaPlotComp.PlotColorPicker'
],
//Object associated to this form
object: null,
//Link to the tree
crtTree: null,
desableTickNumber: true,
desableTickSpacing: true,
constructor: function (config) {
this.init(config);
this.callParent(arguments);
},
setObject: function (object) {
this.object = object;
this.loadRecord(this.object);
},
//To override to add form components
getFormItems: function () {
return [];
},
//Function called after element creation by PlotElementPanel
updateElement: function (onAfterUpdate) {
if (onAfterUpdate)
onAfterUpdate();
},
//
addStandardText: function (name, label, onChange) {
return {
xtype: 'textfield',
name: name,
fieldLabel: label,
listeners: {
change: function (field, newValue, oldValue, eOpts) {
this.object.set(name, newValue);
if (onChange != null)
onChange(name, newValue, oldValue);
},
scope: this
}
};
},
addStandardFloat: function (name, label, min, max, allowBlank, onChange) {
allowBlank = (typeof allowBlank !== 'undefined') ? allowBlank : false;
return {
xtype: 'numberfield',
name: name,
fieldLabel: label,
decimalPrecision: 20,
minValue: min,
maxValue: max,
allowBlank: allowBlank,
listeners: {
change: function (field, newValue, oldValue, eOpts) {
this.object.set(name, newValue);
if (onChange != null)
onChange(name, newValue, oldValue);
},
scope: this
}
};
},
addStandardInteger: function (name, label, min, max, allowBlank, hidden, onChange) {
allowBlank = (typeof allowBlank !== 'undefined') ? allowBlank : false;
return {
xtype: 'numberfield',
name: name,
fieldLabel: label,
hidden: (hidden) ? true : false,
regex: /^\d+$/,
decimalPrecision: 20,
minValue: min,
maxValue: max,
allowBlank: allowBlank,
listeners: {
change: function (field, newValue, oldValue, eOpts) {
this.object.set(name, newValue);
if (onChange != null)
onChange(name, newValue, oldValue);
},
scope: this
}
};
},
addStandardFloat2: function (name, label, min, max, allowBlank, hidden, onChange) {
allowBlank = (typeof allowBlank !== 'undefined') ? allowBlank : false;
return {
xtype: 'textfield',
name: name,
fieldLabel: label,
regex: /[-+]?(?:\d*\.?\d+|\d+\.?\d*)(?:[eE][-+]?\d+)?/,
hidden: (hidden) ? true : false,
validator: function (val) {
var errMsg = null;
if (!allowBlank && Ext.isEmpty(val)) {
errMsg = 'Blank value not allowed';
}
else if ((typeof min !== 'undefined') && (parseFloat(val) < min)) {
errMsg = 'Min. allowed value is ' + min;
}
else if ((typeof max !== 'undefined') && (parseFloat(val) > max)) {
errMsg = 'Max. allowed value is ' + max;
}
return errMsg ? errMsg : true;
},
listeners: {
change: function (field, newValue, oldValue, eOpts) {
this.object.set(name, newValue);
if (onChange != null)
onChange(name, newValue, oldValue);
},
scope: this
}
};
},
addStandardCombo: function (name, label, availableData, onChange) {
var comboStore = Ext.create('Ext.data.Store', {
fields: [amdaPlotObj.PlotObjectConfig.fieldComboBox.key, amdaPlotObj.PlotObjectConfig.fieldComboBox.value],
data: availableData
});
return {
xtype: 'combo',
name: name,
fieldLabel: label,
store: comboStore,
queryMode: 'local',
displayField: 'value',
valueField: 'key',
editable: false,
listeners: {
change: function (combo, newValue, oldValue, eOpts) {
if (onChange != null)
onChange(name, newValue, oldValue);
this.object.set(name, newValue);
},
scope: this
}
};
},
addStandardCheck: function (name, label, onChange, tooltip) {
return {
xtype: 'checkbox',
name: name,
boxLabel: label,
listeners: {
change: function (combo, newValue, oldValue, eOpts) {
this.object.set(name, newValue);
if (onChange != null)
onChange(name, newValue, oldValue);
},
render: function (c) {
if (tooltip) {
Ext.create('Ext.tip.ToolTip', {
target: c.getEl(),
dismissDelay: 0,
html: tooltip
});
}
},
scope: this
}
};
},
addStandardFieldSet: function (title, checkboxName, items, onChangeCheck, collapsed_ = true) {
return {
xtype: 'fieldset',
cls: 'child-fieldset',
title: title,
collapsible: true,
collapsed: collapsed_,
checkboxName: checkboxName,
checkboxToggle: checkboxName != '',
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch'
},
items: items,
listeners: {
expand: function (fieldset, eOpts) {
if (checkboxName != '') {
this.object.set(checkboxName, true);
if (onChangeCheck != null)
onChangeCheck(checkboxName, true, false);
}
},
collapse: function (fieldset, eOpts) {
if (checkboxName != '') {
this.object.set(checkboxName, false);
if (onChangeCheck != null)
onChangeCheck(checkboxName, false, true);
}
},
scope: this
}
};
},
addStandardFont: function (namePrefix) {
var fontItems = [
this.addStandardCombo(namePrefix + '-name', 'Name', amdaPlotObj.PlotObjectConfig.availableFontNames),
{
xtype: 'toolbar',
bodyStyle: { background: '#dfe8f6' },
border: false,
items: [
{
xtype: 'numberfield',
name: namePrefix + '-size',
fieldLabel: 'Size',
labelWidth: 60,
width: 150,
maxValue: 32,
minValue: 6,
value: 12,
listeners: {
change: function (field, newValue, oldValue, eOpts) {
this.object.set(namePrefix + '-size', newValue);
},
scope: this
}
},
' ',
{
xtype: 'checkbox',
name: namePrefix + '-bold',
boxLabel: 'B',
width: 30,
listeners: {
change: function (combo, newValue, oldValue, eOpts) {
this.object.set(namePrefix + '-bold', newValue);
},
scope: this
}
},
{
xtype: 'checkbox',
name: namePrefix + '-italic',
boxLabel: 'I',
width: 30,
listeners: {
change: function (combo, newValue, oldValue, eOpts) {
this.object.set(namePrefix + '-italic', newValue);
},
scope: this
}
}
]
}
];
return this.addStandardFieldSet('Font', namePrefix + '-activated', fontItems);
},
addStandardColor: function (name, label, availableData, onChange) {
var comboStore = Ext.create('Ext.data.Store', {
fields: ['color', 'value'],
data: availableData
});
return {
xtype: 'combo',
name: name,
fieldLabel: label,
store: comboStore,
queryMode: 'local',
displayField: 'value',
valueField: 'color',
editable: false,
tpl: Ext.create('Ext.XTemplate',
''
),
// template for the content inside text field
displayTpl: Ext.create('Ext.XTemplate',
'',
'{value}',
''
),
listeners: {
change: function (combo, newValue, oldValue, eOpts) {
this.object.set(name, newValue);
if (onChange != null)
onChange(name, newValue, oldValue);
},
scope: this
}
};
},
addStandardParamDropTarget: function (name, label, onChange) {
return {
xtype: 'erasetrigger',
name: name,
fieldLabel: label,
emptyText: 'Drop a parameter',
listeners: {
change: function (field, newValue, oldValue, eOpts) {
this.object.set(name, newValue);
if (onChange != null)
onChange(name, newValue, oldValue);
},
afterrender: function (field, eOpts) {
var paramTarget = new Ext.dd.DropTarget(field.el.dom,
{
ddGroup: 'explorerTree',
notifyEnter: function (ddSource, e, data) {
},
notifyDrop: function (ddSource, e, data) {
var selectedRecord = ddSource.dragData.records[0];
switch (selectedRecord.$className) {
case 'amdaModel.LocalParamNode':
case 'amdaModel.RemoteParamNode':
case 'amdaModel.RemoteSimuParamNode':
if (!selectedRecord.get('isParameter') || selectedRecord.get('disable'))
return false;
if (selectedRecord.get('alias') != "")
field.setValue("#" + selectedRecord.get('alias'));
else
field.setValue(selectedRecord.get('id'));
return true;
case 'amdaModel.AliasNode':
if (!selectedRecord.isLeaf())
return false;
field.setValue("#" + selectedRecord.get('text'));
return true;
case 'amdaModel.DerivedParamNode':
if (!selectedRecord.isLeaf())
return false;
field.setValue("ws_" + selectedRecord.get('text'));
return true;
case 'amdaModel.MyDataParamNode':
if (!selectedRecord.isLeaf())
return false;
field.setValue("wsd_" + selectedRecord.get('text'));
return true;
default:
return false;
}
return true;
}
}
);
},
scope: this
}
};
},
addStandardDate: function (name, label, onChange) {
return {
xtype: 'datefield',
name: name,
format: 'Y/m/d H:i:s',
enforceMaxLength: true,
maxLength: 19,
fieldLabel: label,
listeners: {
change: function (field, newValue, oldValue, eOpts) {
this.object.set(name, newValue);
if (onChange != null)
onChange(name, newValue, oldValue);
},
scope: this
}
};
},
addStandardLineItems: function (namePrefix) {
return [
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', 'Color')
];
},
addStandardSymbolsItems: function (namePrefix) {
return [
this.addStandardCombo(namePrefix + '-type', 'Type', amdaPlotObj.PlotObjectConfig.availableSymbolsTypes),
this.addStandardFloat(namePrefix + '-size', 'Size', 1, 10),
this.addStandardColor(namePrefix + '-color', 'Color', amdaPlotObj.PlotObjectConfig.availableColors)
];
},
manageRGBcolors: function(namePrefix){
var rgb = this.object.get(namePrefix+'-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){
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();
},
hexToRgb: function(hex) {
var arrBuff = new ArrayBuffer(4);
var vw = new DataView(arrBuff);
vw.setUint32(0,parseInt(hex, 16),false);
var arrByte = (new Uint8Array(arrBuff));
return arrByte.slice(1,4);
},
/**
*
* @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: '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 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: namePrefix+'-R',
fieldLabel: 'R',
labelWidth: 12,
width: 65,
maxValue: 255,
minValue: 0,
value: 0,
listeners: {
change: function (field, newValue, oldValue, eOpts) {
var rgb = this.object.get(namePrefix+"-rgb");
if(rgb && rgb.length ==3 )
rgb[0] = newValue;
else
rgb = [newValue,0,0];
this.object.set(namePrefix+"-rgb", rgb)
this.manageRGBcolors(namePrefix);
},
scope: this
}
},
' ',
{
xtype: 'numberfield',
name: namePrefix+'-G',
fieldLabel: 'G',
labelWidth: 12,
width: 65,
maxValue: 255,
minValue: 0,
value: 0,
listeners: {
change: function (field, newValue, oldValue, eOpts) {
var rgb = this.object.get(namePrefix+"-rgb");
if(rgb && rgb.length ==3 )
rgb[1] = newValue;
else
rgb = [0, newValue, 0];
this.object.set(namePrefix+"-rgb", rgb);
this.manageRGBcolors(namePrefix);
},
scope: this
}
},
' ',
{
xtype: 'numberfield',
name: namePrefix+'-B',
fieldLabel: 'B',
labelWidth: 12,
width: 65,
maxValue: 255,
minValue: 0,
value: 0,
listeners: {
change: function (field, newValue, oldValue, eOpts) {
var rgb = this.object.get(namePrefix+"-rgb");
if(rgb && rgb.length ==3 )
rgb[2] = newValue;
else
rgb = [0,0,newValue];
this.object.set(namePrefix+"-rgb", rgb);
this.manageRGBcolors(namePrefix);
},
scope: this
}
},
]
}
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) {
var me = this;
var myConf = {
bodyPadding: 5,
bodyStyle: { background: '#dfe8f6' },
border: false,
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch'
},
items: this.getFormItems()
};
Ext.apply(this, Ext.apply(arguments, myConf));
}
});