Can I dynamically change the selection options of my inspector in jointJS - Rappid

Question

In my inspector.js I have declared this select box with name tr_rules which has 2 select options :

'tr_rules': { type: 'select', options: ['option1', 'option2'], group: 'attributes', label: 'Rule', index: 3 },

Is there any way I can define my inspector properly so that the array options will be initially empty and:

I will fill the options dynamically with the content of a var?

For example with the var optionsVariable which a specific time will be:

var optionsVariable  = [myDynamicOption1, myDynamicOption2, myDynamicOption3];

score 3 · Answer 1 · answered Feb 21 '17 at 14:35

For each link we will get random values for the marker-source.fill attribute:

This is the part of the KitchenSink demo application (http://resources.jointjs.com/demos/kitchensink)

createInspector: function(cell) {

    var props = App.config.inspector[cell.get('type')];

    if (cell.isLink()) {
        var a = {
            inputs: {
                attrs: {
                    '.marker-source': {
                        transform: {
                            type: 'select',
                            options: [Math.round(Math.random() * 100), Math.round(Math.random() * 100), Math.round(Math.random() * 100)],
                        }
                    }
                }
            }
        };

        _.merge(props, a);
    }

    return joint.ui.Inspector.create('.inspector-container', _.extend({
        cell: cell
    }, props));
},

the App.config.inspector has definitions for the Inspector in separate file

App.config.inspector = {

'app.Link': {
    inputs: {
        attrs: {
            '.marker-source': {
                transform: {
                    ty pe: 'select',
                    group: 'marker-source',
                    label: 'Source arrowhead',
                    index: 1
                },
                fill: {
                    type: 'color-palette',
                    options: options.colorPalette,
                    group: 'marker-source',
                    label: 'Color',
                    when: { ne: { 'attrs/.marker-source/transform': 'scale(0.001)'}},
                    index: 2
                }
            },
            '.marker-target': {
                transform: {
                    type: 'select',
                    options: options.arrowheadSize,
                    group: 'marker-target',
                    label: 'Target arrowhead',
// ...

Thanks, this is a nice approach (_main.js_ will have most of the customized code). However if you don't want the [object Object] item to show up in the list (since you're adding different types - ints), comment out `options: options.arrowheadSize,` property from the `transform` in the _inspector.js_' `.marker-source`. — CPHPython, Dec 21 '17 at 11:31

Astronaut · Answer 2 · 2017-02-22T22:12:24.080

In inspector set your options to the variable you want.

if you want to display the option using a dependency you can also do this with the when propriety for example

var dynamicOptions = [
            { value: 'Alegreya Sans', content: '<span style="font-family: Alegreya Sans">Alegreya Sans</span>' },
            { value: 'Averia Libre', content: '<span style="font-family: Averia Libre">Averia Libre</span>' },
            { value: 'Roboto Condensed', content: '<span style="font-family: Roboto Condensed">Roboto Condensed</span>' }
        ]

text: {
    type: 'content-editable',
    label: 'Text',
    group: 'text',
    index: 1
},
'font-family': {
    type: 'select-box',
    options: dynamicOptions,
    label: 'Font family',
    group: 'text',
    when: { ne: { 'attrs/text/text': '' }},
    index: 3
},

will only display the input font-family select box when the Text box has a non empty value. The options that are on the dynamicOptions must be valid for the input type.

score 1 · Answer 3 · answered Aug 01 '17 at 14:13

After struggling for ages I finally came up with a way to make it work and it's quite simple quick indeed.

This is how I can create an selectbox with values which change dynamically according to the content of array ruleInspectorArray(which is filled in a different part of my code):

When a new link is created and its inspector is created as well I set inside function createInspector the options of selectbox to be the content of ruleInspectorArray:

cell.set('myArrayOfOptions', ruleInspectorArray);

In order to make it work we also have to set the path of ouf selectbox options being this ruleInspectorArray by doing so:

'tr_rules': { type: 'select', options: 'myArrayOfOptions', group: 'attributes', label: 'Rule', index: 3 },

Yes, Yes, Yes.... :)

Thank you! After all, this is the simplest answer, since it truly dynamically updates one _single_ field through a simple reference to an array! Btw, `cell.set(...)` should be called before the Inspector instance is created/initialized. [_vt._'s answer](https://stackoverflow.com/a/42370232/6225838) relies on passing new properties to the Inspector's initialization which has the disadvantage of the need to map the path exactly to the field we're altering... Setting a reference in the cell itself (`myArray`) does not require any of that mapping! — CPHPython, Feb 19 '18 at 12:06

Can I dynamically change the selection options of my inspector in jointJS - Rappid

3 Answers3