@genexus/diagram-editors 18.2.27 → 18.4.27

package/dist/collection/components/bpmn/bpmn-editor.js

@@ -7,10 +7,12 @@ import BpmnGraph from "./bpmn-graph";
 import CellTypes from "./cell-types";
 import { ActivityLoopTypeValues, ActivityOrderingValues, ActivityProperties, ArtifactProperties, ConnectorProperties, EventProperties, EventTriggerValues, GatewayProperties, GatewayTypeValues, TaskTypeValues } from "./properties";
 import ActivityShape from "./shapes/activity-shape";
+import TextAnnotationShape from "./shapes/text-annotation-shape";
 import { ConnectorShape } from "./shapes/connector-shape";
 import EventShape from "./shapes/event-shape";
 import GatewayShape from "./shapes/gateway-shape";
 import { StyleTokens } from "./style-tokens";
+import StyleTypes from "./style-types";
 const _SLOT_ACTIVITY_EVENTS = 'Events';
 const NEW_VERTEX_TYPES = [
     CellTypes.TASK,
@@ -18,7 +20,8 @@ const NEW_VERTEX_TYPES = [
     CellTypes.EXPANDED_EMBEDDED_SUB_PROCESS,
     CellTypes.INTERMEDIATE_EVENT,
     CellTypes.END_EVENT,
-    CellTypes.GATEWAY
+    CellTypes.GATEWAY,
+    CellTypes.TEXT_ANNOTATION,
 ];
 var CustomTools;
 (function (CustomTools) {
@@ -193,6 +196,12 @@ var CustomTools;
             [ActivityProperties.LoopType]: ActivityLoopTypeValues.Standard
         }
     };
+    CustomTools.ACTIVITY_LOOP_NONE = {
+        icon: 'bpmn-icon-lasso-tool',
+        label: 'Parallel Multi Instance', value: {
+            [ActivityProperties.LoopType]: ActivityLoopTypeValues.None
+        }
+    };
 })(CustomTools || (CustomTools = {}));
 const _SWIMLANE_RADIAL_MANEU = {
     customTools: {
@@ -243,6 +252,7 @@ export default class BpmnEditor extends Editor {
                                 CustomTools.ACTIVITY_LOOP_MULTI_PARALLEL,
                                 CustomTools.ACTIVITY_LOOP_MULTI_SEQUENTIAL,
                                 CustomTools.ACTIVITY_LOOP_STANDARD,
+                                CustomTools.ACTIVITY_LOOP_NONE,
                             ]
                         }
                     },
@@ -283,6 +293,7 @@ export default class BpmnEditor extends Editor {
                                 CustomTools.ACTIVITY_LOOP_MULTI_PARALLEL,
                                 CustomTools.ACTIVITY_LOOP_MULTI_SEQUENTIAL,
                                 CustomTools.ACTIVITY_LOOP_STANDARD,
+                                CustomTools.ACTIVITY_LOOP_NONE
                             ]
                         }
                     },
@@ -323,6 +334,7 @@ export default class BpmnEditor extends Editor {
                                 CustomTools.ACTIVITY_LOOP_MULTI_PARALLEL,
                                 CustomTools.ACTIVITY_LOOP_MULTI_SEQUENTIAL,
                                 CustomTools.ACTIVITY_LOOP_STANDARD,
+                                CustomTools.ACTIVITY_LOOP_NONE,
                             ]
                         }
                     },
