Page Index Toggle Pages: 1 Send TopicPrint
Hot Topic (More than 10 Replies) EditComponent CompositeNode (Read 4953 times)
DSI
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 16
Joined: May 21st, 2020
EditComponent CompositeNode
Jun 4th, 2020 at 8:12pm
Print Post  
Is it possible to have and Editable component in a compositeNode?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: EditComponent CompositeNode
Reply #1 - Jun 5th, 2020 at 8:47am
Print Post  
EditComponent from WinForms version won't be available in JS soon. For time being you can edit CompositeNode's Text components by double-clicking when AllowInplaceEdit is enabled. Alternatively you can initiate editing from single-click or other events by calling diagram.beginEdit(compositeNode, point).

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
DSI
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 16
Joined: May 21st, 2020
Re: EditComponent CompositeNode
Reply #2 - Jun 5th, 2020 at 3:42pm
Print Post  
Can I enable AllowInplaceEdit on individual components or only on the DiagramView (i.e. all node components)?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: EditComponent CompositeNode
Reply #3 - Jun 9th, 2020 at 6:44am
Print Post  
It's for all items. You could try calling endEdit from enterInplaceEditMode event handler if item should not allow editing, or keep AllowInplaceEdit  disabled and call beginEdit from double/click event handlers.
  
Back to top
 
IP Logged
 
DSI
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 16
Joined: May 21st, 2020
Re: EditComponent CompositeNode
Reply #4 - Jun 17th, 2020 at 8:56pm
Print Post  
Trying to call beginEdit from a click event but it isn't working. I think I'm trying to enable it incorrectly.

CompositeNode Template portion:
Code
Select All
{
    ""component"": ""Text"",
    ""name"": ""Details"",
    ""gridRow"": 3,
    ""gridColumn"": 1,
    ""columnSpan"": 6,
    ""autoProperty"": true,
    ""text"": ""details"",
    ""font"": ""Arial 3"",
    ""clickHandler"": ""onEditClick""
}
 



