🔨 优化拖拽方案

src/common/utils/dragWindow.ts

@@ -0,0 +1,36 @@
+import { ipcRenderer } from 'electron';
+
+const useDrag = () => {
+  let animationId: number;
+  let mouseX: number;
+  let mouseY: number;
+  let draggable = true;
+
+  const onMouseDown = (e) => {
+    draggable = true;
+    mouseX = e.clientX;
+    mouseY = e.clientY;
+    document.addEventListener('mouseup', onMouseUp);
+    animationId = requestAnimationFrame(moveWindow);
+  };
+
+  const onMouseUp = () => {
+    draggable = false;
+    document.removeEventListener('mouseup', onMouseUp);
+    cancelAnimationFrame(animationId);
+  };
+
+  const moveWindow = () => {
+    ipcRenderer.send('msg-trigger', {
+      type: 'windowMoving',
+      data: { mouseX, mouseY },
+    });
+    if (draggable) animationId = requestAnimationFrame(moveWindow);
+  };
+
+  return {
+    onMouseDown,
+  };
+};
+
+export default useDrag;

src/main/common/api.ts

@@ -6,6 +6,7 @@ import {
   Notification,
   nativeImage,
   clipboard,
+  screen,
   shell,
 } from 'electron';
 import { runner, detach } from '../browsers';
@@ -55,6 +56,13 @@ class API {
     }
   };
 
+  public windowMoving({ data: { mouseX, mouseY, width, height } }, window, e) {
+    const { x, y } = screen.getCursorScreenPoint();
+    const originWindow = this.getCurrentWindow(window, e);
+    if (!originWindow) return;
+    originWindow.setBounds({ x: x - mouseX, y: y - mouseY });
+  }
+
   public loadPlugin({ data: plugin }, window) {
     window.webContents.executeJavaScript(
       `window.loadPlugin(${JSON.stringify(plugin)})`

src/renderer/App.vue

@@ -1,30 +1,21 @@
 <template>
-  <div
+  <div id="components-layout" @mousedown="onMouseDown">
-    v-if="commonConst.windows() || commonConst.linux()"
+    <Search
-    class="drag-bar"
+      :currentPlugin="currentPlugin"
-  ></div>
+      @changeCurrent="changeIndex"
-  <div
+      @onSearch="onSearch"
-    :class="!commonConst.windows() && !commonConst.linux() && 'drag'"
+      @openMenu="openMenu"
-    id="components-layout"
+      @changeSelect="changeSelect"
-  >
+      :searchValue="searchValue"
-    <div class="rubick-select">
+      :placeholder="placeholder"
-      <Search
+      :pluginLoading="pluginLoading"
-        :currentPlugin="currentPlugin"
+      :clipboardFile="clipboardFile || []"
-        @changeCurrent="changeIndex"
+      @choosePlugin="choosePlugin"
-        @onSearch="onSearch"
+      @focus="searchFocus"
-        @openMenu="openMenu"
+      @clear-search-value="clearSearchValue"
-        @changeSelect="changeSelect"
+      @clearClipbord="clearClipboardFile"
-        :searchValue="searchValue"
+      @readClipboardContent="readClipboardContent"
-        :placeholder="placeholder"
+    />
-        :pluginLoading="pluginLoading"
-        :clipboardFile="clipboardFile || []"
-        @choosePlugin="choosePlugin"
-        @focus="searchFocus"
-        @clear-search-value="clearSearchValue"
-        @clearClipbord="clearClipboardFile"
-        @readClipboardContent="readClipboardContent"
-      />
-    </div>
     <Result
       :currentPlugin="currentPlugin"
       :searchValue="searchValue"
@@ -42,7 +33,9 @@ import Result from './components/result.vue';
 import Search from './components/search.vue';
 import getWindowHeight from '../common/utils/getWindowHeight';
 import createPluginManager from './plugins-manager';
-import commonConst from '@/common/utils/commonConst';
+import useDrag from '../common/utils/dragWindow';
+
+const { onMouseDown } = useDrag();
 
 const {
   initPlugins,
@@ -120,16 +113,6 @@ const clearSearchValue = () => {
 
 <style lang="less">
 @import './assets/var.less';
-.drag-bar {
-  -webkit-app-region: drag;
-  width: 100%;
-  height: 20px;
-  position: fixed;
-  z-index: 1;
-  top: 0;
-  left: 0;
-}
-
 #components-layout {
   height: 100vh;
   overflow: hidden;
@@ -138,8 +121,4 @@ const clearSearchValue = () => {
     width: 0;
   }
 }
-
-.drag {
-  -webkit-app-region: drag;
-}
 </style>