@gravity-ui/page-constructor 8.4.1 → 8.5.0-alpha.0

package/build/esm/editor-v2/containers/Tree/Tree.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable no-negated-condition */
+import * as React from 'react';
+import { isKeyboardEvent } from '@dnd-kit/dom/utilities';
+import { move } from '@dnd-kit/helpers';
+import { DragDropProvider, DragOverlay } from '@dnd-kit/react';
+import { TrashBin } from '@gravity-ui/icons';
+import { Button, Icon } from '@gravity-ui/uikit';
+import { useMainEditorStore } from "../../hooks/index.js";
+import { generateChildrenPathFromArray, getItemTitle } from "../../utils/index.js";
+import { editorCn } from "../../utils/cn.js";
+import { TreeItem } from "./TreeItem.js";
+import { TreeItemOverlay } from "./TreeItemOverlay.js";
+import { blocksToTreeItems, getBlockTypeLabel, idToBlockPath, treeItemsToBlocks, } from "./utils/blocksBridge.js";
+import { buildTree, flattenTree, getDescendants, getDragDepth } from "./utils/common.js";
+import { sanitizeProjectionForChildrenCapability } from "./utils/treeDragGuards.js";
+import './Tree.css';
+const b = editorCn('tree');
+const INDENTATION = 24;
+const Tree = ({ className }) => {
+    const { content, setContent, selectedBlock, setSelectedBlock, resetBlocks, duplicateBlock, deleteBlock, } = useMainEditorStore();
+    const [flattenedItems, setFlattenedItems] = React.useState(() => flattenTree(blocksToTreeItems(content.blocks)));
+    const initialDepth = React.useRef(0);
+    const sourceChildren = React.useRef([]);
+    React.useEffect(() => {
+        setFlattenedItems(flattenTree(blocksToTreeItems(content.blocks)));
+    }, [content.blocks]);
+    const selectedBlockPathStr = React.useMemo(() => generateChildrenPathFromArray(selectedBlock || []), [selectedBlock]);
+    const handleDragStart = React.useCallback((event) => {
+        const { source } = event.operation;
+        if (!source) {
+            return;
+        }
+        const row = flattenedItems.find(({ id }) => id === source.id);
+        if (!row) {
+            return;
+        }
+        initialDepth.current = row.depth;
+        setFlattenedItems((flatItems) => {
+            sourceChildren.current = [];
+            const descendants = getDescendants(flatItems, source.id);
+            return flatItems.filter((item) => {
+                if (descendants.has(item.id)) {
+                    sourceChildren.current = [...sourceChildren.current, item];
+                    return false;
+                }
+                return true;
+            });
+        });
+    }, [flattenedItems]);
+    const handleDragOver = React.useCallback((event, manager) => {
+        event.preventDefault();
+        const { source, target } = event.operation;
+        if (source && target && source.id !== target.id) {
+            setFlattenedItems((flat) => {
+                const offsetLeft = manager.dragOperation.transform.x;
+                const dragDepth = getDragDepth(offsetLeft, INDENTATION);
+                const projectedDepth = initialDepth.current + dragDepth;
+                const { depth, parentId } = sanitizeProjectionForChildrenCapability(flat, target.id, projectedDepth);
+                const sortedItems = move(flat, event);
+                return sortedItems.map((item) => item.id === source.id ? { ...item, depth, parentId } : item);
+            });
+        }
+    }, []);
+    const handleDragMove = React.useCallback((event, manager) => {
+        if (event.defaultPrevented) {
+            return;
+        }
+        const { source, target } = event.operation;
+        if (source && target) {
+            const keyboard = isKeyboardEvent(event.operation.activatorEvent);
+            const currentDepth = source.data?.depth ?? 0;
+            let keyboardDepth;
+            if (keyboard) {
+                const isHorizontal = event.by?.x !== 0 && event.by?.y === 0;
+                if (isHorizontal) {
+                    event.preventDefault();
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    keyboardDepth = currentDepth + Math.sign(event.by.x);
+                }
+            }
+            const offsetLeft = manager.dragOperation.transform.x;
+            const dragDepth = getDragDepth(offsetLeft, INDENTATION);
+            const projectedDepth = keyboardDepth ?? initialDepth.current + dragDepth;
+            const { depth, parentId } = sanitizeProjectionForChildrenCapability(flattenedItems, source.id, projectedDepth);
+            if (keyboard) {
+                if (currentDepth !== depth) {
+                    const offset = INDENTATION * (depth - currentDepth);
+                    manager.actions.move({
+                        by: { x: offset, y: 0 },
+                        propagate: false,
+                    });
+                }
+            }
+            if (source.data?.depth !== depth || source.data?.parentId !== parentId) {
+                setFlattenedItems((flat) => flat.map((item) => item.id === source.id ? { ...item, depth, parentId } : item));
+            }
+        }
+    }, [flattenedItems]);
+    const handleDragEnd = React.useCallback((event) => {
+        if (event.canceled) {
+            setFlattenedItems(flattenTree(blocksToTreeItems(content.blocks)));
+            return;
+        }
+        const merged = [...flattenedItems, ...sourceChildren.current];
+        const updatedTree = buildTree(merged);
+        const nextFlat = flattenTree(updatedTree);
+        const newBlocks = treeItemsToBlocks(updatedTree);
+        setFlattenedItems(nextFlat);
+        setContent({ ...content, blocks: newBlocks });
+        const draggedId = event.operation.source?.id;
+        const pathToDragged = draggedId !== null ? idToBlockPath(nextFlat, String(draggedId)) : [];
+        setSelectedBlock(pathToDragged.length ? pathToDragged : null);
+    }, [setContent, setSelectedBlock, content, flattenedItems]);
+    return (_jsxs("div", { className: b(null, className), children: [_jsx("div", { className: b('head'), children: _jsxs(Button, { view: "outlined-danger", onClick: () => resetBlocks(), children: [_jsx(Icon, { data: TrashBin }), "Clear all"] }) }), _jsxs(DragDropProvider, { onDragStart: handleDragStart, onDragOver: handleDragOver, onDragMove: handleDragMove, onDragEnd: handleDragEnd, children: [_jsx("div", { className: b('list'), children: flattenedItems.map((row, index) => {
+                            const path = idToBlockPath(flattenedItems, row.id);
+                            const pathKey = generateChildrenPathFromArray(path);
+                            const blockType = getBlockTypeLabel(row.block);
+                            return (_jsx(TreeItem, { item: row, sortableIndex: index, indentLeft: row.depth * INDENTATION, path: path, selected: selectedBlockPathStr === pathKey, type: blockType, treeTitle: getItemTitle(row.block), onCopy: duplicateBlock, onDelete: deleteBlock, onSelect: setSelectedBlock }, row.id));
+                        }) }), _jsx(DragOverlay, { className: b('dnd-overlay'), dropAnimation: null, children: (source) => {
+                            if (!source) {
+                                return null;
+                            }
+                            const sourceId = String(source.id);
+                            const rowNow = flattenedItems.find(({ id }) => String(id) === sourceId);
+                            const overlayBlock = rowNow?.block;
+                            if (!overlayBlock) {
+                                return null;
+                            }
+                            const indentLeft = (rowNow?.depth ?? 0) * INDENTATION;
+                            return (_jsx(TreeItemOverlay, { block: overlayBlock, count: sourceChildren.current.length, indentLeft: indentLeft }));
+                        } })] })] }));
+};
+export default Tree;
+//# sourceMappingURL=Tree.js.map

