btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

fix: performance issues due to mouse on header detection

Browse Source
This commit is contained in:
Andrew Bastin
2023-11-08 18:47:40 +05:30
parent 2bd925d441
commit 9d1d369f37
4 changed files with 12 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/hoppscotch-common/src/components.d.ts vendored
View File

@@ -92,7 +92,6 @@ declare module '@vue/runtime-core' {
HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary'] HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary'] HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor'] HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete']
HoppSmartCheckbox: typeof import('@hoppscotch/ui')['HoppSmartCheckbox'] HoppSmartCheckbox: typeof import('@hoppscotch/ui')['HoppSmartCheckbox']
HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal'] HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
HoppSmartExpand: typeof import('@hoppscotch/ui')['HoppSmartExpand'] HoppSmartExpand: typeof import('@hoppscotch/ui')['HoppSmartExpand']

2
packages/hoppscotch-common/src/components/app/Header.vue
View File

@@ -1,7 +1,9 @@
<template> <template>
<div> <div>
<header <header
ref="headerRef"
class="flex items-center justify-between flex-1 flex-shrink-0 px-2 py-2 space-x-2 overflow-x-auto overflow-y-hidden" class="flex items-center justify-between flex-1 flex-shrink-0 px-2 py-2 space-x-2 overflow-x-auto overflow-y-hidden"
@mousedown.prevent="platform.ui?.appHeader?.onHeaderAreaClick?.()"
> >
<div <div
class="inline-flex items-center justify-start flex-1 space-x-2" class="inline-flex items-center justify-start flex-1 space-x-2"

5
packages/hoppscotch-common/src/platform/ui.ts
View File

@@ -20,6 +20,11 @@ export type UIPlatformDef = {
appHeader?: { appHeader?: {
paddingTop?: Ref<string> paddingTop?: Ref<string>
paddingLeft?: Ref<string> paddingLeft?: Ref<string>
/**
* A function which is called when the header area of the app receives a click event
*/
onHeaderAreaClick?: () => void
} }
onCodemirrorInstanceMount?: (element: HTMLElement) => void onCodemirrorInstanceMount?: (element: HTMLElement) => void

29
packages/hoppscotch-selfhost-desktop/src/main.ts
View File

@@ -15,7 +15,6 @@ import { useSettingStatic } from "@hoppscotch/common/composables/settings"
import { appWindow } from "@tauri-apps/api/window" import { appWindow } from "@tauri-apps/api/window"
import { stdFooterItems } from "@hoppscotch/common/platform/std/ui/footerItem" import { stdFooterItems } from "@hoppscotch/common/platform/std/ui/footerItem"
import { stdSupportOptionItems } from "@hoppscotch/common/platform/std/ui/supportOptionsItem" import { stdSupportOptionItems } from "@hoppscotch/common/platform/std/ui/supportOptionsItem"
import { useMousePressed } from "@vueuse/core"
import { ioDef } from "./platform/io" import { ioDef } from "./platform/io"
const headerPaddingLeft = ref("0px") const headerPaddingLeft = ref("0px")
@@ -28,6 +27,11 @@ createHoppApp("#app", {
appHeader: { appHeader: {
paddingLeft: headerPaddingLeft, paddingLeft: headerPaddingLeft,
paddingTop: headerPaddingTop, paddingTop: headerPaddingTop,
onHeaderAreaClick() {
// Drag thw window when the user drags the header area
// TODO: Ignore click on headers and fields
appWindow.startDragging()
},
}, },
}, },
io: ioDef, io: ioDef,
@@ -88,27 +92,4 @@ watch(
headerPaddingTop.value = "2px" headerPaddingTop.value = "2px"
headerPaddingLeft.value = "70px" headerPaddingLeft.value = "70px"
} }
const { pressed } = useMousePressed()
document.addEventListener("mousemove", (ev) => {
const { clientX, clientY } = ev
const el = document.querySelector("header")
if (!el) return
const { left, top, width, height } = el.getBoundingClientRect()
if (
clientX >= left &&
clientX <= left + width &&
clientY >= top &&
clientY <= top + height
) {
if (pressed.value) {
appWindow.startDragging()
}
}
})
})() })()