Epic street editing #989
Epic street editing #989
Conversation
accepts type and index; does not yet accept custom object to represent segment and its constituent components; doesn't appear to apply child components correctly
-- instead look at working code to create new street-segments from an object in street-segment.js
to test, run on console:
> document.querySelector('[managed-street]').components['managed-street'].insertSegment(3, 'bike-lane');
Insert new segment
as a user i can detach a clone and the action is undo-able. if i save and reload I cannot undo or reattach the component unless i choose to add a new clone component or reset the segment completely.
Detach with multi command
allow ped and stencil detach
striping first cut
Co-Authored-By: Ben Kovitz <[email protected]>
Co-Authored-By: Ben Kovitz <[email protected]>
Co-Authored-By: Ben Kovitz <[email protected]>
…Managed-Street-format Converting default streets to managed street format
|
About the duplicate id issue, and I often see you updating all the ids, you could remove the id from the objects and add them afterwards: streetLayersData.forEach((entry, index) => { entry.id = index + 1; }); |
use central event dispatcher in managed-street instead of mutation observer in each component
also fix up event dispatcher concept
better justification of dirtbox
Thanks did it this way: 3556175 |
labels with manage-street event dispatcher
There was a problem hiding this comment.
Using events is indeed better here. You can probably simplify the code just listening on segment-width-changed on the parent entity, the event bubbles from the segment to the parent that is the managed-street entity.
Be careful to properly bind the listener function and use the same function when you remove the listener.
| : 'Unknown'; | ||
| }; | ||
|
|
||
| // entity.getAttribute('data-parent-component') |
| console.log('Attaching width change listener to existing segment'); | ||
| segment.addEventListener( | ||
| 'segment-width-changed', | ||
| this.onSegmentWidthChanged.bind(this) |
| addedSegments.forEach((segment) => { | ||
| segment.addEventListener( | ||
| 'segment-width-changed', | ||
| this.onSegmentWidthChanged.bind(this) |
| removedSegments.forEach((segment) => { | ||
| segment.removeEventListener( | ||
| 'segment-width-changed', | ||
| this.onSegmentWidthChanged.bind(this) |
There was a problem hiding this comment.
You're not removing anything here. this.onSegmentWidthChanged.bind(this) creates a new function and this function is not a currently registered listener. Just use this.onSegmentWidthChanged here after you bind it in init.
There was a problem hiding this comment.
I don't think you need to add/remove a listener for each segment, you can just register the listener on this.el here. The emitted event from segment bubbles to the parent. Verify what you have for event.target, if it's not the segment, add the segment in the event detail and access it with event.detail.el.
| this.el.addEventListener('segments-changed', this.realignStreet); | ||
|
|
||
| // Initial alignment | ||
| this.realignStreet(); |
There was a problem hiding this comment.
remove this call, it's done a second time in the setTimeout
No description provided.