GoJS 的基本概念

每个GoJS都有一个模型,它 holding 并解释你的应用数据,以确定节点间的链接关系和组成员关系。 大部分部分是与你的应用数据数据绑定的。

Category: GoJS

GoJS由部分组成:节点可以由链接连接,并且可以被分组到组中。 所有这些部分都聚集在层中,并由布局和路由器进行排列。

每个GoJS都有一个模型,它 holding 并解释你的应用数据,以确定节点间的链接关系和组成员关系。 大部分部分是与你的应用数据数据绑定的。 GoJS会自动为模型的Model.nodeDataArray中的每个数据项创建一个Node,为模型的 GraphLinksModel.linkDataArray中的每个数据项创建一个Link。 你可以为每个数据对象添加你需要的任何属性,但每种模型期望的属性只有少数几个。 它们在灰色的数据对象中以加粗形式显示。

每个节点或链接通常由一个模板定义,该模板声明其外观和行为。 每个模板由面板的图形对象如文本块或形状组成。 所有部分都有默认模板,但几乎所有的应用程序都会指定自定义模板 以实现所需的外观和行为。 图形对象属性的数据绑定到模型数据属性,使每个节点或链接对数据来说都是唯一的。

节点可以手动(交互地或通过程序)定位,或者 可以由 Diagram.layout和每个 Group.layout自动排列。 节点的位置可以通过其左上角点( GraphObject.position)或者 通过程序员定义的节点位置( Part.location和 Part.locationSpot)来确定。

工具处理鼠标和键盘以及触摸或笔输入事件。 每个GoJS都有多个工具执行交互任务,例如选择部分、拖动它们或在两个节点之间绘制新链接。 工具管理器根据鼠标事件和当前情况决定应运行哪个工具。

每个图表还有一个CommandHandler,它实现了各种命令,例如删除或复制。 CommandHandler在ToolManager运行时解释键盘事件,例如Ctrl-Z。

该图表提供了滚动图表各部分以及放大或缩小的功能。 图表还包含所有图层,这些图层又包含所有部分(节点和链接)。 这些部分进一步由可能嵌套的文本、形状和图像面板组成。 这些JavaScript对象在内存中的层次结构形成了GoJS可能绘制的所有内容的“视觉树”。

动画由AnimationManager实现和控制。 自动动画在自动布局和执行各种命令后自动发生。 您可以定义自己的自定义动画。

概述 类允许用户查看整个模型,并控制图表显示的模型的哪一部分。 调色板 类包含用户可以拖放到图表中的部件。

您可以选择GoJS中的一个或多个部分。模板实现可能会更改所选节点或链接的外观。图表还可能添加装饰来表示选择,并支持诸如调整节点大小或重新连接链接之类的工具。装饰也是实现工具提示和上下文菜单的方式。

对 Diagram、 GraphObject、 Model 或模型数据状态的所有程序化更改应在一个用户操作的事务中进行,以确保更新正确并支持撤销/重做。 所有预定义的工具和命令都会执行事务,因此如果启用了 UndoManager,每个用户操作都可以自动撤销。 DiagramEvent 在 Diagrams 上,以及在 Diagrams 和 GraphObjects 上的事件处理程序, 即使它们是在事务内引发的,或者你需要进行事务以更改模型或GoJS,都已文档化。

Tags: GoJS图表, JavaScript, 自定义模板

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部