PlotZoomPlug.js 11.5 KB
/**
 * 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',

  id: 'plot-zoom-plug',

  ttModuleId: 'timetab-win',

  win: null,
  form: null,
  zoomType: '',
  tabId: '',
  panelId: -1,

  linkedTTNode: null,

  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;

    var start = this.form.getForm().findField('zoom-min-time').getValue();
    var stop = this.form.getForm().findField('zoom-max-time').getValue();

    myDesktopApp.getLoadedModule(this.ttModuleId, true, function (module) {
      var targetModuleUI = module.getUiContent();
      if (targetModuleUI)
        targetModuleUI.addInterval(start, 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,
        x: 0, y: 0,
        baseCls: 'x-panel',
        title: 'Zoom',
        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');
  },

  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 () {
            var me = this;

            var TTname = this.form.getForm().findField('tt-name').getValue();

            myDesktopApp.getLoadedModule(this.ttModuleId, true, function (module) {
              var targetModuleUI = module.getUiContent();
              if (me.linkedTTNode && (me.linkedTTNode.get('text') == TTname)) {
                if (targetModuleUI)
                  me.insertInterval();
                else {
                  me.linkedTTNode.editLeaf(function () {
                    me.insertInterval();
                  });
                }
              }
              else {
                if (TTname == '') {
                  me.linkedTTNode.editLeaf(function () {
                    me.insertInterval();
                  });
                }

                var explorerTree = Ext.getCmp(amdaUI.ExplorerUI.RESRC_TAB.TREE_ID);
                var ttRootNode = explorerTree.getRootNode().findChild('id', 'timeTable-treeRootNode', true);
                amdaModel.InteractiveNode.preloadNodes(ttRootNode, function () {
                  var nodeWithSameName = null;

                  if (TTname != '')
                    nodeWithSameName = ttRootNode.findChild('text', TTname, true);

                  if (nodeWithSameName !== null)
                    me.linkedTTNode = nodeWithSameName;
                  else {
                    var obj = Ext.create('amdaModel.TimeTable', {name: TTname, fromPlugin: true});
                    me.linkedTTNode = Ext.create('amdaModel.TimeTableNode', {
                      leaf: true,
                      text: TTname,
                      nodeType: 'timeTable',
                      object: obj
                    });
                  }

                  me.linkedTTNode.editLeaf(function () {
                    me.insertInterval();
                  });
                });
              }
            });
          }
        }
      ]
    };

    this.form = new Ext.form.FormPanel({
      frame: true,
      width: 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;
  }
});