current state

components/WotwDevtools/Tab/AreasWotwMap.vue

@@ -1,15 +1,19 @@
 <template>
   <div class="d-flex flex-column flex-grow-1 relative">
     <!-- Map -->
-    <wotw-map @mousemove="updateMousePosition" @click="mapClicked" ref="map" class="flex-grow-1 flex-shrink-1">
+    <wotw-map @mousemove="updateMousePosition" @dragend="updateDisplayedGraphics_Colliders" @click="mapClicked" ref="map" class="flex-grow-1 flex-shrink-1">
       <k-layer>
-        <k-line v-for="line in displayedLines" :key="line.elementDisplayIndex" :config="line"
+        <!-- <k-line v-for="line in displayedLines" :key="line.elementDisplayIndex" :config="line"
           @click="selectDisplayedObject(line.name)" @mouseout="displayElementMouseOut(line.name)"
           @mouseover="displayElementMouseOver(line.name)" />
 
         <k-circle v-for="circle in displayedCircles" :key="circle.elementDisplayIndex" :config="circle"
           @click="selectDisplayedObject(circle.name)" @mouseout="displayElementMouseOut(circle.name)"
-          @mouseover="displayElementMouseOver(circle.name)" />
+          @mouseover="displayElementMouseOver(circle.name)" /> -->
+          <k-circle x="0" y="0" radius="20" fill="white" />
+            <k-group v-for="group in displayedColliderGroups" :key="group.name">
+              <k-line v-for="line in group.lines" :key="line.name" :config="line" />
+            </k-group> 
       </k-layer>
     </wotw-map>
 
