Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(overlay): get window size by useWindowSize #312

Merged
merged 1 commit into from
Apr 9, 2024
Merged

refactor(overlay): get window size by useWindowSize #312

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 25 additions & 38 deletions packages/overlay/src/composables/position.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { computed, onMounted, reactive, ref, watchEffect } from 'vue'
import type { CSSProperties, Ref } from 'vue'
import { useEventListener, useScreenSafeArea } from '@vueuse/core'
import { useEventListener, useScreenSafeArea, useWindowSize } from '@vueuse/core'
import { clamp, pixelToNumber } from '../utils'
import { useFrameState } from './state'

Expand All @@ -17,11 +17,11 @@ function snapToPoints(value: number) {
}

export function usePosition(panelEl: Ref<HTMLElement | undefined>) {
const { width: windowWidth, height: windowHeight } = useWindowSize()
const { state, updateState } = useFrameState()
const isHovering = ref(false)
const isDragging = ref(false)
const draggingOffset = reactive({ x: 0, y: 0 })
const windowSize = reactive({ width: 0, height: 0 })
const mousePosition = reactive({ x: 0, y: 0 })
const panelMargins = reactive({
left: 10,
Expand All @@ -47,11 +47,6 @@ export function usePosition(panelEl: Ref<HTMLElement | undefined>) {
draggingOffset.y = e.clientY - top - height / 2
}

const setWindowSize = () => {
windowSize.width = window.innerWidth
windowSize.height = window.innerHeight
}

const bringUp = () => {
isHovering.value = true
if (state.value.minimizePanelInactive < 0)
Expand All @@ -64,16 +59,8 @@ export function usePosition(panelEl: Ref<HTMLElement | undefined>) {
}

onMounted(() => {
setTimeout(() => {
setWindowSize()
}, 200)

bringUp()
webfansplz marked this conversation as resolved.
Show resolved Hide resolved

useEventListener(window, 'resize', () => {
setWindowSize()
})

useEventListener(window, 'pointerup', () => {
isDragging.value = false
})
Expand All @@ -84,8 +71,8 @@ export function usePosition(panelEl: Ref<HTMLElement | undefined>) {
if (!isDragging.value)
return

const centerX = windowSize.width / 2
const centerY = windowSize.height / 2
const centerX = windowWidth.value / 2
const centerY = windowHeight.value / 2

const x = e.clientX - draggingOffset.x
const y = e.clientY - draggingOffset.y
Expand All @@ -97,9 +84,9 @@ export function usePosition(panelEl: Ref<HTMLElement | undefined>) {
const deg = Math.atan2(y - centerY, x - centerX)
const HORIZONTAL_MARGIN = 70
const TL = Math.atan2(0 - centerY + HORIZONTAL_MARGIN, 0 - centerX)
const TR = Math.atan2(0 - centerY + HORIZONTAL_MARGIN, windowSize.width - centerX)
const BL = Math.atan2(windowSize.height - HORIZONTAL_MARGIN - centerY, 0 - centerX)
const BR = Math.atan2(windowSize.height - HORIZONTAL_MARGIN - centerY, windowSize.width - centerX)
const TR = Math.atan2(0 - centerY + HORIZONTAL_MARGIN, windowWidth.value - centerX)
const BL = Math.atan2(windowHeight.value - HORIZONTAL_MARGIN - centerY, 0 - centerX)
const BR = Math.atan2(windowHeight.value - HORIZONTAL_MARGIN - centerY, windowWidth.value - centerX)

updateState({
position: (deg >= TL && deg <= TR)
Expand All @@ -109,8 +96,8 @@ export function usePosition(panelEl: Ref<HTMLElement | undefined>) {
: (deg >= BR && deg <= BL)
? 'bottom'
: 'left',
left: snapToPoints(x / windowSize.width * 100),
top: snapToPoints(y / windowSize.height * 100),
left: snapToPoints(x / windowWidth.value * 100),
top: snapToPoints(y / windowHeight.value * 100),
})
})
})
Expand All @@ -134,30 +121,30 @@ export function usePosition(panelEl: Ref<HTMLElement | undefined>) {
const halfWidth = (panelEl.value?.clientWidth || 0) / 2
const halfHeight = (panelEl.value?.clientHeight || 0) / 2

const left = state.value.left * windowSize.width / 100
const top = state.value.top * windowSize.height / 100
const left = state.value.left * windowWidth.value / 100
const top = state.value.top * windowHeight.value / 100

switch (state.value.position) {
case 'top':
return {
left: clamp(left, halfWidth + panelMargins.left, windowSize.width - halfWidth - panelMargins.right),
left: clamp(left, halfWidth + panelMargins.left, windowWidth.value - halfWidth - panelMargins.right),
top: panelMargins.top + halfHeight,
}
case 'right':
return {
left: windowSize.width - panelMargins.right - halfHeight,
top: clamp(top, halfWidth + panelMargins.top, windowSize.height - halfWidth - panelMargins.bottom),
left: windowWidth.value - panelMargins.right - halfHeight,
top: clamp(top, halfWidth + panelMargins.top, windowHeight.value - halfWidth - panelMargins.bottom),
}
case 'left':
return {
left: panelMargins.left + halfHeight,
top: clamp(top, halfWidth + panelMargins.top, windowSize.height - halfWidth - panelMargins.bottom),
top: clamp(top, halfWidth + panelMargins.top, windowHeight.value - halfWidth - panelMargins.bottom),
}
case 'bottom':
default:
return {
left: clamp(left, halfWidth + panelMargins.left, windowSize.width - halfWidth - panelMargins.right),
top: windowSize.height - panelMargins.bottom - halfHeight,
left: clamp(left, halfWidth + panelMargins.left, windowWidth.value - halfWidth - panelMargins.right),
top: windowHeight.value - panelMargins.bottom - halfHeight,
}
}
})
Expand All @@ -180,8 +167,8 @@ export function usePosition(panelEl: Ref<HTMLElement | undefined>) {
const marginHorizontal = frameMargin.left + frameMargin.right
const marginVertical = frameMargin.top + frameMargin.bottom

const maxWidth = windowSize.width - marginHorizontal
const maxHeight = windowSize.height - marginVertical
const maxWidth = windowWidth.value - marginHorizontal
const maxHeight = windowHeight.value - marginVertical

const style: CSSProperties = {
zIndex: -1,
Expand All @@ -191,8 +178,8 @@ export function usePosition(panelEl: Ref<HTMLElement | undefined>) {
}

const anchor = anchorPos.value
const width = Math.min(maxWidth, state.value.width * windowSize.width / 100)
const height = Math.min(maxHeight, state.value.height * windowSize.height / 100)
const width = Math.min(maxWidth, state.value.width * windowWidth.value / 100)
const height = Math.min(maxHeight, state.value.height * windowHeight.value / 100)

const anchorX = anchor?.left || 0
const anchorY = anchor?.top || 0
Expand All @@ -204,17 +191,17 @@ export function usePosition(panelEl: Ref<HTMLElement | undefined>) {
style.transform = 'translate(-50%, 0)'
if ((anchorX - frameMargin.left) < width / 2)
style.left = `${width / 2 - anchorX + frameMargin.left}px`
else if ((windowSize.width - anchorX - frameMargin.right) < width / 2)
style.left = `${windowSize.width - anchorX - width / 2 - frameMargin.right}px`
else if ((windowWidth.value - anchorX - frameMargin.right) < width / 2)
style.left = `${windowWidth.value - anchorX - width / 2 - frameMargin.right}px`
break
case 'right':
case 'left':
style.top = 0
style.transform = 'translate(0, -50%)'
if ((anchorY - frameMargin.top) < height / 2)
style.top = `${height / 2 - anchorY + frameMargin.top}px`
else if ((windowSize.height - anchorY - frameMargin.bottom) < height / 2)
style.top = `${windowSize.height - anchorY - height / 2 - frameMargin.bottom}px`
else if ((windowHeight.value - anchorY - frameMargin.bottom) < height / 2)
style.top = `${windowHeight.value - anchorY - height / 2 - frameMargin.bottom}px`
break
}

Expand Down
Loading