Merge branch 'improve/improve_left_bar' into develop

apps/builder/src/page/App/Module/DataWorkspace/components/ComponentSpaceTree/index.tsx

@@ -14,6 +14,7 @@ import {
  getCurrentPageRightWidgetTree,
 } from "@/redux/currentApp/executionTree/executionSelector"
 import { executionActions } from "@/redux/currentApp/executionTree/executionSlice"
+import { autoChangeContainersIndexWhenClick } from "@/utils/componentNode/search"
 import { FocusManager } from "@/utils/focusManager"
 import { BaseDataItem } from "../BaseDataItem"
 
@@ -29,14 +30,7 @@ export const ComponentSpaceTree: FC = () => {
  const modalSectionTree = useSelector(getCurrentPageModalWidgetTree)
  const selectedComponent = useSelector(getSelectedComponentDisplayNames)
 
- const baseClickHandler = useCallback(
- (displayName: string) => {
- dispatch(configActions.updateSelectedComponent([displayName]))
- },
- [dispatch],
- )
-
- const handleClickOnModalSection = useCallback(
+ const handleClick = useCallback(
  (displayName: string, type: string) => {
  if (!type.endsWith("_WIDGET")) return
  if (type === "MODAL_WIDGET") {
@@ -47,49 +41,16 @@ export const ComponentSpaceTree: FC = () => {
  }),
  )
  }
- baseClickHandler(displayName)
- },
- [baseClickHandler, dispatch],
- )
-
- const handleClickOnHeaderSection = useCallback(
- (displayName: string, type: string) => {
- if (!type.endsWith("_WIDGET")) return
- baseClickHandler(displayName)
- },
- [baseClickHandler],
- )
-
- const handleClickOnBodySection = useCallback(
- (displayName: string, type: string) => {
- if (!type.endsWith("_WIDGET")) return
- baseClickHandler(displayName)
- },
- [baseClickHandler],
- )
-
- const handleClickOnLeftSection = useCallback(
- (displayName: string, type: string) => {
- if (!type.endsWith("_WIDGET")) return
- baseClickHandler(displayName)
- },
- [baseClickHandler],
- )
-
- const handleClickOnRightSection = useCallback(
- (displayName: string, type: string) => {
- if (!type.endsWith("_WIDGET")) return
- baseClickHandler(displayName)
- },
- [baseClickHandler],
- )
-
- const handleClickOnFooterSection = useCallback(
- (displayName: string, type: string) => {
- if (!type.endsWith("_WIDGET")) return
- baseClickHandler(displayName)
+ dispatch(configActions.updateSelectedComponent([displayName]))
+ autoChangeContainersIndexWhenClick(displayName)
+ setTimeout(() => {
+ const dom = document.querySelector(
+ `[data-displayname="${displayName}"]`,
+ )
+ dom?.scrollIntoView({ behavior: "smooth" })
+ }, 160)
  },
- [baseClickHandler],
+ [dispatch],
  )
 
  return (
@@ -115,7 +76,7 @@ export const ComponentSpaceTree: FC = () => {
  type={tree.$widgetType as string}
  canExpand
  haveMoreAction
- onClick={handleClickOnModalSection}
+ onClick={handleClick}
  selectedDisplayNames={selectedComponent}
  />
  ))}
@@ -133,7 +94,7 @@ export const ComponentSpaceTree: FC = () => {
  type={tree.$widgetType as string}
  canExpand={tree.$childrenNode.length > 0}
  haveMoreAction
- onClick={handleClickOnBodySection}
+ onClick={handleClick}
  selectedDisplayNames={selectedComponent}
  />
  ))}
@@ -151,7 +112,7 @@ export const ComponentSpaceTree: FC = () => {
  dataType="widget"
  type={tree.$widgetType as string}
  canExpand={tree.$childrenNode.length > 0}
- onClick={handleClickOnHeaderSection}
+ onClick={handleClick}
  selectedDisplayNames={selectedComponent}
  />
  ))}
@@ -172,7 +133,7 @@ export const ComponentSpaceTree: FC = () => {
  type={tree.$widgetType as string}
  canExpand={tree.$childrenNode.length > 0}
  haveMoreAction
- onClick={handleClickOnLeftSection}
+ onClick={handleClick}
  selectedDisplayNames={selectedComponent}
  />
  ))}
