--- /dev/null
+<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-resizer.ResizeTracker'>/**
+</span> * @class Ext.resizer.ResizeTracker
+ * @extends Ext.dd.DragTracker
+ */
+Ext.define('Ext.resizer.ResizeTracker', {
+ extend: 'Ext.dd.DragTracker',
+ dynamic: true,
+ preserveRatio: false,
+
+ // Default to no constraint
+ constrainTo: null,
+
+ constructor: function(config) {
+ var me = this;
+
+ if (!config.el) {
+ if (config.target.isComponent) {
+ me.el = config.target.getEl();
+ } else {
+ me.el = config.target;
+ }
+ }
+ this.callParent(arguments);
+
+ // Ensure that if we are preserving aspect ratio, the largest minimum is honoured
+ if (me.preserveRatio && me.minWidth && me.minHeight) {
+ var widthRatio = me.minWidth / me.el.getWidth(),
+ heightRatio = me.minHeight / me.el.getHeight();
+
+ // largest ratio of minimum:size must be preserved.
+ // So if a 400x200 pixel image has
+ // minWidth: 50, maxWidth: 50, the maxWidth will be 400 * (50/200)... that is 100
+ if (heightRatio > widthRatio) {
+ me.minWidth = me.el.getWidth() * heightRatio;
+ } else {
+ me.minHeight = me.el.getHeight() * widthRatio;
+ }
+ }
+
+ // If configured as throttled, create an instance version of resize which calls
+ // a throttled function to perform the resize operation.
+ if (me.throttle) {
+ var throttledResizeFn = Ext.Function.createThrottled(function() {
+ Ext.resizer.ResizeTracker.prototype.resize.apply(me, arguments);
+ }, me.throttle);
+
+ me.resize = function(box, direction, atEnd) {
+ if (atEnd) {
+ Ext.resizer.ResizeTracker.prototype.resize.apply(me, arguments);
+ } else {
+ throttledResizeFn.apply(null, arguments);
+ }
+ };
+ }
+ },
+
+ onBeforeStart: function(e) {
+ // record the startBox
+ this.startBox = this.el.getBox();
+ },
+
+<span id='Ext-resizer.ResizeTracker-method-getDynamicTarget'> /**
+</span> * @private
+ * Returns the object that will be resized on every mousemove event.
+ * If dynamic is false, this will be a proxy, otherwise it will be our actual target.
+ */
+ getDynamicTarget: function() {
+ var d = this.target;
+ if (this.dynamic) {
+ return d;
+ } else if (!this.proxy) {
+ this.proxy = d.isComponent ? d.getProxy().addCls(Ext.baseCSSPrefix + 'resizable-proxy') : d.createProxy({tag: 'div', cls: Ext.baseCSSPrefix + 'resizable-proxy', id: d.id + '-rzproxy'}, Ext.getBody());
+ this.proxy.removeCls(Ext.baseCSSPrefix + 'proxy-el');
+ }
+ this.proxy.show();
+ return this.proxy;
+ },
+
+ onStart: function(e) {
+ // returns the Ext.ResizeHandle that the user started dragging
+ this.activeResizeHandle = Ext.getCmp(this.getDragTarget().id);
+
+ // If we are using a proxy, ensure it is sized.
+ if (!this.dynamic) {
+ this.resize(this.startBox, {
+ horizontal: 'none',
+ vertical: 'none'
+ });
+ }
+ },
+
+ onDrag: function(e) {
+ // dynamic resizing, update dimensions during resize
+ if (this.dynamic || this.proxy) {
+ this.updateDimensions(e);
+ }
+ },
+
+ updateDimensions: function(e, atEnd) {
+ var me = this,
+ region = me.activeResizeHandle.region,
+ offset = me.getOffset(me.constrainTo ? 'dragTarget' : null),
+ box = me.startBox,
+ ratio,
+ widthAdjust = 0,
+ heightAdjust = 0,
+ adjustX = 0,
+ adjustY = 0,
+ dragRatio,
+ horizDir = offset[0] < 0 ? 'right' : 'left',
+ vertDir = offset[1] < 0 ? 'down' : 'up',
+ oppositeCorner,
+ axis; // 1 = x, 2 = y, 3 = x and y.
+
+ switch (region) {
+ case 'south':
+ heightAdjust = offset[1];
+ axis = 2;
+ break;
+ case 'north':
+ heightAdjust = -offset[1];
+ adjustY = -heightAdjust;
+ axis = 2;
+ break;
+ case 'east':
+ widthAdjust = offset[0];
+ axis = 1;
+ break;
+ case 'west':
+ widthAdjust = -offset[0];
+ adjustX = -widthAdjust;
+ axis = 1;
+ break;
+ case 'northeast':
+ heightAdjust = -offset[1];
+ adjustY = -heightAdjust;
+ widthAdjust = offset[0];
+ oppositeCorner = [box.x, box.y + box.height];
+ axis = 3;
+ break;
+ case 'southeast':
+ heightAdjust = offset[1];
+ widthAdjust = offset[0];
+ oppositeCorner = [box.x, box.y];
+ axis = 3;
+ break;
+ case 'southwest':
+ widthAdjust = -offset[0];
+ adjustX = -widthAdjust;
+ heightAdjust = offset[1];
+ oppositeCorner = [box.x + box.width, box.y];
+ axis = 3;
+ break;
+ case 'northwest':
+ heightAdjust = -offset[1];
+ adjustY = -heightAdjust;
+ widthAdjust = -offset[0];
+ adjustX = -widthAdjust;
+ oppositeCorner = [box.x + box.width, box.y + box.height];
+ axis = 3;
+ break;
+ }
+
+ var newBox = {
+ width: box.width + widthAdjust,
+ height: box.height + heightAdjust,
+ x: box.x + adjustX,
+ y: box.y + adjustY
+ };
+
+ // out of bounds
+ if (newBox.width < me.minWidth || newBox.width > me.maxWidth) {
+ newBox.width = Ext.Number.constrain(newBox.width, me.minWidth, me.maxWidth);
+ newBox.x = me.lastX || newBox.x;
+ } else {
+ me.lastX = newBox.x;
+ }
+ if (newBox.height < me.minHeight || newBox.height > me.maxHeight) {
+ newBox.height = Ext.Number.constrain(newBox.height, me.minHeight, me.maxHeight);
+ newBox.y = me.lastY || newBox.y;
+ } else {
+ me.lastY = newBox.y;
+ }
+
+ // If this is configured to preserve the aspect ratio, or they are dragging using the shift key
+ if (me.preserveRatio || e.shiftKey) {
+ var newHeight,
+ newWidth;
+
+ ratio = me.startBox.width / me.startBox.height;
+
+ // Calculate aspect ratio constrained values.
+ newHeight = Math.min(Math.max(me.minHeight, newBox.width / ratio), me.maxHeight);
+ newWidth = Math.min(Math.max(me.minWidth, newBox.height * ratio), me.maxWidth);
+
+ // X axis: width-only change, height must obey
+ if (axis == 1) {
+ newBox.height = newHeight;
+ }
+
+ // Y axis: height-only change, width must obey
+ else if (axis == 2) {
+ newBox.width = newWidth;
+ }
+
+ // Corner drag.
+ else {
+ // Drag ratio is the ratio of the mouse point from the opposite corner.
+ // Basically what edge we are dragging, a horizontal edge or a vertical edge.
+ dragRatio = Math.abs(oppositeCorner[0] - this.lastXY[0]) / Math.abs(oppositeCorner[1] - this.lastXY[1]);
+
+ // If drag ratio > aspect ratio then width is dominant and height must obey
+ if (dragRatio > ratio) {
+ newBox.height = newHeight;
+ } else {
+ newBox.width = newWidth;
+ }
+
+ // Handle dragging start coordinates
+ if (region == 'northeast') {
+ newBox.y = box.y - (newBox.height - box.height);
+ } else if (region == 'northwest') {
+ newBox.y = box.y - (newBox.height - box.height);
+ newBox.x = box.x - (newBox.width - box.width);
+ } else if (region == 'southwest') {
+ newBox.x = box.x - (newBox.width - box.width);
+ }
+ }
+ }
+
+ if (heightAdjust === 0) {
+ vertDir = 'none';
+ }
+ if (widthAdjust === 0) {
+ horizDir = 'none';
+ }
+ me.resize(newBox, {
+ horizontal: horizDir,
+ vertical: vertDir
+ }, atEnd);
+ },
+
+ getResizeTarget: function(atEnd) {
+ return atEnd ? this.target : this.getDynamicTarget();
+ },
+
+ resize: function(box, direction, atEnd) {
+ var target = this.getResizeTarget(atEnd);
+ if (target.isComponent) {
+ if (target.floating) {
+ target.setPagePosition(box.x, box.y);
+ }
+ target.setSize(box.width, box.height);
+ } else {
+ target.setBox(box);
+ // update the originalTarget if this was wrapped.
+ if (this.originalTarget) {
+ this.originalTarget.setBox(box);
+ }
+ }
+ },
+
+ onEnd: function(e) {
+ this.updateDimensions(e, true);
+ if (this.proxy) {
+ this.proxy.hide();
+ }
+ }
+});
+</pre></pre></body></html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff