(docs) add resizing to screenshooter jcubic#438

jcubic · jcubic · commit 52f3af5b6cee · 2025-02-03T21:40:02.000+01:00
diff --git a/docs/src/components/ScreenShotBox/index.tsx b/docs/src/components/ScreenShotBox/index.tsx
@@ -1,3 +1,9 @@
+import React, {
+    useState,
+    useRef,
+    useEffect,
+    CSSProperties
+} from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useScripts from '@site/src/hooks/useScripts';
 import Head from '@docusaurus/Head';
@@ -16,12 +22,50 @@ const example_code = `(define re #/<h1>([^>]+)<\\/h1>/)
     (loop (- i 1))))
 `;
 
+const WIDTH_MIN = 50;
+
 export default function ScreenShotBox(): JSX.Element {
+    const dragging = useRef<boolean>(false);
+    const dialogRef = useRef<HTMLDivElement>(null);
+    const boxRef = useRef<HTMLDivElement>(null);
+    const resizerRef = useRef<HTMLDivElement>(null);
+
     const { siteConfig } = useDocusaurusContext();
+
     useScripts([
         'https://cdn.jsdelivr.net/combine/npm/codemirror@5.58.3/lib/codemirror.js,npm/codemirror@5.58.3/mode/javascript/javascript.js,npm/codemirror@5.58.3/addon/edit/matchbrackets.js,gh/jcubic/lips@devel/lib/js/codemirror.js',
         `${siteConfig.baseUrl}js/screenshooter.js`
     ]);
+
+    useEffect(() => {
+        function mouseMove(event: MouseEvent) {
+            if (dragging.current) {
+                const screenX = event.screenX;
+                const rect = resizerRef.current.getBoundingClientRect();
+                let diff = screenX - rect.left;
+                let width = dialogRef.current.clientWidth + diff;
+                if (width < WIDTH_MIN) {
+                    width = WIDTH_MIN + 1;
+                }
+                boxRef.current.style.setProperty('--width', `${width}px`);
+            }
+        }
+        function mouseUp() {
+            dragging.current = false;
+        }
+        document.addEventListener('mousemove', mouseMove);
+        document.addEventListener('mouseup', mouseUp);
+        return () => {
+            document.removeEventListener('mousemove', mouseMove);
+            document.removeEventListener('mouseup', mouseUp);
+        }
+    }, []);
+
+
+    function dragStart() {
+        dragging.current = true;
+    }
+
     return (
         <>
           <Head>
@@ -30,18 +74,21 @@ export default function ScreenShotBox(): JSX.Element {
             <link href="https://cdn.jsdelivr.net/npm/codemirror@5.58.3/addon/hint/show-hint.css" rel="stylesheet"/>
             <script src="https://cdn.jsdelivr.net/npm/html-to-image@1.10.4/dist/html-to-image.js"></script>
           </Head>
-          <div className="box">
+          <div className="box" ref={boxRef}>
             <pre className="hidden">{example_code}</pre>
             <div className="wrapper">
-              <div className="cm-dialog">
-                <header>
-                  <ul className="cm-icons">
-                    <li></li>
-                    <li></li>
-                    <li></li>
-                  </ul>
-                </header>
-                <div className="cm-body"></div>
+              <div className="resizable">
+                <div className="cm-dialog" ref={dialogRef}>
+                  <header>
+                    <ul className="cm-icons">
+                      <li></li>
+                      <li></li>
+                      <li></li>
+                    </ul>
+                  </header>
+                  <div className="cm-body"></div>
+                </div>
+                <div className="resizer" ref={resizerRef} onMouseDown={dragStart}></div>
               </div>
             </div>
             <footer>
diff --git a/docs/src/components/ScreenShotBox/style.css b/docs/src/components/ScreenShotBox/style.css
@@ -40,6 +40,18 @@
 .wrapper {
     background: #ABB8C3;
     padding-block: 50px;
+    --radius: 5px;
+}
+.resizable {
+    display: flex;
+}
+.resizable .resizer {
+    width: 5px;
+    cursor: ew-resize;
+    border-radius: 0 var(--radius) var(--radius) 0;
+}
+.resizable .resizer:hover {
+    background: #bd6b18;
 }
 .position, .cm-shadow-box, .wrapper {
     display: flex;
@@ -50,13 +62,16 @@
 .cm-dialog {
     width: var(--width);
     height: auto;
-    border-radius: 5px;
+    border-radius: var(--radius);
     box-shadow: rgba(0, 0, 0, 0.55) 0px 20px 68px;
     --background: #151718;
     background: var(--background, white);
     z-index: 100;
     overflow: hidden;
 }
+.cm-dialog:has(+.resizer:hover) {
+    border-radius: var(--radius) 0 0 var(--radius);
+}
 .cm-dialog header {
     padding: 10px;
 }
diff --git a/docs/static/js/screenshooter.js b/docs/static/js/screenshooter.js
@@ -49,5 +49,4 @@ function adjust_height() {
         body.style.setProperty('--height', rect.height + 300);
     }
 }
-
 })();

Original file line number	Diff line number	Diff line change
`@@ -49,5 +49,4 @@ function adjust_height() {`
`49`	`49`	`body.style.setProperty('--height', rect.height + 300);`
`50`	`50`	`}`
`51`	`51`	`}`
`52`		`-`
`53`	`52`	`})();`