"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.GhostWidget = void 0;
var hooks_1 = require("../../hooks");
var core_1 = require("@designable/core");
var reactive_1 = require("@formily/reactive");
var reactive_vue_1 = require("@formily/reactive-vue");
var NodeTitleWidget_1 = require("../NodeTitleWidget");
require("./styles.less");
var __builtins__1 = require("@jeamn/formily-components/src/__builtins__");
var vue_demi_1 = require("vue-demi");
var useEffect_1 = require("../../shared/useEffect");
var GhostWidgetComponent = (0, vue_demi_1.defineComponent)({
    setup: function () {
        var designerRef = (0, hooks_1.useDesigner)();
        var cursorRef = (0, hooks_1.useCursor)();
        var refInstance = (0, vue_demi_1.ref)();
        var prefixRef = (0, hooks_1.usePrefix)('ghost');
        (0, useEffect_1.useEffect)(function () {
            return (0, reactive_1.autorun)(function () {
                var cursor = (0, vue_demi_1.unref)(cursorRef);
                var ref = refInstance.value;
                var transform = "perspective(1px) translate3d(".concat(cursor.position.topClientX - 18, "px,").concat(cursor.position.topClientY - 12, "px,0) scale(0.8)");
                if (!ref)
                    return;
                ref.style.transform = transform;
            });
        }, [designerRef, cursorRef]);
        return function () {
            var designer = (0, vue_demi_1.unref)(designerRef);
            var cursor = (0, vue_demi_1.unref)(cursorRef);
            var draggingNodes = designer.findDraggingNodes();
            var firstNode = draggingNodes[0];
            var renderNodes = function () {
                return (<span style={{
                        whiteSpace: 'nowrap',
                    }}>
            <NodeTitleWidget_1.NodeTitleWidget node={firstNode}/>
            {draggingNodes.length > 1 ? '...' : ''}
          </span>);
            };
            if (!firstNode)
                return null;
            return cursor.status === core_1.CursorStatus.Dragging ? (<div class={prefixRef.value} ref={refInstance}>
          {renderNodes()}
        </div>) : null;
        };
    },
});
exports.GhostWidget = (0, __builtins__1.composeExport)((0, reactive_vue_1.observer)(GhostWidgetComponent), {
    displayName: 'GhostWidget',
});
//# sourceMappingURL=index.jsx.map