excubo-ag / blazor.diagrams Goto Github PK

it's great library. thank you.

can you make additional arrow styles? like a dotted, dashed and so on.

please let me know as you possible.

Hi,

is there a way to make the diagram auto-center (in other words: pan/translate automatically so that the diagram's nodes are centered in the viewport) after calling ZoomToFit? Can I implement this by myself ("from the outside") or is it neccessary to add code to the Blazor.Diagrams lib?

Thanks,
Tim

Hi, I am use your library for my project. Thank for your work.
But I can custom AngleLink component.
So you can allow custom middle point and link direction of AngleLink component?

I am still able to drag the "fixed node" on this demo https://excubo-ag.github.io/Blazor.Diagrams/fixed_node

Hello Steffan

i'm attemting to test your Diagram in a Server side Blazor app. It looks very promising, but I cant get it to work.

To reproduce:
I'm using Visual studio 2019 Preview.
I created a new Blazor serverside test app.
I installed Excubo.Blazor.Diagrams from NuGet.
I added: @using Excubo.Blazor.Diagrams to _Imports.Razor
I created a new Razor component for Diagram and inserted an exact copy of your componenet "WithLinkSelector.razor" (Have tried others to with same result)

Run the app, and I get this result:

(By the way, It works fine when I download the complete project, but I think it should work with NuGet to)

Ca you help me out?

I have a list of nodes rendered using a foreach, I have a button which should flip a bool which is used by the the nodes to toggle movable, toggle doesn't seem to have an effect until I zoom in . I think it may have something to do with the default=true in NodeBase for movable?

I can upload a demo of the issue later if required.

To Replicate:

• Open https://excubo-ag.github.io/Blazor.Diagrams/with_overview
• Resize window and then refresh
• expand window and then look at overview, it will be the wrong size and dragging the diagram will cause nodes to disappear unexpectedly due to them being outside the canvas

basically im trying to stop the user from accidently clicking the Diagram and drawing a line, in our use case adding new connectors shouldnt be possible, but I cant see how to disable that functionality?

Hello, this isn't an issue with the project itself but I did not know where else to ask it. We are looking at the auto arrange feature and the lines keep intersecting the other nodes. IS there anything in this library that allows you to avoid intersecting nodes and is there a way to get text on the line (i believe the lines were of type nodeLink)

What is the best way to create a clickable node.

I have tries this, but that crash the code.
<RectangleNode Id="n1" @bind-X="n1p.X" @bind-Y="n1p.Y" Movable="false" @onclick="()=>OnClick()" >

And I have tried this, but nothing happends:

In both cases Movable = "false" is used.

Maybe more like this?
<Nodes OnRemove="NodeRemoved" OnAdd="NodeAdded" OnClick="NodeClicked">

I am starting to create custom components and I have encountered something that I think is a bug.

My starting point was to

• Create a new Blazor project and use the lastest NuGet package.
• Add a design surface and add a few nodes per the getting started guide.
• Create a new razor component as an empty shell and give it a name
• Copy the code from the Custom Node example into the new razor component
• Add in the appropriate usings

After doing all of this there is one property that does not resolve from the example file:

I traced it back to Excubo.Blazor.Diagrams.NodBase where the property is defined as protected. As I am using a NuGet and not using the source in my application, I cannot access the property.

Am I misunderstanding something?

Noticed on a new link

NavigationSettings need to correctly handle the case when origin and zoom are set by the user and the user zooms.

Improve style of nodes (default style or demo style)

On my links I have

    <Links OnRemove="LinkRemoved" OnModified="LinkChanged" @bind-DefaultArrow="arrows">

Which has this supporting code

  private void LinkChanged(LinkBase link) {
    LinkNodes(link);
  }

  private async Task LinkNodes(LinkBase link) {
    // this is fired when the second end of a link is clicked into place, completing a link added.
    log.LogDebug(LoggingType.BlazorEvent, "Page {page} : {method} link modified from Node {linkSource} {sourcePort} to Node {linkTarget} {targetPort}.",
      nameof(Index), nameof(LinkNodes), link.Source.Node.Id, link.Source.Port, link.Target.Node.Id, link.Target.Port);

// other code here obfuscated but need the correct ports returned,
  }

No matter which point on the node I draw the link, when placing the link end, the source and target nodes are correct BUT the ports are always returning as "Any" instead of the actual port the link is connected to.

Please can the ports be fixed to be correct? Thanks in advance

I may be missing something, but it would be awesome if I could create a callback after a graph is rendered. I'm attempting to provide a screenshot to the user after calling ZoomToFit, but the ZoomToFit function returns before the graph has been re-rendered, so the screenshot is of the graph's previous state.

Hi, is panning on mobile supported?. My diagram renders fine on an iPhone, but when its off screen I cant touch the screen and drag the diagram around.
Appears to be the same with the Demo site as well.

Cheers

This a feature request.
I created a custom node that contains <input/> controls, but when I click on the controls the events not propagated to them.
I would like to be able to click checkboxes, type to inputs, select in dropdowns.

My code:

<SourceCodeLink Repository="Blazor.Diagrams" Page="@(nameof(CustomNode))" />

<Diagram>
    <NodeLibrary style="background-color: aliceblue; border: 1px solid blue; " Orientation="Orientation.Vertical">
        <UserDefinedNode>
            <div style="width:5em; height:3em; margin: 1em;">Template User-defined!</div>
        </UserDefinedNode>
    </NodeLibrary>
    <Nodes>
        <UserDefinedNode @bind-X="@X" @bind-Y="@Y">
            <table>
                <tr>
                    <th></th>
                    <th>#</th>
                    <th>Name</th>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1</td>
                    <td>Mazde</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>7</td>
                    <td>Toyota</td>
                </tr>
            </table>
        </UserDefinedNode>
    </Nodes>
    <Links />
    <OverviewSettings />
</Diagram>
@code {
    private double X { get; set; } = 300;
    private double Y { get; set; } = 300;
}

Hi
Please upgrade to Microsoft.Component......... 3.2

I have just started using the diagram component and I having difficulty with getting it display a diagram. I have copied the Getting Started code into the Blazor control that I am using to display the diagram. The code runs and in the debugger, I can see Nodes and Ports being created. I have the DiagramCanvas control in the layout section.

<CascadingValue Name="DiagramManager" Value="DiagramManager">
    <DiagramCanvas></DiagramCanvas>
</CascadingValue>

There is some guidance in the Getting Started page that states

but there is no code example to demonstrate what this actually means. I suspect that this is the source of my problems, but I don't know how to address it.

Hoping you can help...

BTW... It looks like the Getting Started page is outdated. Some things appear to have changed since it was written:

1. private DiagramManager DiagramManager { get; private set; } The code will not compile if the setter is private
2. The casing of the PortAlignment properties seems to have changed from upper case to Title case

private NodeModel NewNode(double x, double y)
{
    var node = new NodeModel(new Point(x, y));
    node.AddPort(PortAlignment.BOTTOM);
    node.AddPort(PortAlignment.TOP);
    node.AddPort(PortAlignment.LEFT);
    node.AddPort(PortAlignment.RIGHT);
    return node;
}

Provide opt-in API for auto-layout of nodes

Hi,
Please add an event to prevent removing Node or Link from the design.

Thanks

Hi Stefan,

i have a rather simple question:

I want the links to be auto-generated only, so no user on the front end is directly able to draw links.
Is that possible?

The demo doesnt explain it and i did not find an API.

I hope you can help me.

Flow

I need to evaluate your component. It looks good for our needs. Could you please provide a sample like below.

1. Create 10000 nodes initially.
2. Add 10 nodes dynamically.
3. How to update the fill colors for selected shapes?

Note : I need this sample in the Server application.

Hi, I think Auto layout after initial render no longer works after about Version 3.10

I noticed it in my own app, and in the Demo site

https://excubo-ag.github.io/Blazor.Diagrams/modification_from_code

if you click "Random New Graph", the diagrams all stack ontop and dont layout correctly.

Hi,
On occasion the AutoLayout overlaps, I was trying to have a look through the AutoLayout code, and as I expected, pretty complicated.

Would you know what might cause something like this to happen?
The Orange Node overlaps using Algorithm.TreeHorizontalTopDown

Mostly, the auto layout works really well, I was wondering if there was a Max height or something in the code?
Have tried (unsuccessfully) playing with HintHeight & HintWidth,

 <Diagram id="familyDiagram" SelectionChanged="SelectionChanged" ShowGridLines=false @ref="masterDiagram">        
        <Nodes>
            
            @foreach (var node in FamilyDiagramNode.RectangleNodes)
            {
               
                <RectangleNodeNoLinks @key="@node.NodeId" Id="@node.NodeId">

                    <div class="diagram" style="max-width:@Width;min-width:@Width;font-size: 8pt; background-color: @node.Colour; color: @node.FontColour">
                        @if (!string.IsNullOrEmpty(node.Icon))
                        {
                            <span style="font-size:23px; width:100%; align-content:center; text-align:center" class="@node.Icon"></span>
                        }
                        @foreach (var q in node.Data)
                        {
                            <div>@((MarkupString)q)</div>
                        }
                    </div>
                </RectangleNodeNoLinks>
            }

        </Nodes>

        <Links AllowFreeFloatingLinks="false">
            @foreach (var lnk in FamilyDiagramNode.DiagramLinks)
            {
                <Link @key="@((lnk.Source,lnk.Target))" Source="lnk.Source" Target="lnk.Target" Arrow="Arrow.Target" Type="link_type" />

            }
        </Links>

        <NavigationSettings DisableZooming="false" @ref="navigationSettings" MinZoom="@MinZoom" MaxZoom="@MaxZoon" Origin="@Origin" />
        <AutoLayoutSettings Algorithm=CurrentAlgorithm @ref="autoLayout" />

        @if (!isMobile)
        {
            <OverviewSettings ViewableAreaBorderWidth="2"  BackgroundColor="#DDDDDD" Position="Excubo.Blazor.Diagrams.Position.BottomRight" ViewableAreaBorderColor="green" ViewableAreaFillColor="white" FullBorder="true"  />
        }

    </Diagram>

I was not able to find any info how to change node size. Do I need to do it manually?

Currently doesn't work on any device with a locale that uses anything else but a period as decimal separator.

Firstly, thanks so much for putting this library out there - as some background I'm spiking out whether it is feasible that we can port an internal graphical application to Blazor from JS. I've found it easy to use so far.

The application uses a kind of 'family tree' view and the built in AngledLink unfortunately does not break the line in the right place. I was seeing if I could derive a custom link type and do the drawing myself.

What I've tried (following the StraightLink and AngledLink examples) from the repo:

• Inherited from LinkBase
• Drawing lines from ControlPoints.First() and ControlPoints.Last()

In my inherited component I am not seeing ControlPoints be populated and Source.X & Y aren't accessible because they're internal fields. Is there an example available of how to do a custom link in a similar way to that available for the custom node example?

Have you thought about adding support for nesting nodes? So I guess that means defining a container node type. I hope i didn't overlook an already existing functionality for this :-)

I am trying to create some custom diagram shaped with specific properties. I am wondering

1. if it is possible to accomplish with the Excubo library
2. If it is possible, where would I start to do something like this and
3. How much effort would it be.

I am not an experienced web developer, but I am in experienced C# developer and I have about six months of experience with Blazor, so I am feeling comfortable with the environment.

Here are the primary requirements.

• List container (Item) with an editable header.
• Arbitrary number of Subitems in the Items list
• Need to be able to add items to and remove them from the Subitems list. Ideally, this would be through databinding wherein items in the list show up or disappear visually in the UI as they are added to or removed from the list
• Containing Item objects must also be addable and removable
• Item Name and individual Subitem names are editable.
• Data binding to compound C# object that contains the parent object and a list of Items.
• Items and Subitems each have a dozen or so properties that, when an Item or SubItem is selected, i will show a Blazor comoponent that is a property instepctor/editor to the side fo the screen where the Item and Subitem properties will be editable.
• Need to enforce rules such as:
  • An outlet port (from a Subitem) can have only one connector line and it must be to an inlent port on an Item header
  • Item headers can have any number of incoming connections.
  • Item headers cannot have outlet ports
• Ports display as circles.
• Ports are hidden except if they either have a connection already made, or there is a mouse over event so that a connector line be originate from or be connected to the now visible port
• The Item container has a drop shadow. It took me a long time, but I have figured out how to do this, but I am sure that there is a better way to accomplish it.

Visually, this is what I am trying to accomplish - much like an ERD, but solving an entirely different problem, with different constraints and connection rules.

Looking forward to your feedback.

Michael

I use Client Blazor App, .NET Standard 2.1, installed Excubo.Blazor.Diagrams 3.4.0 using NuGet

this code is not compiled:

@using Excubo.Blazor.Diagrams

<Diagram @ref="Diagram">
    <Nodes>
        <Node Id="abc" X="500" Y="500">
            Hello node @context.Id
        </Node>
        <Node Id="def" X="1000" Y="500">
            Hello node @context.Id
        </Node>
    </Nodes>
    <Links>
    </Links>
</Diagram>

Error:
Severity Code Description Project File Line Suppression State
Error CS0118 'Diagram' is a type but is used like a variable BlazorApp15Diagrams C:\Repos\BlazorApp15Diagrams\BlazorApp15Diagrams\Pages\Counter.razor 5 Active

• color
• gridlines

Hi Stefan,

its me again and i have ran into another problem right now.

In my Project every Object of a Class represents a Node. Pretty much the same as you have done it in the Demo. Foreach Object in my List a Node is created.

Now i want to add a NodeLibrary to easily create an Object/Node from a template. The problem is that these template Nodes are not in my List and do not represent an Object. Its just a useless Node.

Maybe you know a solution on how to connect Code generated Nodes in a List with the NodeLibrary.
Sorry for bothering you, i'm still a trainee.

Flow

I am trying to capture when a node is dragged on the diagram to update the datastore for the node with its new position on the diagram, thus persisting it between sessions.

Adding ondragend="DragEnd" to the node or nodes tag is causing the render to fail even though the handler is correctly defined.

private void DragEnd(DragEventArgs e)
{
// ... code will go here
}

I have also tried other standard blazor on... event handlers and they all seem to make the render fail when added to a node or link.

At the moment the nodes supports OnRemove and OnAdd, but not OnModified.

Please advise how I can catch when a node or group of nodes are moved on the diagram?

To Replicate:

• open https://excubo-ag.github.io/Blazor.Diagrams/with_overview in firefox and try to zoom

Tested on Firefox Dev Edition and Regular Firefox on Linux and Windows