From 63ffe2322ecf5ef3ea803d4829d4d6ce578bffef Mon Sep 17 00:00:00 2001 From: AruSeito Date: Mon, 30 Oct 2023 11:05:08 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20auto=20change=20&=20auto=20?= =?UTF-8?q?scroll?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ComponentSpaceTree/index.tsx | 73 +++++-------------- .../WorkSpaceTreeItem/WorkSpaceTreeNode.tsx | 2 +- .../components/WorkSpaceTreeItem/index.tsx | 1 + .../components/WorkSpaceTreeItem/style.ts | 12 +++ .../src/redux/config/configListener.ts | 26 ++++++- .../collaborators/collaboratorsHandlers.ts | 36 --------- .../builder/src/utils/componentNode/search.ts | 54 ++++++++++++++ 7 files changed, 110 insertions(+), 94 deletions(-) diff --git a/apps/builder/src/page/App/Module/DataWorkspace/components/ComponentSpaceTree/index.tsx b/apps/builder/src/page/App/Module/DataWorkspace/components/ComponentSpaceTree/index.tsx index 1023c547ec..ee8186704e 100644 --- a/apps/builder/src/page/App/Module/DataWorkspace/components/ComponentSpaceTree/index.tsx +++ b/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} /> ))} diff --git a/apps/builder/src/page/App/Module/DataWorkspace/components/WorkSpaceTreeItem/WorkSpaceTreeNode.tsx b/apps/builder/src/page/App/Module/DataWorkspace/components/WorkSpaceTreeItem/WorkSpaceTreeNode.tsx index b2752eb837..053f855ab1 100644 --- a/apps/builder/src/page/App/Module/DataWorkspace/components/WorkSpaceTreeItem/WorkSpaceTreeNode.tsx +++ b/apps/builder/src/page/App/Module/DataWorkspace/components/WorkSpaceTreeItem/WorkSpaceTreeNode.tsx @@ -45,7 +45,7 @@ export const WorkSpaceTreeNode: FC = memo( {renderJsonValue(value)} - + diff --git a/apps/builder/src/page/App/Module/DataWorkspace/components/WorkSpaceTreeItem/index.tsx b/apps/builder/src/page/App/Module/DataWorkspace/components/WorkSpaceTreeItem/index.tsx index 611f24dd76..36a7724182 100644 --- a/apps/builder/src/page/App/Module/DataWorkspace/components/WorkSpaceTreeItem/index.tsx +++ b/apps/builder/src/page/App/Module/DataWorkspace/components/WorkSpaceTreeItem/index.tsx @@ -65,6 +65,7 @@ export const WorkSpaceTreeItem: FC = memo( `{{${convertPathToString(toPath(`${parentKey}.${title}`))}}}`, ) }} + id="copy-icon-hot-spot" > diff --git a/apps/builder/src/page/App/Module/DataWorkspace/components/WorkSpaceTreeItem/style.ts b/apps/builder/src/page/App/Module/DataWorkspace/components/WorkSpaceTreeItem/style.ts index 3a6e34fb08..4b5b03550f 100644 --- a/apps/builder/src/page/App/Module/DataWorkspace/components/WorkSpaceTreeItem/style.ts +++ b/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` diff --git a/apps/builder/src/redux/config/configListener.ts b/apps/builder/src/redux/config/configListener.ts index 0adc8d1c0b..27a2c01ab3 100644 --- a/apps/builder/src/redux/config/configListener.ts +++ b/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, + 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, diff --git a/apps/builder/src/redux/currentApp/collaborators/collaboratorsHandlers.ts b/apps/builder/src/redux/currentApp/collaborators/collaboratorsHandlers.ts index 2aa58ca6b7..156b3568b7 100644 --- a/apps/builder/src/redux/currentApp/collaborators/collaboratorsHandlers.ts +++ b/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, @@ -71,36 +70,6 @@ export const updateCurrentAllComponentsAttachedUsers = ( } } -export const handleUpdateSelectedComponentExecution = ( - action: ReturnType, - 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, 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 diff --git a/apps/builder/src/utils/componentNode/search.ts b/apps/builder/src/utils/componentNode/search.ts index 78eb223e6f..a6cd2f8358 100644 --- a/apps/builder/src/utils/componentNode/search.ts +++ b/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[] { + 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 +}