import { Helpers } from './Helpers';
import { useSelection, useValidNodeOffsetRect, useTree, useCursor, useDragon, usePrefix, useDesigner } from '../../hooks';
import { ResizeHandler } from './ResizeHandler';
import { observer } from '@formily/reactive-vue';
import { defineComponent } from 'vue-demi';
import { composeExport } from '@jeamn/formily-components/src/__builtins__';
import { toRef } from '@vue/runtime-dom';
import { isNum } from '@designable/shared';
import { TranslateHandler } from './TranslateHandler';
export var SelectionBox = defineComponent({
    name: 'SelectionBox',
    inheritAttrs: false,
    props: ['node', 'showHelpers'],
    setup: function (props, _a) {
        var attrs = _a.attrs;
        var designerRef = useDesigner();
        var prefixRef = usePrefix('aux-selection-box');
        var innerPrefixRef = usePrefix('aux-selection-box-inner');
        var nodeRectRef = useValidNodeOffsetRect(toRef(props, 'node'));
        return function () {
            var _a;
            var _b;
            var innerPrefix = innerPrefixRef.value;
            var designer = designerRef.value;
            var nodeRect = nodeRectRef.value;
            var createSelectionStyle = function () {
                var baseStyle = {
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    boxSizing: 'border-box',
                    zIndex: 4,
                };
                if (nodeRect) {
                    baseStyle.transform = "perspective(1px) translate3d(".concat(nodeRect.x, "px,").concat(nodeRect.y, "px,0)");
                    baseStyle.height = isNum(nodeRect.height)
                        ? nodeRect.height + 'px'
                        : nodeRect.height;
                    baseStyle.width = isNum(nodeRect.width)
                        ? nodeRect.width + 'px'
                        : nodeRect.width;
                }
                return baseStyle;
            };
            if (!nodeRect)
                return null;
            if (!nodeRect.width || !nodeRect.height)
                return null;
            var selectionId = (_a = {},
                _a[(_b = designer.props) === null || _b === void 0 ? void 0 : _b.nodeSelectionIdAttrName] = props.node.id,
                _a);
            return (<div {...selectionId} class={prefixRef.value} style={createSelectionStyle()}>
          <div class={innerPrefix}></div>
          <ResizeHandler node={props.node}/>
          <TranslateHandler node={props.node}/>
          {props.showHelpers && (<Helpers {...attrs} key={JSON.stringify(nodeRect.toJSON())} node={props.node} nodeRect={nodeRect}/>)}
        </div>);
        };
    },
});
var SelectionComponent = observer(defineComponent({
    name: 'Selection',
    setup: function () {
        var selectionRef = useSelection();
        var treeRef = useTree();
        var cursorRef = useCursor();
        var viewportDragonRef = useDragon();
        return function () {
            if (cursorRef.value.status !== 'NORMAL' &&
                viewportDragonRef.value.touchNode)
                return null;
            return (<>
            {selectionRef.value.selected.map(function (id) {
                    var node = treeRef.value.findById(id);
                    if (!node)
                        return;
                    if (node.hidden)
                        return;
                    return (<SelectionBox {...{
                        key: id,
                        node: node,
                        showHelpers: selectionRef.value.selected.length === 1,
                    }} key={id}/>);
                })}
          </>);
        };
    },
}));
export var Selection = composeExport(SelectionComponent, {
    displayName: 'Selection',
});
//# sourceMappingURL=Selection.jsx.map