JointJS, как динамически добавлять параметры в инспектор в соответствии с пользовательским вводом?

Question

'bpmn.Gateway': {
    NumberofTrigger : {
        type: 'select',
        options: [
            { value: '0', content: '0' },
            { value: '1', content: '1' },
            { value: '2', content: '2' },
            { value: '3', content: '3' }
        ],
        label: 'Number of Trigger',
        group: 'general',
        index: 1
    },

    ComparisonValue : {
        type: 'text',
        label: 'Comparison Value',
        group: 'general',
        index: 2
    },
    TriggerLogic : {
        type: 'select',
        options: ["Start With",'Contains','End With','Equals','Smaller Than','Greater Than','Not Equals','REGEX','Web Service'],
        label: 'Trigger Logic',
        group: 'general',   
        index: 1
    }
},

После того как я перетащу фигуру, будет показана таблица инспектора, а параметры NumberofTrigger выберите (для того, чтобы выбрать, сколько вариантов триггеров, которые будут выбраны) и, в соответствии с выбранным значением, номер набора TriggerLogic а также ComparisonValue будет отображаться.

Поскольку я не нашел способа решить эту проблему путем чтения исходного кода, я хотел бы знать, как это можно сделать.

Answer 1

Если я правильно понял вопрос и у вас есть конечное количество триггеров, я думаю, вы можете просто показать больше полей, используя when выражения со сравнением "больше, чем равное" (т.е. gte примитивы), пример:

'bpmn.Gateway': {
  inputs: {
    attrs: {
      NumberofTrigger : {
        type: 'select',
        options: [
          { value: '0', content: '0' },
          { value: '1', content: '1' },
          { value: '2', content: '2' },
          { value: '3', content: '3' }
        ],
        label: 'Number of Trigger',
        group: 'general',
        index: 1
      },

      ComparisonValue0 : {
        when: { gte: {'attrs/NumberofTrigger': '0'} },
        type: 'text',
        label: 'First Comparison Value',
        // other properties
      },
      TriggerLogic0 : {
        when: { gte: {'attrs/NumberofTrigger': '0'} },
        type: 'select',
        label: 'First Trigger Logic',
        // other properties
      },

      ComparisonValue1 : {
        when: { gte: {'attrs/NumberofTrigger': '1'} },
        type: 'text',
        label: 'Second Comparison Value',
        // other properties
      },
      TriggerLogic1 : {
        when: { gte: {'attrs/NumberofTrigger': '1'} },
        type: 'select',
        label: 'Second Trigger Logic',
        // other properties
      },

      ComparisonValue2 : {
        when: { gte: {'attrs/NumberofTrigger': '2'} },
        type: 'text',
        label: 'Third Comparison Value',
        // other properties
      },
      TriggerLogic2 : {
        when: { gte: {'attrs/NumberofTrigger': '2'} },
        type: 'select',
        label: 'Third Trigger Logic',
        // other properties
      },

      ComparisonValue3 : {
        when: { gte: {'attrs/NumberofTrigger': '3'} },
        type: 'text',
        label: 'Fourth Comparison Value',
        // other properties
      },
      TriggerLogic3 : {
        when: { gte: {'attrs/NumberofTrigger': '3'} },
        type: 'select',
        label: 'Fourth Trigger Logic',
        // other properties
      },
    }
  }
}

Это основная цель when согласно документации:

Когда выражение оценивается как false (условие не выполняется) вход с помощью этого when пункт будет скрыт. В противном случае этот вход будет показан.