package/build/esm/editor-v2/containers/Tree/Tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/Tree/Tree.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-negated-condition */\nimport * as React from 'react';\n\nimport type {DragDropEvents} from '@dnd-kit/abstract';\nimport type {DragDropManager, Draggable, Droppable} from '@dnd-kit/dom';\nimport {isKeyboardEvent} from '@dnd-kit/dom/utilities';\nimport {move} from '@dnd-kit/helpers';\nimport {DragDropProvider, DragOverlay} from '@dnd-kit/react';\nimport {TrashBin} from '@gravity-ui/icons';\nimport {Button, Icon} from '@gravity-ui/uikit';\nimport _ from 'lodash';\n\nimport type {ClassNameProps} from '../../../models';\nimport {useMainEditorStore} from '../../hooks';\nimport {generateChildrenPathFromArray, getItemTitle} from '../../utils';\nimport {editorCn} from '../../utils/cn';\n\nimport {TreeItem} from './TreeItem';\nimport {TreeItemOverlay} from './TreeItemOverlay';\nimport type {FlattenedTreeItem} from './types';\nimport {\n    blocksToTreeItems,\n    getBlockTypeLabel,\n    idToBlockPath,\n    treeItemsToBlocks,\n} from './utils/blocksBridge';\nimport {buildTree, flattenTree, getDescendants, getDragDepth} from './utils/common';\nimport {sanitizeProjectionForChildrenCapability} from './utils/treeDragGuards';\n\nimport './Tree.scss';\n\ntype TreeDnd = DragDropEvents<Draggable, Droppable, DragDropManager>;\ntype TreeDragStartEvent = Parameters<TreeDnd['dragstart']>[0];\ntype TreeDragOverEvent = Parameters<TreeDnd['dragover']>[0];\ntype TreeDragMoveEvent = Parameters<TreeDnd['dragmove']>[0];\ntype TreeDragEndEvent = Parameters<TreeDnd['dragend']>[0];\n\nconst b = editorCn('tree');\n\nconst INDENTATION = 24;\n\ninterface TreeProps extends ClassNameProps {}\n\nconst Tree = ({className}: TreeProps) => {\n    const {\n        content,\n        setContent,\n        selectedBlock,\n        setSelectedBlock,\n        resetBlocks,\n        duplicateBlock,\n        deleteBlock,\n    } = useMainEditorStore();\n\n    const [flattenedItems, setFlattenedItems] = React.useState(() =>\n        flattenTree(blocksToTreeItems(content.blocks)),\n    );\n\n    const initialDepth = React.useRef(0);\n    const sourceChildren = React.useRef<FlattenedTreeItem[]>([]);\n\n    React.useEffect(() => {\n        setFlattenedItems(flattenTree(blocksToTreeItems(content.blocks)));\n    }, [content.blocks]);\n\n    const selectedBlockPathStr = React.useMemo(\n        () => generateChildrenPathFromArray(selectedBlock || []),\n        [selectedBlock],\n    );\n\n    const handleDragStart = React.useCallback(\n        (event: TreeDragStartEvent) => {\n            const {source} = event.operation;\n            if (!source) {\n                return;\n            }\n\n            const row = flattenedItems.find(({id}) => id === source.id);\n            if (!row) {\n                return;\n            }\n\n            initialDepth.current = row.depth;\n\n            setFlattenedItems((flatItems) => {\n                sourceChildren.current = [];\n                const descendants = getDescendants(flatItems, source.id);\n                return flatItems.filter((item) => {\n                    if (descendants.has(item.id)) {\n                        sourceChildren.current = [...sourceChildren.current, item];\n                        return false;\n                    }\n                    return true;\n                });\n            });\n        },\n        [flattenedItems],\n    );\n\n    const handleDragOver = React.useCallback(\n        (event: TreeDragOverEvent, manager: DragDropManager) => {\n            event.preventDefault();\n            const {source, target} = event.operation;\n\n            if (source && target && source.id !== target.id) {\n                setFlattenedItems((flat) => {\n                    const offsetLeft = manager.dragOperation.transform.x;\n                    const dragDepth = getDragDepth(offsetLeft, INDENTATION);\n                    const projectedDepth = initialDepth.current + dragDepth;\n\n                    const {depth, parentId} = sanitizeProjectionForChildrenCapability(\n                        flat,\n                        target.id,\n                        projectedDepth,\n                    );\n\n                    const sortedItems = move(flat, event);\n                    return sortedItems.map((item) =>\n                        item.id === source.id ? {...item, depth, parentId} : item,\n                    );\n                });\n            }\n        },\n        [],\n    );\n\n    const handleDragMove = React.useCallback(\n        (event: TreeDragMoveEvent, manager: DragDropManager) => {\n            if (event.defaultPrevented) {\n                return;\n            }\n\n            const {source, target} = event.operation;\n\n            if (source && target) {\n                const keyboard = isKeyboardEvent(event.operation.activatorEvent);\n                const currentDepth = source.data?.depth ?? 0;\n                let keyboardDepth: number | undefined;\n\n                if (keyboard) {\n                    const isHorizontal = event.by?.x !== 0 && event.by?.y === 0;\n\n                    if (isHorizontal) {\n                        event.preventDefault();\n                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n                        keyboardDepth = currentDepth + Math.sign(event.by!.x);\n                    }\n                }\n\n                const offsetLeft = manager.dragOperation.transform.x;\n                const dragDepth = getDragDepth(offsetLeft, INDENTATION);\n\n                const projectedDepth = keyboardDepth ?? initialDepth.current + dragDepth;\n\n                const {depth, parentId} = sanitizeProjectionForChildrenCapability(\n                    flattenedItems,\n                    source.id,\n                    projectedDepth,\n                );\n\n                if (keyboard) {\n                    if (currentDepth !== depth) {\n                        const offset = INDENTATION * (depth - currentDepth);\n\n                        manager.actions.move({\n                            by: {x: offset, y: 0},\n                            propagate: false,\n                        });\n                    }\n                }\n\n                if (source.data?.depth !== depth || source.data?.parentId !== parentId) {\n                    setFlattenedItems((flat) =>\n                        flat.map((item) =>\n                            item.id === source.id ? {...item, depth, parentId} : item,\n                        ),\n                    );\n                }\n            }\n        },\n        [flattenedItems],\n    );\n\n    const handleDragEnd = React.useCallback(\n        (event: TreeDragEndEvent) => {\n            if (event.canceled) {\n                setFlattenedItems(flattenTree(blocksToTreeItems(content.blocks)));\n                return;\n            }\n\n            const merged = [...flattenedItems, ...sourceChildren.current];\n\n            const updatedTree = buildTree(merged);\n            const nextFlat = flattenTree(updatedTree);\n            const newBlocks = treeItemsToBlocks(updatedTree);\n\n            setFlattenedItems(nextFlat);\n            setContent({...content, blocks: newBlocks});\n\n            const draggedId = event.operation.source?.id;\n            const pathToDragged =\n                draggedId !== null ? idToBlockPath(nextFlat, String(draggedId)) : [];\n            setSelectedBlock(pathToDragged.length ? pathToDragged : null);\n        },\n        [setContent, setSelectedBlock, content, flattenedItems],\n    );\n\n    return (\n        <div className={b(null, className)}>\n            <div className={b('head')}>\n                <Button view=\"outlined-danger\" onClick={() => resetBlocks()}>\n                    <Icon data={TrashBin} />\n                    Clear all\n                </Button>\n            </div>\n            <DragDropProvider\n                onDragStart={handleDragStart}\n                onDragOver={handleDragOver}\n                onDragMove={handleDragMove}\n                onDragEnd={handleDragEnd}\n            >\n                <div className={b('list')}>\n                    {flattenedItems.map((row, index) => {\n                        const path = idToBlockPath(flattenedItems, row.id);\n                        const pathKey = generateChildrenPathFromArray(path);\n                        const blockType = getBlockTypeLabel(row.block);\n\n                        return (\n                            <TreeItem\n                                key={row.id}\n                                item={row}\n                                sortableIndex={index}\n                                indentLeft={row.depth * INDENTATION}\n                                path={path}\n                                selected={selectedBlockPathStr === pathKey}\n                                type={blockType}\n                                treeTitle={getItemTitle(row.block)}\n                                onCopy={duplicateBlock}\n                                onDelete={deleteBlock}\n                                onSelect={setSelectedBlock}\n                            />\n                        );\n                    })}\n                </div>\n                <DragOverlay className={b('dnd-overlay')} dropAnimation={null}>\n                    {(source) => {\n                        if (!source) {\n                            return null;\n                        }\n                        const sourceId = String(source.id);\n                        const rowNow = flattenedItems.find(({id}) => String(id) === sourceId);\n                        const overlayBlock = rowNow?.block;\n                        if (!overlayBlock) {\n                            return null;\n                        }\n                        const indentLeft = (rowNow?.depth ?? 0) * INDENTATION;\n                        return (\n                            <TreeItemOverlay\n                                block={overlayBlock}\n                                count={sourceChildren.current.length}\n                                indentLeft={indentLeft}\n                            />\n                        );\n                    }}\n                </DragOverlay>\n            </DragDropProvider>\n        </div>\n    );\n};\n\nexport default Tree;\n"]}

