Group相关问题-组内节点限制移动范围

加冰麋鹿的二狼

已于 2023-05-12 18:55:47 修改

阅读量569

点赞数

于 2023-05-12 18:48:18 首次发布

本文链接：https://blog.csdn.net/qq_29287561/article/details/130648398

版权

gojs 同时被 2 个专栏收录

15 篇文章 3 订阅

订阅专栏

gojs 常见问题

5 篇文章 0 订阅

订阅专栏

1.在节点中定义dragComputation,限制节点的移动范围

注意事项

组节点不定义go.Placeholder ,设置了占位符后组内节点移动将改变组节点位置
dragComputation中自定义stayInGroup计算规则是根据groupNode的resizeObject计算
如果开启了resizable:true,建议指定其改变大的零部件resizeObjectName: “PH”,

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			canvas {
				border: 0px;
				outline: none;
			}
		</style>
		<script src="js/go-2.0.11.js"></script>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			$(function() {
				gojsInit();
			});

			function gojsInit() {
				var $ = go.GraphObject.make; // for conciseness in defining templates
				diagram =
					$(go.Diagram, "myDiagram", // must name or refer to the DIV HTML element
						{
							initialContentAlignment: go.Spot.Center, //初始位置
							initialScale: 1.5, //初始比例
						});
				diagram.nodeTemplate =
					$(go.Node, {
							dragComputation: stayInGroup
						},
						new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
						$(go.TextBlock,
							new go.Binding("text", "key"))
					);

				diagram.groupTemplate =
					$(go.Group, "Vertical", {
							selectionObjectName: "PH",
							locationObjectName: "PH",
							resizeObjectName: "PH",
							resizable:true
						},
						new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
						$(go.TextBlock, // group title
							{
								font: "Bold 12pt Sans-Serif"
							},
							new go.Binding("text", "key")),
						$(go.Shape, // using a Shape instead of a Placeholder
							{
								name: "PH",
								fill: "lightyellow"
							},
							new go.Binding("desiredSize", "size", go.Size.parse))
					);

				var nodeDataArray = [{
						key: "Alpha",
						loc: "0 0"
					},
					{
						key: "Beta",
						group: "Omega",
						loc: "75 75"
					},
					{
						key: "Gamma",
						group: "Omega",
						loc: "125 75"
					},
					{
						key: "Omega",
						isGroup: true,
						loc: "50 50",
						size: "150 50"
					},
					{
						key: "Delta",
						loc: "200 0"
					}
				];
				var linkDataArray = [{
						from: "Alpha",
						to: "Beta"
					}, // from outside the Group to inside it
					{
						from: "Beta",
						to: "Gamma"
					}, // this link is a member of the Group
					{
						from: "Omega",
						to: "Delta"
					} // from the Group to a Node
				];
				diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

				function stayInGroup(part, pt, gridpt) {
					// 获取节点所在组
					const grp = part.containingGroup;
					if(grp === null) return pt;
					// 获取组节点访问
					const back = grp.resizeObject;
					if(back === null) return pt;
					// 如果按下Shift键，则允许将节点拖出组
					if(part.diagram.lastInput.shift) return pt;
					const r = back.getDocumentBounds();
					const b = part.actualBounds;
					const loc = part.location;
					// 限制节点移动范围
					const x = Math.max(r.x, Math.min(pt.x, r.right - b.width - 1)) + (loc.x - b.x);
					const y = Math.max(r.y, Math.min(pt.y, r.bottom - b.height - 1)) + (loc.y - b.y);
					return new go.Point(x, y);
				}

			}

			function save() {
				document.getElementById("mySavedModel").value = diagram.model.toJson();
				diagram.isModified = false;
			}

			function load() {
				diagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
			}
		</script>
	</head>

	<body>
		<div id="sample">
			<div style="width:100%; white-space:nowrap;">
				<span style="display: inline-block; vertical-align: top; padding: 5px; width:95%">
      			<div  id="myDiagram" style="border: solid 1px gray; height: 400px"></div>
      			<button id="saveModel" onclick="save()">Save</button>
    			<button id="loadModel" onclick="load()">Load</button>
    		</span>
			</div>
			<textarea id="mySavedModel" style="width:100%;height:300px">
  	 		 </textarea>
		</div>
	</body>

</html>

加冰麋鹿的二狼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Group相关问题-组内节点限制移动范围

1.在节点中定义dragComputation,限制节点的移动范围注意事项组节点不定义go.Placeholder ,设置了占位符后组内节点移动将改变组节点位置dragComputation中自定义stayInGroup计算规则是根据groupNode的resizeObject计算如果开启了resizable:true,建议指定其改变大的零部件resizeObjectName: “PH”,<!DOCTYPE html><html> <head lang="e
复制链接

扫一扫