更新

CHANGELOG.md

@@ -4,6 +4,15 @@
 
 # CHANGE
 
+## 0.7.4
+
+2022年12月5日
+
+### 修改
+
+- 插件图标现可拖动
+- PC端滚动条样式
+
 ## 0.7.3
 
 2022年11月25日

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wuhu-torn-helper",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "芜湖助手",
   "dependencies": {},
   "scripts": {

src/class/ZhongIcon.ts

@@ -36,14 +36,15 @@ export default class ZhongIcon extends WuhuBase {
     public init() {
         Log.info('ZhongIcon初始化, 设置图标开始');
         this.constructMenuList()
-            .insert2Dom();
+            .insert2Dom()
+            .dragHandler();
         Log.info('设置图标结束, ZhongIcon初始化结束');
     }
 
     /**
      * 添加左侧图标
      */
-    private insert2Dom() {
+    private insert2Dom(): ZhongIcon {
         let zhongNode: MyHTMLElement = document.querySelector('div#wh-trans-icon');
         let settings = this.menuItemList;
         let { version } = WuhuBase.glob;
@@ -143,6 +144,7 @@ export default class ZhongIcon extends WuhuBase {
             counter: 0
         };
         Log.info('图标加入文档树完成');
+        return this;
     }
 
     // 菜单
@@ -159,7 +161,7 @@ export default class ZhongIcon extends WuhuBase {
             list.push({
                 domType: 'plain',
                 domId: 'wh-trans-welcome',
-                domHTML: `<span>欢迎 <a href="/profiles.php?XID=${ glob.player_info.userID }" target="_blank">${ glob.player_info.playername }</a>[${ glob.player_info.userID }] 大佬</span>`,
+                domHTML: `<a href="/profiles.php?XID=${ glob.player_info.userID }" target="_blank">${ glob.player_info.playername }</a>[${ glob.player_info.userID }]`,
             });
         }
         // 节日
@@ -367,6 +369,45 @@ export default class ZhongIcon extends WuhuBase {
         Log.info('构造展开菜单列表结束' + timer.getTimeMs());
         return this;
     }
+
+    private dragHandler(): ZhongIcon {
+        let isMouseDown = false;
+        let offsetXY = { x: 0, y: 0 };
+        ZhongIcon.ZhongNode.addEventListener('mousedown', (e) => {
+            if (e.button === 0) {
+                e.preventDefault();
+                isMouseDown = true;
+                let nodeXY = ZhongIcon.getPosition();
+                offsetXY.x = e.x - nodeXY.x;
+                offsetXY.y = e.y - nodeXY.y;
+            }
+        });
+        document.addEventListener('mouseup', () => isMouseDown = false);
+        document.addEventListener('mousemove', (e) => {
+            if (isMouseDown) {
+                ZhongIcon.setPosition(e.x - offsetXY.x, e.y - offsetXY.y);
+            }
+        });
+        return this;
+    }
+
+    private static setPosition(x: number, y: number) {
+        if (!(x && y)) return;
+        if (x < 0
+            || y < 0
+            || x > document.documentElement.offsetWidth - 100
+            || y > document.documentElement.offsetHeight - 60
+        ) return;
+        ZhongIcon.ZhongNode.style.left = x + "px";
+        ZhongIcon.ZhongNode.style.top = y + "px";
+    }
+
+    private static getPosition(): { x: number, y: number } {
+        return {
+            x: ZhongIcon.ZhongNode.style.left ? parseInt(ZhongIcon.ZhongNode.style.left.slice(0, -2)) : ZhongIcon.ZhongNode.offsetLeft,
+            y: ZhongIcon.ZhongNode.style.top ? parseInt(ZhongIcon.ZhongNode.style.top.slice(0, -2)) : ZhongIcon.ZhongNode.offsetTop
+        }
+    }
 }
 
 export interface MenuItemConfig {