@visactor/react-vrender-utils/cjs/Html.js

## Description

"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;