microsoft / xaml-standard

XAML Standard : a set of principles that drive XAML dialect alignment
Other
804 stars 50 forks source link

Proposal Add NetworkView or NodeView or GraphView #163

Open insinfo opened 7 years ago

insinfo commented 7 years ago

I believe that everyone in XAML lovers, we want a robust and complete standard and that facilitates the life of the developer so I propose to include these controls as a standard of XAML specification. These are widely used in the real world today. In several areas we find these types of control such as audio/video playes, visual programming, animation software, single/multitracks audio editors, video editors, slide editors, photo gallery, websites, social networks among many others.

A control for visualizing and editing networks, graphs and flow-charts

# NetworkView Control

<NetworkView or NodeView or GraphView>
    <Node Name="node1" Id="node1" Class="" Title="" Icon="" Info="">
        <Connections>
            <InPort PortId="125" ConnectionPortId="255" Title=""/>
            <OutPort PortId="2500" ConnectionPortId="150" Title=""/>
        </Connections>
    </Node>
    <Node Name="node2" Id="node2" Class="" Title="" Icon="" Info="">
        <Connections>
            <InPort PortId="125" ConnectionPortId="255" Title=""/>
            <OutPort PortId="2500" ConnectionPortId="150" Title=""/>
        </Connections>
    </Node>
</NetworkView>

https://www.codeproject.com/Articles/182683/NetworkView-A-WPF-custom-control-for-visualizing-a

6a0163057a21c8970d019aff53297e970b

node editor 6 node editor 7 node editor 8 node editor 9 node editor 10 node editor 12 node editor 13

node editor ios 1

node editor ios 2 node editor ios 3

node editor ios 4

node editor ios 5

insinfo commented 7 years ago

I updated with other demos on Android, IOS and UWP

dotMorten commented 7 years ago

<rant> @insinfo you need to stop this. You posted the same message in multiple issues and off topic AGAIN. This isn't a chat forum. We log an issue and keep the discussion in each issue on point and on topic. Every morning I have a gazillion email notifications from this repo because you verbal vomited all over it. You're only hurting your own issues acting like this. Please learn some github etikette and try and better understand what the spec is about rather than steer it away from what it is. </rant>

birbilis commented 7 years ago

@dotMorten indeed, probably @insinfo doesn't use e-mail notifications. The reply might originally seem to them as applicable to each of those posts, but receiving the exact same text via multiple e-mail notifications is like spam. Probably GitHub could catch this activity and warn one against it in the first place

Mike-E-angelo commented 7 years ago

YOU CANNOT HOPE TO STOP THE POWER OF @insinfo, YOU CAN ONLY PRAY TO CONTAIN IT!!!

(Sorry, I keep saying this to myself whenever I get a new notification that we are so affectionately discussing.)

birbilis commented 7 years ago

related issue is Adorners, people where using them in WPF to make connectors appear between visual controls (and wiring) without needing a special container (that is suggested here instead) for those controls https://github.com/Microsoft/xaml-standard/issues/101

a special control of course can help with persisting such a connectivity graph and related properties of that graph, but it could be a control that is given another container as a child or even better allow giving it by name too via a property without the need to always nest it and it injects this wiring (and persistence of wiring) functionality using adorner-based UI

birbilis commented 7 years ago

speaking of Adorners, the article you mentioned above for the WPF NetworkView seems to also use them:

ZoomAndPanControl is from my earlier article and I won't be going into detail on it here. Suffice to say that it gives the ability to zoom and pan the NetworkView.

AdornerDecorator creates a new adorner layer underneath the ZoomAndPanControl in the visual-tree. Adorners are used to display the delete connection and delete node mouse-hover buttons and also the feedback icons. Without the AdornerDecorator then the adorners would be displayed within the default adorner layer that is above the ZoomAndPanControl in the visual-tree. If this adorner layer were used instead of the explicitly defined one it would mean that the adorners would not be subject to the scale and offset transformations that are applied by the ZoomAndPanControl (via its render transform) and therefore would not appear at the same zoom level as the rest of ZoomAndPanControl's content.

dragZoomCanvas (after the NetworkView) is used to render the zoom rectangle that allows the user to drag out a rectangle to zoom to. This technique was described in the ZoomAndPanControl article.

crutkas commented 7 years ago

Everyone please let's stay on topic. New issue please keep it there. Scenarios and use cases on how YOU do stuff is critical.

KySpace commented 6 years ago

Before that I would suggest to add the FreeBox control, that the boxes can float and adjust their positions, and then have the Network connecting them together. Also please support properties like notations that are on this connections, and connection style etc.

insinfo commented 6 years ago

@KySpace Thanks for looking at this control, I believe that this control is very important for a robust and complete XAML standard, and for modern next-generation software that involves visual programming, interactivity with neural networks and other purposes, you could give an example in XAML of your suggestion, so I can update the initial post with your suggestion.

insinfo commented 6 years ago

@KySpace And do not forget to vote, a smile +1

birbilis commented 6 years ago

There are some nice libraries for Graphs (say GraphX for .NET and MSAGL from MS Research etc.) out there that could be examined. A common feature they have is that layout algorithms are available for choosing and or plugging in.

Here's a collection of links on Visualization (with a Graphs subfolder) that might be helpful: https://www.dropbox.com/sh/rbkrbi4vw2j7n4d/AACxwpQ0unKwkwujbuRLWW-la?dl=0

Those links where collected while doing research for the ClipFlair project, however never ended up adding a Graph component to it, due to the extra time needed to port GraphX (which was my 1st choice) to Silverlight back then (the usecase was to allow an educator/student to add mind maps and flowchart style guides etc. to their FLL activities)

insinfo commented 6 years ago

@birbilis it seems that most of the links you posted are no longer available

birbilis commented 6 years ago

@insinfo unfortunately the Internet is becoming more and more a swamp of broken links. Some that come to mind are silverlight.net forums broken links, or Codeplex going into archive mode, MS retiring older Visual Studio documentation into downloadable files breaking its own articles that point to them etc.

Luckily there is http://archive.org that archives some of that stuff and one can put a URL there to see snapshots from older dates if they're looking for some content. Of course they can't store everything, wish they keep on their effort though

btw, the GraphX lib that I was mentioning is now at https://github.com/panthernet/GraphX - Note the Algorithms part of the repository too (for edge routing, for graph layout etc.) - https://github.com/panthernet/GraphX/tree/PCL/GraphX.PCL.Logic/Algorithms

Microsoft Research's MSAGL is now on Github too (and has much better licensing terms than it once used to have) - https://github.com/Microsoft/automatic-graph-layout