package/build/esm/editor-v2/containers/Tree/TreeItem.css

@@ -0,0 +1,80 @@
+.pceditor-tree-item {
+  padding: 8px;
+  margin-bottom: 0;
+  cursor: pointer;
+}
+.pceditor-tree-item_selected.g-card:not(.pceditor-tree-item_drag-over.g-card) {
+  border: 1.5px var(--g-color-line-brand) solid;
+}
+.pceditor-tree-item_dragging.g-card {
+  opacity: 0.85;
+}
+.pceditor-tree-item_drag-over.g-card {
+  outline: 1.5px dashed var(--g-color-line-brand);
+  outline-offset: -1px;
+}
+.pceditor-tree-item_overlay.g-card {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-width: 220px;
+  max-width: min(100vw - 32px, 420px);
+  cursor: grabbing;
+  background-color: var(--g-color-base-background);
+  opacity: 1;
+  box-shadow: 0 4px 12px var(--g-color-private-black-150);
+}
+.pceditor-tree-item__main {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  min-height: 20px;
+}
+.pceditor-tree-item__main:hover .pceditor-tree-item__buttons {
+  display: flex;
+}
+.pceditor-tree-item__text {
+  flex: 1 1 auto;
+  min-width: 1px;
+}
+.pceditor-tree-item__buttons {
+  flex: 0 0 auto;
+  flex-direction: row;
+  gap: 4px;
+  display: none;
+}
+.pceditor-tree-item__type {
+  color: var(--g-color-text-secondary);
+}
+.pceditor-tree-item__title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+  display: inherit;
+}
+.pceditor-tree-item__title * {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+  display: inherit;
+}
+.pceditor-tree-item__badge {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 22px;
+  padding: 0 6px;
+  border-radius: 50%;
+  background-color: var(--g-color-base-brand);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--g-color-text-brand-contrast);
+}

