@visactor/react-vrender-utils 0.9.0-alpha.0

package/es/Html.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type HtmlTransformAttrs = {
+    x: number;
+    y: number;
+    scaleX: number;
+    scaleY: number;
+    rotateDeg: number;
+    skewX: number;
+    skewY: number;
+};
+export type HtmlProps = PropsWithChildren<{
+    divProps?: HTMLAttributes<HTMLDivElement>;
+    transform?: boolean;
+    transformFunc?: (attrs: HtmlTransformAttrs) => HtmlTransformAttrs;
+}>;
+export declare const Html: ({ children, divProps, transform, transformFunc }: HtmlProps) => JSX.Element;

package/es/Html.js

@@ -0,0 +1,55 @@
+var __rest = this && this.__rest || function(s, e) {
+    var t = {};
+    for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
+    if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
+        var i = 0;
+        for (p = Object.getOwnPropertySymbols(s); i < p.length; i++) e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
+    }
+    return t;
+};
+
+import React from "react";
+
+import * as ReactDOM from "react-dom";
+
+import { ShadowRoot } from "@visactor/react-vrender";
+
+const needForceStyle = el => {
+    const pos = window.getComputedStyle(el).position;
+    return !("absolute" === pos || "relative" === pos);
+};
+
+export const Html = ({children: children, divProps: divProps, transform: transform, transformFunc: transformFunc}) => {
+    const groupRef = React.useRef(null), [div] = React.useState((() => document.createElement("div"))), root = React.useMemo((() => ReactDOM.createRoot(div)), [ div ]), shouldTransform = null == transform || transform, handleGroupRerender = () => {
+        if (shouldTransform && groupRef.current) {
+            if (!groupRef.current.shouldUpdateGlobalMatrix()) return;
+            let attrs = groupRef.current.globalTransMatrix.toTransformAttrs();
+            transformFunc && (attrs = transformFunc(attrs)), div.style.position = "absolute", 
+            div.style.zIndex = "10", div.style.top = "0px", div.style.left = "0px", div.style.transform = `translate(${attrs.x}px, ${attrs.y}px) rotate(${attrs.rotateDeg}deg) scaleX(${attrs.scaleX}) scaleY(${attrs.scaleY})`, 
+            div.style.transformOrigin = "top left";
+        } else div.style.position = "", div.style.zIndex = "", div.style.top = "", div.style.left = "", 
+        div.style.transform = "", div.style.transformOrigin = "";
+        const _a = divProps || {}, {style: style} = _a, restProps = __rest(_a, [ "style" ]);
+        Object.assign(div.style, style), Object.assign(div, restProps);
+    };
+    return React.useEffect((() => {
+        var _a, _b;
+        const group = groupRef.current;
+        if (!(null == group ? void 0 : group.stage)) return;
+        const stage = group.stage, htmlContainer = null === (_b = null === (_a = stage.window) || void 0 === _a ? void 0 : _a.getContainer) || void 0 === _b ? void 0 : _b.call(_a);
+        return htmlContainer ? (htmlContainer.appendChild(div), shouldTransform && needForceStyle(htmlContainer) && (htmlContainer.style.position = "relative"), 
+        stage.hooks.beforeRender.tap(`${group._uid}-render`, handleGroupRerender), handleGroupRerender(), 
+        () => {
+            var _a;
+            stage.hooks.beforeRender.unTap(`${group._uid}-render`, handleGroupRerender), null === (_a = div.parentNode) || void 0 === _a || _a.removeChild(div);
+        }) : void 0;
+    }), [ shouldTransform ]), React.useLayoutEffect((() => {
+        handleGroupRerender();
+    }), [ divProps ]), React.useLayoutEffect((() => {
+        root.render(children);
+    })), React.useLayoutEffect((() => () => {
+        root.unmount();
+    }), []), React.createElement(ShadowRoot, {
+        ref: groupRef
+    });
+};