@@ -193,7 +154,7 @@ export const ComponentSpaceTree: FC = () => {
  type={tree.$widgetType as string}
  canExpand={tree.$childrenNode.length > 0}
  haveMoreAction
- onClick={handleClickOnRightSection}
+ onClick={handleClick}
  selectedDisplayNames={selectedComponent}
  />
  ))}
@@ -214,7 +175,7 @@ export const ComponentSpaceTree: FC = () => {
  type={tree.$widgetType as string}
  canExpand={tree.$childrenNode.length > 0}
  haveMoreAction
- onClick={handleClickOnFooterSection}
+ onClick={handleClick}
  selectedDisplayNames={selectedComponent}
  />
  ))}

apps/builder/src/page/App/Module/DataWorkspace/components/WorkSpaceTreeItem/WorkSpaceTreeNode.tsx

@@ -45,7 +45,7 @@ export const WorkSpaceTreeNode: FC<WorkSpaceTreeNodeProps> = memo(
  {renderJsonValue(value)}
  </label>
  </div>
- <IconHotSpot onClick={handleClickCopy}>
+ <IconHotSpot onClick={handleClickCopy} id="copy-icon-hot-spot">
  <CopyIcon />
  </IconHotSpot>
  </div>

apps/builder/src/page/App/Module/DataWorkspace/components/WorkSpaceTreeItem/index.tsx

@@ -65,6 +65,7 @@ export const WorkSpaceTreeItem: FC<WorkSpaceTreeItemProps> = memo(
  `{{${convertPathToString(toPath(`${parentKey}.${title}`))}}}`,
  )
  }}
+ id="copy-icon-hot-spot"
  >
  <CopyIcon />
  </IconHotSpot>

apps/builder/src/page/App/Module/DataWorkspace/components/WorkSpaceTreeItem/style.ts

@@ -121,6 +121,12 @@ export const applyObjectOrArrayContainerStyle = (level: number) => css`
  .global-state-edit-icon-hot-spot {
  visibility: visible;
  }
+ #copy-icon-hot-spot {
+ visibility: visible;
+ }
+ }
+ #copy-icon-hot-spot {
+ visibility: hidden;
  }
 `
 
@@ -139,10 +145,16 @@ export const applySimpleItemContainerStyle = (
  .global-state-edit-icon-hot-spot {
  visibility: visible;
  }
+ #copy-icon-hot-spot {
+ visibility: visible;
+ }
  }
  :last-child {
  padding-bottom: 4px;
  }
+ #copy-icon-hot-spot {
+ visibility: hidden;
+ }
 `
 
 export const labelNameAndValueContainerStyle = css`

apps/builder/src/redux/config/configListener.ts

@@ -1,7 +1,31 @@
 import { Unsubscribe } from "@reduxjs/toolkit"
 import { configActions } from "@/redux/config/configSlice"
-import { handleUpdateSelectedComponentExecution } from "@/redux/currentApp/collaborators/collaboratorsHandlers"
 import store, { AppListenerEffectAPI, AppStartListening } from "@/store"