@@ -356,7 +368,14 @@ export default class BpmnEditor extends Editor {
                     resizable: false,
                     style: `defaultVertex;${mx.mxConstants.STYLE_PERIMETER}=${mx.mxConstants.PERIMETER_ELLIPSE};${mx.mxConstants.STYLE_NOLABEL}=1`,
                     radialMenu: {
-                        newVertexTypes: NEW_VERTEX_TYPES,
+                        newVertexTypes: [
+                            CellTypes.TASK,
+                            CellTypes.EMBEDDED_SUB_PROCESS,
+                            CellTypes.EXPANDED_EMBEDDED_SUB_PROCESS,
+                            CellTypes.INTERMEDIATE_EVENT,
+                            CellTypes.GATEWAY,
+                            CellTypes.TEXT_ANNOTATION,
+                        ],
                         customTools: {
                             subMenuMain: [
                                 CustomTools.StartEvents.NONE,
@@ -411,7 +430,7 @@ export default class BpmnEditor extends Editor {
                     resizable: false,
                     style: `defaultVertex;${mx.mxConstants.STYLE_PERIMETER}=${mx.mxConstants.PERIMETER_ELLIPSE};${mx.mxConstants.STYLE_NOLABEL}=1`,
                     radialMenu: {
-                        newVertexTypes: NEW_VERTEX_TYPES,
+                        newVertexTypes: [CellTypes.TEXT_ANNOTATION],
                         customTools: {
                             subMenuMain: [
                                 CustomTools.EndEvents.NONE,
@@ -422,7 +441,13 @@ export default class BpmnEditor extends Editor {
                                 CustomTools.EndEvents.TERMINATE
                             ]
                         }
-                    }
+                    },
+                    cellConectionRestrictions: new Map([
+                        [CellTypes.TEXT_ANNOTATION, {
+                                to: CellTypes.TEXT_ANNOTATION,
+                                isValidConnection: () => true
+                            }],
+                    ])
                 }),
                 new CellDescriptor({
                     id: CellTypes.GATEWAY,
@@ -476,9 +501,26 @@ export default class BpmnEditor extends Editor {
                     icon: '',
                     labelAttribute: ConnectorProperties.Text,
                     isEdge: true,
-                    style: `defaultEdge`,
+                    style: StyleTypes.SEQUENCE_FLOW,
                     shape: ConnectorShape
-                })
+                }),
+                new CellDescriptor({
+                    id: CellTypes.TEXT_ANNOTATION,
+                    baseName: CellTypes.TEXT_ANNOTATION,
+                    icon: 'bpmn-icon-text-annotation',
+                    isSlot: true,
+                    slotId: _SLOT_ACTIVITY_EVENTS,
+                    labelAttribute: ActivityProperties.Name,
+                    isVertex: true,
+                    size: StyleTokens.TEXT_ANNOTATION_SIZE,
+                    shape: TextAnnotationShape,
+                    radialMenu: {
+                        delete: true,
+                        newEdge: false,
+                        newVertexTypes: [],
+                    },
+                    style: `defaultVertex;`,
+                }),
             ],
             defaultEdgeDescriptorId: CellTypes.CONNECTOR,
             globalStyles: [
@@ -494,14 +536,51 @@ export default class BpmnEditor extends Editor {
                         [mx.mxConstants.STYLE_FONTCOLOR]: StyleTokens.DEFAULT_FONT_COLOR,
                         [mx.mxConstants.STYLE_FONTSIZE]: StyleTokens.DEFAULT_FONT_SIZE,
                         [mx.mxConstants.STYLE_STROKEWIDTH]: StyleTokens.DEFAULT_STROKE_WIDTH,
-                        [mx.mxConstants.STYLE_LABEL_BACKGROUNDCOLOR]: StyleTokens.LABEL_BACKGROUND_COLOR
+                        [mx.mxConstants.STYLE_LABEL_BACKGROUNDCOLOR]: StyleTokens.LABEL_BACKGROUND_COLOR,
+                        [mx.mxConstants.STYLE_WHITE_SPACE]: mx.mxConstants.WORD_WRAP,
+                    }
+                },
+                {
+                    name: StyleTypes.SEQUENCE_FLOW,
+                    value: {
+                        [mx.mxConstants.STYLE_SHAPE]: mx.mxConstants.SHAPE_CONNECTOR,
+                        [mx.mxConstants.STYLE_ENDARROW]: mx.mxConstants.ARROW_BLOCK,
+                        [mx.mxConstants.STYLE_EDGE]: mx.mxConstants.EDGESTYLE_ORTHOGONAL,
+                        [mx.mxConstants.STYLE_ROUNDED]: '1',
+                        [mx.mxConstants.STYLE_ARCSIZE]: 10,
+                        [mx.mxConstants.STYLE_VERTICAL_ALIGN]: mx.mxConstants.ALIGN_MIDDLE,
+                        [mx.mxConstants.STYLE_ALIGN]: mx.mxConstants.ALIGN_CENTER,
+                        [mx.mxConstants.STYLE_STROKECOLOR]: StyleTokens.CONNECTOR_STROKE_COLOR,
+                        [mx.mxConstants.STYLE_FONTCOLOR]: StyleTokens.DEFAULT_FONT_COLOR,
+                        [mx.mxConstants.STYLE_STROKEWIDTH]: StyleTokens.DEFAULT_STROKE_WIDTH,
+                    }
+                },
+                {
+                    name: StyleTypes.ASSOSIATION,
+                    value: {
+                        [mx.mxConstants.STYLE_SHAPE]: mx.mxConstants.SHAPE_CONNECTOR,
+                        [mx.mxConstants.STYLE_ENDARROW]: undefined,
+                        [mx.mxConstants.STYLE_DASHED]: 1,
+                        [mx.mxConstants.STYLE_DASH_PATTERN]: "1 2",
+                        [mx.mxConstants.STYLE_EDGE]: mx.mxConstants.EDGESTYLE_ORTHOGONAL,
+                        [mx.mxConstants.STYLE_ROUNDED]: '1',
+                        [mx.mxConstants.STYLE_ARCSIZE]: 10,
+                        [mx.mxConstants.STYLE_VERTICAL_ALIGN]: mx.mxConstants.ALIGN_MIDDLE,
+                        [mx.mxConstants.STYLE_ALIGN]: mx.mxConstants.ALIGN_CENTER,
+                        [mx.mxConstants.STYLE_STROKECOLOR]: StyleTokens.CONNECTOR_STROKE_COLOR,
+                        [mx.mxConstants.STYLE_FONTCOLOR]: StyleTokens.DEFAULT_FONT_COLOR,
+                        [mx.mxConstants.STYLE_STROKEWIDTH]: StyleTokens.DEFAULT_STROKE_WIDTH,
                     }
                 },
                 {
-                    name: 'defaultEdge',
+                    name: StyleTypes.MESSAGE_FLOW,
                     value: {
                         [mx.mxConstants.STYLE_SHAPE]: mx.mxConstants.SHAPE_CONNECTOR,
+                        [mx.mxConstants.STYLE_STARTARROW]: mx.mxConstants.ARROW_OVAL,
+                        [mx.mxConstants.STYLE_STARTFILL]: false,
                         [mx.mxConstants.STYLE_ENDARROW]: mx.mxConstants.ARROW_BLOCK,
+                        [mx.mxConstants.STYLE_ENDFILL]: false,
+                        [mx.mxConstants.STYLE_DASHED]: 1,
                         [mx.mxConstants.STYLE_EDGE]: mx.mxConstants.EDGESTYLE_ORTHOGONAL,
                         [mx.mxConstants.STYLE_ROUNDED]: '1',
                         [mx.mxConstants.STYLE_ARCSIZE]: 10,
@@ -514,6 +593,7 @@ export default class BpmnEditor extends Editor {
                 }
             ]
         });
