sartography/bpmn-js
1
0
Fork 0
mirror of https://github.com/sartography/bpmn-js.git synced 2025-01-13 18:46:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into develop

Browse Source
This commit is contained in:
Nico Rehwaldt 2021-12-03 17:38:54 +01:00
commit 4204c2bb2a
4 changed files with 176 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -11,6 +11,10 @@ ___Note:__ Yet to be released changes appear here._
* Reworked the link of elements to bpmn DIs. You must access the `di` directly from the diagram element instead of the `businessObject`. [#1472](https://github.com/bpmn-io/bpmn-js/issues/1472) * Reworked the link of elements to bpmn DIs. You must access the `di` directly from the diagram element instead of the `businessObject`. [#1472](https://github.com/bpmn-io/bpmn-js/issues/1472)
* Reworked import and `BpmnFactory` APIs. [#1472](https://github.com/bpmn-io/bpmn-js/issues/1472) * Reworked import and `BpmnFactory` APIs. [#1472](https://github.com/bpmn-io/bpmn-js/issues/1472)
## 8.8.4
* `FIX`: set label color on `bpmndi:BPMNLabel#color` ([#1543](https://github.com/bpmn-io/bpmn-js/pull/1543))
## 8.8.3 ## 8.8.3
* `FIX`: correct resize handles hidden behind element ([#1520](https://github.com/bpmn-io/bpmn-js/issues/1520)) * `FIX`: correct resize handles hidden behind element ([#1520](https://github.com/bpmn-io/bpmn-js/issues/1520))

29
lib/features/modeling/cmd/SetColorHandler.js
View File

@ -5,6 +5,9 @@ import {
pick pick
} from 'min-dash'; } from 'min-dash';
import {
getDi
} from '../../../util/ModelUtil';
var DEFAULT_COLORS = { var DEFAULT_COLORS = {
fill: undefined, fill: undefined,
@ -63,12 +66,26 @@ SetColorHandler.prototype.postExecute = function(context) {
// TODO @barmac: remove once we drop bpmn.io properties // TODO @barmac: remove once we drop bpmn.io properties
ensureLegacySupport(assignedDi); ensureLegacySupport(assignedDi);
self._commandStack.execute('element.updateProperties', { if (element.labelTarget) {
element: element,
properties: { // set label colors as bpmndi:BPMNLabel#color
di: assignedDi self._commandStack.execute('element.updateModdleProperties', {
} element: element,
}); moddleElement: getDi(element).label,
properties: {
color: di['background-color']
}
});
} else {
// set colors bpmndi:BPMNEdge or bpmndi:BPMNShape
self._commandStack.execute('element.updateProperties', {
element: element,
properties: {
di: assignedDi
}
});
}
}); });
}; };

61
test/spec/features/modeling/SetColor.bpmn Normal file
View File

@ -0,0 +1,61 @@
<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="simple" exporter="camunda modeler" exporterVersion="2.6.0" targetNamespace="http://bpmn.io/schema/bpmn">
<bpmn2:process id="Process_1" isExecutable="false">
<bpmn2:subProcess id="SubProcess_1" name="Sub Process 1">
<bpmn2:incoming>SequenceFlow_3</bpmn2:incoming>
<bpmn2:outgoing>SequenceFlow_2</bpmn2:outgoing>
<bpmn2:startEvent id="StartEvent_1" name="Start Event 1">
<bpmn2:outgoing>SequenceFlow_1</bpmn2:outgoing>
</bpmn2:startEvent>
<bpmn2:task id="Task_1" name="Task">
<bpmn2:incoming>SequenceFlow_1</bpmn2:incoming>
</bpmn2:task>
<bpmn2:sequenceFlow id="SequenceFlow_1" name="" sourceRef="StartEvent_1" targetRef="Task_1"/>
</bpmn2:subProcess>
<bpmn2:endEvent id="EndEvent_1" name="End Event">
<bpmn2:incoming>SequenceFlow_2</bpmn2:incoming>
</bpmn2:endEvent>
<bpmn2:sequenceFlow id="SequenceFlow_2" name="" sourceRef="SubProcess_1" targetRef="EndEvent_1"/>
<bpmn2:startEvent id="StartEvent_2" name="Start">
<bpmn2:outgoing>SequenceFlow_3</bpmn2:outgoing>
</bpmn2:startEvent>
<bpmn2:sequenceFlow id="SequenceFlow_3" name="Flow" sourceRef="StartEvent_2" targetRef="SubProcess_1"/>
</bpmn2:process>
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
<bpmndi:BPMNShape id="_BPMNShape_SubProcess_2" bpmnElement="SubProcess_1" isExpanded="true">
<dc:Bounds height="300.0" width="300.0" x="300.0" y="80.0"/>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
<dc:Bounds height="36.0" width="36.0" x="352.0" y="242.0"/>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="_BPMNShape_Task_2" bpmnElement="Task_1">
<dc:Bounds height="80.0" width="100.0" x="420.0" y="220.0"/>
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="BPMNEdge_SequenceFlow_1" bpmnElement="SequenceFlow_1" sourceElement="_BPMNShape_StartEvent_2" targetElement="_BPMNShape_Task_2">
<di:waypoint xsi:type="dc:Point" x="388.0" y="260.0"/>
<di:waypoint xsi:type="dc:Point" x="420.0" y="260.0"/>
</bpmndi:BPMNEdge>
<bpmndi:BPMNShape id="_BPMNShape_EndEvent_2" bpmnElement="EndEvent_1">
<dc:Bounds height="36.0" width="36.0" x="650.0" y="212.0"/>
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="BPMNEdge_SequenceFlow_2" bpmnElement="SequenceFlow_2" sourceElement="_BPMNShape_SubProcess_2" targetElement="_BPMNShape_EndEvent_2">
<di:waypoint xsi:type="dc:Point" x="600.0" y="230.0"/>
<di:waypoint xsi:type="dc:Point" x="650.0" y="230.0"/>
</bpmndi:BPMNEdge>
<bpmndi:BPMNShape id="_BPMNShape_StartEvent_11" bpmnElement="StartEvent_2">
<dc:Bounds height="36.0" width="36.0" x="108.0" y="212.0"/>
<bpmndi:BPMNLabel>
<dc:Bounds height="0.0" width="0.0" x="126.0" y="253.0"/>
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="BPMNEdge_SequenceFlow_3" bpmnElement="SequenceFlow_3" sourceElement="_BPMNShape_StartEvent_11" targetElement="_BPMNShape_SubProcess_2">
<di:waypoint xsi:type="dc:Point" x="144.0" y="230.0"/>
<di:waypoint xsi:type="dc:Point" x="300.0" y="230.0"/>
<bpmndi:BPMNLabel>
<dc:Bounds height="21.0" width="33.0" x="192.0" y="204.0"/>
</bpmndi:BPMNLabel>
</bpmndi:BPMNEdge>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn2:definitions>

122
test/spec/features/modeling/SetColorSpec.js
View File

@ -13,7 +13,7 @@ var FUCHSIA_HEX = '#ff00ff',
describe('features/modeling - set color', function() { describe('features/modeling - set color', function() {
var diagramXML = require('../../../fixtures/bpmn/simple.bpmn'); var diagramXML = require('./SetColor.bpmn');
beforeEach(bootstrapModeler(diagramXML, { beforeEach(bootstrapModeler(diagramXML, {
modules: [ modules: [
@ -44,6 +44,7 @@ describe('features/modeling - set color', function() {
// given // given
var taskShape = elementRegistry.get('Task_1'), var taskShape = elementRegistry.get('Task_1'),
taskDi = getDi(taskShape); taskDi = getDi(taskShape);
modeling.setColor(taskShape, { fill: 'FUCHSIA' }); modeling.setColor(taskShape, { fill: 'FUCHSIA' });
// when // when
@ -60,6 +61,7 @@ describe('features/modeling - set color', function() {
// given // given
var taskShape = elementRegistry.get('Task_1'), var taskShape = elementRegistry.get('Task_1'),
taskDi = getDi(taskShape); taskDi = getDi(taskShape);
modeling.setColor(taskShape, { fill: 'FUCHSIA', stroke: 'YELLOW' }); modeling.setColor(taskShape, { fill: 'FUCHSIA', stroke: 'YELLOW' });
// when // when
@ -78,6 +80,7 @@ describe('features/modeling - set color', function() {
// given // given
var taskShape = elementRegistry.get('Task_1'), var taskShape = elementRegistry.get('Task_1'),
taskDi = getDi(taskShape); taskDi = getDi(taskShape);
modeling.setColor(taskShape, { fill: 'FUCHSIA', stroke: 'YELLOW' }); modeling.setColor(taskShape, { fill: 'FUCHSIA', stroke: 'YELLOW' });
// when // when
@ -96,6 +99,7 @@ describe('features/modeling - set color', function() {
// given // given
var taskShape = elementRegistry.get('Task_1'), var taskShape = elementRegistry.get('Task_1'),
taskDi = getDi(taskShape); taskDi = getDi(taskShape);
modeling.setColor(taskShape, { fill: 'FUCHSIA' }); modeling.setColor(taskShape, { fill: 'FUCHSIA' });
// when // when
@ -128,6 +132,7 @@ describe('features/modeling - set color', function() {
// given // given
var taskShape = elementRegistry.get('Task_1'), var taskShape = elementRegistry.get('Task_1'),
taskDi = getDi(taskShape); taskDi = getDi(taskShape);
modeling.setColor(taskShape, { stroke: 'FUCHSIA' }); modeling.setColor(taskShape, { stroke: 'FUCHSIA' });
// when // when
@ -139,13 +144,52 @@ describe('features/modeling - set color', function() {
})); }));
it('setting stroke + fill color on external label', inject(function(elementRegistry, modeling) {
// given
var flowShape = elementRegistry.get('SequenceFlow_3'),
flowLabel = flowShape.label,
flowDi = getDi(flowShape);
// when
modeling.setColor(flowLabel, { stroke: 'FUCHSIA', fill: 'FUCHSIA' });
// then
expect(flowDi.get('border-color')).not.to.exist;
expect(flowDi.get('background-color')).not.to.exist;
expect(flowDi.label.get('color')).to.eql(FUCHSIA_HEX);
}));
it('unsetting stroke + fill color on external label', inject(function(elementRegistry, modeling) {
// given
var flowShape = elementRegistry.get('SequenceFlow_3'),
flowLabel = flowShape.label,
flowDi = getDi(flowShape);
// assume
modeling.setColor(flowLabel, { stroke: 'FUCHSIA', fill: 'FUCHSIA' });
// when
modeling.setColor(flowLabel, { stroke: undefined, fill: undefined });
// then
expect(flowDi.get('border-color')).not.to.exist;
expect(flowDi.get('background-color')).not.to.exist;
expect(flowDi.label.get('color')).not.to.exist;
}));
it('setting fill color (multiple elements)', inject( it('setting fill color (multiple elements)', inject(
function(elementRegistry, modeling) { function(elementRegistry, modeling) {
// given // given
var taskShape = elementRegistry.get('Task_1'), var taskShape = elementRegistry.get('Task_1'),
taskDi = getDi(taskShape); taskDi = getDi(taskShape),
var startEventShape = elementRegistry.get('StartEvent_1'), startEventShape = elementRegistry.get('StartEvent_1'),
startEventDi = getDi(startEventShape); startEventDi = getDi(startEventShape);
// when // when
@ -165,9 +209,10 @@ describe('features/modeling - set color', function() {
// given // given
var taskShape = elementRegistry.get('Task_1'), var taskShape = elementRegistry.get('Task_1'),
taskDi = getDi(taskShape); taskDi = getDi(taskShape),
var startEventShape = elementRegistry.get('StartEvent_1'), startEventShape = elementRegistry.get('StartEvent_1'),
startEventDi = getDi(startEventShape); startEventDi = getDi(startEventShape);
modeling.setColor([ taskShape, startEventShape ], { fill: 'FUCHSIA' }); modeling.setColor([ taskShape, startEventShape ], { fill: 'FUCHSIA' });
// when // when
@ -185,8 +230,8 @@ describe('features/modeling - set color', function() {
// given // given
var taskShape = elementRegistry.get('Task_1'), var taskShape = elementRegistry.get('Task_1'),
taskDi = getDi(taskShape); taskDi = getDi(taskShape),
var startEventShape = elementRegistry.get('StartEvent_1'), startEventShape = elementRegistry.get('StartEvent_1'),
startEventDi = getDi(startEventShape); startEventDi = getDi(startEventShape);
// when // when
@ -209,8 +254,8 @@ describe('features/modeling - set color', function() {
// given // given
var taskShape = elementRegistry.get('Task_1'), var taskShape = elementRegistry.get('Task_1'),
taskDi = getDi(taskShape); taskDi = getDi(taskShape),
var startEventShape = elementRegistry.get('StartEvent_1'), startEventShape = elementRegistry.get('StartEvent_1'),
startEventDi = getDi(startEventShape); startEventDi = getDi(startEventShape);
modeling.setColor([ modeling.setColor([
@ -334,6 +379,7 @@ describe('features/modeling - set color', function() {
// given // given
var taskShape = elementRegistry.get('Task_1'), var taskShape = elementRegistry.get('Task_1'),
taskDi = getDi(taskShape); taskDi = getDi(taskShape);
modeling.setColor(taskShape, { stroke: 'FUCHSIA' }); modeling.setColor(taskShape, { stroke: 'FUCHSIA' });
// when // when
@ -351,9 +397,9 @@ describe('features/modeling - set color', function() {
// given // given
var taskShape = elementRegistry.get('Task_1'), var taskShape = elementRegistry.get('Task_1'),
taskDi = getDi(taskShape); taskDi = getDi(taskShape),
var startEventShape = elementRegistry.get('StartEvent_1'), startEventShape = elementRegistry.get('StartEvent_1'),
startEventDi = getDi(startEventShape); startEventDi = getDi(taskShape);
// when // when
modeling.setColor([ taskShape, startEventShape ], { fill: 'FUCHSIA' }); modeling.setColor([ taskShape, startEventShape ], { fill: 'FUCHSIA' });
@ -371,9 +417,10 @@ describe('features/modeling - set color', function() {
// given // given
var taskShape = elementRegistry.get('Task_1'), var taskShape = elementRegistry.get('Task_1'),
taskDi = getDi(taskShape); taskDi = getDi(taskShape),
var startEventShape = elementRegistry.get('StartEvent_1'), startEventShape = elementRegistry.get('StartEvent_1'),
startEventDi = getDi(startEventShape); startEventDi = getDi(taskShape);
modeling.setColor([ taskShape, startEventShape ], { fill: 'FUCHSIA' }); modeling.setColor([ taskShape, startEventShape ], { fill: 'FUCHSIA' });
// when // when
@ -392,9 +439,9 @@ describe('features/modeling - set color', function() {
// given // given
var taskShape = elementRegistry.get('Task_1'), var taskShape = elementRegistry.get('Task_1'),
taskDi = getDi(taskShape); taskDi = getDi(taskShape),
var startEventShape = elementRegistry.get('StartEvent_1'), startEventShape = elementRegistry.get('StartEvent_1'),
startEventDi = getDi(startEventShape); startEventDi = getDi(taskShape);
// when // when
modeling.setColor([ modeling.setColor([
@ -415,9 +462,10 @@ describe('features/modeling - set color', function() {
// given // given
var taskShape = elementRegistry.get('Task_1'), var taskShape = elementRegistry.get('Task_1'),
taskDi = getDi(taskShape); taskDi = getDi(taskShape),
var startEventShape = elementRegistry.get('StartEvent_1'), startEventShape = elementRegistry.get('StartEvent_1'),
startEventDi = getDi(startEventShape); startEventDi = getDi(taskShape);
modeling.setColor([ taskShape, startEventShape ], { stroke: 'FUCHSIA' }); modeling.setColor([ taskShape, startEventShape ], { stroke: 'FUCHSIA' });
// when // when
@ -459,6 +507,7 @@ describe('features/modeling - set color', function() {
// given // given
var taskShape = elementRegistry.get('Task_1'), var taskShape = elementRegistry.get('Task_1'),
taskDi = getDi(taskShape); taskDi = getDi(taskShape);
modeling.setColor(taskShape, { fill: 'FUCHSIA' }); modeling.setColor(taskShape, { fill: 'FUCHSIA' });
// when // when
@ -496,6 +545,7 @@ describe('features/modeling - set color', function() {
// given // given
var taskShape = elementRegistry.get('Task_1'), var taskShape = elementRegistry.get('Task_1'),
taskDi = getDi(taskShape); taskDi = getDi(taskShape);
modeling.setColor(taskShape, { stroke: 'FUCHSIA' }); modeling.setColor(taskShape, { stroke: 'FUCHSIA' });
// when // when
@ -514,9 +564,9 @@ describe('features/modeling - set color', function() {
// given // given
var taskShape = elementRegistry.get('Task_1'), var taskShape = elementRegistry.get('Task_1'),
taskDi = getDi(taskShape); taskDi = getDi(taskShape),
var startEventShape = elementRegistry.get('StartEvent_1'), startEventShape = elementRegistry.get('StartEvent_1'),
startEventDi = getDi(startEventShape); startEventDi = getDi(taskShape);
// when // when
modeling.setColor([ taskShape, startEventShape ], { fill: 'FUCHSIA' }); modeling.setColor([ taskShape, startEventShape ], { fill: 'FUCHSIA' });
@ -535,9 +585,10 @@ describe('features/modeling - set color', function() {
// given // given
var taskShape = elementRegistry.get('Task_1'), var taskShape = elementRegistry.get('Task_1'),
taskDi = getDi(taskShape); taskDi = getDi(taskShape),
var startEventShape = elementRegistry.get('StartEvent_1'), startEventShape = elementRegistry.get('StartEvent_1'),
startEventDi = getDi(startEventShape); startEventDi = getDi(taskShape);
modeling.setColor([ taskShape, startEventShape ], { fill: 'FUCHSIA' }); modeling.setColor([ taskShape, startEventShape ], { fill: 'FUCHSIA' });
// when // when
@ -557,9 +608,9 @@ describe('features/modeling - set color', function() {
// given // given
var taskShape = elementRegistry.get('Task_1'), var taskShape = elementRegistry.get('Task_1'),
taskDi = getDi(taskShape); taskDi = getDi(taskShape),
var startEventShape = elementRegistry.get('StartEvent_1'), startEventShape = elementRegistry.get('StartEvent_1'),
startEventDi = getDi(startEventShape); startEventDi = getDi(taskShape);
// when // when
modeling.setColor([ taskShape, startEventShape ], { stroke: 'FUCHSIA' }); modeling.setColor([ taskShape, startEventShape ], { stroke: 'FUCHSIA' });
@ -578,9 +629,10 @@ describe('features/modeling - set color', function() {
// given // given
var taskShape = elementRegistry.get('Task_1'), var taskShape = elementRegistry.get('Task_1'),
taskDi = getDi(taskShape); taskDi = getDi(taskShape),
var startEventShape = elementRegistry.get('StartEvent_1'), startEventShape = elementRegistry.get('StartEvent_1'),
startEventDi = getDi(startEventShape); startEventDi = getDi(taskShape);
modeling.setColor([ modeling.setColor([
taskShape, taskShape,
startEventShape startEventShape
@ -637,5 +689,7 @@ describe('features/modeling - set color', function() {
expect(sequenceFlowDi.get('stroke')).to.eql('#abcdef'); expect(sequenceFlowDi.get('stroke')).to.eql('#abcdef');
} }
)); ));
}); });
});
});