Comments (7)
HI @Flow2606,
I'm not sure I understand your requirements. Have you had a look at the example page for the node library? Can you share some code showing what you tried and what you expected it to do vs what you got?
Thanks
Stefan
from blazor.diagrams.
Alright ill try to explain my Project a little bit. Its an ERD Designer which can later be translated into an actual Database.
Here I have the Component DiagramBuilder which creates the Diagram itself and and has the Object DataBase as a Parameter. this Object contains Entities which are then generated as Nodes in the EntityBuilder.
DiagramBuilder
@using Excubo.Blazor.Diagrams
<div>
<Diagram ShowGridLines="true">
<OverviewSettings Position="Position.BottomLeft" />
<NavigationSettings InversedZoom="true" />
<NodeLibrary style="background-color: lightgray; border: 2px solid gray; height: 15%" Orientation="Orientation.Horizontal">
@*Templates*@
</NodeLibrary>
<Nodes>
<EntityBuilder DataBase="@DataBase" />
<ReferenceBuilder DataBase="@DataBase" />
</Nodes>
<Links>
<LinkBuilder DataBase="@DataBase" />
</Links>
</Diagram>
</div>
@code
{
[Parameter]
public DataBase DataBase { get; set; }
}
EntityBuilder
@foreach (Entity entity in DataBase.Entities)
{
<CustomRectangleNode Id="@entity.Id.ToString()" @bind-X="entity.X" @bind-Y="entity.Y">
<table>
<tr>
<th><center><h3>@entity.Name</h3></center></th>
</tr>
@if (entity.Attributes.Count > 0)
{
<tr>
<td>
<table class="table">
@foreach (ERM.Attribute attribute in entity.Attributes)
{
string name = attribute.Name;
string dataType = attribute.DataType.Type;
string args = GetArgumentsAsString(attribute);
<tr>
<td>
@if (IsPrimaryKey(attribute.Id, entity.PrimaryKey))
{
<Icons.PrimaryKey />
}
@if (IsForeignKey(DataBase, attribute))
{
<Icons.ForeignKey />
}
</td>
<td>@name</td>
<td>@dataType@args</td>
</tr>
}
</table>
</td>
</tr>
}
</table>
</CustomRectangleNode>
}
This allows to display the Object Entity as a Node. I dont have a user friendly way yet to create Entities on the front-end.
So your NodeLibrary is pretty much perfect for this task. The problem is that the Node is not generated in the EntityBuilder and therefore I dont know how to manipulate the Node and store the new Entity in my DataBase Object. I have no code for the NodeLibrary Nodes as I have no idea how to approach this problem at all.
from blazor.diagrams.
There is an OnAdd
callback on the Nodes
component, that you could use to be notified whenever an item is added from the Node library. What you put into the node library can be anything, e.g. just a CustomRectangleNode
. But that introduces the inconvenience of now having a node that you'd ideally save into the DataBase.Entities
, but if you do so, that will render a node, in addition to the node that you dragged onto the diagram.
So in your case, I'd suggest to take a different approach:
- Create your own overlay over the diagram.
- Put some UI component there for which you enable drag events (see https://docs.microsoft.com/en-us/aspnet/core/blazor/components/event-handling?view=aspnetcore-5.0)
- On the diagram, add the drop part of the drag event, and in the callback, add a new entity to your DB model programmatically.
- A new node should now be rendered in the diagram
from blazor.diagrams.
Alright thanks for the help. That definitely seems like a reasonable approach so I will try that out.
from blazor.diagrams.
Ok I'm back from the weekend and quite happy you left this Issue open. The Drag&Drop is easy to solve but there is one last problem. I can get the X/Y coordinates from the DragEventArgs but now i realized that theyre not accurate as soon as I move the Diagram in any direction. Is there any way to read out the current Mouse X and Y on the Diagram?
from blazor.diagrams.
There's an extension method:
So as soon as you include using Excubo.Blazor.Diagrams.Extensions
, you should be able to perform e.RelativeToOrigin(diagram)
.
from blazor.diagrams.
Works perfectly. You ve been of great help. Thank you. My Issue is solved now.
from blazor.diagrams.
Related Issues (20)
- Creating custom link HOT 6
- Diagram Does Not Display HOT 3
- Property Hidden HOT 2
- Questions HOT 2
- Disabling Custom Links HOT 3
- additional arrow styles? HOT 2
- Is it possible to disable the function that lets you click on an object and link it to another? HOT 5
- Diagram LinkModified LinkBase param doesnt provide correct positions on source and node HOT 5
- Capture Drag Event of Node causes render to fail HOT 5
- Is there a way to make lines not lap over nodes during auto layout HOT 2
- Auto Layout after render HOT 1
- Panning on mobile HOT 2
- Allow custom middle point and link direction of AngleLink component HOT 6
- Callback after graph is rendered? HOT 8
- Adding container element/nesting of nodes HOT 1
- AutoLayout HOT 6
- Auto-Center after ZoomToFit HOT 7
- Improve documentation about how to change size of nodes.
- Add the ability to prevent remove node or link
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blazor.diagrams.