This class implements a "virtual element" at a relative size and position + * within an existing element. It provides mouse events from a zone of an element of + * defined dimensions.
+ *The zone is defined using top, right, bottom,
+ * left, width and height options which specify
+ * the bounds of the zone in a similar manner to the CSS style properties of those names.
This class encapsulates an absolute area of the document bounded by a list of points.
+ * @constructor + * Create a new Polygon + * @param {Object} points An Array of[n,n] point specification Arrays, or
+ * an Array of Ext.lib.Points, or an HtmlElement, or an Ext.lib.Region.
+ */
+Ext.lib.Polygon = Ext.extend(Ext.lib.Region, {
+ constructor: function(points) {
+ var i, l, el;
+ if (l = points.length) {
+ if (points[0].x) {
+ for (i = 0; i < l; i++) {
+ points[i] = [ points[i].x, points[i].y ];
+ }
+ }
+ this.points = points;
+ } else {
+ if (el = Ext.get(points)) {
+ points = Ext.lib.Region.getRegion(el.dom);
+ }
+ if (points instanceof Ext.lib.Region) {
+ this.points = [
+ [points.left, points.top],
+ [points.right, points.top],
+ [points.right, points.bottom],
+ [points.left, points.bottom]
+ ];
+ }
+ }
+ },
+
+ /**
+ * Returns a new Polygon translated by the specified X and Y increments.
+ * @param xDelta {Number} The X translation increment.
+ * @param xDelta {Number} The Y translation increment.
+ * @return {Polygon} The resulting Polygon.
+ */
+ translate: function(xDelta, yDelta) {
+ var r = [], p = this.points, l = p.length, i;
+ for (i = 0; i < l; i++) {
+ r[i] = [ p[i][0] + xDelta, p[i][1] + yDelta ];
+ }
+ return new Ext.lib.Polygon(r);
+ },
+
+ /**
+ * Returns the area of this Polygon.
+ */
+ getArea: function() {
+ var p = this.points, l = p.length, area = 0, i, j = 0;
+ for (i = 0; i < l; i++) {
+ j++;
+ if (j == l) {
+ j = 0;
+ }
+ area += (p[i][0] + p[j][0]) * (p[i][1] - p[j][1]);
+ }
+ return area * 0.5;
+ },
+
+ /**
+ * Returns true if this Polygon contains the specified point. Thanks
+ * to http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html for the algorithm.
+ * @param pt {Point|Number} Either an Ext.lib.Point object, or the X coordinate to test.
+ * @param py {Number} Optional. If the first parameter was an X coordinate, this is the Y coordinate.
+ */
+ contains: function(pt, py) {
+ var f = (arguments.length == 1),
+ testX = f ? pt.x : pt,
+ testY = f ? pt.y : py,
+ p = this.points,
+ nvert = p.length,
+ j = nvert - 1,
+ i, j, c = false;
+ for (i = 0; i < nvert; j = i++) {
+ if ( ((p[i][1] > testY) != (p[j][1] > testY)) &&
+ (testX < (p[j][0]-p[i][0]) * (testY-p[i][1]) / (p[j][1]-p[i][1]) + p[i][0])) {
+ c = !c;
+ }
+ }
+ return c;
+ }
+});
+
+/**
+ * @class Ext.Resizable
+ * @extends Ext.util.Observable
+ * Applies virtual drag handles to an element to make it resizable.
+ *Here is the list of valid resize handles:
+ *+Value Description +------ ------------------- + 'n' north + 's' south + 'e' east + 'w' west + 'nw' northwest + 'sw' southwest + 'se' southeast + 'ne' northeast + 'all' all ++ *
Here's an example showing the creation of a typical Resizable:
+ *
+var resizer = new Ext.Resizable('element-id', {
+ handles: 'all',
+ minWidth: 200,
+ minHeight: 100,
+ maxWidth: 500,
+ maxHeight: 400,
+ pinned: true
+});
+resizer.on('resize', myHandler);
+To hide a particular handle, set its display to none in CSS, or through script:
+ * resizer.east.setDisplayed(false);
{@link #dynamic}==true). Defaults to 0.
+ */
+ heightIncrement : 0,
+ /**
+ * @cfg {Number} widthIncrement The increment to snap the width resize in pixels
+ * (only applies if {@link #dynamic}==true). Defaults to 0.
+ */
+ widthIncrement : 0,
+ /**
+ * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
+ */
+ minHeight : 5,
+ /**
+ * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
+ */
+ minWidth : 5,
+ /**
+ * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
+ */
+ maxHeight : 10000,
+ /**
+ * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
+ */
+ maxWidth : 10000,
+ /**
+ * @cfg {Number} minX The minimum x for the element (defaults to 0)
+ */
+ minX: 0,
+ /**
+ * @cfg {Number} minY The minimum x for the element (defaults to 0)
+ */
+ minY: 0,
+ /**
+ * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the
+ * user mouses over the resizable borders. This is only applied at config time. (defaults to false)
+ */
+ pinned : false,
+ /**
+ * @cfg {Boolean} preserveRatio True to preserve the original ratio between height
+ * and width during resize (defaults to false)
+ */
+ preserveRatio : false,
+ /**
+ * @cfg {Ext.lib.Region} resizeRegion Constrain the resize to a particular region
+ */
+
+
+ /**
+ * Perform a manual resize and fires the 'resize' event.
+ * @param {Number} width
+ * @param {Number} height
+ */
+ resizeTo : function(width, height){
+ this.el.setSize(width, height);
+ this.fireEvent('resize', this, width, height, null);
+ },
+
+ // private
+ startSizing : function(e, handle){
+ this.fireEvent('beforeresize', this, e);
+ if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler
+ e.stopEvent();
+
+ Ext.getDoc().on({
+ scope: this,
+ mousemove: this.onMouseMove,
+ mouseup: {
+ fn: this.onMouseUp,
+ single: true,
+ scope: this
+ }
+ });
+ Ext.getBody().addClass('ux-resizable-handle-' + handle.position);
+
+ this.resizing = true;
+ this.startBox = this.el.getBox();
+ this.startPoint = e.getXY();
+ this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
+ (this.startBox.y + this.startBox.height) - this.startPoint[1]];
+
+ if(this.constrainTo) {
+ var ct = Ext.get(this.constrainTo);
+ this.resizeRegion = ct.getRegion().adjust(
+ ct.getFrameWidth('t'),
+ ct.getFrameWidth('l'),
+ -ct.getFrameWidth('b'),
+ -ct.getFrameWidth('r')
+ );
+ }
+
+ this.proxy.setStyle('visibility', 'hidden'); // workaround display none
+ this.proxy.show();
+ this.proxy.setBox(this.startBox);
+ if(!this.dynamic){
+ this.proxy.setStyle('visibility', 'visible');
+ }
+ }
+ },
+
+ // private
+ onMouseDown : function(handle, e){
+ if(this.enabled && !this.activeHandle){
+ e.stopEvent();
+ this.activeHandle = handle;
+ this.startSizing(e, handle);
+ }
+ },
+
+ // private
+ onMouseUp : function(e){
+ Ext.getBody().removeClass('ux-resizable-handle-' + this.activeHandle.position)
+ .un('mousemove', this.onMouseMove, this);
+ var size = this.resizeElement();
+ this.resizing = false;
+ this.handleOut(this.activeHandle);
+ this.proxy.hide();
+ this.fireEvent('resize', this, size.width, size.height, e);
+ this.activeHandle = null;
+ },
+
+ // private
+ snap : function(value, inc, min){
+ if(!inc || !value){
+ return value;
+ }
+ var newValue = value;
+ var m = value % inc;
+ if(m > 0){
+ if(m > (inc/2)){
+ newValue = value + (inc-m);
+ }else{
+ newValue = value - m;
+ }
+ }
+ return Math.max(min, newValue);
+ },
+
+ /**
+ * Performs resizing of the associated Element. This method is called internally by this + * class, and should not be called by user code.
+ *If a Resizable is being used to resize an Element which encapsulates a more complex UI + * component such as a Panel, this method may be overridden by specifying an implementation + * as a config option to provide appropriate behaviour at the end of the resize operation on + * mouseup, for example resizing the Panel, and relaying the Panel's content.
+ *The new area to be resized to is available by examining the state of the {@link #proxy} + * Element. Example: +
+new Ext.Panel({
+ title: 'Resize me',
+ x: 100,
+ y: 100,
+ renderTo: Ext.getBody(),
+ floating: true,
+ frame: true,
+ width: 400,
+ height: 200,
+ listeners: {
+ render: function(p) {
+ new Ext.Resizable(p.getEl(), {
+ handles: 'all',
+ pinned: true,
+ transparent: true,
+ resizeElement: function() {
+ var box = this.proxy.getBox();
+ p.updateBox(box);
+ if (p.layout) {
+ p.doLayout();
+ }
+ return box;
+ }
+ });
+ }
+ }
+}).show();
+