"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AuxToolWidget = void 0;
var hooks_1 = require("../../hooks");
var Insertion_1 = require("./Insertion");
var Selection_1 = require("./Selection");
var FreeSelection_1 = require("./FreeSelection");
var Cover_1 = require("./Cover");
var DashedBox_1 = require("./DashedBox");
require("./styles.less");
var __builtins__1 = require("@jeamn/formily-components/src/__builtins__");
var vue_demi_1 = require("vue-demi");
var AuxToolWidgetComponent = (0, vue_demi_1.defineComponent)({
    name: 'DnAuxToolWidget',
    props: [],
    setup: function (props, _a) {
        var engineRef = (0, hooks_1.useDesigner)();
        var viewportRef = (0, hooks_1.useViewport)();
        var prefixRef = (0, hooks_1.usePrefix)('auxtool');
        var _ref = (0, vue_demi_1.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);
        (0, vue_demi_1.onBeforeUnmount)(function () {
            engineSubs.map(function (enginecb) { return enginecb(); });
        });
        return function () {
            if (!viewportRef.value)
                return null;
            return (<div ref={_ref} class={prefixRef.value}>
          <Insertion_1.Insertion />
          <DashedBox_1.DashedBox />
          <Selection_1.Selection />
          <Cover_1.Cover />
          <FreeSelection_1.FreeSelection />
        </div>);
        };
    },
});
exports.AuxToolWidget = (0, __builtins__1.composeExport)(AuxToolWidgetComponent, {
    displayName: 'AuxToolWidget',
});
//# sourceMappingURL=index.jsx.map