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

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

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

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

//样式元素
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 你看看这是你要的效果不

  • 思源笔记

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

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

    22356 引用 • 89467 回帖 • 1 关注
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){
                    计算比例=比例
                }
            }
        )
    
  • 感谢感谢,这个交互逻辑还是要细化一下,我再想想

  • themeeditor 拆件现在带了这个

  • 查看全部回帖

推荐标签 标签

  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    107 引用 • 153 回帖
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    149 引用 • 257 回帖
  • 创造

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

    179 引用 • 995 回帖
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    55 引用 • 85 回帖 • 2 关注
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖
  • 笔记

    好记性不如烂笔头。

    308 引用 • 793 回帖
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    407 引用 • 1246 回帖 • 582 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 43 关注
  • H2

    H2 是一个开源的嵌入式数据库引擎,采用 Java 语言编写,不受平台的限制,同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式,可以兼容一些主流的数据库,因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 654 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    311 引用 • 546 回帖
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 339 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    85 引用 • 139 回帖 • 1 关注
  • Markdown

    Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。

    167 引用 • 1513 回帖
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖 • 4 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    166 引用 • 595 回帖 • 1 关注
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 680 关注
  • 音乐

    你听到信仰的声音了么?

    60 引用 • 511 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    8121 引用 • 37033 回帖 • 159 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 16 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 64 关注
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    125 引用 • 169 回帖
  • 微软

    微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖 • 1 关注
  • 电影

    这是一个不能说的秘密。

    120 引用 • 599 回帖
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 391 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    53 引用 • 37 回帖 • 3 关注
  • IDEA

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

    180 引用 • 400 回帖