dany/antos-frontend
1
0
Fork 0
mirror of https://github.com/lxsang/antos-frontend.git synced 2024-07-01 11:09:49 +02:00
Code Issues Projects Releases Wiki Activity

Allow window horizotal and vertical resize

Browse Source
This commit is contained in:
lxsang 2021-04-01 18:44:00 +02:00
parent 1a132178c3
commit ac76a5f967
3 changed files with 86 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
release/antos-1.2.0.tar.gz
View File

Binary file not shown.

86
src/core/tags/WindowTag.ts
View File

@ -189,9 +189,13 @@ namespace OS {
if (v) {
$(this.refs["maxbt"]).show();
$(this.refs["grip"]).show();
$(this.refs["grip_bottom"]).show();
$(this.refs["grip_right"]).show();
} else {
$(this.refs["maxbt"]).hide();
$(this.refs["grip"]).hide();
$(this.refs["grip_bottom"]).hide();
$(this.refs["grip_right"]).hide();
}
}
get resizable(): boolean {
@ -396,37 +400,55 @@ namespace OS {
* @memberof WindowTag
*/
private enable_resize(): void {
$(this.refs["grip"])
.css("user-select", "none")
.css("cursor", "default")
.css("position", "absolute")
.css("bottom", "0")
.css("right", "0")
.css("cursor", "nwse-resize");
$(this.refs["grip"]).on("mousedown", (e) => {
e.preventDefault();
const offset = { top: 0, left: 0 };
const offset = { top: 0, left: 0 };
let target = undefined;
const mouse_move_hdl = (e) => {
let w = $(this).width();
let h = $(this).height();
if(target != this.refs.grip_bottom)
{
w += e.clientX - offset.left;
}
if(target != this.refs.grip_right)
{
h += e.clientY - offset.top;
}
w = w < 100 ? 100 : w;
h = h < 100 ? 100 : h;
offset.top = e.clientY;
offset.left = e.clientX;
$(window).on("mousemove", (e) => {
let w = $(this).width() + e.clientX - offset.left;
let h = $(this).height() + e.clientY - offset.top;
w = w < 100 ? 100 : w;
h = h < 100 ? 100 : h;
offset.top = e.clientY;
offset.left = e.clientX;
this._isMaxi = false;
this.setsize({ w, h });
});
$(window).on("mouseup", function (e) {
$(window).off("mousemove", null);
return $(window).off("mouseup", null);
});
this._isMaxi = false;
this.setsize({ w, h });
}
const mouse_up_hdl = (e) => {
$(window).off("mousemove", mouse_move_hdl);
return $(window).off("mouseup", mouse_up_hdl);
}
$(this.refs["grip"]).on("mousedown", (e) => {
e.preventDefault();
offset.top = e.clientY;
offset.left = e.clientX;
target = this.refs.grip;
$(window).on("mousemove", mouse_move_hdl);
$(window).on("mouseup", mouse_up_hdl);
});
$(this.refs.grip_bottom).on("mousedown", (e) => {
e.preventDefault();
offset.top = e.clientY;
offset.left = e.clientX;
target = this.refs.grip_bottom;
$(window).on("mousemove", mouse_move_hdl);
$(window).on("mouseup", mouse_up_hdl);
});
$(this.refs.grip_right).on("mousedown", (e) => {
e.preventDefault();
offset.top = e.clientY;
offset.left = e.clientX;
target = this.refs.grip_right;
$(window).on("mousemove", mouse_move_hdl);
$(window).on("mouseup", mouse_up_hdl);
});
}
/**
* Maximize the window or restore its previous width, height,
* and position
@ -521,6 +543,16 @@ namespace OS {
ref: "grip",
class: "afx-window-grip",
},
{
el: "div",
ref: "grip_bottom",
class: "afx-window-grip-bottom",
},
{
el: "div",
ref: "grip_right",
class: "afx-window-grip-right",
},
],
},
];

27
src/themes/system/afx-app-window.css
View File

@ -33,5 +33,32 @@ afx-app-window div.afx-window-content
afx-app-window div.afx-window-grip{
height: 10px;
width: 10px;
user-select:none;
position: absolute;
bottom: 0;
right: 0;
cursor: nwse-resize;
background-color: transparent;
}
afx-app-window div.afx-window-grip-bottom{
height: 3px;
user-select:none;
position: absolute;
bottom: -1px;
left: 0;
right: 10px;
cursor: ns-resize;
background-color: transparent;
}
afx-app-window div.afx-window-grip-right{
width: 3px;
user-select:none;
position: absolute;
bottom: 10px;
right: -1px;
top: 0;
cursor: ew-resize;
background-color: transparent;
}