Page Index Toggle Pages: 1 ... 4 5 [6] 7 8 ... 10 Send TopicPrint
Very Hot Topic (More than 25 Replies) Html Node in Diagram ! (Read 46814 times)
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #75 - Apr 3rd, 2020 at 3:19pm
Print Post  
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
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #76 - Apr 6th, 2020 at 6:21am
Print Post  
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
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #77 - Apr 10th, 2020 at 5:10am
Print Post  
Hi Lyubo,

I tried with shapeRenderer like the below code and it worked. Thank you Smiley

  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
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #78 - Apr 10th, 2020 at 5:51am
Print Post  
Hi,

Great to hear Smiley

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #79 - Apr 10th, 2020 at 12:11pm
Print Post  
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
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #80 - Apr 13th, 2020 at 11:53am
Print Post  
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
Select All
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
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #81 - Apr 13th, 2020 at 2:35pm
Print Post  
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 )
Shadow_Comparison.png
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #82 - Apr 13th, 2020 at 3:43pm
Print Post  
Hi,

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

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #83 - Apr 13th, 2020 at 6:26pm
Print Post  
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
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #84 - Apr 14th, 2020 at 1:55pm
Print Post  
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 )
shadow.png
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #85 - Apr 14th, 2020 at 2:30pm
Print Post  
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 )
Node_Margin.png
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #86 - Apr 14th, 2020 at 3:38pm
Print Post  
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
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #87 - Apr 14th, 2020 at 5:13pm
Print Post  
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 )
Shadow_Correct_But_No_Border.png
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #88 - Apr 15th, 2020 at 6:24am
Print Post  
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
Select All
node.setBounds(new Rect(diagramElement.x, diagramElement.y, diagramElement.width + 2, diagramElement.height + 2)); 



Regards,
Lyubo
MindFusion
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #89 - Apr 15th, 2020 at 6:52am
Print Post  
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
  

Back to top
 
IP Logged
 
Page Index Toggle Pages: 1 ... 4 5 [6] 7 8 ... 10
Send TopicPrint