Fixed stroke width


I have a node that is basically a simply rectangle with a stroke width of 2 px.
I’d like the stroke width to be ‘always’ of 2px width, whichever the zoom level is. By that i mean that the width should always looks the same to the user.
Is there a simple way to achieve this ?


Perhaps like this sample does?

  // This code keeps all nodes at a constant size in the viewport,
  // by adjusting for any scaling done by zooming in or out.
  // This code ignores simple Parts;
  // Links will automatically be rerouted as Nodes change size.
  var origscale = NaN;
  var oldscale = NaN;
  myDiagram.addDiagramListener("InitialLayoutCompleted", function(e) { origscale = oldscale = myDiagram.scale; });
  myDiagram.addDiagramListener("ViewportBoundsChanged", function(e) {
    if (isNaN(origscale)) return;
    var newscale = myDiagram.scale;
    if (oldscale === newscale) return;  // optimization: don't scale Nodes when just scrolling/panning
    oldscale = newscale; 
    myDiagram.skipsUndoManager = true;
    myDiagram.startTransaction("scale Nodes");
    myDiagram.nodes.each(function(node) {
        node.scale = origscale / newscale;
    myDiagram.commitTransaction("scale Nodes");
    myDiagram.skipsUndoManager = false;

Thank Simon

I have looked at this example… it makes me realize that i have not stated my question correctly.

The user will not be able to zoom/unzoom in my diagram, but the dimension of the diagram can vary. I’d like my node to always have a stroke of ‘2px’ whichever the dimensions of the diagram are.

I think i can use the initialLayoutCompleted and do some maths here to adjust the stroke width of my node according to the current scaling.

Hmm. Ok. Doing some work in initialLayoutCompleted is probably the right thing to do then.

Thanks Simon, I find a good solution :

overviewDiagram.addDiagramListener("InitialLayoutCompleted", function(e) {
        var node = overviewDiagram.findNodeForKey('VIEWPORT');
        var drawedViewport = node.findObject('VIEWPORTRECTANGLE');
        drawedViewport.strokeWidth = 2 / overviewDiagram.scale;