import { useViewport, useDesigner, usePrefix, } from '../../hooks';
import { Insertion } from './Insertion';
import { Selection } from './Selection';
import { FreeSelection } from './FreeSelection';
import { Cover } from './Cover';
import { DashedBox } from './DashedBox';
import './styles.less';
import { composeExport } from '@jeamn/formily-components/src/__builtins__';
import { defineComponent, onBeforeUnmount, ref } from 'vue-demi';
var AuxToolWidgetComponent = defineComponent({
    name: 'DnAuxToolWidget',
    props: [],
    setup: function (props, _a) {
        var engineRef = useDesigner();
        var viewportRef = useViewport();
        var prefixRef = usePrefix('auxtool');
        var _ref = ref();
        var engineSubs = [];
        // [engine, viewport]
        var cb1 = engineRef.value.subscribeWith('viewport:scroll', function () {
            if (viewportRef.value.isIframe && _ref.value) {
                _ref.value.style.transform = "perspective(1px) translate3d(".concat(-viewportRef
                    .value.scrollX, "px,").concat(-viewportRef.value.scrollY, "px,0)");
            }
        });
        engineSubs.push(cb1);
        onBeforeUnmount(function () {
            engineSubs.map(function (enginecb) { return enginecb(); });
        });
        return function () {
            if (!viewportRef.value)
                return null;
            return (<div ref={_ref} class={prefixRef.value}>
          <Insertion />
          <DashedBox />
          <Selection />
          <Cover />
          <FreeSelection />
        </div>);
        };
    },
});
export var AuxToolWidget = composeExport(AuxToolWidgetComponent, {
    displayName: 'AuxToolWidget',
});
//# sourceMappingURL=index.jsx.map