第八节:Nodify 编辑器属性

2024-08-23 18:04

本文主要是介绍第八节:Nodify 编辑器属性,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

引言

经过前几章的学习,你已经对Nodify框架有了初步的编程思路。当然只局限于这些还完全不够,本章节将阐述各个结构组件的一些常用属性,以便在日后的开发过程中更得心应手。

1、编辑器

平移
简介属性默认值
平移功能 控制DisablePanningfalse
平移过程中IsPanning =>true/
平移过程中ViewportSizeViewportLocation 和 ViewportTransform自动更新/
自动平移 控制DisableAutoPanningfalse
自动平移速度AutoPanSpeed15 pixels
触发自动平移的边缘距离AutoPanEdgeDistance1 millisecond
缩放
简介属性默认值
缩放功能 控制DisableZoomingfalse
缩放过程中ViewportSizeViewportLocation 和 ViewportTransform自动更新/
当前比例ViewportZoom1
最小比例MinViewportZoom0.1
最大比例MaxViewportZoom2
选择
简介属性默认值
鼠标拖动框选IsSelecting=>truefalse
缩放过程中SelectedArea自动更新/
当前选择节点集合SelectedItems/
实时选择,框选时节点选择状态立即变化,否则松开鼠标后再变化EnableRealtimeSelectiontrue
键鼠配合
  • Replace - 无修饰键(默认行为,清除已选项目并开始新选择)
  • Append - shift键(将选择添加到当前已选项目)
  • Remove - alt键(从当前已选项目中移除选择)
  • Invert - control键(移除选定项目并添加未选中项目)
/
NodifyEditor 实例 API
  • SelectArea
  • InvertSelection
  • UnselectArea
对齐
简介属性默认值
移动选中项目时对齐到何处GridCellSize1
自动校准位置EnableSnappingCorrectiontrue

EditorCommands类中可以看到以下RoutedUICommand

命令
简介属性默认值
相对于视口中心放大ZoomIn - CTRL +/
相对于视口中心缩小ZoomOut - CTRL -/
选择所有项目SelectAll - CTRL A
将视口移动到指定位置BringIntoView0,0
对齐方法:Top、Left、Bottom、Right、Middle、CenterAlignT
缩放并移动Viewport以显示尽可能多的项目FitToScreen /

 您可以在NodifyEditor实例上以编程方式调用这些命令的相应方法

  • FitToScreen
  • BringIntoView
  • ZoomAtPosition
  • ZoomIn
  • ZoomOut

2、节点容器 ItemContainer

项目容器(ItemContainer) 是编辑器中最重要的部分。它是一个内容控件,用于包装由 编辑器(NodifyEditor) 的 ItemsSource 生成的每个控件,并在图形坐标中具有 Location属性。

选择操作:鼠标左键点击并释放

选择
简介属性默认值
是否可选IsSelectabletrue
是否选中IsSelectedfalse
API

IsSelectableInArea

方法
是否可拖动IsDraggable true
通过释放右键取消拖拽操作AllowDraggingCancellation true

事件:

拖拽 ItemContainer 会触发一系列事件,这些事件由 NodifyEditor 处理并应用于所有选定的项:

  • DragStarted - 将 IsPreviewingLocation 依赖属性设置为 true;
  • DragDelta - 在拖拽操作完成或取消之前持续触发,并将所有选定项移动;
  • DragCompleted - 完成或取消拖拽操作,并将 Location 依赖属性设置为最终位置,IsPreviewingLocation 设置为 false

3、节点

节点是节点编辑器的基本组件。它们被包装在ItemContainer中,并且可以是任何自定义控件。

3.1、Node 控件 

节点的Header可以使用HeaderTemplate进行自定义,节点的Footer可以使用FooterTemplate进行自定义;Input集合中的每个项目可以使用InputConnectorTemplate进行自定义。同样,Output可以使用OutputConnectorTemplate进行自定义。

 3.2、GroupingNode 控件

这种类型的节点可以调整大小,如果通过Header拖动,它将移动其内部的节点。

如果按住SwitchMovementModeModifierKey(默认情况下为Shift键),它将移动而不会移动其子节点。

<nodify:NodifyEditor><nodify:NodifyEditor.ItemsSource><CompositeCollection><nodify:GroupingNode Header="Grouping node"Width="300"Height="250" />            <nodify:Node Header="My node" /><nodify:Node Header="My other node" /></CompositeCollection></nodify:NodifyEditor.ItemsSource>
</nodify:NodifyEditor>

节点的Header可以使用HeaderTemplate进行自定义。同样,节点的Content可以使用ContentTemplate进行自定义。

节点的大小可以通过更改ActualSize依赖属性的值来编程设置。

CanResizetrue
MovementModeGrouped

ResizeCompleted

命令 Command

ResizeStarted

命令 Command

3.3、KnotNode 控件

这种类型的控件可以用于重新排布(reroute)Connection,因为它只支持一个Connector

节点的Content可以使用ContentTemplate进行自定义。

