From 75c226b4bf25bf0335ecfe688ca8e6a0c0b90d86 Mon Sep 17 00:00:00 2001
From: yyc <395976266@qq.com>
Date: Sun, 5 May 2019 12:41:48 +0800
Subject: [PATCH] feat(asset-bundle): finish "build select tree from asset tree
 for generate single rab"

add main test cases;
---
 .../atom_component/selectTree/SelectTree.re   |  25 +-
 .../asset_bundle/HeaderAssetBundle.re         | 446 +++++++++++--
 .../data/HeaderAssetBundleType.re             |  37 +-
 .../editor/asset/IterateTreeAssetService.re   | 140 +++-
 .../editor/asset/MaterialNodeAssetService.re  |   8 +-
 .../asset/ScriptAttributeNodeAssetService.re  |   2 +
 .../ScriptEventFunctionNodeAssetService.re    |   4 +-
 .../editor/asset/TextureNodeAssetService.re   |   6 +
 .../ui/selectTree/IdSelectTreeService.re      |   1 +
 .../IterateTreeSelectTreeService.re           |  20 +
 .../ui/selectTree/NodeSelectTreeService.re    |   7 +
 .../header/Header_assetBundle_test.re         | 132 ++++
 .../Header_assetBundle_test.js.snap           | 626 ++++++++++++++++++
 .../header/tool/HeaderAssetBundleTool.re      |  15 +
 14 files changed, 1400 insertions(+), 69 deletions(-)
 create mode 100644 src/service/record/ui/selectTree/IdSelectTreeService.re
 create mode 100644 src/service/record/ui/selectTree/NodeSelectTreeService.re
 create mode 100644 test/unit/composable_component/header/Header_assetBundle_test.re
 create mode 100644 test/unit/composable_component/header/__snapshots__/Header_assetBundle_test.js.snap
 create mode 100644 test/unit/composable_component/header/tool/HeaderAssetBundleTool.re

diff --git a/src/core/atom_component/selectTree/SelectTree.re b/src/core/atom_component/selectTree/SelectTree.re
index 147a9ec35..43b87205f 100644
--- a/src/core/atom_component/selectTree/SelectTree.re
+++ b/src/core/atom_component/selectTree/SelectTree.re
@@ -19,10 +19,11 @@ module Method = {
     toggleSelectFunc(checked, node);
   };
 
-  let _getIcon = (node, getValueNodeIconFunc) =>
+  let _getIcon = (node, getValueNodeIconFunc, editorState) =>
     switch (node) {
     | FolderNode(_, _, _) => Some("./public/img/package.png")
-    | ValueNode(_, nodeData) => getValueNodeIconFunc(nodeData.type_)
+    | ValueNode(_, nodeData) =>
+      getValueNodeIconFunc(nodeData.type_, nodeData.value, editorState)
     };
 
   let _getNodeName = node =>
@@ -31,19 +32,15 @@ module Method = {
     | ValueNode(_, nodeData) => nodeData.name
     };
 
-  let _getNodeId = node =>
-    switch (node) {
-    | FolderNode(nodeId, _, _) => nodeId
-    | ValueNode(nodeId, _) => nodeId
-    };
-
   let rec _build = (allNodes, (getValueNodeIconFunc, toggleSelectFunc)) =>
     allNodes
     /* |> _sortByName */
     |> Js.Array.map(node =>
          <ul
            className="wonder-tree-node"
-           key={StringService.intToString(_getNodeId(node))}>
+           key={
+             StringService.intToString(NodeSelectTreeService.getNodeId(node))
+           }>
            <li>
              {
                _hasChildren(node) ?
@@ -60,7 +57,10 @@ module Method = {
                />
              </div>
              {
-               switch (_getIcon(node, getValueNodeIconFunc)) {
+               switch (
+                 _getIcon(node, getValueNodeIconFunc)
+                 |> StateLogicService.getEditorState
+               ) {
                | None => ReasonReact.null
                | Some(icon) => <img src=icon className="treeNode-icon" />
                }
@@ -88,9 +88,7 @@ module Method = {
 
 let component = ReasonReact.statelessComponent("SelectTree");
 
-let render = (tree: tree, (getValueNodeIconFunc, toggleSelectFunc), _self) => {
-  let editorState = StateEditorService.getState();
-
+let render = (tree: tree, (getValueNodeIconFunc, toggleSelectFunc), _self) =>
   <article key="selectTreeRoot" className="wonder-selectTree">
     {
       ReasonReact.array(
@@ -101,7 +99,6 @@ let render = (tree: tree, (getValueNodeIconFunc, toggleSelectFunc), _self) => {
       )
     }
   </article>;
-};
 
 let make = (~tree, ~getValueNodeIconFunc, ~toggleSelectFunc, _children) => {
   ...component,
diff --git a/src/core/composable_component/header/atom_component/asset_bundle/HeaderAssetBundle.re b/src/core/composable_component/header/atom_component/asset_bundle/HeaderAssetBundle.re
index 5a5244211..2c72a71bc 100644
--- a/src/core/composable_component/header/atom_component/asset_bundle/HeaderAssetBundle.re
+++ b/src/core/composable_component/header/atom_component/asset_bundle/HeaderAssetBundle.re
@@ -27,23 +27,348 @@ module Method = {
       </div>
     </div>;
 
-  let buildSelectTreeForGenerateSingleRAB = editorState =>
-    /* TODO need finish */
-    FolderNodeSelectTreeService.buildNode(
-      ~nodeId=0,
-      ~name="folder1",
-      ~isSelect=false,
-      ~children=[|
-        ValueNodeSelectTreeService.buildNode(
-          ~nodeId=1,
-          ~name="value1",
-          ~isSelect=false,
-          ~type_="material",
-          ~value=HeaderAssetBundleType.converMaterialComponentToValue(0),
+  let _unsafeGetSelectTreeNodeIdFromFolderTreeMap =
+      (assetTreeNode, folderTreeMap) =>
+    folderTreeMap
+    |> WonderCommonlib.ImmutableSparseMapService.unsafeGet(
+         NodeAssetService.getNodeId(~node=assetTreeNode),
+       );
+
+  let _setToFolderTreeMap = (assetTreeNode, selectTreeNode, folderTreeMap) =>
+    folderTreeMap
+    |> WonderCommonlib.ImmutableSparseMapService.set(
+         NodeAssetService.getNodeId(~node=assetTreeNode),
+         NodeSelectTreeService.getNodeId(selectTreeNode),
+       );
+
+  let _handleFoldAssetNode =
+      (
+        parentFolderNode,
+        (currentSelectTreeNodeId, folderTreeMap, selectTree),
+        (assetNode, type_, value),
+        engineState,
+      ) => {
+    let newNodeId =
+      IdSelectTreeService.generateNodeId(currentSelectTreeNodeId);
+
+    let selectTree =
+      selectTree
+      |> OperateTreeSelectTreeService.insertNode(
+           _unsafeGetSelectTreeNodeIdFromFolderTreeMap(
+             parentFolderNode,
+             folderTreeMap,
+           ),
+           ValueNodeSelectTreeService.buildNode(
+             ~nodeId=newNodeId,
+             ~name=
+               NodeNameAssetLogicService.getNodeName(assetNode, engineState),
+             ~isSelect=false,
+             ~type_,
+             ~value,
+           ),
+         );
+
+    WonderLog.Log.printJson(selectTree) |> ignore;
+
+    (newNodeId, folderTreeMap, selectTree);
+  };
+
+  let _getGeometryName = (geometry, engineState) =>
+    GeometryEngineService.getGeometryName(geometry, engineState)
+    |> Js.Option.getWithDefault({j|geometry_$geometry|j});
+
+  let _buildGeometryFolderChildren = (assetNode, folderNodeId, engineState) =>
+    HierarchyGameObjectEngineService.getAllGameObjects(
+      WDBNodeAssetService.getWDBGameObject(assetNode),
+      engineState,
+    )
+    |> Js.Array.filter(gameObject =>
+         GameObjectComponentEngineService.hasGeometryComponent(
+           gameObject,
+           engineState,
+         )
+       )
+    |> WonderCommonlib.ArrayService.reduceOneParam(
+         (. (newNodeId, childNodeArr), gameObject) => {
+           let geometry =
+             GameObjectComponentEngineService.unsafeGetGeometryComponent(
+               gameObject,
+               engineState,
+             );
+
+           let newNodeId = IdSelectTreeService.generateNodeId(newNodeId);
+
+           let childNodeArr =
+             childNodeArr
+             |> ArrayService.push(
+                  ValueNodeSelectTreeService.buildNode(
+                    ~nodeId=newNodeId,
+                    ~name=_getGeometryName(geometry, engineState),
+                    ~isSelect=false,
+                    ~type_="geometry",
+                    ~value=
+                      geometry
+                      |> HeaderAssetBundleType.convertGeometryComponentToValue,
+                  ),
+                );
+
+           (newNodeId, childNodeArr);
+         },
+         (folderNodeId, WonderCommonlib.ArrayService.createEmpty()),
+       );
+
+  let buildSelectTreeForGenerateSingleRAB = ((editorState, engineState)) => {
+    open HeaderAssetBundleType;
+
+    let initNodeId = 0;
+    let rootNode =
+      FolderNodeSelectTreeService.buildNode(
+        ~nodeId=initNodeId,
+        ~name=RootTreeAssetService.getAssetTreeRootName(),
+        ~isSelect=false,
+        ~children=[||],
+        (),
+      );
+    let selectTree = rootNode;
+
+    let (_, _, selectTree) =
+      IterateTreeAssetService.foldWithParentFolderNodeWithoutRootNode(
+        ~acc=(
+          initNodeId,
+          _setToFolderTreeMap(
+            RootTreeAssetEditorService.getRootNode(editorState),
+            rootNode,
+            WonderCommonlib.ImmutableSparseMapService.createEmpty(),
+          ),
+          selectTree,
         ),
-      |],
-      (),
-    );
+        ~tree=TreeAssetEditorService.unsafeGetTree(editorState),
+        ~folderNodeFunc=
+          (
+            parentFolderNode,
+            (currentSelectTreeNodeId, folderTreeMap, selectTree),
+            nodeId,
+            nodeData,
+            children,
+          ) => {
+            WonderLog.Log.print("folder") |> ignore;
+            let newNodeId =
+              IdSelectTreeService.generateNodeId(currentSelectTreeNodeId);
+
+            let newSelectTreeFolderNode =
+              FolderNodeSelectTreeService.buildNode(
+                ~nodeId=newNodeId,
+                ~name=FolderNodeAssetService.getNodeName(nodeData),
+                ~isSelect=false,
+                ~children=[||],
+                (),
+              );
+
+            let selectTree =
+              selectTree
+              |> OperateTreeSelectTreeService.insertNode(
+                   _unsafeGetSelectTreeNodeIdFromFolderTreeMap(
+                     parentFolderNode,
+                     folderTreeMap,
+                   ),
+                   newSelectTreeFolderNode,
+                 );
+
+            (
+              newNodeId,
+              folderTreeMap
+              |> _setToFolderTreeMap(
+                   FolderNodeAssetService.buildNodeByNodeData(
+                     ~nodeId,
+                     ~nodeData,
+                     ~children,
+                   ),
+                   newSelectTreeFolderNode,
+                 ),
+              selectTree,
+            );
+          },
+        ~textureNodeFunc=
+          (
+            parentFolderNode,
+            (currentSelectTreeNodeId, folderTreeMap, selectTree),
+            nodeId,
+            nodeData,
+          ) => {
+            let assetNode =
+              TextureNodeAssetService.buildNodeByNodeData(~nodeId, ~nodeData);
+
+            _handleFoldAssetNode(
+              parentFolderNode,
+              (currentSelectTreeNodeId, folderTreeMap, selectTree),
+              (
+                assetNode,
+                "texture",
+                (
+                  {
+                    textureComponent:
+                      TextureNodeAssetService.getTextureComponent(assetNode),
+                    imageDataIndex:
+                      TextureNodeAssetService.getImageDataIndex(assetNode),
+                  }: textureData
+                )
+                |> convertTextureDataToValue,
+              ),
+              engineState,
+            );
+          },
+        ~materialNodeFunc=
+          (
+            parentFolderNode,
+            (currentSelectTreeNodeId, folderTreeMap, selectTree),
+            nodeId,
+            nodeData,
+          ) => {
+            let assetNode =
+              MaterialNodeAssetService.buildNodeByNodeData(
+                ~nodeId,
+                ~nodeData,
+              );
+
+            _handleFoldAssetNode(
+              parentFolderNode,
+              (currentSelectTreeNodeId, folderTreeMap, selectTree),
+              (
+                assetNode,
+                switch (MaterialNodeAssetService.getMaterialType(assetNode)) {
+                | MaterialDataAssetType.BasicMaterial => "basicMaterial"
+                | MaterialDataAssetType.LightMaterial => "lightMaterial"
+                },
+                (
+                  {
+                    materialComponent:
+                      MaterialNodeAssetService.getMaterialComponent(
+                        assetNode,
+                      ),
+                    imageDataIndex:
+                      MaterialNodeAssetService.getImageDataIndex(assetNode),
+                  }: materialData
+                )
+                |> convertMaterialDataToValue,
+              ),
+              engineState,
+            );
+          },
+        ~scriptEventFunctionNodeFunc=
+          (
+            parentFolderNode,
+            (currentSelectTreeNodeId, folderTreeMap, selectTree),
+            nodeId,
+            nodeData,
+          ) => {
+            WonderLog.Log.print("se") |> ignore;
+            let assetNode =
+              ScriptEventFunctionNodeAssetService.buildNodeByNodeData(
+                ~nodeId,
+                ~nodeData,
+              );
+
+            _handleFoldAssetNode(
+              parentFolderNode,
+              (currentSelectTreeNodeId, folderTreeMap, selectTree),
+              (
+                assetNode,
+                "scriptEventFunction",
+                (
+                  {
+                    name:
+                      ScriptEventFunctionNodeAssetService.getNodeName(
+                        assetNode,
+                      ),
+                    eventFunctionData:
+                      ScriptEventFunctionNodeAssetService.getEventFunctionData(
+                        assetNode,
+                      ),
+                  }: scriptEventFunctionData
+                )
+                |> convertScriptEventFunctionDataToValue,
+              ),
+              engineState,
+            );
+          },
+        ~scriptAttributeNodeFunc=
+          (
+            parentFolderNode,
+            (currentSelectTreeNodeId, folderTreeMap, selectTree),
+            nodeId,
+            nodeData,
+          ) => {
+            let assetNode =
+              ScriptAttributeNodeAssetService.buildNodeByNodeData(
+                ~nodeId,
+                ~nodeData,
+              );
+
+            _handleFoldAssetNode(
+              parentFolderNode,
+              (currentSelectTreeNodeId, folderTreeMap, selectTree),
+              (
+                assetNode,
+                "scriptAttribute",
+                (
+                  {
+                    name:
+                      ScriptAttributeNodeAssetService.getNodeName(assetNode),
+                    attribute:
+                      ScriptAttributeNodeAssetService.getAttribute(assetNode),
+                  }: scriptAttributeData
+                )
+                |> convertScriptAttributeDataToValue,
+              ),
+              engineState,
+            );
+          },
+        ~wdbNodeFunc=
+          (
+            parentFolderNode,
+            (currentSelectTreeNodeId, folderTreeMap, selectTree),
+            nodeId,
+            nodeData,
+          ) => {
+            let assetNode =
+              WDBNodeAssetService.buildNodeByNodeData(~nodeId, ~nodeData);
+
+            let assetNodeName =
+              NodeNameAssetLogicService.getNodeName(assetNode, engineState);
+
+            let folderNodeId =
+              IdSelectTreeService.generateNodeId(currentSelectTreeNodeId);
+
+            let (newNodeId, children) =
+              _buildGeometryFolderChildren(
+                assetNode,
+                folderNodeId,
+                engineState,
+              );
+
+            let selectTree =
+              selectTree
+              |> OperateTreeSelectTreeService.insertNode(
+                   _unsafeGetSelectTreeNodeIdFromFolderTreeMap(
+                     parentFolderNode,
+                     folderTreeMap,
+                   ),
+                   FolderNodeSelectTreeService.buildNode(
+                     ~nodeId=folderNodeId,
+                     ~name={j|$(assetNodeName)_Geometrys|j},
+                     ~isSelect=false,
+                     ~children,
+                     (),
+                   ),
+                 );
+
+            (newNodeId, folderTreeMap, selectTree);
+          },
+        (),
+      );
+
+    selectTree;
+  };
 
   let updateSelectTreeForGenerateSingleRAB = ((send, state), selectTree) =>
     send(
@@ -98,24 +423,73 @@ module Method = {
       tree=selectTreeForGenerateSingleRAB
       toggleSelectFunc={_toggleSelect(selectTreeForGenerateSingleRAB, send)}
       getValueNodeIconFunc={
-        type_ =>
-          /* TODO handle more type_ */
+        (type_, value, editorState) =>
           switch (type_) {
-          | "material" => Some("./public/img/mat.png")
+          | "basicMaterial"
+          | "lightMaterial" =>
+            let {imageDataIndex}: HeaderAssetBundleType.materialData =
+              value |> HeaderAssetBundleType.convertValueToMaterialData;
+
+            ImageDataMapUtils.getImgSrc(
+              imageDataIndex,
+              editorState
+              |> MaterialDataAssetEditorService.unsafeGetDefaultMaterialSnapshotPath,
+              editorState,
+            )
+            ->Some;
+          /* TODO add geometry image */
+          | "geometry" => Some("./public/img/wdb.png")
+          | "scriptEventFunction" =>
+            Some("./public/img/scriptEventFunction.png")
+          | "scriptAttribute" => Some("./public/img/scriptAttribute.png")
+          | "texture" =>
+            let {imageDataIndex}: HeaderAssetBundleType.textureData =
+              value |> HeaderAssetBundleType.convertValueToTextureData;
+
+            ImageDataMapUtils.getImgSrc(
+              imageDataIndex,
+              ImageUtils.getNullImageSrc(),
+              editorState,
+            )
+            ->Some;
           | _ => None
           }
       }
     />;
 
   let generateAndDownloadSingleRAB = selectTreeForGenerateSingleRAB => {
-    LogUtils.printJson(( "download single rab", selectTreeForGenerateSingleRAB )) |> ignore;
+    LogUtils.printJson((
+      "download single rab",
+      selectTreeForGenerateSingleRAB,
+    ))
+    |> ignore;
 
     /* TODO generate and download */
-
     ();
   };
 
   let hideGenerateSingleRABModal = send => send(HideGenerateSingleRABModal);
+
+  let renderGenerateSingleRABModal =
+      (languageType, selectTreeForGenerateSingleRAB, send) =>
+    <Modal
+      title={
+        LanguageUtils.getHeaderLanguageDataByType(
+          "generate-single-rab",
+          languageType,
+        )
+      }
+      closeFunc={
+        () => {
+          generateAndDownloadSingleRAB(selectTreeForGenerateSingleRAB);
+
+          hideGenerateSingleRABModal(send);
+        }
+      }
+      content=[|
+        buildGenerateSingleRABUI(send, selectTreeForGenerateSingleRAB),
+      |]
+    />;
 };
 
 let component = ReasonReact.reducerComponent("HeaderAssetBundle");
@@ -176,29 +550,11 @@ let render =
         switch (state.selectTreeForGenerateSingleRAB) {
         | None => ReasonReact.null
         | Some(selectTreeForGenerateSingleRAB) =>
-          <Modal
-            title={
-              LanguageUtils.getHeaderLanguageDataByType(
-                "generate-single-rab",
-                languageType,
-              )
-            }
-            closeFunc=(
-              () => {
-                Method.generateAndDownloadSingleRAB(
-                  selectTreeForGenerateSingleRAB,
-                );
-
-                Method.hideGenerateSingleRABModal(send);
-              }
-            )
-            content=[|
-              Method.buildGenerateSingleRABUI(
-                send,
-                selectTreeForGenerateSingleRAB,
-              ),
-            |]
-          />
+          Method.renderGenerateSingleRABModal(
+            languageType,
+            selectTreeForGenerateSingleRAB,
+            send,
+          )
         } :
         ReasonReact.null
     }
@@ -229,7 +585,7 @@ let make =
     state.isShowGenerateSingleRABModal
     && Js.Option.isNone(state.selectTreeForGenerateSingleRAB) ?
       Method.buildSelectTreeForGenerateSingleRAB
-      |> StateLogicService.getEditorState
+      |> StateLogicService.getStateToGetData
       |> Method.updateSelectTreeForGenerateSingleRAB((send, state)) :
       ();
   },
diff --git a/src/core/composable_component/header/atom_component/asset_bundle/data/HeaderAssetBundleType.re b/src/core/composable_component/header/atom_component/asset_bundle/data/HeaderAssetBundleType.re
index 8d19bf986..8515d7caf 100644
--- a/src/core/composable_component/header/atom_component/asset_bundle/data/HeaderAssetBundleType.re
+++ b/src/core/composable_component/header/atom_component/asset_bundle/data/HeaderAssetBundleType.re
@@ -1,5 +1,38 @@
 open SelectTreeType;
 
-external converMaterialComponentToValue: int => value = "%identity";
+type materialData = {
+  materialComponent: int,
+  imageDataIndex: int,
+};
 
-external converValueToMaterialComponent: value => int = "%identity";
\ No newline at end of file
+type textureData = Wonderjs.RABType.textureData;
+
+type scriptEventFunctionData = Wonderjs.RABType.scriptEventFunctionData;
+
+type scriptAttributeData = Wonderjs.RABType.scriptAttributeData;
+
+type imageDataMap = Wonderjs.RABType.imageDataMap;
+
+external convertMaterialDataToValue: materialData => value = "%identity";
+
+external convertValueToMaterialData: value => materialData = "%identity";
+
+external convertGeometryComponentToValue: int => value = "%identity";
+
+external convertValueToGeometryComponent: value => int = "%identity";
+
+external convertTextureDataToValue: textureData => value = "%identity";
+
+external convertValueToTextureData: value => textureData = "%identity";
+
+external convertScriptEventFunctionDataToValue: scriptEventFunctionData => value =
+  "%identity";
+
+external convertValueToScriptEventFunctionData: value => scriptEventFunctionData =
+  "%identity";
+
+external convertScriptAttributeDataToValue: scriptAttributeData => value =
+  "%identity";
+
+external convertValueToScriptAttributeData: value => scriptAttributeData =
+  "%identity";
\ No newline at end of file
diff --git a/src/service/record/editor/asset/IterateTreeAssetService.re b/src/service/record/editor/asset/IterateTreeAssetService.re
index a624271ab..4f619417b 100755
--- a/src/service/record/editor/asset/IterateTreeAssetService.re
+++ b/src/service/record/editor/asset/IterateTreeAssetService.re
@@ -81,10 +81,10 @@ let rec fold =
           (),
         )
         : 'r => {
-  let recurse = (acc, children) =>
+  let recurse = (acc, child) =>
     fold(
       ~acc,
-      ~tree=children,
+      ~tree=child,
       ~seqFoldFunc,
       ~textureNodeFunc,
       ~materialNodeFunc,
@@ -112,6 +112,56 @@ let rec fold =
   };
 };
 
+/* let rec foldWithoutRootNode =
+           (
+             ~folderNodeFunc,
+             ~acc,
+             ~tree,
+             ~seqFoldFunc=WonderCommonlib.ArrayService.reduceOneParam,
+             ~textureNodeFunc=(acc, _, _) => acc,
+             ~materialNodeFunc=(acc, _, _) => acc,
+             ~scriptEventFunctionNodeFunc=(acc, _, _) => acc,
+             ~scriptAttributeNodeFunc=(acc, _, _) => acc,
+             ~wdbNodeFunc=(acc, _, _) => acc,
+             (),
+           )
+           : 'r => {
+     let recurse = (acc, child) =>
+       fold(
+         ~acc,
+         ~tree=child,
+         ~seqFoldFunc,
+         ~textureNodeFunc,
+         ~materialNodeFunc,
+         ~scriptEventFunctionNodeFunc,
+         ~scriptAttributeNodeFunc,
+         ~wdbNodeFunc,
+         ~folderNodeFunc,
+         (),
+       );
+
+     switch (tree) {
+     | ScriptEventFunctionNode(nodeId, scriptEventFunctionNodeData) =>
+       scriptEventFunctionNodeFunc(acc, nodeId, scriptEventFunctionNodeData)
+     | ScriptAttributeNode(nodeId, scriptAttributeNodeData) =>
+       scriptAttributeNodeFunc(acc, nodeId, scriptAttributeNodeData)
+     | TextureNode(nodeId, textureNodeData) =>
+       textureNodeFunc(acc, nodeId, textureNodeData)
+     | MaterialNode(nodeId, materialNodeData) =>
+       materialNodeFunc(acc, nodeId, materialNodeData)
+     | WDBNode(nodeId, wdbNodeData) => wdbNodeFunc(acc, nodeId, wdbNodeData)
+     | FolderNode(nodeId, folderNodeData, children) =>
+       FolderNodeAssetService.getNodeName(folderNodeData)
+       === RootTreeAssetService.getAssetTreeRootName() ?
+         UIStateAssetService.fold(seqFoldFunc, recurse, acc, children) :
+         {
+           let localAccum = folderNodeFunc(acc, nodeId, folderNodeData, children);
+
+           UIStateAssetService.fold(seqFoldFunc, recurse, localAccum, children);
+         }
+     };
+   }; */
+
 let rec foldWithParentFolderNode =
         (
           ~folderNodeFunc,
@@ -127,10 +177,10 @@ let rec foldWithParentFolderNode =
           (),
         )
         : 'r => {
-  let recurse = (parentFolderNode, acc, children) =>
+  let recurse = (parentFolderNode, acc, child) =>
     foldWithParentFolderNode(
       ~acc,
-      ~tree=children,
+      ~tree=child,
       ~textureNodeFunc,
       ~materialNodeFunc,
       ~scriptEventFunctionNodeFunc,
@@ -183,6 +233,84 @@ let rec foldWithParentFolderNode =
   };
 };
 
+let rec foldWithParentFolderNodeWithoutRootNode =
+        (
+          ~folderNodeFunc,
+          ~acc,
+          ~tree,
+          ~seqFoldFunc=WonderCommonlib.ArrayService.reduceOneParam,
+          ~textureNodeFunc=(_, acc, _, _) => acc,
+          ~materialNodeFunc=(_, acc, _, _) => acc,
+          ~scriptEventFunctionNodeFunc=(_, acc, _, _) => acc,
+          ~scriptAttributeNodeFunc=(_, acc, _, _) => acc,
+          ~wdbNodeFunc=(_, acc, _, _) => acc,
+          ~parentFolderNode=RootTreeAssetService.getRootNode(tree),
+          (),
+        )
+        : 'r => {
+  let recurse = (parentFolderNode, acc, child) =>
+    foldWithParentFolderNodeWithoutRootNode(
+      ~acc,
+      ~tree=child,
+      ~textureNodeFunc,
+      ~materialNodeFunc,
+      ~scriptEventFunctionNodeFunc,
+      ~scriptAttributeNodeFunc,
+      ~wdbNodeFunc,
+      ~folderNodeFunc,
+      ~parentFolderNode,
+      (),
+    );
+
+  switch (tree) {
+  | ScriptEventFunctionNode(nodeId, scriptEventFunctionNodeData) =>
+    scriptEventFunctionNodeFunc(
+      parentFolderNode,
+      acc,
+      nodeId,
+      scriptEventFunctionNodeData,
+    )
+  | ScriptAttributeNode(nodeId, scriptAttributeNodeData) =>
+    scriptAttributeNodeFunc(
+      parentFolderNode,
+      acc,
+      nodeId,
+      scriptAttributeNodeData,
+    )
+  | TextureNode(nodeId, textureNodeData) =>
+    textureNodeFunc(parentFolderNode, acc, nodeId, textureNodeData)
+  | MaterialNode(nodeId, materialNodeData) =>
+    materialNodeFunc(parentFolderNode, acc, nodeId, materialNodeData)
+  | WDBNode(nodeId, wdbNodeData) =>
+    wdbNodeFunc(parentFolderNode, acc, nodeId, wdbNodeData)
+  | FolderNode(nodeId, folderNodeData, children) =>
+    let localAccum =
+      FolderNodeAssetService.getNodeName(folderNodeData)
+      === RootTreeAssetService.getAssetTreeRootName() ?
+        acc :
+        folderNodeFunc(
+          parentFolderNode,
+          acc,
+          nodeId,
+          folderNodeData,
+          children,
+        );
+
+    UIStateAssetService.fold(
+      seqFoldFunc,
+      recurse(
+        FolderNodeAssetService.buildNodeByNodeData(
+          ~nodeId,
+          ~nodeData=folderNodeData,
+          ~children,
+        ),
+      ),
+      localAccum,
+      children,
+    );
+  };
+};
+
 let rec foldWithHandleBeforeAndAfterFoldChildren =
         (
           ~acc,
@@ -199,10 +327,10 @@ let rec foldWithHandleBeforeAndAfterFoldChildren =
           (),
         )
         : 'r => {
-  let recurse = (acc, children) =>
+  let recurse = (acc, child) =>
     foldWithHandleBeforeAndAfterFoldChildren(
       ~acc,
-      ~tree=children,
+      ~tree=child,
       ~textureNodeFunc,
       ~materialNodeFunc,
       ~scriptEventFunctionNodeFunc,
diff --git a/src/service/record/editor/asset/MaterialNodeAssetService.re b/src/service/record/editor/asset/MaterialNodeAssetService.re
index 0aae06ba3..f0f8dca53 100755
--- a/src/service/record/editor/asset/MaterialNodeAssetService.re
+++ b/src/service/record/editor/asset/MaterialNodeAssetService.re
@@ -39,4 +39,10 @@ let getNodeData = node =>
         ~params={j||j},
       ),
     )
-  };
\ No newline at end of file
+  };
+
+let getMaterialComponent = node => getNodeData(node).materialComponent;
+
+let getMaterialType = node => getNodeData(node).type_;
+
+let getImageDataIndex = node => getNodeData(node).imageDataIndex;
\ No newline at end of file
diff --git a/src/service/record/editor/asset/ScriptAttributeNodeAssetService.re b/src/service/record/editor/asset/ScriptAttributeNodeAssetService.re
index 6a7b86191..4e15c166d 100644
--- a/src/service/record/editor/asset/ScriptAttributeNodeAssetService.re
+++ b/src/service/record/editor/asset/ScriptAttributeNodeAssetService.re
@@ -28,6 +28,8 @@ let getNodeName = node => getNodeData(node).name;
 
 let getNodeNameByData = (nodeData: scriptAttributeNodeData) => nodeData.name;
 
+let getAttribute = node => getNodeData(node).attribute;
+
 let getAttributeByData = (nodeData: scriptAttributeNodeData) =>
   nodeData.attribute;
 
diff --git a/src/service/record/editor/asset/ScriptEventFunctionNodeAssetService.re b/src/service/record/editor/asset/ScriptEventFunctionNodeAssetService.re
index eb5c2e7f8..b272db622 100644
--- a/src/service/record/editor/asset/ScriptEventFunctionNodeAssetService.re
+++ b/src/service/record/editor/asset/ScriptEventFunctionNodeAssetService.re
@@ -33,4 +33,6 @@ let isScriptEventFunctionNode = node =>
   switch (node) {
   | ScriptEventFunctionNode(_, _) => true
   | _ => false
-  };
\ No newline at end of file
+  };
+
+let getEventFunctionData = node => getNodeData(node).eventFunctionData;
\ No newline at end of file
diff --git a/src/service/record/editor/asset/TextureNodeAssetService.re b/src/service/record/editor/asset/TextureNodeAssetService.re
index 7768d49f0..3f64a9228 100755
--- a/src/service/record/editor/asset/TextureNodeAssetService.re
+++ b/src/service/record/editor/asset/TextureNodeAssetService.re
@@ -40,4 +40,10 @@ let getTextureComponent = node => {
   let {textureComponent} = getNodeData(node);
 
   textureComponent;
+};
+
+let getImageDataIndex = node => {
+  let {imageDataIndex}: textureNodeData = getNodeData(node);
+
+  imageDataIndex;
 };
\ No newline at end of file
diff --git a/src/service/record/ui/selectTree/IdSelectTreeService.re b/src/service/record/ui/selectTree/IdSelectTreeService.re
new file mode 100644
index 000000000..9788ef18b
--- /dev/null
+++ b/src/service/record/ui/selectTree/IdSelectTreeService.re
@@ -0,0 +1 @@
+let generateNodeId = nodeIndex => nodeIndex |> succ;
\ No newline at end of file
diff --git a/src/service/record/ui/selectTree/IterateTreeSelectTreeService.re b/src/service/record/ui/selectTree/IterateTreeSelectTreeService.re
index 5ac477a2f..f30f76616 100644
--- a/src/service/record/ui/selectTree/IterateTreeSelectTreeService.re
+++ b/src/service/record/ui/selectTree/IterateTreeSelectTreeService.re
@@ -28,4 +28,24 @@ let rec cata =
       children |> Js.Array.map(node => recurse(~tree=node, ())),
     )
   };