+import { searchParent } from "@/utils/componentNode/search"
+import { updateCurrentAllComponentsAttachedUsers } from "../currentApp/collaborators/collaboratorsHandlers"
+import { getExecutionWidgetLayoutInfo } from "../currentApp/executionTree/executionSelector"
+
+export const handleUpdateSelectedComponentExecution = (
+ action: ReturnType<typeof configActions.updateSelectedComponent>,
+ listenerApi: AppListenerEffectAPI,
+) => {
+ const currentComponentsAttachedUsers =
+ listenerApi.getState().currentApp.collaborators.components
+ const widgetLayoutInfo = getExecutionWidgetLayoutInfo(listenerApi.getState())
+
+ const needExpandDisplayName = action.payload
+ .map((displayName) => {
+ return searchParent(displayName, widgetLayoutInfo)
+ })
+ .flat()
+ listenerApi.dispatch(
+ configActions.addExpandedWidgetReducer(needExpandDisplayName),
+ )
+ updateCurrentAllComponentsAttachedUsers(
+ action.payload,
+ currentComponentsAttachedUsers,
+ )
+}
 
 async function handleChangeSelectedActionExecution(
  action: ReturnType<typeof configActions.changeSelectedAction>,

apps/builder/src/redux/currentApp/collaborators/collaboratorsHandlers.ts

@@ -5,7 +5,6 @@ import { configActions } from "@/redux/config/configSlice"
 import { CollaboratorsInfo } from "@/redux/currentApp/collaborators/collaboratorsState"
 import { componentsActions } from "@/redux/currentApp/components/componentsSlice"
 import store, { AppListenerEffectAPI } from "@/store"
-import { getExecutionWidgetLayoutInfo } from "../executionTree/executionSelector"
 
 export const getDisattachedComponents = (
  currentAttached: Record<string, CollaboratorsInfo[]>,
@@ -71,36 +70,6 @@ export const updateCurrentAllComponentsAttachedUsers = (
  }
 }
 
-export const handleUpdateSelectedComponentExecution = (
- action: ReturnType<typeof configActions.updateSelectedComponent>,
- listenerApi: AppListenerEffectAPI,
-) => {
- const currentComponentsAttachedUsers =
- listenerApi.getState().currentApp.collaborators.components
- const widgetLayoutInfo = getExecutionWidgetLayoutInfo(listenerApi.getState())
-
- function searchParent(displayName: string): string[] {
- const parent = widgetLayoutInfo[displayName]?.parentNode
- if (parent) {
- return [parent, ...searchParent(parent)]
- }
- return []
- }
-
- const needExpandDisplayName = action.payload
- .map((displayName) => {
- return searchParent(displayName)
- })
- .flat()
- listenerApi.dispatch(
- configActions.addExpandedWidgetReducer(needExpandDisplayName),
- )
- updateCurrentAllComponentsAttachedUsers(
- action.payload,
- currentComponentsAttachedUsers,
- )
-}
-
 export const handleClearSelectedComponentExecution = (
  action: ReturnType<typeof componentsActions.deleteComponentNodeReducer>,
  listenerApi: AppListenerEffectAPI,
@@ -117,11 +86,6 @@ export const handleClearSelectedComponentExecution = (
 
 export const AVATAR_WIDTH = 14
 export const AVATAR_GAP = 4
-export const MOVE_BAR_SVG_WIDTH = 12
-export const AVATAR_LIST_MARGIN = 8
-
-// two avatar + one gap + one svg
-export const MIN_MOVE_BAR_WIDTH = 48
 
 export const MIN_DISABLE_MARGIN_WIDTH = 34
 

apps/builder/src/utils/componentNode/search.ts

@@ -8,6 +8,8 @@ import {
  getExecutionResult,
  getExecutionWidgetLayoutInfo,
 } from "@/redux/currentApp/executionTree/executionSelector"
+import { executionActions } from "@/redux/currentApp/executionTree/executionSlice"
+import { WidgetLayoutInfo } from "@/redux/currentApp/executionTree/executionState"
 import store from "@/store"
 
 export const searchForefatherSectionNodeDisplayName = (
@@ -74,3 +76,55 @@ export const getCurrentSectionColumnNumberByChildDisplayName = (
  }
  }
 }
+
+export function searchParent(
+ displayName: string,
+ widgetLayoutInfo: Record<string, WidgetLayoutInfo>,
+): string[] {
+ const parent = widgetLayoutInfo[displayName]?.parentNode
+ if (parent) {
+ return [parent, ...searchParent(parent, widgetLayoutInfo)]
+ }
+ return []
+}
+
+export const autoChangeContainersIndexWhenClick = (
+ currentDisplayName: string,
+) => {
+ const rootState = store.getState()
+ const widgetsLayoutInfo = getExecutionWidgetLayoutInfo(rootState)
+ const canvasForeFatherDisplayNames = searchParent(
+ currentDisplayName,
+ widgetsLayoutInfo,
+ ).filter(
+ (displayName) => widgetsLayoutInfo[displayName]?.widgetType === "CANVAS",
+ )
+ const containerDisplayNames = canvasForeFatherDisplayNames
+ .map((displayName) => ({
+ displayName,
+ parentDisplayName: widgetsLayoutInfo[displayName]?.parentNode,
+ }))
+ .filter(
+ ({ parentDisplayName }) =>
+ widgetsLayoutInfo[parentDisplayName]?.widgetType === "CONTAINER_WIDGET",
+ )
+ .map(({ displayName, parentDisplayName }) => {
+ const childrenNode =
+ widgetsLayoutInfo[parentDisplayName]?.childrenNode ?? []
+ const currentIndex = childrenNode.indexOf(displayName)
+ return {
+ displayName: parentDisplayName,
+ value: {
+ currentIndex,
+ },
+ }
+ })
+
+ store.dispatch(
+ executionActions.updateExecutionByMultiDisplayNameReducer(
+ containerDisplayNames,
+ ),
+ )
+
+ return canvasForeFatherDisplayNames
+}