Обновление измерения ячейки на основе содержащихся элементов HTML (и, соответственно, обновление расположения портов)

Question

Я оцениваю JointJS для пользовательской модели, в которой объект рисуется с использованием элементов HTML. И я хочу: - изменить размер ячейки на основе содержимого HTML (динамически обновлять размер и местоположение порта на основе обновления HTML); - позиционировать порты относительно определенных элементов HTML (на основе бизнес-логики).

Для ясности (диаграмма ниже):

Answer 1

размер:

вам нужно отследить изменения в списке флажков, а затем изменить размер элемента вручную, например:

var handleResize = function() {
    element1.prop('size/height', element1.prop('size/height') + 30)
}

порты:

В JointJS v1.0 есть API для работы с портами и их позициями. Вы можете добавить порт к любой форме, например, к позиции x:10, y:10 (относительно начала элемента)

 element1.addPort({
        args: {
            x: 10, y: 10
        },
        attrs: {
            circle: {fill: 'red', stroke: '#31d0c6', 'stroke-width': 3, r: 10, magnet: true}
        }
    });

http://jsfiddle.net/vtalas/ahk2no15/

Docs:

http://resources.jointjs.com/docs/jointjs/v1.0/joint.html