[译] Introduction to GoJS Diagramming Components

全篇共 5215 字。按500字/分钟阅读,预计用时 10.4 分钟。总访问 61 次,日访问 2 次。

这世界有那么多美好的事物,如果不去发现,就会错过许多美好。GoJS是能在现代浏览器中轻松创建交互式图表的JavaScript库。GoJS支持图形化模版和数据绑定,即将模型数据绑定到图形化对象的属性上。开发者只需保存和恢复数据,那些简单的对象存储着你需要的属性。许多预定义的工具和命令实现了所有图表所需要的标准行为。只需设置属性就能定制外观和行为。

最简GoJS图表

下方代码片段定义了节点模版和模型数据,它会产生几个节点和连接线。

// 方便起见,直接看官网关于"Building Parts"的介绍。
var $ = go.GraphObject.make;

// 节点模版用来描述如何构建每个节点
diagram.nodeTemplate =
  $(go.Node, "Auto",  // 让形状自动适应文本块
    $(go.Shape, "RoundedRectangle",  // 使用圆角矩形
      // 将Node.data.color数据绑定到Shape.fill属性上
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 3 },  // 给文本一些外边距
      // 将Node.data.key数据绑定到TextBlock.text属性上
      new go.Binding("text", "key"))
  );

// 模型仅包含描述图表的基本信息
diagram.model = new go.GraphLinksModel(
[ // 数组中每一个对象对应一个节点;
  // 'color'是专门为当前图表特别添加的自定义属性,你也可以添加很多其它必要的属性。
  { key: "Alpha", color: "lightblue" },
  { key: "Beta", color: "orange" },
  { key: "Gamma", color: "lightgreen" },
  { key: "Delta", color: "pink" }
],
[ // 数组中每个对象对应一条连接线
  { from: "Alpha", to: "Beta" },
  { from: "Alpha", to: "Gamma" },
  { from: "Beta", to: "Beta" },
  { from: "Gamma", to: "Delta" },
  { from: "Delta", to: "Alpha" }
]);

// 启用Ctrl-Z达到撤销目的,启动Ctrl-Y达到重做目的。
diagram.undoManager.isEnabled = true;

效果如下方GIF所示:

前往GoJS官网亲自体验图表都有哪些有趣的交互方式,下面列出了可用的交互。

  • 可以用鼠标单击来选中一部分。被选中的节点会被一个蓝色的矩形包裹起来。被选中的连接线会被一条蓝色的线覆盖其上。
  • 可以同时选中多个元素。按住Shift键即可选中多个部分。按住Ctrl键可以切换元素的选中与为选中状态。
  • 还有另一种选中多个元素的方法,在画布背景的空白处按下鼠标,拖动鼠标将你想要选中的元素框起来,松开鼠标,框选起来的元素都变成了被选中状态。Shift和Ctrl同样起作用。
  • 用Ctrl+A选中图表上的全部元素。
  • 选中并拖拽元素可以移动元素的位置。
  • 复制被选中的部分,既可以执行Ctrl+C再执行Ctrl+V,也可以按住Ctrl键的同时拖拽要复制的元素。
  • 用Delete键删除被选中的元素。
  • 如果滚动条为可见状态,或容器比图表小以至于无法完全将图表显示出来,你可以平移图表查看被隐藏的部分,只需在空白背景上按下鼠标并拖拽。
  • 使用鼠标滑轮向上或向下滚动,或按住Shift的同时向左或向右滚动。按住Ctrl的同时缩小或放大。

在移动设备上用手指对画布和其上的元素进行平移、缩放、选中、拷贝、移动、删除、撤销、重做。能用键盘调用的大部分功能都能通过上下文菜单完成。

前往GoJS官网在线体验GoJS全部官方案例或者下载GoJS库和这些案例

GoJS概念

GoJS中的所有图表包含这些部分:Links连接线能将所有Nodes节点关联起来,这些节点能组装到一起构成了Group组。所有这些部分都聚集在Layers层上,并按Layouts布局排列。

每个图表都有一个模型,该模型保存并解释您的应用程序数据,以确定节点到节点的链接关系和组成员关系。大多数部分都是数据绑定到您的应用程序数据。该图自动为模型的数据中的每个数据项创建一个节点或组。模型的GraphLinksModel.linkDataArray中的每个数据项的nodeDataArray和一个Link。您可以向每个数据对象添加所需的任何属性。

每个节点或链接通常由声明其外观和行为的模板定义。每个模板都由GraphObjects面板(例如TextBlocks或Shapes)组成。所有部分都有默认模板,但是几乎所有应用程序都将指定自定义模板,以实现所需的外观和行为。GraphObject属性与模型数据属性的数据绑定使每个节点或链接对于数据而言都是唯一的。

节点可以手动(用户交互或编程控制)放置,也可以由Diagram.layout和每个Group.layout自动排列。通过节点的左上角点(GraphObject.position)或节点中程序员定义的点(Part.location和Part.locationSpot)定位节点。

Tools处理鼠标和键盘事件。每个图表都有许多执行交互任务的Tool,例如选择零件或拖动零件或在两个节点之间绘制新链接。ToolManager根据鼠标事件和当前情况确定应运行哪个工具。

