markdown-design-doc-viewer-embed 1.5.0 → 1.5.1

package/index.js

@@ -25362,6 +25362,96 @@ function restorePlain(root, indexes) {
   });
 }
 
+// webview/splitter.ts
+var MIN_SPLIT = 20;
+var MAX_SPLIT = 80;
+function applySplit(el, percent) {
+  if (percent === void 0 || !Number.isFinite(percent)) {
+    el.style.removeProperty("--seqnotes-split");
+    return void 0;
+  }
+  percent = Math.min(MAX_SPLIT, Math.max(MIN_SPLIT, percent));
+  el.style.setProperty("--seqnotes-split", `${percent}%`);
+  return percent;
+}
+var KEY_STEP = 5;
+function addSplitter(pair, title, onSplit, signal) {
+  const splitter = document.createElement("div");
+  splitter.className = "seqnotes-splitter";
+  splitter.title = title;
+  splitter.tabIndex = 0;
+  splitter.setAttribute("role", "separator");
+  splitter.setAttribute("aria-orientation", "vertical");
+  splitter.setAttribute("aria-valuemin", String(MIN_SPLIT));
+  splitter.setAttribute("aria-valuemax", String(MAX_SPLIT));
+  const column = pair.querySelector(".seqnotes-seq-col");
+  column?.after(splitter);
+  const current = () => {
+    const width = pair.getBoundingClientRect().width;
+    return width > 0 && column ? column.getBoundingClientRect().width / width * 100 : 0;
+  };
+  const showValue = () => splitter.setAttribute("aria-valuenow", String(Math.round(current())));
+  const split = (percent) => {
+    onSplit(percent);
+    showValue();
+  };
+  splitter.addEventListener(
+    "pointerdown",
+    (e) => {
+      e.preventDefault();
+      splitter.setPointerCapture(e.pointerId);
+      const move = (ev) => {
+        const r = pair.getBoundingClientRect();
+        split((ev.clientX - r.left) / r.width * 100);
+      };
+      const end = () => {
+        splitter.removeEventListener("pointermove", move);
+        splitter.removeEventListener("lostpointercapture", end);
+      };
+      splitter.addEventListener("pointermove", move, { signal });
+      splitter.addEventListener("lostpointercapture", end, { signal });
+    },
+    { signal }
+  );
+  splitter.addEventListener(
+    "dblclick",
+    (e) => {
+      e.stopPropagation();
+      split(void 0);
+    },
+    { signal }
+  );
+  splitter.addEventListener("focus", showValue, { signal });
+  splitter.addEventListener(
+    "keydown",
+    (e) => {
+      let percent;
+      switch (e.key) {
+        case "ArrowLeft":
+          percent = current() - KEY_STEP;
+          break;
+        case "ArrowRight":
+          percent = current() + KEY_STEP;
+          break;
+        case "Home":
+          percent = MIN_SPLIT;
+          break;
+        case "End":
+          percent = MAX_SPLIT;
+          break;
+        case "Enter":
+          percent = void 0;
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      split(percent);
+    },
+    { signal }
+  );
+}
+
 // webview/toc.ts
 var TOC_CURRENT = "seqnotes-toc-current";
 var TOC_CURRENT_RATIO = 0.2;
@@ -26128,46 +26218,14 @@ function createPreview(ctx) {
     el.classList.toggle("seqnotes-wide", previewWidth() >= splitMinWidth);
   }
   const stopResize = scroll.onResize(applyLayout);
-  const MIN_SPLIT = 20;
-  const MAX_SPLIT = 80;
   function setSplit(percent) {
-    const style = el.style;
-    if (percent === void 0) {
-      style.removeProperty("--seqnotes-split");
-    } else {
-      percent = Math.min(MAX_SPLIT, Math.max(MIN_SPLIT, percent));
-      style.setProperty("--seqnotes-split", `${percent}%`);
-    }
+    const split = applySplit(el, percent);
     const state = ctx.getState();
     if (state) {
-      ctx.setState({ ...state, split: percent });
+      ctx.setState({ ...state, split });
     }
   }
   setSplit(ctx.getState()?.split);
-  function addSplitter(pair) {
-    const splitter = document.createElement("div");
-    splitter.className = "seqnotes-splitter";
-    splitter.title = titles.seqnotesSplitterTitle ?? "";
-    pair.querySelector(".seqnotes-seq-col")?.after(splitter);
-    splitter.addEventListener("pointerdown", (e) => {
-      e.preventDefault();
-      splitter.setPointerCapture(e.pointerId);
-      const move = (ev) => {
-        const r = pair.getBoundingClientRect();
-        setSplit((ev.clientX - r.left) / r.width * 100);
-      };
-      const up = () => {
-        splitter.removeEventListener("pointermove", move);
-        splitter.removeEventListener("pointerup", up);
-      };
-      splitter.addEventListener("pointermove", move);
-      splitter.addEventListener("pointerup", up);
-    });
-    splitter.addEventListener("dblclick", (e) => {
-      e.stopPropagation();
-      setSplit(void 0);
-    });
-  }
   let previewTheme = titles.seqnotesTheme === "light" || titles.seqnotesTheme === "dark" ? titles.seqnotesTheme : "auto";
   function isVscodeDark() {
     return !el.classList.contains("vscode-light") && !el.classList.contains("vscode-high-contrast-light");
@@ -26463,7 +26521,7 @@ ${source}`;
     root.querySelectorAll(".seqnotes-pair").forEach((pair2) => {
       wrapSections(pair2);
       if (!pair2.classList.contains("seqnotes-pair-stacked")) {
-        addSplitter(pair2);
+        addSplitter(pair2, titles.seqnotesSplitterTitle ?? "", setSplit, signal);
       }
     });
     setUpWarnings();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markdown-design-doc-viewer-embed",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "The viewer of Markdown Design Doc Viewer to embed in a web app (React or not): design documents in Markdown with their mermaid sequence diagrams, flowcharts, ER and state diagrams and wireframes linked to the steps after them.",
   "license": "MIT",
   "repository": {

package/viewer.css

@@ -1076,6 +1076,12 @@ html:has(> body[data-seqnotes-theme=dark]:is(.vscode-light, .vscode-high-contras
 .seqnotes-viewer.seqnotes-wide .seqnotes-splitter:active::after {
   background: var(--vscode-sash-hoverBorder, var(--seqnotes-accent));
 }
+.seqnotes-viewer.seqnotes-wide .seqnotes-splitter:focus {
+  outline: none;
+}
+.seqnotes-viewer.seqnotes-wide .seqnotes-splitter:focus-visible::after {
+  background: var(--vscode-focusBorder, var(--seqnotes-accent));
+}
 .seqnotes-viewer.seqnotes-wide .seqnotes-pair:not(.seqnotes-pair-stacked) > .seqnotes-seq-col {
   align-self: start;
   position: sticky;