/** * @class Ext.chart.interactions.ItemEdit * @extends Ext.chart.interactions.ItemHighlight * * The 'itemedit' interaction allows the user to edit store data * by dragging series items in the chart. * * The 'itemedit' interaction extends the * {@link Ext.chart.interactions.ItemHighlight 'itemhighlight'} interaction, * so it also acts like one. If you need both interactions in a single chart, * 'itemedit' should be sufficient. Hovering/tapping will result in highlighting, * and dragging will result in editing. */Ext.define('Ext.chart.interactions.ItemEdit', { extend: 'Ext.chart.interactions.ItemHighlight', requires: [ 'Ext.tip.ToolTip' ], type: 'itemedit', alias: 'interaction.itemedit', isItemEdit: true, config: { /** * @cfg {Object} [style=null] * The style that will be applied to the series item on dragging. * By default, series item will have no fill, * and will have a dashed stroke of the same color. */ style: null, /** * @cfg {Function/String} [renderer=null] * A function that returns style attributes for the item that's being dragged. * This is useful if you want to give a visual feedback to the user when * they dragged to a certain point. * * @param {Object} [data] The following properties are available: * * @param {Object} data.target The object containing the xField/xValue or/and * yField/yValue properties, where the xField/yField specify the store records * being edited and the xValue/yValue the target values to be set when * the interaction ends. The object also contains the 'index' of the record * being edited. * @param {Object} data.style The style that is going to be used for the dragged item. * The attributes returned by the renderer will be applied on top of this style. * @param {Object} data.item The series item being dragged. * This is actually the {@link Ext.chart.AbstractChart#highlightItem}. * * @return {Object} The style attributes to be set on the dragged item. */ renderer: null, /** * @cfg {Object/Boolean} [tooltip=true] */ tooltip: true, gestures: { dragstart: 'onDragStart', drag: 'onDrag', dragend: 'onDragEnd' }, cursors: { ewResize: 'ew-resize', nsResize: 'ns-resize', move: 'move' } /** * @private * @cfg {Boolean} [sticky=false] */ }, /** * @event beginitemedit * Fires when item edit operation (dragging) begins. * @param {Ext.chart.AbstractChart} chart The chart the interaction belongs to. * @param {Ext.chart.interactions.ItemEdit} interaction The interaction. * @param {Object} item The item that is about to be edited. */ /** * @event enditemedit * Fires when item edit operation (dragging) ends. * @param {Ext.chart.AbstractChart} chart The chart the interaction belongs to. * @param {Ext.chart.interactions.ItemEdit} interaction The interaction. * @param {Object} item The item that was edited. * @param {Object} target The object containing target values the were used. */ item: null, // Item being edited. applyTooltip: function (tooltip) { if (tooltip) { var config = Ext.apply({}, tooltip, { renderer: this.defaultTooltipRenderer, constrainPosition: true, shrinkWrapDock: true, autoHide: true, trackMouse: true, mouseOffset: [20, 20] }); tooltip = new Ext.tip.ToolTip(config); } return tooltip; }, defaultTooltipRenderer: function (tooltip, item, target, e) { var parts = []; if (target.xField) { parts.push(target.xField + ': ' + target.xValue); } if (target.yField) { parts.push(target.yField + ': ' + target.yValue); } tooltip.setHtml(parts.join('<br>')); }, onDragStart: function (e) { var me = this, chart = me.getChart(), item = chart.getHighlightItem(); e.claimGesture(); if (item) { chart.fireEvent('beginitemedit', chart, me, me.item = item); // If ItemEdit interaction comes before other interactions // in the chart's 'interactions' config, this will // prevent other interactions hijacking the 'dragstart' // event. We only stop event propagation is there's // an item to edit under cursor/finger, otherwise we // let other interactions (e.g. 'panzoom') handle the event. return false; } }, onDrag: function (e) { var me = this, chart = me.getChart(), item = chart.getHighlightItem(), type = item && item.sprite.type; if (item) { switch (type) { case 'barSeries': return me.onDragBar(e); case 'scatterSeries': return me.onDragScatter(e); } } }, highlight: function (item) { var me = this, chart = me.getChart(), flipXY = chart.getFlipXY(), cursors = me.getCursors(), type = item && item.sprite.type, style = chart.el.dom.style; me.callParent([item]); if (item) { switch (type) { case 'barSeries': if (flipXY) { style.cursor = cursors.ewResize; } else { style.cursor = cursors.nsResize; } break; case 'scatterSeries': style.cursor = cursors.move; break; } } else { chart.el.dom.style.cursor = 'default'; } }, onDragBar: function (e) { var me = this, chart = me.getChart(), isRtl = chart.getInherited().rtl, flipXY = chart.isCartesian && chart.getFlipXY(), item = chart.getHighlightItem(), marker = item.sprite.getMarker('items'), instance = marker.getMarkerFor(item.sprite.getId(), item.index), surface = item.sprite.getSurface(), surfaceRect = surface.getRect(), xy = surface.getEventXY(e), matrix = item.sprite.attr.matrix, renderer = me.getRenderer(), style, changes, params, positionY; if (flipXY) { positionY = isRtl ? surfaceRect[2] - xy[0] : xy[0]; } else { positionY = surfaceRect[3] - xy[1]; } style = { x: instance.x, y: positionY, width: instance.width, height: instance.height + (instance.y - positionY), radius: instance.radius, fillStyle: 'none', lineDash: [4, 4], zIndex: 100 }; Ext.apply(style, me.getStyle()); if (Ext.isArray(item.series.getYField())) { // stacked bars positionY = positionY - instance.y - instance.height; } me.target = { index: item.index, yField: item.field, yValue: (positionY - matrix.getDY()) / matrix.getYY() }; params = [chart, { target: me.target, style: style, item: item }]; changes = Ext.callback(renderer, null, params, 0, chart); if (changes) { Ext.apply(style, changes); } // The interaction works by putting another series item instance // under 'itemedit' ID with a slightly different style (default) or // whatever style the user provided. item.sprite.putMarker('items', style, 'itemedit'); me.showTooltip(e, me.target, item); surface.renderFrame(); }, onDragScatter: function (e) { var me = this, chart = me.getChart(), isRtl = chart.getInherited().rtl, flipXY = chart.isCartesian && chart.getFlipXY(), item = chart.getHighlightItem(), marker = item.sprite.getMarker('markers'), instance = marker.getMarkerFor(item.sprite.getId(), item.index), surface = item.sprite.getSurface(), surfaceRect = surface.getRect(), xy = surface.getEventXY(e), matrix = item.sprite.attr.matrix, xAxis = item.series.getXAxis(), isEditableX = xAxis && xAxis.getLayout().isContinuous, renderer = me.getRenderer(), style, changes, params, positionX, positionY, hintX, hintY; if (flipXY) { positionY = isRtl ? surfaceRect[2] - xy[0] : xy[0]; } else { positionY = surfaceRect[3] - xy[1]; } if (isEditableX) { if (flipXY) { positionX = surfaceRect[3] - xy[1]; } else { positionX = xy[0]; } } else { positionX = instance.translationX; } if (isEditableX) { hintX = xy[0]; hintY = xy[1]; } else { if (flipXY) { hintX = xy[0]; hintY = instance.translationY; // no change } else { hintX = instance.translationX; hintY = xy[1]; // no change } } style = { translationX: hintX, translationY: hintY, scalingX: instance.scalingX, scalingY: instance.scalingY, r: instance.r, fillStyle: 'none', lineDash: [4, 4], zIndex: 100 }; Ext.apply(style, me.getStyle()); me.target = { index: item.index, yField: item.field, yValue: (positionY - matrix.getDY()) / matrix.getYY() }; if (isEditableX) { Ext.apply(me.target, { xField: item.series.getXField(), xValue: (positionX - matrix.getDX()) / matrix.getXX() }); } params = [chart, { target: me.target, style: style, item: item }]; changes = Ext.callback(renderer, null, params, 0, chart); if (changes) { Ext.apply(style, changes); } // This marker acts as a visual hint while dragging. item.sprite.putMarker('markers', style, 'itemedit'); me.showTooltip(e, me.target, item); surface.renderFrame(); }, showTooltip: function (e, target, item) { var tooltip = this.getTooltip(), config, chart; if (tooltip && Ext.toolkit !== 'modern') { config = tooltip.config; chart = this.getChart(); Ext.callback(config.renderer, null, [tooltip, item, target, e], 0, chart); // If trackMouse is set, a ToolTip shows by its pointerEvent tooltip.pointerEvent = e; if (tooltip.isVisible()) { // After show handling repositions according // to configuration. trackMouse uses the pointerEvent // If aligning to an element, it uses a currentTarget // flyweight which may be attached to any DOM element. tooltip.realignToTarget(); } else { tooltip.show(); } } }, hideTooltip: function () { var tooltip = this.getTooltip(); if (tooltip && Ext.toolkit !== 'modern') { tooltip.hide(); } }, onDragEnd: function (e) { var me = this, target = me.target, chart = me.getChart(), store = chart.getStore(), record; if (target) { record = store.getAt(target.index); if (target.yField) { record.set(target.yField, target.yValue, { convert: false }); } if (target.xField) { record.set(target.xField, target.xValue, { convert: false }); } if (target.yField || target.xField) { me.getChart().onDataChanged(); } me.target = null; } me.hideTooltip(); if (me.item) { chart.fireEvent('enditemedit', chart, me, me.item, target); } me.highlight(me.item = null); }, destroy: function () { // Peek at the config, so we don't create one just to destroy it, // if a user has set 'tooltip' config to 'false'. var tooltip = this.getConfig('tooltip', true); Ext.destroy(tooltip); this.callParent(); } });