Как применить CSS/стиль к импортированным объектам JS bpmn?

Недавно мы интегрировали части нашей информационной панели с компанией, которая предоставляет нам json-объекты модели бизнес-процессов и нотации (BPMN).

Мы импортируем JSON-объект BPMN с помощью «fromJSON()» в файлjoint.dia.Paper.

И это прекрасно работает.

Я не могу понять, как стилизовать этот объект? Как я могу применить CSS или любую другую форму стиля к моему импортированному объекту?

Заранее спасибо :-)


javascript json css jointjs
person Tor Christensen    schedule 16.06.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

ОБНОВЛЕНИЕ:

Это будет работать для Rappid 2.0:

CSS должен работать нормально, например

<style>
    .joint-theme-bpmn[data-type='bpmn.Event'] circle {
        stroke: red;
    }
</style>

где data-type соответствует свойству type конкретного элемента:

    joint.shapes.bpmn.Event = joint.dia.Element.extend({

        // ... markup ... 

        defaults: joint.util.deepSupplement({
            type: 'bpmn.Event',
            // attrs: {
            // ...

Для версий 1.x:

вместо атрибута data-type указано имя класса без ., поэтому для типа bpmn.Event можно найти что-то вроде

<g id="j_46" model-id="083..." class="element bpmn Gateway" ">...</g>

то такой CSS должен работать:

 <style>
        .bpmn.Event circle {
            stroke: red;
        }

    </style>
person lades    schedule 28.06.2016
comment
Глядя на объект bpmn (с помощью инструментов разработчика console.dir или Chrome), нет ли типов данных в объекте bpmn? Является ли событие bpmn.Event общей идентификацией или конкретным объектом? Тот же вопрос касается круга — это конкретный объект? Не могли бы вы привести пример таргетинга на изменение фона для объекта Pool bpmn? Заранее спасибо :-) - person Tor Christensen; 04.07.2016
comment
«круг» является частью формы «bpmn.Event», проверьте вывод в DOM. Для «bpmn.Pool» это должен быть CSS, например. '.bpmn.Pool rect {штрих: красный; }' - person lades; 07.07.2016