fix lint errors

src/aframe-streetmix-parsers.js

@@ -2,7 +2,6 @@
 
 // Orientation - default model orientation is "outbound" (away from camera)
 var streetmixParsersTested = require('./tested/aframe-streetmix-parsers-tested');
-var streetmixUtils = require('./tested/streetmix-utils');
 var { segmentVariants } = require('./segments-variants.js');
 
 function cloneMixinAsChildren({
@@ -265,10 +264,6 @@ function getRandomArbitrary(min, max) {
   return Math.random() * (max - min) + min;
 }
 
-function getRandomElem(arr) {
-  return arr[getRandomIntInclusive(0, arr.length - 1)];
-}
-
 function getZPositions(start, end, step) {
   const len = Math.floor((end - start) / step) + 1;
   var arr = Array(len)
@@ -451,15 +446,15 @@ function addLinearStreetAnimation(
   const startingDistanceToTravel = Math.abs(halfStreet - zPos);
   const startingDuration = (startingDistanceToTravel / speed) * 1000;
 
-  const animationAttrs_1 = {
+  const animationAttrs1 = {
     property: 'position',
     easing: 'linear',
     loop: 'false',
     from: { x: xPos, y: yVal, z: zPos },
     to: { z: halfStreet },
     dur: startingDuration
   };
-  const animationAttrs_2 = {
+  const animationAttrs2 = {
     property: 'position',
     easing: 'linear',
     loop: 'true',
@@ -468,8 +463,8 @@ function addLinearStreetAnimation(
     delay: startingDuration,
     dur: totalStreetDuration
   };
-  reusableObjectEl.setAttribute('animation__1', animationAttrs_1);
-  reusableObjectEl.setAttribute('animation__2', animationAttrs_2);
+  reusableObjectEl.setAttribute('animation__1', animationAttrs1);
+  reusableObjectEl.setAttribute('animation__2', animationAttrs2);
 
   return reusableObjectEl;
 }
@@ -506,7 +501,7 @@ function createDriveLaneElement(
     'angled-rear-right': 120
   };
   let rotationY;
-  if (lineVariant == 'sideways') {
+  if (lineVariant === 'sideways') {
     rotationY = rotationVariants['sideways'][direction];
   } else {
     rotationY = rotationVariants[lineVariant];
@@ -525,7 +520,7 @@ function createDriveLaneElement(
 
   const driveLaneParentEl = document.createElement('a-entity');
 
-  if (variantList.length == 1) {
+  if (variantList.length === 1) {
     // if there is no cars
     return driveLaneParentEl;
   }
@@ -611,7 +606,7 @@ function createDriveLaneElement(
     );
     const randPlaces = allPlaces.slice(0, count);
     const carSizeZ =
-      lineVariant == 'sideways' || lineVariant.includes('angled')
+      lineVariant === 'sideways' || lineVariant.includes('angled')
         ? 'width'
         : 'length';
 
@@ -971,7 +966,7 @@ function createSeparatorElement(
 
 // show warning message if segment or variantString are not supported
 function supportCheck(segmentType, segmentVariantString) {
-  if (segmentType == 'separator') return;
+  if (segmentType === 'separator') return;
   // variants supported in 3DStreet
   const supportedVariants = segmentVariants[segmentType];
   if (!supportedVariants) {
@@ -1038,7 +1033,7 @@ function processSegments(
     // elevation property from streetmix segment
     const elevation = segments[i].elevation;
 
-    elevationLevels = [0, 0.2, 0.4];
+    const elevationLevels = [0, 0.2, 0.4];
     const elevationPosY = elevationLevels[elevation];
 
     // add y elevation position as a data attribute to segment entity
@@ -1614,20 +1609,20 @@ function processSegments(
 
       // calculate position X and rotation Z for T-markings
       let markingPosX = segmentWidthInMeters / 2;
-      if (markingsRotZ == 90 && variantList[1] == 'right') {
+      if (markingsRotZ === 90 && variantList[1] === 'right') {
         markingsRotZ = -90;
         markingPosX = -markingPosX + 0.75;
       } else {
         markingPosX = markingPosX - 0.75;
       }
 
-      if (variantList[0] == 'sideways' || variantList[0].includes('angled')) {
+      if (variantList[0] === 'sideways' || variantList[0].includes('angled')) {
         carStep = 3;
         markingLength = segmentWidthInMeters;
         markingPosX = 0;
         parkingMixin = 'markings solid-stripe';
       }
-      markingPosXY = markingPosX + ' 0';
+      const markingPosXY = markingPosX + ' 0';
       const clonedStencilRadius = length / 2 - carStep;
 
       segmentParentEl.append(
@@ -1715,8 +1710,6 @@ function processSegments(
   // create new brown box to represent ground underneath street
   const dirtBox = document.createElement('a-box');
   const xPos = cumulativeWidthInMeters / 2;
-  console.log('xPos', xPos);
-  console.log('`${xPos} -1.1 0`', `${xPos} -1.1 0`);
   dirtBox.setAttribute('position', `${xPos} -1.1 0`); // what is x? x = 0 - cumulativeWidthInMeters / 2
   dirtBox.setAttribute('height', 2); // height is 2 meters from y of -0.1 to -y of 2.1
   dirtBox.setAttribute('width', cumulativeWidthInMeters);
@@ -1788,8 +1781,9 @@ function processBuildings(left, right, streetWidth, showGround, length) {
         'compound-wall': 'ground-asphalt-material'
       };
 
+      let groundParentEl;
       if (currentValue === 'waterfront') {
-        var groundParentEl = document.createElement('a-ocean-box');
+        groundParentEl = document.createElement('a-ocean-box');
         groundParentEl.setAttribute('geometry', {
           primitive: 'box',
           depth: length,
@@ -1801,7 +1795,7 @@ function processBuildings(left, right, streetWidth, showGround, length) {
         });
         groundParentEl.setAttribute('position', { y: -3 });
       } else {
-        var groundParentEl = document.createElement('a-box');
+        groundParentEl = document.createElement('a-box');
         groundParentEl.setAttribute('depth', length);
         groundParentEl.setAttribute('height', 2);
         groundParentEl.setAttribute('width', length / 2);

src/assets.js

@@ -262,7 +262,6 @@ function buildAssetHTML(assetUrl, categories) {
   }
 
   // JSON with grouped mixin id's. Used to create grouped mixins in Editor right panel
-  const groupedAssetsJSON = {};
   let existsCategoryArray = Object.keys(assetsObj);
 
   if (categories) {
@@ -274,8 +273,6 @@ function buildAssetHTML(assetUrl, categories) {
   }
 
   let assetsHTML = '';
-  const assetsCategoryHTML = '';
-  const mixinList = [];
   for (const categoryName in assetsObj) {
     if (existsCategoryArray.includes(categoryName)) {
       const assetsCategoryHTML = assetsObj[categoryName];

src/components/screentock.js

@@ -117,15 +117,15 @@ AFRAME.registerComponent('screentock', {
       renderer.domElement
     );
 
-    if (type == 'img') {
+    if (type === 'img') {
       imgElement.src = screenshotCanvas.toDataURL();
     }
-    if (type == 'png') {
+    if (type === 'png') {
       downloadImageDataURL(
         saveFilename,
         screenshotCanvas.toDataURL('image/png')
       );
-    } else if (type == 'jpg') {
+    } else if (type === 'jpg') {
       downloadImageDataURL(
         saveFilename,
         screenshotCanvas.toDataURL('image/jpeg', 0.95)

src/components/street-geo.js

@@ -1,17 +1,18 @@
-/* global AFRAME, THREE */
-const MAPBOX_ACCESS_TOKEN_VALUE = 'pk.eyJ1Ijoia2llcmFuZmFyciIsImEiOiJjazB0NWh2YncwOW9rM25sd2p0YTlxemk2In0.mLl4sNGDFbz_QXk0GIK02Q';
+/* global AFRAME */
+const MAPBOX_ACCESS_TOKEN_VALUE =
+  'pk.eyJ1Ijoia2llcmFuZmFyciIsImEiOiJjazB0NWh2YncwOW9rM25sd2p0YTlxemk2In0.mLl4sNGDFbz_QXk0GIK02Q';
 const GOOGLE_API_KEY = 'AIzaSyAQshwLVKTpwTfPJxFEkEzOdP_cgmixTCQ';
 
 /*
  * Street-geo component
  *
- *  the component accept longitude, latitude, elevation and an array of map types to indicate 
+ *  the component accept longitude, latitude, elevation and an array of map types to indicate
  *  which child maps to spawn. Possible values for maps array: 'mapbox2d', 'google3d'.
  *  The component assigns the class 'autocreated' to its child elements.
- *  All attribute values can be changed at runtime and the component will update 
+ *  All attribute values can be changed at runtime and the component will update
  *  the child elements (map entities) and their corresponding parameters.
  *  The 'elevation' attribute is only used for the 'google3d' tiles element for now.
- *  
+ *
  *  to add support for a new map type, you need to take the following steps:
  *  - add map name to this.mapTypes variable
  *  - add creating function with name: <mapName>Create
@@ -27,17 +28,16 @@ AFRAME.registerComponent('street-geo', {
     maps: { type: 'array', default: [] }
   },
   init: function () {
-    /* 
+    /*
       Function names for the given function types must have the following format:
       create function: <mapType>Create,
       update function: <mapType>Update,
     */
-    this.mapTypes = ['mapbox2d', 'google3d'];  
-    this.elevationHeightConstant = 32.49158;  
+    this.mapTypes = ['mapbox2d', 'google3d'];
+    this.elevationHeightConstant = 32.49158;
   },
   update: function (oldData) {
     const data = this.data;
-    const el = this.el;
 
     const updatedData = AFRAME.utils.diff(oldData, data);
 
@@ -47,14 +47,17 @@ AFRAME.registerComponent('street-geo', {
       if (data.maps.includes(mapType) && !this[mapType]) {
         // create Map element and save a link to it in this[mapType]
         this[mapType] = createMapFunction();
-      } else if (data.maps.includes(mapType) && (updatedData.longitude || updatedData.latitude || updatedData.elevation)) {
+      } else if (
+        data.maps.includes(mapType) &&
+        (updatedData.longitude || updatedData.latitude || updatedData.elevation)
+      ) {
         // call update map function with name: <mapType>Update
         this[mapType + 'Update'].bind(this)();
       } else if (this[mapType] && !data.maps.includes(mapType)) {
         // remove element from DOM and from this object
         this.el.removeChild(this[mapType]);
         this[mapType] = null;
-      }     
+      }
     }
   },
   mapbox2dCreate: function () {
@@ -63,9 +66,14 @@ AFRAME.registerComponent('street-geo', {
 
     const mapbox2dElement = document.createElement('a-entity');
     mapbox2dElement.setAttribute('data-layer-name', 'Mapbox Satellite Streets');
-    mapbox2dElement.setAttribute('geometry', 'primitive: plane; width: 512; height: 512;');
-    mapbox2dElement.setAttribute('material', 'color: #ffffff; shader: flat; side: both; transparent: true;');
-    //mapbox2dElement.setAttribute('position', '-7 -1 -2');
+    mapbox2dElement.setAttribute(
+      'geometry',
+      'primitive: plane; width: 512; height: 512;'
+    );
+    mapbox2dElement.setAttribute(
+      'material',
+      'color: #ffffff; shader: flat; side: both; transparent: true;'
+    );
     mapbox2dElement.setAttribute('rotation', '-90 -4.25 0');
     mapbox2dElement.setAttribute('anisotropy', '');
     mapbox2dElement.setAttribute('mapbox', {
@@ -77,7 +85,7 @@ AFRAME.registerComponent('street-geo', {
     });
     mapbox2dElement.classList.add('autocreated');
     el.appendChild(mapbox2dElement);
-    return mapbox2dElement;    
+    return mapbox2dElement;
   },
   google3dCreate: function () {
     const data = this.data;
@@ -92,9 +100,9 @@ AFRAME.registerComponent('street-geo', {
       height: data.elevation - this.elevationHeightConstant,
       googleApiKey: GOOGLE_API_KEY,
       geoTransform: 'WGS84Cartesian',
-        maximumSSE: 48,
-        maximumMem: 400,
-        cameraEl: '#camera'
+      maximumSSE: 48,
+      maximumMem: 400,
+      cameraEl: '#camera'
     });
     google3dElement.classList.add('autocreated');
     el.appendChild(google3dElement);
@@ -103,16 +111,15 @@ AFRAME.registerComponent('street-geo', {
   google3dUpdate: function () {
     const data = this.data;
     this.google3d.setAttribute('loader-3dtiles', {
-      lat: data.latitude, 
+      lat: data.latitude,
       long: data.longitude,
-      height: data.elevation - this.elevationHeightConstant,
+      height: data.elevation - this.elevationHeightConstant
     });
   },
   mapbox2dUpdate: function () {
     const data = this.data;
     this.mapbox2d.setAttribute('mapbox', {
       center: `${data.longitude}, ${data.latitude}`
     });
-
   }
 });

src/components/streetplan-loader.js

@@ -1,6 +1,5 @@
-/* global AFRAME, THREE, XMLHttpRequest */
+/* global AFRAME, XMLHttpRequest */
 var streetplanUtils = require('../streetplan/streetplan-utils.js');
-var exampleJSON = require('../streetplan/exampleJSON.json');
 
 AFRAME.registerComponent('streetplan-loader', {
   dependencies: ['street'],
@@ -23,10 +22,9 @@ AFRAME.registerComponent('streetplan-loader', {
 
     const streetplanName = streetData.name;
     // streetplan alternative name
-    const streetplanAltName = streetData.altName;
+    // const streetplanAltName = streetData.altName;
 
     console.log('streetplanName', streetplanName);
-    // el.setAttribute('streetplan-loader', 'name', streetplanName);
 
     let currentSceneTitle;
     const sceneEl = this.el.sceneEl;
@@ -63,17 +61,10 @@ AFRAME.registerComponent('streetplan-loader', {
     // First to find the proper path, once to actually load the street, and then subsequent updates such as street name
     const that = this;
     const data = this.data;
-    const el = this.el;
-
-    // /*  ***** debugging *****  */
-    // setTimeout(()=> {
-    //   this.streetplanResponseParse(exampleJSON);
-    // }, 1000);
-    // return;
 
     // load from URL encoded Streetplan JSON
     if (data.streetplanEncJSON) {
-      const streetplanJSON = decodeURIComponent(encodedString);
+      const streetplanJSON = decodeURIComponent(data.streetplanEncJSON);
       this.streetplanResponseParse(JSON.parse(streetplanJSON));
       return;
     }

src/components/svg-extruder.js

@@ -18,10 +18,7 @@ AFRAME.registerComponent('svg-extruder', {
     lineColor: { type: 'color', default: 'black' }
   },
   init: function () {
-    const data = this.data;
     const el = this.el;
-    const svgString = data.svgString;
-    const lineColor = data.lineColor;
     this.loader = new SVGLoader();
 
     el.removeAttribute('material');
@@ -162,7 +159,6 @@ AFRAME.registerComponent('svg-extruder', {
     // No need to update.
     // if (Object.keys(oldData).length === 0) { return; }
 
-    const el = this.el;
     const svgString = this.data.svgString;
     if (svgString) this.extrudeFromSVG(svgString);
   }

src/editor/components/MainWrapper.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useAuthContext } from '../contexts/index.js';
 import Main from './Main';
 

src/editor/components/components/AddLayerButton/AddLayerButton.component.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styles from './AddLayerButton.module.scss';
 import { Button } from '../Button';
 import { Circle20Icon } from '../../../icons';