|
|
|
@ -1,12 +1,20 @@
|
|
|
|
|
import { MouseMove } from '../Application';
|
|
|
|
|
|
|
|
|
|
//(方向)
|
|
|
|
|
//5 1 9
|
|
|
|
|
//4 8
|
|
|
|
|
//6 2 10
|
|
|
|
|
enum DIRECTIONS
|
|
|
|
|
{
|
|
|
|
|
NORTH = 0x0001,
|
|
|
|
|
SOUTH = 0x0010,
|
|
|
|
|
WEST = 0x0100,
|
|
|
|
|
EAST = 0x1000
|
|
|
|
|
TOP = 0b0001,
|
|
|
|
|
DOWN = 0b0010,
|
|
|
|
|
LEFT = 0b0100,
|
|
|
|
|
RIGHT = 0b1000,
|
|
|
|
|
|
|
|
|
|
LEFT_TOP = 0b0101,
|
|
|
|
|
LEFT_DOWN = 0b0110,
|
|
|
|
|
RIGHT_TOP = 0b1001,
|
|
|
|
|
RIGHT_DOWN = 0b1010
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -19,10 +27,12 @@ export class Dialog
|
|
|
|
|
|
|
|
|
|
constructor(id: string)
|
|
|
|
|
{
|
|
|
|
|
this.m_root = document.getElementById("commandsddd");
|
|
|
|
|
if (this.m_root) {
|
|
|
|
|
this.m_root = document.getElementById(id);
|
|
|
|
|
if (this.m_root)
|
|
|
|
|
{
|
|
|
|
|
let elms = this.m_root.getElementsByClassName("tool-caption");
|
|
|
|
|
if (elms.length > 0) {
|
|
|
|
|
if (elms.length > 0)
|
|
|
|
|
{
|
|
|
|
|
this.m_caption = elms[0];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
@ -35,44 +45,43 @@ export class Dialog
|
|
|
|
|
registerResize()
|
|
|
|
|
{
|
|
|
|
|
let el = this.m_root;
|
|
|
|
|
let north = true;
|
|
|
|
|
let east = true;
|
|
|
|
|
let west = true;
|
|
|
|
|
let south = true;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var borderTop = parseInt(el.style.borderTopWidth, 10);
|
|
|
|
|
var borderLeft = parseInt(el.style.borderLeftWidth, 10);
|
|
|
|
|
borderTop = 5;
|
|
|
|
|
borderLeft = 5;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let equal = function (a: number, b: number, fuzz: number): boolean
|
|
|
|
|
{
|
|
|
|
|
return Math.abs(a - b) < fuzz;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let onNorthEdge = (e) =>
|
|
|
|
|
{
|
|
|
|
|
return equal(e.pageY, el.offsetTop, borderTop);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let onSouthEdge = (e) =>
|
|
|
|
|
let GetMouseOnEdgeDirType = (e) =>
|
|
|
|
|
{
|
|
|
|
|
let equal = function (a: number, b: number, fuzz: number): boolean
|
|
|
|
|
{
|
|
|
|
|
return Math.abs(a - b) < fuzz;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return e.pageY > el.offsetTop + el.offsetHeight - borderTop;
|
|
|
|
|
}
|
|
|
|
|
//Top:1
|
|
|
|
|
let onTopEdge = (e) =>
|
|
|
|
|
{
|
|
|
|
|
return equal(e.pageY, el.offsetTop, borderTop) ? 1 : 0;
|
|
|
|
|
}
|
|
|
|
|
//Down:2
|
|
|
|
|
let onDownEdge = (e) =>
|
|
|
|
|
{
|
|
|
|
|
return equal(e.pageY, el.offsetTop + el.offsetHeight, borderTop) ? 2 : 0;
|
|
|
|
|
}
|
|
|
|
|
//Left:4
|
|
|
|
|
let onLeftEdge = (e) =>
|
|
|
|
|
{
|
|
|
|
|
return equal(e.pageX, el.offsetLeft, borderLeft) ? 4 : 0;
|
|
|
|
|
}
|
|
|
|
|
//Right:8
|
|
|
|
|
let onRightEdge = (e) =>
|
|
|
|
|
{
|
|
|
|
|
return equal(e.pageX, el.offsetLeft + el.offsetWidth, borderLeft) ? 8 : 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let onWestEdge = (e) =>
|
|
|
|
|
{
|
|
|
|
|
return e.pageX < el.offsetLeft + borderLeft;
|
|
|
|
|
return (onTopEdge(e) || onDownEdge(e)) | (onLeftEdge(e) || onRightEdge(e));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let onEastEdge = (e) =>
|
|
|
|
|
el.addEventListener("mousedown", (e) =>
|
|
|
|
|
{
|
|
|
|
|
|
|
|
|
|
return e.pageX > el.offsetLeft + el.offsetWidth - borderLeft;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// el.addEventListener("mousedown", (e) =>
|
|
|
|
|
// {
|
|
|
|
|
// if (north && east && onNorthEdge(e) && onEastEdge(e))
|
|
|
|
@ -103,32 +112,20 @@ export class Dialog
|
|
|
|
|
// })
|
|
|
|
|
el.addEventListener("mousemove", (e) =>
|
|
|
|
|
{
|
|
|
|
|
if (north && east && onNorthEdge(e) && onEastEdge(e)) {
|
|
|
|
|
el.style.cursor = "nesw-resize"
|
|
|
|
|
} else if (north && west && onNorthEdge(e) && onWestEdge(e)) {
|
|
|
|
|
el.style.cursor = "nwse-resize"
|
|
|
|
|
|
|
|
|
|
} else if (south && east && onSouthEdge(e) && onEastEdge(e)) {
|
|
|
|
|
el.style.cursor = "nwse-resize"
|
|
|
|
|
|
|
|
|
|
} else if (south && west && onSouthEdge(e) && onWestEdge(e)) {
|
|
|
|
|
el.style.cursor = "nesw-resize"
|
|
|
|
|
|
|
|
|
|
} else if (south && onSouthEdge(e)) {
|
|
|
|
|
el.style.cursor = "ns-resize"
|
|
|
|
|
|
|
|
|
|
} else if (north && onNorthEdge(e)) {
|
|
|
|
|
el.style.cursor = "ns-resize"
|
|
|
|
|
|
|
|
|
|
} else if (east && onEastEdge(e)) {
|
|
|
|
|
el.style.cursor = "ew-resize"
|
|
|
|
|
|
|
|
|
|
} else if (west && onWestEdge(e)) {
|
|
|
|
|
el.style.cursor = "ew-resize"
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
el.style.cursor = ""
|
|
|
|
|
let type = GetMouseOnEdgeDirType(e);
|
|
|
|
|
const dict = {
|
|
|
|
|
1: "ns-resize",
|
|
|
|
|
2: "ns-resize",
|
|
|
|
|
4: "ew-resize",
|
|
|
|
|
8: "ew-resize",
|
|
|
|
|
|
|
|
|
|
5: "nwse-resize",//左上
|
|
|
|
|
9: "nesw-resize",//右上
|
|
|
|
|
|
|
|
|
|
6: "nesw-resize",//左下
|
|
|
|
|
10: "nwse-resize",//右下
|
|
|
|
|
}
|
|
|
|
|
el.style.cursor = dict[type];
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
@ -139,7 +136,8 @@ export class Dialog
|
|
|
|
|
{
|
|
|
|
|
this.m_caption.addEventListener("mousedown", (e: MouseEvent) =>
|
|
|
|
|
{
|
|
|
|
|
if (e.button == 0) {
|
|
|
|
|
if (e.button == 0)
|
|
|
|
|
{
|
|
|
|
|
this.origin = { x: e.pageX, y: e.pageY };
|
|
|
|
|
this.originLocation = {
|
|
|
|
|
left: this.m_root.offsetLeft,
|
|
|
|
@ -151,7 +149,8 @@ export class Dialog
|
|
|
|
|
|
|
|
|
|
this.m_caption.addEventListener("mouseup", (e: MouseEvent) =>
|
|
|
|
|
{
|
|
|
|
|
if (e.button == 0) {
|
|
|
|
|
if (e.button == 0)
|
|
|
|
|
{
|
|
|
|
|
wm.moveHandler = undefined;
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
@ -169,7 +168,6 @@ export class Dialog
|
|
|
|
|
|
|
|
|
|
export class WinManager
|
|
|
|
|
{
|
|
|
|
|
m_Name = "cx";
|
|
|
|
|
constructor()
|
|
|
|
|
{
|
|
|
|
|
document.body.addEventListener("mousemove", this.onMouseMove);
|
|
|
|
@ -181,7 +179,8 @@ export class WinManager
|
|
|
|
|
moveHandler = undefined;
|
|
|
|
|
onMouseMove = (e: MouseEvent) =>
|
|
|
|
|
{
|
|
|
|
|
if (this.moveHandler) {
|
|
|
|
|
if (this.moveHandler)
|
|
|
|
|
{
|
|
|
|
|
this.moveHandler(e);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|