Page Index Toggle Pages: 1 ... 3 4 [5] 6 7 ... 10 Send TopicPrint
Very Hot Topic (More than 25 Replies) Html Node in Diagram ! (Read 46824 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 #60 - Aug 1st, 2019 at 7:39am
Print Post  
Hi,

Attached the template.

Regards,
Kannan
  

diagram-node_template_002.txt ( 3 KB | 133 Downloads )
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #61 - Aug 1st, 2019 at 8:08am
Print Post  
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
  
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 #62 - Aug 2nd, 2019 at 10:24am
Print Post  
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
« Last Edit: Aug 2nd, 2019 at 2:13pm by Kannan Thirumal »  

Composite_Image_Node_With_Icons.png ( 84 KB | 115 Downloads )
Composite_Image_Node_With_Icons.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 #63 - Jan 28th, 2020 at 6:19am
Print Post  
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

  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #64 - Jan 28th, 2020 at 7:06am
Print Post  
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
  
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 #65 - Mar 26th, 2020 at 4:57am
Print Post  
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 )
Composite_Nodes_With_Shape.png
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #66 - Mar 26th, 2020 at 8:34am
Print Post  
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 )
outline.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 #67 - Mar 26th, 2020 at 10:28am
Print Post  
Hi Lyubo,

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

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 #68 - Mar 26th, 2020 at 11:45am
Print Post  
Hi,

I just moved the Shape component up in the hierarchy, the template may need more tweaking depending on your requirements
Code (Javascript)
Select All
{
  "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
  
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 #69 - Mar 26th, 2020 at 12:14pm
Print Post  
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
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #70 - Mar 26th, 2020 at 2:21pm
Print Post  
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)
Select All
(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
  
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 #71 - Mar 27th, 2020 at 2:41pm
Print Post  
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
« Last Edit: Mar 31st, 2020 at 11:59am by Kannan Thirumal »  
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 #72 - Apr 3rd, 2020 at 7:30am
Print Post  
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

  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #73 - Apr 3rd, 2020 at 8:11am
Print Post  
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
  
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 #74 - Apr 3rd, 2020 at 8:49am
Print Post  
Hi Lyubo,

   It's ok, fine Smiley Thank you ! I'll try this.

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