feat(asset-bundle): add SelectTree ui draft

pass compile

.cz-config.js

@@ -15,6 +15,7 @@ module.exports = {
   ],
 
   scopes: [
+    { name: "asset-bundle" },
     { name: "script" },
     { name: "language" },
     { name: "pwa" },

src/core/atom_component/selectTree/SelectTree.re

@@ -0,0 +1,149 @@
+open SelectTreeType;
+
+type retainedProps = {updateTypeArr: UpdateStore.updateComponentTypeArr};
+
+module Method = {
+  let _hasChildren = node =>
+    FolderNodeSelectTreeService.isFolderNode(node) ?
+      FolderNodeSelectTreeService.getChildren(node) |> Js.Array.length > 0 :
+      false;
+
+  let _isSelected = node =>
+    switch (node) {
+    | FolderNode(_, nodeData, _) => nodeData.isSelect
+    | ValueNode(_, nodeData) => nodeData.isSelect
+    };
+
+  let _toggleSelect = (event, node, (uiState, dispatchFunc)) => {
+    let checked =
+      ReactDOMRe.domElementToObj(ReactEventRe.Mouse.target(event))##checked;
+
+    let rec _toggle = (isSelect, node, uiState) =>
+      switch (node) {
+      | FolderNode(nodeId, nodeData, children) =>
+        let uiState =
+          FolderNodeSelectTreeUIService.setNodeData(
+            nodeId,
+            FolderNodeSelectTreeService.setIsSelect(isSelect, nodeData),
+            children,
+            uiState,
+          );
+
+        children
+        |> WonderCommonlib.ArrayService.reduceOneParam(
+             (. uiState, node) => _toggle(isSelect, node, uiState),
+             uiState,
+           );
+      | ValueNode(nodeId, nodeData) =>
+        ValueNodeSelectTreeUIService.setNodeData(
+          nodeId,
+          ValueNodeSelectTreeService.setIsSelect(isSelect, nodeData),
+          uiState,
+        )
+      };
+
+    let uiState =
+      switch (node) {
+      | FolderNode(_, nodeData, _) => _toggle(checked, node, uiState)
+      | ValueNode(nodeId, nodeData) =>
+        ValueNodeSelectTreeUIService.setNodeData(
+          nodeId,
+          ValueNodeSelectTreeService.setIsSelect(checked, nodeData),
+          uiState,
+        )
+      };
+
+    dispatchFunc(AppStore.ReplaceState(uiState));
+  };
+
+  let _getIcon = (node, getValueNodeIconFunc) =>
+    switch (node) {
+    | FolderNode(_, _, _) => Some("./public/img/package.png")
+    | ValueNode(_, nodeData) => getValueNodeIconFunc(nodeData.type_)
+    };
+
+  let _getNodeName = node =>
+    switch (node) {
+    | FolderNode(_, nodeData, _) => nodeData.name
+    | ValueNode(_, nodeData) => nodeData.name
+    };
+
+  let rec _build = (allNodes, getValueNodeIconFunc, (uiState, dispatchFunc)) =>
+    allNodes
+    /* |> _sortByName */
+    |> Js.Array.map(node =>
+         <ul className="wonder-tree-node">
+           <li>
+             {
+               _hasChildren(node) ?
+                 <div className="item-triangle">
+                   <img src="./public/img/down.png" />
+                 </div> :
+                 <div className="item-triangle" />
+             }
+             <div className="select-box">
+               <input
+                 type_="checkbox"
+                 defaultChecked={_isSelected(node)}
+                 onClick={
+                   e => _toggleSelect(e, node, (uiState, dispatchFunc))
+                 }
+               />
+             </div>
+             {
+               switch (_getIcon(node, getValueNodeIconFunc)) {
+               | None => ReasonReact.null
+               | Some(icon) => <img src=icon className="treeNode-icon" />
+               }
+             }
+             <span> {DomHelper.textEl(_getNodeName(node))} </span>
+           </li>
+           {
+             ReasonReact.array(
+               _build(
+                 _hasChildren(node) ?
+                   FolderNodeSelectTreeService.getChildren(node) : [||],
+                 getValueNodeIconFunc,
+                 (uiState, dispatchFunc),
+               ),
+             )
+           }
+         </ul>
+       );
+
+  let buildTreeArray = (getValueNodeIconFunc, (uiState, dispatchFunc)) =>
+    _build(
+      [|RootSelectTreeUIService.getRootNode(uiState)|],
+      getValueNodeIconFunc,
+      (uiState, dispatchFunc),
+    );
+};
+
+let component = ReasonReact.statelessComponentWithRetainedProps("SelectTree");
+
+let render = (getValueNodeIconFunc, (uiState, dispatchFunc), _self) => {
+  let editorState = StateEditorService.getState();
+
+  <article key="selectTreeRoot" className="wonder-selectTree">
+    {
+      ReasonReact.array(
+        Method.buildTreeArray(getValueNodeIconFunc, (uiState, dispatchFunc)),
+      )
+    }
+  </article>;
+};
+
+let shouldUpdate =
+    ({newSelf}: ReasonReact.oldNewSelf('a, retainedProps, 'c)) =>
+  newSelf.retainedProps.updateTypeArr
+  |> StoreUtils.shouldComponentUpdate(UpdateStore.SelectTree);
+
+let make = (~uiState, ~dispatchFunc, ~getValueNodeIconFunc, _children) => {
+  ...component,
+  retainedProps: {
+    updateTypeArr: StoreUtils.getUpdateComponentTypeArr(uiState),
+  },
+  shouldUpdate,
+  render: self =>
+    render(getValueNodeIconFunc, (uiState, dispatchFunc), self),
+};

src/core/atom_component/selectTree/store/SelectTreeStore.re

@@ -0,0 +1,12 @@
+open SelectTreeType;
+
+/* type selectTreeAction('a) =
+  | UpdateTree('a); */
+
+type selectTreeState = {tree: option(tree)};
+
+/* let selectTreeReducer =
+    (state: selectTreeState, action: selectTreeAction(tree)): selectTreeState =>
+  switch (action) {
+  | UpdateTree(tree) => {...state, tree: Some(tree)}
+  }; */

src/core/ui/store/AppStore.re

@@ -6,12 +6,15 @@ open MainEditorInspectorStore;
 
 open BottomShowComponentStore;
 
+open SelectTreeStore;
+
 type appState = {
   isInitEngine: bool,
   mapState,
   updateState,
   inspectorState,
   showComponentState,
+  selectTreeState,
 };
 
 type ReduxThunk.thunk('a) +=
@@ -23,6 +26,7 @@ type ReduxThunk.thunk(_) +=
   | InspectorAction(inspectorAction(int, bool))
   | UpdateAction(updateAction(updateComponentTypeArr))
   | ShowComponentAction(showComponentAction(bottomComponentType));
+/* | SelectTreeAction(selectTreeAction(SelectTreeType.tree)); */
 
 let state: appState = {
   isInitEngine: false,
@@ -38,6 +42,9 @@ let state: appState = {
   showComponentState: {
     currentComponentType: Project,
   },
+  selectTreeState: {
+    tree: None,
+  },
 };
 
 let appReducter = (state: appState, action) =>
@@ -61,5 +68,9 @@ let appReducter = (state: appState, action) =>
         showComponentReducer(state.showComponentState, action),
     }
   | ReplaceState(replacedState) => replacedState
+  /* | SelectTreeAction(action) => {
+       ...state,
+       selectTreeState: selectTreeReducer(state.selectTreeState, action),
+     } */
   | _ => state
   };

src/core/ui/store/UpdateStore.re

@@ -9,7 +9,8 @@ type updateComponentType =
   | Project
   | Console
   | SceneTree
-  | Controller;
+  | Controller
+  | SelectTree;
 
 type updateComponentTypeArr = array(updateComponentType);
 

src/service/record/ui/data/SelectTreeType.re

@@ -0,0 +1,19 @@
+type nodeId = int;
+
+type folderNodeData = {
+  name: string,
+  isSelect: bool,
+};
+
+type value;
+
+type valueNodeData = {
+  isSelect: bool,
+  name: string,
+  type_: string,
+  value,
+};
+
+type tree =
+  | FolderNode(nodeId, folderNodeData, array(tree))
+  | ValueNode(nodeId, valueNodeData);

src/service/record/ui/selectTree/FolderNodeSelectTreeService.re

@@ -0,0 +1,94 @@
+open SelectTreeType;
+
+let _fatalShouldBeFolderNode = () =>
+  WonderLog.Log.fatal(
+    LogUtils.buildFatalMessage(
+      ~description={j|should be folder node|j},
+      ~reason="",
+      ~solution={j||j},
+      ~params={j||j},
+    ),
+  );
+
+let buildNodeByNodeData = (~nodeId, ~nodeData, ~children) =>
+  FolderNode(nodeId, nodeData, children);
+
+/* let buildNode = (~nodeId, ~name, ~children=UIStateAssetService.build(), ()) =>
+     FolderNode(nodeId, {name: name}, children);
+
+   let getNodeData = folderNode =>
+     switch (folderNode) {
+     | FolderNode(_, nodeData, _) => nodeData
+     | _ => _fatalShouldBeFolderNode()
+     }; */
+
+let isFolderNode = node =>
+  switch (node) {
+  | FolderNode(_, _, _) => true
+  | _ => false
+  };
+
+let getChildren = folderNode =>
+  switch (folderNode) {
+  | FolderNode(_, _, children) => children
+  | _ => _fatalShouldBeFolderNode()
+  };
+
+let setIsSelect = (isSelect, nodeData): folderNodeData => {
+  ...nodeData,
+  isSelect,
+};
+
+/* let getChildrenNodes = folderNode => getChildren(folderNode); */
+
+/*
+
+ let rename = (~name, ~nodeData): folderNodeData => {...nodeData, name};
+
+ let getNodeName = ({name}: folderNodeData) => name;
+
+ let getIsShowChildren = folderNode =>
+   switch (folderNode) {
+   | FolderNode(_, _, children) =>
+     UIStateAssetService.getIsShowChildrenByState(children)
+   | _ => _fatalShouldBeFolderNode()
+   };
+
+ let clearChildren = folderNode =>
+   switch (folderNode) {
+   | FolderNode(nodeId, nodeData, children) =>
+     buildNodeByNodeData(
+       ~nodeId,
+       ~nodeData,
+       /* ~children=UIStateAssetService.build(~children=[||], ()), */
+       ~children=children |> UIStateAssetService.map(_ => [||]),
+     )
+   | _ => _fatalShouldBeFolderNode()
+   };
+
+ /*
+ let hasChildren = folderNode =>
+    folderNode |> getChildren |> UIStateAssetService.hasChildren; */
+
+ let filterChildrenById = (targetNodeId, children) =>
+   children
+   |> UIStateAssetService.filter(Js.Array.filter, child =>
+        !
+          NodeAssetService.isIdEqual(
+            NodeAssetService.getNodeId(~node=child),
+            targetNodeId,
+          )
+      );
+
+ let findChild = (folderNode, targetNode) =>
+   folderNode
+   |> getChildren
+   |> UIStateAssetService.find(Js.Array.find, childNode =>
+        NodeAssetService.isNodeEqualById(~sourceNode=childNode, ~targetNode)
+      );
+
+ let isFolderNode = node =>
+   switch (node) {
+   | FolderNode(_, _, _) => true
+   | _ => false
+   }; */

src/service/record/ui/selectTree/IterateTreeSelectTreeService.re

@@ -0,0 +1,31 @@
+open SelectTreeType;
+
+let rec cata =
+        (
+          ~tree,
+          ~valueNodeFunc=(nodeId, nodeData) =>
+                           ValueNodeSelectTreeService.buildNodeByNodeData(
+                             ~nodeId,
+                             ~nodeData,
+                           ),
+          ~folderNodeFunc=(nodeId, nodeData, children) =>
+                            FolderNodeSelectTreeService.buildNodeByNodeData(
+                              ~nodeId,
+                              ~nodeData,
+                              ~children,
+                            ),
+          (),
+        )
+        : 'r => {
+  let recurse = cata(~valueNodeFunc, ~folderNodeFunc);
+
+  switch (tree) {
+  | ValueNode(nodeId, valueNodeData) => valueNodeFunc(nodeId, valueNodeData)
+  | FolderNode(nodeId, folderNodeData, children) =>
+    folderNodeFunc(
+      nodeId,
+      folderNodeData,
+      children |> Js.Array.map(node => recurse(~tree=node, ())),
+    )
+  };
+};