feature: categories for models

[kfarr]

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)

[kfarr]

previous research
3DStreet/3dstreet-editor#179

[Algorush]

I think this issue should be in 3dstreet-editor repo?

[Algorush]

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 .
And use this attribute when creating a list with a mixin in the Select component on the right panel of the editor.

[Algorush]

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

[kfarr]

@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

[Algorush]

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

[Algorush]

I noticed that this issue was also there before, so I created a separate topic for it in the issue list: 3DStreet/3dstreet-editor#352

[Algorush]

3DStreet/3dstreet-editor#354

[kfarr]

closed by 3DStreet/3dstreet-editor#354