「CSS」更方便地拖动canvas组/锁定canvas组

经验分享
, ,
1

一句话总结

根据组颜色，选择是否开启：

  1. 组内部空白区域 响应鼠标拖动，无需拖动组标题
  2. 内部区域屏蔽点击事件

（用于分组的锁定和排布，会屏蔽组内元素的点击事件）

脚本

/* 更方便地拖动canvas组/锁定canvas组，以红色组开启为例 */
.canvas-node.canvas-node-group.is-themed.mod-canvas-color-1,
.canvas-node.is-themed.mod-canvas-color-1{
  /* z-index: 9999!important; */ /* 此处取消注释，则无论是否空白处均响应拖动 */
  pointer-events:auto!important;  /* 取消上一行注释+此处修改为none，则屏蔽组内点击事件 */
}
.canvas-node.canvas-node-group.is-themed.mod-canvas-color-1::before,
.canvas-node.is-themed.mod-canvas-color-1::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: all; /* 伪元素捕获点击，屏蔽下层点击 */
  background-color: transparent; /* 保持透明 */
}

其他

配合 Snippet Commands 插件应该会更方便控制开关；

缩放好像无法锁定，等楼下大佬改进；

初始版本脚本：canvas能锁定部分节点么？ - #2，来自 Azona77

2 个赞