@anyblock/any-block-core 3.4.6

package/ABAlias.ts

@@ -0,0 +1,298 @@
+/**
+ * AnyBlock 别名模块
+ * 
+ * @detail
+ * 
+ * 从职责设计上，该模块分为：
+ * - 前处理部分
+ * - 后处理部分
+ * - 连接自动适配器部分
+ * 
+ * 但从实现上，这里只有第一部分的 “前处理部分”
+ * 
+ * 后两个部分和conveter模块暂时耦合较高，没办法分离
+ * 
+ * 需要注意：别名替换的最后需要删除自己所对应的选择器前缀
+ * 
+ * TODO 思考：别名系统是否可以做成想Converter那样通用的东西，感觉可以深挖
+ * 
+ * 1. obsidian 有 Highlightr-Plugin 插件能全局识别，可以参考
+ * 2. 每个栏目可选：匹配则向下传递/终止
+ * 3. 局部而非全文，以节约性能损耗 (例如专用于ab块header的转化)，当然这个可以通过匹配到header再调用API解决
+ * 4. 复杂的变换、替换 (hightlightr所不具备的功能) 这也是 ==该插件叫别名系统而非匹配系统的原因==
+ * 5. 正则的子串填空 (类似于搜索拐杖和旧版AB的别名器那样)
+ */
+
+import {ABReg} from "./ABSetting"
+
+/**
+ * 指令头转义补全，可配合自然语言转指令
+ * 
+ * @detail
+ * 
+ * De-dependency: 取消对该函数的调用即可
+ * 
+ * 将自然语言指令头，转化为指令头
+ * 
+ * 是否绑定到处理器？旧版本通过alias选项设置，但V3版本不要
+ * 
+ * - 优点
+ *   - 而是作为一个单独的模块，与实际解耦
+ *   - 符合原则：关于用于语法糖操作，都应存在一个单独的语法糖模块进行处理，而不应与业务代码耦合
+ * - 缺点
+ *   - 新的处理器声明自然语言触发的语法糖。但是可以通过同时增加 “新的处理器” + “新的自然语言替换” 来解决
+ * 
+ * TODO：
+ * - 这些别名系统，需要能够显示出来，应该要用json括一下
+ * - 性能优化，如果匹配了再replace，且提前退出
+ * - 仅匹配开头会不会性能好点
+ * 
+ * @returns
+ * new header
+ */
+export function autoABAlias (header:string, selectorName:string, content:string): string{
+  // 1. 别名模块 - 严格化。目的是方便仅使用正则而不用splic("|")就能判断识别的是完整的词而不是词的一部分
+  if (!header.trimEnd().endsWith("|")) header = header + "|"
+  if (!header.trimStart().startsWith("|")) header = "|" + header
+
+  // 2. 别名模块 - 标注选择类型
+  if (selectorName == "mdit") { // `:::`不在正文里，这个判断不到：if (ABReg.reg_mdit_head_noprefix.test(content.trimStart()))
+    header = "|:::_140lne" + header.trimStart()
+  }
+  else if (selectorName == "list" || ABReg.reg_list_noprefix.test(content.trimStart())) {
+    header = "|list_140lne" + header
+  }
+  else if (selectorName == "heading" || ABReg.reg_heading_noprefix.test(content.trimStart())) {
+    header = "|heading_140lne" + header
+  }
+  else if (selectorName == "code" || ABReg.reg_code_noprefix.test(content.trimStart())) {
+    header = "|code_140lne" + header
+  }
+  else if (selectorName == "quote" || ABReg.reg_quote_noprefix.test(content.trimStart())) {
+    header = "|quote_140lne" + header
+  }
+  else if (selectorName == "table" || ABReg.reg_table_noprefix.test(content.trimStart())) {
+    header = "|table_140lne" + header
+  }
+
+  // 3. 别名模块 - 别名替换
+  for (const item of get_ABAlias_iter()) {
+    header = header.replace(item.regex, item.replacement)
+  }
+  for (const item of ABAlias_json_withSub) { // 特别组，被替换为带子串表示的结果
+    header = header.replace(item.regex, (_match, ...groups) => {
+      return item.replacement.replace(/\$(\d+)/g, (_, number) => groups[number - 1]??""); // 根据捕获组替换。如果某个组是未定义，那么为空
+    });
+  }
+  for (const item of ABAlias_json_end) { // 保证ABAlias_json内容被扩展后，该部分的替换规则仍处于最后
+    header = header.replace(item.regex, item.replacement)
+  }
+
+  return header
+}
+
+interface ABAlias_json {
+  regex: RegExp|string,
+  replacement: string
+}
+
+// 允许带参数的部分
+// ~~(这部分的遍历会更耗时间。为了性能考虑，单独拿出来)~~ 并不会影响遍历，只有执行时有一点消耗
+const ABAlias_json_withSub: ABAlias_json[] = [
+  // 分下类，排下序
+  // `gfm` 就支持五种: note, tip, important, warning, caution
+  // `vuepress` 比gfm多了个: info
+  // `obsidian` 不完全是gfm超集，其important和tip一样，caution和warning一样
+  //   note
+  //   abstract, summary, tldr
+  //   info
+  //   todo
+  //   tip. hint, Important
+  //   succcess, check, done
+  //   question, help, faq
+  //   warning, caution, attention
+  //   failure, fail, missing
+  //   danger, error
+  //   bug
+  //   example
+  //   quote, cite
+  // `其他` 避免错字, 我之前加过 warn, tips。后面又删了
+  { regex: /\|(note|warning|caution|attention|error|info|danger|tip|hint|example|abstract|summary|tldr|quote|cite|todo|success|check|done|important|question|help|faq|failure|fail|missing|bug)([+-]?)(\s.*)?\|/, replacement: "|add([!$1]$2$3)|addQuote|" },
+  { regex: /\|(callout|alert) ([^+-\s]+)([+-]?)\s?(.*)\|/, replacement: "|add([!$2]$3 $4)|addQuote|" }, // 注意避免和原上/上面的callout语法冲突，以及自身递归
+]
+
+// mdit块
+const ABAlias_json_mdit: ABAlias_json[] = [
+  {regex: /\|:::_140lne\|(2?tabs?|标签页?)\|/, replacement: "|mditTabs|"},
+  {regex: "|:::_140lne|demo|", replacement: "|mditDemo|"},
+  {regex: "|:::_140lne|abDemo|", replacement: "|mditABDemo|"},
+  {regex: /\|:::_140lne\|(2?col|分栏)\|/, replacement: "|mditCol|"},
+  {regex: /\|:::_140lne\|(2?card|卡片)\|/, replacement: "|mditCard|"},
+  {regex: /\|:::_140lne\|(2?chat|聊天)\|/, replacement: "|mditChat|code(chat)|"},
+]
+
+// 标题块
+const ABAlias_json_title: ABAlias_json[] = [
+  {regex: "|title2list|", replacement: "|title2listdata|listdata2strict|listdata2list|"},
+
+  // title - list&title
+  {regex: /\|heading_140lne\|2?(timeline|时间线)\|/, replacement: "|title2timeline|"},
+  {regex: /\|heading_140lne\|2?(tabs?|标签页?)\||\|title2tabs?\|/, replacement: "|title2c2listdata|c2listdata2tab|"},
+  {regex: /\|heading_140lne\|2?(col|分栏)\||\|title2col\|/, replacement: "|title2c2listdata|c2listdata2items|addClass(ab-col)|"},
+  {regex: /\|heading_140lne\|2?(card|卡片)\||\|title2card\|/, replacement: "|title2c2listdata|c2listdata2items|addClass(ab-card)|addClass(ab-lay-vfall)|"},
+  {regex: /\|heading_140lne\|2?(nodes?|节点)\||\|(title2node|title2abMindmap)\|/, replacement: "|title2listdata|listdata2strict|listdata2nodes|"},
+
+  // list  - 多叉多层树
+  {regex: /\|heading_140lne\|2?(mermaid|flow|流程图)\|/, replacement: "|title2list" + "|list2mermaid|"},
+  {regex: /\|heading_140lne\|2?(mehrmaid|mdmermaid)\|/, replacement: "|title2list" + "|list2mehrmaidText|code(mehrmaid)|"},
+  {regex: /\|heading_140lne\|2?(puml)?(plantuml|mindmap|脑图|思维导图)\|/, replacement: "|title2list" + "|list2pumlMindmap|"},
+  {regex: /\|heading_140lne\|2?(markmap|mdMindmap|md脑图|md思维导图)\|/, replacement: "|title2list" + "|list2markmap|"},
+  {regex: /\|heading_140lne\|2?(wbs|(工作)?分解(图|结构))\|/, replacement: "|title2list" + "|list2pumlWBS|"},
+  {regex: /\|heading_140lne\|2?(table|multiWayTable|multiCrossTable|表格?|多叉表格?|跨行表格?)\|/, replacement: "|title2list" + "|list2table|"},
+
+  // list - lt树 (属于多层一叉树)
+  {regex: /\|heading_140lne\|2?(lt|listTable|treeTable|listGrid|treeGrid|列表格|树形表格?)\|/, replacement: "|title2list" + "|list2lt|"},
+  {regex: /\|heading_140lne\|2?(list|列表)\|/, replacement: "|title2list" + "|list2lt|addClass(ab-listtable-likelist)|"},
+  {regex: /\|heading_140lne\|2?(dir|dirTree|目录树?|目录结构)\|/, replacement: "|title2list" + "|list2dt|"},
+
+  // list - 二层树
+  {regex: /\|heading_140lne\|(fakeList|仿列表)\|/, replacement: "|title2list" + "|list2table|addClass(ab-table-fc)|addClass(ab-table-likelist)|"},
+]
+
+// 列表块
+const ABAlias_json_list: ABAlias_json[] = [
+  // 特殊
+  {regex: "|listXinline|", replacement: "|list2listdata|listdata2strict|listdata2list|"},
+  {regex: "|list2task|", replacement: "|list2listdata|listdata2task|listdata2list|"},
+  {regex: "|task2", replacement: "|list2listdata|listdata2task|listdata2list|list2"},
+
+  // list - list&title
+  {regex: /\|list_140lne\|2?(timeline|时间线)\|/, replacement: "|list2timeline|"},
+  {regex: /\|list_140lne\|2?(tabs?|标签页?)\||\|list2tabs?\|/, replacement: "|list2c2listdata|c2listdata2tab|"},
+  {regex: /\|list_140lne\|2?(col|分栏)\||\|list2col\|/, replacement: "|list2c2listdata|c2listdata2items|addClass(ab-col)|"},
+  {regex: /\|list_140lne\|2?(card|卡片)\||\|list2card\|/, replacement: "|list2c2listdata|c2listdata2items|addClass(ab-card)|addClass(ab-lay-vfall)|"},
+  {regex: /\|list_140lne\|2?(nodes?|节点)\||\|(list2node|list2abMindmap)\|/, replacement: "|list2listdata|listdata2strict|listdata2nodes|"},
+
+  // list  - 多叉多层树
+  {regex: /\|list_140lne\|2?(mermaid|flow|流程图)\|/, replacement: "|list2mermaid|"},
+  {regex: /\|list_140lne\|2?(mehrmaid|mdmermaid)\|/, replacement: "|list2mehrmaidText|code(mehrmaid)|"},
+  {regex: /\|list_140lne\|2?(puml)?(plantuml|mindmap|脑图|思维导图)\|/, replacement: "|list2pumlMindmap|"},
+  {regex: /\|list_140lne\|2?(markmap|mdMindmap|md脑图|md思维导图)\|/, replacement: "|list2markmap|"},
+  {regex: /\|list_140lne\|2?(wbs|(工作)?分解(图|结构))\|/, replacement: "|list2pumlWBS|"},
+  {regex: /\|list_140lne\|2?(table|multiWayTable|multiCrossTable|表格?|多叉表格?|跨行表格?)\|/, replacement: "|list2table|"},
+
+  // list - lt树 (属于多层一叉树)
+  {regex: /\|list_140lne\|2?(lt|listTable|treeTable|listGrid|treeGrid|列表格|树形表格?)\|/, replacement: "|list2lt|"},
+  {regex: /\|list_140lne\|2?(list|列表)\|/, replacement: "|list2lt|addClass(ab-listtable-likelist)|"},
+  {regex: /\|list_140lne\|2?(dir|dirTree|目录树?|目录结构)\|/, replacement: "|list2dt|"},
+
+  // list - 二层树
+  {regex: /\|list_140lne\|(fakeList|仿列表)\|/, replacement: "|list2table|addClass(ab-table-fc)|addClass(ab-table-likelist)|"},
+]
+
+// 代码块
+const ABAlias_json_code: ABAlias_json[] = [
+  {regex: "|code_140lne|X|", replacement: "|xCode|"},
+  {regex: "|code_140lne|x|", replacement: "|xCode|"},
+  {regex: "|code2list|", replacement: "|xCode|region2indent|addList|"},
+  {regex: "|echarts|", replacement: "|xCode|code(echarts)|"}, // 配合 any-block/obsidian-charts 使用
+  {regex: "|list2code|", replacement: "|xList|code(js)|"},
+]
+
+// 引用块
+const ABAlias_json_quote: ABAlias_json[] = [
+  // {regex: "|quote_140lne|X|", replacement: "|xQuote|"},
+  // {regex: "|quote_140lne|x|", replacement: "|xQuote|"},
+]
+
+// 表格块
+const ABAlias_json_table: ABAlias_json[] = [
+]
+
+// 通用，一般是装饰处理器 (易误选，通常最后才执行)
+const ABAlias_json_general: ABAlias_json[] = [
+  {regex: "|echarts|", replacement: "|xCode|code(echarts)|"}, // 配合 any-block/obsidian-charts 使用
+
+  {regex: "|黑幕|", replacement: "|addClass(ab-deco-heimu)|"},
+  {regex: "|折叠|", replacement: "|fold|"},
+  {regex: "|滚动|", replacement: "|scroll|"},
+  {regex: "|超出折叠|", replacement: "|overfold|"},
+  {regex: "|转置|", replacement: "|transpose|"},
+  {regex: "|T|", replacement: "|transpose|"},
+  // 便捷样式
+  {regex: "|红字|", replacement: "|addClass(ab-custom-text-red)|"},
+  {regex: "|橙字|", replacement: "|addClass(ab-custom-text-orange)|"},
+  {regex: "|黄字|", replacement: "|addClass(ab-custom-text-yellow)|"},
+  {regex: "|绿字|", replacement: "|addClass(ab-custom-text-green)|"},
+  {regex: "|青字|", replacement: "|addClass(ab-custom-text-cyan)|"},
+  {regex: "|蓝字|", replacement: "|addClass(ab-custom-text-blue)|"},
+  {regex: "|紫字|", replacement: "|addClass(ab-custom-text-purple)|"},
+  {regex: "|白字|", replacement: "|addClass(ab-custom-text-white)|"},
+  {regex: "|黑字|", replacement: "|addClass(ab-custom-text-black)|"},
+  {regex: "|红底|", replacement: "|addClass(ab-custom-bg-red)|"},
+  {regex: "|橙底|", replacement: "|addClass(ab-custom-bg-orange)|"},
+  {regex: "|黄底|", replacement: "|addClass(ab-custom-bg-yellow)|"},
+  {regex: "|绿底|", replacement: "|addClass(ab-custom-bg-green)|"},
+  {regex: "|青底|", replacement: "|addClass(ab-custom-bg-cyan)|"},
+  {regex: "|蓝底|", replacement: "|addClass(ab-custom-bg-blue)|"},
+  {regex: "|紫底|", replacement: "|addClass(ab-custom-bg-purple)|"},
+  {regex: "|白底|", replacement: "|addClass(ab-custom-bg-white)|"},
+  {regex: "|黑底|", replacement: "|addClass(ab-custom-bg-black)|"},
+  {regex: "|靠上|", replacement: "|addClass(ab-custom-dire-top)|"},
+  {regex: "|靠下|", replacement: "|addClass(ab-custom-dire-down)|"},
+  {regex: "|靠左|", replacement: "|addClass(ab-custom-dire-left)|"},
+  {regex: "|靠右|", replacement: "|addClass(ab-custom-dire-right)|"},
+  {regex: "|居中|", replacement: "|addClass(ab-custom-dire-center)|"},
+  {regex: "|水平居中|", replacement: "|addClass(ab-custom-dire-hcenter)|"},
+  {regex: "|垂直居中|", replacement: "|addClass(ab-custom-dire-vcenter)|"},
+  {regex: "|两端对齐|", replacement: "|addClass(ab-custom-dire-justify)|"},
+  {regex: "|大字|", replacement: "|addClass(ab-custom-font-large)|"},
+  {regex: "|超大字|", replacement: "|addClass(ab-custom-font-largex)|"},
+  {regex: "|超超大字|", replacement: "|addClass(ab-custom-font-largexx)|"},
+  {regex: "|小字|", replacement: "|addClass(ab-custom-font-small)|"},
+  {regex: "|超小字|", replacement: "|addClass(ab-custom-font-smallx)|"},
+  {regex: "|超超小字|", replacement: "|addClass(ab-custom-font-smallxx)|"},
+  {regex: "|加粗|", replacement: "|addClass(ab-custom-font-bold)|"},
+]
+
+// 
+// 暂时只支持在开头处替换 (?)
+// 
+export const ABAlias_user: ABAlias_json[] = []
+
+export const ABAlias_pro: ABAlias_json[] = []
+
+export const ABAlias_default: ABAlias_json[] = [
+  ...ABAlias_json_mdit,
+  ...ABAlias_json_title,
+  ...ABAlias_json_list,
+  ...ABAlias_json_code,
+  ...ABAlias_json_quote,
+  ...ABAlias_json_table,
+  ...ABAlias_json_general, // 这个放最后
+]
+
+/**
+ * 用于遍历所有的数组
+ * 
+ * 会被 info_alias 显示。自定义别名、pro 版别名 也会插入到这
+ * 优先级系统: 用户 > pro > ABAlias_json_withSub > 默认，汇总时则写
+ * 
+ * 旧写法: 函数动态组装 [...ABAlias_user, ...ABAlias_pro, ...ABAlias_default]
+ * 新写法: 返回迭代器，零拷贝，更节省性能
+ */
+export function* get_ABAlias_iter() {
+  yield* ABAlias_user
+  yield* ABAlias_pro
+  yield* ABAlias_default
+}
+
+// 最后被替换
+const ABAlias_json_end: ABAlias_json[] = [
+  {regex: "|:::_140lne", replacement: ""},
+  {regex: "|heading_140lne", replacement: ""},
+  {regex: "|list_140lne", replacement: ""},
+  {regex: "|code_140lne", replacement: ""},
+  {regex: "|qutoe_140lne", replacement: ""},
+  {regex: "|table_140lne", replacement: ""},
+]

