Is there any way to set the 'dash pattern' of an edge in mxGraph? for example

\n
4px line, 1px space = ____ ____ ____ ____ ____ ____ ____\n3px line, 1px space = ___ ___ ___ ___ ___ ___ ___ ___ ___\n2px line, 2px space = __  __  __  __  __  __  __  __  __ \n1px line, 1px space = - - - - - - - - - - - - - - - - - -\n
\n

I have had little luck guessing at various cell style key/value combinations. I'm guessing that this is either something easy that I'm overlooking, or it's not supported.

\n

mxXmlCanvas2D.setDashPattern() looks promising, but it may have nothing to do with edges.

asked 31 Oct '11, 00:52

north's gravatar image

north
429
accept rate: 0%


You can only set dashed=0 (enabled) or dashed=1 (disabled) currently.

link

answered 31 Oct '11, 03:27

Gaudenz's gravatar image

Gaudenz
80.1k1310
accept rate: 39%

Thanks for the speedy response! Are there plans to add the ability to stylize edges in this way, in the near future?

(31 Oct '11, 07:52) north

Not in the near future, no.

(11 Nov '11, 03:42) Gaudenz

If a customer requested them they'd go on the todo list, currently we don't have any such request.

(11 Nov '11, 04:05) David

Actually to do edge styling in modern browsers (with svg support) it's enough to modify only one function with code, that is already written in other functions (in vml support). There is reserved 'dashpattern' attribute in style, which, as i suppose, is reserved for it.\nUnfortunately, it is not processed in function mxShape.prototype.updateSvgShape.\nIf you use firefox with greasemonkey, here goes userscript, which is patching this function:

\n
\n
// ==UserScript==\n// @name           diagramly patch\n// @namespace      mpa\n// @include        http://www.diagram.ly/\n// ==/UserScript==\n//example style:\n//rounded=1;dashed=1;dashpattern=6 6 2 2\nsource = ''+\n  "mxShape.prototype.updateSvgShape = function(node) {\n"+\n  " var strokeWidth = Math.round(Math.max(1, this.strokewidth * this.scale));\n"+\n  " node.setAttribute('stroke-width', strokeWidth);\n"+\n  " if (this.crisp) {\n"+\n  " node.setAttribute('shape-rendering','crispEdges');\n"+\n  " } else {\n"+\n  " node.removeAttribute('shape-rendering');\n"+\n  " }\n"+\n  " if (this.points != null && this.points[0] != null) {\n"+\n  " var d = this.createPoints('M', 'L', 'C', false);\n"+\n  " if (d != null) {\n"+\n  " node.setAttribute('d', d);\n"+\n  " if (this.style != null && this.style[mxConstants.STYLE_SMOOTH]){\n"+\n  " var pts = this.points;\n"+\n  " var n = pts.length;\n"+\n  " if (n > 3) {\n"+\n  " var points = 'M ' + pts[0].x + ' ' + pts[0].y + ' ';\n"+\n  " points += ' Q ' + pts[1].x + ' ' + pts[1].y + ' ' + ' ' + pts[2].x +' ' + pts[2].y;\n"+\n  " for (var i = 3; i < n; i++) {\n"+\n  " points += ' T ' + pts[i].x + ' ' + pts[i].y;\n"+\n  " }\n"+\n  " node.setAttribute('d', points);\n"+\n  " }\n"+\n  " }\n"+\n  " node.removeAttribute('x');\n"+\n  " node.removeAttribute('y');\n"+\n  " node.removeAttribute('width');\n"+\n  " node.removeAttribute('height');\n"+\n  " }\n"+\n  " } else if (this.bounds != null) {\n"+\n  " node.setAttribute('x', Math.round(this.bounds.x));\n"+\n  " node.setAttribute('y', Math.round(this.bounds.y));\n"+\n  " var w = Math.round(this.bounds.width);\n"+\n  " var h = Math.round(this.bounds.height);\n"+\n  " node.setAttribute('width', w);\n"+\n  " node.setAttribute('height', h);\n"+\n  " if (this.isRounded) {\n"+\n  " var r = Math.min(w * mxConstants.RECTANGLE_ROUNDING_FACTOR,"+\n  "h*mxConstants.RECTANGLE_ROUNDING_FACTOR);\n"+\n  " node.setAttribute('rx', r);\n"+\n  " node.setAttribute('ry', r);\n"+\n  " }\n"+\n  " this.updateSvgTransform(node, node == this.shadowNode);\n"+\n  " }\n"+\n  " if (this.isDashed) {\n"+\n  " var phase = Math.max(1, Math.round(3 * this.scale));\n"+\n  " if ((this.style != null)&&(this.style.dashpattern !=null)) {\n"+\n  "   var phase2 = Math.max(1, Math.round(this.scale));\n"+\n  "   var tmp = this.style.dashpattern.split(' ');\n"+\n  "   var pat = [];\n"+\n  "   for (var i = 0; i < tmp.length; i++) {\n"+\n  "     if (tmp[i].length > 0) {\n"+\n  "       pat.push(Number(tmp[i]) * phase2);\n"+\n  "     }\n"+\n  "   }\n"+\n  "   var darray = pat.join(',');\n"+\n  "   node.setAttribute('stroke-dasharray',darray);\n"+\n  " } else {\n"+\n  " node.setAttribute('stroke-dasharray',phase + ',' + phase);\n"+\n  " }\n"+\n  " }\n"+\n  "};\n";\n // Create a script node holding this  source code.\n  var script = document.createElement('script');\n  script.setAttribute("type", "text/javascript");\n  script.innerHTML = source;\n\ndocument.getElementsByTagName('head')[0].appendChild(script);\n
\n
\n

I'm not very familiar with greasemonkey, so i've just copied content from original js file and added some lines to support dashpattern.

\n

Usage:

\n

1.Make shape dashed

\n

2.Select format->style in right mouse button menu for the shape and add desired dashpattern, separated by the spaces, for example: rounded=1;dashed=1;dashpattern=6 6 2 2

\n

It works for me.\nHope that authors will find the time to add it into the core.\nDouble backslashes before n in this script must be replaced with one backslash

link

answered 21 Nov '11, 13:11

kellwin's gravatar image

kellwin
1
accept rate: 0%

edited 02 Dec '11, 11:34

David's gravatar image

David
4.9k21831

Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Tags:

×228
×100
×50
×39

Asked: 31 Oct '11, 00:52

Seen: 3,273 times

Last updated: 02 Dec '11, 11:34