Как добавить порты в круг

Я могу добавить порты в прямоугольник, используя joint.shapes.devs.Model, но то же самое не работает для круга.

Вот что я пытался добавить порты в круг:

var circle1 = new joint.shapes.basic.Circle({
                            position: {x: 100, y: 225},
                            size: {width: 51, height: 51},
                            outPorts: [''],
                            attrs: {
                                '.': {magnet: true},
                                '.label': {text: '', 'ref-x': .4, 'ref-y': .2},
                                '.inPorts circle': {type: 'input'},
                                '.outPorts circle': {type: 'output'},
                                '.port-body': {r: 4}
                            }
                        });
                        graph.addCell(circle1);

Я вижу, что Circle создан, но без портов. Я не смог найти никакой документации по этому поводу. Любая помощь будет оценена по достоинству. Спасибо


jointjs
person kittu    schedule 24.07.2015    source источник

Ответы (1)


arrow_upward
4
arrow_downward

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

joint.shapes.devs.CircleModel = joint.shapes.devs.Model.extend({

    markup: '<g class="rotatable"><g class="scalable"><circle class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',
    portMarkup: '<g class="port port<%= id %>"><rect class="port-body"/><text class="port-label"/></g>',

    defaults: joint.util.deepSupplement({

        type: 'devs.CircleModel',
        attrs: {
            '.body': { r: 50, cx: 50, stroke: 'blue', fill: 'lightblue' },
            '.label': { text: 'Circle Model', 'ref-y': 0.5, 'y-alignment': 'middle' },
            '.port-body': { width: 10, height: 10, x: -5, stroke: 'gray', fill: 'lightgray', magnet: 'active' }
        }

    }, joint.shapes.devs.Model.prototype.defaults)
});

Важно сообщить газете, что для рендеринга не следует использовать dia.ElementView по умолчанию, а вместо этого использовать devs.ModelView. Для этого просто определите представление в том же пространстве имен, что и связанная модель, и добавьте "View" в конце имени модели.

joint.shapes.devs.CircleModelView = joint.shapes.devs.ModelView;

Пример использования:

var circleModel = new joint.shapes.devs.CircleModel({
    position: { x: 500, y: 100 },
    size: { width: 100, height: 100 },
    inPorts: ['a'],
    outPorts: ['b']
});
graph.addCell(circleModel);

JS-скрипт:

http://jsfiddle.net/kumilingus/gpfu7o4f/1/

person Roman    schedule 24.07.2015
comment
port<%= id %> ?? Ошибка в этой строке: не удается найти идентификатор символа - person kittu; 24.07.2015
comment
Отображает только inPort. Я не вижу выход... И для предыдущего комментария я изменил port<%= id %> на port<%= 1 %> Есть ли какая-либо функция guid(), которую я могу передать, или я написал для нее цикл? - person kittu; 24.07.2015
comment
Идентификаторы портов генерируются автоматически. Вы не должны изменять разметку, как вы это сделали. Я создал скрипт, который показывает, что приведенный выше код работает. Предлагаю обновить JointJS до последней версии. - person Roman; 24.07.2015
comment
Где я могу получить версию JS 0.94. На странице загрузки официального сайта отображается версия 0.93. - person kittu; 24.07.2015
comment
Обновился до новой версии. По-прежнему внешний порт не виден, а также port<%=id%> выдает ошибку, поскольку это синтаксис jsp. Например: я использую <script type="text/javascript" src="<%=request.getContextPath()%>/joint.js"></script> - person kittu; 24.07.2015
comment
Выходной порт не виден, потому что вы установили для всех идентификаторов портов значение 1. Попробуйте прокомментировать атрибуты portMarkup и .port-body. Если вам не нужны прямоугольные порты (jsfiddle.net/kumilingus/ gpfu7o4f/2). Боюсь, я не могу помочь вам с проблемой синтаксиса JSP. - person Roman; 24.07.2015
comment
Могу ли я сохранить "id" в переменной? Если возможно, я могу использовать эту переменную внутри port<%=VARIABLENAME%> - person kittu; 24.07.2015
comment
Не стесняйтесь использовать хак вроде этого `‹g class=port port' + ['‹','%','='].join('') + ' id =››‹rect..', если это дураки JSP. - person Roman; 24.07.2015
comment
Давайте продолжим обсуждение в чате. - person Roman; 24.07.2015
comment
Я думаю, что перемещение js-скрипта в отдельный файл должно решить проблему. - person kittu; 28.07.2015