Go.js 没有中文文档 也没有中文demo 学起来很费劲 给大家整理一个算是详细的文档
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Draggable Link</title>
<meta name="description"
content="Drag a link to reconnect it. Nodes have custom Adornments for selection, resizing, and reshaping."/>
<meta charset="UTF-8">
<script src="js/go/go1.js"></script>
<!--<script src="../assets/js/goSamples.js"></script> <!– this is only for the GoJS Samples framework –>-->
<script id="code">
function init() {
if (window.goSamples) goSamples(); // 这些样本的init - 你不需要调用它
var $ = go.GraphObject.make; // 为了简洁定义模板
myDiagram =
$(go.Diagram, "myDiagramDiv", // 必须命名或引用div HTML元素
{
grid: $(go.Panel, "Grid",
$(go.Shape, "LineH", {stroke: "lightgray", strokeWidth: 0.5}),
$(go.Shape, "LineH", {stroke: "gray", strokeWidth: 0.5, interval: 10}),
$(go.Shape, "LineV", {stroke: "lightgray", strokeWidth: 0.5}),
$(go.Shape, "LineV", {stroke: "gray", strokeWidth: 0.5, interval: 10})
),
allowDrop: true, // 必须是真的才能接受调色板中的液滴
"draggingTool.dragsLink": true,
"draggingTool.isGridSnapEnabled": true,
"linkingTool.isUnconnectedLinkValid": true,
"linkingTool.portGravity": 20,
"relinkingTool.isUnconnectedLinkValid": true,
"relinkingTool.portGravity": 20,
"relinkingTool.fromHandleArchetype":
$(go.Shape, "Diamond", {
segmentIndex: 0,
cursor: "pointer",
desiredSize: new go.Size(8, 8),
fill: "tomato",
stroke: "darkred"
}),
"relinkingTool.toHandleArchetype":
$(go.Shape, "Diamond", {
segmentIndex: -1,
cursor: "pointer",
desiredSize: new go.Size(8, 8),
fill: "darkred",
stroke: "tomato"
}),
"linkReshapingTool.handleArchetype":
$(go.Shape, "Diamond", {
desiredSize: new go.Size(7, 7),
fill: "lightblue",
stroke: "deepskyblue"
}),
rotatingTool: $(TopRotatingTool), // 定义如下
"rotatingTool.snapAngleMultiple": 15,
"rotatingTool.snapAngleEpsilon": 15,
"undoManager.isEnabled": true
});
// 当文档被修改时，为标题添加一个“*”并启用“保存”按钮
myDiagram.addDiagramListener("Modified", function (e) {
var button = document.getElementById("SaveButton");
if (button) button.disabled = !myDiagram.isModified;
var idx = document.title.indexOf("*");
if (myDiagram.isModified) {
if (idx < 0) document.title += "*";
} else {
if (idx >= 0) document.title = document.title.substr(0, idx);
}
});
// 定义一个创建通常透明的“端口”的函数。
//“name”用作GraphObject.portId，“spot”用于控制链接的连接方式
// 以及端口在节点上的位置以及布尔型“输出”和“输入”参数
// 控制用户是否可以从端口或从端口获取链接。
function makePort(name, spot, output, input) {
// 港口基本上只是一个小透明的广场
return $(go.Shape, "Circle",
{
fill: null, // 没有看到，默认情况下; 通过showSmallPorts设置为半透明灰色，如下定义
stroke: null,
desiredSize: new go.Size(7, 7),
alignment: spot, // 对齐主Shape中的端口
alignmentFocus: spot, // 只是在形状内
portId: name, // 声明这个对象是一个“端口”
fromSpot: spot, toSpot: spot, // 声明链接可能在此端口连接的位置
fromLinkable: output, toLinkable: input, // 声明用户是否可以在此处绘制链接
cursor: "pointer" // 显示不同的光标以指示潜在的链接点
});
} var nodeSelectionAdornmentTemplate =
$(go.Adornment, "Auto",
$(go.Shape, {fill: null, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2]}),
$(go.Placeholder)
);
var nodeResizeAdornmentTemplate =
$(go.Adornment, "Spot",
{locationSpot: go.Spot.Right},
$(go.Placeholder),
$(go.Shape, {
alignment: go.Spot.TopLeft,
cursor: "nw-resize",
desiredSize: new go.Size(6, 6),
fill: "lightblue",
stroke: "deepskyblue"
}),
$(go.Shape, {
alignment: go.Spot.Top,
cursor: "n-resize",
desiredSize: new go.Size(6, 6),
fill: "lightblue",
stroke: "deepskyblue"
}),
$(go.Shape, {
alignment: go.Spot.TopRight,
cursor: "ne-resize",
desiredSize: new go.Size(6, 6),
fill: "lightblue",
stroke: "deepskyblue"
}),
$(go.Shape, {
alignment: go.Spot.Left,
cursor: "w-resize",
desiredSize: new go.Size(6, 6),
fill: "lightblue",
stroke: "deepskyblue"
}),
$(go.Shape, {
alignment: go.Spot.Right,
cursor: "e-resize",
desiredSize: new go.Size(6, 6),
fill: "lightblue",
stroke: "deepskyblue"
}),
$(go.Shape, {
alignment: go.Spot.BottomLeft,
cursor: "se-resize",
desiredSize: new go.Size(6, 6),
fill: "lightblue",
stroke: "deepskyblue"
}),
$(go.Shape, {
alignment: go.Spot.Bottom,
cursor: "s-resize",
desiredSize: new go.Size(6, 6),
fill: "lightblue",
stroke: "deepskyblue"
}),
$(go.Shape, {
alignment: go.Spot.BottomRight,
cursor: "sw-resize",
desiredSize: new go.Size(6, 6),
fill: "lightblue",
stroke: "deepskyblue"
})
);
var nodeRotateAdornmentTemplate =
$(go.Adornment,
{locationSpot: go.Spot.Center, locationObjectName: "CIRCLE"},
$(go.Shape, "Circle", {
name: "CIRCLE",
cursor: "pointer",
desiredSize: new go.Size(7, 7),
fill: "lightblue",
stroke: "deepskyblue"
}),
$(go.Shape, {
geometryString: "M3.5 7 L3.5 30",
isGeometryPositioned: true,
stroke: "deepskyblue",
strokeWidth: 1.5,
strokeDashArray: [4, 2]
})
);
myDiagram.nodeTemplate =
$(go.Node, "Spot",
{locationSpot: go.Spot.Center},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate},
{resizable: true, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate},
{rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate},
new go.Binding("angle").makeTwoWay(),
//主要对象是围绕具有形状的TextBlock的面板
$(go.Panel, "Auto",
{name: "PANEL"},
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
$(go.Shape, "Rectangle", // 默认数字
{
portId: "", // 默认端口：如果链接数据没有位置，请使用最近端
fromLinkable: true, toLinkable: true, cursor: "pointer",
fill: "white", // default color
strokeWidth: 2
},
new go.Binding("figure"),
new go.Binding("fill")),
$(go.TextBlock,
{
font: "bold 11pt Helvetica, Arial, sans-serif",
margin: 8,
maxSize: new go.Size(160, NaN),
wrap: go.TextBlock.WrapFit,
editable: true
},
new go.Binding("text").makeTwoWay())
),
// 四个小的有名港口，每边一个：
makePort("T", go.Spot.Top, false, true),
makePort("L", go.Spot.Left, true, true),
makePort("R", go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, true, false),
{ // 处理鼠标进入/离开事件以显示/隐藏端口
mouseEnter: function (e, node) {
showSmallPorts(node, true);
},
mouseLeave: function (e, node) {
showSmallPorts(node, false);
}
}
); function showSmallPorts(node, show) {
node.ports.each(function (port) {
if (port.portId !== "") { // 不要更改默认端口，这是一个很大的形状
port.fill = show ? "rgba(0,0,0,.3)" : null;
}
});
} var linkSelectionAdornmentTemplate =
$(go.Adornment, "Link",
$(go.Shape,
// isPanelMain声明这个Shape共享Link.geometry
{isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0}) // 使用选择对象的strokeWidth
);
myDiagram.linkTemplate =
$(go.Link, // 整个链接面板
{selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate},
{relinkableFrom: true, relinkableTo: true, reshapable: true},
{
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 5,
toShortLength: 4
},
new go.Binding("points").makeTwoWay(),
$(go.Shape, // the link path shape
{isPanelMain: true, strokeWidth: 2}),
$(go.Shape, // the arrowhead
{toArrow: "Standard", stroke: null}),
$(go.Panel, "Auto",
new go.Binding("visible", "isSelected").ofObject(),
$(go.Shape, "RoundedRectangle", // 链接形状
{fill: "#F8F8F8", stroke: null}),
$(go.TextBlock,
{
textAlign: "center",
font: "10pt helvetica, arial, sans-serif",
stroke: "#919191",
margin: 2,
minSize: new go.Size(10, NaN),
editable: true
},
new go.Binding("text").makeTwoWay())
)
);
load(); // 从一些JSON文本加载初始图
// 初始化页面左侧的Palette
myPalette =
$(go.Palette, "myPaletteDiv", // 必须命名或引用DIV HTML元素
{
maxSelectionCount: 1,
nodeTemplateMap: myDiagram.nodeTemplateMap, // 共享myDiagram使用的模板
linkTemplate: // 简化链接模板，就在这个调色板中
$(go.Link,
{ // 因为GridLayout.alignment是Location，并且节点具有locationSpot == Spot.Center，
// 以相同的方式排列链接，我们必须假装链接具有相同的位置点
locationSpot: go.Spot.Center,
selectionAdornmentTemplate:
$(go.Adornment, "Link",
{locationSpot: go.Spot.Center},
$(go.Shape,
{isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0}),
$(go.Shape, // the arrowhead
{toArrow: "Standard", stroke: null})
)
},
{
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 5,
toShortLength: 4
},
new go.Binding("points"),
$(go.Shape, // 链接路径形状
{isPanelMain: true, strokeWidth: 2}),
$(go.Shape, // 箭头
{toArrow: "Standard", stroke: null})
),
model: new go.GraphLinksModel([ // 指定调色板的内容
//{text: "模块内容", figure: "形状", fill: "颜色"},值可以接受变量
{text: "接听",figure: "RoundedRectangle"},
{text: "确认身份"},
{text: "还款提醒"},
{text: "应答", figure: "Diamond"},
{text: "处理"},
{text: "挂机2", figure: "RoundedRectangle"}
], [
// 调色板也有一个断开的链接，用户可以拖放
{points: new go.List(go.Point).addAll([new go.Point(0, 0), new go.Point(30, 0), new go.Point(30, 40), new go.Point(60, 40)])}
])
});
} function TopRotatingTool() {
go.RotatingTool.call(this);
} go.Diagram.inherit(TopRotatingTool, go.RotatingTool);
/** @override */
TopRotatingTool.prototype.updateAdornments = function (part) {
go.RotatingTool.prototype.updateAdornments.call(this, part);
var adornment = part.findAdornment("Rotating");
if (adornment !== null) {
adornment.location = part.rotateObject.getDocumentPoint(new go.Spot(0.5, 0, 0, -30)); // 在中间顶部以上
}
};
/** @override */
TopRotatingTool.prototype.rotate = function (newangle) {
go.RotatingTool.prototype.rotate.call(this, newangle + 90);
};
// TopRotatingTool类的结尾
// 以JSON格式显示用户可编辑的图表模型
function save() {
saveDiagramProperties(); // 在写入JSON之前先执行此操作
document.getElementById("mySavedModel").value = myDiagram.model.toJson();
myDiagram.isModified = false;
} function load() {
myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
loadDiagramProperties(); // 在Model.modelData被带入内存后执行此操作
} function saveDiagramProperties() {
myDiagram.model.modelData.position = go.Point.stringify(myDiagram.position);
} function loadDiagramProperties(e) {
// 设置Diagram.initialPosition而不是Diagram.position，以处理初始化副作用
var pos = myDiagram.model.modelData.position;
if (pos) myDiagram.initialPosition = go.Point.parse(pos);
}
</script>
</head>
<body onload="init()">
<div id="sample">
<div style="width: 100%; display: flex; justify-content: center">
<div id="myPaletteDiv"
style="width: 105px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black"></div>
<div id="myDiagramDiv" style="flex-grow: 1; height: 620px; border: solid 1px black"></div>
</div>
<p>
此示例演示了用户像链接节点一样拖动链接的功能。当链接的任一端经过有效端口时，端口将突出显示。。
</p>
<p>
此示例演示了用户像链接节点一样拖动链接的功能。当链接的任一端经过有效端口时，端口将突出显示。。
</p>
<p>
通过设置部分或全部以下属性可启用链接拖动功能：
<a>DraggingTool.dragsLink</a>, <a>LinkingTool.isUnconnectedLinkValid</a>,and
<a>RelinkingTool.isUnconnectedLinkValid</a>.
</p>
<p>
请注意，Link中存在<a>Palette</a>这样它也可以拖出来并放到主图上。
因为当任何一端没有与节点连接时链路不会自动路由，所以在定义该组件选项时显式提供路由。
</p>
<p>
这也演示了几个习惯修饰：
<a>Part.selectionAdornmentTemplate</a>, <a>Part.resizeAdornmentTemplate</a>, and
<a>Part.rotateAdornmentTemplate</a>.
</p>
<p>
最后这个例子演示了保存和恢复<a>Diagram.position</a>作为财产<a>Model.modelData</a>调用时会自动保存并恢复的对象<a>Model.toJson</a>
和<a>Model.fromJson</a>.
</p>
<div>
<div>
<button id="SaveButton" onclick="save()">Save</button>
<button onclick="load()">Load</button>
以JSON格式保存的图表模型：
</div>
<textarea id="mySavedModel" style="width:100%;height:300px">
{ "class": "go.GraphLinksModel",
"linkFromPortIdProperty": "fromPort",
"linkToPortIdProperty": "toPort",
"nodeDataArray": [
],
"linkDataArray": [
]}
</textarea>
</div>
</div>
</body>
</html>
版权声明：本文为博主原创文章，未经博主允许不得转载
详细文档地址:https://www.cnblogs.com/Zhushaoyu/p/9068943.html
Go.js 没有中文文档 也没有中文demo 学起来很费劲 给大家整理一个算是详细的文档的更多相关文章
- Web3.js API 中文文档
Web3.js API 中文文档 http://web3.tryblockchain.org/Web3.js-api-refrence.html web3对象提供了所有方法. 示例: //初始化过程 ...
- 以太坊智能合约开发，Web3.js API 中文文档 ethereum web3.js入门说明
以太坊智能合约开发,Web3.js API 中文文档 ethereum web3.js入门说明 为了让你的Ðapp运行上以太坊,一种选择是使用web3.js library提供的web3.对象.底层实 ...
- 【转】Jsduck一个纯净的前端文档生成神器
让前端程序更具可维护性,是一个老生常谈的问题,大多数时候我们都关注于应用层面的代码可维护性,如:OO.模块化.MVC,编码规范.可扩展和复用性,但这都是属于设计层面需要考虑的事情,可维护性还应包含另一 ...
- OpenStack Ocata 超详细搭建文档
前言 搭建前必须看我本文档搭建的是分布式O版openstack(controller+ N compute + 1 cinder)的文档.openstack版本为Ocata.搭建的时候,请严格按照文档 ...
- （亲测解决）每次打开excel文件都会出现两个窗口，一个是空白的sheet1，另一个是自己的文档
版权声明:本文为博主原创文章,转载请注明出处! https://blog.csdn.net/sinat_34104446/article/details/80210424 一.问题描述每次打开Exce ...
- Linux rhel7 下MySQL5.7.18详细安装文档
Linux rhel7 下MySQL5.7.18详细安装文档 本文安装MySQL5.7使用的是vm虚拟机rhel7操作系统 ,ftp文件传输是FileZilla3.27,远程连接xssh5.0 1 登 ...
- 最近学习工作流 推荐一个activiti 的教程文档
全文地址:http://www.mossle.com/docs/activiti/ Activiti 5.15 用户手册 Table of Contents 1. 简介 协议 下载 源码 必要的软件 ...
- GitBook一个专注于帮助文档的工具
官网:https://www.gitbook.com GitHub组织:https://github.com/gitbookio GitBook一个专注于帮助文档的工具,比如: 1.简单的左侧列表右侧 ...
- elasticsearch _create api创建一个不存在的文档
https://www.elastic.co/guide/cn/elasticsearch/guide/current/create-doc.html当我们索引一个文档, 怎么确认我们正在创建一个完全 ...
随机推荐
- Sublime Text 3 中实现编译C语言程序
这个是真坑,感觉用devc++写c程序特别的不爽,所以就用了sublime,但是,编译的时候又有不少问题, 下面就把我踩的坑记录下来 tools>Build System>New Buil ...
- Day 19 磁盘管理
1.磁盘的基本概念 1.什么是磁盘 磁盘(disk)是指利用磁记录技术存储数据的存储器. 磁盘是计算机主要的存储介质,可以存储大量的二进制数据,并且断电后也能保持数据不丢失. *绝大多数人对硬盘都不陌 ...
- [C++]invalid initialization of non-const reference of type 'std::__cxx11::string& {aka std::__cxx11::basi
解决方法:在参数前面加一个cosnt或者把引用符号去掉
- python常用数据结构讲解
一:序列 在数学上,序列是被排成一排的对象,而在python中,序列是最基本的数据结构.它的主要特征为拥有索引,每个索引的元素是可迭代对象.都可以进行索引,切片,加,乘,检查成员等操作.在py ...
- Node 与JS的区别
1.nodejs是运行于服务器端的:2.global:代表node当中的一个全局对象,类似于浏览器当中的window,定义全局对象:global.a:3.作用域:nodejs中一个文件就是一个作用域: ...
- 从 HTTP/1 到 HTTP/2，以及即将到来的 HTTP/3
如今的生活中已经离不开互联网,智能家居.在线支付.网上购物都需要互联网的支持.互联网切切实实地给生活带来了诸多便利.有了互联网,我们可以呆在空调房里,一边刷着微博,一边等透心凉的西瓜送到手上,安安静静 ...
- mybatis中Insert后主键返回
1.Mapper的写法,返回的这个int是受影响的行号 int insertNewUser(User newUser); 2.xml的写法 <!--返回主键 形式1 --> <ins ...
- commons-beanutils.jar及其支持文件
下载地址: 链接:https://pan.baidu.com/s/1AtiK3nsk0aBuBfMdNwBVGw 密码:6tul
- 详解http报文
摘要 作为一个web开发者,每天都在使用者Http协议,却总是一知半解.本文参看Http RFC7230规范,梳理了http报文部分. http 报文构成 start-line: 起始行,描述请求或响 ...
- SUSE Linux Enterprise 15 SP1 系统安装
从 SUSE Linux Enterprise Server 15 开始,安装媒体仅包含安装程序 - 一个用于安装.更新和注册 SUSE Linux Enterprise Server 的基于命令行的 ...