低代碼前端【免費下載鏈接】brick-design低代碼框架支持流式布局與自由布局拖拽編排可視化拖拽、隨意嵌套組合、實時渲染、實時輔助線展示、自由布局支持輔助對齊、支持自動吸附、實時組件間距展示、實時拖拽排序、狀態(tài)域管理可視化屬性配置、可視化樣式配置、多設備適配展示支持邏輯渲染、模板字符變量、表達式、自定義方法、自定義狀態(tài)項目地址https://gitcode.com/gh_mirrors/br/brick-design點擊查看免費下載BrickTree 是 brick-design 低代碼編輯器中的組件樹面板它以樹形結構實時呈現(xiàn)當前頁面的pageConfig層級并支持選中聯(lián)動、復制、刪除以及跨組件拖拽改序等操作。本文以官方文檔 BrickTree.md 的 API 說明為主體結合packages/components與packages/core中的真實源碼完整拆解它的渲染結構、與 BrickDesign 畫布的同步機制以及“增、刪、改 拖拽排序”背后的 Action/Reducer 調用鏈。讀完本文你將掌握如何在BrickProvider體系內正確接入 BrickTree并理解每一個樹上操作如何最終改寫pageConfig狀態(tài)。一、BrickTree 的定位畫布的“結構鏡像”官方文檔對 BrickTree 的介紹可以概括為三點它是 brick design 編輯器的組件樹同時也是頁面結構的可視化展示當直接編輯畫布不方便時可以通過修改組件樹結構來實現(xiàn)想要的效果——即樹面板是畫布編輯之外的另一條操控入口BrickTree 與 BrickDesign 實時同步并且同樣支持增、刪、改支持跨組件拖拽更改順序。在完整的編輯器外殼中BrickTree 并不單獨出現(xiàn)。從源碼 Layers 面板 可以看到它被放置在名為 Layers 的可拖拽調整寬度的側欄DragResizeBar中與頁面列表Pages上下組合DragResizeBar title{Layers} minWidth{212} icon{layersIcon} key{Layers} Pages onDelete{onDelete} / BrickTree / Tips icon{warnIcon} tip{刪除不可逆} tipTitle{注意} ... / /DragResizeBar其中Pages負責頁面Layer的增刪改名BrickTree負責當前頁面內組件樹的展示與編輯Tips組件則承載“刪除不可逆”的確認彈窗。也就是說BrickTree 的編輯對象是當前頁面的組件結構而頁面級的切換由同級的Pages完成。二、安裝與使用方式按 docs/react/getting-started.md 的說明首先安裝 React 集成包yarn add brickd/react或者npm install brickd/react然后在BrickProvider內部與BrickDesign并列掛載BrickTreeimport { createElement } from react; import { BrickDesign, BrickTree, BrickProvider, useSelector, createActions, } from brickd/react; const plugins [(vDom, componentConfig) vDom]; const customReducer (state, action) { const { type, payload } action; switch (type) { case customReducer: return { ...state }; default: return state; } }; const App () { const { componentConfigs } useSelector([componentConfigs]); return ( BrickProvider initState{{}} customReducer{customReducer} config{{ /* 你的配置 */ }} div onClick{() createActions({ type: customReducer, payload: { /* ... */ } })} 觸發(fā) action /div BrickDesign / BrickTree / /BrickProvider ); };這與 packages/components/README.md 中的用法示例一致BrickTree必須處于BrickProvider的上下文中與BrickDesign畫板/頁面編輯組件共享同一份狀態(tài)。如果你使用完整編輯器外殼示例工程 examples/react-example/src/App.tsx 直接使用了封裝好的BrickEdifice其內部BrickEdifice/index.tsx同樣以BrickProviderBrickDesignCanvas組合呈現(xiàn)各面板Layers 面板含 BrickTree由Menus按需激活。屬性說明className文檔明確 BrickTree 目前只有一個屬性className它作用在組件樹的最外層 div 上。從當前源碼結構看BrickTree/index.tsx組件樹的根容器渲染為div onMouseLeave{onMouseLeave} onWheel{(event) event.stopPropagation()} className{styles[sort-container]} SortTree disabled childNodes{[ROOT]} specialProps{{ key: ROOT, domTreeKeys: [], parentKey: }} componentName{} / /div這里有兩個實現(xiàn)細節(jié)值得注意onWheel中調用event.stopPropagation()阻止頁面滾動事件冒泡避免樹面板內部滾動時干擾外層畫布交互onMouseLeave中調用setOperateState({ operateHoverKey: null, hoverNode: null })當鼠標離開整個樹面板時清除畫布上殘留的 hover 高亮。樣式層面.sort-container使用 flex 布局并允許自身滾動index.less。如果需要對樹面板做布局調整例如固定高度、寬度按文檔說明將className作用在最外層 div 上即可。三、樹的數(shù)據來源與遞歸渲染結構3.1 數(shù)據源pageConfig[ROOT]BrickTree 入口 通過useSelector訂閱STATE_PROPS域中的pageConfig其比較函數(shù)只在根節(jié)點從無到有或從有到無時才觸發(fā)刷新const { pageConfig } useSelector( [pageConfig], (prevState, nextState) { const { pageConfig } nextState; return !!(!prevState.pageConfig[ROOT] pageConfig[ROOT]); } ); if (!pageConfig[ROOT]) return null;這解釋了 BrickTree 的渲染前提頁面必須存在根節(jié)點ROOT樹面板才會渲染一旦整頁被清空見后文deleteComponent對 ROOT 的處理樹面板即返回null。樹從childNodes{[ROOT]}開始遞歸展開specialProps攜帶key、domTreeKeys、parentKey等定位信息供深層節(jié)點識別自己的位置。3.2 遞歸渲染SortTree → SortItem樹的主體由 SortTree.tsx 與 SortItem.tsx 兩個組件遞歸構成SortTree把一組childNodes渲染為可排序容器ReactSortableSortItem列表SortItem表示一個節(jié)點其內部通過renderSortTree決定如何展開子級SortItem.tsx L33-L70若childNodes是數(shù)組普通容器繼續(xù)渲染一個SortTree若childNodes不是數(shù)組且存在nodePropsConfig則按nodePropsConfig的每個屬性名渲染“屬性子樹”——也就是說組件上配置了nodeProps的字段如 Form 的 items、List 的數(shù)據源等也會作為可嵌套子樹展示propChildNodes取get(childNodes, propName, [])。每個SortItem通過useSelector訂閱selectedInfo與pageConfigSortItem.tsx L103-L112從pageConfig[key]讀出節(jié)點的componentName與childNodes。此外每個節(jié)點 DOM 上寫入了三類數(shù)據屬性SortItem.tsx L159-L165div className{styles[sort-item]} id{key} >onMouseOver{() { !isSelected setOperateState({ hoverNode: getSelectedNode(key), operateHoverKey: key, }); }}鼠標懸停樹上節(jié)點時通過getSelectedNode(key)拿到畫布中對應的真實 DOM 節(jié)點寫入operateHoverKey與hoverNode畫布側組件據此顯示 hover 輪廓onMouseLeave時再清空。Header還通過useOperate()的setSubscribe(changeStatus)訂閱操作狀態(tài)變化從而響應畫布側發(fā)起的 hover即畫布 → 樹方向的反向高亮。2樹 → 畫布點擊選中 滾動定位onClick{(event) { event.stopPropagation(); if (isSelected) { clearSelectedStatus(); setOperateState({ selectedNode: null, operateSelectedKey: null }); } else { const selectedNode getSelectedNode(key); selectComponent({ ...specialProps, propName }); nodeScrollIntoView(selectedNode); setOperateState({ selectedNode, operateSelectedKey: key }); } }}點擊節(jié)點會派發(fā)selectComponentaction定義見 produceActions/selectedComponent.ts更新全局selectedInfonodeScrollIntoView負責把畫布中對應節(jié)點滾動進可視區(qū)域再次點擊已選中節(jié)點則取消選中。由于 BrickDesign 畫布同樣訂閱selectedInfo來渲染選中邊框樹與畫布的選中態(tài)因此始終保持一致。3畫布占位預覽placeholderBridgeStore橋這是“實時同步”中最有特色的一環(huán)。當你在樹上拖拽節(jié)點時畫布側會實時渲染一個占位框GuidePlaceholder預覽組件將被放入的位置。其實現(xiàn)鏈路是dragSort.ts L14-L23 定義了全局橋對象export const placeholderBridgeStore { prevRects: null, renderPlaceholder: null, changePosition(rects: PlaceholderPositionType) { if (!isEqual(this.prevRects, rects)) { this.prevRects rects; this.renderPlaceholder this.renderPlaceholder(rects); } }, };畫布側 GuidePlaceholder 組件 把placeholderBridgeStore.renderPlaceholder注冊為占位框渲染函數(shù)樹上拖拽過程中SortTree的onChange調用 onDragBrickTree下文詳述實時計算node1/node2/node3三段占位矩形并changePosition推給畫布拖拽結束或無變化時changePosition({})清空占位框參見 Container.ts 中對placeholderBridgeStore的清空調用。因此即使落點在畫布深處你也能在拖到一半時就直觀看到“松手后會插在哪里”。五、增、刪、改樹上操作的 Action/Reducer 實現(xiàn)文檔所說的“支持增、刪、改支持跨組件拖拽更改順序”在 Header.tsx 中落為三個按鈕行為對應的 action 與 reducer 均在brickd/core包內。5.1 復制copyComponent樹節(jié)點 hover 時顯示復制圖標非屬性節(jié)點、非 ROOT 節(jié)點才顯示點擊后執(zhí)行copyComponent({ key, parentKey, parentPropName })。其 reducer 實現(xiàn)于 handleComponentSchema.ts L104-L136未選中節(jié)點且未傳key時warn(Please select the node you want to copy)并返回原 state禁止復制根節(jié)點selectedKey或key為ROOT時給出Prohibit copying root node警告合法復制時先undo.push({ pageConfig })、清空redo再通過getNewKey(pageConfig)生成新鍵用 immer 的produce update把newKey追加到父節(jié)點childNodes并用copyConfig深拷貝原節(jié)點配置——這就是文檔所述“增”的來源復制出的節(jié)點會即時出現(xiàn)在樹與畫布中配合 3.3 節(jié)的自動展開。5.2 刪除deleteComponent同樣在 handleComponentSchema.ts L184-L224未選中且無key時警告Please select the components you want to delete若刪除的是ROOT直接返回空pageConfig即刪除整個頁面樹面板隨之整體不渲染否則從父節(jié)點childNodes中移除引用deleteChildNodesKey若該節(jié)點自身還有childNodes則遞歸deleteChildNodes清掉所有子節(jié)點最后delete oldState[key]并重置selectedInfo: null。刪除會先壓入undo支持撤銷而頁面級的刪除Layers 面板的deleteLayers則在 Layers/index.tsx 中通過Tips彈窗做“刪除不可逆”的二次確認。5.3 排序與跨組件移動onLayoutSortChange這是 BrickTree 的核心能力。SortTree的onSortEnd回調SortTree.tsx L81-L99拿到排序后的sortKeys與拖拽事件后const layoutSortChange useCallback(function (sortKeys: string[], evt) { const dragInfo JSON.parse(evt.clone.dataset.special); // {key, parentPropName, parentKey} onLayoutSortChange({ sortKeys, parentKey: key, parentPropName: propName!, dragInfo }); setOperateState({ dropNode: null, isDropAble: false }); setNewDragKey(null); }, []);對應的 reducerhandleComponentSchema.ts L144-L177做了兩件事本層重排把父節(jié)點位置的childNodes直接替換為sortKeys跨組件移動清理若dragInfo存在且其parentKey/parentPropName與當前落點不同說明節(jié)點從別的父容器中被拖出于是再對原父節(jié)點執(zhí)行deleteChildNodesKey(childNodes, key, parentPropName)刪除舊引用。源碼注釋也明確寫道“dragInfo 有值說明為跨組件排序需要刪除拖拽組件原先父組件中的引用”。兩次update在同一個produce內完成保證pageConfig原子更新隨后畫布按新結構重新渲染——這就是文檔中“支持跨組件拖拽更改順序”的完整閉環(huán)。六、拖拽排序的實現(xiàn)細節(jié)ReactSortable 與落點規(guī)則6.1 拖拽引擎封裝樹的可排序容器基于 ReactSortable它是對sortablejs的forwardRef封裝useEffect中為onChoose/onAdd/onUpdate/onChange/onEnd五個事件統(tǒng)一注入包裝邏輯——onChoose記錄nextSibling與當前容器onAdd/onUpdate觸發(fā)時先把evt.item插回nextSibling之前回滾 DOM 樂觀更新再取sortable.toArray()得到完整鍵序并回調onSortEnd(items, evt)由狀態(tài)層真正改寫pageConfigonChange把實時鍵序回調給onChange(items, evt)用于拖拽過程中的畫布占位預覽。6.2 Sortable 配置與落點校驗SortTree.tsx L117-L137 給出了關鍵的optionsReactSortable className{styles[sort-able]} options{{ group: { name: nested, put: (a, b, c) putItem(c, props) }, animation: 200, disabled, dataIdAttr: id, ghostClass: styles[item-background], swapThreshold: 0.5, }} onSortEnd{layoutSortChange} onChange{onChange} onEnd{onEnd} group.name: nestedput: putItem所有層級的 SortTree 同屬nested組因此節(jié)點天然可以跨層拖動而putItemSortTree.tsx L50-L64是落點守門人const putItem (c: any, props: SortTreePropsType) { const { childNodes [], nodeProps, componentName } props; const fatherNodesRule c.dataset.farules; const dragName c.dataset.name; if (fatherNodesRule !JSON.parse(fatherNodesRule).include(componentName)) return false; if (nodeProps) { if (nodeProps.isOnlyNode childNodes.length 1) return false; if (nodeProps.childNodesRule) { return nodeProps.childNodesRule.includes(dragName); } } return true; };落點合法性由組件 Schema 決定fatherNodesRule聲明“哪些父級可以容納我”childNodesRule聲明“我可放入哪些子級”isOnlyNode約束“容器內只能有一個節(jié)點”時禁止再插入第二個。這使磚塊設計器可以把組件的嵌套約束完全配置化。dataIdAttr: id與SortItem的id{key}配合保證toArray()返回的就是pageConfig鍵序列animation: 200、ghostClass灰色幽靈占位、swapThreshold: 0.5控制拖拽手感disabled由上層傳入根層SortTree傳disabled是因為 ROOT 本身不可被拖走復制/刪除也禁止操作 ROOT見 5.1、5.2。6.3 拖拽過程畫布占位框的實時計算拖拽過程中onChange會持續(xù)觸發(fā) onDragBrickTreeexport const onDragBrickTree (dragKey, sortKeys, parentKey, setOperateState, propName) { let parentNode getSelectedNode(parentKey); let childNodes get(getVNode(parentKey), childNodes, []); if (!Array.isArray(childNodes) propName) { childNodes get(childNodes, propName, []); // 屬性子樹 } if (isEqual(childNodes, sortKeys)) return placeholderBridgeStore.changePosition(placeholderPosition); // ...計算 node1/node2/node3 三段占位矩形 placeholderBridgeStore.changePosition(placeholderPosition); };它會解析屬性子樹propName情形、把落點 DOM 寫入dropNode并置isDropAble: true供畫布側渲染投放提示、根據拖拽鍵在排序序列中的位置首/中/尾分別調用getPlaceholder1Rect/getPlaceholder3Rect計算三段式占位矩形最后推送給placeholderBridgeStore。若排序結果與原childNodes完全一致isEqual直接清空占位——這解釋了為什么“原地微動”不會在畫布上留下多余占位框。七、使用注意事項小結結合文檔與源碼使用 BrickTree 時需記住必須在BrickProvider內使用且與BrickDesign共享狀態(tài)頁面pageConfig中沒有ROOT時樹面板不渲染index.tsx L27當前對外屬性只有className作用于組件樹最外層 div用于布局與樣式覆蓋ROOT 節(jié)點是保護對象不可復制、不可拖拽刪除 ROOT 等于清空整頁會觸發(fā)undo可撤銷但頁面級deleteLayers不可逆嵌套約束由組件配置驅動fatherNodesRule、childNodesRule、isOnlyNode決定拖拽能否落點配置不當會出現(xiàn)“拖不進去”的現(xiàn)象排查時優(yōu)先檢查對應組件的NodeProps配置樹操作全部走 actioncopyComponent/deleteComponent/onLayoutSortChange/selectComponent見 actionTypes.ts 與 reducers/index.ts并自動維護undo/redo因此撤銷/重做按鈕MidBottomButtons對樹操作同樣生效性能上做了針對性收斂BrickTree、SortTree、SortItem、Header均為memo組件useSelector的自定義比較函數(shù)限制了根級重渲染滾動/懸停事件也做了stopPropagation隔離這些是樹與畫布能“實時同步”而不互相拖累的前提。至此BrickTree 從文檔描述的“組件樹 實時同步 增刪改 跨組件拖拽”到pageConfig數(shù)據流、placeholderBridgeStore占位橋、nested組拖拽規(guī)則與produce原子更新的完整實現(xiàn)路徑均已閉環(huán)。若需進一步閱讀建議依次查看 BrickTree 面板源碼、handleComponentSchema.ts 與 dragSort.ts它們分別對應樹渲染、狀態(tài)改寫與拖拽預覽三個核心環(huán)節(jié)。贊分享低代碼前端【免費下載鏈接】brick-design低代碼框架支持流式布局與自由布局拖拽編排可視化拖拽、隨意嵌套組合、實時渲染、實時輔助線展示、自由布局支持輔助對齊、支持自動吸附、實時組件間距展示、實時拖拽排序、狀態(tài)域管理可視化屬性配置、可視化樣式配置、多設備適配展示支持邏輯渲染、模板字符變量、表達式、自定義方法、自定義狀態(tài)項目地址https://gitcode.com/gh_mirrors/br/brick-design點擊查看免費下載相關推薦Brick Design拖拽編排進階跨組件嵌套與排序技巧Brick Design拖拽編排進階跨組件嵌套與排序技巧 Brick Design 是一款強大的 低代碼可視化拖拽編排框架 專為前端開發(fā)者和設計師打造。通過低代碼前端Ant Design Blazor Tree 組件拖拽排序實戰(zhàn)Draggable 節(jié)點拖放與數(shù)據同步解析Ant Design Blazor Tree 組件拖拽排序實戰(zhàn)Draggable 節(jié)點拖放與數(shù)據同步解析 Ant Design Blazor 的 Tree 組前端UI組件設計系統(tǒng)Brick Design核心組件詳解BrickProvider、BrickDesign、BrickTreeBrick Design核心組件詳解BrickProvider、BrickDesign、BrickTree Brick Design是一款強大的低代碼可視化拖低代碼前端上一篇貓抓cat-catch5分鐘快速上手的瀏覽器視頻下載終極指南下一篇Quartz.NET 裁剪發(fā)布與 Native AOT 實戰(zhàn)指南從 IsAotCompatible 聲明到可運行的持久化 JobStore創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考 brick-design 的 BrickTree 組件深度解析：與畫布實時同步的組件樹、拖拽排序與頁面結構編輯
低代碼前端【免費下載鏈接】brick-design低代碼框架支持流式布局與自由布局拖拽編排可視化拖拽、隨意嵌套組合、實時渲染、實時輔助線展示、自由布局支持輔助對齊、支持自動吸附、實時組件間距展示、實時拖拽排序、狀態(tài)域管理可視化屬性配置、可視化樣式配置、多設備適配展示支持邏輯渲染、模板字符變量、表達式、自定義方法、自定義狀態(tài)項目地址https://gitcode.com/gh_mirrors/br/brick-design點擊查看免費下載BrickTree 是 brick-design 低代碼編輯器中的組件樹面板它以樹形結構實時呈現(xiàn)當前頁面的pageConfig層級并支持選中聯(lián)動、復制、刪除以及跨組件拖拽改序等操作。本文以官方文檔 BrickTree.md 的 API 說明為主體結合packages/components與packages/core中的真實源碼完整拆解它的渲染結構、與 BrickDesign 畫布的同步機制以及“增、刪、改 拖拽排序”背后的 Action/Reducer 調用鏈。讀完本文你將掌握如何在BrickProvider體系內正確接入 BrickTree并理解每一個樹上操作如何最終改寫pageConfig狀態(tài)。一、BrickTree 的定位畫布的“結構鏡像”官方文檔對 BrickTree 的介紹可以概括為三點它是 brick design 編輯器的組件樹同時也是頁面結構的可視化展示當直接編輯畫布不方便時可以通過修改組件樹結構來實現(xiàn)想要的效果——即樹面板是畫布編輯之外的另一條操控入口BrickTree 與 BrickDesign 實時同步并且同樣支持增、刪、改支持跨組件拖拽更改順序。在完整的編輯器外殼中BrickTree 并不單獨出現(xiàn)。從源碼 Layers 面板 可以看到它被放置在名為 Layers 的可拖拽調整寬度的側欄DragResizeBar中與頁面列表Pages上下組合DragResizeBar title{Layers} minWidth{212} icon{layersIcon} key{Layers} Pages onDelete{onDelete} / BrickTree / Tips icon{warnIcon} tip{刪除不可逆} tipTitle{注意} ... / /DragResizeBar其中Pages負責頁面Layer的增刪改名BrickTree負責當前頁面內組件樹的展示與編輯Tips組件則承載“刪除不可逆”的確認彈窗。也就是說BrickTree 的編輯對象是當前頁面的組件結構而頁面級的切換由同級的Pages完成。二、安裝與使用方式按 docs/react/getting-started.md 的說明首先安裝 React 集成包yarn add brickd/react或者npm install brickd/react然后在BrickProvider內部與BrickDesign并列掛載BrickTreeimport { createElement } from react; import { BrickDesign, BrickTree, BrickProvider, useSelector, createActions, } from brickd/react; const plugins [(vDom, componentConfig) vDom]; const customReducer (state, action) { const { type, payload } action; switch (type) { case customReducer: return { ...state }; default: return state; } }; const App () { const { componentConfigs } useSelector([componentConfigs]); return ( BrickProvider initState{{}} customReducer{customReducer} config{{ /* 你的配置 */ }} div onClick{() createActions({ type: customReducer, payload: { /* ... */ } })} 觸發(fā) action /div BrickDesign / BrickTree / /BrickProvider ); };這與 packages/components/README.md 中的用法示例一致BrickTree必須處于BrickProvider的上下文中與BrickDesign畫板/頁面編輯組件共享同一份狀態(tài)。如果你使用完整編輯器外殼示例工程 examples/react-example/src/App.tsx 直接使用了封裝好的BrickEdifice其內部BrickEdifice/index.tsx同樣以BrickProviderBrickDesignCanvas組合呈現(xiàn)各面板Layers 面板含 BrickTree由Menus按需激活。屬性說明className文檔明確 BrickTree 目前只有一個屬性className它作用在組件樹的最外層 div 上。從當前源碼結構看BrickTree/index.tsx組件樹的根容器渲染為div onMouseLeave{onMouseLeave} onWheel{(event) event.stopPropagation()} className{styles[sort-container]} SortTree disabled childNodes{[ROOT]} specialProps{{ key: ROOT, domTreeKeys: [], parentKey: }} componentName{} / /div這里有兩個實現(xiàn)細節(jié)值得注意onWheel中調用event.stopPropagation()阻止頁面滾動事件冒泡避免樹面板內部滾動時干擾外層畫布交互onMouseLeave中調用setOperateState({ operateHoverKey: null, hoverNode: null })當鼠標離開整個樹面板時清除畫布上殘留的 hover 高亮。樣式層面.sort-container使用 flex 布局并允許自身滾動index.less。如果需要對樹面板做布局調整例如固定高度、寬度按文檔說明將className作用在最外層 div 上即可。三、樹的數(shù)據來源與遞歸渲染結構3.1 數(shù)據源pageConfig[ROOT]BrickTree 入口 通過useSelector訂閱STATE_PROPS域中的pageConfig其比較函數(shù)只在根節(jié)點從無到有或從有到無時才觸發(fā)刷新const { pageConfig } useSelector( [pageConfig], (prevState, nextState) { const { pageConfig } nextState; return !!(!prevState.pageConfig[ROOT] pageConfig[ROOT]); } ); if (!pageConfig[ROOT]) return null;這解釋了 BrickTree 的渲染前提頁面必須存在根節(jié)點ROOT樹面板才會渲染一旦整頁被清空見后文deleteComponent對 ROOT 的處理樹面板即返回null。樹從childNodes{[ROOT]}開始遞歸展開specialProps攜帶key、domTreeKeys、parentKey等定位信息供深層節(jié)點識別自己的位置。3.2 遞歸渲染SortTree → SortItem樹的主體由 SortTree.tsx 與 SortItem.tsx 兩個組件遞歸構成SortTree把一組childNodes渲染為可排序容器ReactSortableSortItem列表SortItem表示一個節(jié)點其內部通過renderSortTree決定如何展開子級SortItem.tsx L33-L70若childNodes是數(shù)組普通容器繼續(xù)渲染一個SortTree若childNodes不是數(shù)組且存在nodePropsConfig則按nodePropsConfig的每個屬性名渲染“屬性子樹”——也就是說組件上配置了nodeProps的字段如 Form 的 items、List 的數(shù)據源等也會作為可嵌套子樹展示propChildNodes取get(childNodes, propName, [])。每個SortItem通過useSelector訂閱selectedInfo與pageConfigSortItem.tsx L103-L112從pageConfig[key]讀出節(jié)點的componentName與childNodes。此外每個節(jié)點 DOM 上寫入了三類數(shù)據屬性SortItem.tsx L159-L165div className{styles[sort-item]} id{key} >onMouseOver{() { !isSelected setOperateState({ hoverNode: getSelectedNode(key), operateHoverKey: key, }); }}鼠標懸停樹上節(jié)點時通過getSelectedNode(key)拿到畫布中對應的真實 DOM 節(jié)點寫入operateHoverKey與hoverNode畫布側組件據此顯示 hover 輪廓onMouseLeave時再清空。Header還通過useOperate()的setSubscribe(changeStatus)訂閱操作狀態(tài)變化從而響應畫布側發(fā)起的 hover即畫布 → 樹方向的反向高亮。2樹 → 畫布點擊選中 滾動定位onClick{(event) { event.stopPropagation(); if (isSelected) { clearSelectedStatus(); setOperateState({ selectedNode: null, operateSelectedKey: null }); } else { const selectedNode getSelectedNode(key); selectComponent({ ...specialProps, propName }); nodeScrollIntoView(selectedNode); setOperateState({ selectedNode, operateSelectedKey: key }); } }}點擊節(jié)點會派發(fā)selectComponentaction定義見 produceActions/selectedComponent.ts更新全局selectedInfonodeScrollIntoView負責把畫布中對應節(jié)點滾動進可視區(qū)域再次點擊已選中節(jié)點則取消選中。由于 BrickDesign 畫布同樣訂閱selectedInfo來渲染選中邊框樹與畫布的選中態(tài)因此始終保持一致。3畫布占位預覽placeholderBridgeStore橋這是“實時同步”中最有特色的一環(huán)。當你在樹上拖拽節(jié)點時畫布側會實時渲染一個占位框GuidePlaceholder預覽組件將被放入的位置。其實現(xiàn)鏈路是dragSort.ts L14-L23 定義了全局橋對象export const placeholderBridgeStore { prevRects: null, renderPlaceholder: null, changePosition(rects: PlaceholderPositionType) { if (!isEqual(this.prevRects, rects)) { this.prevRects rects; this.renderPlaceholder this.renderPlaceholder(rects); } }, };畫布側 GuidePlaceholder 組件 把placeholderBridgeStore.renderPlaceholder注冊為占位框渲染函數(shù)樹上拖拽過程中SortTree的onChange調用 onDragBrickTree下文詳述實時計算node1/node2/node3三段占位矩形并changePosition推給畫布拖拽結束或無變化時changePosition({})清空占位框參見 Container.ts 中對placeholderBridgeStore的清空調用。因此即使落點在畫布深處你也能在拖到一半時就直觀看到“松手后會插在哪里”。五、增、刪、改樹上操作的 Action/Reducer 實現(xiàn)文檔所說的“支持增、刪、改支持跨組件拖拽更改順序”在 Header.tsx 中落為三個按鈕行為對應的 action 與 reducer 均在brickd/core包內。5.1 復制copyComponent樹節(jié)點 hover 時顯示復制圖標非屬性節(jié)點、非 ROOT 節(jié)點才顯示點擊后執(zhí)行copyComponent({ key, parentKey, parentPropName })。其 reducer 實現(xiàn)于 handleComponentSchema.ts L104-L136未選中節(jié)點且未傳key時warn(Please select the node you want to copy)并返回原 state禁止復制根節(jié)點selectedKey或key為ROOT時給出Prohibit copying root node警告合法復制時先undo.push({ pageConfig })、清空redo再通過getNewKey(pageConfig)生成新鍵用 immer 的produce update把newKey追加到父節(jié)點childNodes并用copyConfig深拷貝原節(jié)點配置——這就是文檔所述“增”的來源復制出的節(jié)點會即時出現(xiàn)在樹與畫布中配合 3.3 節(jié)的自動展開。5.2 刪除deleteComponent同樣在 handleComponentSchema.ts L184-L224未選中且無key時警告Please select the components you want to delete若刪除的是ROOT直接返回空pageConfig即刪除整個頁面樹面板隨之整體不渲染否則從父節(jié)點childNodes中移除引用deleteChildNodesKey若該節(jié)點自身還有childNodes則遞歸deleteChildNodes清掉所有子節(jié)點最后delete oldState[key]并重置selectedInfo: null。刪除會先壓入undo支持撤銷而頁面級的刪除Layers 面板的deleteLayers則在 Layers/index.tsx 中通過Tips彈窗做“刪除不可逆”的二次確認。5.3 排序與跨組件移動onLayoutSortChange這是 BrickTree 的核心能力。SortTree的onSortEnd回調SortTree.tsx L81-L99拿到排序后的sortKeys與拖拽事件后const layoutSortChange useCallback(function (sortKeys: string[], evt) { const dragInfo JSON.parse(evt.clone.dataset.special); // {key, parentPropName, parentKey} onLayoutSortChange({ sortKeys, parentKey: key, parentPropName: propName!, dragInfo }); setOperateState({ dropNode: null, isDropAble: false }); setNewDragKey(null); }, []);對應的 reducerhandleComponentSchema.ts L144-L177做了兩件事本層重排把父節(jié)點位置的childNodes直接替換為sortKeys跨組件移動清理若dragInfo存在且其parentKey/parentPropName與當前落點不同說明節(jié)點從別的父容器中被拖出于是再對原父節(jié)點執(zhí)行deleteChildNodesKey(childNodes, key, parentPropName)刪除舊引用。源碼注釋也明確寫道“dragInfo 有值說明為跨組件排序需要刪除拖拽組件原先父組件中的引用”。兩次update在同一個produce內完成保證pageConfig原子更新隨后畫布按新結構重新渲染——這就是文檔中“支持跨組件拖拽更改順序”的完整閉環(huán)。六、拖拽排序的實現(xiàn)細節(jié)ReactSortable 與落點規(guī)則6.1 拖拽引擎封裝樹的可排序容器基于 ReactSortable它是對sortablejs的forwardRef封裝useEffect中為onChoose/onAdd/onUpdate/onChange/onEnd五個事件統(tǒng)一注入包裝邏輯——onChoose記錄nextSibling與當前容器onAdd/onUpdate觸發(fā)時先把evt.item插回nextSibling之前回滾 DOM 樂觀更新再取sortable.toArray()得到完整鍵序并回調onSortEnd(items, evt)由狀態(tài)層真正改寫pageConfigonChange把實時鍵序回調給onChange(items, evt)用于拖拽過程中的畫布占位預覽。6.2 Sortable 配置與落點校驗SortTree.tsx L117-L137 給出了關鍵的optionsReactSortable className{styles[sort-able]} options{{ group: { name: nested, put: (a, b, c) putItem(c, props) }, animation: 200, disabled, dataIdAttr: id, ghostClass: styles[item-background], swapThreshold: 0.5, }} onSortEnd{layoutSortChange} onChange{onChange} onEnd{onEnd} group.name: nestedput: putItem所有層級的 SortTree 同屬nested組因此節(jié)點天然可以跨層拖動而putItemSortTree.tsx L50-L64是落點守門人const putItem (c: any, props: SortTreePropsType) { const { childNodes [], nodeProps, componentName } props; const fatherNodesRule c.dataset.farules; const dragName c.dataset.name; if (fatherNodesRule !JSON.parse(fatherNodesRule).include(componentName)) return false; if (nodeProps) { if (nodeProps.isOnlyNode childNodes.length 1) return false; if (nodeProps.childNodesRule) { return nodeProps.childNodesRule.includes(dragName); } } return true; };落點合法性由組件 Schema 決定fatherNodesRule聲明“哪些父級可以容納我”childNodesRule聲明“我可放入哪些子級”isOnlyNode約束“容器內只能有一個節(jié)點”時禁止再插入第二個。這使磚塊設計器可以把組件的嵌套約束完全配置化。dataIdAttr: id與SortItem的id{key}配合保證toArray()返回的就是pageConfig鍵序列animation: 200、ghostClass灰色幽靈占位、swapThreshold: 0.5控制拖拽手感disabled由上層傳入根層SortTree傳disabled是因為 ROOT 本身不可被拖走復制/刪除也禁止操作 ROOT見 5.1、5.2。6.3 拖拽過程畫布占位框的實時計算拖拽過程中onChange會持續(xù)觸發(fā) onDragBrickTreeexport const onDragBrickTree (dragKey, sortKeys, parentKey, setOperateState, propName) { let parentNode getSelectedNode(parentKey); let childNodes get(getVNode(parentKey), childNodes, []); if (!Array.isArray(childNodes) propName) { childNodes get(childNodes, propName, []); // 屬性子樹 } if (isEqual(childNodes, sortKeys)) return placeholderBridgeStore.changePosition(placeholderPosition); // ...計算 node1/node2/node3 三段占位矩形 placeholderBridgeStore.changePosition(placeholderPosition); };它會解析屬性子樹propName情形、把落點 DOM 寫入dropNode并置isDropAble: true供畫布側渲染投放提示、根據拖拽鍵在排序序列中的位置首/中/尾分別調用getPlaceholder1Rect/getPlaceholder3Rect計算三段式占位矩形最后推送給placeholderBridgeStore。若排序結果與原childNodes完全一致isEqual直接清空占位——這解釋了為什么“原地微動”不會在畫布上留下多余占位框。七、使用注意事項小結結合文檔與源碼使用 BrickTree 時需記住必須在BrickProvider內使用且與BrickDesign共享狀態(tài)頁面pageConfig中沒有ROOT時樹面板不渲染index.tsx L27當前對外屬性只有className作用于組件樹最外層 div用于布局與樣式覆蓋ROOT 節(jié)點是保護對象不可復制、不可拖拽刪除 ROOT 等于清空整頁會觸發(fā)undo可撤銷但頁面級deleteLayers不可逆嵌套約束由組件配置驅動fatherNodesRule、childNodesRule、isOnlyNode決定拖拽能否落點配置不當會出現(xiàn)“拖不進去”的現(xiàn)象排查時優(yōu)先檢查對應組件的NodeProps配置樹操作全部走 actioncopyComponent/deleteComponent/onLayoutSortChange/selectComponent見 actionTypes.ts 與 reducers/index.ts并自動維護undo/redo因此撤銷/重做按鈕MidBottomButtons對樹操作同樣生效性能上做了針對性收斂BrickTree、SortTree、SortItem、Header均為memo組件useSelector的自定義比較函數(shù)限制了根級重渲染滾動/懸停事件也做了stopPropagation隔離這些是樹與畫布能“實時同步”而不互相拖累的前提。至此BrickTree 從文檔描述的“組件樹 實時同步 增刪改 跨組件拖拽”到pageConfig數(shù)據流、placeholderBridgeStore占位橋、nested組拖拽規(guī)則與produce原子更新的完整實現(xiàn)路徑均已閉環(huán)。若需進一步閱讀建議依次查看 BrickTree 面板源碼、handleComponentSchema.ts 與 dragSort.ts它們分別對應樹渲染、狀態(tài)改寫與拖拽預覽三個核心環(huán)節(jié)。贊分享低代碼前端【免費下載鏈接】brick-design低代碼框架支持流式布局與自由布局拖拽編排可視化拖拽、隨意嵌套組合、實時渲染、實時輔助線展示、自由布局支持輔助對齊、支持自動吸附、實時組件間距展示、實時拖拽排序、狀態(tài)域管理可視化屬性配置、可視化樣式配置、多設備適配展示支持邏輯渲染、模板字符變量、表達式、自定義方法、自定義狀態(tài)項目地址https://gitcode.com/gh_mirrors/br/brick-design點擊查看免費下載相關推薦Brick Design拖拽編排進階跨組件嵌套與排序技巧Brick Design拖拽編排進階跨組件嵌套與排序技巧 Brick Design 是一款強大的 低代碼可視化拖拽編排框架 專為前端開發(fā)者和設計師打造。通過低代碼前端Ant Design Blazor Tree 組件拖拽排序實戰(zhàn)Draggable 節(jié)點拖放與數(shù)據同步解析Ant Design Blazor Tree 組件拖拽排序實戰(zhàn)Draggable 節(jié)點拖放與數(shù)據同步解析 Ant Design Blazor 的 Tree 組前端UI組件設計系統(tǒng)Brick Design核心組件詳解BrickProvider、BrickDesign、BrickTreeBrick Design核心組件詳解BrickProvider、BrickDesign、BrickTree Brick Design是一款強大的低代碼可視化拖低代碼前端上一篇貓抓cat-catch5分鐘快速上手的瀏覽器視頻下載終極指南下一篇Quartz.NET 裁剪發(fā)布與 Native AOT 實戰(zhàn)指南從 IsAotCompatible 聲明到可運行的持久化 JobStore創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考