Merge pull request #14 from Algorush/bind-for-grid-renderer

add bind-for renderer to index

catalog.json

@@ -1,20 +1,4 @@
 [
-  {
-    "name": "cityhall",
-    "src": "src/models/cityhall/cityhall.gltf",
-    "bboxMin": [
-      -1.91792,
-      0.00707,
-      -1.92385
-    ],
-    "bboxMax": [
-      2.11712,
-      1.97267,
-      2.04856
-    ],
-    "dist": "dist/models/cityhall.glb",
-    "img": "dist/img/cityhall.jpg"
-  },
   {
     "name": "watertower",
     "src": "src/models/kaykit/watertower.gltf",
@@ -1182,5 +1166,21 @@
     ],
     "dist": "dist/models/base.glb",
     "img": "dist/img/base.jpg"
+  },
+  {
+    "name": "cityhall",
+    "src": "src/models/cityhall/cityhall.gltf",
+    "bboxMin": [
+      -1.0016,
+      0,
+      -1.0016
+    ],
+    "bboxMax": [
+      1.0016,
+      0.98418,
+      1.0016
+    ],
+    "dist": "dist/models/cityhall.glb",
+    "img": "dist/img/cityhall.jpg"
   }
 ]

index.html

@@ -66,9 +66,21 @@
       gridhelper="size:5;divisions:10;colorGrid:#000000;colorCenterLine:#222222;"></a-entity> -->
 
     <a-entity id="city-container" anchored="persistent: true">
-      <a-entity id="ground" grid-cursor="allowFrom: .can-select" sound="src: #select6-ogg; on: click; poolSize: 6;"
-        geometry="primitive: box; height: 0.1; width: 5; depth: 5;" class="collidable spawnable" material="visible:false"
-        gridhelper="size:5;divisions:20;colorGrid:#660066;colorCenterLine:#FF5555;"></a-entity>
+      <a-entity id="cityhall" gltf-model="./dist/models/cityhall.glb" scale="0.250 0.250 0.250"></a-entity>
+      <a-entity id="ground" sound="src: #select6-ogg; on: click; poolSize: 6;" geometry="primitive: box; height: 0.1; width: 5; depth: 5;" class="collidable spawnable" material="visible:false"
+      grid-cursor="allowFrom: .can-select" 
+      gridhelper="size:5;divisions:20;colorGrid:#660066;colorCenterLine:#FF5555;"
+      bind-for="for: item; in: grid; key: coord; updateInPlace: true"
+      >
+        <template>
+          <a-entity scale="0.125 0.125 0.125" 
+                    geometry="primitive: box; height: 0.25; width: 0.25; depth: 0.25" material="shader: standard"
+                    snap="offset: 0.125; snap: 0.25"
+                    add-model="name: {{ model }}; gridCoord: {{ coord }}"
+          ></a-entity>
+        </template>
+      </a-entity>
+
 
       <a-entity id="whiteboard" rotation="0 -70 0" scale="0.8 0.8 0.8" position="-0.5 -0.046 -4">
         <a-entity id="whiteboard-model" scale="0.15 0.15 0.2"

src/app/intersection-spawn.js