package/ABConvertEvent.ts

@@ -0,0 +1,307 @@
+/**
+ * 一些AB块的后触发事件
+ * 
+ * @detail
+ * 普通的AB块Dom结构生成后就不需要再动了，而有的AB块需要被完全渲染后再进行一些操作。
+ * 
+ * 这些操作统一注册在此处
+ */
+
+/**
+ * 一些AB块的后触发事件 - css加载完触发
+ * 
+ * @param d 这里有两种可能：
+ *   - 一是局部刷新，d就是局部的div，此时d必须是 `.ab-replace`，且满足预设结构
+ *   - 二是全局刷新，当页面加载完成后会自动调一次，d就是document
+ * @param isCycle 是否循环定时启动。部分事件允许循环，消耗资源也较小，而部分事件不允许
+ *   false为初始化启动，或手动按刷新按钮的情况
+ */
+export function abConvertEvent(d: Element|Document, isCycle: boolean = false) {
+  // 超宽div事件 (仅obsidian)，这个事件应该优先处理
+  // 寻找 .ab-note .ab-super-width
+  if (d.querySelector('.ab-super-width')) {
+    // 局部 (仅obsidian)
+    const els_note: NodeListOf<Element> = d.querySelectorAll(".ab-note");
+    for (const el_note of els_note) {
+      if (el_note.classList.contains("ab-super-width") || el_note.querySelector(".ab-super-width")) {
+        const el_replace: ParentNode | null | undefined = el_note.parentNode;
+        if (el_replace && (el_replace as HTMLElement).classList.contains("ab-replace")) {
+          (el_replace as HTMLElement).classList.add("ab-super-width-p");
+        }
+      }
+    }
+    // 全局 (仅obsidian)，注意这里在docuemnt而非d上寻找
+    const els_view: NodeListOf<Element> = document.querySelectorAll(".app-container .workspace-leaf"); // 支持多窗口
+    for (const el_view of els_view) {
+      (el_view as HTMLElement).style.setProperty('--ab-width-outer', ((el_view as HTMLElement).offsetWidth - 40).toString() + "px"); // 40/2是边距 (必须大于滚动条)
+    }
+  }
+
+  // list2nodes，圆弧调整事件
+  if (d.querySelector('.ab-nodes-node')) {
+    const els_min = document.querySelectorAll(".ab-nodes.min .ab-nodes-node");
+    const list_children = d.querySelectorAll(".ab-nodes-node")
+    for (const children of list_children) {
+      // 元素准备
+      const el_content = children.querySelector(".ab-nodes-content") as HTMLElement; if (!el_content) continue
+      const el_child = children.querySelector(".ab-nodes-children") as HTMLElement; if (!el_child) continue
+      const el_bracket = el_child.querySelector(".ab-nodes-bracket") as HTMLElement; if (!el_bracket) continue
+      const el_bracket2 = el_child.querySelector(".ab-nodes-bracket2") as HTMLElement; if (!el_bracket2) continue
+      const els_child = el_child.childNodes;
+      if (els_child.length < 3) {
+        el_bracket.style.setProperty("display", "none")
+        el_bracket2.style.setProperty("display", "none")
+        continue
+      }
+      const el_child_first = els_child[2] as HTMLElement;
+      const el_child_last = els_child[els_child.length - 1] as HTMLElement;
+      const el_child_first_content = el_child_first.querySelector(".ab-nodes-content") as HTMLElement
+      const el_child_last_content = el_child_last.querySelector(".ab-nodes-content") as HTMLElement
+
+      // 参数准备
+      // 有两种情况，如果height非零则高度等于 (height) (通常1-1结构会是这种情况)，若无则高度等于 (100%-heightToReduce)
+      let height = 0;
+      let heightToReduce = (el_child_first.offsetHeight + el_child_last.offsetHeight) / 2;
+
+      // 修改伪类
+      if (els_child.length == 3) { // 结构：1-1
+        height = (el_child_first_content.offsetHeight-20) > 20 ? (el_child_first_content.offsetHeight-20) : 20
+        el_bracket2.style.cssText = `
+          height: ${height}px;
+          top: calc(50% - ${height/2}px);
+        `
+      } else { // 结构：1-n
+        el_bracket2.style.cssText = `
+          height: calc(100% - ${heightToReduce}px);
+          top: ${el_child_first.offsetHeight/2}px;
+        `
+      }
+
+      // 修改伪类 - min样式版 (注意：不要因为用cssText覆盖而把样式给漏了)
+      if (Array.prototype.includes.call(els_min, children)) {
+        if (els_child.length == 3) { // 结构：1-1，有圆点
+          el_bracket.style.cssText = `
+            display: block;
+            top: calc(50% + ${el_content.offsetHeight/2}px - 3px);
+            clip-path: circle(40% at 50% 40%);
+          `
+        } else { // 结构：1-n，无圆点，是延长线
+          el_bracket.setAttribute("display", "none")
+          // el_bracket.style.cssText = `
+          //   display: block;
+          //   height: 1px;
+          //   top: calc(50% + ${el_content.offsetHeight/2}px - 1px);
+          //   width: 18px; /* 可以溢出点 */
+          //   left: -20px;
+          //   border-bottom: 1px solid var(--node-color);
+          //   clip-path: none;
+          // `
+        }
+
+        if (els_child.length == 3 && el_content.offsetHeight == el_child_first_content.offsetHeight) { // 结构：1-1且高度相同，则用横线代替括号
+          el_bracket2.style.cssText = `
+            height: 1px;
+            top: calc(50% + ${el_content.offsetHeight/2}px - 1px);
+            width: 18px; /* 可以溢出点 */
+            border-radius: 0;
+            border: none;
+            border-bottom: 1px solid var(--node-color);
+          `
+        }
+        else { // 否则在原有基础上微调即可
+          // el_bracket2.style.setProperty("border-radius", "2px 0 0 2px")
+          // if (height==0) {
+          //   el_bracket2.style.setProperty("height", `calc(100% - ${heightToReduce}px + 12px)`); // 原基础+12 (应该要加 el_child_last_content 的半高)
+          // } else {
+          //   el_bracket2.style.setProperty("height", `${height+10}px`); // 原基础+10
+          // }
+          if (els_child.length == 3) {
+            height = el_child_last_content.offsetHeight/2 - el_content.offsetHeight/2;
+            el_bracket2.style.setProperty("height", `${height}px`);
+            el_bracket2.style.setProperty("top", `calc(50% + ${el_content.offsetHeight/2}px)`);
+            el_bracket2.style.setProperty("border-radius", `0 0 0 10px`);
+            el_bracket2.style.setProperty("border-top", `0`);
+          } else {
+            heightToReduce = el_child_first.offsetHeight/2 + el_child_first_content.offsetHeight/2 + el_child_last.offsetHeight/2 - el_child_last_content.offsetHeight/2;
+            el_bracket2.style.setProperty("height", `calc(100% - ${heightToReduce}px + 1px)`);
+            el_bracket2.style.setProperty("top", `${el_child_first.offsetHeight/2 + el_child_first_content.offsetHeight/2 - 1}px`);
+          }
+          el_bracket2.style.setProperty("width", "20px");
+        }
+
+        // 下面的内容弃用。存在问题：用canvas的思路应该是不对的，应该参考mehrmaid用svg，还能包裹div
+        /*else {
+          el_bracket2.style.setProperty("height", `100%`);
+          el_bracket2.style.setProperty("top", `0`);
+          el_bracket2.style.setProperty("width", `38px`); // 可以溢出点
+          el_bracket2.style.setProperty("left", `-20px`);
+          el_bracket.style.setProperty("display", "none");
+
+          const el_canvas: HTMLCanvasElement = document.createElement("canvas"); el_bracket2.appendChild(el_canvas);
+            el_canvas.style.setProperty("width", "100%")
+            el_canvas.style.setProperty("height", "100%")
+          const rect_canvas = el_canvas.getBoundingClientRect()
+          const rect_bracket = el_bracket2.getBoundingClientRect()
+          const point_bracket = {
+            x: rect_bracket.right - rect_canvas.left,
+            y: rect_bracket.bottom - rect_canvas.top
+          };
+          for (let childNode of childNodes) { // TODO 应该跳过前两个，前两个是括号
+            const rect_childNode = (childNode as HTMLElement).getBoundingClientRect()
+            const point_childNode = {
+              x: rect_childNode.right - rect_canvas.left,
+              y: rect_childNode.bottom - rect_canvas.top
+            }
+            // 连线
+            const ctx = el_canvas.getContext('2d');
+            if (!ctx) continue;
+            console.log(".ab-nodes.min 获取 canvas ctx 成功", rect_canvas, rect_bracket, rect_childNode) // canvas和bracket是重合的其实……
+            // ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
+            ctx.beginPath(); // 开始绘制连线
+            ctx.moveTo(point_bracket.x - point_bracket.x, point_bracket.y - point_bracket.x);
+            ctx.lineTo(point_childNode.x - point_bracket.x, point_childNode.y - point_bracket.x);
+            ctx.strokeStyle = 'green';
+            ctx.lineWidth = 2;
+            ctx.stroke();
+          }
+        }*/
+      }
+    }
+  }
+
+  // tips: 这里说一下items布局的问题，TODO 是有计划将布局方式分开成一个独立的处理器，而部分布局需要js
+  // 普通纵向瀑布流: 纯css、有序纵向瀑布流: js
+  // 横向瀑布流: 纯css、高精度横向瀑布流: 未实现js
+
+  // list2card，纵向瀑布流 (等宽瀑布流) 顺序重调事件
+  // (通过flag，自动避免重新调用，手动刷新也不会重新调用)
+  if (d.querySelector('.ab-items.ab-lay-vfall:not(.js-waterfall):not(.ab-lay-hfall):not(.ab-lay-grid)')) {
+    const root_el_list = d.querySelectorAll(".ab-items.ab-lay-vfall:not(.js-waterfall):not(.ab-lay-hfall):not(.ab-lay-grid)")
+    for (const root_el of root_el_list) {
+      // 1. 准备原元素
+      root_el.classList.add("js-waterfall") // 避免：触发两次时，第二次触发会以第一次触发的顺序为基准，再进行调整
+      const list_children = root_el.querySelectorAll(".ab-items-item")
+      // 计算列数和列宽
+      const columnCountTmp = parseInt(window.getComputedStyle(root_el).getPropertyValue('column-count'))
+      let columnCount: number;
+      if (columnCountTmp && !isNaN(columnCountTmp) && columnCountTmp>0) {
+        columnCount = columnCountTmp;
+      } else if (root_el.classList.contains("ab-col-auto") && list_children.length<=4) {
+        columnCount = list_children.length;
+        root_el.classList.add("ab-col"+columnCount)
+      }
+      else {
+        columnCount = 4;
+        root_el.classList.add("ab-col"+columnCount)
+      }
+      // const columnWidth = root_el.clientWidth / columnCount;
+
+      // 2. 准备高度缓存、元素缓存
+      const height_cache:number[] = []; // 缓存每列的当前高度，每次将新元素添加到高度最底的列中
+      const el_cache:HTMLElement[][] = [];
+      for (let i = 0; i < columnCount; i++) {
+        height_cache.push(0);
+        el_cache.push([])
+      }
+
+      // 3. 得到顺序数组
+      for (const children of list_children) {
+        const minValue: number =  Math.min.apply(null, height_cache);
+        const minIndex: number =  height_cache.indexOf(minValue)
+        const heightTmp = parseInt(window.getComputedStyle(children).getPropertyValue("height"))
+        height_cache[minIndex] += (heightTmp && !isNaN(heightTmp) && heightTmp>0) ? heightTmp : 10;
+        el_cache[minIndex].push(children as HTMLElement)
+      }
+
+      // 3.2. 修复特殊情况下的异常：
+      //    特殊情况指：当分N列时，若 (length%N != 0 || length%N != N-1)，存在问题
+      //    或写成这样好理解些：当 (length%(N-1) != N || length%(N-1) != N-1)，最后一列会缺好几个时，存在问题
+      const fillNumber = columnCount-list_children.length%columnCount
+      if (fillNumber!=4) {
+        for (let i=0; i<fillNumber; i++) {
+          const children = document.createElement("div"); children.classList.add(".ab-items-item.placeholder"); children.setAttribute("style", "height: 20px")
+          const minValue: number =  Math.min.apply(null, height_cache);
+          const minIndex: number =  height_cache.indexOf(minValue)
+          height_cache[minIndex] += 20
+          el_cache[minIndex].push(children as HTMLElement)
+        }
+      }
+
+      // 4. 按顺序重新填入元素
+      root_el.innerHTML = ""
+      for (let i=0; i<columnCount; i++) {
+        for (const j of el_cache[i]) {
+          root_el.appendChild(j)
+        }
+      }
+    }
+  }
+
+  // xxx2markmap，高度重调事件
+  if (!isCycle && d.querySelector('.ab-markmap-div')) {
+    const divEl = d as Element;
+    let markmapId = '';
+    if (divEl.tagName === 'DIV') {
+      markmapId = divEl.querySelector('.ab-markmap-div')?.id || '';
+    }
+    let mindmaps: NodeListOf<HTMLElement>;
+    if (markmapId) {
+      mindmaps = document.querySelectorAll('#' + markmapId);
+    } else {
+      mindmaps = document.querySelectorAll('.ab-markmap-div'); // 注意一下这里的选择器
+    }
+
+    for(const el_div of mindmaps) {
+      const el_svg: SVGGraphicsElement|null = el_div.querySelector("svg")
+      const el_g: SVGGraphicsElement|null|undefined = el_svg?.querySelector("g")
+      if (el_svg && el_g) {
+        // 获取缩放倍数
+        // const transformValue = el_g.getAttribute('transform');
+        // if (transformValue && transformValue.indexOf('scale') > -1) {
+        //   const scaleMatch = transformValue.match(/scale\(([^)]+)\)/);
+        //   if (scaleMatch) {
+        //     const scale_old = parseFloat(scaleMatch[1]);
+        //     ...
+        //   }
+        // }
+        const scale_new = el_g.getBBox().height/el_div.offsetWidth;
+        el_svg.setAttribute("style", `height:${el_g.getBBox().height*scale_new+40}px`); // 重调容器大小
+        // el_g.setAttribute("transform", `translate(20.0,80.0) scale(${scale_new})`) // 重调位置和缩放
+        markmap_event(d) // 好像调位置有问题，只能重渲染了……
+      }
+    }
+  }
+}
+
+/**
+ * 一些AB块的后触发事件 - dom加载完触发 - markmap
+ */
+export function markmap_event(d: Element|Document) {
+  // xxx2markmap，渲染事件
+  if (d.querySelector('.ab-markmap-svg')) {
+    console.log("  - markmap_event")
+    let script_el: HTMLScriptElement|null = document.querySelector('script[script-id="ab-markmap-script"]');
+    if (script_el) script_el.remove();
+    const divEl = d as Element;
+    let markmapId = '';
+    if (divEl.tagName === 'DIV') {
+      markmapId = divEl.querySelector('.ab-markmap-svg')?.id || '';
+    }
+    script_el = document.createElement('script'); document.head.appendChild(script_el);
+    script_el.type = "module";
+    script_el.setAttribute("script-id", "ab-markmap-script");
+    script_el.textContent = `
+    import { Markmap, } from 'https://jspm.dev/markmap-view';
+    const markmapId = "${markmapId || ''}";
+    let mindmaps;
+    if (markmapId) {
+      mindmaps = document.querySelectorAll('#' + markmapId);
+    } else {
+      mindmaps = document.querySelectorAll('.ab-markmap-svg'); // 注意一下这里的选择器
+    }
+    for(const mindmap of mindmaps) {
+      mindmap.innerHTML = "";
+      Markmap.create(mindmap,null,JSON.parse(mindmap.getAttribute('data-json')));
+    }`;
+  }
+}