@hatiolab/things-scene 8.0.0-alpha.3 → 8.0.0-alpha.5

package/monitor-extension/devtools.html

@@ -23,13 +23,17 @@
         border: 1px solid #000;
         border-radius: 4px;
         width: 100%;
+        max-width: 100%;
+        max-height: 200px;
         box-sizing: border-box;
       }
 
       table {
+        flex: 1;
         width: 100%;
         border-collapse: collapse;
         margin-top: 20px;
+        overflow: auto;
       }
 
       th,
@@ -53,17 +57,12 @@
     <!-- sceneResidents 데이터를 보여줄 테이블 -->
     <h2>Scene Residents Data</h2>
     <table id="residentsTable">
-      <thead>
-        <tr>
-          <th>Type</th>
-          <th>Up</th>
-          <th>Down</th>
-          <th>Difference (Up - Down)</th>
-        </tr>
-      </thead>
-      <tbody>
-        <!-- 데이터가 동적으로 추가됩니다 -->
-      </tbody>
+      <tr>
+        <th>Type</th>
+        <th>Up</th>
+        <th>Down</th>
+        <th>Difference (Up - Down)</th>
+      </tr>
     </table>
   </body>
 </html>

package/monitor-extension/devtools.js

@@ -1,5 +1,5 @@
 chrome.devtools.panels.create('Scene', 'icons/icon48.png', 'devtools.html', function (panel) {
-  var residentChart1, residentChart2, residentChart3
+  var residentChart1, residentChart2, residentChart3, residentsTable
   var listenerRegistered = false
   var chartsInitialized = false
 
@@ -22,12 +22,11 @@ chrome.devtools.panels.create('Scene', 'icons/icon48.png', 'devtools.html', func
 
   // sceneResidents 테이블 업데이트 함수
   const updateResidentsTable = sceneResidents => {
-    console.log('updateResidentesTable', sceneResidents)
     if (typeof sceneResidents !== 'object') {
       return
     }
 
-    const table = document.getElementById('residentsTable')
+    const table = residentsTable
     table.innerHTML = '' // 기존 테이블 내용을 지움
 
     // 테이블 헤더 생성
@@ -37,12 +36,12 @@ chrome.devtools.panels.create('Scene', 'icons/icon48.png', 'devtools.html', func
 
     // sceneResidents 데이터로 테이블 행 생성
     for (const [type, residents] of Object.entries(sceneResidents)) {
-      residents.forEach(({ up, down }) => {
-        const row = document.createElement('tr')
-        const difference = up - down
-        row.innerHTML = `<td>${type}</td><td>${up}</td><td>${down}</td><td>${difference}</td>`
-        table.appendChild(row)
-      })
+      const { up, down } = residents
+      const row = document.createElement('tr')
+      const difference = up - down
+      row.innerHTML = `<td>${type}</td><td>${up}</td><td>${down}</td><td>${difference}</td>`
+
+      table.appendChild(row)
     }
   }
 
@@ -64,6 +63,7 @@ chrome.devtools.panels.create('Scene', 'icons/icon48.png', 'devtools.html', func
           ]
         },
         options: {
+          responsive: true,
           animation: false, // 애니메이션 비활성화
           scales: {
             x: {
@@ -103,6 +103,8 @@ chrome.devtools.panels.create('Scene', 'icons/icon48.png', 'devtools.html', func
     residentChart2 = createChart(ctx2, 'Scene Residents Count')
     residentChart3 = createChart(ctx3, 'ReferenceMap Residents Count')
 
+    residentsTable = window.document.getElementById('residentsTable')
+
     chartsInitialized = true
   }
 

package/monitor-extension/injected.js

@@ -1,7 +1,7 @@
 function logComponentResidents() {
   const componentResidentsCount = window.scene.Component?.residentsCount || 0
+  const sceneResidents = window.scene.Component?.residents || {}
   const sceneResidentsCount = window.scene.Scene?.residentsCount || 0
-  const sceneResidents = window.scene.Scene?.residents || {}
   const referenceMapResidentsCount = window.scene.ReferenceMap?.residentsCount || 0
   const timestamp = new Date().toISOString()
 

package/monitor-extension/popup.html

@@ -24,13 +24,16 @@
         border: 1px solid #000;
         border-radius: 4px;
         width: 100%;
+        max-height: 200px;
         box-sizing: border-box;
       }
 
       table {
+        flex: 1;
         width: 100%;
         border-collapse: collapse;
         margin-top: 20px;
+        overflow: auto;
       }
 
       th,
@@ -54,17 +57,12 @@
     <!-- sceneResidents 데이터를 보여줄 테이블 -->
     <h2>Scene Residents Data</h2>
     <table id="residentsTable">
-      <thead>
-        <tr>
-          <th>Type</th>
-          <th>Up</th>
-          <th>Down</th>
-          <th>Difference (Up - Down)</th>
-        </tr>
-      </thead>
-      <tbody>
-        <!-- 데이터가 동적으로 추가됩니다 -->
-      </tbody>
+      <tr>
+        <th>Type</th>
+        <th>Up</th>
+        <th>Down</th>
+        <th>Difference (Up - Down)</th>
+      </tr>
     </table>
   </body>
 </html>

package/monitor-extension/popup.js

@@ -1,5 +1,5 @@
 document.addEventListener('DOMContentLoaded', () => {
-  let residentChart1, residentChart2, residentChart3
+  let residentChart1, residentChart2, residentChart3, residentsTable
   let chartsInitialized = false
   let listenerRegistered = false
 
@@ -29,6 +29,7 @@ document.addEventListener('DOMContentLoaded', () => {
           ]
         },
         options: {
+          responsive: true,
           animation: false, // 애니메이션 비활성화
           scales: {
             x: {
@@ -70,6 +71,8 @@ document.addEventListener('DOMContentLoaded', () => {
       residentChart2 = createChart(ctx2, 'Scene Residents Count')
       residentChart3 = createChart(ctx3, 'ReferenceMap Residents Count')
 
+      residentsTable = window.document.getElementById('residentsTable')
+
       chartsInitialized = true // 차트가 초기화되었음을 표시
     }
 
@@ -92,7 +95,11 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // sceneResidents 테이블 업데이트 함수
     const updateResidentsTable = sceneResidents => {
-      const table = document.getElementById('residentsTable')
+      if (typeof sceneResidents !== 'object') {
+        return
+      }
+
+      const table = residentsTable
       table.innerHTML = '' // 기존 테이블 내용을 지움
 
       // 테이블 헤더 생성
@@ -102,12 +109,12 @@ document.addEventListener('DOMContentLoaded', () => {
 
       // sceneResidents 데이터로 테이블 행 생성
       for (const [type, residents] of Object.entries(sceneResidents)) {
-        residents.forEach(({ up, down }) => {
-          const row = document.createElement('tr')
-          const difference = up - down
-          row.innerHTML = `<td>${type}</td><td>${up}</td><td>${down}</td><td>${difference}</td>`
-          table.appendChild(row)
-        })
+        const { up, down } = residents
+        const row = document.createElement('tr')
+        const difference = up - down
+        row.innerHTML = `<td>${type}</td><td>${up}</td><td>${down}</td><td>${difference}</td>`
+
+        table.appendChild(row)
       }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hatiolab/things-scene",
-  "version": "8.0.0-alpha.3",
+  "version": "8.0.0-alpha.5",
   "description": "2D graphic library",
   "main": "src/index.js",
   "module": "things-scene.mjs",