import { jsx } from "react/jsx-runtime";
import { ViewportPortal, useStore } from "../xyflow/react.js";
import { useCallback } from "react";
import { shallow } from "zustand/shallow";
const NODE_VIEWPORT_OVERLAY_Z_INDEX = {
    nodeHandleAffordance: 1002,
    nodeToolbar: 1003
};
function NodeViewportOverlay({ nodeId, anchor, layer, children }) {
    const geometry = useStore(useCallback((state)=>{
        const internalNode = state.nodeLookup.get(nodeId);
        const positionAbsolute = internalNode?.internals.positionAbsolute;
        return {
            x: positionAbsolute?.x,
            y: positionAbsolute?.y,
            width: anchor?.width ?? internalNode?.measured?.width ?? internalNode?.width,
            height: anchor?.height ?? internalNode?.measured?.height ?? internalNode?.height
        };
    }, [
        anchor?.height,
        anchor?.width,
        nodeId
    ]), shallow);
    if (null == geometry.x || null == geometry.y || null == geometry.width || null == geometry.height) return children;
    return /*#__PURE__*/ jsx(ViewportPortal, {
        children: /*#__PURE__*/ jsx("div", {
            className: "absolute pointer-events-none",
            style: {
                position: 'absolute',
                left: geometry.x + (anchor?.left ?? 0),
                top: geometry.y + (anchor?.top ?? 0),
                width: geometry.width,
                height: geometry.height,
                transform: anchor?.transform,
                zIndex: layer ? NODE_VIEWPORT_OVERLAY_Z_INDEX[layer] : void 0
            },
            children: children
        })
    });
}
export { NodeViewportOverlay };
