The MindFusion Forums
Flow Diagramming Components >> Html Canvas & JavaScript >> Html Node in Diagram !
https://mindfusion.eu/Forum/YaBB.pl?num=1551187597

Message started by Kannan Thirumal on Feb 26th, 2019 at 1:26pm

Title: Html Node in Diagram !
Post by Kannan Thirumal on Feb 26th, 2019 at 1:26pm
Hi,

     My diagram node have multiple elements like images, text boxes etc. Also some of these elements inside can be hidden at runtime. May I know which is the best way to do that?

Thanks & Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Slavcho on Feb 26th, 2019 at 2:17pm
Edit: Since this is the most viewed topic on our JS forum, note that hosting HTML content in nodes is now possible using ControlNode objects (since v3.5 of the library).

Hi,

There's no support for showing Html inside nodes. You can display multiple images and texts using either TableNode objects (see SpanningCells.html example) or CompositeNode (Tutorial3.html example).

Regards,
Slavcho
Mindfusion

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Mar 12th, 2019 at 8:22am
Hi,

I've attached a sample layout image of my application node.

It has main image at the center and first image at the top-left corner and second image at the top-right corner and third image below the second image and fourth image at the bottom-right corner and a text box in the left-bottom corner.

I've defined a CompositeNode like below. But the node displayed in the diagram is NOT like the attached sample image layout.

OrgChartNode2 = CompositeNode.classFromTemplate("OrgChartNode2",
    {
      component: "GridPanel",
      id: "id",
      rowDefinitions: ["*"],
      columnDefinitions: ["22"],
      children:
        [
          {
            component: "GridPanel",
            rowDefinitions: ["18", "5"],
            columnDefinitions: ["18", "5"],
            children:
              [
                {
                  gridColumn: 0,
                  component: "Image",
                  name: "MainImage",
                  autoProperty: true,
                  location: "MainImage.png",
                  margin: "3",
                  imageAlign: "TopLeft"
                },
                {
                  gridColumn: 0,
                  component: "Image",
                  name: "FirstImage",
                  autoProperty: true,
                  location: "FirstImage.png",
                  margin: "3, 3, 0, 0",
                  imageAlign: "TopLeft"
                },
                {
                  gridColumn: 1,
                  component: "Image",
                  name: "SecondImage",
                  autoProperty: true,
                  location: "SecondImage.png",
                  margin: "3, 3, -50, 5",
                  imageAlign: "TopRight"
                },
                {
                  gridColumn: 1,
                  component: "Image",
                  name: "ThirdImage",
                  autoProperty: true,
                  location: "ThirdImage.png",
                  margin: "3, 30, -50, 3",
                  imageAlign: "TopRight",
                  width: "3"
                },
                {
                  gridColumn: 1,
                  component: "Image",
                  name: "FourthImage",
                  autoProperty: true,
                  location: "FourthImage.png",
                  margin: "3, 50, -50, 3",
                  imageAlign: "BottomRight",
                  width: "3"
                },
                {
                  gridColumn: 0,
                  component: "Text",
                  name: "NoOfElementsText",
                  autoProperty: true,
                  text: "title",
                  margin: "3, 40, 0, 0",
                  font: "Verdana 12px",
                  textAlign: "BottomLeft"
                },
              ]
          },
    });

I've set the images and text like this,

    var node = new this.OrgChartNode2();
    node.setMainImage("./../../../../images/MainImage.png");
    node.setFirstImage("./../../../../images/First.png");
    node.setSecondImage("./../../../../images/Second.png");
    node.setThirdImage("./../../../../images/Third.png");
    node.setFourthImage("./../../../../images/Fourth.png");
    node.setNoOfElementsText("8");

    this.diagram.addItem(node);

My requirement is, all the small images should be shown within the main image as described above. But the images are not properly placed using the above code.

Also I need the following,
* Image/Text are dynamically set visible
* Image/Text position also set dynamically
* Image/Text size also set dynamically

May I know how to solve this issue? Thank you !

Regards,
Kannan
Node.png ( 6 KB | 166 Downloads )

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Mar 14th, 2019 at 3:25am
Hi,

     I can set only image location for Image component or text for Text component dynamically. I couldn't set any other properties of the component like visibility, text font, position etc. Any clue for this? Is there any reference for jsontemplate?

Regards,
Kannan


Kannan Thirumal wrote on Mar 12th, 2019 at 8:22am:
Hi,

I've attached a sample layout image of my application node.

It has main image at the center and first image at the top-left corner and second image at the top-right corner and third image below the second image and fourth image at the bottom-right corner and a text box in the left-bottom corner.

I've defined a CompositeNode like below. But the node displayed in the diagram is NOT like the attached sample image layout.

OrgChartNode2 = CompositeNode.classFromTemplate("OrgChartNode2",
    {
      component: "GridPanel",
      id: "id",
      rowDefinitions: ["*"],
      columnDefinitions: ["22"],
      children:
        [
          {
            component: "GridPanel",
            rowDefinitions: ["18", "5"],
            columnDefinitions: ["18", "5"],
            children:
              [
                {
                  gridColumn: 0,
                  component: "Image",
                  name: "MainImage",
                  autoProperty: true,
                  location: "MainImage.png",
                  margin: "3",
                  imageAlign: "TopLeft"
                },
                {
                  gridColumn: 0,
                  component: "Image",
                  name: "FirstImage",
                  autoProperty: true,
                  location: "FirstImage.png",
                  margin: "3, 3, 0, 0",
                  imageAlign: "TopLeft"
                },
                {
                  gridColumn: 1,
                  component: "Image",
                  name: "SecondImage",
                  autoProperty: true,
                  location: "SecondImage.png",
                  margin: "3, 3, -50, 5",
                  imageAlign: "TopRight"
                },
                {
                  gridColumn: 1,
                  component: "Image",
                  name: "ThirdImage",
                  autoProperty: true,
                  location: "ThirdImage.png",
                  margin: "3, 30, -50, 3",
                  imageAlign: "TopRight",
                  width: "3"
                },
                {
                  gridColumn: 1,
                  component: "Image",
                  name: "FourthImage",
                  autoProperty: true,
                  location: "FourthImage.png",
                  margin: "3, 50, -50, 3",
                  imageAlign: "BottomRight",
                  width: "3"
                },
                {
                  gridColumn: 0,
                  component: "Text",
                  name: "NoOfElementsText",
                  autoProperty: true,
                  text: "title",
                  margin: "3, 40, 0, 0",
                  font: "Verdana 12px",
                  textAlign: "BottomLeft"
                },
              ]
          },
    });

I've set the images and text like this,

    var node = new this.OrgChartNode2();
    node.setMainImage("./../../../../images/MainImage.png");
    node.setFirstImage("./../../../../images/First.png");
    node.setSecondImage("./../../../../images/Second.png");
    node.setThirdImage("./../../../../images/Third.png");
    node.setFourthImage("./../../../../images/Fourth.png");
    node.setNoOfElementsText("8");

    this.diagram.addItem(node);

My requirement is, all the small images should be shown within the main image as described above. But the images are not properly placed using the above code.

Also I need the following,
* Image/Text are dynamically set visible
* Image/Text position also set dynamically
* Image/Text size also set dynamically

May I know how to solve this issue? Thank you !

Regards,
Kannan


Title: Re: Html Node in Diagram !
Post by Lyubo on Mar 14th, 2019 at 12:27pm
Hi,

The properties from your example below apply correctly in my test - font, margin, imageAlign, etc. You can set visibility to either "Visible", "Hidden" or "Collapsed". For reference, here are the documentation topic on the components generated for the composite node: Image, Text.

Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Mar 14th, 2019 at 12:39pm
Hi Lyubo,

     But I want to set visibility, size, position during runtime not inside the OrgChartNode because it differs for each node.

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on Mar 14th, 2019 at 12:50pm
Hi,

Use the compositeNode.getComponent(name) method at runtime to get the component you wish to modify. When you're done with your changes, call the invalidate method on the node to repaint it:


Code (javascript):
var textComponent = myNode.getComponent("NoOfElementsText");
if (textComponent)
{
    textComponent.visibility = MindFusion.Drawing.Visibility.Visible;
    textComponent.font = new MindFusion.Drawing.Font("Arial", 6);
}

// other modifications...

myNode.invalidate();


Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Mar 14th, 2019 at 1:05pm
Hi Lyubo,

Looks good. But Visibility is not in MindFusion.Drawing. Any idea?

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on Mar 14th, 2019 at 1:25pm
Do you mean in the type definitions file? We'll add it in the next release. As a workaround you can use the numerical values Hidden: 0, Collapsed: 1, Visible: 2.

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Mar 15th, 2019 at 8:36am
Hi,

But this gives the following compiler error,

error TS2339: Property 'visibility' does not exist on type 'Component'.

Regards,
Kannan


Lyubo wrote on Mar 14th, 2019 at 12:50pm:
Hi,

Use the compositeNode.getComponent(name) method at runtime to get the component you wish to modify. When you're done with your changes, call the invalidate method on the node to repaint it:


Code (javascript):
var textComponent = myNode.getComponent("NoOfElementsText");
if (textComponent)
{
    textComponent.visibility = MindFusion.Drawing.Visibility.Visible;
    textComponent.font = new MindFusion.Drawing.Font("Arial", 6);
}

// other modifications...

myNode.invalidate();


Regards,
Lyubo


Title: Re: Html Node in Diagram !https://mindfusion.eu/yabbfiles/Templates/Forum/default/code.gif
Post by Lyubo on Mar 15th, 2019 at 12:31pm
Hi,

Cast textComponent to <any> in TypeScript as a workaround, until we add the missing properties in the definitions file, or use declaration merging to add them from your side.

Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Mar 15th, 2019 at 12:45pm
Hi Lyubo,

It works by using "any". Thanks ! But need help to set x and y for image component,

var imageComponent = myNode.getComponent("FirstImage");
if (imageComponent)
{
    // imageComponent.image.x = 30;
    // imageComponent.image.y = 60;
    imageComponent.image.style.x = 30;
    imageComponent.image.style.y = 60;
}

The above didn't work.

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on Mar 15th, 2019 at 12:52pm
Try setting the imageComponent.bounds property to a new MindFusion.Drawing.Rect with the desired location and dimensions.

Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Mar 15th, 2019 at 1:02pm
Hi Lyubo,

Tried this, but no luck :-(

var imageComponent = myNode.getComponent("FirstImage");
if (imageComponent)
{
     imageComponent.bounds = new MindFusion.Drawing.Rect(50, 50, 20, 20);
}

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on Mar 15th, 2019 at 1:48pm
Hi,

Try setting the dimensions on the underlying Image DOM element directly then:


Code (javascript):
var imageComponent = myNode.getComponent("FirstImage");
if (imageComponent && imageComponent.image)
{
     imageComponent.image.x = 50;
     imageComponent.image.y = 50;
     imageComponent.image.width = 20;
     imageComponent.image.height = 20;
}


Additionally, you can control the position/size by configuring margin and imageAlign properties, considering also the parent panel size.

Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Mar 16th, 2019 at 3:29am
Hi Lyubo,

     I already tried this by setting image.x, but it was giving the following error,

     ERROR TypeError: Cannot assign to read only property 'x' of object '[object HTMLImageElement]'

     But image.width is working fine.

Regards,
Kannan


Lyubo wrote on Mar 15th, 2019 at 1:48pm:
Hi,

Try setting the dimensions on the underlying Image DOM element directly then:


Code (javascript):
var imageComponent = myNode.getComponent("FirstImage");
if (imageComponent && imageComponent.image)
{
     imageComponent.image.x = 50;
     imageComponent.image.y = 50;
     imageComponent.image.width = 20;
     imageComponent.image.height = 20;
}


Additionally, you can control the position/size by configuring margin and imageAlign properties, considering also the parent panel size.

Regards,
Lyubo


Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Mar 18th, 2019 at 11:39am
Hi Lyubo,

    Setting position and size using margin seems confusing. Could you please tell me how to set position and size using component's x/y and width/height? Thank you !

Regards,
Kannan


Lyubo wrote on Mar 15th, 2019 at 1:48pm:
Hi,

Try setting the dimensions on the underlying Image DOM element directly then:


Code (javascript):
var imageComponent = myNode.getComponent("FirstImage");
if (imageComponent && imageComponent.image)
{
     imageComponent.image.x = 50;
     imageComponent.image.y = 50;
     imageComponent.image.width = 20;
     imageComponent.image.height = 20;
}


Additionally, you can control the position/size by configuring margin and imageAlign properties, considering also the parent panel size.

Regards,
Lyubo


Title: Re: Html Node in Diagram !
Post by Lyubo on Mar 19th, 2019 at 11:41am
Hi,

When you use GridPanel in your template (as is in your code), you can position its children by setting their margin, gridColumn, gridRow, columnSpan, rowSpan properties. For the Image component, when you set the imageAlign property to Fit or Stretch, the image will size itself in respect to the provided size by it's parent (GridPanel for example); if you use other values for imageAlign, the real image size will be used instead - so in this case you can use the technique from the above post to change the DOM Image element size.

Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Mar 27th, 2019 at 7:43am
Hi,

     Is there any way to define the json template in a separate file and load here dynamically? Thanks !

Regards,
Kannan


Kannan Thirumal wrote on Mar 12th, 2019 at 8:22am:
Hi,

I've attached a sample layout image of my application node.

It has main image at the center and first image at the top-left corner and second image at the top-right corner and third image below the second image and fourth image at the bottom-right corner and a text box in the left-bottom corner.

I've defined a CompositeNode like below. But the node displayed in the diagram is NOT like the attached sample image layout.

OrgChartNode2 = CompositeNode.classFromTemplate("OrgChartNode2",
    {
      component: "GridPanel",
      id: "id",
      rowDefinitions: ["*"],
      columnDefinitions: ["22"],
      children:
        [
          {
            component: "GridPanel",
            rowDefinitions: ["18", "5"],
            columnDefinitions: ["18", "5"],
            children:
              [
                {
                  gridColumn: 0,
                  component: "Image",
                  name: "MainImage",
                  autoProperty: true,
                  location: "MainImage.png",
                  margin: "3",
                  imageAlign: "TopLeft"
                },
                {
                  gridColumn: 0,
                  component: "Image",
                  name: "FirstImage",
                  autoProperty: true,
                  location: "FirstImage.png",
                  margin: "3, 3, 0, 0",
                  imageAlign: "TopLeft"
                },
                {
                  gridColumn: 1,
                  component: "Image",
                  name: "SecondImage",
                  autoProperty: true,
                  location: "SecondImage.png",
                  margin: "3, 3, -50, 5",
                  imageAlign: "TopRight"
                },
                {
                  gridColumn: 1,
                  component: "Image",
                  name: "ThirdImage",
                  autoProperty: true,
                  location: "ThirdImage.png",
                  margin: "3, 30, -50, 3",
                  imageAlign: "TopRight",
                  width: "3"
                },
                {
                  gridColumn: 1,
                  component: "Image",
                  name: "FourthImage",
                  autoProperty: true,
                  location: "FourthImage.png",
                  margin: "3, 50, -50, 3",
                  imageAlign: "BottomRight",
                  width: "3"
                },
                {
                  gridColumn: 0,
                  component: "Text",
                  name: "NoOfElementsText",
                  autoProperty: true,
                  text: "title",
                  margin: "3, 40, 0, 0",
                  font: "Verdana 12px",
                  textAlign: "BottomLeft"
                },
              ]
          },
    });

I've set the images and text like this,

    var node = new this.OrgChartNode2();
    node.setMainImage("./../../../../images/MainImage.png");
    node.setFirstImage("./../../../../images/First.png");
    node.setSecondImage("./../../../../images/Second.png");
    node.setThirdImage("./../../../../images/Third.png");
    node.setFourthImage("./../../../../images/Fourth.png");
    node.setNoOfElementsText("8");

    this.diagram.addItem(node);

My requirement is, all the small images should be shown within the main image as described above. But the images are not properly placed using the above code.

Also I need the following,
* Image/Text are dynamically set visible
* Image/Text position also set dynamically
* Image/Text size also set dynamically

May I know how to solve this issue? Thank you !

Regards,
Kannan


Title: Re: Html Node in Diagram !
Post by Lyubo on Mar 27th, 2019 at 9:42am
Hi,

Yes, you can load the template from a file as you would any other JSON content. For example:


Code (javascript):
var url = encodeURI("template.txt");
           
var xhr = new XMLHttpRequest();
if (xhr.overrideMimeType)
     xhr.overrideMimeType("text/ plain");

xhr.open("GET", url);
xhr.onload = function (e)
{
     if (xhr.status === 200)
     {
           var content = xhr.responseText;
           var template = JSON.parse(content);
           OrgChartNode = MindFusion.Diagramming.CompositeNode.classFromTemplate("OrgChartNode", template);
     }
     else
           console.log('Request failed status: ' + xhr.status);
};
xhr.onerror = function (e)
{
     console.log('Request failed error: ' + xhr.status + ';' + e.toString());
};
           
xhr.send();


Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Mar 27th, 2019 at 12:17pm
Hi Lyubo,

Thank you ! I'm doing like below but getting error. May I know how to fix this?

OrgChartNode: any;

  ngAfterViewInit() {

    this.loadJsonTemplate();
  }

private loadJsonTemplate() {

    var url = encodeURI("diagram-node.template.txt");
    var xhr = new XMLHttpRequest();
    if (xhr.overrideMimeType)
      xhr.overrideMimeType("text/ plain");
    xhr.open("GET", url);
    xhr.onload = function (e) {
      if (xhr.status === 200) {
        var content = xhr.responseText;
        var template = JSON.parse(content);
        OrgChartNode = MindFusion.Diagramming.CompositeNode.classFromTemplate("OrgChartNode", template);
      }
      else
        console.log('Request failed status: ' + xhr.status);
    };
    xhr.onerror = function (e) {
      console.log('Request failed error: ' + xhr.status + ';' + e.toString());
    };
    xhr.send();
  }

private createCompositeNode(diagramElement: any) {

    var node = new this.OrgChartNode();

   }

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on Mar 27th, 2019 at 12:43pm
And what is that error? As fetching the file contents is a asynchronous operation, make sure, you've actually loaded the template before trying to initialize the node. Also, is the file path correct? Is the file content a valid JSON string? Do you receive response from the request or it fails before that?

Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Mar 27th, 2019 at 12:50pm
Hi,

It is giving build error,

     error TS2304: Cannot find name 'OrgChartNode'.

In the below line of code,

     OrgChartNode = MindFusion.Diagramming.CompositeNode.classFromTemplate("OrgChartNode", template);

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on Mar 27th, 2019 at 1:29pm
The code is just a snippet that creates and sends the template file request. It assumes you've declared the variable before calling it. You need to add OrgChartNode as a variable or field, somewhere in your class.


Code (javascript):
private OrgChartNode: any;
//...
this.OrgChartNode = ...

// or

var OrgChartNode = ...


Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Mar 27th, 2019 at 2:40pm
Hi Lyubo,

That is because of the following line of code,

xhr.onload = function (e) {

I changed it to,

xhr.onload = (e) => {

Now it works.

But now at runtime, it throws the below exception,

vendor.js:40489 ERROR SyntaxError: Unexpected token c in JSON at position 9
    at JSON.parse (<anonymous>)

May I know why? I've attached the json template file.

Regards,
Kannan
https://mindfusion.eu/Forum/YaBB.pl?action=downloadfile;file=diagram-node_template.txt ( 4 KB | 185 Downloads )

Title: Re: Html Node in Diagram !
Post by Lyubo on Mar 27th, 2019 at 5:19pm
Hi,

The error means your json string is not formatted properly. You need to enclose attribute names in quotes. A properly formatted json should look like:

Code (javascript):
//...
{
  "component": "GridPanel",
  "id": "id",
  "children":
  [
      {
          "component": "GridPanel",
          "stroke": "red",
      }
  ]
}
//...


Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Mar 28th, 2019 at 5:38am
Hi Lyubo,

     Thank you. It works ! Is there any tool/plugin to edit/view the output of this template? I'm using visual studio.

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on Mar 28th, 2019 at 10:53am
Hi,

The CompositeNode template format is just the JSON standard data format, so you can use any tool/plugin available for it to edit and customize your templates.

Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on May 14th, 2019 at 2:45pm
Hi,

I've a diagram like this,

     private diagram: Diagram;

I've created composite node (as described in my previous posts) and adding to the diagram like this,

     diagram.addItem(node);

Like this added few more nodes.

After this I want to draw different set of nodes. So first I cleared the diagram like this,

     this.diagram.clearAll();

And added next set of composite nodes as described before.

Now the previous set of nodes should vanish and the new set of nodes should display.

This is working fine till "diagram-library": "3.3.0"

But after that, even in the latest version "3.3.5" this is not working.

That means both the set of nodes are displayed in the same diagram.

If I do other operation like diagram zoom, then the previous set of nodes vanishes and only the new nodes displays.

May I know what happened in the new releases? Please help me to fix this issue.

Thanks & Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on May 15th, 2019 at 10:19am
Hi,

I'm not able to reproduce the issue, but you could try calling this.diagram.invalidate(); before adding the new set of nodes - this should resolve it.

Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on May 15th, 2019 at 11:49am
Hi,

     I couldn't find invalidate method in the Diagram object. I'm using latest diagram library 3.3.5.

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on May 15th, 2019 at 12:46pm
Hi,

We'll add it to the definitions file for the next release, in the mean time you can use declaration merging techniques to add the invalidate method to the Canvas class definition, or use the diagram.repaint method instead.

Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on May 15th, 2019 at 12:51pm
Hi,

I tried the both like this,

this.diagram.repaint();

(this.diagram as any).invalidate(); Am I correct?

But both didn't work :-(

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on May 15th, 2019 at 1:11pm

Kannan Thirumal wrote on May 15th, 2019 at 12:51pm:

(this.diagram as any).invalidate(); Am I correct?


Yes, the above should work. When are you calling it? Can you provide a small code snippet that reproduces the problem?

Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on May 15th, 2019 at 1:15pm
Hi,

I'm calling this,

  public drawDiagram() {

    this.diagram.clearAll();

    (this.diagram as any).invalidate();

    let factory = <Factory>this.diagram.getFactory();

    for (let i: number = 0; i < this.diagramModel.nodes.length; i++) {

      let n = this.diagramModel.nodes[i];

      this.createCompositeNode(n);
    }
  }

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on May 15th, 2019 at 1:39pm
Hi,

I'm attaching my test project that uses CompositeNodes (it's a modified version of Tutorial3 from the JsDiagram package) and with it and your code sample, I'm not able to reproduce your issue. The diagram gets repainted even without calling invalidate().

Can you modify the attached sample in a way that it reproduces the issue and send back to us to inspect?

Regards,
Lyubo
https://mindfusion.eu/Forum/YaBB.pl?action=downloadfile;file=Tutorial3.zip ( 33 KB | 230 Downloads )

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on May 31st, 2019 at 1:46pm
Hi,

I've created a sample and attached to reproduce the issue.
1. Click Draw Diagram button (which draw a node)
2. Click Draw Another Diagram button (which clears the diagram and draw another node)

But the first node still appears there.

If double click on the node, creates another node at different location but not clear the previous nodes.

This behavior is working fine in 3.3.2 version.

Regards,
Kannan
https://mindfusion.eu/Forum/YaBB.pl?action=downloadfile;file=MindFusionDiagram.rar ( 297 KB | 126 Downloads )

Title: Re: Html Node in Diagram !
Post by Lyubo on Jun 3rd, 2019 at 7:43am
Hi,

The drawing optimizations from last release did not handle transparent backgrounds. This build should fix that: https://mindfusion.eu/_temp/jsdiag_transparent.zip.

Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Jun 3rd, 2019 at 11:28am
Hi,

I used these two files by replacing in,

ClientApp\node_modules\diagram-library
ClientApp\node_modules\diagram-library\node_modules\mindfusion-common

Am I correct?

But after this too it doesn't work. Now the nodes are not displayed in the diagram. When moving the mouse the ports are displayed but not node.

Note: I tried the same in the previous given sample. Still the same behavior. ie the first node is still displayed when the diagram is cleared and redrawn with another node.

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on Jun 4th, 2019 at 6:09am
Hi,

You need to overwrite the MindFusion.Diagramming.js script in the ClientApp\node_modules\diagram-library folder and the MindFusion.Common.js script in the ClientApp\node_modules\mindfusion-common folder. After doing that i don't see issues in the application you sent. Attached are screen grabs after clicking the Draw Diagram and Draw Another Diagram buttons.

Make sure you're not loading some cached version of the library. Are there any errors in the browser's console?

We will update the npm package later in the day so that you won't need to overwrite the scripts manually.

Regards,
Lyubo
clientapp_1.png ( 96 KB | 153 Downloads )
clientapp_2.png ( 108 KB | 137 Downloads )

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Jun 4th, 2019 at 9:26am
Hi Lyubo,

     It works ! Thank you.

     Looking forward for the latest npm diagram-library update today. Thank you !

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Jul 1st, 2019 at 11:37am
Hi,

I've two composite nodes. One of the node have Circle shape image and another one have Diamond shape image. The circle image background is transparent but the diamond shape node is not. I couldn't find wrong with the image. May I know why this happens?

I've attached the screen shot.

Sample Code: https://drive.google.com/open?id=1ZWVBMlFLqfx6_cT6cCFME9Qg941mtrt5

Regards,
Kannan
Diamond_Node_Back_Not_Transparent.png ( 33 KB | 132 Downloads )

Title: Re: Html Node in Diagram !
Post by Lyubo on Jul 1st, 2019 at 1:00pm
Hi,

I'm not really sure what your issue is. The white background on the diamond shaped image is part of the image itself. If you want to make it transparent, you need to edit your image file.

Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Jul 1st, 2019 at 1:12pm
Hi,

No, the white background is NOT part of the image. I hope I'm sure. For both the images, there is no white background. Please check the sample code which has both the images.

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on Jul 1st, 2019 at 1:35pm
Hi,

The image in the sample you provided above - ..\MindFusionDiagram_Node_Background\MindFusionDiagram\ClientApp\src\assets\images\Nodes_2.png - that's the file used by your composite node - and that file has white background.

Regards,
Lyubo
white.PNG ( 77 KB | 143 Downloads )

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Jul 3rd, 2019 at 6:48am
Hi Lyubo ! Yes, you are correct ! Thank you !

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Jul 3rd, 2019 at 7:01am
Hi,

Attached image has nodes in the shape of Diamond, Circle etc.

I've defined these nodes as CompositeNode since I want to set more than one image, text etc.

May I know how to set Shape for these kind of nodes (as we do in ShapeNode like setting Shape as Decision, Ellipse etc).

Regards,
Kannan
Decision_Ellipse_Shape_Nodes.png ( 35 KB | 123 Downloads )

Title: Re: Html Node in Diagram !
Post by Lyubo on Jul 3rd, 2019 at 12:46pm
Hi,

This is not currently available in our JavaScript library. We have support for shape components for CompositeNode in our .NET product, and will try to port this functionality in upcoming release.

Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Jul 3rd, 2019 at 12:53pm
Hi,

I like to have this feature since we also porting our app from wpf/silverlight developed with mind fusion. One necessary behavior is like, on selection of Ellipse type node, the highlighted border should be Circle and not Rectangle.

May I know when I can expect this feature?

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Slavcho on Jul 16th, 2019 at 8:07am
This build implements shape components -
https://mindfusion.eu/_beta/jsdiag334.zip


Code (]
var OrgChartNode2 = CompositeNode.classFromTemplate("OrgChartNode2",
{
     component: "SimplePanel",
     children:
     [
           {
                 component: "Shape",
                 id: "Star16Pointed",
                 autoProperty: true,
                 name: "OutlineShape",
                 pen: "gray",
                 brush: "silver",
                 isOutline: true
           }
     ):


});


Regards,
Slavcho

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Jul 29th, 2019 at 11:25am
Hi,

I tried the Shape component type but got the below error. I used the two js files attached in your previous reply,

core.js:12501 ERROR ReferenceError: Shape is not defined
    at mdiag.ComponentLoader.componentFromJson (eval at ./node_modules/diagram-library/MindFusion.Diagramming.js (MindFusion.Diagramming.js:1), <anonymous>:1:239426)

I've attached the template file of the composite node. I've a component named "MainImage". I need this to be Shape component and also it should have image as shown in the attached screen shot in one of the previous reply.

Sample code is uploaded in the below url,

https://drive.google.com/open?id=1K9w11GxUndjTU6cvfH9Z4iSZFCHpPsnD

Regards,
Kannan
https://mindfusion.eu/Forum/YaBB.pl?action=downloadfile;file=diagram-node_template_001.txt ( 2 KB | 144 Downloads )

Title: Re: Html Node in Diagram !
Post by Lyubo on Jul 29th, 2019 at 2:04pm
Hi,

There seems to be a bug in the composite shapes that causes this. Until we release a fix, as a workaround, you can declare the Shape variable before creating your nodes:
Code (javascript):
var Shape = MindFusion.Diagramming.Shape;


Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Jul 30th, 2019 at 4:52am
Hi,

I tried the same workaround but still I'm getting the same error.

Could you please check the sample code uploaded in the below path?

https://drive.google.com/open?id=1iAS4tUscwzAmIlLl_BftPnCOCX8NL-0G

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on Jul 30th, 2019 at 7:16am
Hi,

This scripts from this new beta should fix the problem: https://mindfusion.eu/_beta/jsdiag334.zip.

We will let you know when we update the npm package too.

Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Jul 30th, 2019 at 7:27am
Hi,

I've already tried those js files and was getting those errors. The same sample code uploaded to this url,

https://drive.google.com/open?id=1iAS4tUscwzAmIlLl_BftPnCOCX8NL-0G

Regards,
Kannan


Lyubo wrote on Jul 30th, 2019 at 7:16am:
Hi,

This scripts from this new beta should fix the problem: https://mindfusion.eu/_beta/jsdiag334.zip.

We will let you know when we update the npm package too.

Regards,
Lyubo


Title: Re: Html Node in Diagram !
Post by Lyubo on Jul 30th, 2019 at 7:35am
Hi,

Did you try the files from the zip i just posted? They were created just an hour ago and should fix the issue you reported. They are not the same as the ones we posted before.

Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Jul 30th, 2019 at 7:45am
Hi,

I tried the new one now. I've defined the component in the template like this,

        {
          "gridColumn": 0,
          "component": "Shape",
          "name": "MainImage",
          "autoProperty": true,
          "location": "./assets/images/pfd/MainImage.png",
          "margin": "3",
          "imageAlign": "TopLeft",
       "isOutline": true
        },

Now I'm getting the below error,

core.js:12501 ERROR TypeError: this.namedComponents[name].setDefaultProperty is not a function
    at ns.<computed>.propertyMap.<computed> [as setMainImage] (eval at ./node_modules/diagram-library/MindFusion.Diagramming.js (MindFusion.Diagramming.js:1), <anonymous>:1:240248)
    at FlowDiagramComponent.push../src/app/diagram/diagram.component.ts.FlowDiagramComponent.createCompositeNode (diagram.component.ts:440)

May I know how to set image in this Shape component?

Regards,
Kannan


Lyubo wrote on Jul 30th, 2019 at 7:35am:
Hi,

Did you try the files from the zip i just posted? They were created just an hour ago and should fix the issue you reported. They are not the same as the ones we posted before.

Regards,
Lyubo


Title: Re: Html Node in Diagram !
Post by Lyubo on Jul 31st, 2019 at 11:05am
Hi,

This build improves the support for Shape components: https://mindfusion.eu/_beta/jsdiag334.zip. CompositeNode contents will now clip to the shape outline.

The Shape component doesn't support setting an image directly, but you can use it as an outline for your nodes. So what you can do is add a shape outline and an Image component as part of your CompositeNode template:
[code]//...
{
     component: "Shape",
     id: "Cloud",
     autoProperty: true,
     name: "OutlineShape",
     pen: "gray",
     brush: "Transparent",
     isOutline: true
},
{
     gridColumn: 0,
     component: "Image",
     name: "MainImage",
     autoProperty: true,
     location: "./assets/images/pfd/MainImage.png",
     margin: "3",
     imageAlign: "TopLeft"
},
// ...[/code]

Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Aug 1st, 2019 at 6:48am
Thank Lyubo. I tried the same and now outline is coming but the outline size is small. I couldn't find any property to set height or width. May I know how to?
Decision_Shaped_Composite_Nodes.png ( 75 KB | 114 Downloads )

Title: Re: Html Node in Diagram !
Post by Lyubo on Aug 1st, 2019 at 7:25am
Hi,

From your screen grab it appears you've limited your Shape component inside a GridPanel column/row. Make sure that it isn't so and the Shape can actually span the entire size of the node. You can also attach your template, so we can have a look.

Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Aug 1st, 2019 at 7:39am
Hi,

Attached the template.

Regards,
Kannan
https://mindfusion.eu/Forum/YaBB.pl?action=downloadfile;file=diagram-node_template_002.txt ( 3 KB | 133 Downloads )

Title: Re: Html Node in Diagram !
Post by Lyubo on Aug 1st, 2019 at 8:08am
Hi,

Your shape is not child of the root panel, but is nested inside a child container, also you've limited the template width of your nodes to 22 by setting the column width of the root panel, and the column/row sizes of the child panel to 18 and 5 respectively - so the shape outline and your entire template are limited to a 22x23 size, regardless of the actual node size. If you want the template to span the entire size of the node, you need to remove those constraints.

Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Aug 2nd, 2019 at 10:24am
Hi,

     Apart from the main image in the composite node defined using template, there are 6 more small icons/text in the corners. Also these icons visibility is set during run time. That is why those row/column definitions and its sizes are found in the template. Please check the attached screen shot. The node shape can be rectangle, circle, diamond (decision) etc. Could you please suggest a better approach for this scenario? Thanks !

Please find the code in the below url,

https://drive.google.com/open?id=1btrb3Lnpbbu1xWjg4Q3PfY47t9Kg0_P_

Regards,
Kannan
Composite_Image_Node_With_Icons.png ( 84 KB | 115 Downloads )

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Jan 28th, 2020 at 6:19am
Hi Lyubo,

May I know whether this feature is available in the latest release? Thank you !

Regards,
Kannan


Lyubo wrote on Jul 3rd, 2019 at 12:46pm:
Hi,

This is not currently available in our JavaScript library. We have support for shape components for CompositeNode in our .NET product, and will try to port this functionality in upcoming release.

Regards,
Lyubo


Title: Re: Html Node in Diagram !
Post by Lyubo on Jan 28th, 2020 at 7:06am
Hi,

This feature is included in the latest JsDiagram v.3.3.4 release: https://mindfusion.eu/Forum/YaBB.pl?num=1570639838.

Regards,
Lyubo
MindFusion

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Mar 26th, 2020 at 4:57am
Hi Lyubo,

Hope you are fine? Stay Home ! Stay Safe !

I tried the same by removing those constraints, but still I've issue like the shape size is not same as that of the node size. Could you please check it? I've uploaded the sample in the below location.

https://drive.google.com/open?id=10sC2gocM2le7ZYfoLhjMZyLJbHALtdpn

Regards,
Kannan


Kannan Thirumal wrote on Aug 2nd, 2019 at 10:24am:
Hi,

� �� Apart from the main image in the composite node defined using template, there are 6 more small icons/text in the corners. Also these icons visibility is set during run time. That is why those row/column definitions and its sizes are found in the template. Please check the attached screen shot. The node shape can be rectangle, circle, diamond (decision) etc. Could you please suggest a better approach for this scenario? Thanks !

Please find the code in the below url,

https://drive.google.com/open?id=1btrb3Lnpbbu1xWjg4Q3PfY47t9Kg0_P_

Regards,
Kannan


Composite_Nodes_With_Shape.png ( 197 KB | 119 Downloads )

Title: Re: Html Node in Diagram !
Post by Lyubo on Mar 26th, 2020 at 8:34am
Hello, Kannan,

Hope you are well too!

As I advised you before, in order for the shape to work as an outline for the whole node, it can't be a nested child of a child component, it needs to be further up the hierarchy. Moving the outline shape in your template as a first child to the root container, outside of the nested GridPanel seems to achieve the results you're after.

Regards,
Lyubo
MindFusion
outline.png ( 133 KB | 126 Downloads )

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Mar 26th, 2020 at 10:28am
Hi Lyubo,

Thank you. I'll try this. Could you please send me the corrected template file?

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on Mar 26th, 2020 at 11:45am
Hi,

I just moved the Shape component up in the hierarchy, the template may need more tweaking depending on your requirements

Code (javascript):
{
  "component": "GridPanel",
  "id": "id",
  "rowDefinitions": ["*"],
  "columnDefinitions": ["*"],
  "children": [
  {
    "component": "Shape",
    "id": "Decision",
    "autoProperty": "true",
    "name": "OutlineShape",
    "pen": "gray",
    "brush": "Transparent",
    "isOutline": "true"
  },
  {      
    "component": "GridPanel",
    "stroke": "red",
    "rowDefinitions": ["*", "*"],
    "columnDefinitions": ["*", "*"],
    "children": [
    {
      "gridColumn": 0,
      "component": "Rect",
      "name": "Background",
      "pen": "Transparent",
      "strokeThickness": 0,
      "margin": "0, 0, 0, 0",
      "columnSpan": "2"
    },

    /* ... rest of the template below ... */


Regards,
Lyubo
MindFusion

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Mar 26th, 2020 at 12:14pm
Hi Lyubo,

That is working, Thanks !

But different nodes should be in different shapes like Rectangel, Circle, Decision etc. I like to set that during runtime like this. But didn't work. May I know why?

    var outlineShapeComponent = compNode.getComponent("OutlineShape") as any;

    if (outlineShapeComponent) {
          outlineShapeComponent.id = "Circle";
    }

Also, when selecting the circle shape node, the selection background also should be circle shape like in silverlight. For selection background I'm doing like this as per your suggestion earlier,

        {
          "gridColumn": 0,
          "component": "Rect",
          "name": "Background",
          "pen": "Transparent",
          "strokeThickness": 0,
          "margin": "0, 0, 0, 0",
          "columnSpan": "2"
        },
Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on Mar 26th, 2020 at 2:21pm
Hi,

Setting just the id of the Shape component won't work, you need to reinitialize the component with a new Shape instance. Since it has autoProperty set to true, you can set it via the parent node. In your particular case, it will be something like:


Code (javascript):
(compNode as any).setOutlineShape("Circle");


For your selection background component, you can try to use another Shape component instead of the Rect one.

Regards,
Lyubo
MindFusion

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Mar 27th, 2020 at 2:41pm
Hi Lyubo,

May I know which component I should use to set the background for Circle and Decision shape composite nodes. I tried few but didn't work.

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Apr 3rd, 2020 at 7:30am
Hi,

     May I know how to do this?

Regards,
Kannan


Kannan Thirumal wrote on Mar 27th, 2020 at 2:41pm:
Hi Lyubo,

May I know which component I should use to set the background for Circle and Decision shape composite nodes. I tried few but didn't work.

Regards,
Kannan


Title: Re: Html Node in Diagram !
Post by Lyubo on Apr 3rd, 2020 at 8:11am
Hi,

Sorry, missed that question. Setting the brush property of the outline Shape component already in your template should be enough to set the background. It's currently set to transparent, try with a color if it will work in your case.

Regards,
Lyubo
MindFusion

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Apr 3rd, 2020 at 8:49am
Hi Lyubo,

   It's ok, fine :-) Thank you ! I'll try this.

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Apr 3rd, 2020 at 3:19pm
Hi Lyubo,

I tried by setting color for brush like below, it worked.

    {
         "component": "Shape",
         "id": "Circle",
         "autoProperty": "true",
         "name": "OutlineShape",
         "pen": "Transparent",
         "brush": "blue",
         "isOutline": "true"
    },

But border for decision shaped nodes is not seen. Attached screen shot. Any idea why?

Also since I want to set dynamically, I tried the below code. But border is not shown.

  private setCompositeNodeShape(compNode: CompositeNode, diagramElement: DiagramElement) {

    var shape = diagramElement.shape.toString();

    (compNode as any).setOutlineShape(shape);

    this.setCompositeNodeBorderColor(compNode, diagramElement.borderColor);
  }

  private setCompositeNodeBorderColor(node: CompositeNode, borderColor: string) {

    var diagramElement = node.getTag().DataObject as DiagramElement;
    diagramElement.borderColor = borderColor;
    var background = node.getComponent("OutlineShape") as any;
    if (background) {
      background.brush = borderColor;
      background.strokeThickness = this.strokeThickness;
    }
    node.invalidate();
  }

May I know why?

Regards,
Kannan
No_Border_For_Decision_Shape_Composite_Nodes.png ( 463 KB | 134 Downloads )

Title: Re: Html Node in Diagram !
Post by Lyubo on Apr 6th, 2020 at 6:21am
Hi,

Setting stroke thickness to the shape component is not supported out of the box at this time. For the time being, you can achieve a similar effect by using 2 shape components - one at the back with your border color, the one at the front with your background color with set margins, so that the border behind is visible. Another approach would be to access the shapeRenderer object on your shape component and set its strokeThickness.

As for your Decision node problem from the screenshot, the issue is not apparent from the code you've posted. There must be something in your template or the way you set up your decision nodes that prevents the outline's background to be visible.

Regards,
Lyubo
MindFusion

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Apr 10th, 2020 at 5:10am
Hi Lyubo,

I tried with shapeRenderer like the below code and it worked. Thank you :-)

  private setCompositeNodeShape(compNode: CompositeNode, diagramElement: DiagramElement) {

    var shape = diagramElement.shape.toString();

    (compNode as any).setOutlineShape(shape);

    this.setCompositeNodeBorderColor(compNode, diagramElement.borderColor);
  }

  private setCompositeNodeBorderColor(node: CompositeNode, borderColor: string) {

    var background = node.getComponent("OutlineShape") as any;
    if (background) {
      //background.brush = borderColor;
      background.shapeRenderer.outlineBrush = borderColor;
      background.shapeRenderer.strokeThickness = borderColor.toLowerCase() === "transparent" ? 0 : this.strokeThickness;
    }
    //node.invalidate();
  }

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on Apr 10th, 2020 at 5:51am
Hi,

Great to hear :-)

Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Apr 10th, 2020 at 12:11pm
Hi,

I want to set shadow for this composite node.

Below is the solution suggested earlier,

https://mindfusion.eu/Forum/YaBB.pl?num=1566999672

I tried now like this in the outline shape but didn't work. May I know why?

    var background = node.getComponent("OutlineShape");
    if (background) {
        node.setShadowColor("Gray");
        background.shadow = node.createShadow();
        //background.shapeRenderer.shadow = background.shadow;
      }

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on Apr 13th, 2020 at 11:53am
Hi,

It appears the shadow gets clipped by the outline shape. Will will try to fix that in a following release. For the time being you can use the below override to draw the shadow yourself before the clip occurs:


Code (]var originalContainerDraw = MindFusion.Drawing.Container.prototype.draw;
MindFusion.Drawing.Container.prototype.draw = function(context, drawShadows, shadowsOnly)
{
    if (drawShadows != false)
    {
        if (this.item && this.item.root && this.item.root.clipBeforeTransform)
        {
            this.item.root.clipBeforeTransform.brush = "grey"; // can use shadow color from item or elsewhere
            this.item.root.clipBeforeTransform.shadow = this.item.createShadow();
            this.item.root.clipBeforeTransform.drawShadow(context);
        }
    }
    originalContainerDraw.apply(this, [context, drawShadows, shadowsOnly):

);
};


Regards,
Lyubo
MindFusion

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Apr 13th, 2020 at 2:35pm
Hi Lyubo,

To make this work, along with this code, I've to add the below code also,

    var background = node.getComponent("OutlineShape");
    if (background) {
      if (diagramElement.isShadowElement) {
        node.setShadowColor("Black");
        //background.shadow = node.createShadow();
      }
    }

But still apart from shadow, border also coming. But for some nodes, I need only shadow without any border similar to silverlight diagram. I've attached the screen shots for both silverlight and html5.

Regards,
Kannan
Shadow_Comparison.png ( 22 KB | 129 Downloads )

Title: Re: Html Node in Diagram !
Post by Lyubo on Apr 13th, 2020 at 3:43pm
Hi,

The above code should not affect any borders, maybe the effect you're seeing comes from something else?

Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Apr 13th, 2020 at 6:26pm
Hi,

I tried with only below code but still the border comes along with shadow,

    var originalContainerDraw = MindFusion.Drawing.Container.prototype["draw"];
    MindFusion.Drawing.Container.prototype["draw"] = function (context, drawShadows, shadowsOnly) {
      if (drawShadows != false) {
        if (this.item && this.item.root && this.item.root.clipBeforeTransform) {
          var diagramElement = this.item.getTag().DataObject as DiagramElement;
          if (diagramElement && diagramElement.isShadowElement) {
            this.item.setShadowColor("black");
            this.item.root.clipBeforeTransform.brush = "black"; // can use shadow color from item or elsewhere
            this.item.root.clipBeforeTransform.shadow = this.item.createShadow();
            this.item.root.clipBeforeTransform.drawShadow(context);
          }
        }
      }
      originalContainerDraw.apply(this, [context, drawShadows, shadowsOnly]);
    };

I've to add the below line along with the code you shared. Otherwise shadow didn't show.

            this.item.setShadowColor("black");

I've uploaded the code in the below url. Please have a look. Thank you !

https://drive.google.com/open?id=1KJPQeY098krl-vYwuzRVB9ehvmVvJ_DR

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on Apr 14th, 2020 at 1:55pm
Hi,

The effect you're seeing is not border, but it's actually the shadow which comes through the transparency of the node, since your image is smaller than the size of the node. You can observe the effect more clearly, if you remove the margins in the template of your MainImage component. So to fix this you can either decrease the size of the node to fit your image better, or increase the size of the image itself.

Regards,
Lyubo
MindFusion
shadow.png ( 6 KB | 131 Downloads )

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Apr 14th, 2020 at 2:30pm
Hi Lyubo,

I've set that margin because it is necessary to show the border color. Otherwise the border won't be proper. Please check the circle/rectangle node border in the attached screen shot.

Regards,
Kannan
Node_Margin.png ( 483 KB | 136 Downloads )

Title: Re: Html Node in Diagram !
Post by Lyubo on Apr 14th, 2020 at 3:38pm
Hi,

Pointing out the margin was just to demonstrate where the "border" is coming from. Since that's not a border, but actually it's the difference between the size of the image and size of the node itself, in order to control it, you need to adjust either your node or your image size.

Regards,
Lyubo
MindFusion

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Apr 14th, 2020 at 5:13pm
Hi,

As you said, I decreased the size of the node by setting margin in template to 0 and adjusting the node size by the below code,

    //node.setBounds(new Rect(diagramElement.x, diagramElement.y, diagramElement.width + 6, diagramElement.height + 6));
    node.setBounds(new Rect(diagramElement.x, diagramElement.y, diagramElement.width + 0, diagramElement.height + 0));

Shadow is coming proper, but now the border is not shown.

Regards,
Kannan
Shadow_Correct_But_No_Border.png ( 480 KB | 126 Downloads )

Title: Re: Html Node in Diagram !
Post by Lyubo on Apr 15th, 2020 at 6:24am
Hi,

Well, naturally, when you make the node the same size as the image, the background won't show through. Try with margin of 1 and increasing the size by 2.

[code]node.setBounds(new Rect(diagramElement.x, diagramElement.y, diagramElement.width + 2, diagramElement.height + 2));[/code]

Regards,
Lyubo
MindFusion

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Apr 15th, 2020 at 6:52am
Hi,

I tried by given 1 margin and 2 size but still the border is coming.

* This looks like the node has shadow and border. We can't have border like this, by default, because user change border during runtime.
* We set border for two reasons. 1. User can set border color for the node at runtime 2. On selection of node, we change the border color to highlight the selected node
* Also the border size is not enough since we need atleast +3 size

This is how our silverlight app behaves.

Regards,
Kannan
Shadow_And_Border_With_Image_Size+1.png ( 481 KB | 97 Downloads )

Title: Re: Html Node in Diagram !
Post by Lyubo on Apr 15th, 2020 at 11:06am
Hi,

For the time being, to draw a border, don't set the increased node bounds, set margin of the MainImage to 0 and add the following to your MindFusion.Drawing.Container.draw override:
[code]            var strokeColor = this.item.getSelected() ? "Orange" : "Transparent";
            this.item.root.clipBeforeTransform.pen = strokeColor;
            this.item.root.clipBeforeTransform.strokeThickness = 6;
            this.item.root.clipBeforeTransform.draw(context);[/code]

You can add it before or after the drawShadow call, depending on what z-index you want to draw the border. The color can come from your model, "Orange" and "Transparent" options above are just for demonstration. Hope this helps.

Regards,
Lyubo
MindFusion

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Apr 15th, 2020 at 12:59pm
Hi,

This seems working but,
* For decision shaped node, seems two border is shown
* When moving the node, the border is trailing for any node

This is the code I tried,

    var originalContainerDraw = MindFusion.Drawing.Container.prototype["draw"];
    MindFusion.Drawing.Container.prototype["draw"] = function (context, drawShadows, shadowsOnly) {
      if (drawShadows != false) {
        if (this.item && this.item.root && this.item.root.clipBeforeTransform) {
          var diagramElement = this.item.getTag().DataObject as DiagramElement;

          if (diagramElement) {
            if (diagramElement.isShadowElement) {
              this.item.setShadowColor("black");
              this.item.root.clipBeforeTransform.brush = "black"; // can use shadow color from item or elsewhere
              this.item.root.clipBeforeTransform.shadow = this.item.createShadow();
              this.item.root.clipBeforeTransform.drawShadow(context);
            }

            var strokeColor = diagramElement.borderColor;
            if (this.item.getSelected()) {
              strokeColor = "Orange";
            }
            this.item.root.clipBeforeTransform.pen = strokeColor;
            this.item.root.clipBeforeTransform.strokeThickness = 6;
            this.item.root.clipBeforeTransform.draw(context);
          }
        }
      }
      originalContainerDraw.apply(this, [context, drawShadows, shadowsOnly]);
    };

Regards,
Kannan
Trailing_Border.png ( 489 KB | 154 Downloads )

Title: Re: Html Node in Diagram !
Post by Lyubo on Apr 15th, 2020 at 1:21pm
Hi,

Indeed, noticed those two issues after posting the above solution. Both of these will be fixed in the next library release. For the time being, to fix the decision shape, call that somewhere in your code after creating the Diagram:

Code (](MindFusion.Diagramming.Shape.shapes as any).Decision.params.outline += " Z";[/code):
.

To fix the repainting issue, add the following to your Container.draw override, before drawing the shadow and the border:
[code]          if (this.invalidParent)
          {
            this.invalidParent.updateCanvasElements();
            this.invalidParent = null;
          }


Regards,
Lyubo
MindFusion

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Apr 21st, 2020 at 12:30pm
Hi Lyubo,

I tried this like below and the border and shadow works fine. Thank you !

    var originalContainerDraw = MindFusion.Drawing.Container.prototype["draw"];
    MindFusion.Drawing.Container.prototype["draw"] = function (context, drawShadows, shadowsOnly) {

      var defaultColor: string = "#03685A";

      if (drawShadows != false) {
        if (this.item && this.item.root && this.item.root.clipBeforeTransform) {

          if (this.invalidParent) {
            this.invalidParent.updateCanvasElements();
            this.invalidParent = null;
          }

          var diagramElement = this.item.getTag().dataObject as server.DiagramElement;

          if (diagramElement) {
            if (diagramElement.isShadowInstance) {
              this.item.setShadowColor("black");
              this.item.root.clipBeforeTransform.brush = "black"; // can use shadow color from item or elsewhere
              this.item.root.clipBeforeTransform.shadow = this.item.createShadow();
              this.item.root.clipBeforeTransform.drawShadow(context);
            }

            var strokeColor = diagramElement.borderColor === defaultColor ? "Transparent" : diagramElement.borderColor;;
            if (this.item.getSelected()) {
              strokeColor = "Orange";
            }
            this.item.root.clipBeforeTransform.pen = strokeColor;
            this.item.root.clipBeforeTransform.strokeThickness = 6;
            this.item.root.clipBeforeTransform.draw(context);
          }
        }
      }
      originalContainerDraw.apply(this, [context, drawShadows, shadowsOnly]);
    };

I'm setting the border at runtime (through a color picker). After setting the color to my data object, I tried by calling node.invalidate() method but the color is not immediately reflecting. Is there any other way to do that?

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on Apr 22nd, 2020 at 6:00am
Hi,

Can you send us the updated project with steps to reproduce, so we can investigate? Thank you!

Regards,
Lyubo
MindFusion

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Apr 27th, 2020 at 4:23pm
Hi Lyubo,

I've created a sample and uploaded in the below url,

https://drive.google.com/open?id=1w6_ZHEUU9_kNst9e6vxbcMc_-4riQJfH

Select an element, right click and then choose a color in the context menu.

The color selected is not reflected in the node immediately.

On clicking in the diagram, the border color shows up.

Regards,
Kannan
Node_BackColor_Not_Changing.png ( 410 KB | 124 Downloads )

Title: Re: Html Node in Diagram !
Post by Lyubo on Apr 28th, 2020 at 5:36am
Hello,

What I observe in your test is that the border color actually changes immediately, but you're drawing an orange border on node selection, which prevents you from seeing the new color until you click away, effectively deselecting the node and disabling the Orange selection border.

Regards,
Lyubo
MindFusion

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Apr 28th, 2020 at 6:37am
Hi Lyubo,

Yes, you are correct. I've fixed this by deselecting the node after color change like this. Thank you  :)

(node as CompositeNode).setSelected(false);

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on Apr 29th, 2020 at 12:30pm
Hi,

We've fixed the shadow clipping issue internally in the latest release. Can try out the updated scripts from the diagram-library and mindfusion-common packages.

Regards,
Lyubo
MindFusion

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Apr 29th, 2020 at 3:08pm
Hi Lyubo,

I took latest version and did below changes (and commented the draw handler code completely). Shadow looks better but border color not shown.

    if (diagramElement.isShadowElement) {
      //compNode.setShadowColor("Gray");
      //compNode.setShadowOffsetX(3);
      //compNode.setShadowOffsetY(3);
    }
    else {
      compNode.setShadowColor("Transparent");
      compNode.setShadowOffsetX(0);
      compNode.setShadowOffsetY(0);
    }

I tried with below code also, still border color not shown.

    if (diagramElement.borderColor) {
      compNode.setStroke(diagramElement.borderColor);
      compNode.setStrokeThickness(3);
    }

Could you please fix this setStroke issue also, it will be great help :-)

Then I uncommented draw handler and tried with below changes,

    var originalContainerDraw = MindFusion.Drawing.Container.prototype["draw"];
    MindFusion.Drawing.Container.prototype["draw"] = function (context, drawShadows, shadowsOnly) {
      if (drawShadows != false) {
        if (this.item && this.item.root && this.item.root.clipBeforeTransform) {

          if (this.invalidParent) {
            this.invalidParent.updateCanvasElements();
            this.invalidParent = null;
          }

          var diagramElement = this.item.getTag().DataObject as DiagramElement;

          if (diagramElement) {
            //if (diagramElement.isShadowElement) {
            //  this.item.setShadowColor("black");
            //  this.item.root.clipBeforeTransform.brush = "black"; // can use shadow color from item or elsewhere
            //  this.item.root.clipBeforeTransform.shadow = this.item.createShadow();
            //  this.item.root.clipBeforeTransform.drawShadow(context);
            //}

            var strokeColor = diagramElement.borderColor;
            if (this.item.getSelected()) {
              strokeColor = "Orange";
            }
            this.item.root.clipBeforeTransform.pen = strokeColor;
            this.item.root.clipBeforeTransform.strokeThickness = 6;
            this.item.root.clipBeforeTransform.draw(context);
          }
        }
      }
      originalContainerDraw.apply(this, [context, drawShadows, shadowsOnly]);
    };

1. Shadow and Border color overlap (Circle-5)
2. Shadow is not as good as before (when draw is commented)

May I know why? Attached the screen shots.

Regards,
Kannan
Composite_Node_Shadow_Shown_Without_Draw.png ( 147 KB | 119 Downloads )
Composite_Node_Shadow_Shown_With_Draw.png ( 138 KB | 119 Downloads )

Title: Re: Html Node in Diagram !
Post by Lyubo on Apr 30th, 2020 at 9:54am
Hi,

In your example you need to call the original draw method before your custom draw to place the shadow behind the border.

But maybe this won't be needed anymore, we've added a strokeThickness property to the Shape component that you could use;and we've also fixed the nodeDeleting keydown issue you've been having. Will let you know when the package is published.

To use the new strokeThickness property you can set it via the Shape component template and in code by calling shapeComponent.setStrokeThickness. The color of the border comes from the Shape.pen property.

Regards,
Lyubo
MindFusion

Title: Re: Html Node in Diagram !
Post by Lyubo on May 4th, 2020 at 8:19am
Hi,

We've published the updated scripts on npm. Can try it out and let us know if it works better for you.

Regards,
Lyubo
MindFusion

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on May 4th, 2020 at 11:23am
Hi Lyubo,

Thank you. I tried with the below code and completely commented the draw handler.

      var background = node.getComponent("OutlineShape") as any;
      if (background) {

        background.strokeThickness = this.strokeThickness;
        background.pen = borderColor;
      }

      node.invalidate();

But this didn't work. Am I missing anything? I've uploaded the sample. Could you please have a look?

https://drive.google.com/open?id=1sX7UUpxQN6NCOiK_kMxC0YRhYlAgRUkp

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on May 4th, 2020 at 12:27pm
Hi,

The thicker border is there, but it's covered by the image, since the stroke thickness is directed inwards to be contained in the node's dimensions. So to achieve the effect, you need to revert the old workaround for the MainImage margins and size we did before:


Code (=javascript):

// margin of "3" for MainImage in the node's template

// revert back to this in createCompositeNode method
node.setBounds(new Rect(diagramElement.x, diagramElement.y, diagramElement.width + 6, diagramElement.height + 6));


Now the shadow will be seen (like in Circle-1 in the screenshot), so you may want to consider applying a white stroke instead of transparent one.

Regards,
Lyubo
MindFusion

borders.png ( 27 KB | 136 Downloads )

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on May 4th, 2020 at 1:12pm
Hi Lyubo,

I tried that two changes but didn't work. Am I miss anything else?

Regards,
Kannan
https://mindfusion.eu/Forum/YaBB.pl?action=downloadfile;file=diagram-node_template_003.txt ( 2 KB | 138 Downloads )
https://mindfusion.eu/Forum/YaBB.pl?action=downloadfile;file=diagram_component.ts ( 99 KB | 132 Downloads )

Title: Re: Html Node in Diagram !
Post by Lyubo on May 4th, 2020 at 1:43pm
Ah yes, missed out one bit, in your setCompositeNodeBorderColor method, you need to call the setters of the shape properties - namely setStrokeThickness and setPen.

Code (=javascript):
      //...
      var background = node.getComponent("OutlineShape") as any;
      if (background) {

        background.setStrokeThickness(this.strokeThickness);
        background.setPen(borderColor);
      }
      // ...


Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on May 4th, 2020 at 2:02pm
Hi Lyubo,

After changing those fields to set methods, it works fine but the white border (because of shadow) doesn't look good. Is there any other option?

Regards,
Kannan
Node_White_Shadow.png ( 172 KB | 154 Downloads )

Title: Re: Html Node in Diagram !
Post by Lyubo on May 4th, 2020 at 2:22pm
Hi,

Both the shadow and the stroke thickness will respect the node's dimensions, which is the general use case.

If in your case the white stroke doesn't look good, and you don't want to go back to custom drawing the border like it was before, you could set a margin to the shape of nodes which aren't supposed to have a border, so the shadow shrinks too; and removing it when there is selection. That approach can be seen in the attached image.

Regards,
Lyubo
borders_001.png ( 27 KB | 154 Downloads )

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on May 4th, 2020 at 4:06pm
Hi Lyubo,

I did this workaround to fix this,

  private setCompositeNodeBorderColor(node: CompositeNode, borderColor: string, isSelection: boolean) {

    var background = node.getComponent("OutlineShape") as any;
    if (background) {

      var diagramElement = node.getTag().DataObject as DiagramElement;
      background.setStrokeThickness(this.strokeThickness);
      var borderColor2 = (isSelection || !diagramElement.isShadowElement) ? borderColor : "Transparent";
      background.setPen(borderColor2);

      if (diagramElement.isShadowElement) {

        if (isSelection) {

          node.setBounds(new Rect(diagramElement.x, diagramElement.y, diagramElement.width + 6, diagramElement.height + 6));

          var mainImageComponent = node.getComponent("MainImage") as any;
          mainImageComponent.margin.left = 3;
          mainImageComponent.margin.top = 3;
          mainImageComponent.margin.right = 3;
          mainImageComponent.margin.bottom = 3;
        }
        else {

          node.setBounds(new Rect(diagramElement.x + 3, diagramElement.y + 3, diagramElement.width + 0, diagramElement.height + 0));

          var mainImageComponent = node.getComponent("MainImage") as any;
          mainImageComponent.margin.left = 0;
          mainImageComponent.margin.top = 0;
          mainImageComponent.margin.right = 0;
          mainImageComponent.margin.bottom = 0;
        }
      }
    }

    node.invalidate();
  }

But still I could see a space in between the image and border when I do zoom.

Regards,
Kannan
Space_In_Border_On_Zoom.png ( 279 KB | 148 Downloads )

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on May 9th, 2020 at 12:57pm
Hi,

In our app, we show extra (small) icons in the diagram node. Mostly this will be left side/right side of the node. For Rectangle shape, it works fine. But for the Decision shaped node, I'm facing an issue. Since we set shape for the whole node, the extra icons are not showing properly. It works fine for same data in silverlight app.

I think it is better if we set the shape for the main image only. Is there any way to fix this?

Regards,
Kannan
Silverlight_Node_Extra_Icons.png ( 4 KB | 156 Downloads )
Html_Node_Extra_Icons.png ( 5 KB | 147 Downloads )

Title: Re: Html Node in Diagram !
Post by Lyubo on May 11th, 2020 at 5:49am
Hi,

When using the isOutline property of the Shape component, all the contents of the template will clip to the shape's outline. For a following release, we can add a property that let's you turn off the clip.

Regards,
Lyubo
MindFusion

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on May 11th, 2020 at 6:16am
Hi Lyubo,

Thank you! That will be a great help !

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Jun 15th, 2020 at 5:17pm
Hi Lyubo,

     May I know when this feature will be available? Looking forward for that.

Regards,
Kannan


Lyubo wrote on May 11th, 2020 at 5:49am:
Hi,

When using the isOutline property of the Shape component, all the contents of the template will clip to the shape's outline. For a following release, we can add a property that let's you turn off the clip.

Regards,
Lyubo
MindFusion


Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Jul 29th, 2020 at 5:29am
Hi,

     Looking forward for this release.

Regards,
Kannan


Lyubo wrote on May 11th, 2020 at 5:49am:
Hi,

When using the isOutline property of the Shape component, all the contents of the template will clip to the shape's outline. For a following release, we can add a property that let's you turn off the clip.

Regards,
Lyubo
MindFusion


Title: Re: Html Node in Diagram !
Post by Lyubo on Aug 16th, 2020 at 6:31am
Hi,

This change is included in the latest JavaScript suite here; a standalone version is also published to npm: https://www.npmjs.com/package/diagram-library.

There's a new clipToOutline property added to CompositeNode that lets you specify whether contents of the node's template will clip to a shape outline or not.

Regards,
Lyubo
MindFusion

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Aug 18th, 2020 at 8:58am
Hi Lyubo,

Thank you, I'll try this.

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Nov 2nd, 2020 at 6:47am
Hi,

I've a hierarchical diagram of composite nodes. In each node the expander icon is not shown. If I construct the diagram with shape nodes, the expander icon is showing up in the right side of the node. Please check the attached images.

Regards,
Kannan
ShapeNode_Diagram.png ( 171 KB | 98 Downloads )
CompositeNode_Diagram.png ( 202 KB | 105 Downloads )

Title: Re: Html Node in Diagram !
Post by Lyubo on Nov 2nd, 2020 at 7:16am
Hi,

Calling setExpandable(true) on the nodes, should enable the expander manipulator.

Regards,
Lyubo
MindFusion

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Nov 2nd, 2020 at 7:29am
Hi Lyubo,

I tried this earlier but icon is still not showing. Please check the uploaded sample in the below link,

https://drive.google.com/file/d/1ZMNJCweU3cotRokOLEMb5ndAQoXbsZRX/view?usp=sharing

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on Nov 2nd, 2020 at 7:55am
Hi,

Can you provide a link that doesn't require google id?

Also, it appears this particular feature was added in the latest release. Try updating your packages and try if that fixes it for you.

Thanks,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Nov 2nd, 2020 at 8:03am
Hi Lyubo,

Please try this,

https://drive.google.com/file/d/1ZMNJCweU3cotRokOLEMb5ndAQoXbsZRX/view?usp=sharing

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on Nov 2nd, 2020 at 8:28am
That link requires sign-in too :) Google Drive was fine, but can you please provide a link that doesn't require sign-in, like in the past.

The updated link from the edit works now, thanks.

Also, did you try with the latest release? Don't know if you saw my edit above.

Regards,
Lyubo

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Nov 2nd, 2020 at 11:34am
Hi Lyubo,

I tried latest version : "diagram-library": "^3.5.0",

But still that expander icon is not showing. That google drive link should work now. Please check it.

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on Nov 2nd, 2020 at 12:30pm
Hi,

My bad, apparently the fix was applied after the release was already out. It will be fixed in the next official build, and for the time being you can use the following workaround:


Code (]var originalUpdateCanvasElements = CompositeNode.prototype["updateCanvasElements"):
;
CompositeNode.prototype["updateCanvasElements"] = function() {

    originalUpdateCanvasElements.apply(this, []);

    this.addManipulatorVisuals(this.graphicsContainer.content);

    if (this.onUpdateVisuals)
        this.onUpdateVisuals(this);

};


Regards,
Lyubo
MindFusion

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Nov 3rd, 2020 at 4:31am
With this code, it works fine. Thank you Lyubo !

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Nov 11th, 2020 at 4:46am
Hi Lyubo,

I tried by setting "clipToOutline":"false" but still the small icons are not showing.

Could you please check the attached screen shot and template?

Regards,
Kannan


Lyubo wrote on Aug 16th, 2020 at 6:31am:
Hi,

This change is included in the latest JavaScript suite here; a standalone version is also published to npm: https://www.npmjs.com/package/diagram-library.

There's a new clipToOutline property added to CompositeNode that lets you specify whether contents of the node's template will clip to a shape outline or not.

Regards,
Lyubo
MindFusion


https://mindfusion.eu/Forum/YaBB.pl?action=downloadfile;file=diagram-node_template_003.txt ( 2 KB | 138 Downloads )
CompositeNode_ClipToOutline.png ( 175 KB | 127 Downloads )

Title: Re: Html Node in Diagram !
Post by Lyubo on Nov 11th, 2020 at 9:13am
Hi,

It works for me with the latest packages (v. 3.5.1) in the sample application you've sent use before (please refer to the attached image).

Make sure you're not applying the clip yourself from an override - maybe in a Container.draw or CompositeNode.updateCanvasElements.

Regards,
Lyubo
MindFusion
clipToOutline.png ( 65 KB | 115 Downloads )

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Nov 17th, 2020 at 9:06am
Hi Lyubo,

I tried the same by setting "clipToOutline":"false" in the template. I didn't do any other changes. I've take the latest diagram library version 3.5.1 and mind fusion common library version 1.2.1. But still it didn't work. May I know what I missed?

Regards,
Kannan
CompositeNode_Template.png ( 55 KB | 105 Downloads )
CompositeNode_App.png ( 202 KB | 134 Downloads )

Title: Re: Html Node in Diagram !
Post by Lyubo on Nov 17th, 2020 at 1:45pm
Hi,

I should've been more clear - the clipToOutline is a property of CompositeNode, it's not part of the Shape component template - https://www.mindfusion.eu/onlinehelp/jsdiagram/index.htm?M_MindFusion_Diagramming_CompositeNode_setClipToOutline_1_Boolean.htm.

Try setting it for your custom composite nodes, and it should work.

In addition to that, since you've upgraded to 3.5.1, you may need to make some adjustments to your overall diagram setup. As outlined in the What's New topic, you may need to set MindFusion.CompatConfig.gridLayout to false in order to keep your custom layout. You may also need to turn off virtual scroll too, since now it's on by default.

Please note that the changes above don't affect clipToOutline, so just setting the property on your nodes should be enough.

Regards,
Lyubo
MindFusion

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Dec 22nd, 2020 at 11:19am
Hi,

I tried the attached Decision.png. But it is not clipped for this icon. This icon dont have a transparent border but this icon works fine in silverlight app.

Also on select, it is trying to have border in decision shape but the border is not shown.

May I know why these behaviours?

I've uploaded the sample here : [deleted]

Regards,
Kannan
Decision.png ( 3 KB | 96 Downloads )
Decision-Not-Clipped.png ( 6 KB | 100 Downloads )
Decision-On-Select.png ( 7 KB | 100 Downloads )

Title: Re: Html Node in Diagram !
Post by Lyubo on Dec 22nd, 2020 at 1:08pm
Hi,

The effects you're seeing are a result from not using clip to the outline, in order to show the small auxiliary images from the template and the fact that the image file has a solid color fill around the outlines.

Your options are 1) easiest would be to use a transparent image file and continue with the current template with no-clip to show your small icons; 2) clip to the shape outline and change your template to not include the small images and use attached nodes instead; 3) we can try and think of additional ways to clip to the paths of individual components inside a template for a future release, but we can't provide any timeframe for when such feature could be available.

Regards,
Lyubo
MindFusion

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Dec 24th, 2020 at 10:42am
Hi Lyubo,

I've fixed this issue by using transparent background image. Thank you  :)

I'm facing another issue. I'm exporting the diagram image with high resolution by using this code,

this.diagram.setZoomFactor(1000);

You have suggested this in this thread earlier : https://mindfusion.eu/Forum/YaBB.pl?num=1547792559/19#19

But after applying the latest diagram libary, that is not properly exporting. I mean only some part of diagram is exported.

You can try this in the sample I send earlier this week. In that I've commented the "Export Diagram With High Resolution" button.

Could you please check it? Thanks !

Regards,
Kannan

Title: Re: Html Node in Diagram !
Post by Lyubo on Dec 26th, 2020 at 11:03am
Hi,

Since version 3.5.1 the Diagram.VirtualScroll property is turned on by default - more info here: https://www.mindfusion.eu/onlinehelp/jsdiagram/index.htm?CC_What_s_New_in_this_Release_15.htm.

You can toggle it back to off just before exporting your image and then turn it back on after. This should result in the full diagram document to be saved.

Regards,
Lyubo
MindFusion

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Jan 4th, 2021 at 9:43am
Hi Lyubo,

Wishing You a Happy New Year  :)

I fixed this using setVirtualScroll() method. It works fine.

Looks like the links are still thin. Do you feel like that?

I've uploaded the high resolution image in this url: https://drive.google.com/file/d/17VEccAqdyYbWZvpo8JiHWCnUXZc7pg-t/view?usp=shari

Regards,
Kannan
NormalResolutionExport.png ( 73 KB | 105 Downloads )

Title: Re: Html Node in Diagram !
Post by Lyubo on Jan 4th, 2021 at 10:50am
Hi,

Happy New Year to you too!

The links thickness may appear thinner, because of a change we introduced in v.3.5.1 (API Changes section) - https://www.mindfusion.eu/onlinehelp/jsdiagram/index.htm?CC_What_s_New_in_this_Release_15.htm.

You can try setting MindFusion.Diagramming.CompatConfig.pixelThickness = true to use the old pixel thickness again; or adjust your thickness values to bigger widths to correspond to the diagram's MeasureUnit in use in your application.

Regards,
Lyubo
MindFusion

Title: Re: Html Node in Diagram !
Post by Kannan Thirumal on Jan 20th, 2021 at 5:39pm
Hi Lyubo,

I've done shadow as in the sample uploaded here: https://drive.google.com/file/d/1E2sHrB9_YOJTeapvq1f6PLNexG60nO7Y/view?usp=sharing

I've attached the screen shot of the shadow element. The yellow color selection highlight is not proper (not in yellow color) on the right-bottom of the circle.

May I know how to fix this?

Regards,
Kannan


Lyubo wrote on May 4th, 2020 at 2:22pm:
Hi,

Both the shadow and the stroke thickness will respect the node's dimensions, which is the general use case.

If in your case the white stroke doesn't look good, and you don't want to go back to custom drawing the border like it was before, you could set a margin to the shape of nodes which aren't supposed to have a border, so the shadow shrinks too; and removing it when there is selection. That approach can be seen in the attached image.

Regards,
Lyubo


Shadow_Element.png ( 7 KB | 88 Downloads )

Title: Re: Html Node in Diagram !
Post by Lyubo on Jan 21st, 2021 at 7:43am
Hi,

This happens because in your Container.draw override you're calling your custom drawing code before the original rendering, so the "selection" is drawn under the default shadow. Moving your originalContainerDraw before the custom drawing, should resolve this (attached image from my test after this change).

Regards,
Lyubo
MindFusion
circlewithborder.png ( 8 KB | 83 Downloads )

The MindFusion Forums » Powered by YaBB 2.6.11!
YaBB Forum Software © 2000-2024. All Rights Reserved.