Copy with Lasso Tool triggers `TypeError`

Developers
1

Hey there,

I’m currently using th bpmn modeler inside a vue framework and really enjoying the provided bpmn.io tools. However, I can’t figure out a bug with the lasso tool. If multple objects are selected with the lasso tool and I try to copy them, following error message will be triggered:

Uncaught (in promise) TypeError: businessObject.get is not a function
    getTemplateId$1 index.esm.js:17175
    _getTemplateId index.esm.js:18914
    get index.esm.js:18767
    getTemplate index.esm.js:1406
    getTypeLabel index.esm.js:1340
    Header index.esm.js:127
    Preact 24
    _update index.esm.js:1558
    onSelectionChanged index.esm.js:1576
    invokeFunction EventBus.js:519
    _invokeListener EventBus.js:371
    _invokeListeners EventBus.js:352
    fire EventBus.js:313
    select Selection.js:106
    select LassoTool.js:181
    LassoTool LassoTool.js:102
    invokeFunction EventBus.js:519
    _invokeListener EventBus.js:371
    _invokeListeners EventBus.js:352
    fire EventBus.js:313
    fire Dragging.js:169
    end Dragging.js:265
    trapClickAndEnd Dragging.js:314
    bind_1 index.esm.js:398
    init Dragging.js:513
    ignoreIfModelingDisabled DisableModeling.js:46
    fnName DisableModeling.js:36
    ignoreIfModelingDisabled DisableModeling.js:46
    fnName DisableModeling.js:36
    activateLasso LassoTool.js:157
    LassoTool LassoTool.js:88
    wrappedCallback EventBus.js:185
    invokeFunction EventBus.js:519
    _invokeListener EventBus.js:371
    _invokeListeners EventBus.js:352
    fire EventBus.js:313
    fire Dragging.js:169
    end Dragging.js:276
    bind_1 index.esm.js:398
    init Dragging.js:512
    ignoreIfModelingDisabled DisableModeling.js:46
    fnName DisableModeling.js:36
    ignoreIfModelingDisabled DisableModeling.js:46
    fnName DisableModeling.js:36
    activateSelection LassoTool.js:168
    toggle LassoTool.js:191
    _registerDefaultActions BpmnEditorActions.js:82
    trigger EditorActions.js:172
    DisableModeling DisableModeling.js:111
    fnName DisableModeling.js:36
    registerBindings BpmnKeyboardBindings.js:101
    invokeFunction EventBus.js:519
    _invokeListener EventBus.js:371
index.esm.js:17175

Below you can find the imports, init and package versions.

import BpmnModeler from "bpmn-js/lib/Modeler";
import 'camunda-bpmn-js/dist/assets/camunda-cloud-modeler.css';

import ZeebeModdle  from 'zeebe-bpmn-moddle/resources/zeebe.json';
import ZeebeModdleModule   from 'zeebe-bpmn-moddle/lib';
import '@bpmn-io/element-template-chooser/dist/element-template-chooser.css';
import ElementTemplateChooserModule from '@bpmn-io/element-template-chooser';
import TEMPLATES from '../.camunda/element-templates/templates.json';
import ElementTemplatesIconsRenderer from '@bpmn-io/element-templates-icons-renderer';

import TokenSimulationModule from 'bpmn-js-token-simulation';
import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
  CloudElementTemplatesPropertiesProviderModule,
  ZeebePropertiesProviderModule,
} from "bpmn-js-properties-panel";
import minimapModule from "diagram-js-minimap";

let canvas = this.$refs["canvas"];
let panel = this.$refs["panel"];
this.modeler = new BpmnModeler({
      container: canvas,
      keyboard: {
          bindTo: window
        },
      moddleExtensions: {
        zeebe: ZeebeModdle
      },
      propertiesPanel: {
        parent: panel,
      },
      additionalModules: [
        minimapModule,

        BpmnPropertiesPanelModule,
        BpmnPropertiesProviderModule,
        CloudElementTemplatesPropertiesProviderModule,
        ElementTemplateChooserModule,
        ElementTemplatesIconsRenderer,
        TokenSimulationModule,
        ZeebePropertiesProviderModule,
        ZeebeModdleModule
      ],
    });

this.modeler.get('elementTemplatesLoader').setTemplates(TEMPLATES);

"@bpmn-io/element-template-chooser": "^0.0.5",
"@bpmn-io/element-templates-icons-renderer": "^0.2.0",
"@bpmn-io/properties-panel": "^0.13.0",
"bpmn-js": "^9.3.1",
"bpmn-js-properties-panel": "1.2.0",
"bpmn-js-token-simulation": "^0.27.0",
"camunda-bpmn-js": "^0.16.1",
"core-js": "^3.18.2",
"diagram-js-minimap": "^2.0.3",
"zeebe-bpmn-moddle": "^0.12.0"
2

Seems like you’re using a setup that comprises element templates + stock modeling. I quick checked against some of our examples and could not find anything broken there.

Could you please share a code sandbox that allows us to inspect the issue? I suspect that one of your templates is broken or template binding and we don’t properly catch that error yet.

3

Hey nikku, thank you for your reply. I made a quick and dirty example. If you enable the lasso tool and select multiple elements the error should be triggered.
Without the bpmn-js-properties-panel import, the tool works fine.

1 Like
4

Your demo allowed me to reproduce the issue.

The new properties panel does support multi-selection in a controlled manner, however you’d need to upgrade both @bpmn-io/properties-panel and bpmn-js-properties-panel to be compatible with it. If you upgrade both dependencies to the latest version then multi selection (via lasso tool or other means) work properly again:

capture.KYacKv_optimized

Try out on this fork of your sandbox.

5

Thank you so much, updating resolved the issue.

1 Like
6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.