You're Invited: Meet the Socket team at BSidesSF and RSAC - April 27 - May 1.RSVP →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

angular2-resizable

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular2-resizable - npm Package Compare versions

Comparing version

0.0.3
to
0.1.0

403

angular2-resizable.js
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("@angular/core"), require("rxjs/Subject"), require("rxjs/operator/map"), require("rxjs/operator/mergeMap"));
module.exports = factory(require("@angular/core"), require("rxjs/Subject"), require("rxjs/observable/merge"), require("rxjs/operator/map"), require("rxjs/operator/mergeMap"), require("rxjs/operator/takeUntil"), require("rxjs/operator/filter"), require("rxjs/operator/pairwise"), require("rxjs/operator/take"));
else if(typeof define === 'function' && define.amd)
define(["@angular/core", "rxjs/Subject", "rxjs/operator/map", "rxjs/operator/mergeMap"], factory);
define(["@angular/core", "rxjs/Subject", "rxjs/observable/merge", "rxjs/operator/map", "rxjs/operator/mergeMap", "rxjs/operator/takeUntil", "rxjs/operator/filter", "rxjs/operator/pairwise", "rxjs/operator/take"], factory);
else if(typeof exports === 'object')
exports["angular2Resizable"] = factory(require("@angular/core"), require("rxjs/Subject"), require("rxjs/operator/map"), require("rxjs/operator/mergeMap"));
exports["angular2Resizable"] = factory(require("@angular/core"), require("rxjs/Subject"), require("rxjs/observable/merge"), require("rxjs/operator/map"), require("rxjs/operator/mergeMap"), require("rxjs/operator/takeUntil"), require("rxjs/operator/filter"), require("rxjs/operator/pairwise"), require("rxjs/operator/take"));
else
root["angular2Resizable"] = factory(root["ng"]["core"], root["rx"]["Subject"], root["rx"]["Observable"], root["rx"]["Observable"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__) {
root["angular2Resizable"] = factory(root["ng"]["core"], root["rx"]["Subject"], root["rx"]["Observable"]["merge"], root["rx"]["Observable"], root["rx"]["Observable"], root["rx"]["Observable"], root["rx"]["Observable"], root["rx"]["Observable"], root["rx"]["Observable"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_7__, __WEBPACK_EXTERNAL_MODULE_8__, __WEBPACK_EXTERNAL_MODULE_9__, __WEBPACK_EXTERNAL_MODULE_10__) {
return /******/ (function(modules) { // webpackBootstrap

@@ -85,4 +85,12 @@ /******/ // The module cache

var Subject_1 = __webpack_require__(3);
__webpack_require__(4);
var merge_1 = __webpack_require__(4);
__webpack_require__(5);
__webpack_require__(6);
__webpack_require__(7);
__webpack_require__(8);
__webpack_require__(9);
__webpack_require__(10);
/**
* @private
*/
var isNumberCloseTo = function (value1, value2, precision) {

@@ -93,2 +101,5 @@ if (precision === void 0) { precision = 3; }

};
/**
* @private
*/
var getNewBoundingRectangle = function (startingRect, edges, mouseX, mouseY) {

@@ -117,16 +128,19 @@ var newBoundingRect = {

};
/**
* @private
*/
var getResizeEdges = function (_a) {
var mouseX = _a.mouseX, mouseY = _a.mouseY, elm = _a.elm;
var mouseX = _a.mouseX, mouseY = _a.mouseY, elm = _a.elm, allowedEdges = _a.allowedEdges;
var elmPosition = elm.nativeElement.getBoundingClientRect();
var edges = {};
if (isNumberCloseTo(mouseX, elmPosition.left)) {
if (allowedEdges.left && isNumberCloseTo(mouseX, elmPosition.left)) {
edges.left = true;
}
if (isNumberCloseTo(mouseX, elmPosition.right)) {
if (allowedEdges.right && isNumberCloseTo(mouseX, elmPosition.right)) {
edges.right = true;
}
if (isNumberCloseTo(mouseY, elmPosition.top)) {
if (allowedEdges.top && isNumberCloseTo(mouseY, elmPosition.top)) {
edges.top = true;
}
if (isNumberCloseTo(mouseY, elmPosition.bottom)) {
if (allowedEdges.bottom && isNumberCloseTo(mouseY, elmPosition.bottom)) {
edges.bottom = true;

@@ -136,2 +150,5 @@ }

};
/**
* @private
*/
var getResizeCursor = function (edges) {

@@ -160,13 +177,139 @@ if (edges.left && edges.top) {

};
/**
* @private
*/
var getEdgesDiff = function (_a) {
var edges = _a.edges, initialRectangle = _a.initialRectangle, newRectangle = _a.newRectangle;
var edgesDiff = {};
Object.keys(edges).forEach(function (edge) {
edgesDiff[edge] = newRectangle[edge] - initialRectangle[edge];
});
return edgesDiff;
};
/**
* An element placed inside a `mwl-resizable` directive to be used as a drag and resize handle
*
* For example
*
* ```
* <div mwl-resizable>
* <div mwl-resize-handle [resizeEdges]="{bottom: true, right: true}"></div>
* </div>
* ```
*/
var ResizeHandle = (function () {
function ResizeHandle() {
/**
* The `Edges` object that contains the edges of the parent element that dragging the handle will trigger a resize on
*/
this.resizeEdges = {};
}
/**
* @private
*/
ResizeHandle.prototype.onMouseup = function (mouseX, mouseY) {
this.resizable.mouseup.next({ mouseX: mouseX, mouseY: mouseY, edges: this.resizeEdges });
};
/**
* @private
*/
ResizeHandle.prototype.onMousedown = function (mouseX, mouseY) {
this.resizable.mousedown.next({ mouseX: mouseX, mouseY: mouseY, edges: this.resizeEdges });
};
/**
* @private
*/
ResizeHandle.prototype.onMousemove = function (mouseX, mouseY) {
this.resizable.mousemove.next({ mouseX: mouseX, mouseY: mouseY, edges: this.resizeEdges });
};
__decorate([
core_1.Input(),
__metadata('design:type', Object)
], ResizeHandle.prototype, "resizeEdges", void 0);
__decorate([
// set by the parent mwl-resizable directive
core_1.HostListener('mouseup', ['$event.clientX', '$event.clientY']),
__metadata('design:type', Function),
__metadata('design:paramtypes', [Number, Number]),
__metadata('design:returntype', void 0)
], ResizeHandle.prototype, "onMouseup", null);
__decorate([
core_1.HostListener('mousedown', ['$event.clientX', '$event.clientY']),
__metadata('design:type', Function),
__metadata('design:paramtypes', [Number, Number]),
__metadata('design:returntype', void 0)
], ResizeHandle.prototype, "onMousedown", null);
__decorate([
core_1.HostListener('mousemove', ['$event.clientX', '$event.clientY']),
__metadata('design:type', Function),
__metadata('design:paramtypes', [Number, Number]),
__metadata('design:returntype', void 0)
], ResizeHandle.prototype, "onMousemove", null);
ResizeHandle = __decorate([
core_1.Directive({
selector: '[mwl-resize-handle]'
}),
__metadata('design:paramtypes', [])
], ResizeHandle);
return ResizeHandle;
}());
exports.ResizeHandle = ResizeHandle;
/**
* Place this on an element to make it resizable
*
* For example
*
* ```
* <div mwl-resizable [resizeEdges]="{bottom: true, right: true, top: true, left: true}" [enableResizeStyling]="true"></div>
* ```
*/
var Resizable = (function () {
/**
* @private
*/
function Resizable(renderer, elm) {
this.renderer = renderer;
this.elm = elm;
/**
* The edges that an element can be resized from. Pass an object like `{top: true, bottom: false}`. By default no edges can be resized.
*/
this.resizeEdges = {};
/**
* Set to `true` to enable a temporary resizing effect of the element in between the `onResizeStart` and `onResizeEnd` events.
*/
this.enableResizeStyling = false;
/**
* A snap grid that resize events will be locked to.
*
* e.g. to only allow the element to be resized every 10px set it to `{left: 10, right: 10}`
*/
this.resizeSnapGrid = {};
/**
* Called when the mouse is pressed and a resize event is about to begin. `$event` is a `ResizeEvent` object.
*/
this.onResizeStart = new core_1.EventEmitter(false);
/**
* Called as the mouse is dragged after a resize event has begun. `$event` is a `ResizeEvent` object.
*/
this.onResize = new core_1.EventEmitter(false);
/**
* Called after the mouse is released after a resize event. `$event` is a `ResizeEvent` object.
*/
this.onResizeEnd = new core_1.EventEmitter(false);
/**
* @private
*/
this.mouseup = new Subject_1.Subject();
/**
* @private
*/
this.mousedown = new Subject_1.Subject();
/**
* @private
*/
this.mousemove = new Subject_1.Subject();
}
/**
* @private
*/
Resizable.prototype.ngOnInit = function () {

@@ -176,6 +319,8 @@ var _this = this;

var resetElementStyles = function () {
for (var key in currentResize.originalStyles) {
var value = currentResize.originalStyles[key];
if (typeof value !== 'undefined') {
_this.renderer.setElementStyle(_this.elm.nativeElement, key, currentResize.originalStyles[key]);
if (_this.enableResizeStyling) {
for (var key in currentResize.originalStyles) {
var value = currentResize.originalStyles[key];
if (typeof value !== 'undefined') {
_this.renderer.setElementStyle(_this.elm.nativeElement, key, currentResize.originalStyles[key]);
}
}

@@ -186,3 +331,3 @@ }

var mouseX = _a.mouseX, mouseY = _a.mouseY;
var resizeEdges = getResizeEdges({ mouseX: mouseX, mouseY: mouseY, elm: _this.elm });
var resizeEdges = getResizeEdges({ mouseX: mouseX, mouseY: mouseY, elm: _this.elm, allowedEdges: _this.resizeEdges });
var cursor = getResizeCursor(resizeEdges);

@@ -192,3 +337,3 @@ _this.renderer.setElementStyle(_this.elm.nativeElement, 'cursor', cursor);

var mousedrag = this.mousedown.flatMap(function (startCoords) {
return _this.mousemove.map(function (moveCoords) {
var getDiff = function (moveCoords) {
return {

@@ -198,44 +343,104 @@ mouseX: moveCoords.mouseX - startCoords.mouseX,

};
};
var getSnapGrid = function () {
var snapGrid = { x: 1, y: 1 };
if (currentResize) {
if (_this.resizeSnapGrid.left && currentResize.edges.left) {
snapGrid.x = +_this.resizeSnapGrid.left;
}
else if (_this.resizeSnapGrid.right && currentResize.edges.right) {
snapGrid.x = +_this.resizeSnapGrid.right;
}
if (_this.resizeSnapGrid.top && currentResize.edges.top) {
snapGrid.y = +_this.resizeSnapGrid.top;
}
else if (_this.resizeSnapGrid.bottom && currentResize.edges.bottom) {
snapGrid.y = +_this.resizeSnapGrid.bottom;
}
}
return snapGrid;
};
var getGrid = function (coords, snapGrid) {
return {
x: Math.ceil(coords.mouseX / snapGrid.x),
y: Math.ceil(coords.mouseY / snapGrid.y)
};
};
return merge_1.merge(_this.mousemove.take(1).map(function (coords) { return [, coords]; }), _this.mousemove.pairwise()).map(function (_a) {
var previousCoords = _a[0], newCoords = _a[1];
return [previousCoords ? getDiff(previousCoords) : previousCoords, getDiff(newCoords)];
}).filter(function (_a) {
var previousCoords = _a[0], newCoords = _a[1];
if (!previousCoords) {
return true;
}
var snapGrid = getSnapGrid();
var previousGrid = getGrid(previousCoords, snapGrid);
var newGrid = getGrid(newCoords, snapGrid);
return (previousGrid.x !== newGrid.x || previousGrid.y !== newGrid.y);
}).map(function (_a) {
var newCoords = _a[1];
var snapGrid = getSnapGrid();
return {
mouseX: Math.round(newCoords.mouseX / snapGrid.x) * snapGrid.x,
mouseY: Math.round(newCoords.mouseY / snapGrid.y) * snapGrid.y
};
}).takeUntil(merge_1.merge(_this.mouseup, _this.mousedown));
}).filter(function () { return !!currentResize; });
mousedrag.map(function (_a) {
var mouseX = _a.mouseX, mouseY = _a.mouseY;
return getNewBoundingRectangle(currentResize.startingRect, currentResize.edges, mouseX, mouseY);
}).filter(function (newBoundingRect) {
return newBoundingRect.height > 0 && newBoundingRect.width > 0;
}).filter(function (newBoundingRect) {
return _this.validateResize ? _this.validateResize({
rectangle: newBoundingRect,
edges: getEdgesDiff({
edges: currentResize.edges,
initialRectangle: currentResize.startingRect,
newRectangle: newBoundingRect
})
}) : true;
}).subscribe(function (newBoundingRect) {
if (_this.enableResizeStyling) {
_this.renderer.setElementStyle(_this.elm.nativeElement, 'height', newBoundingRect.height + "px");
_this.renderer.setElementStyle(_this.elm.nativeElement, 'width', newBoundingRect.width + "px");
_this.renderer.setElementStyle(_this.elm.nativeElement, 'top', newBoundingRect.top + "px");
_this.renderer.setElementStyle(_this.elm.nativeElement, 'left', newBoundingRect.left + "px");
}
_this.onResize.emit({
edges: getEdgesDiff({
edges: currentResize.edges,
initialRectangle: currentResize.startingRect,
newRectangle: newBoundingRect
}),
rectangle: newBoundingRect
});
currentResize.currentRect = newBoundingRect;
});
mousedrag.subscribe(function (_a) {
var mouseX = _a.mouseX, mouseY = _a.mouseY;
this.mousedown.map(function (_a) {
var mouseX = _a.mouseX, mouseY = _a.mouseY, edges = _a.edges;
return edges || getResizeEdges({ mouseX: mouseX, mouseY: mouseY, elm: _this.elm, allowedEdges: _this.resizeEdges });
}).filter(function (edges) {
return Object.keys(edges).length > 0;
}).subscribe(function (edges) {
if (currentResize) {
var newBoundingRect = getNewBoundingRectangle(currentResize.startingRect, currentResize.edges, mouseX, mouseY);
if (newBoundingRect.height > 0 && newBoundingRect.width > 0) {
_this.renderer.setElementStyle(_this.elm.nativeElement, 'height', newBoundingRect.height + "px");
_this.renderer.setElementStyle(_this.elm.nativeElement, 'width', newBoundingRect.width + "px");
_this.renderer.setElementStyle(_this.elm.nativeElement, 'top', newBoundingRect.top + "px");
_this.renderer.setElementStyle(_this.elm.nativeElement, 'left', newBoundingRect.left + "px");
}
_this.onResize.emit({
edges: currentResize.edges,
rectangle: newBoundingRect
});
resetElementStyles();
}
});
this.mousedown.subscribe(function (_a) {
var mouseX = _a.mouseX, mouseY = _a.mouseY;
var edges = getResizeEdges({ mouseX: mouseX, mouseY: mouseY, elm: _this.elm });
if (Object.keys(edges).length > 0) {
if (currentResize) {
resetElementStyles();
var startingRect = _this.elm.nativeElement.getBoundingClientRect();
currentResize = {
edges: edges,
startingRect: startingRect,
currentRect: startingRect,
originalStyles: {
position: _this.elm.nativeElement.style.position,
left: _this.elm.nativeElement.style.left,
top: _this.elm.nativeElement.style.top,
width: startingRect.width + "px",
height: startingRect.height + "px",
'user-drag': _this.elm.nativeElement.style['user-drag'],
'-webkit-user-drag': _this.elm.nativeElement.style['-webkit-user-drag']
}
var startingRect = _this.elm.nativeElement.getBoundingClientRect();
currentResize = {
startCoords: {
mouseX: mouseX,
mouseY: mouseY
},
edges: edges,
startingRect: startingRect,
originalStyles: {
position: _this.elm.nativeElement.style.position,
left: _this.elm.nativeElement.style.left,
top: _this.elm.nativeElement.style.top,
width: startingRect.width + "px",
height: startingRect.height + "px",
'user-drag': _this.elm.nativeElement.style['user-drag']
}
};
};
if (_this.enableResizeStyling) {
_this.renderer.setElementStyle(_this.elm.nativeElement, 'position', 'fixed');

@@ -245,14 +450,18 @@ _this.renderer.setElementStyle(_this.elm.nativeElement, 'left', currentResize.startingRect.left + "px");

_this.renderer.setElementStyle(_this.elm.nativeElement, 'user-drag', 'none');
_this.onResizeStart.emit({
edges: edges,
rectangle: startingRect
});
_this.renderer.setElementStyle(_this.elm.nativeElement, '-webkit-user-drag', 'none');
}
_this.onResizeStart.emit({
edges: getEdgesDiff({ edges: edges, initialRectangle: startingRect, newRectangle: startingRect }),
rectangle: getNewBoundingRectangle(startingRect, {}, 0, 0)
});
});
this.mouseup.subscribe(function (_a) {
var mouseX = _a.mouseX, mouseY = _a.mouseY;
this.mouseup.subscribe(function () {
if (currentResize) {
_this.onResizeEnd.emit({
edges: currentResize.edges,
rectangle: getNewBoundingRectangle(currentResize.startingRect, currentResize.edges, mouseX - currentResize.startCoords.mouseX, mouseY - currentResize.startCoords.mouseY)
edges: getEdgesDiff({
edges: currentResize.edges,
initialRectangle: currentResize.startingRect,
newRectangle: currentResize.currentRect
}),
rectangle: currentResize.currentRect
});

@@ -264,8 +473,26 @@ resetElementStyles();

};
/**
* @private
*/
Resizable.prototype.ngAfterViewInit = function () {
var _this = this;
this.resizeHandles.forEach(function (handle) {
handle.resizable = _this;
});
};
/**
* @private
*/
Resizable.prototype.onMouseup = function (mouseX, mouseY) {
this.mouseup.next({ mouseX: mouseX, mouseY: mouseY });
};
/**
* @private
*/
Resizable.prototype.onMousedown = function (mouseX, mouseY) {
this.mousedown.next({ mouseX: mouseX, mouseY: mouseY });
};
/**
* @private
*/
Resizable.prototype.onMousemove = function (mouseX, mouseY) {

@@ -275,2 +502,18 @@ this.mousemove.next({ mouseX: mouseX, mouseY: mouseY });

__decorate([
core_1.Input(),
__metadata('design:type', Function)
], Resizable.prototype, "validateResize", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Object)
], Resizable.prototype, "resizeEdges", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Boolean)
], Resizable.prototype, "enableResizeStyling", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Object)
], Resizable.prototype, "resizeSnapGrid", void 0);
__decorate([
core_1.Output(),

@@ -288,2 +531,6 @@ __metadata('design:type', core_1.EventEmitter)

__decorate([
core_1.ContentChildren(ResizeHandle),
__metadata('design:type', core_1.QueryList)
], Resizable.prototype, "resizeHandles", void 0);
__decorate([
core_1.HostListener('document:mouseup', ['$event.clientX', '$event.clientY']),

@@ -308,3 +555,3 @@ __metadata('design:type', Function),

core_1.Directive({
selector: '[mwl-resizeable]'
selector: '[mwl-resizable]'
}),

@@ -342,2 +589,32 @@ __metadata('design:paramtypes', [core_1.Renderer, core_1.ElementRef])

/***/ },
/* 6 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_6__;
/***/ },
/* 7 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_7__;
/***/ },
/* 8 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_8__;
/***/ },
/* 9 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_9__;
/***/ },
/* 10 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_10__;
/***/ }

@@ -344,0 +621,0 @@ /******/ ])

37

CHANGELOG.md

@@ -5,2 +5,39 @@ # Change Log

<a name="0.1.0"></a>
# [0.1.0](https://github.com/mattlewis92/angular2-resizable/compare/v0.0.3...v0.1.0) (2016-06-26)
### Bug Fixes
* **mousedrag:** cancel the previous mousedrag observable when starting a new drag ([149c1a4](https://github.com/mattlewis92/angular2-resizable/commit/149c1a4)), closes [#9](https://github.com/mattlewis92/angular2-resizable/issues/9)
* **onResizeEnd:** call with co-ordinates of last valid resize rather than where the mouse up event w ([eb314fd](https://github.com/mattlewis92/angular2-resizable/commit/eb314fd))
* **onResizeStart:** ensure the starting rectangle is a POJO rather than a bounding rectangle ([81fe0b4](https://github.com/mattlewis92/angular2-resizable/commit/81fe0b4))
* cancel mousedrag event when either a mouseup or mousedown event fires ([c76be59](https://github.com/mattlewis92/angular2-resizable/commit/c76be59))
* disable dragging effects on resizable elements on webkit browsers ([59078e2](https://github.com/mattlewis92/angular2-resizable/commit/59078e2))
* renamed directive selector from mwl-resizeable to mwl-resizable ([c60b3f5](https://github.com/mattlewis92/angular2-resizable/commit/c60b3f5))
### Features
* **disableResize:** support completely disabling resizing an element ([9f9c54a](https://github.com/mattlewis92/angular2-resizable/commit/9f9c54a)), closes [#13](https://github.com/mattlewis92/angular2-resizable/issues/13)
* expose the amount each edge was resized on resize events ([d664038](https://github.com/mattlewis92/angular2-resizable/commit/d664038)), closes [#11](https://github.com/mattlewis92/angular2-resizable/issues/11)
* **enableResizeStyling:** make temporary resizing of the element opt-in by default so users can con ([4c59b05](https://github.com/mattlewis92/angular2-resizable/commit/4c59b05)), closes [#5](https://github.com/mattlewis92/angular2-resizable/issues/5)
* **resizeEdges:** allow the resize edges to be customised ([60c2e08](https://github.com/mattlewis92/angular2-resizable/commit/60c2e08)), closes [#8](https://github.com/mattlewis92/angular2-resizable/issues/8)
* **resizeHandles:** add support for nesting resize handles inside the element ([1af705a](https://github.com/mattlewis92/angular2-resizable/commit/1af705a)), closes [#10](https://github.com/mattlewis92/angular2-resizable/issues/10)
* **resizeSnapGrid:** allow resizing to fit to a snap grid ([74424ba](https://github.com/mattlewis92/angular2-resizable/commit/74424ba)), closes [#3](https://github.com/mattlewis92/angular2-resizable/issues/3)
* **validate:** provide a way for resize events to be validated ([4da938d](https://github.com/mattlewis92/angular2-resizable/commit/4da938d)), closes [#12](https://github.com/mattlewis92/angular2-resizable/issues/12)
### BREAKING CHANGES
* enableResizeStyling: the element will no longer have its styles changed by default when dragging and
resizing. You can now re-enable it by setting `[enableResizeStyling]="true"` on the element.
* the `$event.edges` object values now contain numbers instead of booleans
* - rename the directive from mwl-resizeable to mwl-resizable
* resizeEdges: by default the element is no longer resizable.
You must specify `[resizeEdges]={top: true, bottom: true, left: true, right: true}` to get the old behaviour back
<a name="0.0.3"></a>

@@ -7,0 +44,0 @@ ## [0.0.3](https://github.com/mattlewis92/angular2-resizable/compare/v0.0.2...v0.0.3) (2016-06-13)

22

package.json
{
"name": "angular2-resizable",
"version": "0.0.3",
"version": "0.1.0",
"description": "An angular2 directive that allows an element to be dragged and resized",

@@ -18,3 +18,3 @@ "main": "./angular2-resizable.js",

"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
"typedoc": "typedoc angular2-resizable.ts src/*.ts",
"typedoc": "typedoc --options typedoc.json angular2-resizable.ts src/*.ts",
"gh-pages": "git checkout gh-pages && git merge master && npm run build:demo && npm run typedoc && git add . && git commit -m 'chore: build demo and docs' && git push && git checkout master",

@@ -39,7 +39,7 @@ "prerelease": "npm test",

"devDependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/common": "2.0.0-rc.3",
"@angular/compiler": "2.0.0-rc.3",
"@angular/core": "2.0.0-rc.3",
"@angular/platform-browser": "2.0.0-rc.3",
"@angular/platform-browser-dynamic": "2.0.0-rc.3",
"commitizen": "~2.8.1",

@@ -62,11 +62,11 @@ "concurrently": "~2.1.0",

"phantomjs-prebuilt": "~2.1.7",
"reflect-metadata": "0.1.2",
"reflect-metadata": "~0.1.3",
"rxjs": "5.0.0-beta.6",
"standard-version": "~2.3.0",
"ts-loader": "~0.8.2",
"tslint": "~3.11.0",
"tslint": "~3.12.1",
"tslint-loader": "~2.1.4",
"typedoc": "~0.4.1",
"typescript": "~1.8.10",
"typings": "~1.0.4",
"typings": "~1.3.0",
"validate-commit-msg": "~2.6.1",

@@ -78,3 +78,3 @@ "webpack": "~1.13.0",

"peerDependencies": {
"@angular/core": "2.0.0-rc.1"
"@angular/core": "2.0.0-rc.3"
},

@@ -81,0 +81,0 @@ "files": [

2

README.md

@@ -41,3 +41,3 @@ # angular2 resizable

// you should add some styles to the element. See the demo folder for a more fleshed out example
template: '<div mwl-resizeable (onResizeEnd)="onResizeEnd($event)"></div>'
template: '<div mwl-resizable (onResizeEnd)="onResizeEnd($event)"></div>'
})

@@ -44,0 +44,0 @@ export class DemoApp {

133

src/resizable.directive.d.ts

@@ -1,10 +0,21 @@

import { Renderer, ElementRef, OnInit, EventEmitter } from '@angular/core';
import { Renderer, ElementRef, OnInit, AfterViewInit, EventEmitter } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/takeUntil';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/pairwise';
import 'rxjs/add/operator/take';
/**
* The edges that the resize event were triggered on
*/
export interface Edges {
top?: boolean;
bottom?: boolean;
left?: boolean;
right?: boolean;
top?: boolean | number;
bottom?: boolean | number;
left?: boolean | number;
right?: boolean | number;
}
/**
* The bounding rectangle of the resized element
*/
export interface BoundingRectangle {

@@ -18,2 +29,5 @@ top: number;

}
/**
* The `$event` object that is passed to the resize events
*/
export interface ResizeEvent {

@@ -23,16 +37,117 @@ rectangle: BoundingRectangle;

}
export declare class Resizable implements OnInit {
/**
* An element placed inside a `mwl-resizable` directive to be used as a drag and resize handle
*
* For example
*
* ```
* <div mwl-resizable>
* <div mwl-resize-handle [resizeEdges]="{bottom: true, right: true}"></div>
* </div>
* ```
*/
export declare class ResizeHandle {
/**
* The `Edges` object that contains the edges of the parent element that dragging the handle will trigger a resize on
*/
resizeEdges: Edges;
/**
* @private
*/
resizable: Resizable;
/**
* @private
*/
private onMouseup(mouseX, mouseY);
/**
* @private
*/
private onMousedown(mouseX, mouseY);
/**
* @private
*/
private onMousemove(mouseX, mouseY);
}
/**
* Place this on an element to make it resizable
*
* For example
*
* ```
* <div mwl-resizable [resizeEdges]="{bottom: true, right: true, top: true, left: true}" [enableResizeStyling]="true"></div>
* ```
*/
export declare class Resizable implements OnInit, AfterViewInit {
private renderer;
private elm;
/**
* A function that will be called before each resize event. Return `true` to allow the resize event to propagate or `false` to cancel it
*/
validateResize: Function;
/**
* The edges that an element can be resized from. Pass an object like `{top: true, bottom: false}`. By default no edges can be resized.
*/
resizeEdges: Edges;
/**
* Set to `true` to enable a temporary resizing effect of the element in between the `onResizeStart` and `onResizeEnd` events.
*/
enableResizeStyling: boolean;
/**
* A snap grid that resize events will be locked to.
*
* e.g. to only allow the element to be resized every 10px set it to `{left: 10, right: 10}`
*/
resizeSnapGrid: Edges;
/**
* Called when the mouse is pressed and a resize event is about to begin. `$event` is a `ResizeEvent` object.
*/
onResizeStart: EventEmitter<Object>;
/**
* Called as the mouse is dragged after a resize event has begun. `$event` is a `ResizeEvent` object.
*/
onResize: EventEmitter<Object>;
/**
* Called after the mouse is released after a resize event. `$event` is a `ResizeEvent` object.
*/
onResizeEnd: EventEmitter<Object>;
private mouseup;
private mousedown;
private mousemove;
/**
* @private
*/
mouseup: Subject<any>;
/**
* @private
*/
mousedown: Subject<any>;
/**
* @private
*/
mousemove: Subject<any>;
/**
* @private
*/
private resizeHandles;
/**
* @private
*/
constructor(renderer: Renderer, elm: ElementRef);
/**
* @private
*/
ngOnInit(): void;
/**
* @private
*/
ngAfterViewInit(): void;
/**
* @private
*/
private onMouseup(mouseX, mouseY);
/**
* @private
*/
private onMousedown(mouseX, mouseY);
/**
* @private
*/
private onMousemove(mouseX, mouseY);
}
angular2-resizable.js.map

Sorry, the diff of this file is not supported yet