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

package/README.md

@@ -0,0 +1,9 @@
+# @visactor/react-vrender-utils
+
+## Description
+
+## Usage
+
+```typescript
+import { xxx } from '@visactor/react-vrender-utils';
+```

package/cjs/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/cjs/Html.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k);
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
+        enumerable: !0,
+        get: function() {
+            return m[k];
+        }
+    }), Object.defineProperty(o, k2, desc);
+} : function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k), o[k2] = m[k];
+}), __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function(o, v) {
+    Object.defineProperty(o, "default", {
+        enumerable: !0,
+        value: v
+    });
+} : function(o, v) {
+    o.default = v;
+}), __importStar = this && this.__importStar || function(mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (null != mod) for (var k in mod) "default" !== k && Object.prototype.hasOwnProperty.call(mod, k) && __createBinding(result, mod, k);
+    return __setModuleDefault(result, mod), result;
+}, __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;
+}, __importDefault = this && this.__importDefault || function(mod) {
+    return mod && mod.__esModule ? mod : {
+        default: mod
+    };
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.Html = void 0;
+
+const react_1 = __importDefault(require("react")), ReactDOM = __importStar(require("react-dom")), react_vrender_1 = require("@visactor/react-vrender"), needForceStyle = el => {
+    const pos = window.getComputedStyle(el).position;
+    return !("absolute" === pos || "relative" === pos);
+}, Html = ({children: children, divProps: divProps, transform: transform, transformFunc: transformFunc}) => {
+    const groupRef = react_1.default.useRef(null), [div] = react_1.default.useState((() => document.createElement("div"))), root = react_1.default.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_1.default.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_1.default.useLayoutEffect((() => {
+        handleGroupRerender();
+    }), [ divProps ]), react_1.default.useLayoutEffect((() => {
+        root.render(children);
+    })), react_1.default.useLayoutEffect((() => () => {
+        root.unmount();
+    }), []), react_1.default.createElement(react_vrender_1.ShadowRoot, {
+        ref: groupRef
+    });
+};
+
+exports.Html = Html;

package/cjs/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/cjs/index.d.ts

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

package/cjs/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k);
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
+        enumerable: !0,
+        get: function() {
+            return m[k];
+        }
+    }), Object.defineProperty(o, k2, desc);
+} : function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k), o[k2] = m[k];
+}), __exportStar = this && this.__exportStar || function(m, exports) {
+    for (var p in m) "default" === p || Object.prototype.hasOwnProperty.call(exports, p) || __createBinding(exports, m, p);
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), __exportStar(require("./Html"), exports);
+//# sourceMappingURL=index.js.map

package/cjs/index.js.map

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