Group相关问题-组内节点限制移动范围
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 templatesdiagram =$(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>
相关文章：
Group相关问题-组内节点限制移动范围
1.在节点中定义dragComputation,限制节点的移动范围 注意事项 组节点不定义go.Placeholder ,设置了占位符后组内节点移动将改变组节点位置dragComputation中自定义stayInGroup计算规则是根据groupNode的resizeObject计算 如果开启了resizable:true,建议指定其改变大的零部件r…...
程序员该如何学习技术
程序员该如何学习技术 前言 学习是第一生产力，我从来都是这么认为的，人只有只有不断地学习才能意识到自己的缺点和不足，身为程序员，我更认为人们应当抱着终身学习的想法实践下去，这是我所一直践行且相信的。 高处不胜寒…...
springboot+vue交流互动系统（源码+文档）
风定落花生，歌声逐流水，大家好我是风歌，混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的交流互动系统。项目源码以及部署相关请联系风歌，文末附上联系信息 。 💕💕作者：风歌&a…...
【2023华为OD笔试必会25题--C语言版】《01 预定酒店》——排序、二分查找
本专栏收录了华为OD 2022 Q4和2023Q1笔试题目，100分类别中的出现频率最高（至少出现100次）的25道，每篇文章包括原始题目 和 我亲自编写并在Visual Studio中运行成功的C语言代码。 仅供参考、启发使用，切不可照搬、照抄，查重倒是可以过，但后面的技术面试还是会暴露的。✨✨…...
C语言实现队列--数据结构
😶🌫️Take your time ! 😶🌫️ 💥个人主页：🔥🔥🔥大魔王🔥🔥🔥 💥代码仓库：🔥🔥魔…...
前端CSS经典面试题总结
前端CSS经典面试题总结 2.1 介绍一 下 CSS 的盒子模型？2.2 css 选择器优先级？2.3 垂直居中几种方式？2.4 简明说一下 CSS link 与 import 的区别和用法？2.5 rgba和opacity的透明效果有什么不同？2.6 display:none和visib…...
cookie、session、token的区别是什么
前言 今天就来说说session、cookie、token这三者之间的关系！最近这仨玩意搞得头有点大🤣 1.为什么会有它们三个？ 我们都知道 HTTP 协议是无状态的，所谓的无状态就是客户端每次想要与服务端通信，都必须重新与服务端链接…...
leetcode分类刷题 -- 前缀和和哈希
力扣 class Solution { public int subarraySum(int[] nums, int k) { Map<Integer,Integer> map new HashMap<>(); int count0,sum0; map.put(0,1); for(int i:nums){ sum i; if(map.containsKey(sum-k)) count map.get(sum-k); map.compute(sum,(key,v)->…...
浅谈作为程序员如何写好文档：了解读者
我作为从一名懵懂的实习生转变为工程师的工作经历中，伴随着技术经验的成长，也逐渐意识到了编写文档是知识和经验传递给其他人的最有效方式。通过文档，可以分享我的技术知识和最佳实践，使其他人更好地理解我的工作。在这里…...
一文读懂国内首本《牛客2023金融科技校园招聘白皮书》
金融科技人才作为金融数字化转型的关键支撑，但当下金融科技人才培养体系尚未形成，优秀的金融科技人才供不应求，目前存在严重的人才供给问题。 据调研数据统计，96.8%的金融机构存在金融科技人才缺口，54.8%的机构认为新…...
深度学习03-卷积神经网络(CNN)
简介 CNN，即卷积神经网络（Convolutional Neural Network），是一种常用于图像和视频处理的深度学习模型。与传统神经网络相比，CNN 有着更好的处理图像和序列数据的能力，因为它能够自动学习图像中的特征&…...
你真正知道什么是品牌营销么？颠覆你旧有认知
什么是品牌营销，新时代也需要新时代的定义和诠释！ 尤其这次疫情加剧了行业竞争，让很多企业都开始重新重视品牌建设，以此实现对产品的价格保护，脱离同质化恶性竞争；提高品牌知名度，实现更高价值…...
pytorch 测量模型运行时间，GPU时间和CPU时间，model.eval()介绍
文章目录 1. 测量时间的方式2. model.eval(), model.train(), torch.no_grad()方法介绍2.1 model.train()和model.eval()2.2 model.eval()和torch.no_grad() 3. 模型推理时间方式4. 一个完整的测试模型推理时间的代码5. 参考： 1. 测量时间的方式 time.time() time.…...
十三、超时重试机制
目录 超时配置和重试机制 FeignClient 、Ribbon 、 Hystrix三个之间配置优先级的关系 配置常用属性 Ribbon超时和重试配置: Ribbon重试次数计算公式： FeignClient 超时配置： Hystrix超时配置： Hystrix超时计算公式： 超时配…...
JAVA常用API - Runtime和System
文章目录 前言 大家好,我是最爱吃兽奶,今天给大家带来JAVA常用API中的Runtime类和System类 那么就让我们一起去看看吧! 一、Rubtime 1.Rubtime是什么? 2.Runtime常用方法 Runtime提供了很多方法,在这里演示两个 public static Runtime getRuntime(): 返回当前运行时环境的…...
ANR实战案例 - FCM拉活启动优化
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 文章目录 系列文章目录前言一、Trace日志分析二、业务分析1.Firebase源码分析2.Firebase官方查看官方文档Dem…...
Kali-linux查看打开的端口
对一个大范围的网络或活跃的主机进行渗透测试，必须要了解这些主机上所打开的端口号。在Kali Linux中默认提供了Nmap和Zenmap两个扫描端口工具。为了访问目标系统中打开的TCP和UDP端口，本节将介绍Nmap和Zenmap工具的使用。 4.4.1 TCP端口扫描工具Nmap 使…...
判断浏览器是否支持webp图片
.WebP是谷歌主导的开放免费的网络图像格式，其核心编码来自VP8也就是同时支持WebP图片和WebM视频等。 这种图像格式追求的并不是无损画质，而是在有损画质的情况下尽可能的压缩图像体积但也尽量降低清晰度下降。 谷歌资助和发展该图像格式最主要的目的就是…...
【Qt编程之Widgets模块】-007：QTextStream类及QDataStream类
1 概述 QTextStream和QDataStream都是对流进行操作 QTextStream只能普通类型的流操作像QChar、QString、int…，其实就很类似我们c或者c中读写文件的感觉， QDataStream就厉害了，无论是QTextStream的普通类型的流操作还是一些特殊类型的流操作…...
js对map排序，后端返回有序的LinkedHashMap类型时前端获取后顺序依旧从小到大的解决方法
js对map排序，后端返回有序的LinkedHashMap类型时前端获取后顺序依旧从小到大的解决方法 js对map排序，后端返回有序的LinkedHashMap类型时前端获取后顺序依旧从小到大的解决方法 [{"2020": [{"id": 39,"createTime": &quo…...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周，有很多同学在写期末Java web作业时，运行tomcat出现乱码问题，经过多次解决与研究，我做了如下整理： 原因： IDEA本身编码与tomcat的编码与Windows编码不同导致，Windows 系统控制台…...
接口测试中缓存处理策略
在接口测试中，缓存处理策略是一个关键环节，直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性，避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明： 一、缓存处理的核…...
突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合
强化学习（Reinforcement Learning, RL）是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程，然后使用强化学习的Actor-Critic机制（中文译作“知行互动”机制），逐步迭代求解…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接：A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串，只有在同时为 o 时输出 Yes 并结束程序，否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...
DingDing机器人群消息推送
文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人，点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置，详见说明文档 成功后，记录Webhook 2 API文档说明 点击设置说明 查看自…...
CSS | transition 和 transform的用处和区别
省流总结： transform用于变换/变形，transition是动画控制器 transform 用来对元素进行变形，常见的操作如下，它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...
离线语音识别方案分析
随着人工智能技术的不断发展，语音识别技术也得到了广泛的应用，从智能家居到车载系统，语音识别正在改变我们与设备的交互方式。尤其是离线语音识别，由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力，广…...
【Kafka】Kafka从入门到实战：构建高吞吐量分布式消息系统
Kafka从入门到实战：构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台，最初由LinkedIn开发，后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理，能够处理来自多个生产者的海量数据，并将这些数据实时传递给消费者。 Kafka核心特…...
[USACO23FEB] Bakery S
题目描述 Bessie 开了一家面包店! 在她的面包店里，Bessie 有一个烤箱，可以在 t C t_C tC 的时间内生产一块饼干或在 t M t_M tM 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC,tM≤109)。由于空间…...