+        console.log("asdadsad");
     }
     createGraph(options) {
         return new BpmnGraph(options);

package/dist/collection/components/bpmn/bpmn-graph.js

@@ -4,11 +4,13 @@ import mx from "../common/mx";
 import Utils from "../common/utils";
 import CellTypes from "./cell-types";
 import { LayoutManager, SwimlaneManager } from "./layout";
-import { ConnectorProperties, GatewayProperties, GatewayTypeValues, SequenceConnectorType } from "./properties";
+import { ConnectorProperties, ConnectorType, GatewayProperties, GatewayTypeValues, SequenceConnectorType } from "./properties";
 import { StyleTokens } from "./style-tokens";
+import StyleTypes from "./style-types";
 export default class BpmnGraph extends Graph {
     constructor(options) {
         super(options);
+        this.multigraph = false;
         this.tolerance = 20;
         this.swimlaneManager = new SwimlaneManager(this, false, undefined, undefined);
         this.layoutManager = new LayoutManager(this);
@@ -60,10 +62,8 @@ export default class BpmnGraph extends Graph {
     }
     isSwimlane(cell) {
         return Utils.cellOfType(cell, [
-            CellTypes.TASK,
             CellTypes.SUB_PROCESS,
             CellTypes.EMBEDDED_SUB_PROCESS,
-            CellTypes.EXPANDED_EMBEDDED_SUB_PROCESS,
             CellTypes.SUB_PROCESS_CHILDREN_SLOT,
             CellTypes.POOL,
             CellTypes.LANE
@@ -157,6 +157,9 @@ export default class BpmnGraph extends Graph {
         return super.getDropTarget(cells, evt, cell, clone);
     }
     _onCellConnected(evt) {
+        let edge = evt.getProperty('edge');
+        edge.style = StyleTypes.SEQUENCE_FLOW;
+        console.log('onCellConnected', evt);
         if (evt.getProperty('source')) {
             let vertex = evt.getProperty('terminal');
             if (Utils.cellOfType(vertex, CellTypes.GATEWAY)) {
@@ -172,6 +175,19 @@ export default class BpmnGraph extends Graph {
                 }
             }
         }
+        if (evt.getProperty('terminal')) {
+            let vertex = evt.getProperty('terminal');
+            if (Utils.cellOfType(vertex, CellTypes.TEXT_ANNOTATION)) {
+                let edge = evt.getProperty('edge');
+                edge.style = StyleTypes.ASSOSIATION;
+                if (Utils.cellOfType(edge, CellTypes.CONNECTOR)) {
+                    let connectorProps = edge.getValue() || {};
+                    if (connectorProps[ConnectorProperties.ConnectorType] != ConnectorType.Association) {
+                        this.getModel().setValue(edge, Object.assign({}, connectorProps, { [ConnectorProperties.ConnectorType]: ConnectorType.Association }));
+                    }
+                }
+            }
+        }
     }
     _onSplitEdge(evt) {
         let cells = evt.getProperty('cells');

package/dist/collection/components/bpmn/cell-types.js

@@ -10,6 +10,7 @@ const CellTypes = {
     GATEWAY: 'Gateway',
     POOL: 'Pool',
     LANE: 'Lane',
-    CONNECTOR: 'Connector'
+    CONNECTOR: 'Connector',
+    TEXT_ANNOTATION: 'TextAnnotation',
 };
 export default CellTypes;

package/dist/collection/components/bpmn/properties.js

@@ -13,6 +13,7 @@ export var TaskTypeValues;
 })(TaskTypeValues || (TaskTypeValues = {}));
 export var ActivityLoopTypeValues;
 (function (ActivityLoopTypeValues) {
+    ActivityLoopTypeValues["None"] = "None";
     ActivityLoopTypeValues["Standard"] = "Standard";
     ActivityLoopTypeValues["MultiInstance"] = "Multi-Instance";
 })(ActivityLoopTypeValues || (ActivityLoopTypeValues = {}));
@@ -54,10 +55,17 @@ export var EventTriggerValues;
     EventTriggerValues["Terminate"] = "Terminate";
     EventTriggerValues["Timer"] = "Timer";
 })(EventTriggerValues || (EventTriggerValues = {}));
+export var ConnectorType;
+(function (ConnectorType) {
+    ConnectorType["SequenceFlow"] = "SequenceFlow";
+    ConnectorType["Association"] = "Association";
+    ConnectorType["MessageFlow"] = "MessageFlow";
+})(ConnectorType || (ConnectorType = {}));
 export var ConnectorProperties;
 (function (ConnectorProperties) {
     ConnectorProperties["Text"] = "PWFSeqConnText";
     ConnectorProperties["SequenceType"] = "PWFSeqConnType";
+    ConnectorProperties["ConnectorType"] = "PWFConnType";
 })(ConnectorProperties || (ConnectorProperties = {}));
 export var SequenceConnectorType;
 (function (SequenceConnectorType) {

package/dist/collection/components/bpmn/shapes/text-annotation-shape.js

@@ -0,0 +1,26 @@
+import mx from "../../common/mx";
+import { StyleTokens } from "../style-tokens";
+export default class TextAnnotationShape extends mx.mxShape {
+    paintBackground(c, x, y, w, h) {
+        this.paintBorder(c, x, y, w, h);
+    }
+    paintBorder(c, x, y, w, h) {
+        let cell = this.state.cell;
+        let value = cell.getValue();
+        c.setFillColor(StyleTokens.TEXT_ANNOTATION_BACKGROUND_COLOR);
+        c.setStrokeColor(StyleTokens.TEXT_ANNOTATION_STROKE_COLOR);
+        c.rect(x, y, w, h);
+        c.fill();
+        c.begin();
+        c.moveTo(x + StyleTokens.TEXT_ANNOTATION_BRACKET_WIDTH, y);
+        c.lineTo(x, y);
+        c.lineTo(x, y + h);
+        c.lineTo(x + StyleTokens.TEXT_ANNOTATION_BRACKET_WIDTH, y + h);
+        c.stroke();
+        c.end();
+    }
+    getScale(c) {
+        let state = c.state;
+        return state.scale;
+    }
+}

package/dist/collection/components/bpmn/style-tokens.js

@@ -1,6 +1,8 @@
 export var StyleTokens;
 (function (StyleTokens) {
     StyleTokens.ACTIVITY_SIZE = { width: 130, height: 50 };
+    StyleTokens.TEXT_ANNOTATION_SIZE = { width: 130, height: 50 };
+    StyleTokens.TEXT_ANNOTATION_BRACKET_WIDTH = 17;
     StyleTokens.EVENT_SIZE = { width: 32, height: 32 };
     StyleTokens.ATTACHED_EVENT_SIZE = { width: 24, height: 24 };
     StyleTokens.GATEWAY_SIZE = { width: 40, height: 40 };
@@ -20,6 +22,8 @@ export var StyleTokens;
     StyleTokens.TASK_USER_STROKE_COLOR = '#96e3b0';
     StyleTokens.TASK_SCRIPT_BACKGROUND_COLOR = 'rgb(40,41,45)';
     StyleTokens.TASK_SCRIPT_STROKE_COLOR = '#5bb2ff';
+    StyleTokens.TEXT_ANNOTATION_BACKGROUND_COLOR = '#35363A';
+    StyleTokens.TEXT_ANNOTATION_STROKE_COLOR = '#a4a5a6';
     StyleTokens.SUB_PROCESS_BACKGROUND_COLOR = 'rgb(40,41,45)';
     StyleTokens.SUB_PROCESS_STROKE_COLOR = '#f89491';
     StyleTokens.GATEWAY_STROKE_COLOR = '#2dcf76';

package/dist/collection/components/bpmn/style-types.js

@@ -0,0 +1,6 @@
+const StyleTypes = {
+    SEQUENCE_FLOW: 'sequenceFlow',
+    MESSAGE_FLOW: 'messageFlow',
+    ASSOSIATION: 'association',
+};
+export default StyleTypes;

package/dist/collection/components/common/cell-descriptor.js

@@ -15,6 +15,7 @@ export default class CellDescriptor {
         this._labelAttribute = options.labelAttribute;
         this._nameAttribute = options.nameAttribute;
         this._resizable = options.resizable;
+        this._cellConectionRestrictions = options.cellConectionRestrictions;
         if (this._isVertex && !options.size)
             this._size = { width: 100, height: 50 };
         else
@@ -72,6 +73,9 @@ export default class CellDescriptor {
     get value() {
         return this._value;
     }
+    get cellConectionRestrictions() {
+        return this._cellConectionRestrictions;
+    }
     getRadialMenu(graph, cell) {
         if (typeof this._radialMenu === 'function')
             return this._radialMenu.call(this, graph, cell);

package/dist/collection/components/common/connection-handler.js

@@ -1,4 +1,15 @@
+import CellTypes from '../bpmn/cell-types';
 import mx from './mx';
+mx.mxConnectionHandler.prototype.start = function (state, x, y, edgeState) {
+    this.previous = state;
+    this.first = new mx.mxPoint(x, y);
+    this.edgeState = (edgeState != null) ? edgeState : this.createEdgeState(null);
+    this.marker.currentColor = this.marker.validColor;
+    this.marker.markedState = state;
+    this.marker.mark();
+    console.log("previous", this.previous, "actual", this.edgeState);
+    this.fireEvent(new mx.mxEventObject(mx.mxEvent.START, 'state', this.previous));
+};
 export default class ConnectionHandler extends mx.mxConnectionHandler {
     constructor(graph, factory) {
         super(graph, factory);
@@ -14,8 +25,12 @@ export default class ConnectionHandler extends mx.mxConnectionHandler {
         });
         return marker;
     }
+    isCreateTarget(evt) {
+        return this.createTarget;
+    }
     createEdgeState() {
-        let edge = this.graph.createEdge(null, null, null, null, null, 'defaultEdge');
+        console.log("createedgestate called");
+        let edge = this.graph.newCellInstance({ type: CellTypes.CONNECTOR });
         let geo = new mx.mxGeometry();
         geo.relative = false;
         edge.setGeometry(geo);
@@ -114,7 +129,9 @@ export default class ConnectionHandler extends mx.mxConnectionHandler {
                     value = this.edgeState.cell.value;
                     style = this.edgeState.cell.style;
                 }
+                console.log("edgeState before insert: ", this.edgeState);
                 edge = this.insertEdge(parent, null, value, source, target, style);
+                console.log("edge inserted: ", edge);
                 if (edge != null) {
                     this.graph.setConnectionConstraint(edge, source, true, this.sourceConstraint);
                     this.graph.setConnectionConstraint(edge, target, false, this.constraintHandler.currentConstraint);

package/dist/collection/components/common/graph.js

@@ -55,8 +55,10 @@ export default class Graph extends mx.mxGraph {
             if (this._defaultEdgeDescriptor) {
                 edge = new Cell(this._defaultEdgeDescriptor, {}, geo);
             }
-            else
+            else {
+                console.log("No style found");
                 edge = new mx.mxCell('', geo, 'defaultEdge');
+            }
             edge.setEdge(true);
             return edge;
         });
@@ -536,6 +538,33 @@ export default class Graph extends mx.mxGraph {
         }
         return null;
     }
+    isValidConnection(source, target) {
+        console.log('valid connection called');
+        if (!super.isValidConnection(source, target)) {
+            return false;
+        }
+        else {
+            if (source instanceof Cell && target instanceof Cell) {
+                if (source.descriptor.cellConectionRestrictions) {
+                    let restrictions = source.descriptor.cellConectionRestrictions;
+                    if (restrictions.has(target.descriptor.id)) {
+                        let restriction = restrictions.get(target.descriptor.id);
+                        if (restriction.isValidConnection)
+                            restriction.isValidConnection(source, target);
+                        else
+                            this.validationAlert("A cell restriction definition must have an isValidConnection memeber implementation");
+                    }
+                    else {
+                        return false;
+                    }
+                }
+            }
+        }
+        return true;
+    }
+    validationAlert(message) {
+        console.log(message);
+    }
     getState() {
         return {
             elements: this.getElementsState(this.getDefaultParent().children)

package/dist/collection/components/common/mx.js

@@ -18,11 +18,16 @@ mx.mxConstants.VALID_COLOR = CommonStyleTokens.HIGHLIGHT_CONNECTION_COLOR;
 mx.mxConstants.GUIDE_COLOR = CommonStyleTokens.GUIDE_COLOR;
 mx.mxConstants.GUIDE_STROKEWIDTH = CommonStyleTokens.GUIDE_STROKE_WIDTH;
 mx.mxConstants.DROP_TARGET_COLOR = CommonStyleTokens.DROP_TARGET_COLOR;
+mx.mxEdgeHandler.prototype.livePreview = true;
+mx.mxConnectionHandler.prototype.livePreview = true;
+mx.mxVertexHandler.prototype.livePreview = true;
+mx.mxGraphHandler.prototype.maxLivePreview = 10;
 mx.mxUrlConverter.prototype.isRelativeUrl = function (url) {
     return url.substring(0, 2) != '//' && url.substring(0, 7) != 'http://' &&
         url.substring(0, 8) != 'https://' && url.substring(0, 10) != 'data:image' &&
         url.substring(0, 7) != 'file://' &&
-        url.substring(0, 7) != 'gxjs://';
+        url.substring(0, 7) != 'gxjs://' &&
+        url.substring(0, 10) != 'gx-file://';
 };
 mx.mxMarker.addMarker('oval', function (canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) {
     var a = size / 2;

package/dist/collection/components/common/vertex-tool-handler.js

@@ -2,10 +2,11 @@ import mx from "./mx";
 const _HANDLER_PADDING = 10;
 export default class VertexToolHandler extends mx.mxVertexHandler {
     constructor(state) {
+        console.log("mxVertexHandler creation");
         super(state);
     }
     init() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         super.init();
         let graph = this.graph;
         let state = this.state;
@@ -32,13 +33,13 @@ export default class VertexToolHandler extends mx.mxVertexHandler {
                         this._setCustomToolCallback(item, tool);
                     }
                 }
-                if (((_e = menu.customTools) === null || _e === void 0 ? void 0 : _e.subMenuMain) || menu.customTools.subMenuTop || menu.newEdge || menu.delete) {
+                if (((_e = menu.customTools) === null || _e === void 0 ? void 0 : _e.subMenuMain) || ((_f = menu.customTools) === null || _f === void 0 ? void 0 : _f.subMenuTop) || menu.newEdge || menu.delete) {
                     let toolsGroup = this._createGroup();
                     if (menu.newEdge === undefined || menu.newEdge)
                         this._createNewEdgeTool(toolsGroup);
                     if (menu.delete === undefined || menu.delete)
                         this._createDeleteTool(toolsGroup);
-                    if ((_f = menu.customTools) === null || _f === void 0 ? void 0 : _f.subMenuMain)
+                    if ((_g = menu.customTools) === null || _g === void 0 ? void 0 : _g.subMenuMain)
                         this._createCustomToolsPad(toolsGroup, menu);
                 }
             }
@@ -176,8 +177,10 @@ export default class VertexToolHandler extends mx.mxVertexHandler {
         mx.mxEvent.addGestureListeners(el, () => {
             let graph = this.graph;
             let cell = this.state.cell;
+            let state = this.state;
             if (tool.value) {
                 graph.getModel().setValue(cell, Object.assign({}, cell.getValue(), tool.value));
+                graph.refresh(cell);
             }
             this._toglePanel();
             if (tool.execute)

package/dist/diagram-editors/diagram-editors.esm.js

@@ -1 +1 @@
-import{b as e}from"./p-29a806fc.js";import{p as r}from"./p-dccd2ba0.js";r().then(r=>e([["p-f022f8f7",[[0,"gx-bpmn-editor",{editorHelper:[16],setProperties:[64],setState:[64],getState:[64],copyToClipboard:[64],pasteFromClipboard:[64],undo:[64],redo:[64]}]]],["p-0cbf75ed",[[0,"gx-report-layout-editor",{editorHelper:[16],paperProps:[32],printBlockHeights:[32],insertPrintBlock:[64],setProperties:[64],setPaperProperties:[64],setState:[64],copyToClipboard:[64],pasteFromClipboard:[64],undo:[64],redo:[64]}]]]],r));
+import{b as e}from"./p-29a806fc.js";import{p as r}from"./p-dccd2ba0.js";r().then(r=>e([["p-3a040373",[[0,"gx-bpmn-editor",{editorHelper:[16],setProperties:[64],setState:[64],getState:[64],copyToClipboard:[64],pasteFromClipboard:[64],undo:[64],redo:[64]}]]],["p-d6be927a",[[0,"gx-report-layout-editor",{editorHelper:[16],paperProps:[32],printBlockHeights:[32],insertPrintBlock:[64],setProperties:[64],setPaperProperties:[64],setState:[64],copyToClipboard:[64],pasteFromClipboard:[64],undo:[64],redo:[64]}]]]],r));