UNPKG

drawio-offline

Version:
1,751 lines (1,535 loc) 92.7 kB
function mxGraphMlCodec() { this.cachedRefObj = {}; }; mxGraphMlCodec.prototype.refRegexp = /^\{y\:GraphMLReference\s+(\d+)\}$/; mxGraphMlCodec.prototype.staticRegexp = /^\{x\:Static\s+(.+)\.(.+)\}$/; mxGraphMlCodec.prototype.decode = function (xml, callback, onError) { try { var doc = mxUtils.parseXml(xml); var graphs = this.getDirectChildNamedElements(doc.documentElement, mxGraphMlConstants.GRAPH); this.initializeKeys(doc.documentElement); var mxFile = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><mxfile>"; for (var i = 0; i < graphs.length; i++) { var pageElement = graphs[i]; var graph = this.createMxGraph(); var model = graph.getModel(); model.beginUpdate(); try { this.nodesMap = {}; this.edges = []; this.importGraph(pageElement, graph, graph.getDefaultParent()); for (var i = 0; i < this.edges.length; i++) { var edgesObj = this.edges[i]; var edges = edgesObj.edges; var parent = edgesObj.parent; var dx = edgesObj.dx, dy = edgesObj.dy; for (var j = 0; j < edges.length; j++) { this.importEdge(edges[j], graph, parent, dx, dy); } } } catch(e) { console.log(e); throw e; } finally { model.endUpdate(); } //update edges' labels to convert their labels relative coordinate to ours model.beginUpdate(); try { var cells = graph.getModel().cells; var tr = graph.view.translate; for (var id in cells) { var edge = cells[id]; if (edge.edge && edge.getChildCount() > 0) { for (var i = 0; i < edge.getChildCount(); i++) { var cell = edge.children[i]; var geo = cell.geometry; if (!geo.adjustIt) continue; var state = graph.view.getState(edge); var abdPs = state.absolutePoints; var p0 = abdPs[0]; var pe = abdPs[abdPs.length - 1]; var ratio = geo.x; var dist = geo.y; var dx = pe.x - p0.x var dy = pe.y - p0.y var x = p0.x + ratio * dx; var y = p0.y + ratio * dy; var d = Math.sqrt(dx*dx + dy*dy); dx /= d; dy /= d; x -= dist * dy; y += dist * dx; var np = graph.view.getRelativePoint(state, x, y); geo.x = np.x; geo.y = np.y; } } } } catch(e) { console.log(e); throw e; } finally { model.endUpdate(); } mxFile += this.processPage(graph, i+1); } mxFile += "</mxfile>"; if (callback) { callback(mxFile); } } catch(e) { if (onError) { onError(e); } } }; mxGraphMlCodec.prototype.initializeKeys = function (graphmlElement) { var keys = this.getDirectChildNamedElements(graphmlElement, mxGraphMlConstants.KEY); this.nodesKeys = {}; this.edgesKeys = {}; this.portsKeys = {}; this.sharedData = {}; this.nodesKeys[mxGraphMlConstants.NODE_GEOMETRY] = {}; this.nodesKeys[mxGraphMlConstants.USER_TAGS] = {}; this.nodesKeys[mxGraphMlConstants.NODE_STYLE] = {}; this.nodesKeys[mxGraphMlConstants.NODE_LABELS] = {}; this.nodesKeys[mxGraphMlConstants.NODE_GRAPHICS] = {}; this.edgesKeys[mxGraphMlConstants.EDGE_GEOMETRY] = {}; this.edgesKeys[mxGraphMlConstants.EDGE_STYLE] = {}; this.edgesKeys[mxGraphMlConstants.EDGE_LABELS] = {}; this.portsKeys[mxGraphMlConstants.PORT_LOCATION_PARAMETER] = {}; this.portsKeys[mxGraphMlConstants.PORT_STYLE] = {}; this.portsKeys[mxGraphMlConstants.PORT_VIEW_STATE] = {}; var sharedDataId; for (var i = 0; i < keys.length; i++) { var keyObj = this.dataElem2Obj(keys[i]); var id = keyObj[mxGraphMlConstants.ID]; var _for = keyObj[mxGraphMlConstants.KEY_FOR]; var attName = keyObj[mxGraphMlConstants.KEY_NAME]; var yType = keyObj[mxGraphMlConstants.KEY_YTYPE]; if (attName == mxGraphMlConstants.SHARED_DATA) sharedDataId = id; attName = attName? attName : yType //TODO handle the defaults inside these keys switch (_for) { case mxGraphMlConstants.NODE: this.nodesKeys[attName] = {key: id, keyObj: keyObj}; break; case mxGraphMlConstants.EDGE: this.edgesKeys[attName] = {key: id, keyObj: keyObj}; break; case mxGraphMlConstants.PORT: this.portsKeys[attName] = {key: id, keyObj: keyObj}; break; case mxGraphMlConstants.ALL: var obj = {key: id, keyObj: keyObj}; this.nodesKeys[attName] = obj; this.edgesKeys[attName] = obj; this.portsKeys[attName] = obj; break; } } var data = this.getDirectChildNamedElements(graphmlElement, mxGraphMlConstants.DATA); for (var i = 0; i < data.length; i++) { var key = data[i].getAttribute(mxGraphMlConstants.KEY); if (key == sharedDataId) { var sharedData = this.getDirectChildNamedElements(data[i], mxGraphMlConstants.Y_SHARED_DATA); for (var j = 0; j < sharedData.length; j++) { var dataItems = this.getDirectChildElements(sharedData[j]); for (var k = 0; k < dataItems.length; k++) { var dkey = dataItems[k].getAttribute(mxGraphMlConstants.X_KEY); this.sharedData[dkey] = dataItems[k]; } } } else { var resources = this.getDirectChildNamedElements(data[i], mxGraphMlConstants.Y_RESOURCES); for (var j = 0; j < resources.length; j++) { var dataItems = this.getDirectChildElements(resources[j]); for (var k = 0; k < dataItems.length; k++) { var dkey = dataItems[k].getAttribute(mxGraphMlConstants.ID); this.sharedData[dkey] = dataItems[k]; } } } } }; mxGraphMlCodec.prototype.parseAttributes = function (elem, obj) { var atts = elem.attributes; if (atts) { for (var i = 0; i < atts.length; i++) { var val = atts[i].nodeValue; var ref = this.refRegexp.exec(val); var staticMem = this.staticRegexp.exec(val); if (ref) { var key = ref[1]; var subObj = this.cachedRefObj[key]; //already cached if (!subObj) { subObj = {}; subObj[this.sharedData[key].nodeName] = this.dataElem2Obj(this.sharedData[key]); this.cachedRefObj[key] = subObj; } obj[atts[i].nodeName] = subObj; } else if (staticMem) { obj[atts[i].nodeName] = {}; obj[atts[i].nodeName][staticMem[1]] = staticMem[2]; } else { obj[atts[i].nodeName] = val; } } } }; mxGraphMlCodec.prototype.dataElem2Obj = function (elem) { var ref = this.getDirectFirstChildNamedElements(elem, mxGraphMlConstants.GRAPHML_REFERENCE) || elem.getAttribute(mxGraphMlConstants.REFID); var refKey = null; var origElem = elem; var obj = {}; if (ref) { var key = (typeof ref === "string")? ref : ref.getAttribute(mxGraphMlConstants.RESOURCE_KEY); var cachedObj = this.cachedRefObj[key]; //already cached if (cachedObj) { //parse all attributes to update the reference this.parseAttributes(elem, cachedObj); return cachedObj; } elem = this.sharedData[key]; refKey = key; } //parse all attributes this.parseAttributes(elem, obj); for (var i = 0; i < elem.childNodes.length; i++) { var child = elem.childNodes[i]; if (child.nodeType == 1) { var attName = child.nodeName; //Special types of node (x:List and x:Static) if (attName == mxGraphMlConstants.X_LIST) { var arr = []; var arrayElem = this.getDirectChildElements(child); for (var j = 0; j < arrayElem.length; j++) { attName = arrayElem[j].nodeName; arr.push(this.dataElem2Obj(arrayElem[j])); } obj[attName] = arr; } else if (attName == mxGraphMlConstants.X_STATIC) { var member = child.getAttribute(mxGraphMlConstants.MEMBER); var dotPos = member.lastIndexOf('.'); obj[member.substr(0, dotPos)] = member.substr(dotPos + 1); } else { var dotPos = attName.lastIndexOf("."); if (dotPos > 0) { attName = attName.substr(dotPos + 1); } if (obj[attName] != null) { if (!(obj[attName] instanceof Array)) { obj[attName] = [obj[attName]]; } obj[attName].push(this.dataElem2Obj(child)); } else { obj[attName] = this.dataElem2Obj(child); } } } else if ((child.nodeType == 3 || child.nodeType == 4) && child.textContent.trim()) { obj["#text"] = child.textContent; } } //cache referenced objects if (refKey) { var tmpObj = {}; //parse all attributes before following the reference this.parseAttributes(origElem, tmpObj); tmpObj[this.sharedData[refKey].nodeName] = obj; this.cachedRefObj[refKey] = tmpObj; return tmpObj; } return obj; }; mxGraphMlCodec.prototype.mapArray = function(arr, mapping, map) { var obj = {}; for (var k = 0; k < arr.length; k++) { if (arr[k].name) { obj[arr[k].name] = arr[k].value || arr[k]; } } this.mapObject(obj, mapping, map); } //Use mapping information to fill the map based on obj content //TODO yjs looks like they need special handling mxGraphMlCodec.prototype.mapObject = function (obj, mapping, map) { //defaults can be overridden by actual values later if (mapping.defaults) { for (var key in mapping.defaults) { map[key] = mapping.defaults[key]; } } for (var key in mapping) { var parts = key.split('.'); var val = obj; for (var i = 0; i < parts.length; i++) { if (!val) break; val = val[parts[i]]; } if (val == null && obj) //some vals doesn't need to be split { val = obj[key]; } if (val != null) { var mappingObj = mapping[key]; if (typeof val === "string") { if (typeof mappingObj === "string") { map[mappingObj] = val.toLowerCase(); } else if (typeof mappingObj === "object") { var modVal = val.toLowerCase(); switch(mappingObj.mod) { case "color": //mxGraph support alfa in colors in the standard format if (val.indexOf("#") == 0 && val.length == 9) { modVal = "#" + val.substr(3) + val.substr(1,2); } else if (val == "TRANSPARENT") { modVal = "none"; } break; case "shape": // console.log(val.toLowerCase()); modVal = mxGraphMlShapesMap[val.toLowerCase()]; break; case "bpmnOutline": // console.log(val.toLowerCase()); modVal = mxGraphMlShapesMap.bpmnOutline[val.toLowerCase()]; break; case "bpmnSymbol": // console.log(val.toLowerCase()); modVal = mxGraphMlShapesMap.bpmnSymbol[val.toLowerCase()]; break; case "bool": modVal = val == "true"? "1" : "0"; break; case "scale": try { modVal = parseFloat(val) * mappingObj.scale; } catch(e) { //nothing! } break; case "arrow": modVal = mxGraphMlArrowsMap[val]; break; } if (modVal != null) map[mappingObj.key] = modVal; } else { mappingObj(val, map); } } else if (val instanceof Array) { this.mapArray(val, mappingObj, map); } else if (val.name != null && val.value != null) //this is the case when a single y:Property is used { this.mapArray([val], mappingObj, map); } else { this.mapObject(val, mappingObj, map); } } } }; mxGraphMlCodec.prototype.createMxGraph = function () { var graph = new mxGraph(); // graph.setExtendParents(false); // graph.setExtendParentsOnAdd(false); // graph.setConstrainChildren(false); // graph.setHtmlLabels(true); // graph.getModel().maintainEdgeParent = false; return graph; } mxGraphMlCodec.prototype.importGraph = function (pageElement, graph, parent) { var nodes = this.getDirectChildNamedElements(pageElement, mxGraphMlConstants.NODE); var p = parent; var dx = 0, dy = 0; while (p && p.geometry) { dx += p.geometry.x; dy += p.geometry.y; p = p.parent; } for (var i = 0; i < nodes.length; i++) { this.importNode(nodes[i], graph, parent, dx, dy); } this.edges.push({ edges: this.getDirectChildNamedElements(pageElement, mxGraphMlConstants.EDGE), parent: parent, dx: dx, dy: dy }); }; //FIXME port 0.5, 0.5 push the edge to the other side (bpmn example) mxGraphMlCodec.prototype.importPort = function (portElement, portsMap) { var name = portElement.getAttribute(mxGraphMlConstants.PORT_NAME); var portObj = {}; var data = this.getDirectChildNamedElements(portElement, mxGraphMlConstants.DATA); for (var i = 0; i < data.length; i++) { var d = data[i]; var key = d.getAttribute(mxGraphMlConstants.KEY); var dataObj = this.dataElem2Obj(d); // console.log(dataObj); if (dataObj.key == this.portsKeys[mxGraphMlConstants.PORT_LOCATION_PARAMETER].key) { this.mapObject(dataObj, { "y:FreeNodePortLocationModelParameter.Ratio": function(val, map) { var parts = val.split(','); map["pos"] = {x: parts[0], y: parts[1]}; } }, portObj); } /* else if (dataObj.key == this.portsKeys[mxGraphMlConstants.PORT_STYLE].key) { } else if (dataObj.key == this.portsKeys[mxGraphMlConstants.PORT_VIEW_STATE].key) { }*/ } portsMap[name] = portObj; }; mxGraphMlCodec.prototype.styleMap2Str = function (styleMap) { var semi = ""; var str = ""; for (var key in styleMap) { str += semi + key + "=" + styleMap[key]; semi = ";"; } return str; }; mxGraphMlCodec.prototype.importNode = function (nodeElement, graph, parent, dx, dy) { var data = this.getDirectChildNamedElements(nodeElement, mxGraphMlConstants.DATA); var v; var id = nodeElement.getAttribute(mxGraphMlConstants.ID); var node = new mxCell(); node.vertex = true; node.geometry = new mxGeometry(0,0,30,30); //some node has no geometry, this is the default graph.addCell(node, parent); var style = {graphMlID: id}; var mlStyleObj = null; var mlTemplate = null; var mlUserTags = null; var lblObj = null; var lbls = null; for (var i = 0; i < data.length; i++) { var d = data[i]; var dataObj = this.dataElem2Obj(d); if (dataObj.key) { if (dataObj.key == this.nodesKeys[mxGraphMlConstants.NODE_GEOMETRY].key) { this.addNodeGeo(node, dataObj, dx, dy); } else if (dataObj.key == this.nodesKeys[mxGraphMlConstants.USER_TAGS].key) { mlUserTags = dataObj; } else if (dataObj.key == this.nodesKeys[mxGraphMlConstants.NODE_STYLE].key) { // console.log(JSON.stringify(dataObj)); mlStyleObj = dataObj; if (dataObj["yjs:StringTemplateNodeStyle"]) { mlTemplate = dataObj["yjs:StringTemplateNodeStyle"]["#text"]; } else { this.addNodeStyle(node, dataObj, style); } } else if (dataObj.key == this.nodesKeys[mxGraphMlConstants.NODE_LABELS].key) { lblObj = dataObj; } else if (dataObj.key == this.nodesKeys[mxGraphMlConstants.NODE_GRAPHICS].key) { var shape = null, key = null; for (var key in dataObj) { if (key == "key" || key == "#text") continue; //Special case when a node has multiple graphics //TODO support the open/closed states if (key == "y:ProxyAutoBoundsNode") { var realizers = dataObj[key]["y:Realizers"]; if (realizers) { for (var key2 in realizers) { if (key2 == "active" || key2 == "#text") continue; shape = realizers[key2][realizers["active"]]; dataObj = {}; dataObj[key2] = shape; break; } } } else { shape = dataObj[key]; } break; } if (shape) { if (shape[mxGraphMlConstants.GEOMETRY]) { this.addNodeGeo(node, shape[mxGraphMlConstants.GEOMETRY], dx, dy); } if (shape[mxGraphMlConstants.NODE_LABEL]) { lblObj = shape[mxGraphMlConstants.NODE_LABEL]; } } mlStyleObj = dataObj; this.addNodeStyle(node, dataObj, style); } } } var ports = this.getDirectChildNamedElements(nodeElement, mxGraphMlConstants.PORT); var portsMap = {}; for (var i = 0; i < ports.length; i++) { this.importPort(ports[i], portsMap); } if (mlTemplate) { this.handleTemplates(mlTemplate, mlUserTags, node, style); } this.handleFixedRatio(node, style); //handle special compound shapes this.handleCompoundShape(node, style, mlStyleObj, lbls); //fix for stroke size of zero if (style["strokeWidth"] == 0) { style["strokeColor"] = "none"; } node.style = this.styleMap2Str(style); var subGraphs = this.getDirectChildNamedElements(nodeElement, mxGraphMlConstants.GRAPH); for (var i = 0; i < subGraphs.length; i++) { this.importGraph(subGraphs[i], graph, node, portsMap); } //handle labels after node geometry is determined. It is also the last such that labels are on top if (lblObj) lbls = this.addLabels(node, lblObj, style, graph); this.nodesMap[id] = {node: node, ports: portsMap}; }; mxGraphMlCodec.prototype.addNodeStyle = function (node, dataObj, style) { //TODO move these static mapping objects outside such that they are defined once only var dashStyleFn = function(val, map) { if (val == "line") return; map["dashed"] = 1; //map["fixDash"] = 1; var pattern = null; switch(val) { case "DashDot": pattern = "3 1 1 1"; break; case "Dot": pattern = "1 1"; break; case "DashDotDot": pattern = "3 1 1 1 1 1"; break; case "Dash": pattern = "3 1"; break; case "dotted": pattern = "1 3"; break; case "dashed": pattern = "5 2"; break; default: pattern = val.replace(/0/g, '1'); } if (pattern) { //Some patterns in graphML has only one number if (pattern.indexOf(" ") < 0) { pattern = pattern + " " + pattern; } map["dashPattern"] = pattern; } }; var styleCommonMap = { "shape": {key: "shape", mod: "shape"}, "y:Shape.type": {key: "shape", mod: "shape"}, "configuration": {key: "shape", mod: "shape"}, "type": {key: "shape", mod: "shape"}, "assetName": {key: "shape", mod: "shape"}, "activityType": {key: "shape", mod: "shape"}, "fill": {key: "fillColor", mod: "color"}, "fill.yjs:SolidColorFill.color": {key: "fillColor", mod: "color"}, "fill.yjs:SolidColorFill.color.yjs:Color.value": {key: "fillColor", mod: "color"}, "y:Fill": { "color": {key: "fillColor", mod: "color"}, //"color2": {key: "gradientColor", mod: "color"}, //?? "transparent": function(val, map) { if (val == "true") { map["fillColor"] = "none"; } } }, "y:BorderStyle": { "color": {key: "strokeColor", mod: "color"}, "width": "strokeWidth", "hasColor": function(val, map) { if (val == "false") { map["strokeColor"] = "none"; } }, "type": dashStyleFn //"raised": ?? }, "stroke": {key: "strokeColor", mod: "color"}, "stroke.yjs:Stroke": { "dashStyle": dashStyleFn, "dashStyle.yjs:DashStyle.dashes": dashStyleFn, "fill": {key: "strokeColor", mod: "color"}, "fill.yjs:SolidColorFill.color": {key: "strokeColor", mod: "color"}, //"lineCap": "", //?? "thickness.sys:Double": "strokeWidth", "thickness": "strokeWidth" } }; var assetNodesStyle = mxUtils.clone(styleCommonMap); assetNodesStyle["defaults"] = { "fillColor": "#CCCCCC", "strokeColor": "#6881B3" }; var bpmnActivityStyle = mxUtils.clone(styleCommonMap); bpmnActivityStyle["defaults"] = { "shape": "ext;rounded=1", "fillColor": "#FFFFFF", "strokeColor": "#000090" }; var bpmnGatewayStyle = mxUtils.clone(styleCommonMap); bpmnGatewayStyle["defaults"] = { "shape": "rhombus;fillColor=#FFFFFF;strokeColor=#FFCD28" }; var bpmnConversationStyle = mxUtils.clone(styleCommonMap); bpmnConversationStyle["defaults"] = { "shape": "hexagon", "strokeColor": "#007000" }; var bpmnEventStyle = mxUtils.clone(styleCommonMap); bpmnEventStyle["defaults"] = { "shape": "mxgraph.bpmn.shape;perimeter=ellipsePerimeter;symbol=general", "outline": "standard" }; bpmnEventStyle["characteristic"] = {key: "outline", mod: "bpmnOutline"}; var bpmnDataObjectStyle = mxUtils.clone(styleCommonMap); bpmnDataObjectStyle["defaults"] = { "shape": "js:bpmnDataObject" }; var bpmnDataStoreStyle = mxUtils.clone(styleCommonMap); bpmnDataStoreStyle["defaults"] = { "shape": "datastore" }; var bpmnGroupNodeStyle = mxUtils.clone(styleCommonMap); bpmnGroupNodeStyle["defaults"] = { "shape": "swimlane;swimlaneLine=0;startSize=20;dashed=1;dashPattern=3 1 1 1;collapsible=0;rounded=1" }; var bpmnChoreographyNodeStyle = mxUtils.clone(styleCommonMap); bpmnChoreographyNodeStyle["defaults"] = { "shape": "js:BpmnChoreography"//"swimlane;childLayout=stackLayout;horizontal=1;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;startSize=20;rounded=1;collapsible=0" }; //approximation to GraphML shapes TODO improve them var bevelNodeStyle = mxUtils.clone(styleCommonMap); bevelNodeStyle["defaults"] = { "rounded": "1", "glass": "1", "strokeColor": "#FFFFFF" }; bevelNodeStyle["inset"] = "strokeWidth"; bevelNodeStyle["radius"] = "arcSize"; bevelNodeStyle["drawShadow"] = {key:"shadow", mod:"bool"}; bevelNodeStyle["color"] = {key:"fillColor", mod:"color", addGradient: "north"}; bevelNodeStyle["color.yjs:Color.value"] = bevelNodeStyle["color"]; var shinyPlateNodeStyle = mxUtils.clone(styleCommonMap); shinyPlateNodeStyle["defaults"] = { "rounded": "1", "arcSize": 10, "glass": "1", "shadow": "1", "strokeColor": "none" //,"rotation": -90 //TODO requires rotation! }; shinyPlateNodeStyle["drawShadow"] = {key:"shadow", mod:"bool"}; var demoGroupStyle = mxUtils.clone(styleCommonMap); demoGroupStyle["defaults"] = { "shape": "swimlane", "startSize": 20, "strokeWidth": 4, "spacingLeft": 10 //TODO can we change collapse icon to be in right side? }; demoGroupStyle["isCollapsible"] = {key:"collapsible", mod:"bool"}; demoGroupStyle["borderColor"] = {key:"strokeColor", mod:"color"}; demoGroupStyle["folderFrontColor"] = {key:"fillColor", mod:"color"}; //TODO fillColor always match strokeColor! // demoGroupStyle["folderBackColor"] = {key:"fillColor", mod:"color"}; //?? var collapsibleNodeStyle = mxUtils.clone(styleCommonMap); collapsibleNodeStyle["defaults"] = { "shape": "swimlane", "startSize": 20, "spacingLeft": 10 //TODO can we change collapse icon to be in right side? }; collapsibleNodeStyle["yjs:PanelNodeStyle"] = { "color": {key:"swimlaneFillColor", mod:"color"}, "color.yjs:Color.value": {key:"swimlaneFillColor", mod:"color"}, "labelInsetsColor": {key:"fillColor", mod:"color"}, "labelInsetsColor.yjs:Color.value": {key:"fillColor", mod:"color"} }; var tableStyle = mxUtils.clone(styleCommonMap); tableStyle["defaults"] = { "shape": "js:table" }; var imageNodeStyle = mxUtils.clone(styleCommonMap); imageNodeStyle["defaults"] = { "shape": "image" }; imageNodeStyle["image"] = function(val, map) { map["image"] = val; }; var svgNodeStyle = mxUtils.clone(styleCommonMap); svgNodeStyle["defaults"] = { "shape": "image" }; // svgNodeStyle["y:SVGNodeProperties"] = { // "usingVisualBounds": ""//?? // }; // y:SVGModel.svgBoundsPolicy ?? svgNodeStyle["y:SVGModel.y:SVGContent.y:Resource.#text"] = function(val, map) { map["image"] = "data:image/svg+xml," + ((window.btoa) ? btoa(val) : Base64.encode(val)); }; var groupNodeStyle = mxUtils.clone(styleCommonMap); groupNodeStyle["defaults"] = { "shape": "swimlane", "startSize": 20 }; groupNodeStyle["y:Shape.type"] = function(val, map) { if (val == "roundrectangle") { map['rounded'] = 1; map['arcSize'] = 5; } }; var tableNodeStyle = mxUtils.clone(styleCommonMap); tableNodeStyle["defaults"] = { "shape": "js:table2" }; var genericNodeStyle = mxUtils.clone(styleCommonMap); genericNodeStyle["defaults"] = { "gradientDirection": "east" }; genericNodeStyle["y:Fill"]["color2"] = {key: "gradientColor", mod: "color"}; genericNodeStyle["y:StyleProperties.y:Property"] = { "com.yworks.bpmn.characteristic": {key: "outline", mod: "bpmnOutline"}, //TODO support colors for the icon itself other than the remaining shape! // "com.yworks.bpmn.icon.line.color": "", "com.yworks.bpmn.icon.fill": {key:"gradientColor", mod:"color"}, "com.yworks.bpmn.icon.fill2": {key:"fillColor", mod:"color"}, "com.yworks.bpmn.type": {key: "symbol", mod: "bpmnSymbol"}, "y.view.ShadowNodePainter.SHADOW_PAINTING": {key: "shadow", mod: "bool"}, "doubleBorder": {key: "double", mod: "bool"}, "com.yworks.sbgn.style.radius": {key: "arcSize", mod: "scale", scale: 2}, "com.yworks.sbgn.style.inverse": {key: "flipV", mod: "bool"} }; // console.log(dataObj); this.mapObject(dataObj, { "yjs:ShapeNodeStyle": styleCommonMap, "demostyle:FlowchartNodeStyle": styleCommonMap, "demostyle:AssetNodeStyle": assetNodesStyle, "bpmn:ActivityNodeStyle": bpmnActivityStyle, "bpmn:GatewayNodeStyle": bpmnGatewayStyle, "bpmn:ConversationNodeStyle": bpmnConversationStyle, "bpmn:EventNodeStyle": bpmnEventStyle, "bpmn:DataObjectNodeStyle": bpmnDataObjectStyle, "bpmn:DataStoreNodeStyle": bpmnDataStoreStyle, "bpmn:GroupNodeStyle": bpmnGroupNodeStyle, "bpmn:ChoreographyNodeStyle": bpmnChoreographyNodeStyle, "yjs:BevelNodeStyle": bevelNodeStyle, "yjs:ShinyPlateNodeStyle": shinyPlateNodeStyle, "demostyle:DemoGroupStyle": demoGroupStyle, "yjs:CollapsibleNodeStyleDecorator": collapsibleNodeStyle, "bpmn:PoolNodeStyle": tableStyle, "yjs:TableNodeStyle": tableStyle, "demotablestyle:DemoTableStyle": tableStyle, "yjs:ImageNodeStyle": imageNodeStyle, //desktop "y:ShapeNode": styleCommonMap, "y:GenericNode": genericNodeStyle, "y:GenericGroupNode": genericNodeStyle, "y:TableNode": tableNodeStyle, "y:SVGNode": svgNodeStyle, "y:GroupNode": groupNodeStyle }, style); }; mxGraphMlCodec.prototype.handleTemplates = function (template, userTags, node, styleMap) { if (template) { var w = node.geometry.width; var h = node.geometry.height; var header = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 '+ w + ' ' + h +'"><g>'; var footer = '</g></svg>'; //TODO optimize this! probably only the text before defs has bindings var matches = null; var bindingPairs = []; //find template bindings var tempBindRegEx = /\{TemplateBinding\s+([^}]+)\}/g; while ((matches = tempBindRegEx.exec(template)) != null) { var replacement = ""; switch (matches[1]) { case "width": replacement = w; break; case "height": replacement = h; break; } bindingPairs.push({match: matches[0], repl: replacement}); } if (userTags && userTags["y:Json"]) { var json = JSON.parse(userTags["y:Json"]["#text"]); //find user tags bindings var userTagBindRegEx = /\{Binding\s+([^}]+)\}/g; while ((matches = userTagBindRegEx.exec(template)) != null) { var parts = matches[1].split(','); var val = json[parts[0]]; if (val) { if (parts.length > 1) { if (parts[1].indexOf('Converter=')) { var func = mxGraphMlConverters[parts[1].substr(11)]; //11 is the length of Converter= if (func) { var args = [val]; if (parts[2]) { args.push(parts[2].substr(11)); //11 is the length of Parameter= } val = func.apply(null, args) } } } bindingPairs.push({match: matches[0], repl: mxUtils.htmlEntities(val)}); } } } for (var i = 0; i < bindingPairs.length; i++) { template = template.replace(bindingPairs[i].match, bindingPairs[i].repl); } bindingPairs = []; //Fix text elements (TODO can it be merged with the previous step?) var txtRegEx = /\<text.+data-content="([^"]+).+\<\/text\>/g; while ((matches = txtRegEx.exec(template)) != null) { var val = matches[0].substr(0, matches[0].length - 7) + matches[1] + "</text>"; //7 is the length of </text> bindingPairs.push({match: matches[0], repl: val}); } for (var i = 0; i < bindingPairs.length; i++) { template = template.replace(bindingPairs[i].match, bindingPairs[i].repl); } var svg = header + template + footer; styleMap["shape"] = "image"; styleMap["image"] = "data:image/svg+xml," + ((window.btoa) ? btoa(svg) : Base64.encode(svg)); } }; mxGraphMlCodec.prototype.handleCompoundShape = function (node, styleMap, mlStyleObj, lbls) { var shape = styleMap["shape"]; if (shape && shape.indexOf("js:") == 0) { switch(shape) { case "js:bpmnArtifactShadow": styleMap["shadow"] = "1"; case "js:bpmnArtifact": styleMap["shape"] = styleMap["symbol"]; delete styleMap["fillColor"]; delete styleMap["strokeColor"]; delete styleMap["gradientColor"]; this.handleCompoundShape(node, styleMap, mlStyleObj, lbls) break; case "js:bpmnDataObjectShadow": case "js:bpmnDataObject": styleMap["shape"] = "note;size=16"; // console.log(mlStyleObj); mlStyleObj = mlStyleObj["bpmn:DataObjectNodeStyle"] || mlStyleObj["y:GenericNode"] || mlStyleObj["y:GenericGroupNode"]; var tmpMap = {}; this.mapObject(mlStyleObj, { "y:StyleProperties.y:Property": { "com.yworks.bpmn.dataObjectType": "dataObjectType", "com.yworks.bpmn.marker1": "marker1" } }, tmpMap); if (mlStyleObj["collection"] == "true" || tmpMap["marker1"] == "bpmn_marker_parallel") { var cell2 = new mxCell('', new mxGeometry(0.5, 1, 10, 10), 'html=1;whiteSpace=wrap;shape=parallelMarker;'); cell2.vertex = true; cell2.geometry.relative = true; cell2.geometry.offset = new mxPoint(-5, -10); node.insert(cell2); } if (mlStyleObj["type"] == "INPUT" || tmpMap["dataObjectType"] == "data_object_type_input") { var cell1 = new mxCell('', new mxGeometry(0, 0, 10, 10), 'html=1;shape=singleArrow;arrowWidth=0.4;arrowSize=0.4;'); cell1.vertex = true; cell1.geometry.relative = true; cell1.geometry.offset = new mxPoint(2, 2); node.insert(cell1); } else if (mlStyleObj["type"] == "OUTPUT" || tmpMap["dataObjectType"] == "data_object_type_output") { var cell1 = new mxCell('', new mxGeometry(0, 0, 10, 10), 'html=1;shape=singleArrow;arrowWidth=0.4;arrowSize=0.4;fillColor=#000000;'); cell1.vertex = true; cell1.geometry.relative = true; cell1.geometry.offset = new mxPoint(2, 2); node.insert(cell1); } break; case "js:BpmnChoreography": this.mapObject(mlStyleObj, { "defaults": { "shape": "swimlane;collapsible=0;rounded=1", "startSize": "20", "strokeColor": "#006000", "fillColor": "#CCCCCC" } }, styleMap); //TODO the shape should be clipped by parent borders. It should also be resized relative to its parent var pGeo = node.geometry; var cell1 = new mxCell('', new mxGeometry(0, pGeo.height - 20, pGeo.width, 20), 'strokeColor=#006000;fillColor=#777777;rounded=1'); cell1.vertex = true; node.insert(cell1); //TODO handle labels accurately if (lbls && lbls.lblTxts) { // console.log(lbls); node.value = lbls.lblTxts[0]; cell1.value = lbls.lblTxts[1]; } break; case "js:bpmnActivityShadow": case "js:bpmnActivity": styleMap["shape"] = "ext;rounded=1"; var tmpMap = {}; mlStyleObj = mlStyleObj["y:GenericNode"] || mlStyleObj["y:GenericGroupNode"]; this.mapObject(mlStyleObj, { "y:StyleProperties.y:Property": { "com.yworks.bpmn.taskType": "taskType", "com.yworks.bpmn.activityType": "activityType", "com.yworks.bpmn.marker1": "marker1", "com.yworks.bpmn.marker2": "marker2", "com.yworks.bpmn.marker3": "marker3", "com.yworks.bpmn.marker4": "marker4" } }, tmpMap); switch(tmpMap["activityType"]) { case "activity_type_transaction": styleMap["double"] = "1"; break; } switch(tmpMap["taskType"]) { case "task_type_send": var item1 = new mxCell('', new mxGeometry(0, 0, 19, 12), 'shape=message;fillColor=#000000;strokeColor=#FFFFFF;'); item1.geometry.offset = new mxPoint(4, 7); break; case "task_type_receive": var item1 = new mxCell('', new mxGeometry(0, 0, 19, 12), 'shape=message;'); item1.geometry.offset = new mxPoint(4, 7); break; case "task_type_user": var item1 = new mxCell('', new mxGeometry(0, 0, 15, 15), 'shape=mxgraph.bpmn.user_task;'); item1.geometry.offset = new mxPoint(4, 5); break; case "task_type_manual": var item1 = new mxCell('', new mxGeometry(0, 0, 15, 10), 'shape=mxgraph.bpmn.manual_task;'); item1.geometry.offset = new mxPoint(4, 7); break; case "task_type_business_rule": var item1 = new mxCell('', new mxGeometry(0, 0, 18, 13), 'shape=mxgraph.bpmn.business_rule_task;'); item1.geometry.offset = new mxPoint(4, 7); break; case "task_type_service": var item1 = new mxCell('', new mxGeometry(0, 0, 15, 15), 'shape=mxgraph.bpmn.service_task;'); item1.geometry.offset = new mxPoint(4, 5); break; case "task_type_script": var item1 = new mxCell('', new mxGeometry(0, 0, 15, 15), 'shape=mxgraph.bpmn.script_task;'); item1.geometry.offset = new mxPoint(4, 5); break; } if (item1) { item1.vertex = true; item1.geometry.relative = true; node.insert(item1); item1 = null; } var numIcons = 0; for (var i = 1; i <= 4; i++) { if (tmpMap["marker" + i]) numIcons++; } var iconX = -7.5 * numIcons - 2 * (numIcons - 1); for (var i = 1; i <= numIcons; i++) { switch(tmpMap["marker" + i]) { case "bpmn_marker_closed": var item1 = new mxCell('', new mxGeometry(0.5, 1, 15, 15), 'shape=plus;part=1;'); item1.geometry.offset = new mxPoint(iconX, -20); break; case "bpmn_marker_open": var item1 = new mxCell('', new mxGeometry(0.5, 1, 15, 15), 'shape=rect;part=1;'); item1.geometry.offset = new mxPoint(iconX, -20); var item2 = new mxCell('', new mxGeometry(0.5, 0.5, 8, 1), 'shape=rect;part=1;'); item2.geometry.offset = new mxPoint(-4, -1); item2.geometry.relative = true; item2.vertex = true; item1.insert(item2); break; case "bpmn_marker_loop": var item1 = new mxCell('', new mxGeometry(0.5, 1, 15, 15), 'shape=mxgraph.bpmn.loop;part=1;'); item1.geometry.offset = new mxPoint(iconX, -20); break; case "bpmn_marker_parallel": var item1 = new mxCell('', new mxGeometry(0.5, 1, 15, 15), 'shape=parallelMarker;part=1;'); item1.geometry.offset = new mxPoint(iconX, -20); break; case "bpmn_marker_sequential": var item1 = new mxCell('', new mxGeometry(0.5, 1, 15, 15), 'shape=parallelMarker;direction=south;part=1;'); item1.geometry.offset = new mxPoint(iconX, -20); break; case "bpmn_marker_ad_hoc": var item1 = new mxCell('', new mxGeometry(0.5, 1, 15, 10), 'shape=mxgraph.bpmn.ad_hoc;strokeColor=none;flipH=1;part=1;fillColor=#000000'); item1.geometry.offset = new mxPoint(iconX, -17); break; case "bpmn_marker_compensation": var item1 = new mxCell('', new mxGeometry(0.5, 1, 15, 11), 'shape=mxgraph.bpmn.compensation;part=1;'); item1.geometry.offset = new mxPoint(iconX, -18); break; } item1.geometry.relative = true; item1.vertex = true; node.insert(item1); iconX += 20; } break; case "js:table": //TODO we need 2 passes to find the exact shift of columns/rows especially when there is rows inside rows //TODO Internal table strokes needs to match table strokeWidth and only be on one side //TODO code optimization styleMap["shape"] = "swimlane;collapsible=0;swimlaneLine=0"; var tableObj = mlStyleObj["yjs:TableNodeStyle"] || mlStyleObj["demotablestyle:DemoTableStyle"]; if (!tableObj && mlStyleObj["bpmn:PoolNodeStyle"]) { tableObj = mlStyleObj["bpmn:PoolNodeStyle"]["yjs:TableNodeStyle"]; } // console.log(tableObj); this.mapObject(tableObj, { "backgroundStyle.demotablestyle:TableBackgroundStyle": { "insetFill.yjs:SolidColorFill.color.yjs:Color.value": {key: "fillColor", mod: "color"}, "tableBackgroundFill.yjs:SolidColorFill.color.yjs:Color.value": {key: "swimlaneFillColor", mod: "color"}, "tableBackgroundStroke.yjs:Stroke":{ "fill": {key: "strokeColor", mod: "color"}, "thickness": "strokeWidth" } }, "backgroundStyle.yjs:ShapeNodeStyle.fill": {key: "fillColor", mod: "color"}, "backgroundStyle.yjs:ShapeNodeStyle.fill.yjs:SolidColorFill.color": {key: "fillColor", mod: "color"} }, styleMap); //Lane fill color is the same as the fill color styleMap["swimlaneFillColor"] = styleMap["fillColor"]; tableObj = tableObj["table"]["y:Table"]; var x = 0, y = 0, xShift = {x: 0}, yShift = 0; var insets = tableObj["Insets"]; if (insets) { insets = insets.split(','); if (insets[0] != "0") { styleMap["startSize"] = insets[0]; xShift.x = parseFloat(insets[0]); //x += xShift.x; styleMap["horizontal"] = "0"; } else if (insets[1] != "0") { styleMap["startSize"] = insets[1]; yShift = parseFloat(insets[1]); y += yShift; } } else { styleMap["startSize"] = "0"; } var defRowStyle = {}; var rowMapping = { "Insets": function(val, map) { map["startSize"] = val.split(',')[0]; }, "Style.bpmn:AlternatingLeafStripeStyle": { "evenLeafDescriptor.bpmn:StripeDescriptor": { "insetFill": {key: "evenFill", mod: "color"}, "backgroundFill": {key: "evenLaneFill", mod: "color"} }, "oddLeafDescriptor.bpmn:StripeDescriptor": { "insetFill": {key: "oddFill", mod: "color"}, "backgroundFill": {key: "oddLaneFill", mod: "color"} } //parentDescriptor ?? //TODO collect common types in a special mapping hash }, "Style.yjs:NodeStyleStripeStyleAdapter":{ "demotablestyle:DemoStripeStyle": { "stripeInsetFill.yjs:SolidColorFill.color.yjs:Color.value": {key: "fillColor", mod: "color"}, "tableLineFill.yjs:SolidColorFill.color.yjs:Color.value": {key: "strokeColor", mod: "color"} }, "yjs:ShapeNodeStyle": { "fill": {key: "swimlaneFillColor", mod: "color"} } }, "Size": "height" }; this.mapObject(tableObj["RowDefaults"], { "defaults": { "shape": "swimlane;collapsible=0;horizontal=0", "startSize": "0" }, "y:StripeDefaults": rowMapping }, defRowStyle); var defColStyle = {}; var colMapping = { "Insets": function(val, map) { map["startSize"] = val.split(',')[1]; }, "Style.bpmn:AlternatingLeafStripeStyle": { "evenLeafDescriptor.bpmn:StripeDescriptor": { "insetFill": {key: "evenFill", mod: "color"}, "backgroundFill": {key: "evenLaneFill", mod: "color"} }, "oddLeafDescriptor.bpmn:StripeDescriptor": { "insetFill": {key: "oddFill", mod: "color"}, "backgroundFill": {key: "oddLaneFill", mod: "color"} } //parentDescriptor ?? //TODO collect common types in a special mapping hash }, "Style.yjs:NodeStyleStripeStyleAdapter":{ "demotablestyle:DemoStripeStyle": { "stripeInsetFill.yjs:SolidColorFill.color.yjs:Color.value": {key: "fillColor", mod: "color"}, "tableLineFill.yjs:SolidColorFill.color.yjs:Color.value": {key: "strokeColor", mod: "color"} }, "yjs:ShapeNodeStyle": { "fill": {key: "swimlaneFillColor", mod: "color"} } }, "Size": "width" }; this.mapObject(tableObj["ColumnDefaults"], { "defaults": { "shape": "swimlane;collapsible=0", "startSize": "0", "fillColor": "none" }, "y:StripeDefaults": colMapping }, defColStyle); var pGeo = node.geometry; var rows = tableObj["Rows"]["y:Row"]; y += parseFloat(defColStyle["startSize"]); var maxX = xShift.x; var initX = xShift.x; xShift.lx = xShift.x; //TODO We need two passes to determine the header size! if (rows) { if (!(rows instanceof Array)) rows = [rows]; for (var i = 0; i < rows.length; i++) { xShift.x = initX; xShift.lx = initX; y = this.addRow(rows[i], node, (i & 1), y, xShift, rowMapping, defRowStyle); maxX = Math.max(xShift.x, maxX); } } var columns = tableObj["Columns"]["y:Column"]; x = maxX;//parseFloat(defRowStyle["startSize"]); if (columns) { if (!(columns instanceof Array)) columns = [columns]; for (var i = 0; i < columns.length; i++) { x = this.addColumn(columns[i], node, (i & 1), x, yShift, colMapping, defColStyle); } } break; case "js:table2": styleMap["shape"] = "swimlane;collapsible=0;swimlaneLine=0"; // console.log(mlStyleObj); var tmpMap = {}; this.mapObject(mlStyleObj, { "y:TableNode": { "y:StyleProperties.y:Property": { "yed.table.section.color": {key: "secColor", mod: "color"}, "yed.table.header.height": "headerH", "yed.table.header.color.main": {key: "headerColor", mod: "color"}, "yed.table.header.color.alternating": {key: "headerColorAlt", mod: "color"}, "yed.table.lane.color.main": {key: "laneColor", mod: "color"}, "yed.table.lane.color.alternating": {key: "laneColorAlt", mod: "color"}, "yed.table.lane.style": "laneStyle", "com.yworks.bpmn.type": "isHorz", "POOL_LANE_COLOR_ALTERNATING": {key: "laneColorAlt", mod: "color"}, "POOL_LANE_COLOR_MAIN": {key: "laneColor", mod: "color"}, "POOL_LANE_STYLE": "laneStyle", "POOL_HEADER_COLOR_MAIN": {key: "headerColor", mod: "color"}, "POOL_HEADER_COLOR_ALTERNATING": {key: "headerColorAlt", mod: "color"}, "POOL_TABLE_SECTION_COLOR": {key: "secColor", mod: "color"} // //Not Used! // "y.view.tabular.TableNodePainter.ALTERNATE_ROW_STYLE": { // "y:SimpleStyle": { // "fillColor": {key: "rowAltFillColor", mod: "color"}, // "lineColor": {key: "rowAltLineColor", mod: "color"}, // "lineType": "rowAltlineType", // "lineWidth": "rowAltlineWidth" // } // }, // "y.view.tabular.TableNodePainter.ALTERNATE_COLUMN_STYLE": { // "y:SimpleStyle": { // "fillColor": {key: "colAltFillColor", mod: "color"}, // "lineColor": {key: "colAltLineColor", mod: "color"}, // "lineType": "colAltlineType", // "lineWidth": "colAltlineWidth" // } // } }, "y:Table": { "y:DefaultColumnInsets.top": "colHHeight", "y:DefaultRowInsets.left": "rowHWidth", "y:Insets": { "top": "tblHHeight", "left": "tblHWidth" } } } }, tmpMap); styleMap["swimlaneFillColor"] = styleMap["fillColor"]; var isHor = tmpMap["isHorz"] == "pool_type_lane_and_column" || tmpMap["isHorz"] == "pool_type_empty" || tmpMap["isHorz"] == "pool_type_lane"; var th = 0, tw = 0; if (isHor) { tw = parseFloat(tmpMap["tblHWidth"]); } else { th = parseFloat(tmpMap["tblHHeight"]); } styleMap["startSize"] = th? th : tw; //Assumptions: There is always rows and cols in every table //Also all tables seems to be not rotated try { var rows = mlStyleObj["y:TableNode"]["y:Table"]["y:Rows"]["y:Row"]; var cols = mlStyleObj["y:TableNode"]["y:Table"]["y:Columns"]["y:Column"]; var atts4Rows = tmpMap["laneStyle"] == "lane.style.rows" || tmpMap["laneStyle"] == "lane_style_rows"; if (!(rows instanceof Array)) rows = [rows]; if (!(cols instanceof Array)) cols = [cols]; var rowStartSize = parseFloat(tmpMap["rowHWidth"]); for (var i = 0; i < rows.length; i++) { if (rows[i]["y:Insets"]) rowStartSize = Math.max(rowStartSize, parseFloat(rows[i]["y:Insets"]["left"]) + parseFloat(rows[i]["y:Insets"]["right"])); } var colStartSize = parseFloat(tmpMap["colHHeight"]); for (var i = 0; i < cols.length; i++) { if (cols[i]["y:Insets"]) colStartSize = Math.max(colStartSize, parseFloat(cols[i]["y:Insets"]["top"]) + parseFloat(cols[i]["y:Insets"]["bottom"])); } if (atts4Rows) { this.addTbl2Rows(node, rows, th, tw, rowStartSize, colStartSize, atts4Rows, tmpMap); this.addTbl2Cols(node, cols, th, tw, rowStartSize, colStartSize, atts4Rows, tmpMap); } else { this.addTbl2Cols(node, cols, th, tw, rowStartSize, colStartSize, atts4Rows, tmpMap); this.addTbl2Rows(node, rows, th, tw, rowStartSize, colStartSize, atts4Rows, tmpMap); } } catch(e) { //nothing! } break; case "js:relationship_big_entity": styleMap['shape'] = "swimlane;startSize=30;rounded=1;arcSize=5;collapsible=0"; var fill = mlStyleObj["y:GenericNode"]["y:Fill"]; if (fill) { styleMap['fillColor'] = fill["color2"]; styleMap['swimlaneFillColor'] = fill["color"]; } break; case "js:relationship_attribute": if (styleMap["double"] == "1") { styleMap['shape'] = "doubleEllipse"; } else { styleMap['shape'] = "ellipse"; } break; } if (shape.indexOf("Shadow") > 0) { styleMap["shadow"] = "1"; } } }; mxGraphMlCodec.prototype.addTbl2Rows = function(node, rows, th, tw, rowStartSize, colStartSize, atts4Rows, tmpMap) { var y = th + colStartSize; var isBPMN = tmpMap["isHorz"] != null; for (var i = 0; i < rows.length; i++) { var odd = i & 1; var cell = new mxCell(); cell.vertex = true; var rowStyle = { "shape": "swimlane;collapsible=0;horizontal=0", "startSize": rowStartSize, "fillColor": tmpMap["secColor"] || "none", "swimlaneLine": (isBPMN? "0" : "1") }; if (parseFloat(rowStyle["startSize"]) == 0) { rowStyle["fillColor"] = "none"; rowStyle["swimlaneLine"] = "0"; } if (atts4Rows) { var fillColor = odd? tmpMap["headerColorAlt"] : tmpMap["headerColor"]; rowStyle["swimlaneFillColor"] = odd? tmpMap["laneColorAlt"] : tmpMap["laneColor"]; rowStyle["fillColor"] = fillColor? fillColor : rowStyle["swimlaneFillColor"]; } var height = parseFloat(rows[i]["height"]); var dh = (isBPMN && i == 0)? colStartSize : 0 ; cell.geometry = new mxGeometry(tw, y - dh, node.geometry.width - tw, height + dh); y += height; // if (lblObj) // this.addLabels(cell, lblObj, rowStyle) cell.style = this.styleMap2Str(rowStyle); node.insert(cell); } }; mxGraphMlCodec.prototype.addTbl2Cols = function(node, cols, th, tw, rowStartSize, colStartSize, atts4Rows, tmpMap) { var x = rowStartSize + tw; var isBPMN = tmpMap["isHorz"] != null; for (var i = 0; i < cols.length; i++) { var odd = i & 1; var cell = new mxCell(); cell.vertex = true; var colStyle = { "shape": "swimlane;collapsible=0", "startSize": colStartSize, "fillColor": tmpMap["secColor"] || "none", "swimlaneLine": (isBPMN? "0" : "1") }; if (parseFloat(colStyle["startSize"]) == 0) { colStyle["fillColor"] = "none"; } if (!atts4Rows) { var fillColor = odd? tmpMap["headerColorAlt"] : tmpMap["headerColor"]; colStyle["swimlaneFillColor"] = odd? tmpMap["laneColorAlt"] : tmpMap["laneColor"]; colStyle["fillColor"] = fillColor? fillColor : colStyle["swimlaneFillColor"]; } var width = parseFloat(cols[i]["width"]); var dw = (isBPMN && i == 0)? rowStartSize : 0 ; cell.geometry = new mxGeometry(x - dw, th, width + dw, node.geometry.height - th); x += width; // if (lblObj) // this.addLabels(cell, lblObj, rowStyle) cell.style = this.styleMap2Str(colStyle); node.insert(cell); } }; mxGraphMlCodec.prototype.addRow = function(row, parent, odd, y, xShift, rowMapping, defRowStyle) { var cell = new mxCell(); cell.vertex = true; var rowStyle = mxUtils.clone(defRowStyle); this.mapObject(row, rowMapping, rowStyle); if (odd) { if (rowStyle["oddFill"]) rowStyle["fillColor"] = rowStyle["oddFill"]; if (rowStyle["oddLaneFill"]) rowStyle["swimlaneFillColor"] = rowStyle["oddLaneFill"]; } else { if (rowStyle["evenFill"]) rowStyle["fillColor"] = rowStyle["evenFill"]; if (rowStyle["evenLaneFill"]) rowStyle["swimlaneFillColor"] = rowStyle["evenLaneFill"]; } var height = parseFloat(rowStyle["height"]); cell.geometry = new mxGeometry(xShift.lx, y, parent.geometry.width - xShift.lx, height); var lblObj = row["Labels"]; if (lblObj) this.addLabels(cell, lblObj, rowStyle) cell.style = this.styleMap2Str(rowStyle); parent.insert(cell); var subRow = row["y:Row"]; xShift.lx = 0; if (rowStyle["startSize"]) { xShift.lx = parseFloat(rowStyle["startSize"]); xShift.x += xShift.lx; } var initX = xShift.x, maxX = xShift.x, initLx = xShift.lx; var subY = 0; if (subRow) { if (!(subRow instanceof Array))