Where can I find information on v2, as available on the CDN?

[bloomsder]

Is there an outline available somewhere of:

• Features added
• How to implement (vs v1.0x for example)

Great work btw, cheers!

[Matteo Bruni]

Hi @bloomsder,

Sorry I forgot to update the README. I've updated the sample codepen here: https://codepen.io/matteobruni/pen/oNxNvja

The main difference is that you assign a function that returns the object instead of the object itself. This gives more flexibility when reassigning the object.

It's the only change, but it was a breaking one so I had to change the major version

[bloomsder]

Great, many thanks for the prompt response. One more thiing, and not an issue but since we're here...

I'm just getting into the code and also have a question about automap. I would like to have this solution where the data object is enough to instantiate the editor, to allow for a dynamic functionality. Working with v1.0.x and seeing that we must declare the input data, and subsequently via code declare the elements of the editor that correspond, I thought I would try out an approach where I have a meta data structure with the same keys as the data, and this gets fed to the addProperty function in a loop. This way I can allow for arbitrary editing of a wide range of formats, something I would benefit from in my project.

This is why I wanted to check on v2 features, but in the mean time I tried to study the code and make sure I've read things right and not re-inventing any wheels here. So I came across automap just now, and haven't yet figured it out. My TS/JS is a bit basic having not coded for a few years.

Once again, I really think this is a neat project, and couldn't find anything close to it, so kudos to you and the contributors. I see npm downloads are quite healthy but don't see much mention of this project around the web, which seems a bit odd.

I noticed that change when trying out v2, so that clears that up. If it's not to much trouble, a one liner about the use case for passing the function and not the object would help this dummy!

[bloomsder]

By example it should be clearer what I've implemented:

const data = {
enable: true,
name: "Bob",
weight: 100,
preference: "Option 2"
}
const metaData = {
enable: {
fieldType: "boolean",
label: "Enabled",
},
name: {
label: "Name",
fieldType: "string",
attributes:{
max: "20"
}
},
weight: {
label: "Weight (KG)",
fieldType: "number",
attributes:{
max: "200",
min: "0"
}
},
preference: {
label: "Preference",
fieldType: "select",
options: {
option1: "Option 1",
option2: "Option 2"
}
}
};

Then we have a function which the metadata is passed to after instantiating the editor something like this:

function populateEditor(characterEditor, property, propertyMetaData){}

I'm indenting the settings for number fields because then I can have a single implementation in the function that handles all the types, and the attributes are enumerated to set eg min, max, etc

I haven't yet implmented groups, and I also plan to handle passing in functions like with your alert example.

We can also use this approach with no meta data, falling back to string for everything. Still a powerful way to pull semi-arbitrary JSON into a GUI in a dynamic way without prescriptively writing the addProperty code.

Hope this makes sense, and I will be glad to learn I've got it all wrong and there's a built in way to avoid hard coding. I've only spent today on it and it's been fun

[bloomsder]

PS also trying to work out what 'attributes' work with string as with your number example, but like I said, slow going for me to understand this modern stuff. Would be good to pass in length and format restrictions, perhaps via a pattern match.

[Matteo Bruni]

That's a great idea! Maybe a JSONSchema object could be used to gather information about the data object, but I have to check that it has all the informations needed, otherwise a custom one must be used.
I haven't advertised a lot this project because I needed it for the tsParticles editor but I decided to create a library instead of using it only there. I thought it could help others in the same condition.

[bloomsder]

Well it did help me so thanks. I also really enjoyed playing with tsParticles, and had to drag myself away.

Thanks for the heads up on JSONSchema, it seems I'm basically rolling my own version, never a good idea, so you caught me early there.

I don't mean to be demanding, you've been very helpful. Nonetheless, if you do have just a minute more, then after I'll leave you alone and go do my homework...

• I take it I am correct in thinking only number has any secondary attributes (min, max, step) in object-gui right now.
• I still don't know what automap is for. Not your problem, but any brief pointers would speed me up.
• Likewise a use case for the v2 change where we pass a function to provide data would be insightful

[Matteo Bruni]

• Yes min, max and step are only for number type, the dropdown values must be added manually using addItems and addItemGroup
• The autoMap parameter handles the changes automatically if set to true (default value)
• The function instead of an object helps when you need to change the targeted object, I needed that in tsParticles since the Container.actualOptions could change on window resize for responsive options or for themes

[bloomsder]

Very kind of you to take the time. I'm grateful to be able to build on your great work