Support for Objects and Arrays as Customizable Properties

[Eonzenex]

Problem:

There is no way to define an array or object in the customize properties section of Lively. This can make it much more difficult to allow properties that have multiple variables without bloating the customize menu.

Solution:

Allow support for arbitrary length arrays and object creation as customizable properties.

A mock-up image is attached below

Details:

This functionality is similar to how the colour picker opens a new window.

In the Customize menu, both arrays and objects are represented by an OPEN button that would open a new window to display the contents of the property. This cuts down bloat in the main Customize menu.

This new window gets its Title from the property name and displays the object or array, as shown on the upper right of the mock-up image.

Arrays have each item displayed in a sideways scrolling list. New items could be added by placing a plus button next to the array property name. Existing items could be right clicked and have a dropdown select to delete the item.

The lower window, Highs - 1, will only ever be displayed if the user clicks on an array item.

Only an OPEN button or selecting an array item should generate a new window.
Objects will have all of their properties displayed in the window, with sub-objects represented by indentation.
Indentation prevents recursive windows that could flood the desktop and confuse the user.

Code:

Arrays:

Laid out similarly as a Checkbox property: the Type will be of "array", with a new signifier, "subtype". This is a string that represents a plain Javascript object (eg. Number, string, object, etc.). "value" would contain the default value.

An example below:

  "chancesOfSpawningSplat": {
    "type": "array",
    "subtype": "number",
    "value": [0.5, 0.2, 0.9],
    "text": "Chance of Spawning a Splat"
  },

Objects:

An object will have the Type of "object", with a new signifier "structure". Structure will contain the expected structure of the object using default values.

If an object variable is of type object, simply continue creating the object as a JSON dictionary.

If the variable is a plain Javascript type, Lively could have a standard object that defines certain properties to allow safety when loading the variable.

An example of the above could be this:

  "simpleBands": {
    "type": "object",
    "structure": {
      "colour": {
        "baseValue": {"plain": true, "minValue": 0, "maxValue": 1, "default": 0},
        "maxNegativeOffset": {"plain": true, "minValue": 0, "maxValue": 1, "default": 0.1},
        "maxPositiveOffset": {"plain": true, "minValue": 0, "maxValue": 1, "default": 0.15}
      },
      "displayText": {"plain": true, "minLength": 3, "maxLength": 12, "default": "Display Text", "restrictedCharacters": "0-9"}
    },
    "text": "Simple Bands"
  }

When Lively loads the object, it could infer from the key "plain" being present that "baseValue" is meant to be a plain Javascript type and to load it as such.
"minValue", "maxValue", and "default" for Numbers allow Lively to clamp number values when loaded.
Similar values could be used for strings, with "restrictedCharacters" being regex for the developer to prevent certain characters if desired.

Discussion

Linked from #691