package/es/Html.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Html.tsx"],"names":[],"mappings":"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","file":"Html.js","sourcesContent":["import React from 'react';\n// eslint-disable-next-line no-duplicate-imports\nimport type { HTMLAttributes, PropsWithChildren } from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { ShadowRoot } from '@visactor/react-vrender';\n// eslint-disable-next-line no-duplicate-imports\nimport type { IShadowRoot } from '@visactor/vrender';\n\nconst needForceStyle = (el: HTMLDivElement) => {\n  const pos = window.getComputedStyle(el).position;\n  const ok = pos === 'absolute' || pos === 'relative';\n  return !ok;\n};\n\nexport type HtmlTransformAttrs = {\n  x: number;\n  y: number;\n  scaleX: number;\n  scaleY: number;\n  rotateDeg: number;\n  skewX: number;\n  skewY: number;\n};\n\nexport type HtmlProps = PropsWithChildren<{\n  divProps?: HTMLAttributes<HTMLDivElement>;\n  transform?: boolean;\n  transformFunc?: (attrs: HtmlTransformAttrs) => HtmlTransformAttrs;\n}>;\n\nexport const Html = ({ children, divProps, transform, transformFunc }: HtmlProps) => {\n  const groupRef = React.useRef<IShadowRoot>(null);\n\n  const [div] = React.useState(() => document.createElement('div'));\n  const root = React.useMemo(() => (ReactDOM as any).createRoot(div), [div]);\n\n  const shouldTransform = transform ?? true;\n\n  const handleGroupRerender = () => {\n    if (shouldTransform && groupRef.current) {\n      if (!groupRef.current.shouldUpdateGlobalMatrix()) {\n        return;\n      }\n\n      const matrix = groupRef.current.globalTransMatrix;\n      let attrs = matrix.toTransformAttrs();\n      if (transformFunc) {\n        attrs = transformFunc(attrs);\n      }\n      div.style.position = 'absolute';\n      div.style.zIndex = '10';\n      div.style.top = '0px';\n      div.style.left = '0px';\n      // eslint-disable-next-line max-len\n      div.style.transform = `translate(${attrs.x}px, ${attrs.y}px) rotate(${attrs.rotateDeg}deg) scaleX(${attrs.scaleX}) scaleY(${attrs.scaleY})`;\n      div.style.transformOrigin = 'top left';\n    } else {\n      div.style.position = '';\n      div.style.zIndex = '';\n      div.style.top = '';\n      div.style.left = '';\n      div.style.transform = ``;\n      div.style.transformOrigin = '';\n    }\n    const { style, ...restProps } = divProps || {};\n    Object.assign(div.style, style);\n    Object.assign(div, restProps);\n  };\n\n  React.useEffect(() => {\n    const group = groupRef.current;\n    if (!group?.stage) {\n      return;\n    }\n    const stage = group.stage;\n    const htmlContainer = stage.window?.getContainer?.();\n    if (!htmlContainer) {\n      return;\n    }\n    htmlContainer.appendChild(div);\n\n    if (shouldTransform && needForceStyle(htmlContainer)) {\n      htmlContainer.style.position = 'relative';\n    }\n\n    stage.hooks.beforeRender.tap(`${group._uid}-render`, handleGroupRerender);\n\n    handleGroupRerender();\n    return () => {\n      stage.hooks.beforeRender.unTap(`${group._uid}-render`, handleGroupRerender);\n      div.parentNode?.removeChild(div);\n    };\n  }, [shouldTransform]);\n\n  React.useLayoutEffect(() => {\n    handleGroupRerender();\n  }, [divProps]);\n\n  React.useLayoutEffect(() => {\n    root.render(children);\n  });\n\n  React.useLayoutEffect(() => {\n    return () => {\n      root.unmount();\n    };\n  }, []);\n\n  return <ShadowRoot ref={groupRef as any} />;\n};\n"]}

package/es/index.d.ts

@@ -0,0 +1 @@
+export * from './Html';

package/es/index.js

@@ -0,0 +1,2 @@
+export * from "./Html";
+//# sourceMappingURL=index.js.map

package/es/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC","file":"index.js","sourcesContent":["export * from './Html';\n"]}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@visactor/react-vrender-utils",
+  "version": "0.9.0-alpha.0",
+  "description": "",
+  "sideEffects": false,
+  "main": "cjs/index.js",
+  "module": "es/index.js",
+  "types": "es/index.d.ts",
+  "files": [
+    "cjs",
+    "es",
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "@visactor/vrender": "0.9.0-alpha.0",
+    "@visactor/react-vrender": "0.9.0-alpha.0",
+    "@visactor/vutils": "0.9.0-alpha.2",
+    "react-reconciler": "^0.29.0",
+    "tslib": "^2.3.1"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.1.4",
+    "react": "16.13.0",
+    "react-dom": "16.13.0",
+    "@types/react": "16.9.49",
+    "@types/react-dom": "16.9.8",
+    "@vitejs/plugin-react": "3.1.0",
+    "eslint": "~8.18.0",
+    "vite": "3.2.6",
+    "typescript": "4.9.5",
+    "@internal/ts-config": "0.0.1",
+    "@internal/bundler": "0.0.1",
+    "@internal/eslint-config": "0.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "compile": "tsc --noEmit",
+    "eslint": "eslint --debug --fix src/",
+    "build": "bundle",
+    "dev": "bundle --clean -f es -w",
+    "test": "",
+    "start": "vite ./vite"
+  }
+}