首页 > 其他分享 >【Syncfusion系列】Diagram 杂谈第一篇

【Syncfusion系列】Diagram 杂谈第一篇

时间:2024-11-08 20:43:53浏览次数:3  
标签:node VisualNode Syncfusion args 杂谈 Diagram null 双击

前言

我认为 DiagramSyncfusion 中首屈一指的优秀控件!最近在写一个工作流引擎,前端界面就用的是Diagram ,接下来就来看一看。

Diagram的事件

查看 SfDiagram的属性,如果想实现什么事件,就看这些Command结尾的。
在这里插入图片描述
这里,我想看看 双击Diagram中的一个节点,能触发什么事件。
于是,我找到了,ItemDoubleTappedCommand!
我使用 prism 的方式 进行绑定:

ItemDoubleTappedCommand="{Binding ItemDoubleTappedCmd}"

其实这个并不是一个事件(并不能双击一下自动产生一个事件),而是封装好的命令,就是给mvvm用的, 看看源码就知道:

//
// 摘要:
//     Gets or sets the itemdoubletappedcommand to invoke when double
 // click on the diagram
//     or diagram elements.
public ICommand ItemDoubleTappedCommand
{
    get
    {
        return (ICommand)GetValue(ItemDoubleTappedCommandProperty);
    }
    set
    {
        SetValue(ItemDoubleTappedCommandProperty, value);
    }
}

注意,这个命令,不管是双击,diagram或者是其中的元素,都会触发该事件。并且双击节点的不同位置,触发传递的参数还会有所不同,后面介绍。