package/build/esm/editor-v2/containers/Tree/TreeItem.d.ts

@@ -0,0 +1,15 @@
+import type { FlattenedTreeItem } from "./types.js";
+import './TreeItem.css';
+export interface TreeItemProps {
+    item: FlattenedTreeItem;
+    sortableIndex: number;
+    indentLeft: number;
+    selected: boolean;
+    type: string;
+    treeTitle?: string;
+    path: number[];
+    onCopy(path: number[]): void;
+    onDelete(path: number[]): void;
+    onSelect(path: number[]): void;
+}
+export declare function TreeItem({ item, sortableIndex, indentLeft, selected, type, treeTitle, path, onCopy, onDelete, onSelect, }: TreeItemProps): import("react/jsx-runtime").JSX.Element;

package/build/esm/editor-v2/containers/Tree/TreeItem.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useSortable } from '@dnd-kit/react/sortable';
+import { Copy, TrashBin } from '@gravity-ui/icons';
+import { Button, Card, Icon } from '@gravity-ui/uikit';
+import { HTML } from "../../../components/index.js";
+import { editorCn } from "../../utils/cn.js";
+import './TreeItem.css';
+const b = editorCn('tree-item');
+const sortableConfig = {
+    alignment: {
+        x: 'start',
+        y: 'center',
+    },
+    transition: null,
+};
+export function TreeItem({ item, sortableIndex, indentLeft, selected, type, treeTitle, path, onCopy, onDelete, onSelect, }) {
+    const { depth, parentId, id } = item;
+    const { ref, isDragSource, isDropTarget } = useSortable({
+        ...sortableConfig,
+        id,
+        index: sortableIndex,
+        data: {
+            depth,
+            parentId,
+        },
+    });
+    const [mouseDownPos, setMouseDownPos] = React.useState(null);
+    const itemRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+        if (selected && itemRef.current) {
+            itemRef.current.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+            });
+        }
+    }, [selected]);
+    const setNodeRef = React.useCallback((node) => {
+        ref(node);
+        itemRef.current =
+            node;
+    }, [ref]);
+    const handleMouseDown = React.useCallback((e) => {
+        setMouseDownPos({ x: e.clientX, y: e.clientY });
+    }, []);
+    const handleMouseUp = React.useCallback((e) => {
+        if (mouseDownPos) {
+            const dx = Math.abs(e.clientX - mouseDownPos.x);
+            const dy = Math.abs(e.clientY - mouseDownPos.y);
+            if (dx < 5 && dy < 5) {
+                e.stopPropagation();
+                onSelect(path);
+            }
+        }
+        setMouseDownPos(null);
+    }, [mouseDownPos, onSelect, path]);
+    return (_jsx(Card, { ref: setNodeRef, className: b({
+            selected,
+            dragging: isDragSource,
+            'drag-over': isDropTarget,
+        }), style: { marginLeft: indentLeft }, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, children: _jsxs("div", { className: b('main'), children: [_jsxs("div", { className: b('text'), children: [_jsx("div", { className: b('type'), children: type }), _jsx(HTML, { className: b('title'), children: treeTitle })] }), _jsxs("div", { className: b('buttons'), children: [_jsx(Button, { view: "flat", size: "xs", onClick: () => onCopy(path), children: _jsx(Icon, { size: 12, data: Copy }) }), _jsx(Button, { view: "flat", size: "xs", onClick: () => onDelete(path), children: _jsx(Icon, { size: 12, data: TrashBin }) })] })] }) }));
+}
+//# sourceMappingURL=TreeItem.js.map

