思源笔记折腾记录 - 可视化块宽度调节

本贴最后更新于 581 天前,其中的信息可能已经水流花落

思源笔记折腾记录-可视化块宽度调节

这个东西原理比较简单,只是交互弄起来繁琐,所以就直接放代码片段算了

//样式元素
document.head.insertAdjacentHTML(
  "beforeEnd",
  `<style>
    [data-node-id]:has(.protyle-action-custom__drag.active), [data-node-id]:has(.protyle-action-custom__drag.active)>[data-node-id]{
        border:dashed 1px 
    }
    [data-node-id] .protyle-action-custom__drag{
        min-height: 20px;
        height:80%;
        width: 4px;
        background-color: var(--b3-theme-surface);
        border-radius: 4px;
        cursor: col-resize;
        transition: var(--b3-transition);
        position: absolute;
        top: 10%;
        right: -4px;
        box-shadow: 0 0 1px 1px var(--b3-theme-on-surface);
        box-sizing: border-box;
        z-index:300
    }
    </style>`
);
//在鼠标移动的时候计算抓手位置
document.addEventListener("mousemove", 显示抓手);
//当鼠标抬起就重置位置
document.addEventListener("mouseup", 隐藏抓手);

let 当前编辑块元素 = {};
let 开始缩放 = false;
function 隐藏抓手() {
  当前编辑块元素 = {};
  document
    .querySelectorAll(".protyle-action-custom__drag")
    .forEach((抓手) => 抓手.remove());
}
function 显示抓手(event) {
  let 属性元素组 = document.querySelectorAll(".protyle-gutters");
  let 当前id数组 = []
  属性元素组.forEach((块标) => {
    生成抓手(块标,当前id数组);
  });
  document.querySelectorAll('.protyle-action-custom__drag').forEach(
    抓手元素=>{
        if(当前id数组.indexOf(抓手元素.getAttribute('data-id'))<0&&!抓手元素.classList.contains("active")){
            抓手元素.remove()
        }
    }
  )

  if(当前编辑块元素.parentElement
    &&Array.from(当前编辑块元素.parentElement.querySelectorAll(`[data-node-id]`)).pop().getAttribute('data-node-id')
    ==当前编辑块元素.getAttribute('data-node-id')
    &&当前编辑块元素.parentElement.getAttribute("data-sb-layout")=="col"){
    当前编辑块元素=当前编辑块元素.parentElement
  }
  if (开始缩放) {
    if (当前编辑块元素 && 当前编辑块元素.style) {
      if (当前编辑块元素.style) {
        //计算出缩放后大小对应的比例
        let 计算比例 = ((event.clientX - 当前编辑块元素.getBoundingClientRect().left)/当前编辑块元素.parentElement.getBoundingClientRect().width)*100
        if(计算比例>=100){
            计算比例=100
        }
        let 吸附比例数组=[100,75,50,25,66,33]
        吸附比例数组.forEach(
            比例=>{
                if(Math.abs(计算比例-比例)<=5&&当前编辑块元素.parentElement.getBoundingClientRect().width>=100){
                    计算比例=比例
                }
            }
        )
        当前编辑块元素.style.width =计算比例+'%'
        当前编辑块元素.style.flex = "0 0 auto";
      }
    }
  }
}
function 生成抓手(块标,当前id数组) {
  let id元素组 = 块标.querySelectorAll("[data-node-id]");
  id元素组.forEach((id元素,i) => {
    if (id元素) {
      let 块id = id元素.getAttribute("data-node-id");
      当前id数组.push(块id)
      let 块元素 = 块标.parentElement.querySelector(
        `.protyle-wysiwyg [data-node-id="${块id}"]`
      );
      if (!块元素) {
        return;
      } else if (!块元素.querySelector(`.protyle-action-custom__drag[data-id="${块id}"]`)) {
        let 抓手元素 = document.createElement("span");
        抓手元素.className = "protyle-action-custom__drag";
        抓手元素.setAttribute('data-id',块id)
        let 最后一个属性元素 = Array.from(
          块元素.querySelectorAll(".protyle-attr")
        ).pop();
        块元素.insertBefore(抓手元素, 最后一个属性元素);
        //给抓手元素增加一个偏移,避免多层元素时,重叠
        抓手元素.style.left=`calc(100% - ${8*i}px)`
        抓手元素.addEventListener("mousedown", () => {
          抓手元素.classList.add("active");
          开始缩放 = true;
          当前编辑块元素 = 抓手元素.parentElement;
        });
      }
    }
  });
  
}

需要注意的是,为了性能好一点点(还有懒得写),调节完了之后并不会自动保存,你可以编辑一下这个块它就存进去了,嫌麻烦的话,就自己加上自动保存吧.

效果就像这样

块抓手缩放宽度 1.gif
块抓手缩放宽度 2.gif

@royc1 你看看这是你要的效果不

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22026 引用 • 87852 回帖 • 4 关注
1 操作
leolee 在 2023-04-05 04:19:28 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • Nicole99

    您好,编程及笔记新手想了解下,这段代码应该怎么插入到 siyuan 笔记里呀?非常感谢

    1 回复
  • 其他回帖
  • 如果要加入宽度吸附的话,大概是这样:

    let 计算比例 = ((event.clientX - 当前编辑块元素.getBoundingClientRect().left)/当前编辑块元素.parentElement.getBoundingClientRect().width)*100
        if(计算比例>=100){
            计算比例=100
        }
    //当计算比例与吸附比例相差小于5%时就吸附过去
    //如果块尺寸已经非常小了就不吸附
        let 吸附比例数组=[100,75,50,25,66,33]
        吸附比例数组.forEach(
            比例=>{
    
                if(Math.abs(计算比例-比例)<=5&&当前编辑块元素.parentElement.getBoundingClientRect().width>=100){
                    计算比例=比例
                }
            }
        )
    
  • 还有这个地方忘记注释了,意思其实很简单,如果这个块是横排超级块的最后一个子块,那它调节的时候调的是上级超级快的宽度。

    
    
     if(当前编辑块元素.parentElement
        &&Array.from(当前编辑块元素.parentElement.querySelectorAll(`[data-node-id]`)).pop().getAttribute('data-node-id')
        ==当前编辑块元素.getAttribute('data-node-id')
        &&当前编辑块元素.parentElement.getAttribute("data-sb-layout")=="col"){
        当前编辑块元素=当前编辑块元素.parentElement
      }
    
    
    
  • 感谢感谢,这个交互逻辑还是要细化一下,我再想想

  • 查看全部回帖

推荐标签 标签

  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 2 关注
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    939 引用 • 940 回帖
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖 • 4 关注
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    91 引用 • 384 回帖 • 1 关注
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    541 引用 • 672 回帖 • 1 关注
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    30 引用 • 123 回帖
  • AngularJS

    AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 474 关注
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 214 关注
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    325 引用 • 1395 回帖
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    287 引用 • 4484 回帖 • 668 关注
  • abitmean

    有点意思就行了

    30 关注
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    176 引用 • 995 回帖
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 706 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 1 关注
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 753 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 624 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 19 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    26 引用 • 222 回帖 • 165 关注
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    170 引用 • 414 回帖 • 382 关注
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 53 回帖 • 82 关注
  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    490 引用 • 916 回帖 • 1 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    180 引用 • 400 回帖 • 3 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 367 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1705 回帖 • 1 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    88 引用 • 1235 回帖 • 406 关注