feat(catalog): pad map fit and graph hubs filter
All checks were successful
Build Docker Image / build (push) Successful in 5m4s
All checks were successful
Build Docker Image / build (push) Successful in 5m4s
This commit is contained in:
@@ -16,6 +16,7 @@
|
||||
:hovered-item="hoveredItem"
|
||||
:related-points="relatedPoints"
|
||||
:info-loading="infoLoading"
|
||||
:fit-padding-left="fitPaddingLeft"
|
||||
@select-item="onMapSelect"
|
||||
@bounds-change="onBoundsChange"
|
||||
/>
|
||||
@@ -188,6 +189,34 @@ const { mapViewMode, setMapViewMode, selectMode, startSelect, cancelSelect } = u
|
||||
// Panel is open when selectMode is set OR when showPanel prop is true (info/quote)
|
||||
const isPanelOpen = computed(() => props.showPanel || selectMode.value !== null)
|
||||
|
||||
const isDesktop = ref(false)
|
||||
onMounted(() => {
|
||||
const media = window.matchMedia('(min-width: 1024px)')
|
||||
const update = () => {
|
||||
isDesktop.value = media.matches
|
||||
}
|
||||
update()
|
||||
media.addEventListener('change', update)
|
||||
onUnmounted(() => {
|
||||
media.removeEventListener('change', update)
|
||||
})
|
||||
})
|
||||
|
||||
const panelWidthPx = computed(() => {
|
||||
const match = props.panelWidth.match(/w-\[(\d+(?:\.\d+)?)rem\]/)
|
||||
if (match) return Number(match[1]) * 16
|
||||
if (props.panelWidth === 'w-96') return 24 * 16
|
||||
if (props.panelWidth === 'w-80') return 20 * 16
|
||||
return 0
|
||||
})
|
||||
|
||||
const fitPaddingLeft = computed(() => {
|
||||
if (!isPanelOpen.value || !isDesktop.value || panelWidthPx.value === 0) return 0
|
||||
const leftInset = 16
|
||||
const rightInset = 16
|
||||
return leftInset + panelWidthPx.value + rightInset
|
||||
})
|
||||
|
||||
// Open panel based on current mapViewMode
|
||||
const openPanel = () => {
|
||||
const newSelectMode = mapViewMode.value === 'hubs' ? 'hub'
|
||||
|
||||
Reference in New Issue
Block a user