每个图表还具有一个CommandHandler,可实现各种命令,例如Delete或Copy,例如删除或复制。当ToolManager运行时,CommandHandler解释键盘事件,例如control-Z。

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

Overview类使用户可以查看整个模型并控制该图显示的模型的哪一部分。Palette类包含用户可以拖放到图中的部分。

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

对图表GraphObject模型或模型数据状态的所有编程更改都应在每个用户操作的单个事务中执行,以确保更新正确进行并支持撤消/重做。所有预定义的工具和命令都执行事务,因此,如果启用了UndoManager,则每个用户操作都可以撤消。图表上的DiagramEvents以及图表和GraphObjects上的事件处理程序都记录在文档中,无论它们是在事务中引发的,还是是否需要进行事务以更改模型或图。

创建图表

GoJS不依赖任何JavaScript库或框架,因此您应该可以在任何环境中使用它。但是,它确实要求环境支持现代HTML和JavaScript——HTML5特性——Canvas等。

加载GoJS

在执行任何JavaScript代码以构建图表之前,您需要首先加载GoJS库。当前端代码包含该库时,go会暴露在window的全局属性中,开发者就可以使用GoJS制作图表。在开发阶段,我们建议你加载“go-debug.js”而不是“go.js”,以获得更多的运行时错误检查和调试能力。

我们建议你这样创建包含GoJS的HTML:

<!DOCTYPE html>  <!-- 标准的HTML5文档声明 -->
  <html>
    <head>
    . . .
    <!-- 包含GoJS库 -->
    <script src="go-debug.js"></script>

在ES6(ECMAScript 2015)获TypeScript代码中,像这样导入GoJS库:

import * as go from "./path/to/gojs/release/go";

或者,取决于你的npm配置环境:

import * as go from "gojs";

如果您想使用ES6模块,在…/release/目录中使用go-module.js。扩展类还可以在…/extensionsJSM/目录中作为ES6模块使用。

import * as go from "./path/to/gojs/release/go-module.js";
import { DoubleTreeLayout } from "./path/to/gojs/extensionsJSM/DoubleTreeLayout.js";

由Div元素托管GoJS

每一个图表必须包含在一个Div元素内。GoJS负责管理Div元素里的内容,但你可以像对待任何其它HTML元素那样对它定位、设置宽高、设置其它样式。图表将在Div元素内添加一个Canvas元素,并将图表绘制在上面——这就是用户实际看到的图表。Canvas元素会自动设置其自身宽高以适应Div容器的大小。

<body>
  . . .
  <!-- 请给DIV明确地设置大小,否则看不到任何东西。
       这里还添加了边框样式,希望能看到画布的边界。 -->
  <div id="myDiagramDiv" style="border: solid 1px blue; width:400px; height:150px"></div>

这样你就能创建会在JavaScript代码中引用这个Div元素的图表了。正如下方代码,创建一个图表。注意使用GoJS库的所有属性都要通过go.获取。

<!-- 用JavaScript在DIV元素哪你创建图表 -->
<!-- 'go'对象是命名空间,它保存这所有GoJS的属性和方法 -->
<script>
  var diagram = new go.Diagram("myDiagramDiv");
  diagram.model = new go.GraphLinksModel(
    [{ key: "Hello" },   // 一个数组存放着两个节点数据
     { key: "World!" }],
    [{ from: "Hello", to: "World!"}]  // 一个数组存放着连接线数据
  );
</script>

这样就完成了“Hello World!”的实现。

开发你的图表

GoJS将在发生问题时输出错误或警告消息。使用GoJS开发时,请务必检查浏览器的开发者控制台以获取信息。该库的“go-debug.js”版本包含额外的类型检查和错误检查代码,应在开发期间使用。“go.js”版本的错误检查较少,但结果是速度更快,应在生产中使用。

您的JavaScript代码应仅使用API中的属性和方法。GoJS库是“最小化”的,因此,如果在调试器中查看GoJS类的实例,则会看到许多一两个字母属性名称。所有这些都是您不应使用的内部名称。当前,在Point,Rect,Spot和LayoutVertex上,仅有的字母属性名称是“x”和“ y”。仅有的两个字母的属性名称是InputEvent.up。除此之外,您不应尝试在任何GoJS定义的对象上使用任何一个或两个字母属性名称。

不要修改GoJS类的原型Prototype。仅使用API中记录的属性和方法。

您还可以使用TypeScript以获得更好的“compile-time”类型检查。GoJS的TypeScript定义文件名为“go.d.ts”,与“go.js”和“go-debug.js”库位于同一目录中。在某些编辑器中,访问定义文件还可以极大地改善编辑TypeScript代码时的文档反馈。扩展类也已转换为TypeScript代码,可从…/extensionsTS/获得。


原文链接:GoJS Introduction

译者 » 陈帅华
发布日期 » 2020年6月15日 周一
更新日期 » 2020年7月1日 周三
上一篇 » JavaScript内置构造函数:Array
下一篇 » [译] Building Parts with GraphObjects
:)记录此刻想法
请选择登录方式,开始记录你的想法。
授权微博登录
授权Github登录