| mxConstants.VERTEX_SELECTION_COLOR = '#F5832F'; //'red'; |
| mxConstants.VERTEX_SELECTION_STROKEWIDTH = 1; |
| mxConstants.VERTEX_SELECTION_DASHED = false; |
| mxResources.extension = '.properties'; |
| mxResources.resourcesEncoded = true; |
| window.org_eclipse_osbp_utils_vaadin_bpmn_BpmnRenderer = function() { |
| // Makes the shadow brighter |
| mxConstants.SHADOWCOLOR = '#C0C0C0'; |
| bpmnStartStyle = 'bpmnStartStyle'; |
| bpmnEndStyle = 'bpmnEndStyle'; |
| bpmnProcessStyle = 'bpmnProcessStyle'; |
| bpmnConditionStyle = 'bpmnConditionStyle'; |
| bpmnCrossoverStyle = 'bpmnCrossoverStyle'; |
| bpmnSwimlaneStyle = 'bpmnSwimlaneStyle'; |
| bpmnCallActivityStyle = 'bpmnCallActivityStyle'; |
| |
| bpmnConnector = this; |
| var margin = { |
| top : 20, |
| right : 10, |
| bottom : 40, |
| left : 10 |
| }, |
| graphWidth = "800px", |
| graphHeight = "600px"; |
| outlineWidth = "160px"; |
| outlineHeight = "120px"; |
| |
| bpmnCreationCode = ""; |
| selectedCell = ""; |
| graph = null; |
| model = null; |
| outline = null; |
| outlineNode = null; |
| intervalID = 0; |
| cellIsHighlighted = false; |
| |
| this.onStateChange = function() { |
| setCreationCode(this.getState().bpmnCreationCode); |
| setSelectedCell(this.getState().selectedCell); |
| } |
| |
| var element = this.getElement(); |
| var root = d3.select(element); |
| var bpmnChartDiv = root |
| .append("div") |
| .attr("id", "BPMN_div") |
| // .attr("onmousedown", "mDown(this)") |
| .style("position", "relative") |
| .style("z-index", "1") |
| .style("overflow", "hidden") |
| .style("border", "gray solid 1px") |
| .style("cursor", "default") |
| .style("width", graphWidth) |
| .style("height", graphHeight) |
| .style("left",margin.left + "px") |
| .style("top", margin.top + "px") |
| .style("background", "white"); |
| //.style("background", "transparent"); |
| bpmnChartDiv.append("div").attr("id","outlineContainer") |
| .attr("class", "os-bpmn-component-div") |
| .style("z-index", "2") |
| .style("position", "absolute") |
| .style("overflow", "hidden") |
| .style("background", "white") |
| .style("border-style", "solid") |
| .style("border-color","lightgray") |
| .style("width", outlineWidth) |
| .style("height", outlineHeight) |
| .style("left", "0px") |
| .style("bottom", "0px"); |
| |
| // Checks if browser is supported |
| if (!mxClient.isBrowserSupported()) { |
| // Displays an error message if the browser is |
| // not supported. |
| mxUtils.error('Browser is not supported!', 200, false); |
| } else { |
| outlineNode = bpmnChartDiv.select("#outlineContainer").node(); |
| var containerDiv = bpmnChartDiv |
| .append('div') |
| .style('position','absolute') |
| .style('overflow', 'hidden') |
| .style('left', '0px') |
| .style("background","transparent") |
| .style('top', '0px') |
| .style('right', '0px').style('bottom', '0px').node(); |
| mxEvent.disableContextMenu(containerDiv); |
| |
| if (mxClient.IS_QUIRKS) { |
| bpmnChartDiv.style('overflow', 'hidden'); |
| new mxDivResizer(containerDiv); |
| new mxDivResizer(outlineNode); |
| } |
| // Creates the graph inside the given container |
| graph = bpmnCreateGraph(containerDiv); |
| |
| // Set some stylesheet options for the visual appearance of vertices |
| bpmnCreateStyle(graph); |
| |
| // Creates the outline (navigator, overview) for moving |
| // around the graph in the top, right corner of the window. |
| outline = new mxOutline(graph, outlineNode); |
| |
| bpmnAddFoldingSwimlanesBehaviour(graph); |
| |
| model = graph.getModel(); |
| setSwimlanesLayout(graph, model); |
| |
| graph.setCellsSelectable(false); |
| bpmnConnector.addResizeListener(bpmnConnector.getElement(), function() { |
| var size = bpmnConnector.getElement().getSize(); |
| graph.ccFit(size.x, size.y); |
| }); |
| }; |
| } |
| |
| function bpmnCreateGraph(container) { |
| graph = new mxGraph(container); |
| graph.graphHandler.setRemoveCellsFromParent(false); |
| // makes the graph not editable |
| graph.setCellsResizable(false); |
| graph.setCellsEditable(false); |
| graph.setConnectableEdges(false); |
| graph.setEdgeLabelsMovable(false); |
| graph.setDisconnectOnMove(false); |
| graph.setAllowDanglingEdges(false); |
| graph.setCellsDisconnectable(false); |
| graph.setCellsBendable(false); |
| // Enables automatic sizing for vertices after editing and |
| // panning by using the left mouse button. |
| graph.setAutoSizeCells(true); |
| graph.setHtmlLabels(true); |
| graph.setPanning(true); |
| graph.centerZoom = true; |
| graph.minFitScale = 0.5; |
| graph.panningHandler.useLeftButtonForPanning = true; |
| |
| // Displays a popupmenu when the user clicks |
| // on a cell (using the left mouse button) but |
| // do not select the cell when the popup menu |
| // is displayed |
| graph.panningHandler.popupMenuHandler = false; |
| |
| // Disables tooltips on touch devices |
| graph.setTooltips(!mxClient.IS_TOUCH); |
| |
| // Installs a popupmenu handler using local function (see below). |
| graph.popupMenuHandler.factoryMethod = function(menu, cell, evt) { |
| return bpmnCreatePopupMenu(graph, menu, cell, evt); |
| }; |
| |
| // Fix for wrong preferred size |
| var oldGetPreferredSizeForCell = graph.getPreferredSizeForCell; |
| graph.getPreferredSizeForCell = function(cell) { |
| var result = oldGetPreferredSizeForCell.apply(this, arguments); |
| |
| if (result != null) { |
| result.width = Math.max(120, result.width - 40); |
| } |
| |
| return result; |
| }; |
| |
| // Sets the maximum text scale to 1 |
| graph.cellRenderer.getTextScale = function(state) { |
| return Math.min(1, state.view.scale); |
| }; |
| |
| // Dynamically adds text to the label as we zoom in |
| // (without affecting the preferred size for new cells) |
| graph.cellRenderer.getLabelValue = function(state) { |
| var cellValue = state.cell.value; |
| var result; |
| if (mxUtils.isNode(cellValue)) { |
| result = cellValue.getAttribute(cellLabelConst, ''); |
| // result = '<div style="width: 150px; |
| // white-space:normal;">'+result+'</div>' |
| |
| } else { |
| result = cellValue; |
| } |
| |
| return result; |
| }; |
| |
| graph.convertValueToString = function(cell) { |
| if (mxUtils.isNode(cell.value)) { |
| return cell.getAttribute('label', ''); |
| } |
| }; |
| |
| var cellLabelChanged = graph.cellLabelChanged; |
| graph.cellLabelChanged = function(cell, newValue, autoSize) { |
| if (mxUtils.isNode(cell.value)) { |
| // Clones the value for correct undo/redo |
| var elt = cell.value.cloneNode(true); |
| elt.setAttribute('label', newValue); |
| newValue = elt; |
| } |
| |
| cellLabelChanged.apply(this, arguments); |
| }; |
| |
| // handles mouse click events |
| graph.addListener(mxEvent.CLICK, function(sender, evt) { |
| var e = evt.getProperty('event'); // mouse event |
| // If left mouse click |
| if (e.button == 0) { |
| var cell = evt.getProperty('cell'); // cell may be null |
| if (cell != null && cell.value != null) { |
| if (cell.id.startsWith("StartEvent")) { |
| bpmnConnector.onStartClick(); |
| evt.consume(); |
| } else if(cell.getId() == selectedCell) { |
| bpmnConnector.onSelectedClick(); |
| evt.consume(); |
| } |
| } |
| }; |
| }); |
| |
| return graph; |
| }; |
| |
| function bpmnCreateStyle(graph) { |
| // Changes the default vertex style in-place |
| var style = mxUtils.clone(graph.getStylesheet().getDefaultVertexStyle()); |
| style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE; |
| style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle'; |
| style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = '#F2F3F4'; //'white'; |
| style[mxConstants.STYLE_FONTFAMILY] = 'Verdana'; |
| style[mxConstants.STYLE_FONTSIZE] = 14; |
| style[mxConstants.STYLE_GLASS] = '1'; |
| style[mxConstants.STYLE_STARTSIZE] = 22; |
| style[mxConstants.STYLE_HORIZONTAL] = false; |
| //delete style[mxConstants.STYLE_FILLCOLOR]; |
| style[mxConstants.STYLE_STROKECOLOR] = '#9FA0A5'; //d-grau |
| style[mxConstants.STYLE_FILLCOLOR] = '#F2F3F4'; //grau |
| style[mxConstants.STYLE_FONTCOLOR] = '#464646'; //d-d-grau |
| graph.getStylesheet().putCellStyle(bpmnSwimlaneStyle, style); |
| // Sets all cells not movable |
| // Decision to put this style here is to allow that the above style (for |
| // lanes and pools) are movable |
| style[mxConstants.STYLE_MOVABLE] = 0; |
| |
| //task |
| style = mxUtils.clone(style); |
| style[mxConstants.STYLE_SHAPE] = 'label'; //mxConstants.SHAPE_RECTANGLE; |
| style[mxConstants.STYLE_FONTSIZE] = 14; |
| style[mxConstants.STYLE_WHITE_SPACE] = 'wrap'; |
| //style[mxConstants.STYLE_ROUNDED] = true; |
| style[mxConstants.STYLE_HORIZONTAL] = true; |
| style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle'; |
| delete style[mxConstants.STYLE_STARTSIZE]; |
| //style[mxConstants.STYLE_GRADIENTCOLOR] = '#ffffff'; |
| style[mxConstants.STYLE_FILLCOLOR] = '#F2F3F4'; //#7d85df'; |
| style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'none'; |
| graph.getStylesheet().putCellStyle(bpmnProcessStyle, style); |
| |
| //call activity |
| style = mxUtils.clone(style); |
| style[mxConstants.STYLE_SHAPE] = 'label'; //mxConstants.SHAPE_RECTANGLE; |
| style[mxConstants.STYLE_FONTSIZE] = 14; |
| style[mxConstants.STYLE_WHITE_SPACE] = 'wrap'; |
| style[mxConstants.STYLE_ROUNDED] = true; |
| style[mxConstants.STYLE_STROKEWIDTH] = 3; |
| style[mxConstants.STYLE_STROKECOLOR] = '#000000'; |
| style[mxConstants.STYLE_HORIZONTAL] = true; |
| style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle'; |
| delete style[mxConstants.STYLE_STARTSIZE]; |
| style[mxConstants.STYLE_FILLCOLOR] = '#F2F3F4'; //#7d85df'; |
| style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'none'; |
| graph.getStylesheet().putCellStyle(bpmnCallActivityStyle, style); |
| |
| //start |
| style = mxUtils.clone(style); |
| delete style[mxConstants.STYLE_WHITE_SPACE]; |
| style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE; |
| style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter; |
| style[mxConstants.STYLE_SPACING_TOP] = 50; |
| style[mxConstants.STYLE_FONTSIZE] = 12; |
| style[mxConstants.STYLE_FONTSTYLE] = 1; |
| style[mxConstants.STYLE_FILLCOLOR] = '#D9FFC9'; //'green'; |
| graph.getStylesheet().putCellStyle(bpmnStartStyle, style); |
| |
| //gateway |
| style = mxUtils.clone(style); |
| style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RHOMBUS; |
| style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RhombusPerimeter; |
| style[mxConstants.STYLE_VERTICAL_ALIGN] = 'top'; |
| style[mxConstants.STYLE_SPACING_TOP] = 56; |
| style[mxConstants.STYLE_SPACING_RIGHT] = 64; |
| style[mxConstants.STYLE_FILLCOLOR] = '#FFF8D8'; //'yellow'; |
| // delete style[mxConstants.STYLE_FILLCOLOR]; |
| graph.getStylesheet().putCellStyle(bpmnConditionStyle, style); |
| |
| //end |
| style = mxUtils.clone(style); |
| style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_DOUBLE_ELLIPSE; |
| style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter; |
| style[mxConstants.STYLE_SPACING_TOP] = 36; |
| style[mxConstants.STYLE_FONTSIZE] = 12; |
| style[mxConstants.STYLE_FONTSTYLE] = 1; |
| delete style[mxConstants.STYLE_SPACING_RIGHT]; |
| style[mxConstants.STYLE_FILLCOLOR] = '#FFC9C9'; //'red'; |
| graph.getStylesheet().putCellStyle(bpmnEndStyle, style); |
| |
| style = graph.getStylesheet().getDefaultEdgeStyle(); |
| style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector; |
| style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_BLOCK; |
| style[mxConstants.STYLE_ROUNDED] = true; |
| style[mxConstants.STYLE_FONTCOLOR] = '#464646'; //'black'; |
| style[mxConstants.STYLE_STROKECOLOR] = '#9FA0A5'; //'black'; |
| |
| style = mxUtils.clone(style); |
| style[mxConstants.STYLE_DASHED] = true; |
| style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_OPEN; |
| style[mxConstants.STYLE_STARTARROW] = mxConstants.ARROW_OVAL; |
| graph.getStylesheet().putCellStyle(bpmnCrossoverStyle, style); |
| |
| // Installs double click on middle control point and |
| // changes style of edges between empty and this value |
| graph.alternateEdgeStyle = 'elbow=vertical'; |
| |
| return style; |
| }; |
| |
| function bpmnCreatePool(graph, parent, id, value, x, y, width, height) { |
| var pool = graph.insertVertex(parent, id, value, x, y, width, height, |
| bpmnSwimlaneStyle); |
| pool.setConnectable(false); |
| return pool; |
| }; |
| |
| function bpmnCreateLane(graph, parent, id, value, x, y, width, height) { |
| var lane = graph.insertVertex(parent, id, value, x, y, width, height, |
| bpmnSwimlaneStyle); |
| lane.setConnectable(false); |
| return lane; |
| }; |
| |
| function bpmnCreateStart(graph, parent, id, value, x, y, width, height) { |
| var start = graph.insertVertex(parent, id, value, x, y, width, height, |
| bpmnStartStyle); |
| start.setConnectable(false); |
| |
| intervalID = setInterval(function() { |
| model.beginUpdate(); |
| var cells = [start]; |
| if(cellIsHighlighted) { |
| graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, '#50FF50', cells); |
| cellIsHighlighted = false; |
| } else { |
| graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, '#D9FFC9', cells); |
| cellIsHighlighted = true; |
| } |
| graph.view.invalidate(start); |
| model.endUpdate(); |
| }, 1000); |
| |
| return start; |
| }; |
| |
| function bpmnCreateMessageStart(graph, parent, id, value, x, y, width, height) { |
| var start = graph.insertVertex(parent, id, value, x, y, width, height, |
| bpmnStartStyle); |
| start.setConnectable(false); |
| bpmnAddMessageStartOverlay(graph, start); |
| return start; |
| }; |
| |
| function bpmnCreateEnd(graph, parent, id, value, x, y, width, height) { |
| var end = graph.insertVertex(parent, id, value, x, y, width, height, |
| bpmnEndStyle); |
| end.setConnectable(false); |
| return end; |
| }; |
| |
| function bpmnCreateErrorEnd(graph, parent, id, value, x, y, width, height) { |
| var end = graph.insertVertex(parent, id, value, x, y, width, height, |
| bpmnEndStyle); |
| end.setConnectable(false); |
| bpmnAddErrorEndOverlay(graph, end); |
| return end; |
| }; |
| |
| function bpmnCreateTask(graph, parent, id, value, x, y, width, height) { |
| var task = graph.insertVertex(parent, id, value, x, y, width, height, |
| bpmnProcessStyle); |
| task.setConnectable(false); |
| return task; |
| }; |
| |
| function bpmnCreateCallActivity(graph, parent, id, value, x, y, width, height) { |
| var callActivity = graph.insertVertex(parent, id, value, x, y, width, height, |
| bpmnCallActivityStyle); |
| callActivity.setConnectable(false); |
| return callActivity; |
| }; |
| |
| function bpmnCreateUserTask(graph, parent, id, value, x, y, width, height) { |
| var userTask = bpmnCreateTask(graph, parent, id, value, x, y, width, height); |
| bpmnAddUserTaskOverlay(graph, userTask); |
| return userTask; |
| }; |
| |
| function bpmnCreateScriptTask(graph, parent, id, value, x, y, width, height) { |
| var scriptTask = bpmnCreateTask(graph, parent, id, value, x, y, width, height); |
| bpmnAddScriptTaskOverlay(graph, scriptTask); |
| return scriptTask; |
| }; |
| |
| function bpmnCreateServiceTask(graph, parent, id, value, x, y, width, height) { |
| var serviceTask = bpmnCreateTask(graph, parent, id, value, x, y, width, height); |
| bpmnAddServiceTaskOverlay(graph, serviceTask); |
| return serviceTask; |
| }; |
| |
| function bpmnCreateReceiveTask(graph, parent, id, value, x, y, width, height) { |
| var receiveTask = bpmnCreateTask(graph, parent, id, value, x, y, width, height); |
| bpmnAddReceiveTaskOverlay(graph, receiveTask); |
| return receiveTask; |
| }; |
| |
| function bpmnCreateSendTask(graph, parent, id, value, x, y, width, height) { |
| var sendTask = bpmnCreateTask(graph, parent, id, value, x, y, width, height); |
| bpmnAddSendTaskOverlay(graph, sendTask); |
| return sendTask; |
| }; |
| |
| function bpmnCreateCondition(graph, parent, id, value, x, y, width, height) { |
| var condition = graph.insertVertex(parent, id, value, x, y, width, height, |
| bpmnConditionStyle); |
| condition.setConnectable(false); |
| return condition; |
| }; |
| |
| function bpmnCreateParallelCondition(graph, parent, id, value, x, y, width, height) { |
| var condition = bpmnCreateCondition(graph, parent, id, value, x, y, width, |
| height); |
| bpmnAddParallelConditionOverlay(graph, condition); |
| return condition; |
| }; |
| |
| function bpmnCreateInclusiveCondition(graph, parent, id, value, x, y, width, height) { |
| var condition = bpmnCreateCondition(graph, parent, id, value, x, y, width, |
| height); |
| bpmnAddInclusiveConditionOverlay(graph, condition); |
| return condition; |
| }; |
| |
| function bpmnCreateExclusiveCondition(graph, parent, id, value, x, y, width, height) { |
| var condition = bpmnCreateCondition(graph, parent, id, value, x, y, width, |
| height); |
| bpmnAddExclusiveConditionOverlay(graph, condition); |
| return condition; |
| }; |
| |
| function bpmnCreateComplexCondition(graph, parent, id, value, x, y, width, height) { |
| var condition = bpmnCreateCondition(graph, parent, id, value, x, y, width, |
| height); |
| bpmnAddMergeConditionOverlay(graph, condition); |
| return condition; |
| }; |
| |
| function insertEdgeCrossOver(graph, parent, id, value, source, target) { |
| return graph.insertEdge(parent, id, value, source, target, |
| bpmnCrossoverStyle); |
| }; |
| |
| function insertEdgeFromMiddle(graph, parent, id, value, source, target) { |
| var edge = graph.insertEdge(parent, id, value, source, target); |
| edge.setStyle('verticalAlign=top'); |
| edge.geometry.points = [ new mxPoint(source.geometry.x |
| + source.geometry.width / 2, target.geometry.y |
| + target.geometry.height / 2) ]; |
| return edge; |
| }; |
| |
| function insertEdgeToMiddle(graph, parent, id, value, source, target) { |
| var edge = graph.insertEdge(parent, id, value, source, target); |
| edge.setStyle('verticalAlign=top'); |
| edge.geometry.points = [ new mxPoint(target.geometry.x |
| + target.geometry.width / 2, source.geometry.y |
| + source.geometry.height / 2) ]; |
| return edge; |
| }; |
| |
| function insertEdge(graph, parent, id, value, source, target, style) { |
| if (style == null) { |
| var x_left = target.geometry.x + target.geometry.width |
| - source.geometry.x; |
| var x_right = target.geometry.x - source.geometry.x |
| - source.geometry.width; |
| var y_top = target.geometry.y + target.geometry.height |
| - source.geometry.y; |
| var y_bottom = target.geometry.y - source.geometry.y |
| - source.geometry.height; |
| if (isToMiddleEdge(source, x_left, x_right, y_top, y_bottom)) { |
| return insertEdgeToMiddle(graph, parent, id, value, source, target); |
| } else if (isFromMiddleEdge(source, x_left, x_right, y_top, y_bottom)) { |
| return insertEdgeFromMiddle(graph, parent, id, value, source, |
| target); |
| } |
| } |
| return graph.insertEdge(parent, id, value, source, target, style); |
| }; |
| |
| function bpmnAddMessageStartOverlay(graph, cell) { |
| bpmnAddCenteredHalfSizeOverlay(graph, cell, 'data:image/jpg;base64,' |
| + bpmnConnector.getState().envelopeBase64Image); |
| }; |
| |
| function bpmnAddParallelConditionOverlay(graph, cell) { |
| bpmnAddCenteredHalfSizeOverlay(graph, cell, 'data:image/jpg;base64,' |
| + bpmnConnector.getState().parallelConditionBase64Image); |
| }; |
| |
| function bpmnAddErrorEndOverlay(graph, cell) { |
| bpmnAddCenteredHalfSizeOverlay(graph, cell, 'data:image/jpg;base64,' |
| + bpmnConnector.getState().errorBase64Image); |
| }; |
| |
| function bpmnAddUserTaskOverlay(graph, cell) { |
| bpmnAddTinyLeftTopCornerOverlay(graph, cell, 'data:image/jpg;base64,' |
| + bpmnConnector.getState().userTaskBase64Image); |
| }; |
| |
| function bpmnAddScriptTaskOverlay(graph, cell) { |
| bpmnAddTinyLeftTopCornerOverlay(graph, cell, 'data:image/jpg;base64,' |
| + bpmnConnector.getState().scriptTaskBase64Image); |
| }; |
| |
| function bpmnAddServiceTaskOverlay(graph, cell) { |
| bpmnAddTinyLeftTopCornerOverlay(graph, cell, 'data:image/jpg;base64,' |
| + bpmnConnector.getState().serviceTaskBase64Image); |
| }; |
| |
| function bpmnAddReceiveTaskOverlay(graph, cell) { |
| bpmnAddTinyLeftTopCornerOverlay(graph, cell, 'data:image/jpg;base64,' |
| + bpmnConnector.getState().envelopeBase64Image); |
| }; |
| |
| function bpmnAddSendTaskOverlay(graph, cell) { |
| bpmnAddTinyLeftTopCornerOverlay(graph, cell, 'data:image/jpg;base64,' |
| + bpmnConnector.getState().filledEnvelope16Base64Image); |
| }; |
| |
| function bpmnAddTinyLeftTopCornerOverlay(graph, cell, imagePath) { |
| var overlay = new mxCellOverlay(new mxImage(imagePath, 16, 16), null); |
| overlay.align = mxConstants.ALIGN_LEFT; |
| overlay.verticalAlign = mxConstants.ALIGN_TOP; |
| overlay.cursor = 'hand'; |
| overlay.offset = new mxPoint(10, 10); |
| graph.addCellOverlay(cell, overlay); |
| }; |
| |
| function bpmnAddInclusiveConditionOverlay(graph, cell) { |
| bpmnAddCenteredOverlay(graph, cell, 'data:image/jpg;base64,' |
| + bpmnConnector.getState().inclusiveConditionBase64Image); |
| }; |
| |
| function bpmnAddExclusiveConditionOverlay(graph, cell) { |
| bpmnAddCenteredOverlay(graph, cell, 'data:image/jpg;base64,' |
| + bpmnConnector.getState().exclusiveConditionBase64Image); |
| }; |
| |
| function bpmnAddComplexConditionOverlay(graph, cell) { |
| bpmnAddCenteredOverlay(graph, cell, 'data:image/jpg;base64,' |
| + bpmnConnector.getState().complexConditionBase64Image); |
| }; |
| |
| function bpmnAddCenteredOverlay(graph, cell, imagePath) { |
| var imageWidth = cell.geometry.width; |
| var imageHeight = cell.geometry.height; |
| var overlay = new mxCellOverlay(new mxImage(imagePath, imageWidth, |
| imageHeight), null); |
| overlay.align = mxConstants.ALIGN_CENTER; |
| overlay.verticalAlign = mxConstants.ALIGN_MIDDLE; |
| overlay.cursor = 'hand'; |
| graph.addCellOverlay(cell, overlay); |
| }; |
| |
| function bpmnAddCenteredHalfSizeOverlay(graph, cell, imagePath) { |
| var imageWidth = cell.geometry.width / 2; |
| var imageHeight = cell.geometry.height / 2; |
| var overlay = new mxCellOverlay(new mxImage(imagePath, imageWidth, |
| imageHeight), null); |
| overlay.align = mxConstants.ALIGN_CENTER; |
| overlay.verticalAlign = mxConstants.ALIGN_MIDDLE; |
| overlay.cursor = 'hand'; |
| graph.addCellOverlay(cell, overlay); |
| }; |
| |
| function bpmnAddFoldingSwimlanesBehaviour(graph) { |
| // Adds automatic layout and various switches if the |
| // graph is enabled |
| if (graph.isEnabled()) { |
| |
| // Changes swimlane orientation while collapsed |
| graph.model.getStyle = function(cell) { |
| var style = mxGraphModel.prototype.getStyle.apply(this, arguments); |
| |
| if (graph.isCellCollapsed(cell)) { |
| if (style != null) { |
| style += ';'; |
| } else { |
| style = ''; |
| } |
| |
| style += 'horizontal=1;align=left;spacingLeft=14;'; |
| } |
| |
| return style; |
| }; |
| |
| // Keeps widths on collapse/expand |
| var foldingHandler = function(sender, evt) { |
| var cells = evt.getProperty('cells'); |
| |
| for (var i = 0; i < cells.length; i++) { |
| var geo = graph.model.getGeometry(cells[i]); |
| |
| if (geo.alternateBounds != null) { |
| geo.width = geo.alternateBounds.width; |
| } |
| } |
| }; |
| |
| graph.addListener(mxEvent.FOLD_CELLS, foldingHandler); |
| } |
| }; |
| |
| function isFromMiddleEdge(source, x_left, x_right, y_top, y_bottom) { |
| if (bpmnConditionStyle == source.getStyle()) { |
| // target above source or target below source and target left from |
| // source or target right from source |
| if ((y_top < 0 || y_bottom > 0) && (x_left < 0 || x_right > 0)) { |
| return true; |
| } else { |
| return false; |
| } |
| } |
| } |
| |
| function isToMiddleEdge(source, x_left, x_right, y_top, y_bottom) { |
| if (bpmnProcessStyle == source.getStyle() || bpmnCallActivityStyle == source.getStyle()) { |
| // target above source or target below source and target left from |
| // source or target right from source |
| if ((y_top < 0 || y_bottom > 0) && (x_left < 0 || x_right > 0)) { |
| return true; |
| } else { |
| return false; |
| } |
| } |
| } |
| |
| function setSwimlanesLayout(graph, model) { |
| // Applies size changes to siblings and parents |
| new mxSwimlaneManager(graph); |
| |
| // Creates a stack depending on the orientation of the swimlane |
| var layout = new mxStackLayout(graph, false); |
| |
| // Makes sure all children fit into the parent swimlane |
| layout.resizeParent = true; |
| |
| // Applies the size to children if parent size changes |
| layout.fill = true; |
| |
| // Only update the size of swimlanes |
| layout.isVertexIgnored = function(vertex) { |
| return !graph.isSwimlane(vertex); |
| }; |
| |
| if (graph.isEnabled()) { |
| // Adds new method for identifying a pool |
| graph.isPool = function(cell) { |
| var model = this.getModel(); |
| var parent = model.getParent(cell); |
| |
| return parent != null && model.getParent(parent) == model.getRoot(); |
| }; |
| } |
| |
| // Keeps the lanes and pools stacked |
| var layoutMgr = new mxLayoutManager(graph); |
| |
| layoutMgr.getLayout = function(cell) { |
| 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; |
| }; |
| } |
| |
| function setSelectedCell(selCellId) { |
| if(selCellId != null) { |
| var vertices = graph.getChildVertices(graph.getDefaultParent()) |
| for (var i = 0; i < vertices.length; i++) { |
| var cellId = vertices[i].getId(); |
| if (selCellId == cellId) { |
| var cells = [vertices[i]]; |
| // stop blinking start shape |
| if(intervalID != 0) { |
| clearInterval(intervalID); |
| intervalID = 0; |
| } |
| // start blinking selected |
| intervalID = setInterval(function() { |
| model.beginUpdate(); |
| if(cellIsHighlighted) { |
| graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, '#FF0000', cells); |
| cellIsHighlighted = false; |
| } else { |
| graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, '#F2F3F4', cells); |
| cellIsHighlighted = true; |
| } |
| graph.view.invalidate(vertices[i]); |
| model.endUpdate(); |
| }, 1000); |
| break; |
| } |
| } |
| selectedCell = selCellId; |
| } |
| } |
| |
| function setCreationCode(code) { |
| if(code != null && code != bpmnCreationCode ) { |
| bpmnCreationCode = code; |
| bpmnCreateBPMNModel(); |
| } |
| } |
| |
| function bpmnCreateBPMNModel() { |
| // Gets the default parent for inserting new cells. This |
| // is normally the first child of the root (ie. layer 0). |
| |
| if(intervalID != 0) { |
| clearInterval(intervalID); |
| intervalID = 0; |
| } |
| //Required for the eval content |
| var parent = graph.getDefaultParent(); |
| graph.removeCells(graph.getChildVertices(parent)) |
| // Adds cells to the model in a single step |
| model.beginUpdate(); |
| try { |
| eval(bpmnCreationCode); |
| } finally { |
| // Updates the display |
| model.endUpdate(); |
| } |
| graph.fit(); |
| }; |
| |