@genexus/diagram-editors 0.5.27 → 0.8.27

package/dist/cjs/gx-bpmn-editor.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e8fa91cf.js');
-const editor = require('./editor-27988eb7.js');
+const editor = require('./editor-386996a2.js');
 
 const CellTypes = {
     TASK: 'Task',
@@ -23,9 +23,7 @@ const CellTypes = {
 class StackLayout extends editor.mx.mxStackLayout {
     constructor(graph) {
         super(graph, false, undefined, undefined, undefined, undefined);
-        // Makes sure all children fit into the parent swimlane
         this.resizeParent = true;
-        // Applies the size to children if parent size changes
         this.fill = true;
     }
     isVertexIgnored(cell) {
@@ -124,6 +122,40 @@ var ArtifactProperties;
     ArtifactProperties["Name"] = "PWFArtifactName";
 })(ArtifactProperties || (ArtifactProperties = {}));
 
+var StyleTokens;
+(function (StyleTokens) {
+    StyleTokens.ACTIVITY_SIZE = { width: 130, height: 50 };
+    StyleTokens.EVENT_SIZE = { width: 32, height: 32 };
+    StyleTokens.ATTACHED_EVENT_SIZE = { width: 24, height: 24 };
+    StyleTokens.GATEWAY_SIZE = { width: 40, height: 40 };
+    StyleTokens.STROKE_WIDTH_THICK = 4;
+    StyleTokens.STROKE_WIDTH_MEDIUM = 2;
+    StyleTokens.STROKE_WIDTH_LIGHT = 1;
+    StyleTokens.DEFAULT_STROKE_COLOR = '#a4a5a6';
+    StyleTokens.BACKGROUND_COLOR = 'var(--color-background)';
+    StyleTokens.DEFAULT_STROKE_WIDTH = StyleTokens.STROKE_WIDTH_LIGHT;
+    StyleTokens.DEFAULT_BACKGROUND_COLOR = '#1d1e22';
+    StyleTokens.DEFAULT_FONT_COLOR = '#ffffff';
+    StyleTokens.DEFAULT_FONT_SIZE = '12';
+    StyleTokens.LABEL_BACKGROUND_COLOR = 'transparent';
+    StyleTokens.TASK_NONE_BACKGROUND_COLOR = 'rgb(40,41,45)';
+    StyleTokens.TASK_NONE_STROKE_COLOR = StyleTokens.DEFAULT_STROKE_COLOR;
+    StyleTokens.TASK_USER_BACKGROUND_COLOR = 'rgb(40,41,45)';
+    StyleTokens.TASK_USER_STROKE_COLOR = '#96e3b0';
+    StyleTokens.TASK_SCRIPT_BACKGROUND_COLOR = 'rgb(40,41,45)';
+    StyleTokens.TASK_SCRIPT_STROKE_COLOR = '#5bb2ff';
+    StyleTokens.SUB_PROCESS_BACKGROUND_COLOR = 'rgb(40,41,45)';
+    StyleTokens.SUB_PROCESS_STROKE_COLOR = '#f89491';
+    StyleTokens.GATEWAY_STROKE_COLOR = '#2dcf76';
+    StyleTokens.GATEWAY_BACKGROUND_COLOR = 'rgb(40,41,45)';
+    StyleTokens.EVENT_START_STROKE_COLOR = '#87cf2d';
+    StyleTokens.EVENT_INTERMEDIATE_STROKE_COLOR = '#bbbbbb';
+    StyleTokens.EVENT_END_STROKE_COLOR = '#ff261b';
+    StyleTokens.CONNECTOR_STROKE_COLOR = '#e8e8e9';
+    StyleTokens.CONNECTOR_CONDITIONAL_COLOR = '#96e3b0';
+    StyleTokens.CONNECTOR_OPTIONAL_COLOR = '#5bb2ff';
+})(StyleTokens || (StyleTokens = {}));
+
 class BpmnGraph extends editor.Graph {
     constructor(options) {
         super(options);
@@ -131,8 +163,6 @@ class BpmnGraph extends editor.Graph {
         this.swimlaneManager = new SwimlaneManager(this, false, undefined, undefined);
         this.layoutManager = new LayoutManager(this);
         this.addListener(editor.mx.mxEvent.CELL_CONNECTED, (_, evt) => this._onCellConnected(evt));
-        // This event handler fixes the problem when user throws an element over a Connectors that coresses Lanes. The parent assigned to the element is the Pool
-        // and the correct parent should be the Lane that encoloses the element's bounds.
         this.addListener(editor.mx.mxEvent.SPLIT_EDGE, (_, evt) => this._onSplitEdge(evt));
     }
     convertLogicalPointToPixels(cell, point) {
@@ -150,11 +180,11 @@ class BpmnGraph extends editor.Graph {
                 absOffset.x -= t.x;
                 absOffset.y -= t.y;
             }
-            return absOffset; //Utils.convertToAbsolutePosition(cell.getParent(), absOffset);
+            return absOffset;
         }
     }
     convertLogicalOffsetToPixels(cell, point) {
-        let labelPos = point; //Utils.convertToRelativePosition(cell, point);
+        let labelPos = point;
         let cx, cy;
         if (cell.isEdge()) {
             let vstate = this.view.getState(cell, true);
@@ -178,25 +208,6 @@ class BpmnGraph extends editor.Graph {
             y: labelPos.y - cy
         };
     }
-    // setCellValue(cell: mxgraph.mxCell, value: Object) {
-    //    if (!this.settingState && cell.isEdge()) {
-    //       let style = this.getCellStyle(cell);
-    //       let cstyle = Object.assign({}, style);
-    //       cstyle.edgeStyle =  mx.mxConstants.STYLE_NOEDGESTYLE;
-    //       let strStyle = [];
-    //       for (let key of Object.keys(cstyle)) {
-    //          strStyle.push(`${key}=${cstyle[key]}`);
-    //       }
-    //       //console.log('CELL Style', style, strStyle.join(';'));
-    //       this.model.beginUpdate();
-    //       this.setCellStyle(strStyle.join(';'), [cell]);
-    //       let geo = cell.getGeometry().clone();
-    //       geo.points = null;
-    //       this.model.setGeometry(cell, geo);
-    //       this.model.endUpdate();
-    //    }
-    //    super.setCellValue(cell, value);
-    // }
     isSwimlane(cell) {
         return editor.Utils.cellOfType(cell, [
             CellTypes.TASK,
@@ -214,12 +225,7 @@ class BpmnGraph extends editor.Graph {
     isCellFoldable(cell) {
         return false;
     }
-    // isConstrainChild(cell) {
-    //    console.log('Cons child', cell);
-    //    return false;
-    // }
     dblClick(evt, cell) {
-        //console.log('EVT', evt);         
         super.dblClick(evt, cell);
     }
     isValidRoot(cell) {
@@ -227,20 +233,30 @@ class BpmnGraph extends editor.Graph {
     }
     constrainChild(cell) {
         let parent = cell.getParent();
-        if (editor.Utils.cellOfType(cell, CellTypes.INTERMEDIATE_EVENT) &&
-            editor.Utils.cellOfType(parent, [CellTypes.TASK, CellTypes.EXPANDED_EMBEDDED_SUB_PROCESS])) {
-            this._constrainAttachedEvent(cell);
+        if (editor.Utils.cellOfType(cell, CellTypes.INTERMEDIATE_EVENT)) {
+            if (editor.Utils.cellOfType(parent, [CellTypes.TASK, CellTypes.EMBEDDED_SUB_PROCESS, CellTypes.EXPANDED_EMBEDDED_SUB_PROCESS]))
+                this._constrainAttachedEvent(cell);
+            else
+                this._constrainNonAttachedEvent(cell);
         }
         else if (editor.Utils.cellOfType(parent, CellTypes.EXPANDED_EMBEDDED_SUB_PROCESS) && editor.Utils.cellOfType(cell, CellTypes.SUB_PROCESS_CHILDREN_SLOT)) {
             this._constrainSubProcessChildrenSlot(cell);
         }
-        // else  
-        //    super.constrainChild(cell);
+    }
+    _constrainNonAttachedEvent(cell) {
+        if (cell instanceof editor.Cell) {
+            let geo = cell.getGeometry().clone();
+            geo.width = cell.descriptor.size.width;
+            geo.height = cell.descriptor.size.height;
+            this.model.setGeometry(cell, geo);
+        }
     }
     _constrainAttachedEvent(cell) {
         let parent = cell.getParent();
         let pgeo = parent.getGeometry();
         let geo = cell.getGeometry().clone();
+        geo.width = StyleTokens.ATTACHED_EVENT_SIZE.width;
+        geo.height = StyleTokens.ATTACHED_EVENT_SIZE.height;
         let pMidX = pgeo.width / 2;
         let pMidY = pgeo.height / 2;
         let midX = geo.width / 2;
@@ -321,8 +337,6 @@ class BpmnGraph extends editor.Graph {
                     pt.y += t.y;
                     let lane = this.getCellAt(pt.x, pt.y, undefined, true, false, (c) => !editor.Utils.cellOfType(c.cell, CellTypes.LANE));
                     if (lane) {
-                        // TODO: fix this if possible. This is done delayed becuase otherwose Cell position continues to be relative to de Pool instead of the Lane.
-                        // The problem with this solution is that this operation generates another entry in the undo stack, in other words it belongs to another transaction.
                         setTimeout(() => {
                             this.moveCells([cell], 0, 0, false, lane);
                         });
@@ -334,43 +348,7 @@ class BpmnGraph extends editor.Graph {
 }
 BpmnGraph.EXPANDED_SUB_PROCESS_MARGIN = 18;
 
-var StyleTokens;
-(function (StyleTokens) {
-    StyleTokens.STROKE_WIDTH_THICK = 4;
-    StyleTokens.STROKE_WIDTH_MEDIUM = 2;
-    StyleTokens.STROKE_WIDTH_LIGHT = 1;
-    StyleTokens.DEFAULT_STROKE_COLOR = '#a4a5a6';
-    StyleTokens.BACKGROUND_COLOR = 'var(--color-background)';
-    StyleTokens.DEFAULT_STROKE_WIDTH = StyleTokens.STROKE_WIDTH_LIGHT;
-    StyleTokens.DEFAULT_BACKGROUND_COLOR = '#1d1e22';
-    StyleTokens.DEFAULT_FONT_COLOR = '#ffffff';
-    StyleTokens.DEFAULT_FONT_SIZE = '12';
-    StyleTokens.LABEL_BACKGROUND_COLOR = 'transparent';
-    StyleTokens.TASK_NONE_BACKGROUND_COLOR = 'rgb(40,41,45)';
-    StyleTokens.TASK_NONE_STROKE_COLOR = StyleTokens.DEFAULT_STROKE_COLOR;
-    StyleTokens.TASK_USER_BACKGROUND_COLOR = 'rgb(40,41,45)';
-    StyleTokens.TASK_USER_STROKE_COLOR = '#96e3b0';
-    StyleTokens.TASK_SCRIPT_BACKGROUND_COLOR = 'rgb(40,41,45)';
-    StyleTokens.TASK_SCRIPT_STROKE_COLOR = '#5bb2ff';
-    StyleTokens.SUB_PROCESS_BACKGROUND_COLOR = 'rgb(40,41,45)';
-    StyleTokens.SUB_PROCESS_STROKE_COLOR = '#f89491';
-    StyleTokens.GATEWAY_STROKE_COLOR = '#2dcf76';
-    StyleTokens.GATEWAY_BACKGROUND_COLOR = 'rgb(40,41,45)';
-    StyleTokens.EVENT_START_STROKE_COLOR = '#87cf2d';
-    StyleTokens.EVENT_INTERMEDIATE_STROKE_COLOR = '#bbbbbb';
-    StyleTokens.EVENT_END_STROKE_COLOR = '#ff261b';
-    StyleTokens.CONNECTOR_STROKE_COLOR = '#e8e8e9';
-    StyleTokens.CONNECTOR_CONDITIONAL_COLOR = '#96e3b0';
-    StyleTokens.CONNECTOR_OPTIONAL_COLOR = '#5bb2ff';
-})(StyleTokens || (StyleTokens = {}));
-
 class ActivityShape extends editor.mx.mxShape {
-    // get constraints() {
-    //    let c = new mx.mxConnectionConstraint(new mx.mxPoint(0.25, 0), true);      
-    //    // (<any>c).dx = 100;
-    //    // (<any>c).dy = 100;
-    //    return [c];
-    // }
     paintBackground(c, x, y, w, h) {
         this.paintBorder(c, x, y, w, h);
         this.paintTypeIcon(c, x, y, w, h);
@@ -450,22 +428,8 @@ class ActivityShape extends editor.mx.mxShape {
             d: "M8.54,8.45a4.2,4.2,0,1,0-1.08,0C4.92,8.61.09,9.85.09,12.63v3.28H15.91V12.63C15.91,9.85,11.08,8.61,8.54,8.45ZM4.8,4.3A3.2,3.2,0,1,1,8,7.5,3.21,3.21,0,0,1,4.8,4.3ZM14.91,14.91H1.09V12.63c0-2,4.47-3.2,6.91-3.2s6.91,1.21,6.91,3.2Z",
             transform: `translate(5, 5)scale(${scale}, ${scale})`
         });
-        // c.addSvgElement('path', {
-        //    d: 'm 15,12 c 0.909,-0.845 1.594,-2.049 1.594,-3.385 0,-2.554 -1.805,-4.62199999 -4.357,-4.62199999 -2.55199998,0 -4.28799998,2.06799999 -4.28799998,4.62199999 0,1.348 0.974,2.562 1.89599998,3.405 -0.52899998,0.187 -5.669,2.097 -5.794,4.7560005 v 6.718 h 17 v -6.718 c 0,-2.2980005 -5.5279996,-4.5950005 -6.0509996,-4.7760005 zm -8,6 l 0,5.5 m 11,0 l 0,-5',
-        //    transform: `scale(${scale}, ${scale})`
-        // });
-        // c.addSvgElement('path', {
-        //    d: 'm 15,12 m 2.162,1.009 c 0,2.4470005 -2.158,4.4310005 -4.821,4.4310005 -2.66499998,0 -4.822,-1.981 -4.822,-4.4310005',
-        //    transform: `scale(${scale}, ${scale})`
-        // });
-        // c.addSvgElement('path', {
-        //    d: 'm 15,12 m -6.9,-3.80 c 0,0 2.25099998,-2.358 4.27399998,-1.177 2.024,1.181 4.221,1.537 4.124,0.965 -0.098,-0.57 -0.117,-3.79099999 -4.191,-4.13599999 -3.57499998,0.001 -4.20799998,3.36699999 -4.20699998,4.34799999 z',
-        //    style: 'fill:transparent',
-        //    transform: `scale(${scale}, ${scale})`
-        // });
     }
     paintSendIcon(c) {
-        //<path d="m 5.984999999999999,4.997999999999999 l 0,14 l 21,0 l 0,-14 z l 10.5,6 l 10.5,-6" style="fill: black; stroke-width: 1px; stroke: white;"></path>	
         let scale = this.getScale(c);
         c.addSvgElement('path', {
             d: 'm 5.984999999999999,4.997999999999999 l 0,14 l 21,0 l 0,-14 z l 10.5,6 l 10.5,-6',
@@ -566,7 +530,6 @@ class ActivityShape extends editor.mx.mxShape {
             transform: `scale(${scale}, ${scale})`,
         });
     }
-    //m42.5,60 m 7,2 l 0,10 m -5,-5 l 10,0
     getScale(c) {
         let state = c.state;
         return state.scale;
@@ -575,11 +538,11 @@ class ActivityShape extends editor.mx.mxShape {
 
 class ConnectorShape extends editor.mx.mxConnector {
     paintEdgeShape(c, pts) {
-        //c.setStrokeColor('pink');
         super.paintEdgeShape(c, pts);
     }
 }
 
+const EVENT_SHAPE_SIZE = 36;
 class EventShape extends editor.mx.mxShape {
     paintVertexShape(c, x, y, w, h) {
         let cell = this.state.cell;
@@ -590,8 +553,8 @@ class EventShape extends editor.mx.mxShape {
         let isThrow = editor.Utils.convertToBoolean(value[EventProperties.IsThrow]);
         let interrupts = !attached || editor.Utils.convertToBoolean(isIntermediate && value[EventProperties.Interrupts]);
         let scale = this.getScale(c);
-        let cx = w / 2 * scale;
-        let cy = h / 2 * scale;
+        let cx = EVENT_SHAPE_SIZE / 2 * scale;
+        let cy = EVENT_SHAPE_SIZE / 2 * scale;
         switch (descriptor.id) {
             case CellTypes.START_EVENT:
                 c.setStrokeColor(StyleTokens.EVENT_START_STROKE_COLOR);
@@ -606,7 +569,7 @@ class EventShape extends editor.mx.mxShape {
                 c.setStrokeWidth(StyleTokens.STROKE_WIDTH_THICK);
                 break;
         }
-        c.beginSvgGroup({ transform: `matrix(1 0 0 1 ${x * scale} ${y * scale})` });
+        c.beginSvgGroup({ transform: `matrix(1 0 0 1 ${x * scale} ${y * scale}) scale(${w / EVENT_SHAPE_SIZE}, ${h / EVENT_SHAPE_SIZE})` });
         c.addSvgElement('circle', {
             cx,
             cy,
@@ -801,12 +764,13 @@ class EventShape extends editor.mx.mxShape {
     }
 }
 
+const GATEWAY_SHAPE_SIZE = 50;
 class GatewayShape extends editor.mx.mxShape {
     paintVertexShape(c, x, y, w, h) {
         let scale = this.getScale(c);
         c.setStrokeColor(StyleTokens.GATEWAY_STROKE_COLOR);
         c.setFillColor(StyleTokens.GATEWAY_BACKGROUND_COLOR);
-        c.beginSvgGroup({ transform: `matrix(1 0 0 1 ${x * scale} ${y * scale})` });
+        c.beginSvgGroup({ transform: `matrix(1 0 0 1 ${x * scale} ${y * scale}) scale(${w / GATEWAY_SHAPE_SIZE}, ${h / GATEWAY_SHAPE_SIZE})` });
         c.addSvgElement('polygon', {
             points: '25,0 50,25 25,50 0,25',
             style: 'fill-opacity: 0.95',
@@ -1093,7 +1057,7 @@ class BpmnEditor extends editor.Editor {
                     slotId: _SLOT_ACTIVITY_EVENTS,
                     labelAttribute: ActivityProperties.Name,
                     isVertex: true,
-                    size: { width: 100, height: 60 },
+                    size: StyleTokens.ACTIVITY_SIZE,
                     shape: ActivityShape,
                     radialMenu: {
                         newVertexTypes: NEW_VERTEX_TYPES,
@@ -1130,7 +1094,7 @@ class BpmnEditor extends editor.Editor {
                     slotId: _SLOT_ACTIVITY_EVENTS,
                     labelAttribute: ActivityProperties.Name,
                     isVertex: true,
-                    size: { width: 100, height: 60 },
+                    size: StyleTokens.ACTIVITY_SIZE,
                     shape: ActivityShape,
                     radialMenu: {
                         newVertexTypes: NEW_VERTEX_TYPES,
@@ -1164,7 +1128,6 @@ class BpmnEditor extends editor.Editor {
                         slotCell.style = `${editor.mx.mxConstants.STYLE_RESIZABLE}=0;${editor.mx.mxConstants.STYLE_FILLCOLOR}=transparent;${editor.mx.mxConstants.STYLE_STROKECOLOR}=transparent`;
                         slotCell.setConnectable(false);
                         slotCell.setCollapsed(true);
-                        //slotCell.visible = false;
                         cell.insert(slotCell);
                         return cell;
                     }
@@ -1215,11 +1178,11 @@ class BpmnEditor extends editor.Editor {
                     labelAttribute: EventProperties.Name,
                     icon: 'bpmn-icon-start-event-none',
                     isVertex: true,
-                    size: { width: 36, height: 36 },
+                    size: StyleTokens.EVENT_SIZE,
                     labelOffset: { width: 0, height: 30 },
                     shape: EventShape,
                     resizable: false,
-                    style: `defaultVertex;${editor.mx.mxConstants.STYLE_PERIMETER}=${editor.mx.mxConstants.PERIMETER_ELLIPSE};`,
+                    style: `defaultVertex;${editor.mx.mxConstants.STYLE_PERIMETER}=${editor.mx.mxConstants.PERIMETER_ELLIPSE};${editor.mx.mxConstants.STYLE_NOLABEL}=1`,
                     radialMenu: {
                         newVertexTypes: NEW_VERTEX_TYPES,
                         customTools: {
@@ -1238,11 +1201,11 @@ class BpmnEditor extends editor.Editor {
                     labelAttribute: EventProperties.Name,
                     icon: 'bpmn-icon-intermediate-event-none',
                     isVertex: true,
-                    size: { width: 36, height: 36 },
+                    size: StyleTokens.EVENT_SIZE,
                     labelOffset: { width: 0, height: 30 },
                     shape: EventShape,
                     resizable: false,
-                    style: `defaultVertex;${editor.mx.mxConstants.STYLE_PERIMETER}=${editor.mx.mxConstants.PERIMETER_ELLIPSE}`,
+                    style: `defaultVertex;${editor.mx.mxConstants.STYLE_PERIMETER}=${editor.mx.mxConstants.PERIMETER_ELLIPSE};${editor.mx.mxConstants.STYLE_NOLABEL}=1`,
                     radialMenu: {
                         newVertexTypes: NEW_VERTEX_TYPES,
                         customTools: {
@@ -1270,11 +1233,11 @@ class BpmnEditor extends editor.Editor {
                     labelAttribute: EventProperties.Name,
                     icon: 'bpmn-icon-end-event-none',
                     isVertex: true,
-                    size: { width: 36, height: 36 },
+                    size: StyleTokens.EVENT_SIZE,
                     labelOffset: { width: 0, height: 30 },
                     shape: EventShape,
                     resizable: false,
-                    style: `defaultVertex;${editor.mx.mxConstants.STYLE_PERIMETER}=${editor.mx.mxConstants.PERIMETER_ELLIPSE}`,
+                    style: `defaultVertex;${editor.mx.mxConstants.STYLE_PERIMETER}=${editor.mx.mxConstants.PERIMETER_ELLIPSE};${editor.mx.mxConstants.STYLE_NOLABEL}=1`,
                     radialMenu: {
                         newVertexTypes: NEW_VERTEX_TYPES,
                         customTools: {
@@ -1295,7 +1258,7 @@ class BpmnEditor extends editor.Editor {
                     icon: 'bpmn-icon-gateway-none',
                     labelAttribute: GatewayProperties.Name,
                     isVertex: true,
-                    size: { width: 50, height: 50 },
+                    size: StyleTokens.GATEWAY_SIZE,
                     labelOffset: { width: 0, height: 35 },
                     shape: GatewayShape,
                     resizable: false,
@@ -1366,9 +1329,7 @@ class BpmnEditor extends editor.Editor {
                     name: 'defaultEdge',
                     value: {
                         [editor.mx.mxConstants.STYLE_SHAPE]: editor.mx.mxConstants.SHAPE_CONNECTOR,
-                        //[mx.mxConstants.STYLE_STARTARROW]: mx.mxConstants.ARROW_OVAL,
                         [editor.mx.mxConstants.STYLE_ENDARROW]: editor.mx.mxConstants.ARROW_BLOCK,
-                        //[mx.mxConstants.STYLE_EDGE]: mx.mxConstants.STYLE_NOEDGESTYLE,
                         [editor.mx.mxConstants.STYLE_EDGE]: editor.mx.mxConstants.EDGESTYLE_ORTHOGONAL,
                         [editor.mx.mxConstants.STYLE_ROUNDED]: '1',
                         [editor.mx.mxConstants.STYLE_ARCSIZE]: 10,
@@ -1376,22 +1337,11 @@ class BpmnEditor extends editor.Editor {
                         [editor.mx.mxConstants.STYLE_ALIGN]: editor.mx.mxConstants.ALIGN_CENTER,
                         [editor.mx.mxConstants.STYLE_STROKECOLOR]: StyleTokens.CONNECTOR_STROKE_COLOR,
                         [editor.mx.mxConstants.STYLE_FONTCOLOR]: StyleTokens.DEFAULT_FONT_COLOR,
-                        [editor.mx.mxConstants.STYLE_STROKEWIDTH]: StyleTokens.DEFAULT_STROKE_WIDTH
+                        [editor.mx.mxConstants.STYLE_STROKEWIDTH]: StyleTokens.DEFAULT_STROKE_WIDTH,
                     }
                 }
             ]
         });
-        //this.graph.recursiveResize = true;
-        // let g = new MyGroup();      
-        // let geo = new mx.mxGeometry(100, 100, 200, 100);
-        // g.setGeometry(geo);
-        // this.graph.addCell(g);
-        // g = new MyGroup();
-        // geo = new mx.mxGeometry(300, 100, 200, 100);
-        // g.setGeometry(geo);
-        // this.graph.addCell(g);
-        // let cell = this.graph.insertVertex(null, null, null, 10, 10, 100, 200);
-        // (<any>cell).foo = true;      
     }
     createGraph(options) {
         return new BpmnGraph(options);
@@ -1403,7 +1353,6 @@ class BpmnEditor extends editor.Editor {
             if (editor.Utils.cellOfType(cell, CellTypes.EMBEDDED_SUB_PROCESS)) {
                 for (let child of cell.children) {
                     if (editor.Utils.cellOfType(child, CellTypes.SUB_PROCESS_CHILDREN_SLOT)) {
-                        // child.setVisible(true);
                         this.graph.enterGroup(child);
                         this.graph.zoomActual();
                         this.fireEvent(new editor.mx.mxEventObject(BpmnEditor.EVENT_ROOT_CHANGED));
@@ -1418,8 +1367,6 @@ class BpmnEditor extends editor.Editor {
     }
     exitGroup(goHome) {
         let root = this.graph.getCurrentRoot();
-        // if (Utils.cellOfType(root, CellTypes.SUB_PROCESS_CHILDREN_SLOT))
-        //    root.visible = false;
         if (this.undoManager)
             this.undoManager.enabled = false;
         if (!goHome)
@@ -1517,9 +1464,7 @@ const BpmnEditorComponent = class {
     }
     render() {
         let styles = {};
-        return (index.h("div", { class: "gx-diagram-editor-root", style: { position: 'relative', height: '100%', width: '100%' } }, index.h("div", { tabindex: "-1", class: "bpmn-editor", style: styles, ref: (el) => this.container = el }), index.h("div", { style: { display: 'none' }, class: "diagram-outline", ref: (el) => this.outlineContainer = el }), index.h("div", { class: "diagram-bottom-pad", ref: (el) => this.bottomPad = el }, index.h("div", null, index.h("img", { class: "pad-image", style: { display: 'none' }, src: index.getAssetPath(`./assets/images/home.svg`), onClick: () => this.editor.exitGroup(true), ref: (el) => this.homeBtn = el })), index.h("div", null, index.h("img", { class: "pad-image", style: { display: 'none' }, src: index.getAssetPath(`./assets/images/up.svg`), onClick: () => this.editor.exitGroup(), ref: (el) => this.upBtn = el })), index.h("div", null, index.h("img", { class: "pad-image", src: index.getAssetPath(`./assets/images/map.svg`), onClick: () => this._toggleOutline() })), index.h("div", null, index.h("img", { class: "pad-image", src: index.getAssetPath(`./assets/images/zoom-reset.svg`), onClick: () => this.editor.graph.zoomActual() })), index.h("div", null, index.h("img", { class: "pad-image", src: index.getAssetPath(`./assets/images/zoom-in.svg`), onClick: () => this.editor.graph.zoomIn() })), index.h("div", null, index.h("img", { class: "pad-image", src: index.getAssetPath(`./assets/images/zoom-out.svg`), onClick: () => this.editor.graph.zoomOut() }))))
-        //{/* <img src={getAssetPath(`./assets/images/warning.gif`)} /> */}
-        );
+        return (index.h("div", { class: "gx-diagram-editor-root", style: { position: 'relative', height: '100%', width: '100%' } }, index.h("div", { tabindex: "-1", class: "bpmn-editor", style: styles, ref: (el) => this.container = el }), index.h("div", { style: { display: 'none' }, class: "diagram-outline", ref: (el) => this.outlineContainer = el }), index.h("div", { class: "diagram-bottom-pad", ref: (el) => this.bottomPad = el }, index.h("div", null, index.h("img", { class: "pad-image", style: { display: 'none' }, src: index.getAssetPath(`./assets/images/home.svg`), onClick: () => this.editor.exitGroup(true), ref: (el) => this.homeBtn = el })), index.h("div", null, index.h("img", { class: "pad-image", style: { display: 'none' }, src: index.getAssetPath(`./assets/images/up.svg`), onClick: () => this.editor.exitGroup(), ref: (el) => this.upBtn = el })), index.h("div", null, index.h("img", { class: "pad-image", src: index.getAssetPath(`./assets/images/map.svg`), onClick: () => this._toggleOutline() })), index.h("div", null, index.h("img", { class: "pad-image", src: index.getAssetPath(`./assets/images/zoom-reset.svg`), onClick: () => this.editor.graph.zoomActual() })), index.h("div", null, index.h("img", { class: "pad-image", src: index.getAssetPath(`./assets/images/zoom-in.svg`), onClick: () => this.editor.graph.zoomIn() })), index.h("div", null, index.h("img", { class: "pad-image", src: index.getAssetPath(`./assets/images/zoom-out.svg`), onClick: () => this.editor.graph.zoomOut() })))));
     }
     _toggleOutline() {
         if (this.outlineContainer.style.display === 'none') {

package/dist/cjs/gx-report-layout-editor.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e8fa91cf.js');
-const editor = require('./editor-27988eb7.js');
+const editor = require('./editor-386996a2.js');
 
 const CellTypes = {
     PRINT_BLOCK: 'PrintBlock',
@@ -116,7 +116,6 @@ class ReportGraph extends editor.Graph {
                         break;
                     case ReportElementProperties.IMAGE:
                         extraStyles[editor.mx.mxConstants.STYLE_IMAGE] = this.editorHelper.getImageUri(propValue);
-                        //style += `;${mx.mxConstants.STYLE_IMAGE}=https://images.pexels.com/photos/46710/pexels-photo-46710.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500`;                                 
                         break;
                 }
             }
@@ -286,7 +285,6 @@ class ReportGraph extends editor.Graph {
         var _a;
         this._paperProps = (_a = state.paperProperties) !== null && _a !== void 0 ? _a : ReportGraph.DEFAULT_PAGE_PROPERTIES;
         super.setState(state);
-        //this.resizePrintBlocks();
     }
 }
 ReportGraph.DEFAULT_PAGE_WIDTH = 827;
@@ -379,7 +377,6 @@ class RectangleShape extends editor.mx.mxShape {
         let radTopRight = Math.min(parseInt(value[ReportElementProperties.CORNER_RADIUS_TOPRIGHT]), maxRad);
         let radBottomLeft = Math.min(parseInt(value[ReportElementProperties.CORNER_RADIUS_BOTTOMLEFT]), maxRad);
         let radBottomRight = Math.min(parseInt(value[ReportElementProperties.CORNER_RADIUS_BOTTOMRIGHT]), maxRad);
-        /////// Paint background fill
         let backColor = value[ReportElementProperties.BACK_COLOR];
         if (backColor && backColor !== 'Transparent') {
             c.setStrokeColor('transparent');
@@ -401,7 +398,6 @@ class RectangleShape extends editor.mx.mxShape {
             c.close();
             c.fillAndStroke();
         }
-        ///
         c.setStrokeColor(value[ReportElementProperties.BORDER_COLOR]);
         let topBorder = value[ReportElementProperties.STYLE_TOP];
         if (topBorder && topBorder !== ReportBorderStyle.NONE) {
@@ -553,7 +549,6 @@ class ReportEditor extends editor.Editor {
                     isVertex: true,
                     size: { width: 0, height: 0 },
                     shape: TextBlockShape,
-                    //style: `defaultVertex;html=1;${mx.mxConstants.STYLE_LABEL_BORDERCOLOR}=red;${mx.mxConstants.STYLE_FONTSTYLE}=${mx.mxConstants.FONT_ITALIC};${mx.mxConstants.STYLE_VERTICAL_ALIGN}=${mx.mxConstants.ALIGN_BOTTOM};${mx.mxConstants.STYLE_ALIGN}=${mx.mxConstants.ALIGN_RIGHT}`,
                     style: `defaultVertex;html=1;`,
                 }),
                 new editor.CellDescriptor({
@@ -595,8 +590,6 @@ class ReportEditor extends editor.Editor {
                     isVertex: true,
                     size: { width: 50, height: 50 },
                     shape: editor.mx.mxImageShape,
-                    //style: `defaultVertex;${mx.mxConstants.STYLE_NOLABEL}=1;${mx.mxConstants.STYLE_EDITABLE}=0${mx.mxConstants.STYLE_IMAGE}=${getAssetPath(`./assets/delete.png`)}`,
-                    //style: `defaultVertex;${mx.mxConstants.STYLE_NOLABEL}=1;${mx.mxConstants.STYLE_EDITABLE}=0;${mx.mxConstants.STYLE_IMAGE}=https://images.pexels.com/photos/46710/pexels-photo-46710.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500`,
                     style: `defaultVertex;${editor.mx.mxConstants.STYLE_NOLABEL}=1;${editor.mx.mxConstants.STYLE_EDITABLE}=0;`,
                 }),
             ],
@@ -660,23 +653,15 @@ class ReportEditor extends editor.Editor {
             return !this.graph.isSwimlane(vertex);
         };
         this.layout.isVertexMovable = (cell) => {
-            return true; // PrintBlock are not movable by the user only
+            return true;
         };
         this.layoutMgr = new editor.mx.mxLayoutManager(this.graph);
         this.layoutMgr.getLayout = (cell) => {
             return this.layout;
-            // if (!model.isEdge(cell) && graph.getModel().getChildCount(cell) > 0 &&
-            //    (model.getParent(cell) == model.getRoot() || graph.isPool(cell)))
-            // {
-            //    layout.fill = graph.isPool(cell);
-            //    return layout;
-            // }
-            // return null;
         };
     }
     getDropTarget(x, y) {
         let parent = this.graph.getCellAt(x, y, null, true, false, (cell) => this.graph.isSwimlane(cell));
-        //let parent = this.graph.getCellAt(x, y);
         return parent;
     }
     getParentForPaste() {
@@ -837,7 +822,7 @@ const ReportEditorComponent = class {
             }
             totalHeight += pb;
         }
-        totalHeight += 5; // A little extra margin so that last ruler number can be seen
+        totalHeight += 5;
         return (index.h("div", { style: {
                 minWidth: `${RULER_WIDTH}px`,
                 backgroundImage: `url(${index.getAssetPath('./assets/images/grid.gif')}`,

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

@@ -59,9 +59,7 @@ export class BpmnEditorComponent {
                 h("div", null,
                     h("img", { class: "pad-image", src: getAssetPath(`./assets/images/zoom-in.svg`), onClick: () => this.editor.graph.zoomIn() })),
                 h("div", null,
-                    h("img", { class: "pad-image", src: getAssetPath(`./assets/images/zoom-out.svg`), onClick: () => this.editor.graph.zoomOut() }))))
-        //{/* <img src={getAssetPath(`./assets/images/warning.gif`)} /> */}
-        );
+                    h("img", { class: "pad-image", src: getAssetPath(`./assets/images/zoom-out.svg`), onClick: () => this.editor.graph.zoomOut() })))));
     }
     _toggleOutline() {
         if (this.outlineContainer.style.display === 'none') {

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

@@ -229,7 +229,7 @@ export default class BpmnEditor extends Editor {
                     slotId: _SLOT_ACTIVITY_EVENTS,
                     labelAttribute: ActivityProperties.Name,
                     isVertex: true,
-                    size: { width: 100, height: 60 },
+                    size: StyleTokens.ACTIVITY_SIZE,
                     shape: ActivityShape,
                     radialMenu: {
                         newVertexTypes: NEW_VERTEX_TYPES,
@@ -266,7 +266,7 @@ export default class BpmnEditor extends Editor {
                     slotId: _SLOT_ACTIVITY_EVENTS,
                     labelAttribute: ActivityProperties.Name,
                     isVertex: true,
-                    size: { width: 100, height: 60 },
+                    size: StyleTokens.ACTIVITY_SIZE,
                     shape: ActivityShape,
                     radialMenu: {
                         newVertexTypes: NEW_VERTEX_TYPES,
@@ -300,7 +300,6 @@ export default class BpmnEditor extends Editor {
                         slotCell.style = `${mx.mxConstants.STYLE_RESIZABLE}=0;${mx.mxConstants.STYLE_FILLCOLOR}=transparent;${mx.mxConstants.STYLE_STROKECOLOR}=transparent`;
                         slotCell.setConnectable(false);
                         slotCell.setCollapsed(true);
-                        //slotCell.visible = false;
                         cell.insert(slotCell);
                         return cell;
                     }
@@ -351,11 +350,11 @@ export default class BpmnEditor extends Editor {
                     labelAttribute: EventProperties.Name,
                     icon: 'bpmn-icon-start-event-none',
                     isVertex: true,
-                    size: { width: 36, height: 36 },
+                    size: StyleTokens.EVENT_SIZE,
                     labelOffset: { width: 0, height: 30 },
                     shape: EventShape,
                     resizable: false,
-                    style: `defaultVertex;${mx.mxConstants.STYLE_PERIMETER}=${mx.mxConstants.PERIMETER_ELLIPSE};`,
+                    style: `defaultVertex;${mx.mxConstants.STYLE_PERIMETER}=${mx.mxConstants.PERIMETER_ELLIPSE};${mx.mxConstants.STYLE_NOLABEL}=1`,
                     radialMenu: {
                         newVertexTypes: NEW_VERTEX_TYPES,
                         customTools: {
@@ -374,11 +373,11 @@ export default class BpmnEditor extends Editor {
                     labelAttribute: EventProperties.Name,
                     icon: 'bpmn-icon-intermediate-event-none',
                     isVertex: true,
-                    size: { width: 36, height: 36 },
+                    size: StyleTokens.EVENT_SIZE,
                     labelOffset: { width: 0, height: 30 },
                     shape: EventShape,
                     resizable: false,
-                    style: `defaultVertex;${mx.mxConstants.STYLE_PERIMETER}=${mx.mxConstants.PERIMETER_ELLIPSE}`,
+                    style: `defaultVertex;${mx.mxConstants.STYLE_PERIMETER}=${mx.mxConstants.PERIMETER_ELLIPSE};${mx.mxConstants.STYLE_NOLABEL}=1`,
                     radialMenu: {
                         newVertexTypes: NEW_VERTEX_TYPES,
                         customTools: {
@@ -406,11 +405,11 @@ export default class BpmnEditor extends Editor {
                     labelAttribute: EventProperties.Name,
                     icon: 'bpmn-icon-end-event-none',
                     isVertex: true,
-                    size: { width: 36, height: 36 },
+                    size: StyleTokens.EVENT_SIZE,
                     labelOffset: { width: 0, height: 30 },
                     shape: EventShape,
                     resizable: false,
-                    style: `defaultVertex;${mx.mxConstants.STYLE_PERIMETER}=${mx.mxConstants.PERIMETER_ELLIPSE}`,
+                    style: `defaultVertex;${mx.mxConstants.STYLE_PERIMETER}=${mx.mxConstants.PERIMETER_ELLIPSE};${mx.mxConstants.STYLE_NOLABEL}=1`,
                     radialMenu: {
                         newVertexTypes: NEW_VERTEX_TYPES,
                         customTools: {
@@ -431,7 +430,7 @@ export default class BpmnEditor extends Editor {
                     icon: 'bpmn-icon-gateway-none',
                     labelAttribute: GatewayProperties.Name,
                     isVertex: true,
-                    size: { width: 50, height: 50 },
+                    size: StyleTokens.GATEWAY_SIZE,
                     labelOffset: { width: 0, height: 35 },
                     shape: GatewayShape,
                     resizable: false,
@@ -502,9 +501,7 @@ export default class BpmnEditor extends Editor {
                     name: 'defaultEdge',
                     value: {
                         [mx.mxConstants.STYLE_SHAPE]: mx.mxConstants.SHAPE_CONNECTOR,
-                        //[mx.mxConstants.STYLE_STARTARROW]: mx.mxConstants.ARROW_OVAL,
                         [mx.mxConstants.STYLE_ENDARROW]: mx.mxConstants.ARROW_BLOCK,
-                        //[mx.mxConstants.STYLE_EDGE]: mx.mxConstants.STYLE_NOEDGESTYLE,
                         [mx.mxConstants.STYLE_EDGE]: mx.mxConstants.EDGESTYLE_ORTHOGONAL,
                         [mx.mxConstants.STYLE_ROUNDED]: '1',
                         [mx.mxConstants.STYLE_ARCSIZE]: 10,
@@ -512,22 +509,11 @@ export default class BpmnEditor extends Editor {
                         [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
+                        [mx.mxConstants.STYLE_STROKEWIDTH]: StyleTokens.DEFAULT_STROKE_WIDTH,
                     }
                 }
             ]
         });
-        //this.graph.recursiveResize = true;
-        // let g = new MyGroup();      
-        // let geo = new mx.mxGeometry(100, 100, 200, 100);
-        // g.setGeometry(geo);
-        // this.graph.addCell(g);
-        // g = new MyGroup();
-        // geo = new mx.mxGeometry(300, 100, 200, 100);
-        // g.setGeometry(geo);
-        // this.graph.addCell(g);
-        // let cell = this.graph.insertVertex(null, null, null, 10, 10, 100, 200);
-        // (<any>cell).foo = true;      
     }
     createGraph(options) {
         return new BpmnGraph(options);
@@ -539,7 +525,6 @@ export default class BpmnEditor extends Editor {
             if (Utils.cellOfType(cell, CellTypes.EMBEDDED_SUB_PROCESS)) {
                 for (let child of cell.children) {
                     if (Utils.cellOfType(child, CellTypes.SUB_PROCESS_CHILDREN_SLOT)) {
-                        // child.setVisible(true);
                         this.graph.enterGroup(child);
                         this.graph.zoomActual();
                         this.fireEvent(new mx.mxEventObject(BpmnEditor.EVENT_ROOT_CHANGED));
@@ -554,8 +539,6 @@ export default class BpmnEditor extends Editor {
     }
     exitGroup(goHome) {
         let root = this.graph.getCurrentRoot();
-        // if (Utils.cellOfType(root, CellTypes.SUB_PROCESS_CHILDREN_SLOT))
-        //    root.visible = false;
         if (this.undoManager)
             this.undoManager.enabled = false;
         if (!goHome)