feat(platform): element assemble: Selected UI Controls's name should …

…be label update ui control protocol's label to displayName; update ui;
Meta3D-Technology · Dec 21, 2023 · 4d4f99f · 4d4f99f
1 parent cd5978d
commit 4d4f99f
Show file tree

Hide file tree

Showing 22 changed files with 499 additions and 50 deletions.
diff --git a/doc/1.0.0-beta.3.org b/doc/1.0.0-beta.3.org
@@ -38,19 +38,22 @@ TODO perf: only
 -1?
 
 
-* TODO feat: Selected UI Controls 's name should = label
+* DONE feat: Selected UI Controls 's name should = label
 
+TODO fix
 
+TODO update label to displayName
 
-* TODO fix: import action: not need empty before!
+TODO update ui
 
+TODO fix find children
 
+TODO pass bdd test
+
+
+* TODO fix: import action: not need empty before!
 
 
-* TODO solve ci sometimes fail: Actions->Install error
-* TODO make ci pass in README
-* TODO github->codecov should contain platform/assemble-space
-* TODO Github: lanaguage remove Javascript
 
 
 
@@ -132,6 +135,12 @@ TODO 延迟/预加载 monaco-editor
 
 
 
+* TODO solve ci sometimes fail: Actions->Install error
+* TODO make ci pass in README
+* TODO github->codecov should contain platform/assemble-space
+* TODO Github: lanaguage remove Javascript
+
+
 
 
 * TODO 更新logo for website, github org, production, loading

diff --git a/..._space/components/element_assemble/selected_ui_controls/components/SelectedUIControls.res b/..._space/components/element_assemble/selected_ui_controls/components/SelectedUIControls.res
@@ -18,16 +18,55 @@ module Method = {
         )
   }
 