<nodify:NodifyEditor><nodify:NodifyEditor.ItemsSource><CompositeCollection><nodify:KnotNode /></CompositeCollection></nodify:NodifyEditor.ItemsSource>
</nodify:NodifyEditor>

3.4 StateNode控件

 这种类型的节点本身就是一个Connector,这意味着它将在交互时引发PendingConnection事件。由于它继承自Connector,你需要将Anchor属性和IsConnected绑定到相应的状态。(如果IsConnected设置为false,连接将不会更新)

<nodify:NodifyEditor><nodify:NodifyEditor.ItemsSource><CompositeCollection><nodify:StateNode Content="My node" /></CompositeCollection></nodify:NodifyEditor.ItemsSource>
</nodify:NodifyEditor>

节点的Content可以使用ContentTemplate进行自定义。

 4、连接

连接是由两个点之间创建的。SourceTarget依赖属性是System.Windows.Point类型,通常绑定到连接器的Anchor点。

4.1、基本连接

库中所有连接的基类是BaseConnection,它派生自Shape。在创建自定义连接时,可以不受任何限值地从BaseConnection派生。

命令Command
DisconnectCommand 及 DisconnectEvent当按住ALT点击连接时触发
SplitCommand 及 SplitEvent当双击连接时触发

连接方向Direction有两种值:

  • Forward

imageimage

  • Backward

imageimage

 SourceOffsetTargetOffsetOffsetMode一起使用,会控制与锚点的距离:

 连接还有一个Spacing属性,会使连接在一段距离后转折到沿着从SourceTarget点的方向:

  • 有间距:

image

  • 无间距:

image

ArrowSize设置为"0, 0"会移除箭头。

 4.2、线连接

一条从SourceTarget的直线。

4.3、电路连接

 有一个Angle依赖属性来控制转折的位置。角度以度为单位。

4.4、曲线连接

 SourceTarget之间的贝塞尔曲线。

 5、连接器

连接器通过引发PendingConnectionStartedEvent事件来创建预备连接。连接器具有一个必须绑定的Anchor依赖属性,以便在节点位置更改时实时更新它们之间的连接。IsConnected依赖属性必须设置为true,以接收Anchor更新。

按住ALT并点击连接器会触发DisconnectionCommand

5.1、NodeInput和NodeOutPut

NodeInputNodeOutput是带有HeaderConnector的实现,可以通过自定义HeaderTemplate来显示文本或输入框。它们还公开了一个ConnectorTemplate来自定义连接器本身。通常,它们与Node.InputConnectorTemplateNode.OutputConnectorTemplate一起使用。

这篇关于第八节:Nodify 编辑器属性的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1100108

相关文章

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

解读为什么@Autowired在属性上被警告,在setter方法上不被警告问题

《解读为什么@Autowired在属性上被警告,在setter方法上不被警告问题》在Spring开发中,@Autowired注解常用于实现依赖注入,它可以应用于类的属性、构造器或setter方法上,然... 目录1. 为什么 @Autowired 在属性上被警告?1.1 隐式依赖注入1.2 IDE 的警告:

HTML5中下拉框<select>标签的属性和样式详解

《HTML5中下拉框<select>标签的属性和样式详解》在HTML5中,下拉框(select标签)作为表单的重要组成部分,为用户提供了一个从预定义选项中选择值的方式,本文将深入探讨select标签的... 在html5中,下拉框(<select>标签)作为表单的重要组成部分,为用户提供了一个从预定义选项中

在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程

《在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程》本文介绍了在Java中使用ModelMapper库简化Shapefile属性转JavaBean的过程,对比... 目录前言一、原始的处理办法1、使用Set方法来转换2、使用构造方法转换二、基于ModelMapper

JavaScript中的isTrusted属性及其应用场景详解

《JavaScript中的isTrusted属性及其应用场景详解》在现代Web开发中,JavaScript是构建交互式应用的核心语言,随着前端技术的不断发展,开发者需要处理越来越多的复杂场景,例如事件... 目录引言一、问题背景二、isTrusted 属性的来源与作用1. isTrusted 的定义2. 为

Java如何通过反射机制获取数据类对象的属性及方法

《Java如何通过反射机制获取数据类对象的属性及方法》文章介绍了如何使用Java反射机制获取类对象的所有属性及其对应的get、set方法,以及如何通过反射机制实现类对象的实例化,感兴趣的朋友跟随小编一... 目录一、通过反射机制获取类对象的所有属性以及相应的get、set方法1.遍历类对象的所有属性2.获取

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE

滚雪球学Java(87):Java事务处理:JDBC的ACID属性与实战技巧!真有两下子!

咦咦咦,各位小可爱,我是你们的好伙伴——bug菌,今天又来给大家普及Java SE啦,别躲起来啊,听我讲干货还不快点赞,赞多了我就有动力讲得更嗨啦!所以呀,养成先点赞后阅读的好习惯,别被干货淹没了哦~ 🏆本文收录于「滚雪球学Java」专栏,专业攻坚指数级提升,助你一臂之力,带你早日登顶🚀,欢迎大家关注&&收藏!持续更新中,up!up!up!! 环境说明:Windows 10