import { useHover, usePrefix, useValidNodeOffsetRect, useSelection, } from '../../hooks';
import { observer } from '@formily/reactive-vue';
import { composeExport } from '@jeamn/formily-components/src/__builtins__';
import { computed, defineComponent } from 'vue-demi';
import { isNum } from '@designable/shared';
var DashBox = observer(defineComponent({
    name: 'DashBox',
    setup: function () {
        var hoverRef = useHover();
        var prefixRef = usePrefix('aux-dashed-box');
        var selectionRef = useSelection();
        var rectRef = useValidNodeOffsetRect(computed(function () { var _a; return (_a = hoverRef.value) === null || _a === void 0 ? void 0 : _a.node; }));
        return function () {
            var _a;
            var rect = rectRef.value;
            var createTipsStyle = function () {
                var baseStyle = {
                    top: 0,
                    left: 0,
                    pointerEvents: 'none',
                    boxSizing: 'border-box',
                    visibility: 'hidden',
                    zIndex: 2,
                };
                if (rect) {
                    baseStyle.transform = "perspective(1px) translate3d(".concat(rect.x, "px,").concat(rect.y, "px,0)");
                    baseStyle.height = isNum(rect.height)
                        ? rect.height + 'px'
                        : rect.height;
                    baseStyle.width = isNum(rect.width) ? rect.width + 'px' : rect.width;
                    baseStyle.visibility = 'visible';
                }
                return baseStyle;
            };
            if (!hoverRef.value.node)
                return null;
            if (hoverRef.value.node.hidden)
                return null;
            if (selectionRef.value.selected.includes(hoverRef.value.node.id))
                return null;
            return (<div class={prefixRef.value} style={createTipsStyle()}>
            <span class={prefixRef.value + '-title'} style={{
                    position: 'absolute',
                    bottom: '100%',
                    left: 0,
                    fontSize: 12,
                    userSelect: 'none',
                    fontWeight: 'lighter',
                    whiteSpace: 'nowrap',
                }}>
              {(_a = hoverRef.value) === null || _a === void 0 ? void 0 : _a.node.getMessage('title')}
            </span>
          </div>);
        };
    },
}));
export var DashedBox = composeExport(observer(defineComponent({
    name: 'DashedBox',
    setup: function () {
        var hoverRef = useHover();
        return function () {
            var _a, _b;
            return (<>
              <DashBox key={(_b = (_a = hoverRef.value) === null || _a === void 0 ? void 0 : _a.node) === null || _b === void 0 ? void 0 : _b.id}></DashBox>
            </>);
        };
    },
})), { displayName: 'DashedBox' });
//# sourceMappingURL=DashedBox.jsx.map