feat: auto-hide presentation toolbar when not hovered (#1923)

* docs: update changelog

* feat: auto-hide presentation toolbar when not hovered

* fix: grab state

* fix: bugs

editors/vscode/CHANGELOG.md

@@ -37,6 +37,7 @@ The changelog lines unspecified with authors are all written by the @Myriad-Drea
 ### Code Analysis
 
 * (Fix) Truncating value repr with 10MB limit in https://github.com/Myriad-Dreamin/tinymist/pull/1850
+* (Fix) Updated the docs link from `pattern` to `tiling` by @YDX-2147483647 in https://github.com/Myriad-Dreamin/tinymist/pull/1906
 * Resolving definitions with dynamic analysis in https://github.com/Myriad-Dreamin/tinymist/pull/1904
 
 ### Docstring
@@ -64,6 +65,7 @@ The changelog lines unspecified with authors are all written by the @Myriad-Drea
 * Added flake.nix in https://github.com/Myriad-Dreamin/tinymist/pull/1843
 * Removed debug symbol links in https://github.com/Myriad-Dreamin/tinymist/pull/1836
 * Generating typlite, config reference markdown files in https://github.com/Myriad-Dreamin/tinymist/pull/1868, https://github.com/Myriad-Dreamin/tinymist/pull/1881, https://github.com/Myriad-Dreamin/tinymist/pull/1885, and https://github.com/Myriad-Dreamin/tinymist/pull/1886
+* Added software specification for LLM in https://github.com/Myriad-Dreamin/tinymist/pull/1917 and https://github.com/Myriad-Dreamin/tinymist/pull/1918
 
 **Full Changelog**: https://github.com/Myriad-Dreamin/tinymist/compare/v0.13.14...v0.13.16
 

tools/typst-preview-frontend/index.html

@@ -163,7 +163,7 @@
     <!-- reserving 1px to hide height border, margin-top: -1px; -->
     <div id="typst-container" style="width: 100%">
       <div id="typst-container-top" style="width: 100%; z-index: 1">
-        <div id="typst-top-toolbar" style="width: 100%">
+        <div id="typst-top-toolbar" style="width: calc(100% - 24px)">
           <div
             id="typst-top-toolbar-start"
             class="flex-row"

tools/typst-preview-frontend/src/drag.ts

@@ -14,10 +14,21 @@ export function setupDrag() {
     };
     moved = true;
   };
+  const goodDrag = (element: HTMLElement | null): element is HTMLElement => {
+    if (!element) return false;
+    // is not child of id=typst-container-top
+    while (element) {
+      if (element.id === "typst-container-top") {
+        return false;
+      }
+      element = element.parentElement;
+    }
+    return true;
+  };
   const mouseUpHandler = function () {
     document.removeEventListener("mousemove", mouseMoveHandler);
     document.removeEventListener("mouseup", mouseUpHandler);
-    if (!containerElement) return;
+    if (!goodDrag(containerElement)) return;
     if (!moved) {
       document.getSelection()?.removeAllRanges();
     }
@@ -29,7 +40,7 @@ export function setupDrag() {
       x: e.clientX,
       y: e.clientY,
     };
-    if (!containerElement) return;
+    if (!goodDrag(containerElement)) return;
     const elementUnderMouse = e.target as HTMLElement | null;
     if (elementUnderMouse !== null && elementUnderMouse.classList.contains("tsel")) {
       return;

tools/typst-preview-frontend/src/styles/layout.css

@@ -71,10 +71,16 @@
   width: 100%;
   height: 100%;
   flex: 1;
-  max-height: calc(100vh - 35px);
+  max-height: 100vh;
 }
 
 #typst-container.mode-slide #typst-container-top {
-  flex: 0 0 35px;
+    height: 35px;
-  display: flex;
+    position: absolute;
+    opacity: 0;
+    transition: opacity 0.1s ease;
 }
+
+#typst-container.mode-slide #typst-container-top:hover {
+    opacity: 1;
+}