第八节：Nodify 编辑器属性

2024-08-23 18:04
文章标签 编辑器 属性 第八节 nodify

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

引言

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

1、编辑器

平移
简介属性默认值
平移功能 控制DisablePanningfalse
平移过程中IsPanning =>true/
平移过程中ViewportSize, ViewportLocation 和 ViewportTransform自动更新/
自动平移 控制DisableAutoPanningfalse
自动平移速度AutoPanSpeed15 pixels
触发自动平移的边缘距离AutoPanEdgeDistance1 millisecond
缩放
简介属性默认值
缩放功能 控制DisableZoomingfalse
缩放过程中ViewportSize, ViewportLocation 和 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、连接

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

4.1、基本连接

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

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

连接方向Direction有两种值：

  • Forward

imageimage

  • Backward

imageimage

 SourceOffset和TargetOffset与OffsetMode一起使用，会控制与锚点的距离：

 连接还有一个Spacing属性，会使连接在一段距离后转折到沿着从Source和Target点的方向：

  • 有间距：

image

  • 无间距：

image

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

 4.2、线连接

一条从Source到Target的直线。

4.3、电路连接

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

4.4、曲线连接

 Source和Target之间的贝塞尔曲线。

 5、连接器

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

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

5.1、NodeInput和NodeOutPut

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

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


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

相关文章

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

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

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

HTML5自定义属性对象Dataset

原文转自HTML5自定义属性对象Dataset简介 一、html5 自定义属性介绍 之前翻译的“你必须知道的28个HTML5特征、窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍，就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放，例如我们要在一个文字按钮上存放相对应的id： <a href="javascript:" d
阅读更多...
Python中的属性装饰器：解锁更优雅的编程之道

Python中的属性装饰器：解锁更优雅的编程之道

引言 在Python的世界里，装饰器是一个强大的工具，它允许我们以一种非侵入性的方式修改函数或方法的行为。而当我们谈论“属性装饰器”时，则是在探讨如何使用装饰器来增强类中属性的功能。这不仅让我们的代码更加简洁、易读，同时也提供了强大的功能扩展能力。本文将带你深入了解属性装饰器的核心概念，并通过一系列实例展示其在不同场景下的应用，从基础到进阶，再到实际项目的实战经验分享，帮助你解锁Python编程
阅读更多...
react笔记 8-17 属性绑定 class绑定 引入图片 循环遍历

react笔记 8-17 属性绑定 class绑定 引入图片 循环遍历

1、绑定属性 constructor(){super()this.state={name:"张三",title:'我是一个title'}}render() {return (<div><div>aaaaaaa{this.state.name}<div title={this.state.title}>我是一个title</div></div></div>)} 绑定属性直接使用花括号{}   注
阅读更多...
ConstraintLayout布局里的一个属性app:layout_constraintDimensionRatio

ConstraintLayout布局里的一个属性app:layout_constraintDimensionRatio

ConstraintLayout 这是一个约束布局，可以尽可能的减少布局的嵌套。有一个属性特别好用，可以用来动态限制宽或者高app:layout_constraintDimensionRatio 关于app:layout_constraintDimensionRatio参数 app:layout_constraintDimensionRatio=“h,1:1” 表示高度height是动态变化
阅读更多...
Python中的私有属性与方法：解锁面向对象编程的秘密

Python中的私有属性与方法：解锁面向对象编程的秘密

在Python的广阔世界里，面向对象编程（OOP）是一种强大而灵活的方法论，它帮助我们更好地组织代码、管理状态，并构建可复用的软件组件。而在这个框架内，私有属性与方法则是实现封装的关键机制之一。它们不仅有助于隐藏类内部的具体实现细节，还能保护数据免受外部干扰。今天，让我们一起探索Python中私有属性与方法的魅力所在，了解它们如何在实际开发中发挥重要作用。 引言 随着软件系统变得越来越复杂，维
阅读更多...
转：android ro.debuggable属性调试修改(mprop逆向)

转：android ro.debuggable属性调试修改(mprop逆向)

android ro属性调试修改(mprop逆向)      大家都知道如果需要调试android 的程序，以下两个条件满足一个就行。第一是apk的配置文件内的AndroidManifest.xml的 android:debuggable=”true”，第二就是/default.prop中ro.debuggable=1。两种方式第一种通常是解包添加属性再打包，随着加壳软件以及apk校验等，容易出
阅读更多...
spring事务属性的xml格式配置

spring事务属性的xml格式配置

实际是使用代理做的事务优化 <!--配置事务的属性--><tx:advice id="txAdvice" transaction-manager="transactionManager"> <tx:attributes> <!--匹配所有以add开头的方法--><tx:method name="add*" propagation="REQUIRED" /> <tx:metho
阅读更多...
使用http-request 属性替代action绑定上传URL

使用http-request 属性替代action绑定上传URL

在 Element UI 的 <el-upload> 组件中，如果你需要为上传的 HTTP 请求添加自定义的请求头（例如，为了通过身份验证或满足服务器端的特定要求），你不能直接在 <el-upload> 组件的属性中设置这些请求头。但是，你可以通过 http-request 属性来自定义上传的行为，包括设置请求头。 http-request 属性允许你完全控制上传的行为，包括如何构建请求、发送请
阅读更多...
MyBatis学习——解决字段名与实体类属性名不相同的冲突

MyBatis学习——解决字段名与实体类属性名不相同的冲突

转载地址：http://www.cnblogs.com/xdp-gacl/p/4264425.html
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2