@@ -20,15 +20,6 @@ AFRAME.registerComponent('intersection-spawn', {
       // don't spawn if class specified in objects property but it is not matched intersected element
       if (data.objects && !evt.detail.intersectedEl.classList.contains(data.objects)) { return; }
 
-      // Create element.
-      const spawnEl = document.createElement('a-entity');
-
-      // Set components and properties.
-      Object.keys(data).forEach(name => {
-        if (['event', 'objects', 'gridSize', 'gridDivisions'].includes(name)) { return; }
-        AFRAME.utils.entity.setComponentProperty(spawnEl, name, data[name]); // is setAttribute a new version of "set component property"?
-      });
-
       const _worldToLocal = (originalPosition, targetEl) => {
         // snap the intersection location to the gridlines
         const helperVector = this.helperVector;
@@ -38,9 +29,7 @@ AFRAME.registerComponent('intersection-spawn', {
       };
       const targetEl = evt.detail.intersection.object.el;
       const localPos = _worldToLocal(evt.detail.intersection.point, targetEl); // convert world intersection position to local position
-      // console.log('Local Position:', localPos);
-      spawnEl.setAttribute('position', localPos)
-      targetEl.appendChild(spawnEl);
+
       const gridPos = this.localToStateGrid(localPos, data.gridSize, data.gridDivisions);
       // console.log('Grid Position:', gridPos);
 

src/app/load-model.js

@@ -0,0 +1,60 @@
+/* global AFRAME */
+/**
+ * add model to scene ground by its name and grid coordinats.
+ *
+ * `<a-entity intersection-spawn="mixin: box; material.color: red">` will spawn
+ * `<a-entity mixin="box" material="color: red">` at intersection point.
+ */
+AFRAME.registerComponent('add-model', {
+  schema: {
+    name: {type: 'string', default: ''},
+    gridCoord: {type: 'array', default: []},
+    //lat: {type: 'number', default: ''},
+    gridSize: {type: 'number', default: 5},
+    gridDivisions: {type: 'number', default: 20}
+  },
+
+  init: function () {
+    const data = this.data;
+    const el = this.el;
+    const sceneEl = el.sceneEl;
+    this.helperVector = new THREE.Vector3();
+
+      if (!data.name && data.gridCoord) { return; }
+
+      const gridPos = this.stateToLocalGrid(data.gridCoord, data.gridSize, data.gridDivisions);
+
+      el.setAttribute('position', gridPos);
+
+      if (sceneEl.catalogIsloaded) {
+          el.setAttribute('gltf-model', './' + sceneEl.systems.state.state.model.list[data.name].dist);
+      } else {
+        sceneEl.addEventListener('catalogIsLoaded', () => {
+          el.setAttribute('gltf-model', './' + sceneEl.systems.state.state.model.list[data.name].dist);
+        })
+      }
+  },
+  // Convert long / lat state grid coordinates to local grid position
+  stateToLocalGrid: function (lon_lat, gridSize, gridDivisions) {
+    // grid divisions (# of cells) ie 20 divisions
+    // grid size (meter) ie 5 meters
+    // cellsPerMeter: gridDivisions / gridSize = 4 cells per meter
+    const cellsPerMeter = gridDivisions / gridSize;
+    const snap = this.el.getAttribute('snap');
+    let snapOffset = (snap) ? snap['offset'] : 0.01;
+
+    const [posLong, posLat] = 
+      lon_lat.map((strVal) => {
+        const numVal = Number(strVal);        
+        // add - or + snap offset is used to snap element to the desired grid cell
+        return (numVal + (numVal >= 0 ? -snapOffset : snapOffset )) / cellsPerMeter;
+      });
+    // console.log(`Lat Y: ${posLat}, Long X: ${posLong}`);
+
+    const localPos = {
+      x: posLong, 
+      z: posLat * -1
+    };
+    return localPos;
+  }
+});

src/app/state.js

@@ -35,21 +35,15 @@ const MODELS = {
 const GRID_SIZE = 10; // Example grid size (10x10)
 
 // Initial grid state setup with City Hall at the center
-const INITIAL_GRID_STATE = {};
-for (let lon = -GRID_SIZE; lon <= GRID_SIZE; lon++) {
-  for (let lat = -GRID_SIZE; lat <= GRID_SIZE; lat++) {
-    // Setting up City Hall which occupies 4 central cells
-    if ((lon === 1 || lon === -1) && (lat === 1 || lat === -1)) {
-      INITIAL_GRID_STATE[`${lon},${lat}`] = {
-        model: 'cityhall', // Assuming 'cityhall' is defined in MODELS
-        rotation: 0,
-        elevation: 0
-      };
-    } else {
-      INITIAL_GRID_STATE[`${lon},${lat}`] = {};
-    }
-  }
-}
+const INITIAL_GRID_STATE = [];
+const INIT_GRID_COORDS = [[-1, -1], [-1, 1], [1, -1], [1, 1]];
+
+INIT_GRID_COORDS.forEach(lon_lat_values => {
+  INITIAL_GRID_STATE.push(
+    {coord: lon_lat_values, model: 'park_base', rotation: 0, elevation: 0}
+  );
+});
+
 
 const INITIAL_STATE = {
   color: {
@@ -96,6 +90,7 @@ AFRAME.registerState({
       },
       AFRAME.scenes[0].emit('addModel', payload);
     */
+
     addModel: function (state, payload) {
       state.model.list[payload.name] = {
         'dist': payload.dist,
@@ -107,7 +102,6 @@ AFRAME.registerState({
       console.log('Adding Grid Object:', payload);
 
       let { lon, lat, model, rotation, elevation } = payload;
-      const key = `${lon},${lat}`;
 
       if (!model) {
         model = getModelNameFromState(state);
@@ -120,8 +114,10 @@ AFRAME.registerState({
       }
       console.log('model', model);
       // Prevent modification of City Hall cells
-      if (!['1,1', '-1,1', '-1,-1', '1,-1'].includes(key)) {
-        state.grid[key] = { model, rotation, elevation };
+      if (!isCityHall(lon, lat)) {
+        state.grid.push(
+          { coord: [lon, lat], model: model, rotation: rotation, elevation: elevation }
+        );
       } else {
         console.log('Cannot place object on city hall');
       }
@@ -131,24 +127,24 @@ AFRAME.registerState({
     // Note: City Hall cells cannot be rotated or elevated
     rotateOrElevateGridObject: function (state, payload) {
       const { lon, lat, rotation, elevation } = payload;
-      const key = `${lon},${lat}`;
+      const keyCell = findGridIndex(state.grid, lon, lat);
 
-      if (state.grid[key] && !['1,1', '-1,1', '-1,-1', '1,-1'].includes(key)) {
-        state.grid[key].rotation += rotation;
-        state.grid[key].elevation += elevation;
+      if (keyCell) {
+
+        state.grid[keyCell].rotation += rotation;
+        state.grid[keyCell].elevation += elevation;
       }
     },
     // Handler to clear a cell
     // Note: City Hall cells cannot be cleared
     clearGridCell: function (state, payload) {
       const { lon, lat } = payload;
-      const key = `${lon},${lat}`;
+      const keyCell = findGridIndex(state.grid, lon, lat);
 
-      if (!['1,1', '-1,1', '-1,-1', '1,-1'].includes(key)) {
-        state.grid[key] = null;
+      if (!keyCell) {
+        state.grid.splice(keyCell, 1);
       }
-    },
-
+    }
 
   },
   computeState: function (newState, payload) {
@@ -160,6 +156,24 @@ AFRAME.registerState({
   }
 });
 
+// check for City Hall cells 
+function isCityHall(lon, lat) {
+  const cityHallCell = INIT_GRID_COORDS.findIndex(
+    (elData) => elData[0] == lon && elData[1] == lat 
+    );
+  return (cityHallCell == -1) ? false: true;
+}
+
+// find index of grid array element by grid coordinates
+function findGridIndex(gridArray, lon, lat) {
+  //  City Hall cells cannot be finded
+  if (isCityHall(lon, lat)) {
+    return null;
+  } else {
+    return gridArray.findIndex((elData) => elData.coord[0] == lon && elData.coord[1] == lat );
+  }
+}
+
 function getColorNameFromState(state) {
   const colorsKey = Object.keys(state.color.list)[state.color.index]; // 'Blue' if index = 0
   return colorsKey;
@@ -193,12 +207,16 @@ AFRAME.registerComponent('load-catalog', {
     source: {type: 'selector'}
   },
   init: function () {
+    if (!this.data.source) return;
+
     this.jsonCatalogData = JSON.parse(this.data.source.data);
     console.log(this.jsonCatalogData)
     for (let i = 0; i < this.jsonCatalogData.length; i++) {
       const modelMetadataObject = this.jsonCatalogData[i];
       AFRAME.scenes[0].emit('addModel', modelMetadataObject);
     }
+    this.el.catalogIsloaded = true;
+    this.el.emit('catalogIsLoaded');
   }
 });
 

src/index.js

@@ -11,4 +11,5 @@ require('./app/grid-cursor.js');
 require('./app/intersection-spawn.js');
 require('./app/snap.js');
 require('./app/set-rotation-from-anchor.js');
-require('./app/state.js');
+require('./app/state.js');
+require('./app/load-model.js');