ItemDoubleTappedCmd = new DelegateCommand<ItemDoubleTappedEventArgs>((args) => {
    try
    {
        //注意这里点的位置不同,返回的参数不一样,但是都可以获取到Node!
        VisualNode node = args.OriginalSource as VisualNode;
        if (node == null)
        {
            node = args.Item as VisualNode;
            if (node == null)
            {
                return;
            }                            
        }    
});

后台实现命令如上。
在这里插入图片描述

如果点击在节点的说明上,args的值如下:
在这里插入图片描述
此时,node的相关信息包含在,OriginalSource里面。

如果点击没在节点的说明上(说明的周边),args的值如下:
在这里插入图片描述
此时,node的相关信息包含在,Item里面。

如果此时你没点任何节点,而是双击在了空白处!在这里插入图片描述
此时 Item里面包含的是 Diagram 对象。

这里讲的是 ItemDoubleTappedCommand 双击的事件,那么其他的,请自行测试!

如何通过node拿到Diagram

通过上面那个事件,我们可以拿到当前被双击的Node对象,那么如何通过Node拿到Diagram 对象呢?

 //双击触发节点
 ItemDoubleTappedCmd = new DelegateCommand<ItemDoubleTappedEventArgs>(async(args) => {
     try
     {
         //注意这里点的位置不同,返回的参数不一样,但是都可以获取到Node!
         VisualNode node = args.OriginalSource as VisualNode;
         if (node == null)
         {
             node = args.Item as VisualNode;
             if (node == null)
             {
                 return;
             }                            
         }

         #region  这里开始拿对象
         //-- 这里演示了,如何通过node得到diagramcontrol!!!!
         var a = node.Info as IGroupableInfo;
         var manager = a.Graph.CommandManager;
         var diagramcontrol = manager.View as SfDiagram;
         #endregion

     }
     catch (Exception ex)
     {

         MessageBox.Show(ex.Message);
     }
     
 });

通过Node拿到Diagram确实废了我一番功夫,有很多类是对外隐藏的,所以没办法直接进行强制转换,Diagram的相关代码中有很多,先转为接口,才能拿到某些属性的例子。

比如

 public NodeViewModel FindNextNode(NodeViewModel node)
 {
     var out_nodes = (node.Info as INodeInfo).OutNeighbors as IEnumerable<object>;
     if (out_nodes != null && (out_nodes).Count() > 0)
     {
         foreach (NodeViewModel outnode in out_nodes)
         {
             if (node != outnode)
             {
                 return outnode;
             }
         }
     }
     return null;
 }

我们需要多熟悉他们的数据结构,并熟悉这种写法。

命令取消

Diagram 封装了很多自带的命令,比如对齐,旋转,复制,剪切,撤回,全选,等等,一个48个,如下图:,
在这里插入图片描述

在这里插入图片描述
这些命令都是开箱即用的,非常方便! 但是有的额时候,我确是想去掉某些命令。
比如,它自带的编辑命令,当我们双击的时候,会触发编辑命令,节点会进入编辑状态,这个是我不想要的,(我想实现弹窗)
在这里插入图片描述
那如何取消呢?我们继续完成代码!

//双击触发节点
ItemDoubleTappedCmd = new DelegateCommand<ItemDoubleTappedEventArgs>(async(args) => {
    try
    {
        //注意这里点的位置不同,返回的参数不一样,但是都可以获取到Node!
        VisualNode node = args.OriginalSource as VisualNode;
        if (node == null)
        {
            node = args.Item as VisualNode;
            if (node == null)
            {
                return;
            }                            
        }

        #region  这里用来取消双击导致的编辑这个副作用,  Cancel命令是一个多功能命令,可以根据上下文执行不同的操作,如停止编辑注释并接受当前的编辑结果,或者清除图表元素的选择和键盘焦点。
        await Task.Delay(50);
        //-- 这里演示了,如何通过node得到diagramcontrol!!!!
        var a = node.Info as IGroupableInfo;
        var manager = a.Graph.CommandManager;
        var diagramcontrol = manager.View as SfDiagram;
        // 得到graphinfo 
        IGraphInfo graphinfo = diagramcontrol.Info as IGraphInfo;
        // 命令取消!
        graphinfo.Commands.Cancel.Execute(null); 
        #endregion
    }
    catch (Exception ex)
    {

        MessageBox.Show(ex.Message);
    }
    
});

那效果如下,明显有个取消的过程:
在这里插入图片描述
这里,你会不会好奇,代码里面为啥,加了一个异步?await Task.Delay(50);
你可以尝试把这个异步去掉,你会发现没有效果!
其实这段代码必须,写道//双击触发节点
ItemDoubleTappedCmd = new DelegateCommand(async(args) => {

这个函数外面才会有效,就是如果这个函数没退出,直接取消是没有用的!
我遇到过,很多情况都是这样。
不过,我发现了一个更优雅的写法,就是这个异步。
主线程,遇到这个await Task.Delay(50); 其实就会挑走,从而出了这个函数
当50毫秒时间一到,就会又调回来,这样就和写道外面是一样的了,于是就生效了!!!!
是不是又学了一招呢?(手动狗头~~)

标签:node,VisualNode,Syncfusion,args,杂谈,Diagram,null,双击
From: https://blog.csdn.net/songhuangong123/article/details/143633472

相关文章

  • 项目管理经验杂谈(一)
       我认为项目管理主要是在管两个方面,一个是人,一个是事。   一、人的管理   人的管理就是对于项目相关的所有干系的人管理,分为两大类,一是外部客户,而是公司内部人员。    先说下外部客户,外部客户又分为直接客户和第三方客户。        直接客......
  • 项目管理经验杂谈(一)
       我认为项目管理主要是在管两个方面,一个是人,一个是事。   一、人的管理   人的管理就是对于项目相关的所有干系的人管理,分为两大类,一是外部客户,而是公司内部人员。    先说下外部客户,外部客户又分为直接客户和第三方客户。        直......
  • 【杂谈】whk 选手的 CSP-S 2024 游记
    每年前总会想一些有关早年OI的经历。从去年全机房搞颓(除了Million小朋友)被冰霜秒全场的经历,到更早一点还是普及组选手考前在背背包板子的事情,这才意识到,原来已经过去这么久了啊。即使每年考前的经历或许已然模糊,但打摆玩Minecraft的经历还依旧历历在目。于是,在大概率是我OI......
  • Syncfusion宣布开源其为.NET MAUI开发的14个控件
    .NETMAUI是Xamarin.Forms的进化版,增加了对构建桌面应用的支持。.NETMAUI的特点包括统一的框架、对桌面应用的支持、性能改进、使用现代技术以及开源特性。开源.NETMAUI(多平台应用UI)的其他要点包括:统一框架:.NETMAUI将适用于Android、iOS、macOS和Windows的API统一到......
  • 二进制菜鸟的杂谈-调试与pwn
    反调试技术NLFlagGlobalPEB的偏移当被调试的时候会有标志位:FLG_HEAP_ENABLE_TAIL-CHECK()FLG_HEAP_ENABLE_FREE_CHECK()FLG_HEAP_VALIDATE_PARAMETERS()一般为:moveax,fs:[30h]moval,[eax+68h]moval,70hcmpal,70h其实是因为isDebugger被检测到了进而影响......
  • IntelliJ IDEA-Diagrams(图表)插件的使用
    IntelliJIDEA-Diagrams(图表)插件的使用简介Diagrams插件是IntelliJIDEA内置的插件,它为基于IntelliJIDE的所有本地图表类型提供API。此插件包含对以下从源代码中完全自动生成的图表的支持:1.UML类图(当前使用于Java和KotlinJVM)2.IDEA模块依赖关系图3.在GitDiff视图下的......
  • Idea序列图插件-SequenceDiagram Core
    简介SequenceDiagramCore是一个IntelliJIDEA插件,它允许开发者直接在IDE中创建和编辑序列图(SequenceDiagrams)。序列图是UML(统一建模语言)中的一种图表类型,用于描述对象之间如何交互以及这些交互的顺序。这种类型的图表对于理解复杂的系统流程、设计模式或者组件之间......
  • [笔记]数据库内核杂谈系列笔记
    知识点:数据库-->分布式数据库-->数据模型/数据湖-->其他数据库数据库的核心就在于一条query的执行流程从这个开始,慢慢的拆解如何将一个普通数据库转化为分布式数据库?数据模型/数据库-数据的组织形式向量数据库1.一小时实现基本功能的数据库数据库最基本功能的是......
  • 实体-关系图(Entity-Relationship Diagram)【er图步骤】【数据库设计步骤】
    1.第一步:根据宠物商店业务逻辑建立petstoreE-R图2.第二步:将petstoreE-R图转换为关系模式3.第三步:将petstore数据库规范化第一范式:保证每一列的原子性,每个属性只能包含单一值,不能是重复的或多值的(ok)第二范式:每一个非主键字段都是依赖于主键字段的(违者,如商品分类拆出来......
  • 认知杂谈96《反人性与顺人性》
    内容摘要:    成长常被视为反人性的,因为它意味着要离开舒适区,面对挑战。然而,在与人共事时,顺应人性同样重要,它要求我们理解他人的需求和动机。为了平衡成长与顺应人性,我们应设定清晰目标,挑战自我,持续学习,一步一个脚印。    同时,我们需要运用情商和同理心,倾听他人,尊......