From c76a1e585b1f9750c313410364b68455ef0528b4 Mon Sep 17 00:00:00 2001
From: daief <1437931235@qq.com>
Date: Mon, 30 Nov 2020 10:56:05 +0800
Subject: [PATCH] wip: build production comment && handle el events

---
 config/GMPlugin.ts     |  4 +++-
 config/index.ts        | 19 +++++++++++++++-
 package.json           |  4 +++-
 src/@types/global.d.ts |  2 ++
 src/global.less        |  7 +++++-
 src/index.ts           | 50 +++++++++++++++++++++++++++++++++++++++++-
 6 files changed, 81 insertions(+), 5 deletions(-)

diff --git a/config/GMPlugin.ts b/config/GMPlugin.ts
index b2aa5c2..8c34279 100644
--- a/config/GMPlugin.ts
+++ b/config/GMPlugin.ts
@@ -29,9 +29,11 @@ export class GMPlugin {
 
   apply(compiler: Compiler) {
     compiler.hooks.compilation.tap(NAME, compilation => {
-      compilation.hooks.processAssets.tap(
+      // after process, after optimization
+      compilation.hooks.afterProcessAssets.tap(
         {
           name: NAME,
+          // stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
           stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
         },
         () => {
diff --git a/config/index.ts b/config/index.ts
index 7700db4..49d5cde 100644
--- a/config/index.ts
+++ b/config/index.ts
@@ -1,7 +1,8 @@
 import { Configuration } from 'webpack';
 import path from 'path';
-import { GMPlugin } from './GMPlugin';
 import { VueLoaderPlugin } from 'vue-loader';
+import TerserPlugin from 'terser-webpack-plugin';
+import { GMPlugin } from './GMPlugin';
 import pkg from '../package.json';
 
 const nodeEnv: Configuration['mode'] = process.env.NODE_ENV as any;
@@ -78,4 +79,20 @@ const config: Configuration = {
   ],
 };
 
+if (nodeEnv === 'production') {
+  config.optimization = {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          format: {
+            comments: false,
+          },
+        },
+        extractComments: true,
+      }),
+    ],
+  };
+}
+
 export default config;
diff --git a/package.json b/package.json
index 909ad3a..14066f7 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
   "version": "0.0.1",
   "license": "MIT",
   "scripts": {
-    "watch": "cross-env NODE_ENV=development TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack --config ./config/index.ts -w"
+    "watch": "cross-env NODE_ENV=development TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack --config ./config/index.ts -w",
+    "build": "cross-env NODE_ENV=production TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack --config ./config/index.ts"
   },
   "devDependencies": {
     "@types/node": "^14.14.10",
@@ -19,6 +20,7 @@
     "less": "^3.12.2",
     "less-loader": "^7.1.0",
     "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.0.3",
     "ts-loader": "^8.0.11",
     "ts-node": "^9.0.0",
     "typescript": "^4.1.2",
diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts
index ce20a87..9a05d90 100644
--- a/src/@types/global.d.ts
+++ b/src/@types/global.d.ts
@@ -1,3 +1,5 @@
+declare module 'terser-webpack-plugin';
+
 declare module '*.less';
 declare module '*.vue' {
   import { defineComponent } from 'vue';
diff --git a/src/global.less b/src/global.less
index a937987..7c99158 100644
--- a/src/global.less
+++ b/src/global.less
@@ -7,7 +7,12 @@
   z-index: 4000;
   cursor: pointer;
   background-color: #6cf;
-  transition: all 0.3s;
+  opacity: 0.5;
+  transition: opacity 0.3s;
+
+  &:hover {
+    opacity: 1;
+  }
 
   &.hidden {
     opacity: 0;
diff --git a/src/index.ts b/src/index.ts
index c7266fa..64f19cf 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,13 +6,21 @@ import { render } from './SettingPanel';
 // import(/* webpackChunkName: 'setting-panel' */ './SettingPanel');
 
 let handler: any;
+let isDrag = false;
+let isMove = false;
+let tX = 0;
+let tY = 0;
+let elRect: DOMRect | null = null;
 
 window.addEventListener('DOMContentLoaded', () => {
   const el = document.createElement('div');
   el.innerText = '设置';
   el.className = 'response-proxy-page-root-fixed-button';
 
-  el.addEventListener('click', async () => {
+  function onClickEl(_e: MouseEvent) {
+    if (isMove) {
+      return;
+    }
     if (!handler) {
       handler = render(elForMount);
       handler.$root.$watch('show', (newVal: boolean) => {
@@ -21,6 +29,46 @@ window.addEventListener('DOMContentLoaded', () => {
     }
 
     handler.open();
+  }
+
+  el.addEventListener('mousedown', e => {
+    isDrag = true;
+    isMove = false;
+    elRect = el.getBoundingClientRect();
+    tX = e.clientX - elRect.left;
+    tY = e.clientY - elRect.top;
+  });
+
+  window.addEventListener('mouseup', async e => {
+    isDrag = false;
+    if (isMove) {
+      isMove = false;
+      return;
+    }
+    // mock click event
+    if (e.target === el) {
+      await onClickEl(e);
+    }
+  });
+
+  window.addEventListener('mousemove', e => {
+    isMove = true;
+    if (!isDrag) {
+      return;
+    }
+
+    e.preventDefault();
+
+    let left = e.clientX - tX;
+    left = Math.min(left, window.innerWidth - elRect!.width);
+    left = Math.max(left, 0);
+
+    let top = e.clientY - tY;
+    top = Math.min(top, window.innerHeight - elRect!.height);
+    top = Math.max(top, 0);
+
+    el.style.left = left + 'px';
+    el.style.top = top + 'px';
   });
 
   const elForMount = document.createElement('div');