Skip to content

Commit

Permalink
Merge pull request #1017 from 3DStreet/managed-street-ui-changes
Browse files Browse the repository at this point in the history 
Manage street - simpler UI
  • Loading branch information
@kfarr
kfarr authored Jan 15, 2025
2 parents bab0570 + ad71c4c commit 7a074f6
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 100 deletions.
108 changes: 35 additions & 73 deletions src/components/managed-street.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,9 +207,6 @@ function createCloneConfig(name, tags) {

AFRAME.registerComponent('managed-street', {
schema: {
width: {
type: 'number'
},
length: {
type: 'number',
default: 60
Expand All @@ -221,28 +218,9 @@ AFRAME.registerComponent('managed-street', {
sourceValue: {
type: 'string'
},
sourceId: {
type: 'string'
},
synchronize: {
type: 'boolean',
default: false
},
showVehicles: {
type: 'boolean',
default: true
},
showStriping: {
type: 'boolean',
default: true
},
enableAlignment: {
type: 'boolean',
default: true
},
showGround: {
type: 'boolean',
default: true
}
},
init: function () {
Expand All @@ -253,10 +231,10 @@ AFRAME.registerComponent('managed-street', {
this.refreshFromSource = this.refreshFromSource.bind(this);
this.onSegmentWidthChanged = this.onSegmentWidthChanged.bind(this);

if (this.data.enableAlignment && !this.el.hasAttribute('street-align')) {
if (!this.el.hasAttribute('street-align')) {
this.el.setAttribute('street-align', '');
}
if (this.data.showGround && !this.el.hasAttribute('street-ground')) {
if (!this.el.hasAttribute('street-ground')) {
this.el.setAttribute('street-ground', '');
}
if (!this.el.hasAttribute('street-label')) {
Expand Down Expand Up @@ -347,7 +325,7 @@ AFRAME.registerComponent('managed-street', {
const totalWidth = this.managedEntities.reduce((sum, segment) => {
return sum + (segment.getAttribute('street-segment').width || 0);
}, 0);
this.el.setAttribute('managed-street', 'width', totalWidth);
this.actualWidth = totalWidth;

// If we have a previous segment, check if we need to add stripe separators
// TODO: Check striping here in the future
Expand Down Expand Up @@ -410,6 +388,7 @@ AFRAME.registerComponent('managed-street', {
oldValue: event.detail.oldWidth,
newValue: event.detail.newWidth
});
this.refreshManagedEntities();
},
update: function (oldData) {
const data = this.data;
Expand Down Expand Up @@ -472,7 +451,6 @@ AFRAME.registerComponent('managed-street', {
this.actualWidth = this.managedEntities.reduce((sum, segment) => {
return sum + (segment.getAttribute('street-segment')?.width || 0);
}, 0);
console.log('actual width', this.actualWidth);
},
parseStreetObject: function (streetObject) {
// reset and delete all existing entities
Expand All @@ -483,7 +461,6 @@ AFRAME.registerComponent('managed-street', {
'data-layer-name',
'Managed Street • ' + streetObject.name
);
this.el.setAttribute('managed-street', 'width', streetObject.width);
this.el.setAttribute('managed-street', 'length', streetObject.length);

for (let i = 0; i < streetObject.segments.length; i++) {
Expand Down Expand Up @@ -739,18 +716,12 @@ AFRAME.registerComponent('managed-street', {
const streetmixName = streetmixResponseObject.name;

this.el.setAttribute('data-layer-name', 'Street • ' + streetmixName);
const streetWidth = streetmixSegments.reduce(
(streetWidth, segmentData) => streetWidth + segmentData.width,
0
);
this.el.setAttribute('managed-street', 'width', streetWidth);
// const streetWidth = streetmixSegments.reduce(
// (streetWidth, segmentData) => streetWidth + segmentData.width,
// 0
// );

const segmentEls = parseStreetmixSegments(
streetmixSegments,
data.showStriping,
data.length,
data.showVehicles
);
const segmentEls = parseStreetmixSegments(streetmixSegments, data.length);
this.el.append(...segmentEls);

this.pendingEntities = segmentEls;
Expand Down Expand Up @@ -938,7 +909,7 @@ function supportCheck(segmentType, segmentVariantString) {

// OLD: takes a street's `segments` (array) from streetmix and a `streetElementId` (string) and places objects to make up a street with all segments
// NEW: takes a `segments` (array) from streetmix and return an element and its children which represent the 3D street scene
function parseStreetmixSegments(segments, showStriping, length, showVehicles) {
function parseStreetmixSegments(segments, length) {
// create and center offset to center the street around global x position of 0
const segmentEls = [];

Expand Down Expand Up @@ -1010,19 +981,17 @@ function parseStreetmixSegments(segments, showStriping, length, showVehicles) {
// get the mixin id for the vehicle (is it a trolley or a tram?)
const objectMixinId =
segments[i].type === 'streetcar' ? 'trolley' : 'tram';
if (showVehicles) {
segmentParentEl.setAttribute(
'street-generated-clones',
`mode: random; model: ${objectMixinId}; length: ${length}; spacing: 20; direction: ${direction}; count: 1;`
);
}
segmentParentEl.setAttribute(
'street-generated-clones',
`mode: random; model: ${objectMixinId}; length: ${length}; spacing: 20; direction: ${direction}; count: 1;`
);
segmentParentEl.setAttribute(
'street-generated-rail',
`length: ${length}; gauge: ${segments[i].type === 'streetcar' ? 1067 : 1435};`
);
} else if (segments[i].type === 'turn-lane') {
segmentPreset = 'drive-lane'; // use normal drive lane road material
if (showVehicles && variantList[1] !== 'shared') {
if (variantList[1] !== 'shared') {
segmentParentEl.setAttribute(
'street-generated-clones',
`mode: random;
Expand Down Expand Up @@ -1162,29 +1131,24 @@ function parseStreetmixSegments(segments, showStriping, length, showVehicles) {
segmentPreset = 'bus-lane';
// get the color for a bus lane
segmentColor = getSegmentColor(variantList[1]);

if (showVehicles) {
segmentParentEl.setAttribute(
'street-generated-clones',
`mode: random; model: bus; length: ${length}; spacing: 15; direction: ${direction}; count: 1;`
);
}
segmentParentEl.setAttribute(
'street-generated-clones',
`mode: random; model: bus; length: ${length}; spacing: 15; direction: ${direction}; count: 1;`
);
segmentParentEl.setAttribute(
'street-generated-stencil',
`stencils: word-only, word-taxi, word-bus; length: ${length}; spacing: 40; padding: 10; direction: ${direction}`
);
} else if (segments[i].type === 'drive-lane') {
if (showVehicles) {
segmentParentEl.setAttribute(
'street-generated-clones',
`mode: random;
modelsArray: sedan-rig, box-truck-rig, self-driving-waymo-car, suv-rig, motorbike;
length: ${length};
spacing: 7.3;
direction: ${direction};
count: ${getRandomIntInclusive(2, 4)};`
);
}
segmentParentEl.setAttribute(
'street-generated-clones',
`mode: random;
modelsArray: sedan-rig, box-truck-rig, self-driving-waymo-car, suv-rig, motorbike;
length: ${length};
spacing: 7.3;
direction: ${direction};
count: ${getRandomIntInclusive(2, 4)};`
);
} else if (segments[i].type === 'food-truck') {
segmentPreset = 'drive-lane';
segmentParentEl.setAttribute(
Expand All @@ -1193,14 +1157,12 @@ function parseStreetmixSegments(segments, showStriping, length, showVehicles) {
);
} else if (segments[i].type === 'flex-zone') {
segmentPreset = 'parking-lane';
if (showVehicles) {
const objectMixinId =
variantList[0] === 'taxi' ? 'sedan-taxi-rig' : 'sedan-rig';
segmentParentEl.setAttribute(
'street-generated-clones',
`mode: random; model: ${objectMixinId}; length: ${length}; spacing: 6; direction: ${direction}; count: 4;`
);
}
const objectMixinId =
variantList[0] === 'taxi' ? 'sedan-taxi-rig' : 'sedan-rig';
segmentParentEl.setAttribute(
'street-generated-clones',
`mode: random; model: ${objectMixinId}; length: ${length}; spacing: 6; direction: ${direction}; count: 4;`
);
segmentParentEl.setAttribute(
'street-generated-stencil',
`stencils: word-loading-small, word-only-small; length: ${length}; spacing: 40; padding: 10; direction: ${direction}`
Expand Down Expand Up @@ -1426,7 +1388,7 @@ function parseStreetmixSegments(segments, showStriping, length, showVehicles) {
let previousSegment = segments[i - 1];
let separatorMixinId = getSeparatorMixinId(previousSegment, currentSegment);

if (separatorMixinId && showStriping) {
if (separatorMixinId) {
segmentParentEl.setAttribute(
'street-generated-striping',
`striping: ${separatorMixinId}; length: ${length}; segmentWidth: ${segmentWidthInMeters};`
Expand Down
4 changes: 4 additions & 0 deletions src/editor/components/components/CommonComponents.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,10 @@ export default class CommonComponents extends React.Component {
const entity = this.props.entity;
// return ['position', 'rotation', 'scale', 'visible']
return ['position', 'rotation', 'scale'].map((componentName) => {
// if entity has managed-street component, then don't show scale
if (componentName === 'scale' && entity.components['managed-street']) {
return null;
}
const schema = AFRAME.components[componentName].schema;
var data = entity.object3D[componentName];
if (componentName === 'rotation') {
Expand Down
58 changes: 31 additions & 27 deletions src/editor/components/components/ManagedStreetSidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,40 +3,44 @@ import PropertyRow from './PropertyRow';

const ManagedStreetSidebar = ({ entity }) => {
const componentName = 'managed-street';
const labelComponentName = 'street-label';
// Check if entity and its components exist
const component = entity?.components?.[componentName];
const labelComponent = entity?.components?.[labelComponentName];

return (
<div className="managed-street-sidebar">
<div className="street-controls">
<div className="details">
{component && component.schema && component.data && (
<>
<PropertyRow
key="length"
name="length"
label="Street Length"
schema={component.schema.length}
data={component.data.length}
componentname={componentName}
isSingle={false}
entity={entity}
/>
<PropertyRow
key="width"
name="width"
label="Street Width"
schema={component.schema.width}
data={component.data.width}
componentname={componentName}
isSingle={false}
entity={entity}
/>
<div className="propertyRow">
<div className="text">-----</div>
</div>
</>
)}
{component &&
component.schema &&
component.data &&
labelComponent &&
labelComponent.schema &&
labelComponent.data && (
<>
<PropertyRow
key="length"
name="length"
label="Street Length"
schema={component.schema.length}
data={component.data.length}
componentname={componentName}
isSingle={false}
entity={entity}
/>
<PropertyRow
key="enabled"
name="enabled"
label="Labels"
schema={labelComponent.schema.enabled}
data={labelComponent.data.enabled}
componentname={labelComponentName}
isSingle={false}
entity={entity}
/>
</>
)}
</div>
</div>
</div>
Expand Down

0 comments on commit 7a074f6

Please sign in to comment.