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…...
【架构实战】健康检查与故障转移机制
一、为什么需要健康检查 在分布式系统中，服务实例可能因为各种原因变得不可用，而调用方却毫不知情，继续向故障实例发送请求，导致大量失败。常见的服务不可用场景：- 进程假死：Java进程存在但无法响应请求&am…...
深度解析Windows设备指纹伪装技术：EASY-HWID-SPOOFER内核级硬件隐私保护实现
深度解析Windows设备指纹伪装技术：EASY-HWID-SPOOFER内核级硬件隐私保护实现 【免费下载链接】EASY-HWID-SPOOFER 基于内核模式的硬件信息欺骗工具 项目地址: https://gitcode.com/gh_mirrors/ea/EASY-HWID-SPOOFER 在数字化时代，硬件隐私保护已成…...
父子进程变量地址相同值却不同？图解Linux写时拷贝与页表机制
父子进程变量地址相同值却不同？图解Linux写时拷贝与页表机制 你是否曾在Linux环境下遇到过这样的现象：通过fork()创建的子进程与父进程打印同一个全局变量的地址时，两者的地址值完全相同，但实际读取的变量值却不同？这个…...
5个步骤彻底修复Windows更新问题：Reset Windows Update Tool完整指南
5个步骤彻底修复Windows更新问题：Reset Windows Update Tool完整指南 【免费下载链接】Reset-Windows-Update-Tool Troubleshooting Tool with Windows Updates (Developed in Dev-C). 项目地址: https://gitcode.com/gh_mirrors/re/Reset-Windows-Update-Tool …...
3步搞定大麦网自动抢票：告别手速不够的时代
3步搞定大麦网自动抢票：告别手速不够的时代 【免费下载链接】Automatic_ticket_purchase 大麦网抢票脚本 项目地址: https://gitcode.com/GitHub_Trending/au/Automatic_ticket_purchase 还在为抢不到心仪演唱会门票而烦恼吗？当周杰伦、五月天等热…...
揭秘Windows热键失踪案：Hotkey Detective侦探手册
揭秘Windows热键失踪案：Hotkey Detective侦探手册 【免费下载链接】hotkey-detective A small program for investigating stolen hotkeys under Windows 8 项目地址: https://gitcode.com/gh_mirrors/ho/hotkey-detective 你是否曾在Windows系统中按下熟悉的…...
在QCS6490开发板上跑通Yolov8n目标检测：从ONNX模型到高通QNN格式的完整转换指南
在QCS6490开发板上部署Yolov8n目标检测：ONNX到QNN格式的终极转换手册 当嵌入式AI遇上高性能目标检测，QCS6490开发板与Yolov8n的组合正在工业质检、智能安防等领域掀起效率革命。本文将手把手带你突破模型转换的关键瓶颈——从标准ONNX格式到高通专属QNN格…...
白鲸开源架构师获邀成为 ASF Member
在技术领域，我们常常被那些闪耀的、可见的成果所吸引。今天，这个焦点无疑是大语言模型技术。它们的流畅对话、惊人的创造力，让我们得以一窥未来的轮廓。然而，作为在企业一线构建、部署和维护复杂系统的实践者，我们深知…...
汽车智能制造如何落地？从“黑灯工厂”看AI赋能的关键路径
一、当工厂学会在黑暗中自行运转偌大的汽车生产车间里，灯光熄灭，只有AGV小车穿梭的微光和机械臂有节奏的运作声。没有工人的手电筒，也没有巡检的脚步，一切生产、检测、调度都在黑灯状态下有条不紊地进行。这并非科幻电影ÿ…...
LANDrop局域网文件传输：3分钟快速上手跨平台文件共享神器
LANDrop局域网文件传输：3分钟快速上手跨平台文件共享神器 【免费下载链接】LANDrop Drop any files to any devices on your LAN. 项目地址: https://gitcode.com/gh_mirrors/la/LANDrop 还在为不同设备间传输文件而烦恼吗？🤔 LANDrop…...