fix

src/components/GameMapPanel.vue

@@ -32,8 +32,11 @@ const props = defineProps<{
   screenPosition: number
 }>()
 
+const GRID_SIZE = 20
+
 const emit = defineEmits<{
   saveItem: [item: MapItem, hidden?: boolean]
+  dragging: [value: boolean]
   giveApplication: [team: Team, application: Application]
   addStep: []
   edit: []
@@ -51,6 +54,7 @@ const emit = defineEmits<{
 
 const mapScale = ref(1)
 const mapOffset = ref({ x: 0, y: 0 })
+const mapField = ref<HTMLElement>()
 const previewScreen = computed(
   () => props.screens.find((screen) => screen.status === 'connected') || props.screens[0],
 )
@@ -69,30 +73,39 @@ const screenPlanModeOptions = [
   { label: 'Текст', value: 'SCREEN_MODE_TEXT' },
 ]
 let dragState:
-  { item: MapItem; startX: number; startY: number; itemX: number; itemY: number } | undefined
+  { item: MapItem; offsetX: number; offsetY: number } | undefined
 let panState: { startX: number; startY: number; offsetX: number; offsetY: number } | undefined
 
+function getMapCoordinate(event: PointerEvent) {
+  const field = mapField.value
+  if (!field) return
+  const rect = field.getBoundingClientRect()
+  return {
+    x: (event.clientX - rect.left - field.clientLeft - mapOffset.value.x) / mapScale.value,
+    y: (event.clientY - rect.top - field.clientTop - mapOffset.value.y) / mapScale.value,
+  }
+}
+
 function startMapDrag(item: MapItem, event: PointerEvent) {
+  const point = getMapCoordinate(event)
+  if (!point) return
   dragState = {
     item,
-    startX: event.clientX,
-    startY: event.clientY,
-    itemX: item.x || 0,
-    itemY: item.y || 0,
+    offsetX: point.x - (item.x || 0),
+    offsetY: point.y - (item.y || 0),
   }
+  emit('dragging', true)
   window.addEventListener('pointermove', moveMapDrag)
   window.addEventListener('pointerup', endMapDrag, { once: true })
+  window.addEventListener('pointercancel', endMapDrag, { once: true })
 }
 
 function moveMapDrag(event: PointerEvent) {
   if (!dragState) return
-  const step = dragState.item.kind === 'team' ? 20 : 1
-  dragState.item.x =
-    Math.round((dragState.itemX + (event.clientX - dragState.startX) / mapScale.value) / step) *
-    step
-  dragState.item.y =
-    Math.round((dragState.itemY + (event.clientY - dragState.startY) / mapScale.value) / step) *
-    step
+  const point = getMapCoordinate(event)
+  if (!point) return
+  dragState.item.x = Math.round((point.x - dragState.offsetX) / GRID_SIZE) * GRID_SIZE
+  dragState.item.y = Math.round((point.y - dragState.offsetY) / GRID_SIZE) * GRID_SIZE
 }
 
 function endMapDrag() {
@@ -100,6 +113,9 @@ function endMapDrag() {
   const item = dragState.item
   dragState = undefined
   window.removeEventListener('pointermove', moveMapDrag)
+  window.removeEventListener('pointerup', endMapDrag)
+  window.removeEventListener('pointercancel', endMapDrag)
+  emit('dragging', false)
   emit('saveItem', item)
 }
 
@@ -148,8 +164,12 @@ function zoomMap(event: WheelEvent) {
 }
 
 onBeforeUnmount(() => {
+  if (dragState) emit('dragging', false)
   window.removeEventListener('pointermove', moveMapDrag)
+  window.removeEventListener('pointerup', endMapDrag)
+  window.removeEventListener('pointercancel', endMapDrag)
   window.removeEventListener('pointermove', moveMapPan)
+  window.removeEventListener('pointerup', endMapPan)
 })
 </script>
 
@@ -165,7 +185,7 @@ onBeforeUnmount(() => {
           <n-button size="small" @click="resetMapView">Сбросить</n-button>
         </n-space>
       </n-flex>
-      <div class="map-field" @pointerdown="startMapPan" @wheel="zoomMap">
+      <div ref="mapField" class="map-field" @pointerdown="startMapPan" @wheel="zoomMap">
         <div
           class="map-canvas"
           :style="{ transform: `translate(${mapOffset.x}px, ${mapOffset.y}px) scale(${mapScale})` }"

src/components/GamePage.vue

@@ -124,6 +124,7 @@ const previewQuestions = ref<ResultsQuestion[]>([])
 const previewTeams = ref<TeamResult[]>([])
 const mapItems = ref<MapItem[]>([])
 const mapSaving = ref(false)
+const mapDragging = ref(false)
 const screenVolume = ref(100)
 const screenPosition = ref(0)
 
@@ -326,8 +327,9 @@ async function bindScannedScreen(screenID: string, accessToken: string) {
 }
 
 async function getGameMap() {
-  if (mapSaving.value) return
+  if (mapSaving.value || mapDragging.value) return
   const res = await client.GetGameMap({ gameID: Number(gameId) })
+  if (mapSaving.value || mapDragging.value) return
   mapItems.value = res.items || []
 }
 getGameMap()
@@ -870,6 +872,7 @@ useSimplePolling(() => {
               :screen-volume="screenVolume"
               :screen-position="screenPosition"
               @save-item="saveMapItemAndReload"
+              @dragging="mapDragging = $event"
               @give-application="giveApplication"
               @add-step="addScreenPlanStep"
               @edit="editScreenPlan"

src/components/TicketPage.vue

@@ -94,6 +94,10 @@ onMounted(load)
   margin-top: 0;
 }
 
+.ticket-page > .width700 {
+  max-width: calc(100% - 16px);
+}
+
 .ticket-card {
   margin: 15px 0;
 }