Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Resize from edges #82

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Resize from edges #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b18bdee
Enable resize from any edge
andreybutenko Jun 25, 2018
40204fd
Add more descriptive names for resize feature
andreybutenko Jun 25, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions dist/ventus.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,22 @@
height: 15px;
width: 10px;
}
.wm-window.mouse-edge.mouse-edge-top,
.wm-window.mouse-edge.mouse-edge-bottom {
cursor: ns-resize;
}
.wm-window.mouse-edge.mouse-edge-left,
.wm-window.mouse-edge.mouse-edge-right {
cursor: ew-resize;
}
.wm-window.mouse-edge.mouse-edge-top-left,
.wm-window.mouse-edge.mouse-edge-bottom-right {
cursor: nwse-resize;
}
.wm-window.mouse-edge.mouse-edge-top-right,
.wm-window.mouse-edge.mouse-edge-bottom-left {
cursor: nesw-resize;
}
.wm-window.disabled * {
-webkit-user-select: none;
-moz-user-select: none;
Expand Down
160 changes: 123 additions & 37 deletions dist/ventus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
/*!
* Ventus 0.3
* Copyright © 2015 Ramón Lamana
* http://www.rlamana.com
*/
(function (root, factory) {
if (typeof define === 'function' && define.amd) { // AMD.
define(['$'], factory);
} else { // Browser globals
root.Ventus = factory(root.$);
}
}(this, function (jQuery) {

/*!
* Ventus 0.3
* Copyright © 2015 Ramón Lamana
* http://www.rlamana.com
*/
(function (root, factory) {
if (typeof define === 'function' && define.amd) { // AMD.
define(['$'], factory);
} else { // Browser globals
root.Ventus = factory(root.$);
}
}(this, function (jQuery) {
var requirejs, require, define;
(function (undef) {
var defined = {}, waiting = {}, config = {}, defining = {}, aps = [].slice, main, req;
Expand Down Expand Up @@ -1199,6 +1199,7 @@ define('ventus/wm/window', [
_restore: null,
_moving: null,
_resizing: null,
_mouseEdgePosition: null,
slots: {
move: function (e) {
var event = convertMoveEvent(e);
Expand All @@ -1224,14 +1225,17 @@ define('ventus/wm/window', [
if (this.widget) {
this.slots.move.call(this, e);
}
if (this.enabled && this.resizable && !this.maximized && this.mouseOnWindowEdge) {
this.startResize(e);
}
},
'.wm-content click': function (e) {
if (this.enabled) {
this.signals.emit('click', this, e);
}
},
'.wm-window-title mousedown': function (e) {
if (!this.maximized) {
if (!this.maximized && !this.mouseOnWindowEdge) {
this.slots.move.call(this, e);
}
},
Expand Down Expand Up @@ -1267,17 +1271,55 @@ define('ventus/wm/window', [
e.preventDefault();
},
'button.wm-resize mousedown': function (e) {
var event = convertMoveEvent(e);
if (!this.enabled || !this.resizable) {
if (this.enabled && this.resizable) {
this._mouseEdgePosition = {
top: false,
left: false,
bottom: true,
right: true
};
this.startResize(e);
}
},
'mousemove': function (e) {
var EdgeSensitivities = {
TOP: 5,
LEFT: 15,
BOTTOM: 15,
RIGHT: 15
};
var TITLE_HEIGHT = 36;
if (!this.enabled || !this.resizable || this._resizing) {
return;
}
this._resizing = {
width: this.width - event.pageX,
height: this.height - event.pageY
var event = convertMoveEvent(e);
this._mouseEdgePosition = {
top: !e.srcElement.classList.contains('wm-content') && event.offsetY < EdgeSensitivities.TOP,
left: event.offsetX < EdgeSensitivities.LEFT,
bottom: this.height - TITLE_HEIGHT - event.offsetY < EdgeSensitivities.BOTTOM,
right: this.width - event.offsetX < EdgeSensitivities.RIGHT
};
this._space[0].classList.add('no-events');
this.el.addClass('resizing');
e.preventDefault();
this.el[0].classList.remove('mouse-edge', 'mouse-edge-top', 'mouse-edge-top-left', 'mouse-edge-top-right', 'mouse-edge-left', 'mouse-edge-right', 'mouse-edge-bottom', 'mouse-edge-bottom-left', 'mouse-edge-bottom-right');
if (this.mouseOnWindowEdge) {
var className = 'mouse-edge';
if (this._mouseEdgePosition.top) {
className += '-top';
} else if (this._mouseEdgePosition.bottom) {
className += '-bottom';
}
if (this._mouseEdgePosition.left) {
className += '-left';
} else if (this._mouseEdgePosition.right) {
className += '-right';
}
this.el[0].classList.add('mouse-edge', className);
}
},
'mouseleave': function () {
if (!this._resizing) {
this._mouseEdgePosition = null;
this.el[0].classList.remove('mouse-edge', 'mouse-edge-top', 'mouse-edge-top-left', 'mouse-edge-top-right', 'mouse-edge-left', 'mouse-edge-right', 'mouse-edge-bottom', 'mouse-edge-bottom-left', 'mouse-edge-bottom-right');
}
}
},
space: {
Expand Down Expand Up @@ -1308,7 +1350,29 @@ define('ventus/wm/window', [
}
}
if (this._resizing) {
this.resize(event.pageX + this._resizing.width, event.pageY + this._resizing.height);
var newWidth;
if (!this.resizingHorizontally) {
newWidth = this.width;
} else if (this._mouseEdgePosition.left) {
newWidth = this._resizing.pageX - event.pageX + this._resizing.width;
} else {
newWidth = event.pageX - this._resizing.pageX + this._resizing.width;
}
var newHeight;
if (!this.resizingVertically) {
newHeight = this.height;
} else if (this._mouseEdgePosition.top) {
newHeight = this._resizing.pageY - event.pageY + this._resizing.height;
} else {
newHeight = event.pageY - this._resizing.pageY + this._resizing.height;
}
this.resize(newWidth, newHeight);
if (this._mouseEdgePosition.left) {
this.move(event.pageX, this.y);
}
if (this._mouseEdgePosition.top) {
this.move(this.x, event.pageY);
}
}
},
'mouseup': function () {
Expand All @@ -1328,6 +1392,15 @@ define('ventus/wm/window', [
this._restore = null;
this._resizing = null;
},
get mouseOnWindowEdge() {
return this._mouseEdgePosition && (this._mouseEdgePosition.top || this._mouseEdgePosition.left || this._mouseEdgePosition.bottom || this._mouseEdgePosition.right);
},
get resizingHorizontally() {
return this._mouseEdgePosition && (this._mouseEdgePosition.left || this._mouseEdgePosition.right);
},
get resizingVertically() {
return this._mouseEdgePosition && (this._mouseEdgePosition.top || this._mouseEdgePosition.bottom);
},
set space(el) {
if (el && !el.listen) {
console.error('The given space element is not a valid View');
Expand Down Expand Up @@ -1477,6 +1550,18 @@ define('ventus/wm/window', [
get z() {
return parseInt(this.el.css('z-index'), 10);
},
startResize: function (e) {
var event = convertMoveEvent(e);
this._resizing = {
pageX: event.pageX,
pageY: event.pageY,
width: this.width,
height: this.height
};
this._space[0].classList.add('no-events');
this.el.addClass('resizing');
e.preventDefault();
},
open: function () {
var promise = new Promise();
this.signals.emit('open', this);
Expand Down Expand Up @@ -2576,17 +2661,18 @@ define('src/main', [
'handlebars',
'ventus'
], function () {
});

// Register in the values from the outer closure for common dependencies
// as local almond modules
define('$', function () {
return jQuery;
});

define('underscore', function () {
return _;
});

return require('ventus');
}));
});

// Register in the values from the outer closure for common dependencies
// as local almond modules
define('$', function () {
return jQuery;
});

define('underscore', function () {
return _;
});

return require('ventus');
}));

4 changes: 2 additions & 2 deletions dist/ventus.min.js
View file
Open in desktop

Large diffs are not rendered by default.

22 changes: 22 additions & 0 deletions src/ventus/less/window.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,28 @@
width: 10px;
}
}

&.mouse-edge {
&.mouse-edge-top,
&.mouse-edge-bottom {
cursor: ns-resize;
}

&.mouse-edge-left,
&.mouse-edge-right {
cursor: ew-resize;
}

&.mouse-edge-top-left,
&.mouse-edge-bottom-right {
cursor: nwse-resize;
}

&.mouse-edge-top-right,
&.mouse-edge-bottom-left {
cursor: nesw-resize;
}
}
}

.wm-window.disabled {
Expand Down
Loading