improve area bounds input field

components/input/Area.vue

@@ -1,8 +1,9 @@
 <template>
  <FormKit v-model="points" name="points" placeholder="optional" label="Max-Y" type="hidden" />
- <MapView id="map" :zoom="8" @click="addPoint">
+ <MapView id="map" :zoom="8" :bounds="bounds" @click="addPoint">
  <l-polygon :lat-lngs="latLngs" color="#41b782" :fill="true" :fill-opacity="0.5" fill-color="#41b782" />
- <MapDraggableMarker v-for="point, i in points" :key="i" :pos="point" @dragend="updatePoint(i, $event)" />
+ <MapDraggableMarker v-for="point, i in points" :key="i" :pos="point" @dragend="updatePoint(i, $event)"
+ @contextmenu="removePoint(i)" />
  </MapView>
 </template>
 
@@ -21,6 +22,8 @@ const points = ref<FlatPoint[]>(props.initial ?? [])
 
 const latLngs = computed(() => points.value.map(it => toMapPos(context.value!.map, it)))
 
+const bounds = computed(() => props.initial && getBounds(props.initial))
+
 function distance(a: FlatPoint, b: FlatPoint) {
  return Math.sqrt((a.x - b.x) ** 2 + (a.z - b.z) ** 2)
 }
@@ -51,6 +54,10 @@ function addPoint(pos: PosFragment) {
  }
 }
 
+function removePoint(index: number) {
+ points.value = points.value.toSpliced(index, 1)
+}
+
 function updatePoint(index: number, { x, z }: PosFragment) {
  const newPoints = [...points.value]
  newPoints[index] = roundPos({ x, z })

components/map/DraggableMarker.vue

@@ -1,10 +1,10 @@
 <template>
- <l-marker :lat-lng="latLng" draggable @dragend="dragEnd" />
+ <l-marker :lat-lng="latLng" draggable @dragend="dragEnd" @contextmenu="contextmenu" />
 </template>
 
 <script lang="ts" setup>
 import { LMarker } from '@vue-leaflet/vue-leaflet';
-import type { DragEndEvent } from 'leaflet';
+import type { DragEndEvent, LeafletMouseEvent } from 'leaflet';
 import type { FlatPoint, PosFragment } from '~/graphql/generated';
 
 const context = useMap()
@@ -15,11 +15,16 @@ const props = defineProps<{
 
 const emit = defineEmits<{
  (event: 'dragend', payload: PosFragment): void
+ (event: 'contextmenu', payload: PosFragment): void
 }>()
 
 function dragEnd(event: DragEndEvent) {
  emit('dragend', toWorldPos(context.value!.map, event.target._latlng))
 }
 
+function contextmenu(event: LeafletMouseEvent) {
+ emit('contextmenu', toWorldPos(context.value!.map, event.target._latlng))
+}
+
 const latLng = computed(() => toMapPos(context.value!.map, props.pos))
 </script>

components/map/View.vue

@@ -11,19 +11,22 @@
 </template>
 
 <script lang="ts" setup>
-import type { Bounds, LeafletMouseEvent, Map } from 'leaflet';
+import type { LeafletMouseEvent, Map } from 'leaflet';
 import { type PosFragment } from '~/graphql/generated';
 import type { World } from '~~/composables/useMap';
 
 const props = defineProps<{
  center?: PosFragment
  zoom?: number
- bounds?: Bounds
+ bounds?: [PosFragment, PosFragment]
  disableControls?: boolean
 }>()
 
 function ready(map?: { leaflet: Map }) {
- if (props.bounds) map?.leaflet?.fitBounds(props.bounds)
+ if (props.bounds) {
+ const latLngBounds = props.bounds.map(it => toMapPos(context.value!.map, it))
+ map?.leaflet?.fitBounds(latLngBounds)
+ }
 }
 
 const emit = defineEmits<{
@@ -39,7 +42,10 @@ interface DynmapOptions {
 }
 
 const { data: options, refresh } = await useFetch<DynmapOptions>('/dynmap/up/configuration', {
- transform: r => JSON.parse(r as unknown as string),
+ transform: r => {
+ if (typeof r === 'string') return JSON.parse(r)
+ return r;
+ },
 })
 
 const context = useMap()

composables/spatial.ts

@@ -1,4 +1,5 @@
-import { Point, PosFragment } from '~~/graphql/generated'
+import { max, min } from 'lodash-es'
+import type { FlatPoint, Point, PosFragment } from '~~/graphql/generated'
 
 function floorOptional(i: number | undefined | null) {
  if (notNull(i)) return Math.floor(i)
@@ -15,3 +16,12 @@ export const formatPos = (pos: PosFragment) => {
  if (y) return `${x} / ${y} / ${z}`
  else return `${x} / ${z}`
 }
+
+export function getBounds(points: FlatPoint[]): [FlatPoint, FlatPoint] {
+ const xs = points.map(it => it.x)
+ const zs = points.map(it => it.z)
+ return [
+ { x: min(xs)!, z: min(zs)! },
+ { x: max(xs)!, z: max(zs)! },
+ ]
+}

pages/areas/[slug]/index.vue

@@ -10,15 +10,14 @@
  </section>
 
  <MapView id="map" disable-controls :bounds="bounds">
- <MapAreaMarker :area="result.area" @ready="zoomTo" />
+ <MapAreaMarker :area="result.area" />
  </MapView>
  </section>
  </LocationPage>
  </section>
 </template>
 
 <script lang="ts" setup>
-import type { Bounds, Polygon } from 'leaflet';
 import { GetAreaDocument } from '~/graphql/generated';
 
 const route = useRoute()
@@ -27,11 +26,7 @@ const { result } = useQuery(GetAreaDocument, () => ({
  slug: route.params.slug as string,
 }))
 
-const bounds = ref<Bounds>()
-
-function zoomTo(polygon: Polygon) {
- bounds.value = polygon.getBounds()
-}
+const bounds = computed(() => result.value?.area.points && getBounds(result.value.area.points))
 
 definePageMeta({
  layout: 'confined',

plugins/svg.ts

@@ -1,4 +1,4 @@
-import { Directive } from 'vue'
+import type { Directive } from 'vue'
 
 interface Config {
  height: number