fix: fix chromium agent (#864)

* test: fix e2e config

* demo: add agent

* fix: fix chromium agent

* fix: fix chromium agent

* fix: fix custom element offset

Author: daybrush

.github/workflows/run-e2e.yml

@@ -34,6 +34,7 @@ jobs:
         run: npm run test:fail-ci
         working-directory: ./packages/react-moveable
       - name: Archive Failed Artifact
+        if: ${{ failure() }}
         uses: actions/upload-artifact@v2
         with:
           name: failed snapshot

packages/react-moveable/.storybook/test-runner.js

@@ -1,12 +1,6 @@
-// .storybook/test-runner.js
-const { toMatchImageSnapshot } = require('jest-image-snapshot');
-
 const customSnapshotsDir = `${process.cwd()}/__snapshots__`;
 
 module.exports = {
-    setup() {
-        expect.extend({ toMatchImageSnapshot });
-    },
     async postRender(page, context) {
         if (!process.env.SKIP_TEST) {
             return;

packages/react-moveable/src/consts.ts

@@ -39,10 +39,12 @@ export const IS_WEBKIT605 = IS_WEBKIT && (() => {
 
 const browserName = agent.browser.name;
 const browserVersion = parseInt(agent.browser.version, 10);
+const IS_CHROME = browserName === "chrome";
 const IS_CHROMIUM = agent.browser.chromium;
 const chromiumVersion = parseInt(agent.browser.chromiumVersion, 10) || 0;
 
-export const IS_CHROME109 = IS_CHROMIUM && chromiumVersion >= 109;
+export const IS_CHROMIUM109 = (IS_CHROME && browserVersion >= 109)
+    || (IS_CHROMIUM && chromiumVersion >= 109);
 export const IS_FIREFOX = browserName === "firefox";
 export const IS_SAFARI_ABOVE15
     = parseInt(agent.browser.webkitVersion, 10) >= 612

packages/react-moveable/src/utils.tsx

@@ -196,12 +196,11 @@ export function getOffsetInfo(
         }
         const parentNode = slotParentNode || targetParentNode;
 
-
         if (parentNode && parentNode.nodeType === 11) {
             // Shadow Root
             target = (parentNode as ShadowRoot).host as HTMLElement;
             isCustomElement = true;
-
+            position = getComputedStyle(target).position;
             break;
         }
         target = parentNode as HTMLElement | SVGElement;

packages/react-moveable/src/utils/getMatrixStackInfo.ts

@@ -2,7 +2,7 @@ import {
     convertCSStoMatrix, convertDimension,
     createIdentityMatrix, createOriginMatrix, createScaleMatrix,
 } from "@scena/matrix";
-import { IS_WEBKIT, IS_SAFARI_ABOVE15, IS_FIREFOX, IS_CHROME109 } from "../consts";
+import { IS_WEBKIT, IS_SAFARI_ABOVE15, IS_FIREFOX, IS_CHROMIUM109 } from "../consts";
 import { MatrixInfo } from "../types";
 import {
     getOffsetInfo, getElementTransform,
@@ -124,10 +124,10 @@ export function getMatrixStackInfo(
             isStatic = offsetInfo.isStatic;
             zoom *= offsetZoom;
 
-            if (offsetZoom !== 1 && isStatic) {
+            if ((offsetInfo.isCustomElement || offsetZoom !== 1) && isStatic) {
                 offsetLeft -= offsetParent.offsetLeft;
                 offsetTop -= offsetParent.offsetTop;
-            } else if (IS_FIREFOX || IS_CHROME109) {
+            } else if (IS_FIREFOX || IS_CHROMIUM109) {
                 const parentSlotElement = offsetInfo.parentSlotElement;
 
                 if (parentSlotElement) {

packages/react-moveable/stories/99-Tests/Deafult.stories.tsx

@@ -30,7 +30,7 @@ export const TestsCustomElement = add("Test Custom Element Offset", {
         await wait();
         const moveableElement = findMoveable(canvasElement);
 
-        expect(moveableElement.style.transform).toBe("translate3d(60px, 140px, 0px)");
+        expect(moveableElement.style.transform).toBe("translate3d(60px, 192px, 0px)");
     },
 });
 export const TestsCustomElementBounds = add("Test Custom Element with Bounds", {

packages/react-moveable/stories/99-Tests/ReactCustomElementApp.tsx

@@ -73,9 +73,18 @@ declare global {
 }
 
 export default function App() {
+    const [agent, setAgent] = React.useState("");
+
+    React.useEffect(() => {
+        setAgent(navigator.userAgent);
+    }, []);
     return <div className="container" style={{
         border: "1px solid black",
     }}>
+        <p style={{
+            display: "block",
+            height: "20px",
+        }}>{agent}</p>
         <custom-element style={{
             display: "block",
             padding: "10px",