Page Index Toggle Pages: 1 ... 6 7 [8]  Send TopicPrint
Very Hot Topic (More than 25 Replies) Html Node in Diagram ! (Read 10929 times)
Lyubo
Senior Member
****
Online


MindFusion team

Posts: 480
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #105 - May 4th, 2020 at 1:43pm
Print Post  
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
Select All
      //...
      var background = node.getComponent("OutlineShape") as any;
      if (background) {

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



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


I Love Mind Fusion Diagram
:-)

Posts: 209
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #106 - May 4th, 2020 at 2:02pm
Print Post  
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 | 26 Downloads )
Node_White_Shadow.png
Back to top
 
IP Logged
 
Lyubo
Senior Member
****
Online


MindFusion team

Posts: 480
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #107 - May 4th, 2020 at 2:22pm
Print Post  
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 | 26 Downloads )
borders_001.png
Back to top
 
IP Logged
 
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 209
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #108 - May 4th, 2020 at 4:06pm
Print Post  
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 | 25 Downloads )
Space_In_Border_On_Zoom.png
Back to top
 
IP Logged
 
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 209
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #109 - May 9th, 2020 at 12:57pm
Print Post  
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 | 26 Downloads )
Silverlight_Node_Extra_Icons.png
Html_Node_Extra_Icons.png ( 5 KB | 25 Downloads )
Html_Node_Extra_Icons.png
Back to top
 
IP Logged
 
Lyubo
Senior Member
****
Online


MindFusion team

Posts: 480
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #110 - May 11th, 2020 at 5:49am
Print Post  
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
  
Back to top
 
IP Logged
 
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 209
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #111 - May 11th, 2020 at 6:16am
Print Post  
Hi Lyubo,

Thank you! That will be a great help !

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


I Love Mind Fusion Diagram
:-)

Posts: 209
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #112 - Jun 15th, 2020 at 5:17pm
Print Post  
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

  
Back to top
 
IP Logged
 
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 209
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #113 - Jul 29th, 2020 at 5:29am
Print Post  
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

  
Back to top
 
IP Logged
 
Lyubo
Senior Member
****
Online


MindFusion team

Posts: 480
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #114 - Aug 16th, 2020 at 6:31am
Print Post  
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
  
Back to top
 
IP Logged
 
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 209
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #115 - Aug 18th, 2020 at 8:58am
Print Post  
Hi Lyubo,

Thank you, I'll try this.

Regards,
Kannan
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1 ... 6 7 [8] 
Send TopicPrint