3dstreet
3dstreet copied to clipboard
3DStreet
feature: categories for models
Design WIP paste from Figma:
Figma: https://www.figma.com/file/W9jid3A0jgssnIKBFEvG38/3DStreet-2022?type=design&node-id=3478-62879&mode=design&t=zwUhIrR6g3dBB2tt-4
v1 - grouping? https://react-select.com/home - see grouped example
questions:
- where is grouping data stored?
- should use same flow as https://github.com/3DStreet/citybuilderjr#gltf-auditjs ?
- should we add new field for category or group?
v2, later: related to categories, when you modify a prop it should keep within the same category (a bus shouldn't be able to become a tree, or a sidewalk) (epic: planner)
About where to store information about groups. I came up with this option - use group names from assets.js.. And after that we can create groups data on the fly, so not necessary a separate file with information. Or better yet, inside assets.js create JSON with information about the mixin, divided into groups, with a format appropriate for the Select component and store this JSON as an attribute in some tag. For example <a-assets groupedOptionsJSON='...'>. And use this attribute when creating a list with a mixin in the Select component on the right panel of the editor.
v1 with collapsible categories is ready with this approach: inside assets.js create JSON with information about the mixin, divided into groups, and store this JSON as an attribute in street-assets tag.
In the mixin component (in Editor) I added a function to generate a groupedOptions object with information about the mixins and what group they are in, in a format that the Select component accepts to form groups. Also added functions for collapsing groups through the interface.
But I can't make the desired styles like in Figma because I have limited access to the Figma template - View only
@Algorush sounds like a good start
Are there branches for 3dstreet (assets.js) + 3dstreet-editor (grouped select widget) ?
What else do you need to see in Figma? I think actually the react-select widget in grouped mode would be simplest option for a v1 and that is not going to align with the figma design which is ok for a first version. https://react-select.com/home#getting-started
What else do you need to see in Figma? I think actually the react-select widget in grouped mode would be simplest option for a v1 and that is not going to align with the figma design which is ok for a first version. https://react-select.com/home#getting-started
Ok. Now it looks like in react-select web-site. I could make a design with arrows and all paddings, etc, like in Figma. This is what I mean. But I can also make approximate dimensions from the Figma picture. I haven't created PR's yet because I found one issue when an element has several mixins
I noticed that this issue was also there before, so I created a separate topic for it in the issue list: https://github.com/3DStreet/3dstreet-editor/issues/352