package/build/esm/editor-v2/containers/Tree/TreeItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeItem.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/Tree/TreeItem.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAErD,OAAO,EAAC,IAAI,EAAC,qCAA4B;AACzC,OAAO,EAAC,QAAQ,EAAC,0BAAuB;AAIxC,OAAO,gBAAgB,CAAC;AAExB,MAAM,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AAEhC,MAAM,cAAc,GAAG;IACnB,SAAS,EAAE;QACP,CAAC,EAAE,OAAgB;QACnB,CAAC,EAAE,QAAiB;KACvB;IACD,UAAU,EAAE,IAAI;CACV,CAAC;AAeX,MAAM,UAAU,QAAQ,CAAC,EACrB,IAAI,EACJ,aAAa,EACb,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,GACI;IACZ,MAAM,EAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAC,GAAG,IAAI,CAAC;IAEnC,MAAM,EAAC,GAAG,EAAE,YAAY,EAAE,YAAY,EAAC,GAAG,WAAW,CAAC;QAClD,GAAG,cAAc;QACjB,EAAE;QACF,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE;YACF,KAAK;YACL,QAAQ;SACX;KACJ,CAAC,CAAC;IAEH,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAgC,IAAI,CAAC,CAAC;IAC5F,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEnD,KAAK,CAAC,eAAe,CAAC,GAAG,EAAE;QACvB,IAAI,QAAQ,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;YAC9B,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC;gBAC3B,QAAQ,EAAE,QAAQ;gBAClB,KAAK,EAAE,SAAS;aACnB,CAAC,CAAC;QACP,CAAC;IACL,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAChC,CAAC,IAAoB,EAAE,EAAE;QACrB,GAAG,CAAC,IAAI,CAAC,CAAC;QACT,OAAyD,CAAC,OAAO;YAC9D,IAA6B,CAAC;IACtC,CAAC,EACD,CAAC,GAAG,CAAC,CACR,CAAC;IAEF,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAmC,EAAE,EAAE;QAC9E,eAAe,CAAC,EAAC,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAC,CAAC,CAAC;IAClD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CACnC,CAAC,CAAmC,EAAE,EAAE;QACpC,IAAI,YAAY,EAAE,CAAC;YACf,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC;YAChD,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC;YAEhD,IAAI,EAAE,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,QAAQ,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC;QACL,CAAC;QACD,eAAe,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC,EACD,CAAC,YAAY,EAAE,QAAQ,EAAE,IAAI,CAAC,CACjC,CAAC;IAEF,OAAO,CACH,KAAC,IAAI,IACD,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,CAAC,CAAC;YACT,QAAQ;YACR,QAAQ,EAAE,YAAY;YACtB,WAAW,EAAE,YAAY;SAC5B,CAAC,EACF,KAAK,EAAE,EAAC,UAAU,EAAE,UAAU,EAAC,EAC/B,WAAW,EAAE,eAA4D,EACzE,SAAS,EAAE,aAA0D,YAErE,eAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,aACrB,eAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,aACrB,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAAG,IAAI,GAAO,EACvC,KAAC,IAAI,IAAC,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YAAG,SAAS,GAAQ,IAC7C,EACN,eAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,aACxB,KAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,YACrD,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,GAAI,GACzB,EACT,KAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,YACvD,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,GAAI,GAC7B,IACP,IACJ,GACH,CACV,CAAC;AACN,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {useSortable} from '@dnd-kit/react/sortable';\nimport {Copy, TrashBin} from '@gravity-ui/icons';\nimport {Button, Card, Icon} from '@gravity-ui/uikit';\n\nimport {HTML} from '../../../components';\nimport {editorCn} from '../../utils/cn';\n\nimport type {FlattenedTreeItem} from './types';\n\nimport './TreeItem.scss';\n\nconst b = editorCn('tree-item');\n\nconst sortableConfig = {\n    alignment: {\n        x: 'start' as const,\n        y: 'center' as const,\n    },\n    transition: null,\n} as const;\n\nexport interface TreeItemProps {\n    item: FlattenedTreeItem;\n    sortableIndex: number;\n    indentLeft: number;\n    selected: boolean;\n    type: string;\n    treeTitle?: string;\n    path: number[];\n    onCopy(path: number[]): void;\n    onDelete(path: number[]): void;\n    onSelect(path: number[]): void;\n}\n\nexport function TreeItem({\n    item,\n    sortableIndex,\n    indentLeft,\n    selected,\n    type,\n    treeTitle,\n    path,\n    onCopy,\n    onDelete,\n    onSelect,\n}: TreeItemProps) {\n    const {depth, parentId, id} = item;\n\n    const {ref, isDragSource, isDropTarget} = useSortable({\n        ...sortableConfig,\n        id,\n        index: sortableIndex,\n        data: {\n            depth,\n            parentId,\n        },\n    });\n\n    const [mouseDownPos, setMouseDownPos] = React.useState<{x: number; y: number} | null>(null);\n    const itemRef = React.useRef<HTMLDivElement>(null);\n\n    React.useLayoutEffect(() => {\n        if (selected && itemRef.current) {\n            itemRef.current.scrollIntoView({\n                behavior: 'smooth',\n                block: 'nearest',\n            });\n        }\n    }, [selected]);\n\n    const setNodeRef = React.useCallback(\n        (node: Element | null) => {\n            ref(node);\n            (itemRef as React.MutableRefObject<HTMLDivElement | null>).current =\n                node as HTMLDivElement | null;\n        },\n        [ref],\n    );\n\n    const handleMouseDown = React.useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n        setMouseDownPos({x: e.clientX, y: e.clientY});\n    }, []);\n\n    const handleMouseUp = React.useCallback(\n        (e: React.MouseEvent<HTMLDivElement>) => {\n            if (mouseDownPos) {\n                const dx = Math.abs(e.clientX - mouseDownPos.x);\n                const dy = Math.abs(e.clientY - mouseDownPos.y);\n\n                if (dx < 5 && dy < 5) {\n                    e.stopPropagation();\n                    onSelect(path);\n                }\n            }\n            setMouseDownPos(null);\n        },\n        [mouseDownPos, onSelect, path],\n    );\n\n    return (\n        <Card\n            ref={setNodeRef}\n            className={b({\n                selected,\n                dragging: isDragSource,\n                'drag-over': isDropTarget,\n            })}\n            style={{marginLeft: indentLeft}}\n            onMouseDown={handleMouseDown as unknown as React.MouseEventHandler<'div'>}\n            onMouseUp={handleMouseUp as unknown as React.MouseEventHandler<'div'>}\n        >\n            <div className={b('main')}>\n                <div className={b('text')}>\n                    <div className={b('type')}>{type}</div>\n                    <HTML className={b('title')}>{treeTitle}</HTML>\n                </div>\n                <div className={b('buttons')}>\n                    <Button view=\"flat\" size=\"xs\" onClick={() => onCopy(path)}>\n                        <Icon size={12} data={Copy} />\n                    </Button>\n                    <Button view=\"flat\" size=\"xs\" onClick={() => onDelete(path)}>\n                        <Icon size={12} data={TrashBin} />\n                    </Button>\n                </div>\n            </div>\n        </Card>\n    );\n}\n"]}

package/build/esm/editor-v2/containers/Tree/TreeItemOverlay.d.ts

@@ -0,0 +1,8 @@
+import type { ConstructorBlock } from "../../../models/index.js";
+import './TreeItem.css';
+export interface TreeItemOverlayProps {
+    block: ConstructorBlock;
+    count: number;
+    indentLeft: number;
+}
+export declare function TreeItemOverlay({ block, count, indentLeft }: TreeItemOverlayProps): import("react/jsx-runtime").JSX.Element;

package/build/esm/editor-v2/containers/Tree/TreeItemOverlay.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from '@gravity-ui/uikit';
+import { HTML } from "../../../components/index.js";
+import { getItemTitle } from "../../utils/index.js";
+import { editorCn } from "../../utils/cn.js";
+import { getBlockTypeLabel } from "./utils/blocksBridge.js";
+import './TreeItem.css';
+const b = editorCn('tree-item');
+export function TreeItemOverlay({ block, count, indentLeft }) {
+    const typeLabel = getBlockTypeLabel(block);
+    const treeTitle = getItemTitle(block);
+    return (_jsxs(Card, { className: b({ overlay: true }), style: { marginLeft: indentLeft }, "data-overlay": true, children: [_jsx("div", { className: b('main'), children: _jsxs("div", { className: b('text'), children: [_jsx("div", { className: b('type'), children: typeLabel }), _jsx(HTML, { className: b('title'), children: treeTitle })] }) }), count > 0 ? _jsx("span", { className: b('badge'), children: count }) : null] }));
+}
+//# sourceMappingURL=TreeItemOverlay.js.map

package/build/esm/editor-v2/containers/Tree/TreeItemOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeItemOverlay.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/Tree/TreeItemOverlay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAC,IAAI,EAAC,qCAA4B;AAEzC,OAAO,EAAC,YAAY,EAAC,6BAAoB;AACzC,OAAO,EAAC,QAAQ,EAAC,0BAAuB;AAExC,OAAO,EAAC,iBAAiB,EAAC,gCAA6B;AAEvD,OAAO,gBAAgB,CAAC;AAExB,MAAM,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AAQhC,MAAM,UAAU,eAAe,CAAC,EAAC,KAAK,EAAE,KAAK,EAAE,UAAU,EAAuB;IAC5E,MAAM,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC3C,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAEtC,OAAO,CACH,MAAC,IAAI,IAAC,SAAS,EAAE,CAAC,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,EAAE,KAAK,EAAE,EAAC,UAAU,EAAE,UAAU,EAAC,mCAChE,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,eAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,aACrB,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAAG,SAAS,GAAO,EAC5C,KAAC,IAAI,IAAC,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YAAG,SAAS,GAAQ,IAC7C,GACJ,EACL,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,eAAM,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YAAG,KAAK,GAAQ,CAAC,CAAC,CAAC,IAAI,IAC5D,CACV,CAAC;AACN,CAAC","sourcesContent":["import {Card} from '@gravity-ui/uikit';\n\nimport {HTML} from '../../../components';\nimport type {ConstructorBlock} from '../../../models';\nimport {getItemTitle} from '../../utils';\nimport {editorCn} from '../../utils/cn';\n\nimport {getBlockTypeLabel} from './utils/blocksBridge';\n\nimport './TreeItem.scss';\n\nconst b = editorCn('tree-item');\n\nexport interface TreeItemOverlayProps {\n    block: ConstructorBlock;\n    count: number;\n    indentLeft: number;\n}\n\nexport function TreeItemOverlay({block, count, indentLeft}: TreeItemOverlayProps) {\n    const typeLabel = getBlockTypeLabel(block);\n    const treeTitle = getItemTitle(block);\n\n    return (\n        <Card className={b({overlay: true})} style={{marginLeft: indentLeft}} data-overlay>\n            <div className={b('main')}>\n                <div className={b('text')}>\n                    <div className={b('type')}>{typeLabel}</div>\n                    <HTML className={b('title')}>{treeTitle}</HTML>\n                </div>\n            </div>\n            {count > 0 ? <span className={b('badge')}>{count}</span> : null}\n        </Card>\n    );\n}\n"]}

package/build/esm/editor-v2/containers/Tree/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./Tree.js";

package/build/esm/editor-v2/containers/Tree/index.js

@@ -0,0 +1,2 @@
+export { default } from "./Tree.js";
+//# sourceMappingURL=index.js.map

package/build/esm/editor-v2/containers/Tree/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/Tree/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,kBAAe","sourcesContent":["export {default} from './Tree';\n"]}

package/build/esm/editor-v2/containers/Tree/types.d.ts

@@ -0,0 +1,11 @@
+import type { ConstructorBlock } from "../../../models/index.js";
+export interface TreeItemData {
+    id: string;
+    block: ConstructorBlock;
+    children: TreeItemData[];
+}
+export interface FlattenedTreeItem extends TreeItemData {
+    parentId: string | null;
+    depth: number;
+    index: number;
+}

package/build/esm/editor-v2/containers/Tree/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/Tree/types.ts"],"names":[],"mappings":"","sourcesContent":["import type {ConstructorBlock} from '../../../models';\n\nexport interface TreeItemData {\n    id: string;\n    block: ConstructorBlock;\n    children: TreeItemData[];\n}\n\nexport interface FlattenedTreeItem extends TreeItemData {\n    parentId: string | null;\n    depth: number;\n    index: number;\n}\n"]}

package/build/esm/editor-v2/containers/Tree/utils/blocksBridge.d.ts

@@ -0,0 +1,8 @@
+import type { ConstructorBlock } from "../../../../models/index.js";
+import type { FlattenedTreeItem, TreeItemData } from "../types.js";
+export declare function blockHasChildrenProp(block: ConstructorBlock): boolean;
+export declare function getBlockTypeLabel(block: ConstructorBlock): string;
+export declare function getBlockChildren(block: ConstructorBlock): ConstructorBlock[] | undefined;
+export declare function blocksToTreeItems(blocks: ConstructorBlock[], pathPrefix?: string): TreeItemData[];
+export declare function treeItemsToBlocks(items: TreeItemData[]): ConstructorBlock[];
+export declare function idToBlockPath(flat: FlattenedTreeItem[], id: string): number[];

package/build/esm/editor-v2/containers/Tree/utils/blocksBridge.js

@@ -0,0 +1,66 @@
+/* eslint-disable no-negated-condition */
+import _ from 'lodash';
+export function blockHasChildrenProp(block) {
+    return Boolean(block && typeof block === 'object' && 'children' in block);
+}
+export function getBlockTypeLabel(block) {
+    if (block && typeof block === 'object' && 'type' in block) {
+        return block.type;
+    }
+    return '';
+}
+export function getBlockChildren(block) {
+    if (block && typeof block === 'object' && 'children' in block) {
+        if (Array.isArray(block.children)) {
+            return block.children;
+        }
+    }
+    return undefined;
+}
+export function blocksToTreeItems(blocks, pathPrefix = '') {
+    return blocks.map((block, index) => {
+        const id = pathPrefix ? `${pathPrefix}/${index}` : String(index);
+        const children = getBlockChildren(block);
+        return {
+            id,
+            block,
+            children: children ? blocksToTreeItems(children, id) : [],
+        };
+    });
+}
+export function treeItemsToBlocks(items) {
+    return items.map((item) => {
+        const next = _.cloneDeep(item.block);
+        const nested = treeItemsToBlocks(item.children);
+        if (nested.length > 0) {
+            next.children = nested;
+        }
+        else if (getBlockChildren(item.block) !== undefined) {
+            next.children = [];
+        }
+        return next;
+    });
+}
+// Путь индексов от корня; при цикле или разрыве связи — пустой массив.
+export function idToBlockPath(flat, id) {
+    const byId = new Map(flat.map((x) => [String(x.id), x]));
+    const path = [];
+    const seen = new Set();
+    let currentId = String(id);
+    const maxSteps = flat.length + 1;
+    for (let step = 0; step < maxSteps && currentId !== null; step++) {
+        if (seen.has(currentId)) {
+            return [];
+        }
+        seen.add(currentId);
+        const row = byId.get(currentId);
+        if (!row) {
+            return [];
+        }
+        path.unshift(row.index);
+        const p = row.parentId;
+        currentId = p === null ? null : String(p);
+    }
+    return currentId !== null ? [] : path;
+}
+//# sourceMappingURL=blocksBridge.js.map

package/build/esm/editor-v2/containers/Tree/utils/blocksBridge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"blocksBridge.js","sourceRoot":"../../../../../../src","sources":["editor-v2/containers/Tree/utils/blocksBridge.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-negated-condition */\nimport _ from 'lodash';\n\nimport type {ConstructorBlock} from '../../../../models';\nimport type {FlattenedTreeItem, TreeItemData} from '../types';\n\nexport function blockHasChildrenProp(block: ConstructorBlock): boolean {\n    return Boolean(block && typeof block === 'object' && 'children' in block);\n}\n\nexport function getBlockTypeLabel(block: ConstructorBlock): string {\n    if (block && typeof block === 'object' && 'type' in block) {\n        return block.type;\n    }\n    return '';\n}\n\nexport function getBlockChildren(block: ConstructorBlock): ConstructorBlock[] | undefined {\n    if (block && typeof block === 'object' && 'children' in block) {\n        if (Array.isArray(block.children)) {\n            return block.children as ConstructorBlock[];\n        }\n    }\n    return undefined;\n}\n\nexport function blocksToTreeItems(blocks: ConstructorBlock[], pathPrefix = ''): TreeItemData[] {\n    return blocks.map((block, index) => {\n        const id = pathPrefix ? `${pathPrefix}/${index}` : String(index);\n        const children = getBlockChildren(block);\n        return {\n            id,\n            block,\n            children: children ? blocksToTreeItems(children, id) : [],\n        };\n    });\n}\n\nexport function treeItemsToBlocks(items: TreeItemData[]): ConstructorBlock[] {\n    return items.map((item) => {\n        const next = _.cloneDeep(item.block);\n        const nested = treeItemsToBlocks(item.children);\n        if (nested.length > 0) {\n            (next as {children?: ConstructorBlock[]}).children = nested as never;\n        } else if (getBlockChildren(item.block) !== undefined) {\n            (next as {children?: ConstructorBlock[]}).children = [] as never;\n        }\n        return next;\n    });\n}\n\n// Путь индексов от корня; при цикле или разрыве связи — пустой массив.\nexport function idToBlockPath(flat: FlattenedTreeItem[], id: string): number[] {\n    const byId = new Map(flat.map((x) => [String(x.id), x]));\n    const path: number[] = [];\n    const seen = new Set<string>();\n    let currentId: string | null = String(id);\n    const maxSteps = flat.length + 1;\n\n    for (let step = 0; step < maxSteps && currentId !== null; step++) {\n        if (seen.has(currentId)) {\n            return [];\n        }\n        seen.add(currentId);\n\n        const row = byId.get(currentId);\n        if (!row) {\n            return [];\n        }\n        path.unshift(row.index);\n\n        const p = row.parentId;\n        currentId = p === null ? null : String(p);\n    }\n\n    return currentId !== null ? [] : path;\n}\n"]}

package/build/esm/editor-v2/containers/Tree/utils/common.d.ts

@@ -0,0 +1,12 @@
+import type { UniqueIdentifier } from '@dnd-kit/abstract';
+import type { FlattenedTreeItem, TreeItemData } from "../types.js";
+export declare function flattenTree(items: TreeItemData[], parentId?: string | null, depth?: number): FlattenedTreeItem[];
+export declare function buildTree(flattenedItems: FlattenedTreeItem[]): TreeItemData[];
+export declare function getDragDepth(offset: number, indentationWidth: number): number;
+export declare function getProjection(items: FlattenedTreeItem[], targetId: UniqueIdentifier, projectedDepth: number): {
+    depth: number;
+    maxDepth: number;
+    minDepth: number;
+    parentId: string | null;
+};
+export declare function getDescendants(items: FlattenedTreeItem[], parentId: UniqueIdentifier): Set<string>;

package/build/esm/editor-v2/containers/Tree/utils/common.js

