bpmn-io · fake-join · Apr 5, 2022 · Apr 5, 2022 · Apr 5, 2022 · MaxTru
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,15 +2146,15 @@ 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);
 
         // 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
@@ -1,10 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <bpmn:definitions xmlns:bpmn="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:zeebe="http://camunda.org/schema/zeebe/1.0" id="Definitions_039bbyr" targetNamespace="http://bpmn.io/schema/bpmn">
   <bpmn:process id="Process_1" isExecutable="true">
-    <bpmn:serviceTask id="Task_1" zeebe:modelerTemplate="icon-template" zeebe:modelerTemplateVersion="1">
-      <bpmn:extensionElements>
-        <zeebe:modelerTemplateIcon>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</zeebe:modelerTemplateIcon>
-      </bpmn:extensionElements>
+    <bpmn:serviceTask id="Task_1" zeebe:modelerTemplate="icon-template" zeebe:modelerTemplateVersion="1" zeebe:modelerTemplateIcon="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">
     </bpmn:serviceTask>
   </bpmn:process>
   <bpmndi:BPMNDiagram id="BPMNDiagram_1">

diff --git 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");
   }));