diff --git a/package-lock.json b/package-lock.json index f00715b23..bb7f76c1b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -373,9 +373,9 @@ } }, "@bpmn-io/element-templates-icons-renderer": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/@bpmn-io/element-templates-icons-renderer/-/element-templates-icons-renderer-0.1.1.tgz", - "integrity": "sha512-4fnLd+k68Tg9grQIHhGEoCvuc66dd9iATNnBeydhbIvqqdm2I6MQbHB0HyeRKpPAN/Ywg+uI+Y2hbiK4rSn7uQ==", + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@bpmn-io/element-templates-icons-renderer/-/element-templates-icons-renderer-0.1.2.tgz", + "integrity": "sha512-HMcjVGPfCrkkMKy6N6seQlh0R6F0YfXUJvflPTLgo6Kbv/k0/f0RUuicke2JW0How7uQrANp+ryn5j+c6W6ilg==", "dev": true, "requires": { "bpmn-js": "^9.0.3", @@ -6769,9 +6769,9 @@ "dev": true }, "zeebe-bpmn-moddle": { - "version": "0.12.0", - "resolved": "https://registry.npmjs.org/zeebe-bpmn-moddle/-/zeebe-bpmn-moddle-0.12.0.tgz", - "integrity": "sha512-aSKxanMc5Z+QfMBKtYCwsiY7lAXxD4LdAHtr5v7wQV4mCwNNkylnxEJ6wDjJa3EUvfYpmzWj+ElJvDbMfs5iPw==", + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/zeebe-bpmn-moddle/-/zeebe-bpmn-moddle-0.12.1.tgz", + "integrity": "sha512-rnUoK+A/gzinOGUlmJKeXmnjorgEm4yf7qgeaowXGZOFtFqtM2lvJ7XYTJNsKClaNfFG245JtKHH3G/caJxE6g==", "dev": true } } diff --git a/package.json b/package.json index 55c64730c..94b0669e3 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "@babel/core": "^7.14.3", "@babel/plugin-transform-react-jsx": "^7.14.3", "@bpmn-io/element-template-chooser": "^0.0.5", - "@bpmn-io/element-templates-icons-renderer": "^0.1.1", + "@bpmn-io/element-templates-icons-renderer": "^0.1.2", "@bpmn-io/properties-panel": "^0.13.1", "@rollup/plugin-alias": "^3.1.2", "@rollup/plugin-babel": "^5.3.0", @@ -107,7 +107,7 @@ "sinon-chai": "^3.7.0", "sirv-cli": "^1.0.12", "webpack": "^5.38.1", - "zeebe-bpmn-moddle": "^0.12.0" + "zeebe-bpmn-moddle": "^0.12.1" }, "peerDependencies": { "bpmn-js": "8.x || 9.x", diff --git a/src/provider/cloud-element-templates/cmd/ChangeElementTemplateHandler.js b/src/provider/cloud-element-templates/cmd/ChangeElementTemplateHandler.js index 5d004d9dd..6906032b1 100644 --- a/src/provider/cloud-element-templates/cmd/ChangeElementTemplateHandler.js +++ b/src/provider/cloud-element-templates/cmd/ChangeElementTemplateHandler.js @@ -8,7 +8,6 @@ import { } from '../Helper'; import { - ensureExtension, createInputParameter, createOutputParameter, createTaskDefinitionWithType, @@ -109,48 +108,13 @@ export default class ChangeElementTemplateHandler { } _updateZeebeModelerTemplateIcon(element, newTemplate) { - const bpmnFactory = this._bpmnFactory, - commandStack = this._commandStack; + const modeling = this._modeling; const icon = newTemplate && newTemplate.icon; - // remove existing icon when none new set - if (!newTemplate || !icon) { - - const modelerTemplateIcon = findExtension(element, 'zeebe:ModelerTemplateIcon'); - - if (modelerTemplateIcon) { - - const extensionElements = getBusinessObject(element).get('extensionElements'); - commandStack.execute('element.updateModdleProperties', { - element, - moddleElement: extensionElements, - properties: { - values: without(extensionElements.get('values'), extension => extension === modelerTemplateIcon) - } - }); - } - - return; - } - - const { - contents - } = icon; - - // ensure extension elements - this._getOrCreateExtensionElements(element); - - // create or update zeebe:modelerTemplateIcon - const newIcon = ensureExtension(element, 'zeebe:ModelerTemplateIcon', bpmnFactory); - - return commandStack.execute('element.updateModdleProperties', { - element, - moddleElement: newIcon, - properties: { - body: contents - } + modeling.updateProperties(element, { + 'zeebe:modelerTemplateIcon': icon && icon.contents }); } diff --git a/src/provider/cloud-element-templates/create/TemplateElementFactory.js b/src/provider/cloud-element-templates/create/TemplateElementFactory.js index 88808426b..35797524f 100644 --- a/src/provider/cloud-element-templates/create/TemplateElementFactory.js +++ b/src/provider/cloud-element-templates/create/TemplateElementFactory.js @@ -21,8 +21,6 @@ import { ZEEBE_TASK_HEADER_TYPE } from '../util/bindingTypes'; -import { ensureExtension } from '../CreateHelper'; - export default class TemplateElementFactory { constructor(bpmnFactory, elementFactory, moddle) { @@ -145,13 +143,9 @@ export default class TemplateElementFactory { contents } = icon; - const bpmnFactory = this._bpmnFactory; - - const extensionElements = getBusinessObject(element).get('extensionElements'); - const modelerTemplateIcon = ensureExtension(element, 'zeebe:ModelerTemplateIcon', bpmnFactory); + const businessObject = getBusinessObject(element); - modelerTemplateIcon.set('body', contents); - modelerTemplateIcon.$parent = extensionElements; + businessObject.set('zeebe:modelerTemplateIcon', contents); } } diff --git a/src/provider/cloud-element-templates/util/templateUtil.js b/src/provider/cloud-element-templates/util/templateUtil.js index c2d58c43e..3d531b4e2 100644 --- a/src/provider/cloud-element-templates/util/templateUtil.js +++ b/src/provider/cloud-element-templates/util/templateUtil.js @@ -1,9 +1,3 @@ -import { findExtension } from '../Helper'; - -import { getBusinessObject } from 'bpmn-js/lib/util/ModelUtil'; - -import { without } from 'min-dash'; - export { getVersionOrDateFromTemplate, removeTemplate @@ -12,22 +6,12 @@ export { export function unlinkTemplate(element, injector) { const modeling = injector.get('modeling'); - // (1) remove template attributes + // remove template attributes modeling.updateProperties(element, { 'zeebe:modelerTemplate': null, - 'zeebe:modelerTemplateVersion': null + 'zeebe:modelerTemplateVersion': null, + 'zeebe:modelerTemplateIcon': null }); - - - // (2) remove template icon - const icon = findExtension(element, 'zeebe:ModelerTemplateIcon'); - - if (icon) { - const extensionElements = getBusinessObject(element).get('extensionElements'); - modeling.updateModdleProperties(element, extensionElements, { - values: without(extensionElements.get('values'), extension => extension === icon) - }); - } } export function updateTemplate(element, newTemplate, injector) { diff --git a/test/spec/provider/cloud-element-templates/ElementTemplates.spec.js b/test/spec/provider/cloud-element-templates/ElementTemplates.spec.js index 465959873..f021eaa73 100644 --- a/test/spec/provider/cloud-element-templates/ElementTemplates.spec.js +++ b/test/spec/provider/cloud-element-templates/ElementTemplates.spec.js @@ -155,7 +155,7 @@ describe('provider/cloud-element-templates - ElementTemplates', function() { // then expect(element.businessObject.get('name')).to.eql('Rest Task'); expect(extensionElements).to.exist; - expect(extensionElements.get('values')).to.have.length(4); + expect(extensionElements.get('values')).to.have.length(3); })); diff --git a/test/spec/provider/cloud-element-templates/cmd/ChangeElementTemplateHandler.spec.js b/test/spec/provider/cloud-element-templates/cmd/ChangeElementTemplateHandler.spec.js index 35e60697f..54f73156e 100644 --- a/test/spec/provider/cloud-element-templates/cmd/ChangeElementTemplateHandler.spec.js +++ b/test/spec/provider/cloud-element-templates/cmd/ChangeElementTemplateHandler.spec.js @@ -18,8 +18,7 @@ import { } from 'bpmn-js/lib/util/ModelUtil'; import { - findExtension, - findExtensions + findExtension } from 'src/provider/cloud-element-templates/Helper'; import { @@ -137,13 +136,10 @@ describe('cloud-element-templates - ChangeElementTemplateHandler', function() { changeTemplate(task, newTemplate); // then - const icon = findExtension(task, 'zeebe:ModelerTemplateIcon'); + const icon = getBusinessObject(task).get('zeebe:modelerTemplateIcon'); expect(icon).to.exist; - expect(icon).to.jsonEqual({ - $type: 'zeebe:ModelerTemplateIcon', - body: "data:image/svg+xml,%3Csvg width='24' height='24'%3C/svg%3E" - }); + expect(icon).to.eql("data:image/svg+xml,%3Csvg width='24' height='24'%3C/svg%3E"); })); @@ -158,7 +154,7 @@ describe('cloud-element-templates - ChangeElementTemplateHandler', function() { commandStack.undo(); // then - const icon = findExtension(task, 'zeebe:ModelerTemplateIcon'); + const icon = getBusinessObject(task).get('zeebe:modelerTemplateIcon'); expect(icon).to.not.exist; })); @@ -176,13 +172,10 @@ describe('cloud-element-templates - ChangeElementTemplateHandler', function() { commandStack.redo(); // then - const icon = findExtension(task, 'zeebe:ModelerTemplateIcon'); + const icon = getBusinessObject(task).get('zeebe:modelerTemplateIcon'); expect(icon).to.exist; - expect(icon).to.jsonEqual({ - $type: 'zeebe:ModelerTemplateIcon', - body: "data:image/svg+xml,%3Csvg width='24' height='24'%3C/svg%3E" - }); + expect(icon).to.eql("data:image/svg+xml,%3Csvg width='24' height='24'%3C/svg%3E"); })); }); @@ -814,15 +807,10 @@ describe('cloud-element-templates - ChangeElementTemplateHandler', function() { changeTemplate(task, newTemplate); // then - const icons = findExtensions(task, [ 'zeebe:ModelerTemplateIcon' ]); - const newIcon = icons[0]; - - expect(icons.length).to.equal(1); - expect(newIcon).to.exist; - expect(newIcon).to.jsonEqual({ - $type: 'zeebe:ModelerTemplateIcon', - body: 'https://example.com/foo.svg' - }); + const icon = getBusinessObject(task).get('zeebe:modelerTemplateIcon'); + + expect(icon).to.exist; + expect(icon).to.eql('https://example.com/foo.svg'); })); @@ -835,7 +823,7 @@ describe('cloud-element-templates - ChangeElementTemplateHandler', function() { changeTemplate(task, require('./icon-template-no-icon.json')); // then - const icon = findExtension(task, 'zeebe:ModelerTemplateIcon'); + const icon = getBusinessObject(task).get('zeebe:modelerTemplateIcon'); expect(icon).to.not.exist; })); @@ -2158,7 +2146,7 @@ describe('cloud-element-templates - ChangeElementTemplateHandler', function() { const task = elementRegistry.get('Task_1'); // assume - expect(findExtension(task, 'zeebe:ModelerTemplateIcon')).to.exist; + expect(getBusinessObject(task).get('zeebe:modelerTemplateIcon')).to.exist; // when changeTemplate(task, null); @@ -2166,7 +2154,7 @@ describe('cloud-element-templates - ChangeElementTemplateHandler', function() { // then expectNoElementTemplate(task); - expect(findExtension(task, 'zeebe:ModelerTemplateIcon')).not.to.exist; + expect(getBusinessObject(task).get('zeebe:modelerTemplateIcon')).not.to.exist; })); @@ -2182,7 +2170,7 @@ describe('cloud-element-templates - ChangeElementTemplateHandler', function() { // then expectElementTemplate(task, 'icon-template', 1); - expect(findExtension(task, 'zeebe:ModelerTemplateIcon')).to.exist; + expect(getBusinessObject(task).get('zeebe:modelerTemplateIcon')).to.exist; })); @@ -2200,7 +2188,7 @@ describe('cloud-element-templates - ChangeElementTemplateHandler', function() { // then expectNoElementTemplate(task); - expect(findExtension(task, 'zeebe:ModelerTemplateIcon')).not.to.exist; + expect(getBusinessObject(task).get('zeebe:modelerTemplateIcon')).not.to.exist; })); }); diff --git a/test/spec/provider/cloud-element-templates/cmd/icon-template.bpmn b/test/spec/provider/cloud-element-templates/cmd/icon-template.bpmn index 62475dfa1..a039b4cf4 100644 --- a/test/spec/provider/cloud-element-templates/cmd/icon-template.bpmn +++ b/test/spec/provider/cloud-element-templates/cmd/icon-template.bpmn @@ -1,10 +1,7 @@ - - - data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 2.5H8A5.5 5.5 0 0 0 2.5 8v8A5.5 5.5 0 0 0 8 21.5h8a5.5 5.5 0 0 0 5.5-5.5V8A5.5 5.5 0 0 0 16 2.5ZM8 1a7 7 0 0 0-7 7v8a7 7 0 0 0 7 7h8a7 7 0 0 0 7-7V8a7 7 0 0 0-7-7H8Z' fill='%23505562'/%3E%3Cpath d='M8.283 6.76v1.21c-.224 0-.416.02-.578.06a.612.612 0 0 0-.357.21c-.077.099-.106.242-.088.429l.17 1.622c.044.41-.001.742-.137.995a1.328 1.328 0 0 1-.61.584 3.306 3.306 0 0 1-.963.28c.392.059.724.154.995.286.272.132.47.323.594.572.125.25.165.583.121 1.001l-.17 1.623c-.018.183.011.326.088.429a.62.62 0 0 0 .363.209c.161.04.352.06.572.06v1.21c-.506 0-.935-.037-1.287-.11-.352-.073-.634-.19-.847-.352a1.214 1.214 0 0 1-.435-.627c-.077-.257-.097-.57-.06-.94l.165-1.573c.03-.28-.018-.497-.143-.655-.121-.158-.3-.268-.54-.33a3.102 3.102 0 0 0-.824-.099v-1.408c.308 0 .581-.031.82-.094.238-.066.42-.177.544-.335.125-.158.172-.376.143-.654L5.654 8.8c-.04-.378-.022-.697.055-.957.08-.26.225-.47.434-.627.213-.162.495-.277.847-.347a6.54 6.54 0 0 1 1.293-.11ZM9.527 16v-1.166h.77v-3.52h-.77v-1.155h2.096l.319 1.314c.209-.502.474-.876.797-1.122.326-.245.724-.368 1.194-.368a2.535 2.535 0 0 1 .962.176l-.528 1.435a2.48 2.48 0 0 0-.67-.087c-.382 0-.718.155-1.007.467-.286.312-.505.708-.655 1.188v1.672h1.155V16H9.527Zm3.955-3.399v-1.705l.258-.737h1.155l-.324 2.442h-1.09Zm2.239-5.841c.506 0 .935.037 1.287.11.352.073.633.19.842.352.212.158.36.367.44.627.08.257.1.57.06.94l-.165 1.574c-.029.278.019.496.143.654.125.158.305.27.54.335.238.063.513.094.824.094v1.408c-.308 0-.58.033-.82.099a.985.985 0 0 0-.544.33c-.124.158-.172.376-.143.655l.165 1.561c.04.378.02.697-.06.957-.077.26-.222.47-.435.628-.209.16-.491.276-.847.346a6.44 6.44 0 0 1-1.287.11v-1.21c.224 0 .415-.02.572-.06a.59.59 0 0 0 .358-.21c.08-.102.112-.245.093-.428l-.17-1.623c-.044-.414 0-.746.132-.995.136-.253.34-.446.616-.578.275-.136.598-.231.968-.286a3.52 3.52 0 0 1-1.001-.286 1.251 1.251 0 0 1-.594-.572c-.125-.253-.165-.587-.121-1.001l.17-1.622c.019-.187-.012-.33-.093-.43a.59.59 0 0 0-.358-.208 2.338 2.338 0 0 0-.572-.061V6.76Z' fill='%23505562'/%3E%3C/svg%3E - + diff --git a/test/spec/provider/cloud-element-templates/create/TemplateElementFactory.spec.js b/test/spec/provider/cloud-element-templates/create/TemplateElementFactory.spec.js index 170120d9e..8ea34afa7 100644 --- a/test/spec/provider/cloud-element-templates/create/TemplateElementFactory.spec.js +++ b/test/spec/provider/cloud-element-templates/create/TemplateElementFactory.spec.js @@ -17,7 +17,7 @@ import modelingModule from 'bpmn-js/lib/features/modeling'; import zeebeModdlePackage from 'zeebe-bpmn-moddle/resources/zeebe'; -import { findExtension, findExtensions } from 'src/provider/cloud-element-templates/Helper'; +import { findExtension } from 'src/provider/cloud-element-templates/Helper'; import diagramXML from '../fixtures/simple.bpmn'; @@ -127,16 +127,11 @@ describe('provider/cloud-element-templates - TemplateElementFactory', function() // when const element = templateElementFactory.create(elementTemplate); - const icons = findExtensions(element, [ 'zeebe:ModelerTemplateIcon' ]); - const icon = icons[0]; + const icon = getBusinessObject(element).get('zeebe:modelerTemplateIcon'); // then - expect(icons.length).to.equal(1); expect(icon).to.exist; - expect(icon).to.jsonEqual({ - $type: 'zeebe:ModelerTemplateIcon', - body: "data:image/svg+xml,%3Csvg width='24' height='24'%3C/svg%3E" - }); + expect(icon).to.equal("data:image/svg+xml,%3Csvg width='24' height='24'%3C/svg%3E"); })); diff --git a/test/spec/provider/cloud-element-templates/fixtures/complex.bpmn b/test/spec/provider/cloud-element-templates/fixtures/complex.bpmn index eeb303497..72245b965 100644 --- a/test/spec/provider/cloud-element-templates/fixtures/complex.bpmn +++ b/test/spec/provider/cloud-element-templates/fixtures/complex.bpmn @@ -9,7 +9,7 @@ Flow_0636r17 - + @@ -20,7 +20,6 @@ - data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 2.5H8A5.5 5.5 0 0 0 2.5 8v8A5.5 5.5 0 0 0 8 21.5h8a5.5 5.5 0 0 0 5.5-5.5V8A5.5 5.5 0 0 0 16 2.5ZM8 1a7 7 0 0 0-7 7v8a7 7 0 0 0 7 7h8a7 7 0 0 0 7-7V8a7 7 0 0 0-7-7H8Z' fill='%23505562'/%3E%3Cpath d='M8.283 6.76v1.21c-.224 0-.416.02-.578.06a.612.612 0 0 0-.357.21c-.077.099-.106.242-.088.429l.17 1.622c.044.41-.001.742-.137.995a1.328 1.328 0 0 1-.61.584 3.306 3.306 0 0 1-.963.28c.392.059.724.154.995.286.272.132.47.323.594.572.125.25.165.583.121 1.001l-.17 1.623c-.018.183.011.326.088.429a.62.62 0 0 0 .363.209c.161.04.352.06.572.06v1.21c-.506 0-.935-.037-1.287-.11-.352-.073-.634-.19-.847-.352a1.214 1.214 0 0 1-.435-.627c-.077-.257-.097-.57-.06-.94l.165-1.573c.03-.28-.018-.497-.143-.655-.121-.158-.3-.268-.54-.33a3.102 3.102 0 0 0-.824-.099v-1.408c.308 0 .581-.031.82-.094.238-.066.42-.177.544-.335.125-.158.172-.376.143-.654L5.654 8.8c-.04-.378-.022-.697.055-.957.08-.26.225-.47.434-.627.213-.162.495-.277.847-.347a6.54 6.54 0 0 1 1.293-.11ZM9.527 16v-1.166h.77v-3.52h-.77v-1.155h2.096l.319 1.314c.209-.502.474-.876.797-1.122.326-.245.724-.368 1.194-.368a2.535 2.535 0 0 1 .962.176l-.528 1.435a2.48 2.48 0 0 0-.67-.087c-.382 0-.718.155-1.007.467-.286.312-.505.708-.655 1.188v1.672h1.155V16H9.527Zm3.955-3.399v-1.705l.258-.737h1.155l-.324 2.442h-1.09Zm2.239-5.841c.506 0 .935.037 1.287.11.352.073.633.19.842.352.212.158.36.367.44.627.08.257.1.57.06.94l-.165 1.574c-.029.278.019.496.143.654.125.158.305.27.54.335.238.063.513.094.824.094v1.408c-.308 0-.58.033-.82.099a.985.985 0 0 0-.544.33c-.124.158-.172.376-.143.655l.165 1.561c.04.378.02.697-.06.957-.077.26-.222.47-.435.628-.209.16-.491.276-.847.346a6.44 6.44 0 0 1-1.287.11v-1.21c.224 0 .415-.02.572-.06a.59.59 0 0 0 .358-.21c.08-.102.112-.245.093-.428l-.17-1.623c-.044-.414 0-.746.132-.995.136-.253.34-.446.616-.578.275-.136.598-.231.968-.286a3.52 3.52 0 0 1-1.001-.286 1.251 1.251 0 0 1-.594-.572c-.125-.253-.165-.587-.121-1.001l.17-1.622c.019-.187-.012-.33-.093-.43a.59.59 0 0 0-.358-.208 2.338 2.338 0 0 0-.572-.061V6.76Z' fill='%23505562'/%3E%3C/svg%3E Flow_0gw5hlt Flow_0636r17 diff --git a/test/spec/provider/cloud-element-templates/fixtures/template-util.bpmn b/test/spec/provider/cloud-element-templates/fixtures/template-util.bpmn index 429825190..39112ae21 100644 --- a/test/spec/provider/cloud-element-templates/fixtures/template-util.bpmn +++ b/test/spec/provider/cloud-element-templates/fixtures/template-util.bpmn @@ -7,10 +7,7 @@ myExpression == true - - - data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100' width='100'%3E%3Ccircle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red' /%3E%3C/svg%3E - + diff --git a/test/spec/provider/cloud-element-templates/util/templateUtil.spec.js b/test/spec/provider/cloud-element-templates/util/templateUtil.spec.js index a13554f87..9466b9390 100644 --- a/test/spec/provider/cloud-element-templates/util/templateUtil.spec.js +++ b/test/spec/provider/cloud-element-templates/util/templateUtil.spec.js @@ -5,10 +5,6 @@ import { updateTemplate } from 'src/provider/cloud-element-templates/util/templateUtil'; -import { - findExtension -} from 'src/provider/cloud-element-templates/Helper'; - import TestContainer from 'mocha-test-container-support'; import { bootstrapModeler, inject } from 'test/TestHelper'; @@ -73,14 +69,14 @@ describe('provider/cloud-element-template - templateUtil', function() { let task = elementRegistry.get('Task_2'); // assume - expect(findExtension(task, 'zeebe:ModelerTemplateIcon')).to.exist; + expect(getBusinessObject(task).get('zeebe:modelerTemplateIcon')).to.exist; // when unlinkTemplate(task, injector); // then task = elementRegistry.get('Task_1'); - expect(findExtension(task, 'zeebe:ModelerTemplateIcon')).to.not.exist; + expect(getBusinessObject(task).get('zeebe:modelerTemplateIcon')).to.not.exist; }));