"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DashedBox = void 0;
var hooks_1 = require("../../hooks");
var reactive_vue_1 = require("@formily/reactive-vue");
var __builtins__1 = require("@jeamn/formily-components/src/__builtins__");
var vue_demi_1 = require("vue-demi");
var shared_1 = require("@designable/shared");
var DashBox = (0, reactive_vue_1.observer)((0, vue_demi_1.defineComponent)({
    name: 'DashBox',
    setup: function () {
        var hoverRef = (0, hooks_1.useHover)();
        var prefixRef = (0, hooks_1.usePrefix)('aux-dashed-box');
        var selectionRef = (0, hooks_1.useSelection)();
        var rectRef = (0, hooks_1.useValidNodeOffsetRect)((0, vue_demi_1.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 = (0, shared_1.isNum)(rect.height)
                        ? rect.height + 'px'
                        : rect.height;
                    baseStyle.width = (0, shared_1.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>);
        };
    },
}));
exports.DashedBox = (0, __builtins__1.composeExport)((0, reactive_vue_1.observer)((0, vue_demi_1.defineComponent)({
    name: 'DashedBox',
    setup: function () {
        var hoverRef = (0, hooks_1.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