/** * Project  : AMDA-NG * Name : PlotZoomPlug.js * @plugin amdaPlotComp.PlotZoomPlug * @extends Ext.util.Observable * @ptype plotZoomPlugin * @brief Plot Zoom UI (View) * @author Benjamin * @version $Id: PlotZoomPlug.js ******************************************************************************** * FT Id : Date : Name - Description ******************************************************************************* * : */ Ext.define('amdaPlotComp.PlotZoomPlug', { extend: 'Ext.util.Observable', alias: 'plugin.plotZoomPlugin', ttModuleId : 'timetab-win', win : null, form : null, zoomType : '', tabId : '', panelId : -1, constructor: function(config) { Ext.apply(this, config); this.callParent(arguments); }, onDestroy : function() { this.win = null; }, init: function(cmp) { this.hostCmp = cmp; }, setMinValue : function(min) { if (!this.form) return; if (this.zoomType == 'timeAxis') this.form.getForm().findField('zoom-min-time').setValue(min); else this.form.getForm().findField('zoom-min-float').setValue(min); }, setMaxValue : function(max) { if (!this.form) return; if (this.zoomType == 'timeAxis') { var minValue = this.form.getForm().findField('zoom-min-time').getValue(); if (minValue <= max) this.form.getForm().findField('zoom-max-time').setValue(max); else { this.form.getForm().findField('zoom-min-time').setValue(max); this.form.getForm().findField('zoom-max-time').setValue(minValue); } } else { var minValue = this.form.getForm().findField('zoom-min-float').getValue(); if (minValue <= max) this.form.getForm().findField('zoom-max-float').setValue(max); else { this.form.getForm().findField('zoom-min-float').setValue(max); this.form.getForm().findField('zoom-max-float').setValue(minValue); } } }, /** * add Interval to Time table **/ insertInterval: function() { if (this.zoomType != 'timeAxis') return; myDesktopApp.getLoadedModule(this.ttModuleId, true, function(module){ var targetModuleUI = targetModule.getUiContent(); //if (targetModuleUI) // targetModuleUI.addInterval(this.start,this.stop); }); }, /** * creation of the window */ show : function(tabId, zoomType, panelId) { if (!this.win) { this.win = new Ext.Window({ id: 'plot-zoom-win-' + this.hostCmp.ownerCt.getId(), // Plot window ID width: 250, height: 250, x: 0, y: 0, baseCls:'x-panel', title: 'Zoom', layout: 'fit', constrain: true, collapsible: true, resizable: false, ghost: false, renderTo: this.hostCmp.ownerCt.body, items: this.getFormConfig(), listeners: { scope: this, beforeclose: function() { this.hostCmp.panelImage.stopZoom(); Ext.PluginManager.unregister(this); } }, getConstrainVector: function(constrainTo){ var me = this; if (me.constrain || me.constrainHeader) { constrainTo = constrainTo || (me.floatParent && me.floatParent.getTargetEl()) || me.container || me.el.getScopeParent(); return (me.constrainHeader ? me.header.el : me.el).getConstrainVector(constrainTo); } } }); this.win.on('destroy', this.onDestroy, this); Ext.PluginManager.register(this); } this.tabId = tabId; this.updateWinByType(zoomType, panelId); this.win.show(); this.win.setPosition(0,0); }, close : function() { if (this.win == null) return; this.win.close(); }, updateWinByType : function(zoomType, panelId) { if (this.win == null) return; this.zoomType = zoomType; this.panelId = panelId; switch (zoomType) { case 'timeAxis': this.win.setTitle('Zoom on time axis & Interval selection - Panel Id : '+panelId); break; case 'y-left' : this.win.setTitle('Zoom on Y Left axis - Panel Id : '+panelId); break; case 'y-right' : this.win.setTitle('Zoom on Y Right axis - Panel Id : '+panelId); break; case 'xaxis_id' : this.win.setTitle('Zoom on X axis - Panel Id : '+panelId); break; } this.form.getForm().findField('zoom-min-time').setVisible(this.zoomType == 'timeAxis'); this.form.getForm().findField('zoom-max-time').setVisible(this.zoomType == 'timeAxis'); this.form.getForm().findField('zoom-min-float').setVisible(this.zoomType != 'timeAxis'); this.form.getForm().findField('zoom-max-float').setVisible(this.zoomType != 'timeAxis'); var ttNameField = this.form.getForm().findField('tt-name'); if (ttNameField) ttNameField.findParentByType('fieldset').setVisible(this.zoomType == 'timeAxis'); this.win.setHeight((this.zoomType == 'timeAxis') ? 250 : 160); }, resetMinMaxValue: function() { if (this.zoomType == 'timeAxis') { this.form.getForm().findField('zoom-min-time').setValue(''); this.form.getForm().findField('zoom-max-time').setValue(''); } else { this.form.getForm().findField('zoom-min-float').setValue(null); this.form.getForm().findField('zoom-max-float').setValue(null); } this.hostCmp.panelImage.resetZoom(); }, /** * Main form */ getFormConfig: function(){ var intervalFieldSet = { xtype: 'fieldset', title: 'Interval Selection', name: 'interval-selection-fieldset', collapsible: false, layout: { type: 'vbox', pack: 'start', align: 'stretch' }, items : [ { xtype:'datefield', name:'zoom-min-time', fieldLabel: 'Start Time', format : 'Y-m-d\\TH:i:s' }, { xtype:'datefield', name:'zoom-max-time', fieldLabel: 'Stop Time', format : 'Y-m-d\\TH:i:s' }, { xtype:'numberfield', name:'zoom-min-float', fieldLabel: 'Min Value' }, { xtype:'numberfield', name:'zoom-max-float', fieldLabel: 'Max Value' }, { xtype: 'button', width: 100, text: 'Reset interval', scope: this, handler: function() { this.resetMinMaxValue(); } } ] }; var insertTTFieldSet = { xtype: 'fieldset', title: 'TimeTable Insertion', name: 'tt-insertion-fieldset', collapsible: false, layout: { type: 'vbox', pack: 'start', align: 'stretch' }, items : [ { xtype: 'textfield', fieldLabel: 'TimeTable Name', name: 'tt-name', listeners : { render : function(o,op) { var me = this; var el = me.el; var dropTarget = Ext.create('Ext.dd.DropTarget', el, { ddGroup: 'explorerTree', notifyOver : function(ddSource, e, data) { if ((data.records[0].data.nodeType == 'timeTable') && (data.records[0].data.leaf)) { this.valid = true; return this.dropAllowed; } this.valid = false; return this.dropNotAllowed; }, notifyDrop : function(ddSource, e, data) { if (!this.valid) return false; me.setValue(data.records[0].get('text')); return true; } }); } } }, { xtype: 'button', width: 100, text: 'Insert Interval', scope: this, handler: function(){ if (this.zoomType != 'timeAxis') return; this.start = this.form.getForm().findField('zoom-min-time').getValue(); this.stop = this.form.getForm().findField('zoom-max-time').getValue(); // new TimeTable or typed manually var me = this; var targetModule = myDesktopApp.getLoadedModule(this.ttModuleId, true, function(module) { var targetModuleUI = module.getUiContent(); var TTname = me.form.getForm().findField('tt-name').getValue(); //ToDo }); } } ] }; this.form = new Ext.form.FormPanel( { frame: true, width: 250, height: 250, layout: { type: 'vbox', pack: 'start', align: 'stretch' }, fieldDefaults: { labelWidth: 60 }, items: [ intervalFieldSet, insertTTFieldSet ], fbar : [ { text: 'Apply Zoom', width: 100, scope: this, handler: function(){ if (this.zoomType == 'timeAxis') { var minZoom = this.form.getForm().findField('zoom-min-time').getValue(); var maxZoom = this.form.getForm().findField('zoom-max-time').getValue(); } else { var minZoom = this.form.getForm().findField('zoom-min-float').getValue(); var maxZoom = this.form.getForm().findField('zoom-max-float').getValue(); } if(!maxZoom || !minZoom || !this.form.getForm().isValid()) { myDesktopApp.warningMsg('Error in values definition'); return; } this.hostCmp.callInteractivePlot({'action' : 'zoom', 'tabId' : this.tabId, 'panelId' : this.panelId, 'axeId' : this.zoomType, 'min' : minZoom, 'max' : maxZoom}); this.hostCmp.panelImage.resetZoom(); } }, { text: 'Undo Zoom', width: 100, scope : this, handler: function(){ this.hostCmp.callInteractivePlot({'action' : 'undozoom', 'tabId' : this.tabId, 'panelId' : this.panelId, 'axeId' : this.zoomType}); this.hostCmp.panelImage.resetZoom(); } } ] }); return this.form; } });