chore: upgrade tech stack

.github/workflows/ci.yml

@@ -8,7 +8,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
 
     steps:
       - name: Checkout
@@ -22,6 +22,7 @@ jobs:
       - uses: pnpm/action-setup@v2
         name: Install pnpm
         with:
+          version: 9.x
           run_install: false
 
       - name: Get pnpm store directory
@@ -45,4 +46,8 @@ jobs:
         run: pnpm run lint && pnpm run tsc && pnpm run compile
       - run: pnpm test:ci
         env:
-          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}  
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v4
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}

app/body-overflow/page.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import React, { useRef, useEffect } from 'react';
+import domAlign from '../../src';
+
+export default function Overflow() {
+  const source = useRef();
+  const target = useRef();
+  const timer = useRef<any>();
+  const align = () => {
+    const ret = domAlign(source.current, target.current, {
+      points: ['tl', 'bl'],
+      overflow: {
+        adjustY: 1,
+        adjustX: 1,
+      },
+    });
+    console.log(ret);
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+    timer.current = setTimeout(() => {
+      document.body.style.overflow = 'hidden';
+    }, 1000);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (timer.current) {
+        clearTimeout(timer.current);
+      }
+      document.body.style.overflow = '';
+    };
+  }, []);
+
+  return (
+    <div style={{ height: 1000 }}>
+      <button ref={target} style={{ position: 'absolute', right: 0, top: 300 }}>
+        target
+      </button>
+
+      <div style={{ height: 100 }} />
+
+      <button onClick={align}>align</button>
+
+      <div
+        ref={source}
+        style={{
+          position: 'absolute',
+          width: 100,
+          height: 200,
+          border: '1px solid red',
+        }}>
+        oo
+      </div>
+    </div>
+  );
+}

app/fail/page.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import React, { useRef, useEffect } from 'react';
+import domAlign from '../../src';
+
+export default function Fail() {
+  const source = useRef();
+  const target = useRef();
+
+  function align() {
+    const ret = domAlign(source.current, target.current, {
+      points: ['bl', 'bl'],
+      overflow: {
+        adjustY: 1,
+      },
+    });
+    console.log(ret);
+  }
+  return (
+    <div style={{ height: 1000 }}>
+      <button ref={target}>target</button>
+
+      <div style={{ height: 100 }} />
+
+      <button onClick={align}>align</button>
+
+      <div
+        ref={source}
+        style={{
+          position: 'absolute',
+          width: 100,
+          height: 200,
+          border: '1px solid red',
+        }}>
+        oo
+      </div>
+    </div>
+  );
+}

app/page.tsx

@@ -0,0 +1,60 @@
+import Link from 'next/link';
+import { useMemo } from 'react';
+import React from 'react';
+import MarkdownIt from 'markdown-it';
+import 'github-markdown-css/github-markdown-light.css';
+// @ts-ignore
+import prism from 'prismjs';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/themes/prism.css';
+import fs from 'fs';
+import path from 'path';
+
+const readme = fs.readFileSync(
+  path.join(process.cwd(), './README.md'),
+  'utf-8',
+);
+const md = new MarkdownIt({
+  html: true,
+  linkify: true,
+  typographer: true,
+  highlight: function (code, lang) {
+    if (prism.languages[lang]) {
+      return prism.highlight(code, prism.languages[lang], lang);
+    } else {
+      return code;
+    }
+  },
+});
+
+export default function Home() {
+  const content = useMemo(() => {
+    return md.render(readme);
+  }, []);
+
+  return (
+    <div style={{ width: 1200, margin: 'auto' }}>
+      <h2>examples</h2>
+      <p>
+        <Link href="/simple">simple</Link>
+      </p>
+      <p>
+        <Link href="/body-overflow">body-overflow</Link>
+      </p>
+      <p>
+        <Link href="/fail">fail</Link>
+      </p>
+      <p>
+        <Link href="/point">point</Link>
+      </p>
+      <p>
+        <Link href="/shadow-dom">shadow-dom</Link>
+      </p>
+      <h2>readme</h2>
+      <div
+        className="markdown-body"
+        dangerouslySetInnerHTML={{ __html: content }}></div>
+    </div>
+  );
+}

