ui add dir enum

src/UI/AppUI.tsx

@@ -172,10 +172,12 @@ export class CommandComponent extends React.Component<{}, null>
     render()
     {
         return (
-            <div id="commandsddd" className="win" style=
+            <div id="commands" className="win" style=
                 {{
                     height: "200px",
-                    width: "700px"
+                    width: "700px",
+                    borderTopWidth: "5px",
+                    borderLeftWidth: "5px"
                 }}
             >
                 <div className="tool-caption">命令栏</div>

src/UI/Dialog.ts

@@ -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);
         }
     }