import { useCursor, usePrefix, useDesigner } from '../../hooks';
import { CursorStatus } from '@designable/core';
import { autorun } from '@formily/reactive';
import { observer } from '@formily/reactive-vue';
import { NodeTitleWidget } from '../NodeTitleWidget';
import './styles.less';
import { composeExport } from '@jeamn/formily-components/src/__builtins__';
import { defineComponent, ref, unref } from 'vue-demi';
import { useEffect } from '../../shared/useEffect';
var GhostWidgetComponent = defineComponent({
    setup: function () {
        var designerRef = useDesigner();
        var cursorRef = useCursor();
        var refInstance = ref();
        var prefixRef = usePrefix('ghost');
        useEffect(function () {
            return autorun(function () {
                var cursor = 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 = unref(designerRef);
            var cursor = unref(cursorRef);
            var draggingNodes = designer.findDraggingNodes();
            var firstNode = draggingNodes[0];
            var renderNodes = function () {
                return (<span style={{
                        whiteSpace: 'nowrap',
                    }}>
            <NodeTitleWidget node={firstNode}/>
            {draggingNodes.length > 1 ? '...' : ''}
          </span>);
            };
            if (!firstNode)
                return null;
            return cursor.status === CursorStatus.Dragging ? (<div class={prefixRef.value} ref={refInstance}>
          {renderNodes()}
        </div>) : null;
        };
    },
});
export var GhostWidget = composeExport(observer(GhostWidgetComponent), {
    displayName: 'GhostWidget',
});
//# sourceMappingURL=index.jsx.map