+};
+
+let rec fold =
+        (~folderNodeFunc, ~acc, ~tree, ~valueNodeFunc=(acc, _, _) => acc, ())
+        : 'r => {
+  let recurse = (acc, child) =>
+    fold(~acc, ~tree=child, ~valueNodeFunc, ~folderNodeFunc, ());
+
+  switch (tree) {
+  | ValueNode(nodeId, valueNodeData) =>
+    valueNodeFunc(acc, nodeId, valueNodeData)
+  | FolderNode(nodeId, folderNodeData, children) =>
+    let localAccum = folderNodeFunc(acc, nodeId, folderNodeData, children);
+
+    children
+    |> WonderCommonlib.ArrayService.reduceOneParam(
+         (. acc, child) => recurse(acc, child),
+         localAccum,
+       );
+  };
 };
\ No newline at end of file
diff --git a/src/service/record/ui/selectTree/NodeSelectTreeService.re b/src/service/record/ui/selectTree/NodeSelectTreeService.re
new file mode 100644
index 000000000..49205592c
--- /dev/null
+++ b/src/service/record/ui/selectTree/NodeSelectTreeService.re
@@ -0,0 +1,7 @@
+open SelectTreeType;
+
+let getNodeId = node =>
+  switch (node) {
+  | FolderNode(nodeId, _, _) => nodeId
+  | ValueNode(nodeId, _) => nodeId
+  };
\ No newline at end of file
diff --git a/test/unit/composable_component/header/Header_assetBundle_test.re b/test/unit/composable_component/header/Header_assetBundle_test.re
new file mode 100644
index 000000000..42de71906
--- /dev/null
+++ b/test/unit/composable_component/header/Header_assetBundle_test.re
@@ -0,0 +1,132 @@
+open Wonder_jest;
+
+open Expect;
+
+open Expect.Operators;
+
+open Sinon;
+
+open Js.Promise;
+
+let _ =
+  describe("Header AssetBundle", () => {
+    let sandbox = getSandboxDefaultVal();
+
+    beforeEach(() => {
+      sandbox := createSandbox();
+
+      MainEditorSceneTool.initState(~sandbox, ());
+
+      MainEditorSceneTool.initInspectorEngineState(
+        ~sandbox,
+        ~isInitJob=false,
+        ~noWorkerJobRecord=
+          NoWorkerJobConfigToolEngine.buildNoWorkerJobConfig(
+            ~initPipelines=
+              {|
+             [
+              {
+                "name": "default",
+                "jobs": [
+                    {"name": "init_inspector_engine" }
+                ]
+              }
+            ]
+             |},
+            ~initJobs=
+              {|
+             [
+                {"name": "init_inspector_engine" }
+             ]
+             |},
+            (),
+          ),
+        (),
+      );
+
+      StateInspectorEngineService.unsafeGetState()
+      |> MainUtils._handleInspectorEngineState
+      |> StateInspectorEngineService.setState
+      |> ignore;
+
+      CanvasTool.prepareInspectorCanvasAndImgCanvas(sandbox) |> ignore;
+
+      MainEditorSceneTool.prepareScene(sandbox);
+    });
+    afterEach(() => restoreSandbox(refJsObjToSandbox(sandbox^)));
+
+    describe("test generate single rab", () =>
+      describe("test buildSelectTreeForGenerateSingleRAB", () => {
+        /* TODO add more tests */
+
+        let truckWDBArrayBuffer = ref(Obj.magic(1));
+
+        beforeAll(() =>
+          truckWDBArrayBuffer := WDBTool.convertGLBToWDB("CesiumMilkTruck")
+        );
+
+        beforeEach(() => {
+          MainEditorAssetTool.buildFakeFileReader();
+          MainEditorAssetTool.buildFakeImage();
+
+          LoadTool.buildFakeTextDecoder(LoadTool.convertUint8ArrayToBuffer);
+          LoadTool.buildFakeURL(sandbox^);
+
+          LoadTool.buildFakeLoadImage(.);
+        });
+
+        testPromise("test1", () => {
+          let addedMaterialNodeId1 = MainEditorAssetIdTool.getNewAssetId();
+          MainEditorAssetHeaderOperateNodeTool.addMaterial();
+
+          let addedFolderNodeId1 = MainEditorAssetIdTool.getNewAssetId();
+          MainEditorAssetHeaderOperateNodeTool.addFolder();
+
+          MainEditorAssetTreeTool.Select.selectFolderNode(
+            ~nodeId=addedFolderNodeId1,
+            (),
+          );
+
+          MainEditorAssetUploadTool.loadOneTexture(
+            ~imgName="image1.png",
+            ~imgSrc="newImgBase64",
+            (),
+          )
+          |> then_(uploadedTextureNodeId =>
+               MainEditorAssetUploadTool.loadOneWDB(
+                 ~fileName="Truck",
+                 ~arrayBuffer=truckWDBArrayBuffer^,
+                 (),
+               )
+               |> then_(uploadedWDBNodeId =>
+                    HeaderAssetBundleTool.buildGenerateSingleRABModal(
+                      ~selectTree=
+                        HeaderAssetBundleTool.buildSelectTreeForGenerateSingleRAB
+                        |> StateLogicService.getStateToGetData,
+                      ~send=SinonTool.createOneLengthStub(sandbox^),
+                      (),
+                    )
+                    |> BuildComponentTool.buildUI
+                    |> ReactTestTool.createSnapshotAndMatch
+                    |> resolve
+                  )
+             );
+        });
+        test("test2", () => {
+          MainEditorAssetHeaderOperateNodeTool.addFolder();
+
+          MainEditorAssetHeaderOperateNodeTool.addScriptEventFunction();
+
+          HeaderAssetBundleTool.buildGenerateSingleRABModal(
+            ~selectTree=
+              HeaderAssetBundleTool.buildSelectTreeForGenerateSingleRAB
+              |> StateLogicService.getStateToGetData,
+            ~send=SinonTool.createOneLengthStub(sandbox^),
+            (),
+          )
+          |> BuildComponentTool.buildUI
+          |> ReactTestTool.createSnapshotAndMatch
+        });
+      })
+    );
+  });
\ No newline at end of file
diff --git a/test/unit/composable_component/header/__snapshots__/Header_assetBundle_test.js.snap b/test/unit/composable_component/header/__snapshots__/Header_assetBundle_test.js.snap
new file mode 100644
index 000000000..afb4329ea
--- /dev/null
+++ b/test/unit/composable_component/header/__snapshots__/Header_assetBundle_test.js.snap
@@ -0,0 +1,626 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header AssetBundle test generate single rab test buildSelectTreeForGenerateSingleRAB test1 1`] = `
+<article
+  className="wonder-modal"
+>
+  <div
+    className="modal-item"
+  >
+    <div
+      className="modal-item-header"
+    >
+      Generate Single RAB
+      <img
+        onClick={[Function]}
+        src="./public/img/close.png"
+      />
+    </div>
+    <div
+      className="modal-item-content"
+    >
+      <article
+        className="wonder-selectTree"
+      >
+        <ul
+          className="wonder-tree-node"
+        >
+          <li>
+            <div
+              className="item-triangle"
+            >
+              <img
+                src="./public/img/down.png"
+              />
+            </div>
+            <div
+              className="select-box"
+            >
+              <input
+                defaultChecked={false}
+                onClick={[Function]}
+                type="checkbox"
+              />
+            </div>
+            <img
+              className="treeNode-icon"
+              src="./public/img/package.png"
+            />
+            <span>
+              Assets
+            </span>
+          </li>
+          <ul
+            className="wonder-tree-node"
+          >
+            <li>
+              <div
+                className="item-triangle"
+              />
+              <div
+                className="select-box"
+              >
+                <input
+                  defaultChecked={false}
+                  onClick={[Function]}
+                  type="checkbox"
+                />
+              </div>
+              <img
+                className="treeNode-icon"
+                src="./public/img/mat.jpg"
+              />
+              <span>
+                New Material
+              </span>
+            </li>
+          </ul>
+          <ul
+            className="wonder-tree-node"
+          >
+            <li>
+              <div
+                className="item-triangle"
+              >
+                <img
+                  src="./public/img/down.png"
+                />
+              </div>
+              <div
+                className="select-box"
+              >
+                <input
+                  defaultChecked={false}
+                  onClick={[Function]}
+                  type="checkbox"
+                />
+              </div>
+              <img
+                className="treeNode-icon"
+                src="./public/img/package.png"
+              />
+              <span>
+                New Folder
+              </span>
+            </li>
+            <ul
+              className="wonder-tree-node"
+            >
+              <li>
+                <div
+                  className="item-triangle"
+                />
+                <div
+                  className="select-box"
+                >
+                  <input
+                    defaultChecked={false}
+                    onClick={[Function]}
+                    type="checkbox"
+                  />
+                </div>
+                <img
+                  className="treeNode-icon"
+                  src="newImgBase64"
+                />
+                <span>
+                  image1
+                </span>
+              </li>
+            </ul>
+            <ul
+              className="wonder-tree-node"
+            >
+              <li>
+                <div
+                  className="item-triangle"
+                >
+                  <img
+                    src="./public/img/down.png"
+                  />
+                </div>
+                <div
+                  className="select-box"
+                >
+                  <input
+                    defaultChecked={false}
+                    onClick={[Function]}
+                    type="checkbox"
+                  />
+                </div>
+                <img
+                  className="treeNode-icon"
+                  src="./public/img/package.png"
+                />
+                <span>
+                  Truck_Geometrys
+                </span>
+              </li>
+              <ul
+                className="wonder-tree-node"
+              >
+                <li>
+                  <div
+                    className="item-triangle"
+                  />
+                  <div
+                    className="select-box"
+                  >
+                    <input
+                      defaultChecked={false}
+                      onClick={[Function]}
+                      type="checkbox"
+                    />
+                  </div>
+                  <img
+                    className="treeNode-icon"
+                    src="./public/img/wdb.png"
+                  />
+                  <span>
+                    Cesium_Milk_Truck_0
+                  </span>
+                </li>
+              </ul>
+              <ul
+                className="wonder-tree-node"
+              >
+                <li>
+                  <div
+                    className="item-triangle"
+                  />
+                  <div
+                    className="select-box"
+                  >
+                    <input
+                      defaultChecked={false}
+                      onClick={[Function]}
+                      type="checkbox"
+                    />
+                  </div>
+                  <img
+                    className="treeNode-icon"
+                    src="./public/img/wdb.png"
+                  />
+                  <span>
+                    Cesium_Milk_Truck_1
+                  </span>
+                </li>
+              </ul>
+              <ul
+                className="wonder-tree-node"
+              >
+                <li>
+                  <div
+                    className="item-triangle"
+                  />
+                  <div
+                    className="select-box"
+                  >
+                    <input
+                      defaultChecked={false}
+                      onClick={[Function]}
+                      type="checkbox"
+                    />
+                  </div>
+                  <img
+                    className="treeNode-icon"
+                    src="./public/img/wdb.png"
+                  />
+                  <span>
+                    Cesium_Milk_Truck_2
+                  </span>
+                </li>
+              </ul>
+              <ul
+                className="wonder-tree-node"
+              >
+                <li>
+                  <div
+                    className="item-triangle"
+                  />
+                  <div
+                    className="select-box"
+                  >
+                    <input
+                      defaultChecked={false}
+                      onClick={[Function]}
+                      type="checkbox"
+                    />
+                  </div>
+                  <img
+                    className="treeNode-icon"
+                    src="./public/img/wdb.png"
+                  />
+                  <span>
+                    Wheels
+                  </span>
+                </li>
+              </ul>
+              <ul
+                className="wonder-tree-node"
+              >
+                <li>
+                  <div
+                    className="item-triangle"
+                  />
+                  <div
+                    className="select-box"
+                  >
+                    <input
+                      defaultChecked={false}
+                      onClick={[Function]}
+                      type="checkbox"
+                    />
+                  </div>
+                  <img
+                    className="treeNode-icon"
+                    src="./public/img/wdb.png"
+                  />
+                  <span>
+                    Wheels
+                  </span>
+                </li>
+              </ul>
+            </ul>
+            <ul
+              className="wonder-tree-node"
+            >
+              <li>
+                <div
+                  className="item-triangle"
+                >
+                  <img
+                    src="./public/img/down.png"
+                  />
+                </div>
+                <div
+                  className="select-box"
+                >
+                  <input
+                    defaultChecked={false}
+                    onClick={[Function]}
+                    type="checkbox"
+                  />
+                </div>
+                <img
+                  className="treeNode-icon"
+                  src="./public/img/package.png"
+                />
+                <span>
+                  Materials
+                </span>
+              </li>
+              <ul
+                className="wonder-tree-node"
+              >
+                <li>
+                  <div
+                    className="item-triangle"
+                  />
+                  <div
+                    className="select-box"
+                  >
+                    <input
+                      defaultChecked={false}
+                      onClick={[Function]}
+                      type="checkbox"
+                    />
+                  </div>
+                  <img
+                    className="treeNode-icon"
+                    src="data:image/png;base64 for img-canvas"
+                  />
+                  <span>
+                    truck
+                  </span>
+                </li>
+              </ul>
+              <ul
+                className="wonder-tree-node"
+              >
+                <li>
+                  <div
+                    className="item-triangle"
+                  />
+                  <div
+                    className="select-box"
+                  >
+                    <input
+                      defaultChecked={false}
+                      onClick={[Function]}
+                      type="checkbox"
+                    />
+                  </div>
+                  <img
+                    className="treeNode-icon"
+                    src="data:image/png;base64 for img-canvas"
+                  />
+                  <span>
+                    glass
+                  </span>
+                </li>
+              </ul>
+              <ul
+                className="wonder-tree-node"
+              >
+                <li>
+                  <div
+                    className="item-triangle"
+                  />
+                  <div
+                    className="select-box"
+                  >
+                    <input
+                      defaultChecked={false}
+                      onClick={[Function]}
+                      type="checkbox"
+                    />
+                  </div>
+                  <img
+                    className="treeNode-icon"
+                    src="data:image/png;base64 for img-canvas"
+                  />
+                  <span>
+                    window_trim
+                  </span>
+                </li>
+              </ul>
+              <ul
+                className="wonder-tree-node"
+              >
+                <li>
+                  <div
+                    className="item-triangle"
+                  />
+                  <div
+                    className="select-box"
+                  >
+                    <input
+                      defaultChecked={false}
+                      onClick={[Function]}
+                      type="checkbox"
+                    />
+                  </div>
+                  <img
+                    className="treeNode-icon"
+                    src="data:image/png;base64 for img-canvas"
+                  />
+                  <span>
+                    wheels
+                  </span>
+                </li>
+              </ul>
+            </ul>
+            <ul
+              className="wonder-tree-node"
+            >
+              <li>
+                <div
+                  className="item-triangle"
+                >
+                  <img
+                    src="./public/img/down.png"
+                  />
+                </div>
+                <div
+                  className="select-box"
+                >
+                  <input
+                    defaultChecked={false}
+                    onClick={[Function]}
+                    type="checkbox"
+                  />
+                </div>
+                <img
+                  className="treeNode-icon"
+                  src="./public/img/package.png"
+                />
+                <span>
+                  Textures
+                </span>
+              </li>
+              <ul
+                className="wonder-tree-node"
+              >
+                <li>
+                  <div
+                    className="item-triangle"
+                  />
+                  <div
+                    className="select-box"
+                  >
+                    <input
+                      defaultChecked={false}
+                      onClick={[Function]}
+                      type="checkbox"
+                    />
+                  </div>
+                  <img
+                    className="treeNode-icon"
+                    src="./public/null.png"
+                  />
+                  <span>
+                    texture_0
+                  </span>
+                </li>
+              </ul>
+              <ul
+                className="wonder-tree-node"
+              >
+                <li>
+                  <div
+                    className="item-triangle"
+                  />
+                  <div
+                    className="select-box"
+                  >
+                    <input
+                      defaultChecked={false}
+                      onClick={[Function]}
+                      type="checkbox"
+                    />
+                  </div>
+                  <img
+                    className="treeNode-icon"
+                    src="./public/null.png"
+                  />
+                  <span>
+                    texture_1
+                  </span>
+                </li>
+              </ul>
+            </ul>
+          </ul>
+        </ul>
+      </article>
+    </div>
+    <div
+      className="modal-item-footer"
+    >
+      <button
+        className="footer-submit"
+        onClick={[Function]}
+      >
+        OK
+      </button>
+    </div>
+  </div>
+</article>
+`;
+
+exports[`Header AssetBundle test generate single rab test buildSelectTreeForGenerateSingleRAB test2 1`] = `
+<article
+  className="wonder-modal"
+>
+  <div
+    className="modal-item"
+  >
+    <div
+      className="modal-item-header"
+    >
+      Generate Single RAB
+      <img
+        onClick={[Function]}
+        src="./public/img/close.png"
+      />
+    </div>
+    <div
+      className="modal-item-content"
+    >
+      <article
+        className="wonder-selectTree"
+      >
+        <ul
+          className="wonder-tree-node"
+        >
+          <li>
+            <div
+              className="item-triangle"
+            >
+              <img
+                src="./public/img/down.png"
+              />
+            </div>
+            <div
+              className="select-box"
+            >
+              <input
+                defaultChecked={false}
+                onClick={[Function]}
+                type="checkbox"
+              />
+            </div>
+            <img
+              className="treeNode-icon"
+              src="./public/img/package.png"
+            />
+            <span>
+              Assets
+            </span>
+          </li>
+          <ul
+            className="wonder-tree-node"
+          >
+            <li>
+              <div
+                className="item-triangle"
+              />
+              <div
+                className="select-box"
+              >
+                <input
+                  defaultChecked={false}
+                  onClick={[Function]}
+                  type="checkbox"
+                />
+              </div>
+              <img
+                className="treeNode-icon"
+                src="./public/img/package.png"
+              />
+              <span>
+                New Folder
+              </span>
+            </li>
+          </ul>
+          <ul
+            className="wonder-tree-node"
+          >
+            <li>
+              <div
+                className="item-triangle"
+              />
+              <div
+                className="select-box"
+              >
+                <input
+                  defaultChecked={false}
+                  onClick={[Function]}
+                  type="checkbox"
+                />
+              </div>
+              <img
+                className="treeNode-icon"
+                src="./public/img/scriptEventFunction.png"
+              />
+              <span>
+                New Script EventFunction
+              </span>
+            </li>
+          </ul>
+        </ul>
+      </article>
+    </div>
+    <div
+      className="modal-item-footer"
+    >
+      <button
+        className="footer-submit"
+        onClick={[Function]}
+      >
+        OK
+      </button>
+    </div>
+  </div>
+</article>
+`;
diff --git a/test/unit/composable_component/header/tool/HeaderAssetBundleTool.re b/test/unit/composable_component/header/tool/HeaderAssetBundleTool.re
new file mode 100644
index 000000000..1d7864f5b
--- /dev/null
+++ b/test/unit/composable_component/header/tool/HeaderAssetBundleTool.re
@@ -0,0 +1,15 @@
+let buildSelectTreeForGenerateSingleRAB = HeaderAssetBundle.Method.buildSelectTreeForGenerateSingleRAB;
+
+let buildGenerateSingleRABModal =
+    (
+      ~selectTree,
+      ~send,
+      ~languageType=LanguageEditorService.unsafeGetType
+                    |> StateLogicService.getEditorState,
+      (),
+    ) =>
+  HeaderAssetBundle.Method.renderGenerateSingleRABModal(
+    languageType,
+    selectTree,
+    send,
+  );
\ No newline at end of file