从TypeScript源代码构建流程图控件GoJS教程

Posted 2020-12-21

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在javascript 和html5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

点击下载GoJS最新版

所有客户都可以使用go.js和go-debug.js文件运行他们的应用程序。但是，如果您购买了GoJS TypeScript源代码的许可证，则可以从TypeScript源构建您的应用程序。流行的模块打包器（例如Webpack）可以从源中删除许多模块（如果您不使用它们），以缩小可交付文件的大小。

由于go.js和go-debug.js文件是在自定义过程中构建的，目的是减小大小，因此即使WebWeb或其他捆绑器与GoJS源一起使用，即使它删除了未使用的模块，也可能导致文件大小比仅使用更大go.js。但是，TypeScript作者可能会喜欢从源代码构建的反馈和调试功能。

MinimalSource和MaximalSource项目

GoJS套件在/projects目录 /minimalSource和下有两个子目录/maximalSource。

该minimalSource 项目展示了如何建立GoJS同时去除一切可能的可选模块。该maximalSource 项目展示了如何建立GoJS同时匹配释放go.js的功能和去-debug.js文件。

这两个项目需要webpack和npm运行。

另外还有minimalSourceBrowserify，它显示了如何使用Browserify而不是Webpack从源进行构建。

从源代码构建时可以删除的类/模块

几个类（例如CommandHandler和工具）可能对于添加到您的项目中是必不可少的，而其他类（例如，除了一种Layout和一种类型的所有类）Model通常可以删除。以下是webpack可以从构建中删除的模块的列表，前提是您的代码中未引用这些模块：
CommandHandler，是键盘功能所必需的。
SVGSurface，需要调用Diagram.makeSvg
树模型
GraphLinksModel，无需加载此模块，默认的Diagram.model的类型为Model。
总览
调色板
版面：
网格布局
树布局
LayeredDigraphLayout
环形布局
ForceDirectedLayout。
鼠标按下工具：
动作工具
重新链接工具
链接重塑工具
调整大小工具
旋转工具
鼠标移动工具：
链接工具
拖曳工具
DragSelecting工具
平移工具
鼠标向上工具：
ContextMenu工具
文字编辑工具
ClickCreating工具
点击选择工具
有几种“内置”面板类型，每种类型都是PanelLayout。其中一些是构建源所必需的：
PanelLayoutPosition
PanelLayoutVertical
PanelLayoutLink
PanelLayoutAuto
PanelLayoutGrid
但是，可以在没有以下面板类型的情况下进行构建：
PanelLayoutHorizontal
PanelLayoutSpot
PanelLayoutTable
PanelLayoutViewbox
PanelLayoutTableRow
PanelLayoutTableColumn
PanelLayoutGraduated
源索引文件演示了Panel.addPanelLayout包括每种面板类型的必要调用。
使用可选类

许多类仅需要用于包含在源代码构建中。对于某些功能，例如工具，CommandHandler和SVGSurface，您需要确保显式初始化它们。可以在maximalSource项目的maximal-index.ts代码中找到此示例。完整go.js库不需要这样做，因为该go对象已经具有对每个对象的引用。

一个典型的GoJS项目不会删除所有甚至大部分这些模块，并且可能会使用其中的大多数。由于Northwood的内部构建过程已经过优化，可以在高级模式下使用Google Closure编译器，因此可能需要花费大量精力才能go.js 从源代码中生成一个小于项目发行目录中包含的软件包的软件包。

有关GoJS源代码的重要许可证信息

GoJS源代码受SoftwareLicenseAgreement.pdf中包含的我们许可条款的约束。

请勿使用，释放（部署）或分发未缩小的源代码。要为自己的应用程序构建GoJS，您必须使用流行的混淆/缩小工具，例如Google Closure Compiler。

如果您认为可以从其他图形优化中受益，那么会遇到独特或节点数量多的图表情况，请联系客服。

想要购买GoJS正版授权，或了解更多产品信息请点击【咨询在线客服】