Here is the corresponding JS function (I feel like this is what I'm calling incorrectly):
Code
Select All
function onEditClick(diagram, eventArgs) {
        diagram.beginEdit(compositeNode, eventArgs.getMousePosition());
}
 



This is all in Index.cshtml of the tutorial8 mvc solution. Thank you!
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: EditComponent CompositeNode
Reply #5 - Jun 18th, 2020 at 6:07am
Print Post  
clickHandler is supported only for button components at this time. Try subscribing to nodeClicked event and calling diagram.beginEdit(args.node, args.mousePosition);

Regards,
Slavcho
  
Back to top
 
IP Logged
 
DSI
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 16
Joined: May 21st, 2020
Re: EditComponent CompositeNode
Reply #6 - Jun 19th, 2020 at 7:25pm
Print Post  
I currently have this in place correctly (I think):

Code
Select All
function onLoaded(sender) {

        diagram = sender;

        diagram.addEventListener(Events.nodeClicked, onEditClick);

        var original = OrgChartNode.prototype.updateCanvasElements;
        OrgChartNode.prototype.updateCanvasElements = function () {
            original.apply(this, []);
            var back = this.getComponent('Frame');
            back.setBrush(this.getBrush());
        }
    }
 



but I keep getting the attached error in my browser console.

I have also attached my MindFusion.Diagramming.js file (Had to split this into two separate files and zip them so that they were under the 300kb attachment limit)
  

MindFusion_Diagramming_1.zip ( 54 KB | 264 Downloads )
MindFusion_Diagramming_2.zip ( 258 KB | 317 Downloads )
ReferenceError.png ( 17 KB | 184 Downloads )
ReferenceError.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: EditComponent CompositeNode
Reply #7 - Jun 22nd, 2020 at 7:17am
Print Post  
Use MindFusion.Diagramming.Events instead, or add this -

Code
Select All
var Events = MindFusion.Diagramming.Events; 



Regards,
Slavcho
  
Back to top
 
IP Logged
 
DSI
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 16
Joined: May 21st, 2020
Re: EditComponent CompositeNode
Reply #8 - Jun 22nd, 2020 at 7:18pm
Print Post  
I still am not able to get edit or Hyperlink (https://mindfusion.eu/Forum/YaBB.pl?num=1590780726/new) to work.  Please have a look at my index.cshtml posted below.  Thank you.

Code
Select All
@using System.Drawing
@using MindFusion.Drawing
@using MindFusion.Diagramming
@using MindFusion.Diagramming.Mvc
@using MindFusion.Diagramming.Manipulators
@using MindFusion.Diagramming.Fluent;
@using MindFusion.Diagramming.Layout.Fluent;

@Scripts.Render("~Scripts/MindFusion.Diagramming.js");

@{
    string template = @"{
""component"": ""SimplePanel"",
""children"":
[
{
""component"": ""Shape"",
""name"": ""Frame"",
""shape"": ""{0}"",
""pen"": ""black"",
""isOutline"": true,
""autoProperty"": true
},
{
""component"": ""Border"",
""padding"": ""2""
},
{
""component"": ""GridPanel"",
""columnDefinitions"": [""Auto"",""Auto"",""Auto"",""Auto"",""Auto"",""Auto"",""Auto"",""Auto"",""Auto"",""Auto""],
""rowDefinitions"": [""Auto"",""Auto"",""Auto"",""Auto""],
""children"":
[
{
""gridRow"": 0,
""gridColumn"":7,
""columnSpan"": 3,
""component"": ""Text"",
""name"": ""Title"",
""autoProperty"": true,
""text"": ""title"",
""font"": ""Arial bold"",
""horizontalAlignment"": ""Near""
},
{
""gridRow"": 0,
""gridColumn"":9,
""columnSpan"": 1,
""component"": ""ButtonComponent"",
""imageLocation"": ""../Content/close.png"",
""imageAlign"": ""Center"",
""cornerRadius"": 3.5,
""autoProperty"": true,
""clickHandler"": ""onDeleteClick""
},
{
""component"": ""Text"",
""name"": ""FullName"",
""gridRow"": 1,
""gridColumn"": 0,
""rowSpan"": 2,
""columnSpan"": 5,
""verticalAlignment"": ""Center"",
""enableStyledText"": true,
""autoProperty"": true,
""text"": ""full name""
},
{
""component"": ""Text"",
""name"": ""Details"",
""gridRow"": 3,
""gridColumn"": 1,
""columnSpan"": 6,
""autoProperty"": true,
""text"": ""details"",
""font"": ""Arial 3""
}
]
}
]
}
";

    DiagramView view = new DiagramView("diagramView1");
    //view.AllowInplaceEdit = true;
    view.SetCustomNodeType(typeof(OrgChartNode));
    view.Diagram.UndoManager.UndoEnabled = true;
    // register current session
    view.RegisterSession(Session);
    // register custom item type
    view.RegisterItemType(typeof(OrgChartNode), "OrgChartNode", "OrgChartNode", 100, template);
    view.LoadFromJson(Request.Form["diagramView1_PostData"]);
    ViewBag.DiagramView = view;

    NodeListView nodeView = new NodeListView("nodeListView1");
    nodeView.NodeSize = new SizeF(96, 40);
    nodeView.DefaultNodeSize = new SizeF(60, 25);
    // register current session
    nodeView.RegisterSession(Session);
    nodeView.LoadFromJson(Request.Form["nodeListView1_PostData"]);
    ViewBag.NodeListView = nodeView;

    if (!IsPost)
    {
        Diagram diagram = view.Diagram;

        var node1 = new OrgChartNode();
        node1.Bounds = new RectangleF(25, 15, 60, 25);
        node1.Title = "Step 1";
        node1.FullName = "<a href='http://www.google.com'>Link</a>";
        node1.Details = "Edit Me.";
        node1.Frame = "Rectangle";
        node1.Brush = new MindFusion.Drawing.SolidBrush(Color.FromArgb(50, Color.ForestGreen));
        node1.HandlesStyle = HandlesStyle.SquareHandles2;
        diagram.Nodes.Add(node1);
        nodeView.AddNode(node1);

    }
}

@using (Html.BeginForm())
{

    <div class="controls">
        <input type="submit" name="submitButton" value="submit" />
        <button type="button" onclick="diagram.copyToClipboard()">copy</button>
        <button type="button" onclick="diagram.cutToClipboard()">cut</button>
        <button type="button" onclick="diagram.pasteFromClipboard(5, 5)">paste</button>
        <button type="button" onclick="diagram.undo()">undo</button>
        <button type="button" onclick="diagram.redo()">redo</button>
    </div>

    @Html.NodeListView(((NodeListView)ViewBag.NodeListView), new { style = "width:100px; height:700px;" })

    @Html.DiagramView(((DiagramView)ViewBag.DiagramView).ControlLoadedScript("onLoaded").NodePointedScript("onNodePoint"),
    new { style = "width:800px; height:700px; position:relative;  top:-700px; left:120px;" })

    ItemTypeResolver.Unregister(Session);

}

<script type="text/javascript">

    var Events = Mindfusion.Diagramming.Events;

    var diagram = null;

    function onLoaded(sender) {

        diagram = sender;
        diagram.addEventListener(Events.onHyperlinkClicked, onHyperlinkClicked);
        diagram.addEventListener(Events.nodeClicked, onEditClick);

        var original = OrgChartNode.prototype.updateCanvasElements;
        OrgChartNode.prototype.updateCanvasElements = function () {
            original.apply(this, []);
            var back = this.getComponent('Frame');
            back.setBrush(this.getBrush());
        }
    }

    function onNodePoint(sender, args) {
        alert("Hello! I am an alert box, created by a hover!");
    }

    function onDeleteClick(sender, args) {
        var item = args.getItem();
        item.getParent().deleteItem(item);
    }

    function onHyperlinkClicked(sender, args) {
        window.open(args.getHyperlink());
    }

    function onEditClick(sender, args) {
        sender.beginEdit(args.node, args.mousePosition);
    }
</script>
 

  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: EditComponent CompositeNode
Reply #9 - Jun 23rd, 2020 at 7:05am
Print Post  
Hi,

Fix the F case here -

var Events = Mindfusion.Diagramming.Events; ->
var Events = MindFusion.Diagramming.Events;

The event name is hyperlinkClicked-

diagram.addEventListener(Events.onHyperlinkClicked, onHyperlinkClicked); ->
diagram.addEventListener(Events.hyperlinkClicked, onHyperlinkClicked);

Regards,
Slavcho
  
Back to top
 
IP Logged
 
DSI
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 16
Joined: May 21st, 2020
Re: EditComponent CompositeNode
Reply #10 - Jun 23rd, 2020 at 5:31pm
Print Post  
Thanks a lot!

I am trying to use beginEdit to ONLY allow edit on the "Detail" text component as you mentioned earlier; but as it is now, all text is editable when clicked.  How can I achieve this?

Also, I am using onNodePoint to create a simple js alert.  Is it possible to ONLY activate this alert when the mouse position is over a specific component (say, the "Title" text component)?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: EditComponent CompositeNode
Reply #11 - Jun 24th, 2020 at 2:35pm
Print Post  
Try this -

Code
Select All
if (args.node.root)
{
	var component = args.node.root.hitTest(args.getMousePosition());
	if (component == args.node.getComponent("Details"))
	{
		// .....
	}
} 



Regards,
Slavcho
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint