{"version":3,"file":"OutlineNode.jsx","sourceRoot":"lib/","sources":["widgets/OutlineWidget/OutlineNode.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    TreeNode,\n    ClosestPosition,\n    CursorStatus,\n    DragMoveEvent,\n} from '@designable/core'\nimport { isFn } from '@designable/shared'\nimport { autorun } from '@formily/reactive'\nimport { observer } from '@formily/reactive-vue'\nimport {\n    usePrefix,\n    useCursor,\n    useSelection,\n    useOutlineDragon,\n    useDesigner,\n} from '../../hooks'\nimport { IconWidget } from '../IconWidget'\nimport { NodeTitleWidget } from '../NodeTitleWidget'\nimport { NodeSymbol } from './context'\nimport cls from 'classnames'\nimport './styles.less'\nimport { useContext, useStyle } from '@jeamn/formily-prototypes'\nimport { CSSProperties } from '@vue/runtime-dom'\nimport { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue-demi'\n\nexport interface IOutlineTreeNodeProps {\n    node: TreeNode\n    style?: CSSProperties\n    className?: string\n    workspaceId?: string\n}\n\nexport const OutlineTreeNode = observer(\n    defineComponent({\n        name: 'OutlineTreeNode',\n        props: ['workspaceId', 'node', 'className'],\n        inheritAttrs: false,\n        setup(props, { }) {\n            const style = useStyle()\n            const prefix = usePrefix('outline-tree-node')\n            const engine = useDesigner()\n            const refInstance = ref<HTMLDivElement>()\n            const ctx = useContext(NodeSymbol)\n            const cursor = useCursor()\n            const selection = useSelection(props.workspaceId)\n            const outlineDragon = useOutlineDragon(props.workspaceId)\n            const request = ref<NodeJS.Timeout>()\n\n            // [node, outlineDragon, cursor]\n            let unSub: Array<() => void> = []\n\n            onMounted(() => {\n                const ref = refInstance\n                const subcb = engine.value.subscribeTo(DragMoveEvent, () => {\n                    const closestNodeId = outlineDragon.value?.closestNode?.id\n                    const closestDirection = outlineDragon.value?.closestDirection\n                    const id = props.node.id\n                    if (!ref.value) return\n                    if (\n                        closestNodeId === id &&\n                        closestDirection === ClosestPosition.Inner\n                    ) {\n                        if (!ref.value.classList.contains('droppable')) {\n                            ref.value.classList.add('droppable')\n                        }\n                        if (!ref.value.classList.contains('expanded')) {\n                            if (request.value) {\n                                clearTimeout(request.value)\n                                request.value = undefined\n                            }\n                            request.value = setTimeout(() => {\n                                ref.value?.classList.add('expanded')\n                            }, 600)\n                        }\n                    } else {\n                        if (request.value) {\n                            clearTimeout(request.value)\n                            request.value = undefined\n                        }\n                        if (ref.value.classList.contains('droppable')) {\n                            ref.value.classList.remove('droppable')\n                        }\n                    }\n                })\n                unSub.push(subcb)\n                //[node, selection]\n                const subcb2 = autorun(() => {\n                    const selectedIds = selection.value?.selected || []\n                    const id = props.node.id\n                    if (!ref.value) return\n                    if (selectedIds.includes(id)) {\n                        if (!ref.value.classList.contains('selected')) {\n                            ref.value.classList.add('selected')\n                        }\n                    } else {\n                        if (ref.value.classList.contains('selected')) {\n                            ref.value.classList.remove('selected')\n                        }\n                    }\n                    if (cursor.value.status === CursorStatus.Dragging &&\n                        outlineDragon.value?.dragNodes?.length) {\n                        if (ref.value.classList.contains('selected')) {\n                            ref.value.classList.remove('selected')\n                        }\n                    }\n                })\n                unSub.push(subcb2)\n            })\n\n            onBeforeUnmount(() => {\n                unSub.forEach((cb) => cb())\n            })\n\n            const renderIcon = (node: TreeNode) => {\n                const icon = node.designerProps.icon\n                if (icon) {\n                    return <IconWidget infer={icon} size={'12px'} />\n                }\n                if (node === node?.root) {\n                    return <IconWidget infer=\"Page\" size={'12px'} />\n                } else if (node.designerProps?.droppable) {\n                    return <IconWidget infer=\"Container\" size={'12px'} />\n                }\n                return <IconWidget infer=\"Component\" size={'12px'} />\n            }\n\n            const renderActions = (node: TreeNode) => {\n                if (isFn(ctx.value.renderActions))\n                    return ctx.value.renderActions(node)\n            }\n\n            const renderTitle = (node: TreeNode) => {\n                // TODO::判断renderTitle是不是VNode或者函数\n                if (isFn(ctx.value.renderTitle)) return ctx.value.renderTitle(node)\n                return (\n                    <span>\n                        <NodeTitleWidget node={node} />\n                    </span>\n                )\n            }\n\n            return () => {\n                const node = props.node as TreeNode\n                const ref = refInstance.value!\n                if (!node) return null\n\n                return (\n                    <div\n                        style={style}\n                        ref={refInstance}\n                        class={cls(prefix.value, props.className, 'expanded')}\n                        data-designer-outline-node-id={node.id}\n                    >\n                        <div class={prefix.value + '-header'}>\n                            <div\n                                class={prefix.value + '-header-head'}\n                                style={{\n                                    left: -node.depth * 16 + 'px',\n                                    width: node.depth * 16 + 'px',\n                                }}\n                            ></div>\n                            <div class={prefix.value + '-header-content'}>\n                                <div class={prefix.value + '-header-base'}>\n                                    {(node?.children?.length > 0 || node === node.root) && (\n                                        <div\n                                            class={prefix.value + '-expand'}\n                                            onClick={(e) => {\n                                                e.preventDefault()\n                                                e.stopPropagation()\n                                                if (ref?.classList?.contains('expanded')) {\n                                                    ref?.classList.remove('expanded')\n                                                } else {\n                                                    ref?.classList.add('expanded')\n                                                }\n                                            }}\n                                        >\n                                            <IconWidget infer=\"Expand\" size={10} />\n                                        </div>\n                                    )}\n                                    <div class={prefix.value + '-icon'}>{renderIcon(node)}</div>\n                                    <div class={prefix.value + '-title'}>{renderTitle(node)}</div>\n                                </div>\n                                <div\n                                    class={prefix.value + '-header-actions'}\n                                    data-click-stop-propagation\n                                >\n                                    {renderActions(node)}\n                                    {node !== node.root && (\n                                        <IconWidget\n                                            key={node.hidden ? 'EyeClose' : 'Eye'}\n                                            class={cls(prefix.value + '-hidden-icon', {\n                                                hidden: node.hidden,\n                                            })}\n                                            infer={node.hidden ? 'EyeClose' : 'Eye'}\n                                            size={14}\n                                            onClick={() => {\n                                                node.hidden = !node.hidden\n                                            }}\n                                        />\n                                    )}\n                                </div>\n                            </div>\n                        </div>\n                        <div class={prefix.value + '-children'}>\n                            {node.children?.map((child: TreeNode) => {\n                                return (\n                                    <OutlineTreeNode\n                                        node={child}\n                                        key={child.id}\n                                        workspaceId={props.workspaceId}\n                                    />\n                                )\n                            })}\n                        </div>\n                    </div>\n                )\n            }\n        },\n    })\n)\n"]}