prep for custom stencils ui

3DStreet · Jan 27, 2025 · ef4aef9 · ef4aef9
1 parent e5f24a5
commit ef4aef9
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 70 deletions.
diff --git a/src/components/managed-street.js b/src/components/managed-street.js
@@ -949,7 +949,7 @@ function parseStreetmixSegments(segments, length) {
     if (segments[i].type === 'drive-lane' && variantList[1] === 'sharrow') {
       segmentParentEl.setAttribute(
         'street-generated-stencil',
-        `model: sharrow; length: ${length}; cycleOffset: 0.2; spacing: 15; direction: ${direction}`
+        `modelsArray: sharrow; length: ${length}; cycleOffset: 0.2; spacing: 15; direction: ${direction}`
       );
     } else if (
       segments[i].type === 'bike-lane' ||
@@ -960,7 +960,7 @@ function parseStreetmixSegments(segments, length) {
       segmentColor = getSegmentColor(variantList[1]);
       segmentParentEl.setAttribute(
         'street-generated-stencil',
-        `model: bike-arrow; length: ${length}; cycleOffset: 0.3; spacing: 20; direction: ${direction};`
+        `modelsArray: bike-arrow; length: ${length}; cycleOffset: 0.3; spacing: 20; direction: ${direction};`
       );
       segmentParentEl.setAttribute(
         'street-generated-clones',
@@ -1017,12 +1017,12 @@ function parseStreetmixSegments(segments, length) {
       }
       segmentParentEl.setAttribute(
         'street-generated-stencil',
-        `model: ${markerMixinId}; length: ${length}; cycleOffset: 0.4; spacing: 20; direction: ${direction};`
+        `modelsArray: ${markerMixinId}; length: ${length}; cycleOffset: 0.4; spacing: 20; direction: ${direction};`
       );
       if (variantList[1] === 'shared') {
         segmentParentEl.setAttribute(
           'street-generated-stencil__2',
-          `model: ${markerMixinId}; length: ${length}; cycleOffset: 0.6; spacing: 20; direction: ${direction}; facing: 180;`
+          `modelsArray: ${markerMixinId}; length: ${length}; cycleOffset: 0.6; spacing: 20; direction: ${direction}; facing: 180;`
         );
       }
     } else if (segments[i].type === 'divider' && variantList[0] === 'bollard') {
@@ -1137,7 +1137,7 @@ function parseStreetmixSegments(segments, length) {
       );
       segmentParentEl.setAttribute(
         'street-generated-stencil',
-        `stencils: word-only, word-taxi, word-bus; length: ${length}; spacing: 40; padding: 10; direction: ${direction}`
+        `modelsArray: word-only, word-taxi, word-bus; length: ${length}; spacing: 40; padding: 10; direction: ${direction}`
       );
     } else if (segments[i].type === 'drive-lane') {
       segmentParentEl.setAttribute(
@@ -1165,7 +1165,7 @@ function parseStreetmixSegments(segments, length) {
       );
       segmentParentEl.setAttribute(
         'street-generated-stencil',
-        `stencils: word-loading-small, word-only-small; length: ${length}; spacing: 40; padding: 10; direction: ${direction}`
+        `modelsArray: word-loading-small, word-only-small; length: ${length}; spacing: 40; padding: 10; direction: ${direction}`
       );
     } else if (segments[i].type === 'sidewalk' && variantList[0] !== 'empty') {
       segmentParentEl.setAttribute(
@@ -1346,12 +1346,12 @@ function parseStreetmixSegments(segments, length) {
       if (variantList[1] === 'left') {
         segmentParentEl.setAttribute(
           'street-generated-stencil',
-          `model: ${parkingMixin}; length: ${length}; cycleOffset: 1; spacing: ${carStep}; positionX: ${markingPosX}; facing: ${markingsRotZ + 90}; stencilHeight: ${markingLength};`
+          `modelsArray: ${parkingMixin}; length: ${length}; cycleOffset: 1; spacing: ${carStep}; positionX: ${markingPosX}; facing: ${markingsRotZ + 90}; stencilHeight: ${markingLength};`
         );
       } else {
         segmentParentEl.setAttribute(
           'street-generated-stencil',
-          `model: ${parkingMixin}; length: ${length}; cycleOffset: 1; spacing: ${carStep}; positionX: ${markingPosX}; facing: ${markingsRotZ + 90}; stencilHeight: ${markingLength};`
+          `modelsArray: ${parkingMixin}; length: ${length}; cycleOffset: 1; spacing: ${carStep}; positionX: ${markingPosX}; facing: ${markingsRotZ + 90}; stencilHeight: ${markingLength};`
         );
       }
     }

diff --git a/src/components/street-generated-stencil.js b/src/components/street-generated-stencil.js
@@ -1,13 +1,11 @@
 /* global AFRAME */
 
-// a-frame component to generate cloned models along a street
-// this moves logic from aframe-streetmix-parsers into this component
-
+// generate cloned stencils on a street surface
 AFRAME.registerComponent('street-generated-stencil', {
   multiple: true,
   schema: {
-    model: {
-      type: 'string',
+    modelsArray: {
+      type: 'array',
       oneOf: [
         'sharrow',
         'bike-arrow',
@@ -36,10 +34,6 @@ AFRAME.registerComponent('street-generated-stencil', {
         'solid-stripe'
       ]
     },
-    stencils: {
-      // if present, then use this array of stencils instead of 1 model
-      type: 'array'
-    },
     padding: {
       // distance between stencils within array
       default: 0,
@@ -73,11 +67,6 @@ AFRAME.registerComponent('street-generated-stencil', {
       default: 0, // this is a Y Rotation value in degrees -- UI could offer a dropdown with options for 0, 90, 180, 270
       type: 'number'
     },
-    randomFacing: {
-      // if true, facing is ignored and a random Y Rotation is applied to each clone
-      default: false,
-      type: 'boolean'
-    },
     stencilHeight: {
       default: 0,
       type: 'number'
@@ -87,10 +76,6 @@ AFRAME.registerComponent('street-generated-stencil', {
       type: 'string',
       oneOf: ['none', 'inbound', 'outbound']
     }
-    // seed: {  // seed not yet supported
-    //   default: 0,
-    //   type: 'number'
-    // }
   },
   init: function () {
     this.createdEntities = [];
@@ -138,7 +123,7 @@ AFRAME.registerComponent('street-generated-stencil', {
     this.remove();
 
     // Use either stencils array or single model
-    let stencilsToUse = data.stencils.length > 0 ? data.stencils : [data.model];
+    let stencilsToUse = data.modelsArray;
 
     // Reverse stencil order if inbound
     if (data.direction === 'inbound') {
@@ -181,17 +166,14 @@ AFRAME.registerComponent('street-generated-stencil', {
           });
         }
 
-        // Set rotation - either random, specified facing, or inbound/outbound
+        // Set rotation - either specified facing, or inbound/outbound
         let rotationY = data.facing;
         if (data.direction === 'inbound') {
           rotationY = 180 + data.facing;
         }
         if (data.direction === 'outbound') {
           rotationY = 0 - data.facing;
         }
-        if (data.randomFacing) {
-          rotationY = Math.random() * 360;
-        }
         clone.setAttribute('rotation', `-90 ${rotationY} 0`);
 
         // Add metadata

diff --git a/src/components/street-segment.js b/src/components/street-segment.js
@@ -54,7 +54,7 @@ const TYPES = {
       ],
       stencil: [
         {
-          stencils: 'word-only, word-taxi, word-bus',
+          modelsArray: 'word-only, word-taxi, word-bus',
           spacing: 40,
           padding: 10
         }
@@ -69,7 +69,7 @@ const TYPES = {
     generated: {
       stencil: [
         {
-          model: 'bike-arrow',
+          modelsArray: 'bike-arrow',
           cycleOffset: 0.3,
           spacing: 20
         }
@@ -114,7 +114,7 @@ const TYPES = {
       ],
       stencil: [
         {
-          model: 'parking-t',
+          modelsArray: 'parking-t',
           cycleOffset: 1,
           spacing: 6
         }
@@ -211,26 +211,14 @@ AFRAME.registerComponent('street-segment', {
 
     if (componentsToGenerate?.stencil?.length > 0) {
       componentsToGenerate.stencil.forEach((clone, index) => {
-        if (clone?.stencils?.length > 0) {
-          // case where there are multiple stencils such as bus-only
-          this.el.setAttribute(`street-generated-stencil__${index + 1}`, {
-            stencils: clone.stencils,
-            length: this.data.length,
-            spacing: clone.spacing,
-            direction: clone.direction ?? this.data.direction,
-            padding: clone.padding,
-            cycleOffset: clone.cycleOffset
-          });
-        } else {
-          this.el.setAttribute(`street-generated-stencil__${index + 1}`, {
-            model: clone.model,
-            length: this.data.length,
-            spacing: clone.spacing,
-            direction: clone.direction ?? this.data.direction,
-            count: clone.count,
-            cycleOffset: clone.cycleOffset
-          });
-        }
+        this.el.setAttribute(`street-generated-stencil__${index + 1}`, {
+          modelsArray: clone.modelsArray,
+          length: this.data.length,
+          spacing: clone.spacing,
+          direction: clone.direction ?? this.data.direction,
+          count: clone.count,
+          cycleOffset: clone.cycleOffset
+        });
       });
     }
 

diff --git a/src/editor/components/components/AddLayerPanel/defaultStreets.js b/src/editor/components/components/AddLayerPanel/defaultStreets.js
@@ -79,7 +79,7 @@ export const stroad60ftROW = {
         ],
         stencil: [
           {
-            model: 'parking-t',
+            modelsArray: 'parking-t',
             cycleOffset: 1,
             spacing: 6
           }
@@ -145,7 +145,7 @@ export const stroad60ftROW = {
         ],
         stencil: [
           {
-            model: 'parking-t',
+            modelsArray: 'parking-t',
             cycleOffset: 1,
             spacing: 6
           }
@@ -268,7 +268,7 @@ export const stroad40ftROW = {
         ],
         stencil: [
           {
-            model: 'parking-t',
+            modelsArray: 'parking-t',
             cycleOffset: 1,
             spacing: 6
           }
@@ -314,7 +314,7 @@ export const stroad40ftROW = {
         ],
         stencil: [
           {
-            model: 'parking-t',
+            modelsArray: 'parking-t',
             cycleOffset: 1,
             spacing: 6
           }
@@ -437,7 +437,7 @@ export const stroad80ftROW = {
         ],
         stencil: [
           {
-            model: 'parking-t',
+            modelsArray: 'parking-t',
             cycleOffset: 1,
             spacing: 6
           }
@@ -543,7 +543,7 @@ export const stroad80ftROW = {
         ],
         stencil: [
           {
-            model: 'parking-t',
+            modelsArray: 'parking-t',
             cycleOffset: 1,
             spacing: 6
           }
@@ -685,7 +685,7 @@ export const stroad94ftROW = {
         ],
         stencil: [
           {
-            model: 'parking-t',
+            modelsArray: 'parking-t',
             cycleOffset: 1,
             spacing: 6
           }
@@ -742,13 +742,13 @@ export const stroad94ftROW = {
       generated: {
         stencil: [
           {
-            model: 'left',
+            modelsArray: 'left',
             cycleOffset: 0.6,
             spacing: 20,
             direction: 'outbound'
           },
           {
-            model: 'left',
+            modelsArray: 'left',
             cycleOffset: 0.4,
             spacing: 20,
             direction: 'inbound'
@@ -829,7 +829,7 @@ export const stroad94ftROW = {
         ],
         stencil: [
           {
-            model: 'parking-t',
+            modelsArray: 'parking-t',
             cycleOffset: 1,
             spacing: 6
           }
@@ -971,7 +971,7 @@ export const stroad150ftROW = {
         ],
         stencil: [
           {
-            model: 'parking-t',
+            modelsArray: 'parking-t',
             cycleOffset: 1,
             spacing: 6
           }
@@ -997,7 +997,7 @@ export const stroad150ftROW = {
         ],
         stencil: [
           {
-            model: 'turn-lane-left',
+            modelsArray: 'turn-lane-left',
             cycleOffset: 1,
             spacing: 20
           }
@@ -1082,7 +1082,7 @@ export const stroad150ftROW = {
         ],
         stencil: [
           {
-            model: 'turn-lane-right',
+            modelsArray: 'turn-lane-right',
             cycleOffset: 1,
             spacing: 20
           }
@@ -1126,7 +1126,7 @@ export const stroad150ftROW = {
         ],
         stencil: [
           {
-            model: 'turn-lane-left',
+            modelsArray: 'turn-lane-left',
             cycleOffset: 1,
             spacing: 20
           }
@@ -1211,7 +1211,7 @@ export const stroad150ftROW = {
         ],
         stencil: [
           {
-            model: 'turn-lane-right',
+            modelsArray: 'turn-lane-right',
             cycleOffset: 1,
             spacing: 20
           }
@@ -1237,7 +1237,7 @@ export const stroad150ftROW = {
         ],
         stencil: [
           {
-            model: 'parking-t',
+            modelsArray: 'parking-t',
             cycleOffset: 1,
             spacing: 6
           }