@@ -165,6 +169,8 @@ export default {
     connectionType: null,
     currentDisplayIndex: 0,
     displayedObjects: null,
+    colliderGroups: null,
+    displayedColliderGroups: null,
     renderingOverlay: false,
     shouldRenderOverlayAgainAfterRenderingCompleted: false,
     selectedObject: null,
@@ -211,16 +217,18 @@ export default {
       const { ConnectionType } = await getSeedgen()
       this.connectionType = ConnectionType
 
-      await this.updateCoreGraphics()
+      await this.updateCoreGraphics_Logic()
+      await this.updateCoreGraphics_Colliders()
       await this.updateDisplayedGraphics()
+      this.updateDisplayedGraphics_Colliders()
 
       this.renderingOverlay = false
       if (this.shouldRenderOverlayAgainAfterRenderingCompleted) {
         this.updateOverlay()
       }
     },
 
-    async updateCoreGraphics() {
+    async updateCoreGraphics_Logic() {
       try {
         // read data from the logic files
         const areasWotwContents = await window.electronApi.invoke('seedgen.getAreasFileContents')
@@ -280,6 +288,69 @@ export default {
       }
     },
 
+    async updateCoreGraphics_Colliders(){
+
+      this.colliderGroups = []
+      this.displayedColliderGroups = []
+      const colliderData = await window.electronApi.invoke('areasWotw.getColliderData')
+      for ( const collider of colliderData){
+
+        let index = 0
+        const lines = []
+        for ( const group of collider.data.vectors){
+          const points = []
+          for ( const vector of group) {
+            points.push(vector[0])
+            points.push(vector[1])
+          } 
+          
+          index += 1
+          lines.push({
+            name: `${collider.file}_${index.toString()}`,
+            points,
+            stroke: collider.data.damageDealer ? 'red' : 'green',
+            strokeWidth: 0.5,
+          })
+        }
+        this.colliderGroups.push({
+          name: collider.file,
+          lines,
+          boundingbox: {
+            x: collider.data.boundingbox.x,
+            y: collider.data.boundingbox.y,
+            width: collider.data.boundingbox.width,
+            height: collider.data.boundingbox.height,
+          },
+        })
+      }
+    },
+
+    updateDisplayedGraphics_Colliders(_event, displayedArea){
+      if(!displayedArea){return}
+      const displayedAreaCenter = {x: displayedArea.x + displayedArea.width /2, y: displayedArea.y + displayedArea.height / 2 }
+      if (this.displayedColliderGroups){
+        for (let i = this.displayedColliderGroups.length - 1; i >= 0; i--){
+          if (!this.boundigboxInDisplayArea(this.displayedColliderGroups[i].boundingbox, displayedAreaCenter)){
+            this.displayedColliderGroups.splice(i, 1)
+          }
+        }
+      }
+      for (const group of this.colliderGroups){
+        if (this.boundigboxInDisplayArea(group.boundingbox, displayedAreaCenter)){
+          if (!this.displayedColliderGroups.some(g => g.name === group.name)){
+            this.displayedColliderGroups.push({...group})
+          }
+        }
+      }
+    },
+
+    boundigboxInDisplayArea(box, displayedAreaCenter){
+      const boxCenter = {x: box.x + box.width /2, y: box.y + box.height / 2 }
+      const maxDisance = 200
+      const distance = Math.sqrt((boxCenter.x - displayedAreaCenter.x) ** 2 + (boxCenter.y - displayedAreaCenter.y) ** 2)
+      return distance <= maxDisance
+    },
+
     updateDisplayedGraphics() {
       // add graphical data to the elements that should be displayed
 

components/WotwMap.vue

@@ -9,7 +9,7 @@
       </template>
     </v-snackbar>
     <div ref="timelineStageContainer" class="stage-container fill-height">
-      <k-stage ref="stage" :config="stageConfig" @wheel="onStageWheel" @mouseMove="e => emitMousePosition('mousemove', e)" @click="e => emitMousePosition('click', e)">
+      <k-stage ref="stage" :config="stageConfig" @dragend="e => emitStageArea('dragend', e)" @wheel="onStageWheel" @mouseMove="e => emitMousePosition('mousemove', e)" @click="e => emitMousePosition('click', e)">
         <k-layer ref="layer">
           <k-image v-for="(tile, index) in mapTiles" :key="index" :config="tile" />
         </k-layer>
@@ -20,6 +20,7 @@
 </template>
 
 <script>
+
   export default {
     name: 'WotwMap',
     props: {
@@ -79,6 +80,17 @@
         const layer = this.stage.children[0]
         this.$emit(eventName, event, layer.getRelativePointerPosition())
       },
+      emitStageArea(eventName, event) {
+        const container = this.stage.container()
+        const stageRect = container.getBoundingClientRect()
+        const area = {
+          x: this.stage.x() / this.stage.scaleY() - stageRect.left,
+          y: this.stage.y() / this.stage.scaleX() - stageRect.top,
+          width: stageRect.width / this.stage.scaleX(),
+          height: stageRect.height / this.stage.scaleY(),
+        }
+        this.$emit(eventName, event, area)
+      },
       async loadImage(x, y) {
         try {
           const image = await this.getImage(x, y)
@@ -111,7 +123,7 @@
         this.stageConfig.height = this.$refs.timelineStageContainer.clientHeight
       },
       onStageWheel(e) {
-        const scaleBy = 0.96
+        const scaleBy = 0.9
         const stage = this.stage
         const oldScale = stage.scaleX()
         const pointer = stage.getPointerPosition()

electron/src/api/areasWotw.js

@@ -0,0 +1,7 @@
+import { AreasWotwService } from '~/electron/src/lib/AreasWotwService'
+
+export default {
+  async getColliderData() {
+    return await AreasWotwService.getColliderData()
+  },
+}

electron/src/api/index.js

@@ -13,6 +13,7 @@ import randoIpc from './randoIpc'
 import seedgen from './seedgen'
 import tas from './tas'
 import stats from './stats'
+import areasWotw from './areasWotw'
 
 export default {
   settings,
@@ -30,4 +31,5 @@ export default {
   seedgen,
   tas,
   stats,
+  areasWotw,
 }

electron/src/lib/AreasWotwService.js

@@ -0,0 +1,28 @@
+import path from 'path'
+import fs from 'fs/promises'
+
+const directoryPath = 'D:\\SteamLibrary\\steamapps\\common\\Ori and the Will of the Wisps\\sceneCollisions'
+
+export class AreasWotwService {
+  //   public static getCollidersFilePath() {
+  //     return path.resolve(RANDOMIZER_BASE_PATH, './map/colliders.wotw')
+  //   }
+
+  static async getColliderData() {
+
+      const files = await fs.readdir(directoryPath)
+      const data = []
+      for (const file of files){
+        try {
+          const filepath = path.join(directoryPath, file)
+          const content = await fs.readFile(filepath, {encoding: 'utf-8'})
+          const jsonString = JSON.parse(content)
+          data.push({file, data: jsonString})
+
+        } catch (err) {
+          console.error(`Error parsing JSON in ${file}:`, err)
+        }
+      }
+      return data
+  }
+}