LogicFlow 学习笔记——11. 对齐线 和 键盘快捷键

对齐线 Snapline

对齐线能够在节点移动过程中,将移动节点的位置与画布中其他节点位置进行对比,辅助位置调整。位置对比有如下两个方面。

  • 节点中心位置
  • 节点的边框

对齐线使用

普通编辑模式下,默认开启对齐线,也可通过配置进行关闭。 在静默模式下,无法移动节点,所以关闭了对齐线功能,无法通过配置开启。

对齐线样式设置

// 关闭对齐线功能
const lf = new LogicFlow({snapline: false,
});

更多样式修改参见主题

键盘快捷键 Keyboard

快捷键配置

通过创建 LogicFlow 实例时传入 options 的 keyboard 属性可以开启快捷键, 可以只配置 enabled 属性,为 true 时,代表开启默认的快捷键。

const lf = new LogicFlow({container: document.querySelector("#app"),keyboard: {enabled: true,},
});

内置快捷键功能

LogicFlow 内置了复制,粘贴,redo/undo,删除 的快捷键。

快捷键功能
cmd+c 或 ctrl+c复制节点
cmd+v 或 ctrl + v粘贴节点
cmd+z 或 ctrl+z撤销操作
cmd+y 或 ctrl+y回退操作
backspace删除操作

自定义快捷键

shortcuts 则可以定义用户自定义的一组快捷键 值得一提的是 keys 的规则,与mousetrap一致。
以自定义删除功能为例,在删除之前添加一个确认操作。