-  let rec convertToTreeData = selectedUIControls => {
+  let _findLabel = (
+    id,
+    selectedUIControlInspectorData: ElementAssembleStoreType.selectedUIControlInspectorData,
+  ): option<string> => {
+    (
+      HierachyUtils.findSelectedUIControlData(
+        None,
+        (
+          (data: ElementAssembleStoreType.uiControlInspectorData) => data.id,
+          (data: ElementAssembleStoreType.uiControlInspectorData) => data.children,
+        ),
+        selectedUIControlInspectorData,
+        id,
+      )
+      ->Meta3dCommonlib.OptionSt.getExn
+    ).specific
+    ->Meta3dCommonlib.ArraySt.find(({name}) => name == "label")
+    ->Meta3dCommonlib.OptionSt.map(({value}) =>
+      SpecificUtils.getSpecificDataValue(value)->Obj.magic
+    )
+  }
+
+  let rec convertToTreeData = (
+    service: service,
+    selectedUIControls,
+    selectedUIControlInspectorData: ElementAssembleStoreType.selectedUIControlInspectorData,
+  ) => {
     selectedUIControls
     ->Meta3dCommonlib.ListSt.map((
       {id, protocolIconBase64, displayName, children}: ElementAssembleStoreType.uiControl,
     ): Tree.treeData => {
       {
-        title: displayName,
+        title: <Space direction=#horizontal wrap=true>
+          {service.ui.buildText(.
+            ~_type=#default,
+            ~children={
+              React.string(
+                _findLabel(
+                  id,
+                  selectedUIControlInspectorData,
+                )->Meta3dCommonlib.OptionSt.getWithDefault(displayName),
+              )
+            },
+            (),
+          )}
+        </Space>,
         key: id,
         icon: <Image preview=false src={protocolIconBase64} width=20 height=20 />,
-        children: convertToTreeData(children),
+        children: convertToTreeData(service, children, selectedUIControlInspectorData),
       }
     })
     ->Meta3dCommonlib.ListSt.toArray
@@ -37,7 +76,9 @@ module Method = {
     [
       (
         {
-          title: "root",
+          title: {
+            React.string({j`root`})
+          },
           key: getRootKey(),
           children: allTreeData,
           icon: React.null,
@@ -154,9 +195,13 @@ module Method = {
 
   let useSelector = ({apAssembleState, elementAssembleState}: AssembleSpaceStoreType.state) => {
     let {apInspectorData} = apAssembleState
-    let {selectedUIControls, parentUIControlId} = elementAssembleState
+    let {
+      selectedUIControls,
+      selectedUIControlInspectorData,
+      parentUIControlId,
+    } = elementAssembleState
 
-    (apInspectorData.isDebug, selectedUIControls)
+    (apInspectorData.isDebug, selectedUIControls, selectedUIControlInspectorData)
   }
 }
 
@@ -179,7 +224,9 @@ let make = (
   let (autoExpandParent, setAutoExpandParent) = service.react.useState(_ => true)
   let (isShowUIControls, setIsShowUIControls) = service.react.useState(_ => false)
 
-  let (isDebug, selectedUIControls) = service.react.useSelector(. Method.useSelector)
+  let (isDebug, selectedUIControls, selectedUIControlInspectorData) = service.react.useSelector(.
+    Method.useSelector,
+  )
 
   <>
     <Space direction=#vertical size=#middle>
@@ -201,7 +248,9 @@ let make = (
       <section ref={rootTarget->Obj.magic}>
         <Tree
           showIcon=true
-          treeData={selectedUIControls->Method.convertToTreeData->Method.addRootTreeNode}
+          treeData={selectedUIControls
+          ->Method.convertToTreeData(service, _, selectedUIControlInspectorData)
+          ->Method.addRootTreeNode}
           expandedKeys
           onExpand={expandedKeysValue =>
             Method.onExpand((setExpandedKeys, setAutoExpandParent), expandedKeysValue)}

diff --git a/..._space/components/element_assemble/ui_control_Inspector/components/UIControlInspector.res b/..._space/components/element_assemble/ui_control_Inspector/components/UIControlInspector.res
@@ -372,13 +372,6 @@ module Method = {
     )
   }
 
-  let getSpecificDataValue = (specificDataValue: ElementAssembleStoreType.specificDataValue) => {
-    switch specificDataValue {
-    | SpecicFieldDataValue(value) => value
-    // | _ => None
-    }
-  }
-
   // let _getSpecificDataValueElementFieldValue = (
   //   specificDataValue: ElementAssembleStoreType.specificDataValue,
   // ) => {
@@ -400,7 +393,7 @@ module Method = {
           | #string =>
             <Input
               key={name}
-              value={getSpecificDataValue(value)->SpecificUtils.convertValueToString(type_)}
+              value={SpecificUtils.getSpecificDataValue(value)->SpecificUtils.convertValueToString(type_)}
               onChange={e => {
                 _setSpecificData(
                   dispatch,
@@ -450,17 +443,17 @@ module Method = {
               //     preview=true
               //     src={
 
-              //       getSpecificDataValue(value)->SpecificUtils.convertValueToString(type_)}
+              //       SpecificUtils.getSpecificDataValue(value)->SpecificUtils.convertValueToString(type_)}
               //     width=40
               //     height=40
               //   />
               // }}
 
-              {getSpecificDataValue(value)->Obj.magic->Meta3dCommonlib.NullableSt.isNullable
+              {SpecificUtils.getSpecificDataValue(value)->Obj.magic->Meta3dCommonlib.NullableSt.isNullable
                 ? React.null
                 : <Image
                     preview=true
-                    src={getSpecificDataValue(value)->SpecificUtils.convertValueToString(type_)}
+                    src={SpecificUtils.getSpecificDataValue(value)->SpecificUtils.convertValueToString(type_)}
                     width=40
                     height=40
                   />}
@@ -470,7 +463,7 @@ module Method = {
               ? React.null
               : <Space direction=#horizontal>
                   <Input.TextArea
-                    value={getSpecificDataValue(value)->SpecificUtils.convertValueToString(type_)}
+                    value={SpecificUtils.getSpecificDataValue(value)->SpecificUtils.convertValueToString(type_)}
                     onChange={e => {
                       ErrorUtils.swallowCatchedError(() => {
                         _setSpecificData(
@@ -499,7 +492,7 @@ module Method = {
                   value->SpecificUtils.convertStringToValue(type_)->CommonType.SpecicFieldDataValue,
                   type_,
                 ),
-              getSpecificDataValue(value)->SpecificUtils.convertValueToString(type_),
+              SpecificUtils.getSpecificDataValue(value)->SpecificUtils.convertValueToString(type_),
               ["true", "false"],
             )
           | #select => SelectUtils.buildSelectWithKeysAndWithoutEmpty(selectedValue => {
@@ -510,25 +503,25 @@ module Method = {
                 i,
                 {
                   "selected": selectedValue,
-                  "data": (getSpecificDataValue(value)->Obj.magic)["data"],
+                  "data": (SpecificUtils.getSpecificDataValue(value)->Obj.magic)["data"],
                 }
                 ->Obj.magic
                 ->CommonType.SpecicFieldDataValue,
                 type_,
               )
             }, (
-              getSpecificDataValue(value)->Obj.magic
+              SpecificUtils.getSpecificDataValue(value)->Obj.magic
             )["selected"], (
-              getSpecificDataValue(value)->Obj.magic
+              SpecificUtils.getSpecificDataValue(value)->Obj.magic
             )["data"]->Meta3dCommonlib.ArraySt.map(
               valueData => valueData["key"],
-            ), (getSpecificDataValue(value)->Obj.magic)["data"]->Meta3dCommonlib.ArraySt.map(
+            ), (SpecificUtils.getSpecificDataValue(value)->Obj.magic)["data"]->Meta3dCommonlib.ArraySt.map(
               valueData => valueData["value"],
             ))
           | #number =>
             <InputNumber
               key={name}
-              value={getSpecificDataValue(value)->Obj.magic}
+              value={SpecificUtils.getSpecificDataValue(value)->Obj.magic}
               step="0.0001"
               onChange={value => {
                 _setSpecificData(

diff --git a/...external_layer/ui/app/assemble_space/components/element_assemble/utils/CustomDomUtils.res b/...external_layer/ui/app/assemble_space/components/element_assemble/utils/CustomDomUtils.res
@@ -52,7 +52,7 @@ module Method = {
     customs
     ->Meta3dCommonlib.ListSt.map(({name}: CommonType.custom): Tree.treeData => {
       {
-        title: name,
+        title: {React.string(name)},
         key: name,
         icon: React.null,
         children: [],

diff --git a/.../external_layer/ui/app/assemble_space/components/element_assemble/utils/SpecificUtils.res b/.../external_layer/ui/app/assemble_space/components/element_assemble/utils/SpecificUtils.res
@@ -100,3 +100,10 @@ let convertStringToValue = (
     valueStr,
   )
 }
+
+let getSpecificDataValue = (specificDataValue: ElementAssembleStoreType.specificDataValue) => {
+  switch specificDataValue {
+  | SpecicFieldDataValue(value) => value
+  // | _ => None
+  }
+}
diff --git a/platform/frontend/src/external_layer/ui/app/utils/utils/externals/antd/Antd__Collapse.res b/platform/frontend/src/external_layer/ui/app/utils/utils/externals/antd/Antd__Collapse.res
@@ -10,9 +10,6 @@ external make: (
 
 module Panel = {
   @module("antd") @scope("Collapse") @react.component
-  external make: (
-    ~header: string=?,
-    ~key: string=?,
-    ~children: React.element=?,
-  ) => React.element = "Panel"
+  external make: (~header: string=?, ~key: string=?, ~children: React.element=?) => React.element =
+    "Panel"
 }
diff --git a/platform/frontend/src/external_layer/ui/app/utils/utils/externals/antd/Antd__Tree.res b/platform/frontend/src/external_layer/ui/app/utils/utils/externals/antd/Antd__Tree.res
@@ -3,7 +3,7 @@ type key = string
 type ref
 
 type rec treeData = {
-  title: string,
+  title: React.element,
   key: key,
   // icon: Js.Nullable.t<React.element>,
   icon: React.element,

diff --git a/platform/frontend/test/features/selectedUIControls.feature b/platform/frontend/test/features/selectedUIControls.feature
@@ -0,0 +1,14 @@
+Feature: SelectedUIControls
+    As a SelectedUIControls
+    I want to select ui control
+    So that I can add them to view
+
+    Background: prepare
+        Given prepare
+
+    Scenario: convert to tree data
+        Given prepare selected ui controls
+        And prepare selected ui control inspector data
+        When convert to tree data
+        Then title should show label of selected ui control inspector data first then fallback to displayName of selected ui controls
+