app/shadow-dom/page.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import React, { useRef, useEffect } from 'react';
+import ReactDOM from 'react-dom/client';
+import domAlign from '../../src';
+
+function Test() {
+  const source = useRef();
+  const target = useRef();
+  function align() {
+    const ret = domAlign(source.current, target.current, {
+      points: ['bl', 'bl'],
+      overflow: {
+        adjustY: 1,
+      },
+    });
+    console.log(ret);
+  }
+
+  return (
+    <div style={{ height: 1000 }}>
+      <button ref={target}>target</button>
+
+      <div style={{ height: 100 }} />
+
+      <button onClick={align}>align</button>
+
+      <div
+        ref={source}
+        style={{
+          position: 'absolute',
+          width: 100,
+          height: 200,
+          border: '1px solid red',
+        }}>
+        oo
+      </div>
+    </div>
+  );
+}
+
+export default function ShadowDom() {
+  const source = useRef<HTMLDivElement>();
+
+  useEffect(() => {
+    const shadowRoot = source.current.attachShadow({ mode: 'open' });
+    ReactDOM.createRoot(shadowRoot).render(<Test />);
+  }, []);
+
+  return <div ref={source}></div>;
+}

app/simple/page.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+import React from 'react';
+import domAlign from '../../src';
+
+function $id(id): any {
+  return document.getElementById(id);
+}
+
+function $val(sel) {
+  sel = $id(sel);
+  return sel.value;
+}
+
+function align() {
+  domAlign($id('source'), $id('target'), {
+    points: [
+      $val('source_align_tb') + $val('source_align_lr'),
+      $val('target_align_tb') + $val('target_align_lr'),
+    ],
+    offset: [$val('offset1'), $val('offset2')],
+    targetOffset: [$val('targetOffset1'), $val('targetOffset2')],
+    overflow: {
+      adjustX: $id('adjustX').checked,
+      adjustY: $id('adjustY').checked,
+    },
+    useCssRight: $id('useCssRight').checked,
+    useCssBottom: $id('useCssBottom').checked,
+    useCssTransform: $id('useCssTransform').checked,
+
+    ignoreShake: $id('ignoreShake').checked,
+  });
+}
+export default function Simple() {
+  return (
+    <div>
+      <h1>dom-align</h1>
+
+      <div>
+        source:
+        <select id="source_align_tb">
+          <option value="t">t</option>
+          <option value="c">c</option>
+          <option value="b">b</option>
+        </select>
+        <select id="source_align_lr">
+          <option value="l">l</option>
+          <option value="c">c</option>
+          <option value="r">r</option>
+        </select>
+        &nbsp; target:
+        <select id="target_align_tb">
+          <option value="t">t</option>
+          <option value="c">c</option>
+          <option value="b">b</option>
+        </select>
+        <select id="target_align_lr">
+          <option value="l">l</option>
+          <option value="c">c</option>
+          <option value="r">r</option>
+        </select>
+        &nbsp; offset: [
+        <input type="offset" id="offset1" defaultValue="0" size={3} />
+        ,
+        <input type="offset" id="offset2" defaultValue="0" size={3} />
+        ] &nbsp; targetOffset: [
+        <input type="offset" id="targetOffset1" defaultValue="0" size={3} />
+        ,
+        <input type="offset" id="targetOffset2" defaultValue="0" size={3} />]
+        &nbsp; overflow: &nbsp;
+        <label>
+          adjustX:
+          <input type="checkbox" id="adjustX" />
+        </label>
+        &nbsp;
+        <label>
+          adjustY:
+          <input type="checkbox" id="adjustY" />
+        </label>
+        &nbsp;
+        <label>
+          useCssBottom:
+          <input type="checkbox" id="useCssBottom" />
+        </label>
+        &nbsp;
+        <label>
+          useCssRight:
+          <input type="checkbox" id="useCssRight" />
+        </label>
+        &nbsp;
+        <label>
+          useCssTransform:
+          <input type="checkbox" id="useCssTransform" defaultChecked={false} />
+        </label>
+        &nbsp;
+        <label>
+          ignoreShake:
+          <input type="checkbox" id="ignoreShake" />
+        </label>
+        &nbsp;
+        <button id="align" onClick={align}>
+          align
+        </button>
+        <br />
+        <div
+          style={{
+            width: 400,
+            height: 400,
+            overflow: 'auto',
+            border: '1px solid green',
+            position: 'relative',
+          }}>
+          <div
+            style={{
+              background: 'yellow',
+              width: 240,
+              height: 240,
+              margin: 50,
+            }}
+            id="target">
+            target node
+          </div>
+          <div style={{ width: 1000, height: 1000 }} />
+          <div
+            style={{
+              background: 'red',
+              width: 80,
+              height: 80,
+              left: 0,
+              top: 0,
+              position: 'absolute',
+              transition: 'all 0.5s',
+              overflowY: 'auto',
+            }}
+            id="source">
+            source node
+            <br />
+            <br />
+            <br />
+            <br />
+            <br />
+            <br />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}