const lf = new LogicFlow({// ...keyboard: {enabled: true,shortcuts: [{keys: ["backspace"],callback: () => {const r = window.confirm("确定要删除吗?");if (r) {const elements = lf.getSelectElements(true);lf.clearSelectElements();elements.edges.forEach((edge) => lf.deleteEdge(edge.id));elements.nodes.forEach((node) => lf.deleteNode(node.id));}},},],},
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/28934.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自己想要公开自己的学习方法,但是自己很害怕自己的学习方法是一个错误的,因为对于自己而言,专升本的机会只有一次

分享自己的学习方法可能需要一定的勇气,特别是当你担心可能会受到批评或是不被理解时。以下是一些建议,可以帮助你克服这种恐惧:(kimi编辑器自己对于这些内容的基础批注) 自我肯定:首先,认识到你…

安裝了windows,Ubuntu双系統,windows系統时间不对的修正方法

当你在电脑上安装双系统(如 Windows 和 Ubuntu)时,系统时间不同步的问题通常是由于这两个操作系统处理系统时间的方式不同而引起的。Windows 默认使用本地时间(Local Time),而 Ubuntu 和其他基于 Linux 的系统通常使用协调世界时(UTC)。 为了解决这个问题,可以选择让…

小程序开发的费用简介篇

小程序的价格跟很多因素有关系,比如你想要的复杂度、功能多不多等等 今天我就来具体说说开发一款APP/小程序到底需要多少 ❶功能复杂度:功能越多越复杂,开发时间和费用就越高,费用就会高 ❷设计要求:高级的…

RAG系列之:深入浅出 Embedding

RAG系列之:深入浅出 Embedding 什么是文本向量化? 文本向量化就是将文本数据转成数字数据,例如:将文本 It was the best of times, it was the worst of times. 转成 [0, 1, 0, 2, 2, 2, 2, 2, 0, 1]。 为什么要进行文本向量化…

深入Linux Core文件生成与自定义命名规则

Linux 作为广泛使用的运行平台,在程序运行崩溃时能及时记录 错误信息,是很方便的查询问题的方式,这里对怎么使用 Linux下的 错误信息记录 core文件,进行总结介绍。 引言 在Linux系统开发中,当程序发生崩溃时&#xf…

FinalShell 连接虚拟机超时,主机ping不通虚拟机,解决

出现问题: 连接主机...java.net.ConnectException: Connection timed out: connect 在排查错误时发现: 虚拟机内能互相ping通,虚拟机能ping通主机 但是主机的cmd命令ping不通虚拟机 问题原因: 虚拟机内能互相ping通&#xff0…

shop APP UI

APP和微信小程序不一样, APP的客户端需要两个(一个安卓,一个苹果IOS); APP的服务端需要(管理端后台,接口);

CSS 列表样式(ul)全面解析

CSS 列表样式是前端开发中常用的一种技术,用于定义无序列表(ul)的外观和行为。无序列表在网页布局和内容展示中扮演着重要角色,从导航菜单到内容清单,无所不在。通过CSS可以对无序列表的各个方面进行自定义&#xff0c…

【Docker】解决访问难题:搭建私有的Docker镜像代理

什么是Nexus 3 Nexus 3是由Sonatype公司开发的一款强大的包管理和仓库服务工具,它广泛应用于自动化的构建系统和持续集成/持续部署(CI/CD)流程中。Nexus 3支持多种包格式,包括但不限于Maven、npm、Docker、NuGet等,能够为软件开发中的依赖管…

vivado PIN

描述 引脚是基元或层次单元上的逻辑连接点。引脚允许 要抽象掉单元格的内容,并简化逻辑以便于使用。引脚可以 是标量的,包含单个连接,或者可以定义为对多个进行分组的总线引脚 信号在一起。 相关对象 引脚连接到一个单元,并且可以…

tyflow线相关教程二

线条生长一 生长静脉二 绳索动画三 两个球线连接四 扫帚五

HCIA-Datacom H12-811 题库

LDP 邻居发现有不同的实现机制和规定,下面关于LDP 邻居发现的描述错误的是: A:LDP发现机制包括LDP基本发现机制和LDP扩展发现机制 B:LDP基本发现机制可以自动发现直连在同条链路上的LDP Peers C:LDP扩展发现机制够发现…

【Linux】线程(一)

谈论之前需要先谈论一些线程的背景知识 其中就有进程地址空间,又是这个让我们又爱又恨的东西。 注意:全篇都是在32位的情况下进行的 目录 背景知识:地址空间:内存:页表: 基于以上理解文件缓冲区与虚拟地址…

【学术小白成长之路】03三方演化博弈(基于复制动态方程)均衡点与稳定性分析

从本专栏开始,笔者正式研究演化博弈分析,其中涉及到双方演化博弈分析,三方演化博弈分析,复杂网络博弈分析等等。 先阅读了大量相关的博弈分析的文献,总结了现有的研究常用的研究流程,针对每个流程进行拆解。…

代码随想录算法训练营第38天|● 理论基础 ● 509. 斐波那契数● 70. 爬楼梯 ● 746. 使用最小花费爬楼梯

动态规划理论基础 动态规划,英文:Dynamic Programming,简称DP,如果某一问题有很多重叠子问题,使用动态规划是最有效的。 所以动态规划中每一个状态一定是由上一个状态推导出来的,这一点就区分于贪心&…

VB.net与C# 调用InitializeComponent的区别

VB.NET与C# 调用InitializeComponent的区别 在VB.NET和C#中,InitializeComponent 方法的调用方式有所不同。 C#: 在C#中,InitializeComponent 方法通常是在构造函数中显式调用的。它用于初始化窗体和控件的属性。代码示例如下: public pa…

宁德等保测评公司有哪些?位于哪里?

据悉2024年中国百强城市就包含福建宁德。宁德市,福建省辖地级市,GDP快速增长,拥有众多自然风光和历史文化名镇,是一个生活幸福的城市。这里的小伙伴在问,宁德等保测评公司有哪些?位于哪里? 宁德…

想上币的项目方怎么去选择交易所

在区块链和加密货币蓬勃发展的今天,许多项目方都渴望通过交易所上线其代币,以扩大影响力、提升流动性和市场认可度。然而,选择合适的交易所并非易事,它关乎项目的未来发展和市场地位。那么,对于有上币意向的项目来说&a…

uniapp开发微信小程序预览文件+图片+嵌套网页

1、预览文件 <view click"preview(文件地址)">点击预览 </view>// 预览 const preview (middle) > {uni.downloadFile({url: middle,//middle为调用接口返回的文件地址success: (data) > {uni.saveFile({tempFilePath: data.tempFilePath, //临时…

Thinkphp起名网宝宝起名网站源码

Thinkphp起名网宝宝起名网站源码 源码介绍 1.宝宝在线起名 2.八字起名&#xff0c;周易取名 3.一对一起名 5.支持手机wap 链接数据库地址&#xff1a;Application\Common\Conf 修改里面config.php数据库连接&#xff0c;导入sm.sql数据库文件即可 伪静态用thinkphp 后台…