@@ -0,0 +1,79 @@
+export function flattenTree(items, parentId = null, depth = 0) {
+    return items.reduce((acc, item, index) => {
+        return [
+            ...acc,
+            { ...item, parentId, depth, index },
+            ...flattenTree(item.children, item.id, depth + 1),
+        ];
+    }, []);
+}
+export function buildTree(flattenedItems) {
+    const root = { id: 'root', block: {}, children: [] };
+    const nodes = { [root.id]: root };
+    const items = flattenedItems.map((item) => {
+        return { ...item, children: [] };
+    });
+    for (const item of items) {
+        const { id } = item;
+        const parentId = item.parentId ?? root.id;
+        const parent = nodes[parentId] ?? items.find((x) => x.id === parentId);
+        if (!parent) {
+            continue;
+        }
+        const node = { ...item, children: [] };
+        nodes[id] = node;
+        parent.children.push(node);
+    }
+    return root.children;
+}
+export function getDragDepth(offset, indentationWidth) {
+    return Math.round(offset / indentationWidth);
+}
+export function getProjection(items, targetId, projectedDepth) {
+    const targetItemIndex = items.findIndex(({ id }) => id === targetId);
+    const previousItem = items[targetItemIndex - 1];
+    const targetItem = items[targetItemIndex];
+    const nextItem = items[targetItemIndex + 1];
+    const maxDepth = getMaxDepth(targetItem, previousItem);
+    const minDepth = getMinDepth(nextItem);
+    let depth = projectedDepth;
+    if (projectedDepth >= maxDepth) {
+        depth = maxDepth;
+    }
+    else if (projectedDepth < minDepth) {
+        depth = minDepth;
+    }
+    return { depth, maxDepth, minDepth, parentId: getParentId() };
+    function getParentId() {
+        if (depth === 0 || !previousItem) {
+            return null;
+        }
+        if (depth === previousItem.depth) {
+            return previousItem.parentId;
+        }
+        if (depth > previousItem.depth) {
+            return previousItem.id;
+        }
+        const newParent = items
+            .slice(0, targetItemIndex)
+            .reverse()
+            .find((item) => item.depth === depth)?.parentId;
+        return newParent ?? null;
+    }
+}
+function getMaxDepth(targetItem, previousItem) {
+    if (!previousItem) {
+        return 0;
+    }
+    return Math.min(targetItem.depth + 1, previousItem.depth + 1);
+}
+function getMinDepth(nextItem) {
+    return nextItem ? nextItem.depth : 0;
+}
+export function getDescendants(items, parentId) {
+    const directChildren = items.filter((item) => item.parentId === parentId);
+    return directChildren.reduce((descendants, child) => {
+        return new Set([...descendants, child.id, ...getDescendants(items, child.id)]);
+    }, new Set());
+}
+//# sourceMappingURL=common.js.map

package/build/esm/editor-v2/containers/Tree/utils/common.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.js","sourceRoot":"../../../../../../src","sources":["editor-v2/containers/Tree/utils/common.ts"],"names":[],"mappings":"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","sourcesContent":["import type {UniqueIdentifier} from '@dnd-kit/abstract';\n\nimport type {ConstructorBlock} from '../../../../models';\nimport type {FlattenedTreeItem, TreeItemData} from '../types';\n\nexport function flattenTree(\n    items: TreeItemData[],\n    parentId: string | null = null,\n    depth = 0,\n): FlattenedTreeItem[] {\n    return items.reduce<FlattenedTreeItem[]>((acc, item, index) => {\n        return [\n            ...acc,\n            {...item, parentId, depth, index},\n            ...flattenTree(item.children, item.id, depth + 1),\n        ];\n    }, []);\n}\n\nexport function buildTree(flattenedItems: FlattenedTreeItem[]): TreeItemData[] {\n    const root: TreeItemData = {id: 'root', block: {} as ConstructorBlock, children: []};\n    const nodes: Record<string, TreeItemData> = {[root.id]: root};\n\n    const items = flattenedItems.map((item) => {\n        return {...item, children: [] as TreeItemData[]};\n    });\n\n    for (const item of items) {\n        const {id} = item;\n        const parentId = item.parentId ?? root.id;\n        const parent = nodes[parentId] ?? items.find((x) => x.id === parentId);\n\n        if (!parent) {\n            continue;\n        }\n\n        const node: TreeItemData = {...item, children: []};\n        nodes[id] = node;\n        parent.children.push(node);\n    }\n\n    return root.children;\n}\n\nexport function getDragDepth(offset: number, indentationWidth: number) {\n    return Math.round(offset / indentationWidth);\n}\n\nexport function getProjection(\n    items: FlattenedTreeItem[],\n    targetId: UniqueIdentifier,\n    projectedDepth: number,\n) {\n    const targetItemIndex = items.findIndex(({id}) => id === targetId);\n    const previousItem = items[targetItemIndex - 1];\n    const targetItem = items[targetItemIndex];\n    const nextItem = items[targetItemIndex + 1];\n    const maxDepth = getMaxDepth(targetItem, previousItem);\n    const minDepth = getMinDepth(nextItem);\n    let depth = projectedDepth;\n\n    if (projectedDepth >= maxDepth) {\n        depth = maxDepth;\n    } else if (projectedDepth < minDepth) {\n        depth = minDepth;\n    }\n\n    return {depth, maxDepth, minDepth, parentId: getParentId()};\n\n    function getParentId(): string | null {\n        if (depth === 0 || !previousItem) {\n            return null;\n        }\n\n        if (depth === previousItem.depth) {\n            return previousItem.parentId;\n        }\n\n        if (depth > previousItem.depth) {\n            return previousItem.id;\n        }\n\n        const newParent = items\n            .slice(0, targetItemIndex)\n            .reverse()\n            .find((item) => item.depth === depth)?.parentId;\n\n        return newParent ?? null;\n    }\n}\n\nfunction getMaxDepth(targetItem: FlattenedTreeItem, previousItem: FlattenedTreeItem | undefined) {\n    if (!previousItem) {\n        return 0;\n    }\n\n    return Math.min(targetItem.depth + 1, previousItem.depth + 1);\n}\n\nfunction getMinDepth(nextItem: FlattenedTreeItem | undefined) {\n    return nextItem ? nextItem.depth : 0;\n}\n\nexport function getDescendants(\n    items: FlattenedTreeItem[],\n    parentId: UniqueIdentifier,\n): Set<string> {\n    const directChildren = items.filter((item) => item.parentId === parentId);\n\n    return directChildren.reduce((descendants, child) => {\n        return new Set([...descendants, child.id, ...getDescendants(items, child.id)]);\n    }, new Set<string>());\n}\n"]}

package/build/esm/editor-v2/containers/Tree/utils/treeDragGuards.d.ts

@@ -0,0 +1,6 @@
+import type { UniqueIdentifier } from '@dnd-kit/abstract';
+import type { FlattenedTreeItem } from "../types.js";
+export declare function sanitizeProjectionForChildrenCapability(flat: FlattenedTreeItem[], targetId: UniqueIdentifier, projectedDepth: number): {
+    depth: number;
+    parentId: string | null;
+};