In'Windows Forms' there was the possibility to use'Pen' :

System.Drawing.Pen pen = new System.Drawing.Pen(Color.Black);
pen.CompoundArray = new float[] { 0, 0.25f, 0.75f, 1 };
pen.Width = 0.3f;
pen.DashPattern = new float[] { 5f, 2f };


How to do this in javascript?

Hi,

You can use the stroke property to set the color, the strokeThickness property to set the width and chose a value from the MindFusion.Drawing.DashStyle enumeration to set the strokeDashStyle property. These properties can be accessed through the various style properties, or directly via the diagram and diagram items.

For example:

Code (javascript):

node.setStroke("black"); node.setStrokeThickness(0.3); node.setStrokeDashStyle(MindFusion.Drawing.DashStyle.DashDot);

Regards,
Lyubo

Hi Lyubo,

Thankyou for the response.

I need a  pen.CompoundArray = new float[] { 0, 0.25f, 0.75f, 1 }; for double lines

How can I use that?

Regards,
Kuzya

Hi,

There's no such behavior supported out-of-the-box in the Canvas API. One thing you can try to do is to draw a wider line, then draw over the middle portion of it, using the 'destination-out' globalCompositeOperation switch on the canvas context. The actual implementation will be different depending on where you need to apply those double lines, but the following example shows how you can override the Line.draw behavior to achieve a similar result:


Code (javascript):

MindFusion.Drawing.Line.prototype.draw = function (context, drawShadow) {     if (this.clipPath && !this.clipPath.empty())     {         this.clipPath.addToContext(context);         context.save();         context.clip();     }     if (this.shadow && drawShadow != false)     {         context.save();         this.shadow.apply(context);     }     context.strokeStyle = this.pen;     context.lineWidth = ((this.strokeThickness ? this.strokeThickness : 1) / context._mf_scale) * 4;     MindFusion.Drawing.DashStyle.apply(context, this.strokeDashStyle);     context.beginPath();     context.moveTo(this.x1, this.y1);     context.lineTo(this.x2, this.y2);     context.stroke();     context.globalCompositeOperation = 'destination-out';     context.lineWidth /= 2;     context.stroke();     context.globalCompositeOperation = 'source-over';     if (this.shadow && drawShadow != false)         context.restore();     if (this.clipPath && !this.clipPath.empty())         context.restore(); };

Check the attached image with the result of the above code for diagram links.

Regards,
Lyubo

---

Hi Lyubo,

Thankyou for the response.:)

I want to have the frames of the element as double lines. is it possible?

(in FlowChart.NET at the ''Start'-element the frames are double-lined )

Regards,
Kuzya

---

Hi,

To achieve a similar result in javascript, you could use the Shape Designer tool from the jsdiagram package (ShapeDesigner.exe) and create a custom shape with a decoration to simulate the double border. For example, the following xml code defines a custom double-bordered ellipse shape, which you can load via the ShapeLibrary class into jsdiagram:


Code (]<?xml version="1.0" encoding="utf-8"?>
<shapes version="2">
  <shape id="DoubleEllipse" fill-mode="Winding">
    <outline>
      <arc dash-style="Custom" width="-1" x="0" y="0" arc-width="100" arc-height="100" start="0" sweep="360" />
    </outline>
    <decorations>
      <arc dash-style="Custom" width="-1" x="2" y="2" arc-width="96" arc-height="96" start="0" sweep="360" />
    </decorations>
    <shape-decorations />
    <enable-outline>True</enable-outline>
  </shape>
</shapes>[/code):

Save that as a xml file to load in the diagram to be used as any other of the predefined shapes: [code javascript]var customShapes = new MindFusion.Diagramming.ShapeLibrary(); customShapes.loadFromXml('DoubleEllipse.xml'); node.setShape(MindFusion.Diagramming.Shape.fromId('DoubleEllipse'));

Regards,
Lyubo

---

Hi Lyubo,

thanks for pointing that out. At the moment we still use the trail version of Javascript. There doesn't seem to be a ShapeLibrary here.
Once an element has been set up in this way, will it be exported directly into XML or will post-processing always be necessary during loading?


Regards,
Kuzya

Hi,

Which version of the control are you using? ShapeLibrary was introduced in v.2.5 and is present both in the trial and licensed versions. If you're using the latest version, make sure that the browser is not serving an older cached versions of the script files.

In order to use the custom shape, its definition needs to be loaded in advance. You can also not rely on a xml file, but use the Shape class constructor to supply the shape definition. The above shape can be recreated in javascript like this:


Code (javascript):

var shape = new MindFusion.Diagramming.Shape({   id: "DoubleEllipse",   outline: "M100,50 A50,50,0,1,1,0,50 A50,50,0,1,1,100,50",   decoration: "M98,50 A48,48,0,1,1,2,50 A48,48,0,1,1,98,50",   fillMode: "nonzero"}); node.setShape(shape);

Regards,
Lyubo

Hi Lyubo,

Thanks for the solution :) It's working.
Can you tell me which parameters provide the distance between double lines?

  outline: "M100,50 A50,50,0,1,1,0,50 A50,50,0,1,1,100,50",
  decoration: "M98,50 A48,48,0,1,1,2,50 A48,48,0,1,1,98,50",

Regards,
Kuzya

Hi,

To increase the distance between the lines you need to adjust the decoration element. Moving the initial point "M98,50" closer to the shape's center - i.e. "M96,50" will leave a space of 4% of the shape's width between the lines; and next decrease the size of the decoration arcs to account for the offset - "A46,46" , and finally adjust the end points of the arcs: "4,50" for the fist and "96,50" for the second.

    decoration: "M96,50 A46,46,0,1,1,4,50 A46,46,0,1,1,96,50"

Regards,
Lyubo

Hi Lyubo,

I'm afraid I can't achieve the desired parallility. :(

Regards,
Kuzya

start_1 -Windows Forms
start_2 - javaScript

---

Hi,

Another approach you can take, is to scale a copy of the existing outline path in an updateVisuals callback. You may want to adjust the scaling ratios depending on the types of shapes you are using. The following example works well with shapes, which width is longer that their height:


Code (javascript):

MindFusion.Diagramming.ShapeNode.prototype.onUpdateVisuals = function (item)   {     var content = item.getGraphicsContent();     var outline = null;     var i = 0;     for (; i < content.length; i++)       if (content[i].outlinePath)       {         outline = content[i].outlinePath;         break;       }     if (!outline)       return;     outline.pen = content[i].outlinePen || "black";     outline.transform.scaleAtCenter(0.97, 0.95, new MindFusion.Drawing.Rect(0, 0, 100, 100));     content.push(outline); };

You will need to alter the code with conditionals for different shapes, depending on your specifications and apply a different scaling for different ratios.

Regards,
Lyubo

---

Hi,

for Shape -> RoundRect  does not work.


Regards,
Kuzya

---

Hi,

You can modify the round rectangle shape a bit, so it doesn't apply bigger corner radii, when the size of the node is small. Call this code somewhere in your initialization:


Code (javascript):

MindFusion.Diagramming.Shape.registerDefaultShape(new MindFusion.Diagramming.Shape({ id: "RoundRect", outline: "M0,6 L0,94 Q0,100,6,100 L94,100 Q100,100,100,94 L100,6 Q100,0,94,0 L6,0 Q0,0,0,6" }));

You can see the result in the attached image.

Regards,
Lyubo

---