From a06f30ea6c3d5ac216c03ad8ceb82c0251133ead Mon Sep 17 00:00:00 2001 From: AruSeito <41471697+AruSeito@users.noreply.github.com> Date: Thu, 1 Feb 2024 18:17:43 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E2=9A=A1=EF=B8=8F=20improve=20perf?= =?UTF-8?q?ormance?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ScaleSquare/components/WrapperContainer/index.tsx | 8 +++++--- .../utils/evaluateDynamicString/dynamicConverter.ts | 10 ++++------ 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/apps/builder/src/page/App/components/ScaleSquare/components/WrapperContainer/index.tsx b/apps/builder/src/page/App/components/ScaleSquare/components/WrapperContainer/index.tsx index 21583fe6e0..6955830527 100644 --- a/apps/builder/src/page/App/components/ScaleSquare/components/WrapperContainer/index.tsx +++ b/apps/builder/src/page/App/components/ScaleSquare/components/WrapperContainer/index.tsx @@ -97,18 +97,19 @@ const WrapperContainer: FC = (props) => { const handleOnSelection = useCallback( (e: MouseEvent) => { - if (isResizing) return + e.stopPropagation() + + if (isResizing || !isEditMode) return FocusManager.switchFocus("canvas", { displayName: displayName, type: "component", clickPosition: [], }) - if (!isEditMode) return - e.stopPropagation() trackInEditor(ILLA_MIXPANEL_EVENT_TYPE.SELECT, { element: "component", parameter1: "click", }) + if ((isMAC() && e.metaKey) || e.shiftKey || (!isMAC() && e.ctrlKey)) { let currentSelectedDisplayName = klona(selectedComponents) const index = currentSelectedDisplayName.findIndex( @@ -161,6 +162,7 @@ const WrapperContainer: FC = (props) => { ) return } + dispatch(configActions.updateSelectedComponent([displayName])) }, [ diff --git a/apps/builder/src/utils/evaluateDynamicString/dynamicConverter.ts b/apps/builder/src/utils/evaluateDynamicString/dynamicConverter.ts index a9d306ccf6..7105b26986 100644 --- a/apps/builder/src/utils/evaluateDynamicString/dynamicConverter.ts +++ b/apps/builder/src/utils/evaluateDynamicString/dynamicConverter.ts @@ -2,7 +2,6 @@ import { getStringSnippets, isDynamicStringSnippet, } from "@illa-public/dynamic-string" -import { merge } from "lodash-es" import { ILLAEditorRuntimePropsCollectorInstance } from "../executionTreeHelper/runtimePropsCollector" import { evalScript } from "./codeSandbox" import { substituteDynamicBindingWithValues } from "./valueConverter" @@ -33,11 +32,10 @@ export const getDynamicValue = ( dataTree: Record, ) => { const { jsSnippets, stringSnippets } = getSnippets(dynamicString) - const calcContext = merge( - {}, - dataTree, - ILLAEditorRuntimePropsCollectorInstance.getThirdPartyPackages(), - ) + const calcContext = { + ...dataTree, + ...ILLAEditorRuntimePropsCollectorInstance.getThirdPartyPackages(), + } if (stringSnippets.length) { let context: Record = {} const values = jsSnippets.map((jsSnippet, index) => { From 728741d9f32fb9f1c8b0f368dd396a4adc39a2f0 Mon Sep 17 00:00:00 2001 From: AruSeito <41471697+AruSeito@users.noreply.github.com> Date: Thu, 1 Feb 2024 19:57:59 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E2=9A=A1=EF=B8=8F=20not=20show=20w?= =?UTF-8?q?hen=20resize?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ResizeHandler/style.ts | 24 ++--- .../InnerResizingContainer/index.tsx | 81 +++++++++++++++- .../InnerResizingContainer/interface.ts | 3 + .../InnerResizingContainer/style.ts | 53 ++++++++-- .../components/MoveBar/interface.ts | 2 - .../components/MoveBar/moveBar.tsx | 15 +-- .../ScaleSquare/components/MoveBar/style.ts | 8 +- .../components/ResizingContainer/index.tsx | 5 + .../components/ResizingContainer/interface.ts | 2 + .../components/WrapperContainer/index.tsx | 55 +---------- .../components/WrapperContainer/interface.ts | 3 - .../components/WrapperContainer/style.ts | 96 +++---------------- .../page/App/components/ScaleSquare/index.tsx | 5 +- .../ScaleSquare/modalScaleSquare.tsx | 4 - .../ScaleSquare/scaleSquareWithJSON.tsx | 16 +--- .../page/App/components/ScaleSquare/style.ts | 28 +----- .../utils/getRealShapeAndPosition.ts | 53 +++++----- 17 files changed, 197 insertions(+), 256 deletions(-) diff --git a/apps/builder/src/page/App/components/ScaleSquare/components/InnerResizingContainer/ResizeHandler/style.ts b/apps/builder/src/page/App/components/ScaleSquare/components/InnerResizingContainer/ResizeHandler/style.ts index 0d7969aa6d..2db06556ba 100644 --- a/apps/builder/src/page/App/components/ScaleSquare/components/InnerResizingContainer/ResizeHandler/style.ts +++ b/apps/builder/src/page/App/components/ScaleSquare/components/InnerResizingContainer/ResizeHandler/style.ts @@ -61,7 +61,7 @@ export function applyBarHandlerStyle( switch (barPosition) { case "t": barPositionStyle = css` - top: -2px; + top: -3px; left: 0; right: 0; height: 5px; @@ -70,7 +70,7 @@ export function applyBarHandlerStyle( break case "b": barPositionStyle = css` - bottom: -2px; + bottom: -3px; left: 0; right: 0; height: 5px; @@ -80,7 +80,7 @@ export function applyBarHandlerStyle( case "l": barPositionStyle = css` bottom: 0; - left: -2px; + left: -3px; top: 0; width: 5px; cursor: col-resize; @@ -89,7 +89,7 @@ export function applyBarHandlerStyle( case "r": barPositionStyle = css` bottom: 0; - right: -2px; + right: -3px; top: 0; cursor: col-resize; width: 5px; @@ -138,30 +138,30 @@ export function applySquarePointerStyle( switch (pointerPosition) { case "tl": positionStyle = css` - top: -2px; - left: -2px; + top: -3px; + left: -3px; cursor: nwse-resize; ` break case "tr": positionStyle = css` cursor: nesw-resize; - top: -2px; - right: -2px; + top: -3px; + right: -3px; ` break case "bl": positionStyle = css` cursor: nesw-resize; - bottom: -2px; - left: -2px; + bottom: -3px; + left: -3px; ` break case "br": positionStyle = css` cursor: nwse-resize; - bottom: -2px; - right: -2px; + bottom: -3px; + right: -3px; ` break default: diff --git a/apps/builder/src/page/App/components/ScaleSquare/components/InnerResizingContainer/index.tsx b/apps/builder/src/page/App/components/ScaleSquare/components/InnerResizingContainer/index.tsx index b0247195c8..8271f0bac3 100644 --- a/apps/builder/src/page/App/components/ScaleSquare/components/InnerResizingContainer/index.tsx +++ b/apps/builder/src/page/App/components/ScaleSquare/components/InnerResizingContainer/index.tsx @@ -1,20 +1,50 @@ +import { getCurrentUserId } from "@illa-public/user-data" import { get } from "lodash-es" import { FC, memo, useMemo } from "react" import { useSelector } from "react-redux" import { + getHoveredComponents, getIsLikeProductMode, getSelectedComponentDisplayNames, } from "@/redux/config/configSelector" -import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector" +import { + getComponentAttachUsers, + getTargetCurrentUsersExpendMe, +} from "@/redux/currentApp/collaborators/collaboratorsSelector" +import { + getExecutionError, + getExecutionResult, + getResizingComponentIDs, +} from "@/redux/currentApp/executionTree/executionSelector" +import { RootState } from "@/store" import { RESIZE_DIRECTION } from "@/widgetLibrary/interface" import { widgetBuilder } from "@/widgetLibrary/widgetBuilder" +import { MoveBar } from "../MoveBar/moveBar" import ResizeHandler from "./ResizeHandler" import { ResizingContainerProps } from "./interface" -import { resizingContainerStyle } from "./style" +import { resizingContainerStyle, resizingPlaceholderStyle } from "./style" const InnerResizingContainer: FC = (props) => { - const { children, minHeight, minWidth, width, height, displayName } = props + const { + children, + minHeight, + minWidth, + width, + height, + displayName, + widgetType, + columnNumber, + widgetTop, + } = props const executionResult = useSelector(getExecutionResult) + const currentUserID = useSelector(getCurrentUserId) + const hasError = useSelector((rootState) => { + const errors = getExecutionError(rootState) + const widgetErrors = errors[displayName] ?? {} + return Object.keys(widgetErrors).length > 0 + }) + const resizingIDs = useSelector(getResizingComponentIDs) + const isResizingCurrent = resizingIDs.includes(displayName) const currentWidgetProps = get(executionResult, displayName, {}) @@ -32,11 +62,52 @@ const InnerResizingContainer: FC = (props) => { }) }, [displayName, selectedComponents]) + const hoveredComponents = useSelector(getHoveredComponents) + const isMouseOver = + hoveredComponents[hoveredComponents.length - 1] === displayName + const isLikeProductionMode = useSelector(getIsLikeProductMode) + const attachedUsers = useSelector(getComponentAttachUsers) + const componentsAttachedUsers = useMemo(() => { + return getTargetCurrentUsersExpendMe( + attachedUsers, + displayName, + currentUserID, + ) + }, [attachedUsers, currentUserID, displayName]) return ( -
- {children} +
0, + isHover: isMouseOver, + isDragging: false, + }, + )} + > + {!isLikeProductionMode && + (isSelected || isMouseOver || componentsAttachedUsers.length > 0) && ( + + )} + {isResizingCurrent ?
: children} + {isSelected && !isLikeProductionMode && ( css` - width: ${width}px; - height: ${height}px; - min-width: ${minWidth}px; - min-height: ${minHeight}px; - position: relative; + shapeInfo: { + width: number + height: number + minWidth: number + minHeight: number + }, + borderInfo: { + isLikeProductionMode: boolean + isSelected: boolean + hasEditors: boolean + isHover: boolean + isDragging: boolean + }, +) => { + const { width, height, minHeight, minWidth } = shapeInfo + const { + isLikeProductionMode: isLikProductionMode, + isSelected, + hasEditors, + isHover, + isDragging, + } = borderInfo + return css` + width: ${width}px; + height: ${height}px; + min-width: ${minWidth}px; + min-height: ${minHeight}px; + position: relative; + ${getWrapperBorder( + isLikProductionMode, + isSelected, + hasEditors, + isHover, + isDragging, + )} + ` +} + +export const resizingPlaceholderStyle = css` + background-color: rgba(101, 74, 236, 0.1); + width: 100%; + height: 100%; ` diff --git a/apps/builder/src/page/App/components/ScaleSquare/components/MoveBar/interface.ts b/apps/builder/src/page/App/components/ScaleSquare/components/MoveBar/interface.ts index ddf37bd53e..d80f79e0b1 100644 --- a/apps/builder/src/page/App/components/ScaleSquare/components/MoveBar/interface.ts +++ b/apps/builder/src/page/App/components/ScaleSquare/components/MoveBar/interface.ts @@ -3,9 +3,7 @@ import { CollaboratorsInfo } from "@/redux/currentApp/collaborators/collaborator export interface MoveBarProps { displayName: string isError: boolean - isMouseOver: boolean maxWidth: number - selected: boolean widgetTop: number widgetType: string userList: CollaboratorsInfo[] diff --git a/apps/builder/src/page/App/components/ScaleSquare/components/MoveBar/moveBar.tsx b/apps/builder/src/page/App/components/ScaleSquare/components/MoveBar/moveBar.tsx index 751a0c4b7d..48f1f24e9d 100644 --- a/apps/builder/src/page/App/components/ScaleSquare/components/MoveBar/moveBar.tsx +++ b/apps/builder/src/page/App/components/ScaleSquare/components/MoveBar/moveBar.tsx @@ -67,16 +67,8 @@ export const WidgetDoc: FC = (props) => { } export const MoveBar: FC = (props) => { - const { - displayName, - isError, - maxWidth, - selected, - widgetTop, - widgetType, - userList, - isMouseOver, - } = props + const { displayName, isError, maxWidth, widgetTop, widgetType, userList } = + props const [currentState, setCurrentState] = useState("right") const [containerRef, bounds] = useMeasure() @@ -119,11 +111,8 @@ export const MoveBar: FC = (props) => { maxWidth, minWidth, isError, - selected, isLikeProductionMode, topPosition, - !!userList.length, - isMouseOver, )} id="moveBar" ref={containerRef} diff --git a/apps/builder/src/page/App/components/ScaleSquare/components/MoveBar/style.ts b/apps/builder/src/page/App/components/ScaleSquare/components/MoveBar/style.ts index ce10effb86..5dc8accee6 100644 --- a/apps/builder/src/page/App/components/ScaleSquare/components/MoveBar/style.ts +++ b/apps/builder/src/page/App/components/ScaleSquare/components/MoveBar/style.ts @@ -10,11 +10,8 @@ export const applyMoveBarWrapperStyle = ( maxWidth: number, minWidth: number, isError: boolean, - selected: boolean, isLikeProductionMode: boolean, topPosition: number, - hasEditors: boolean, - isMouseHover: boolean, ) => { let borderRadiusStyle = css` border-radius: 4px 4px 0 0; @@ -37,10 +34,7 @@ export const applyMoveBarWrapperStyle = ( color: #fff; max-width: ${maxWidth}px; min-width: ${minWidth}px; - visibility: ${!isLikeProductionMode && - (selected || hasEditors || isMouseHover) - ? "visible" - : "hidden"}; + visibility: ${!isLikeProductionMode ? "visible" : "hidden"}; z-index: 100; cursor: move; ` diff --git a/apps/builder/src/page/App/components/ScaleSquare/components/ResizingContainer/index.tsx b/apps/builder/src/page/App/components/ScaleSquare/components/ResizingContainer/index.tsx index d74a3ea7d5..1728103b08 100644 --- a/apps/builder/src/page/App/components/ScaleSquare/components/ResizingContainer/index.tsx +++ b/apps/builder/src/page/App/components/ScaleSquare/components/ResizingContainer/index.tsx @@ -27,6 +27,8 @@ export const ResizingContainer: FC = (props) => { widgetTop, widgetLeft, widgetWidth, + widgetType, + columnNumber, } = props const firstDragShadow = useSelector(getFirstDragShadowInfo) @@ -64,6 +66,9 @@ export const ResizingContainer: FC = (props) => { (currentWidgetLayoutInfo?.layoutInfo.minH ?? 3) * UNIT_HEIGHT } displayName={displayName} + widgetType={widgetType} + columnNumber={columnNumber} + widgetTop={widgetTop} > <> {children} diff --git a/apps/builder/src/page/App/components/ScaleSquare/components/ResizingContainer/interface.ts b/apps/builder/src/page/App/components/ScaleSquare/components/ResizingContainer/interface.ts index 96d1dc6290..66471295d4 100644 --- a/apps/builder/src/page/App/components/ScaleSquare/components/ResizingContainer/interface.ts +++ b/apps/builder/src/page/App/components/ScaleSquare/components/ResizingContainer/interface.ts @@ -9,4 +9,6 @@ export interface ResizingContainerProps { widgetWidth: number widgetLeft: number widgetTop: number + widgetType: string + columnNumber: number } diff --git a/apps/builder/src/page/App/components/ScaleSquare/components/WrapperContainer/index.tsx b/apps/builder/src/page/App/components/ScaleSquare/components/WrapperContainer/index.tsx index 6955830527..c113de23df 100644 --- a/apps/builder/src/page/App/components/ScaleSquare/components/WrapperContainer/index.tsx +++ b/apps/builder/src/page/App/components/ScaleSquare/components/WrapperContainer/index.tsx @@ -1,5 +1,4 @@ import { ILLA_MIXPANEL_EVENT_TYPE } from "@illa-public/mixpanel-utils" -import { getCurrentUserId } from "@illa-public/user-data" import { klona } from "klona/json" import { get } from "lodash-es" import { FC, MouseEvent, memo, useCallback, useContext, useMemo } from "react" @@ -8,17 +7,10 @@ import { useDispatch, useSelector } from "react-redux" import { DropList, DropListItem, Dropdown } from "@illa-design/react" import { useMouseHover } from "@/page/App/components/ScaleSquare/utils/useMouseHover" import { - getHoveredComponents, getIsILLAEditMode, - getIsLikeProductMode, getSelectedComponentDisplayNames, - isShowDot, } from "@/redux/config/configSelector" import { configActions } from "@/redux/config/configSlice" -import { - getComponentAttachUsers, - getTargetCurrentUsersExpendMe, -} from "@/redux/currentApp/collaborators/collaboratorsSelector" import { getComponentDisplayNameMapDepth } from "@/redux/currentApp/components/componentsSelector" import { getExecutionError, @@ -31,7 +23,6 @@ import { FocusManager } from "@/utils/focusManager" import { trackInEditor } from "@/utils/mixpanelHelper" import { ShortCutContext } from "@/utils/shortcut/shortcutProvider" import { isMAC } from "@/utils/userAgent" -import { MoveBar } from "../MoveBar/moveBar" import { WrapperContainerProps } from "./interface" import { applyWrapperPendingStyle, hoverHotSpotStyle } from "./style" @@ -40,34 +31,15 @@ const WrapperContainer: FC = (props) => { displayName, parentNodeDisplayName, widgetHeight, - widgetWidth, widgetType, - widgetTop, children, - columnNumber, } = props const { handleMouseEnter, handleMouseLeave } = useMouseHover() - const hoveredComponents = useSelector(getHoveredComponents) - const isLikeProductionMode = useSelector(getIsLikeProductMode) - const canShowDot = useSelector(isShowDot) const executionResult = useSelector(getExecutionResult) const { t } = useTranslation() const shortcut = useContext(ShortCutContext) const widgetExecutionLayoutInfo = useSelector(getExecutionWidgetLayoutInfo) - const isMouseOver = - hoveredComponents[hoveredComponents.length - 1] === displayName - - const currentUserID = useSelector(getCurrentUserId) - const componentsAttachedUsers = useSelector(getComponentAttachUsers) - - const filteredComponentAttachedUserList = useMemo(() => { - return getTargetCurrentUsersExpendMe( - componentsAttachedUsers, - displayName, - currentUserID, - ) - }, [componentsAttachedUsers, currentUserID, displayName]) const dispatch = useDispatch() const displayNameMapDepth = useSelector(getComponentDisplayNameMapDepth) const selectedComponents = useSelector(getSelectedComponentDisplayNames) @@ -75,8 +47,6 @@ const WrapperContainer: FC = (props) => { const isEditMode = useSelector(getIsILLAEditMode) const errors = useSelector(getExecutionError) - const hasEditors = !!filteredComponentAttachedUserList.length - const isSelected = useMemo(() => { return selectedComponents.some((currentDisplayName) => { return displayName === currentDisplayName @@ -235,28 +205,13 @@ const WrapperContainer: FC = (props) => { onContextMenu={handleContextMenu} >
- {children}
diff --git a/apps/builder/src/page/App/components/ScaleSquare/components/WrapperContainer/interface.ts b/apps/builder/src/page/App/components/ScaleSquare/components/WrapperContainer/interface.ts index e4fd027b2c..05259e7012 100644 --- a/apps/builder/src/page/App/components/ScaleSquare/components/WrapperContainer/interface.ts +++ b/apps/builder/src/page/App/components/ScaleSquare/components/WrapperContainer/interface.ts @@ -4,9 +4,6 @@ export interface WrapperContainerProps { displayName: string parentNodeDisplayName: string widgetHeight: number - widgetWidth: number widgetType: string - widgetTop: number children: ReactNode - columnNumber: number } diff --git a/apps/builder/src/page/App/components/ScaleSquare/components/WrapperContainer/style.ts b/apps/builder/src/page/App/components/ScaleSquare/components/WrapperContainer/style.ts index ee239147db..597f71ec06 100644 --- a/apps/builder/src/page/App/components/ScaleSquare/components/WrapperContainer/style.ts +++ b/apps/builder/src/page/App/components/ScaleSquare/components/WrapperContainer/style.ts @@ -1,98 +1,26 @@ import { css } from "@emotion/react" import { getColor } from "@illa-design/react" -import { - WIDGET_PADDING, - WIDGET_SCALE_SQUARE_BORDER_WIDTH, -} from "@/page/App/components/ScaleSquare/constant/widget" +import { WIDGET_PADDING } from "@/page/App/components/ScaleSquare/constant/widget" export const hoverHotSpotStyle = css` width: 100%; height: 100%; ` -const getWrapperBorderColor = ( - isLikProductionMode: boolean, - isSelected: boolean, - hasEditors: boolean, - isHover: boolean, - canShowDot: boolean, -) => { - if (isLikProductionMode) { - return "transparent" - } - if (isSelected || hasEditors || isHover || canShowDot) { - return getColor("techPurple", "03") - } - return "transparent" -} - -const getWrapperBorderStyle = ( - hasEditors: boolean, - isSelected: boolean, - isHover: boolean, - canShowDot: boolean, -) => { - if (isSelected || isHover) { - return "solid" - } - - if (hasEditors || canShowDot) { - return "dashed" - } - - return "solid" -} - -const getWrapperBorder = ( - isLikProductionMode: boolean, - isSelected: boolean, - hasEditors: boolean, - isHover: boolean, - canShowDot: boolean, -) => { - if (isLikProductionMode) { - return css` - border: none; - ` - } - return css` - border-width: ${WIDGET_SCALE_SQUARE_BORDER_WIDTH}px; - border-style: ${getWrapperBorderStyle( - hasEditors, - isSelected, - isHover, - canShowDot, - )}; - border-color: ${getWrapperBorderColor( - isLikProductionMode, - isSelected, - hasEditors, - isHover, - canShowDot, - )}; - ` -} - -export const applyWrapperPendingStyle = ( - hasEditors: boolean, - isSelected: boolean, - hasError: boolean, - isEditor: boolean, - isLimitedModeAndOverLap: boolean = false, - isLikProductionMode: boolean, - isHover: boolean, - canShowDot: boolean, -) => css` +export const applyWrapperPendingStyle = ({ + isSelected, + hasError, + isEditor, + isLimitedModeAndOverLap = false, +}: { + isSelected: boolean + hasError: boolean + isEditor: boolean + isLimitedModeAndOverLap: boolean +}) => css` width: 100%; height: 100%; padding: ${WIDGET_PADDING}px; - ${getWrapperBorder( - isLikProductionMode, - isSelected, - hasEditors, - isHover, - canShowDot, - )}; background-color: ${isEditor && hasError && !isSelected ? getColor("red", "08") : "transparent"}; diff --git a/apps/builder/src/page/App/components/ScaleSquare/index.tsx b/apps/builder/src/page/App/components/ScaleSquare/index.tsx index 45753d2f60..d9ddb2de8f 100644 --- a/apps/builder/src/page/App/components/ScaleSquare/index.tsx +++ b/apps/builder/src/page/App/components/ScaleSquare/index.tsx @@ -44,6 +44,8 @@ const ScaleSquare: FC = (props) => { widgetTop={canDrag ? top : 0} widgetLeft={canDrag ? left : 0} parentNodeDisplayName={parentNodeDisplayName} + widgetType={widgetType} + columnNumber={columnNumber} > = (props) => { displayName={displayName} parentNodeDisplayName={parentNodeDisplayName} widgetHeight={height} - widgetWidth={width} widgetType={widgetType} - widgetTop={top} - columnNumber={columnNumber} > = (props) => { displayName={displayName} parentNodeDisplayName={parentNodeDisplayName} widgetHeight={height} - widgetWidth={width} widgetType={widgetType} - widgetTop={MOVE_BAR_HEIGHT} - columnNumber={columnNumber} > { @@ -31,19 +31,7 @@ const ScaleSquareWithJSON = (props: ScaleSquarePropsWithJSON) => { minWidth={DEFAULT_MIN_COLUMN * unitW} minHeight={componentNode.minH * UNIT_HEIGHT} > -
+
css` +export const jsonWrapperPendingStyle = css` width: 100%; height: 100%; padding: 2px; - ${getWrapperBorder( - isLikProductionMode, - isSelected, - hasEditors, - isHover, - isDragging, - )}; - background-color: ${isEditor && hasError && !isSelected - ? globalColor(`--${illaPrefix}-red-08`) - : "transparent"}; - ${isLimitedModeAndOverLap && isSelected - ? `border-bottom:unset !important` - : ""} - ${isEditor && "cursor: move"} + background-color: transparent; ` export const applyDashedLineStyle = ( diff --git a/apps/builder/src/page/App/components/ScaleSquare/utils/getRealShapeAndPosition.ts b/apps/builder/src/page/App/components/ScaleSquare/utils/getRealShapeAndPosition.ts index 378d7b4678..2ccd203b49 100644 --- a/apps/builder/src/page/App/components/ScaleSquare/utils/getRealShapeAndPosition.ts +++ b/apps/builder/src/page/App/components/ScaleSquare/utils/getRealShapeAndPosition.ts @@ -1,5 +1,6 @@ import { ComponentTreeNode } from "@illa-public/public-types" import { get } from "lodash-es" +import { useMemo } from "react" import { useSelector } from "react-redux" import { UNIT_HEIGHT } from "@/page/App/components/DotPanel/constant/canvas" import { getExecutionWidgetLayoutInfo } from "@/redux/currentApp/executionTree/executionSelector" @@ -50,31 +51,35 @@ export const useGetRealShapeAndPosition = ( displayNamePrefix?: string, ) => { const layoutInfos = useSelector(getExecutionWidgetLayoutInfo) - let realDisplayName = displayName - if (displayNamePrefix) { - realDisplayName = realDisplayName.replace(displayNamePrefix, "") - } - const widgetLayoutInfo = get(layoutInfos, realDisplayName, undefined) - if (!widgetLayoutInfo) { + + const result = useMemo(() => { + let realDisplayName = displayName + if (displayNamePrefix) { + realDisplayName = realDisplayName.replace(displayNamePrefix, "") + } + const widgetLayoutInfo = get(layoutInfos, realDisplayName, undefined) + if (!widgetLayoutInfo) { + return { + left: -1, + top: -1, + width: -1, + height: -1, + } + } + const layoutInfo = widgetLayoutInfo.layoutInfo + const { + x: propsPositionX, + y: propsPositionY, + w: sharpeW, + h: sharpeH, + } = layoutInfo return { - left: -1, - top: -1, - width: -1, - height: -1, + left: propsPositionX * unitW, + top: propsPositionY * UNIT_HEIGHT, + width: sharpeW * unitW, + height: sharpeH * UNIT_HEIGHT, } - } - const layoutInfo = widgetLayoutInfo.layoutInfo - const { - x: propsPositionX, - y: propsPositionY, - w: sharpeW, - h: sharpeH, - } = layoutInfo + }, [displayName, displayNamePrefix, layoutInfos, unitW]) - return { - left: propsPositionX * unitW, - top: propsPositionY * UNIT_HEIGHT, - width: sharpeW * unitW, - height: sharpeH * UNIT_HEIGHT, - } + return result } From 69a85643510073808be3d3f03b0c916390204eea Mon Sep 17 00:00:00 2001 From: AruSeito <41471697+AruSeito@users.noreply.github.com> Date: Thu, 1 Feb 2024 20:33:47 +0800 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20=F0=9F=90=9B=20resize=20error=20ids?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AutoHeightWithLimitedContainer/index.tsx | 12 +- .../InnerResizingContainer/index.tsx | 113 ++++++++++++++++- .../InnerResizingContainer/interface.ts | 1 + .../components/ResizingContainer/index.tsx | 2 + .../components/WrapperContainer/index.tsx | 115 +----------------- .../src/widgetLibrary/ChatWidget/chat.tsx | 6 +- .../widgetLibrary/DataGridWidget/dataGrid.tsx | 6 +- .../src/widgetLibrary/FormWidget/form.tsx | 6 +- .../ListWidgetWithAutoPagination/index.tsx | 6 +- .../ListWidgetWithServerPagination/index.tsx | 6 +- .../ListWidgetWithAutoPagination/index.tsx | 6 +- .../ListWidgetWithServerPagination/index.tsx | 6 +- .../src/widgetLibrary/ModalWidget/modal.tsx | 6 +- 13 files changed, 164 insertions(+), 127 deletions(-) diff --git a/apps/builder/src/page/App/components/ScaleSquare/components/AutoHeightWithLimitedContainer/index.tsx b/apps/builder/src/page/App/components/ScaleSquare/components/AutoHeightWithLimitedContainer/index.tsx index 0e28c0e1dd..bc90c54305 100644 --- a/apps/builder/src/page/App/components/ScaleSquare/components/AutoHeightWithLimitedContainer/index.tsx +++ b/apps/builder/src/page/App/components/ScaleSquare/components/AutoHeightWithLimitedContainer/index.tsx @@ -74,13 +74,21 @@ export const AutoHeightWithLimitedContainer: FC< const resizeStartCallback: ResizeStartCallback = useCallback(() => { setResizeMinHeight(true) dispatch(configActions.updateShowDot(true)) - dispatch(executionActions.setResizingNodeIDsReducer([displayName])) + dispatch( + executionActions.setResizingNodeIDsReducer([ + `${displayName}-resize-minHeight`, + ]), + ) }, [dispatch, displayName]) const resizeMaxHeightStartCallback: ResizeStartCallback = useCallback(() => { setResizeMaxHeight(true) dispatch(configActions.updateShowDot(true)) - dispatch(executionActions.setResizingNodeIDsReducer([displayName])) + dispatch( + executionActions.setResizingNodeIDsReducer([ + `${displayName}-resize-maxHeight`, + ]), + ) }, [dispatch, displayName]) const resizeMaxHeightCallback: ResizeCallback = useCallback( diff --git a/apps/builder/src/page/App/components/ScaleSquare/components/InnerResizingContainer/index.tsx b/apps/builder/src/page/App/components/ScaleSquare/components/InnerResizingContainer/index.tsx index 8271f0bac3..42b7d68b13 100644 --- a/apps/builder/src/page/App/components/ScaleSquare/components/InnerResizingContainer/index.tsx +++ b/apps/builder/src/page/App/components/ScaleSquare/components/InnerResizingContainer/index.tsx @@ -1,24 +1,34 @@ +import { ILLA_MIXPANEL_EVENT_TYPE } from "@illa-public/mixpanel-utils" import { getCurrentUserId } from "@illa-public/user-data" +import { klona } from "klona/json" import { get } from "lodash-es" -import { FC, memo, useMemo } from "react" -import { useSelector } from "react-redux" +import { FC, MouseEvent, memo, useCallback, useMemo } from "react" +import { useDispatch, useSelector } from "react-redux" import { getHoveredComponents, + getIsILLAEditMode, getIsLikeProductMode, getSelectedComponentDisplayNames, } from "@/redux/config/configSelector" +import { configActions } from "@/redux/config/configSlice" import { getComponentAttachUsers, getTargetCurrentUsersExpendMe, } from "@/redux/currentApp/collaborators/collaboratorsSelector" +import { getComponentDisplayNameMapDepth } from "@/redux/currentApp/components/componentsSelector" import { getExecutionError, getExecutionResult, + getExecutionWidgetLayoutInfo, getResizingComponentIDs, } from "@/redux/currentApp/executionTree/executionSelector" -import { RootState } from "@/store" +import store, { RootState } from "@/store" +import { FocusManager } from "@/utils/focusManager" +import { trackInEditor } from "@/utils/mixpanelHelper" +import { isMAC } from "@/utils/userAgent" import { RESIZE_DIRECTION } from "@/widgetLibrary/interface" import { widgetBuilder } from "@/widgetLibrary/widgetBuilder" +import { useMouseHover } from "../../utils/useMouseHover" import { MoveBar } from "../MoveBar/moveBar" import ResizeHandler from "./ResizeHandler" import { ResizingContainerProps } from "./interface" @@ -35,7 +45,10 @@ const InnerResizingContainer: FC = (props) => { widgetType, columnNumber, widgetTop, + parentNodeDisplayName, } = props + const { handleMouseEnter, handleMouseLeave } = useMouseHover() + const dispatch = useDispatch() const executionResult = useSelector(getExecutionResult) const currentUserID = useSelector(getCurrentUserId) const hasError = useSelector((rootState) => { @@ -45,7 +58,7 @@ const InnerResizingContainer: FC = (props) => { }) const resizingIDs = useSelector(getResizingComponentIDs) const isResizingCurrent = resizingIDs.includes(displayName) - + const isGlobalResizing = resizingIDs.length > 0 const currentWidgetProps = get(executionResult, displayName, {}) const resizeDirection = useMemo(() => { @@ -76,8 +89,100 @@ const InnerResizingContainer: FC = (props) => { currentUserID, ) }, [attachedUsers, currentUserID, displayName]) + + const handleOnSelection = (e: MouseEvent) => { + const rootState = store.getState() + const isEditMode = getIsILLAEditMode(rootState) + const displayNameMapDepth = getComponentDisplayNameMapDepth(rootState) + const widgetExecutionLayoutInfo = getExecutionWidgetLayoutInfo(rootState) + + e.stopPropagation() + + if (isGlobalResizing || !isEditMode) return + FocusManager.switchFocus("canvas", { + displayName: displayName, + type: "component", + clickPosition: [], + }) + trackInEditor(ILLA_MIXPANEL_EVENT_TYPE.SELECT, { + element: "component", + parameter1: "click", + }) + + if ((isMAC() && e.metaKey) || e.shiftKey || (!isMAC() && e.ctrlKey)) { + let currentSelectedDisplayName = klona(selectedComponents) + const index = currentSelectedDisplayName.findIndex( + (currentDisplayName) => displayName === currentDisplayName, + ) + if (index !== -1) { + currentSelectedDisplayName.splice(index, 1) + } else { + currentSelectedDisplayName.push(displayName) + } + + const depths = currentSelectedDisplayName.map((displayName) => { + return displayNameMapDepth[displayName] + }) + let isEqual = depths.every((depth) => depth === depths[0]) + if (!isEqual) { + return + } + if (currentSelectedDisplayName.length > 1) { + const firstParentNode = + widgetExecutionLayoutInfo[currentSelectedDisplayName[0]].parentNode + const isSameParentNode = currentSelectedDisplayName.every( + (displayName) => { + const parentNode = widgetExecutionLayoutInfo[displayName].parentNode + return parentNode === firstParentNode + }, + ) + if (!isSameParentNode) { + const lastParentNode = + widgetExecutionLayoutInfo[ + currentSelectedDisplayName[currentSelectedDisplayName.length - 1] + ].parentNode + currentSelectedDisplayName = currentSelectedDisplayName.filter( + (displayName) => { + const currentParentNode = + widgetExecutionLayoutInfo[displayName].parentNode + return lastParentNode === currentParentNode + }, + ) + } + } + currentSelectedDisplayName = Array.from( + new Set(currentSelectedDisplayName), + ) + dispatch( + configActions.updateSelectedComponent(currentSelectedDisplayName), + ) + return + } + + dispatch(configActions.updateSelectedComponent([displayName])) + } + + const handleContextMenu = useCallback( + (e: MouseEvent) => { + FocusManager.switchFocus("canvas", { + displayName: displayName, + type: "component", + clickPosition: [], + }) + e.stopPropagation() + dispatch(configActions.updateSelectedComponent([displayName])) + }, + [displayName, dispatch], + ) + return (
= (props) => { widgetWidth, widgetType, columnNumber, + parentNodeDisplayName, } = props const firstDragShadow = useSelector(getFirstDragShadowInfo) @@ -69,6 +70,7 @@ export const ResizingContainer: FC = (props) => { widgetType={widgetType} columnNumber={columnNumber} widgetTop={widgetTop} + parentNodeDisplayName={parentNodeDisplayName} > <> {children} diff --git a/apps/builder/src/page/App/components/ScaleSquare/components/WrapperContainer/index.tsx b/apps/builder/src/page/App/components/ScaleSquare/components/WrapperContainer/index.tsx index c113de23df..a72eabc340 100644 --- a/apps/builder/src/page/App/components/ScaleSquare/components/WrapperContainer/index.tsx +++ b/apps/builder/src/page/App/components/ScaleSquare/components/WrapperContainer/index.tsx @@ -1,28 +1,20 @@ import { ILLA_MIXPANEL_EVENT_TYPE } from "@illa-public/mixpanel-utils" -import { klona } from "klona/json" import { get } from "lodash-es" -import { FC, MouseEvent, memo, useCallback, useContext, useMemo } from "react" +import { FC, memo, useContext, useMemo } from "react" import { useTranslation } from "react-i18next" -import { useDispatch, useSelector } from "react-redux" +import { useSelector } from "react-redux" import { DropList, DropListItem, Dropdown } from "@illa-design/react" -import { useMouseHover } from "@/page/App/components/ScaleSquare/utils/useMouseHover" import { getIsILLAEditMode, getSelectedComponentDisplayNames, } from "@/redux/config/configSelector" -import { configActions } from "@/redux/config/configSlice" -import { getComponentDisplayNameMapDepth } from "@/redux/currentApp/components/componentsSelector" import { getExecutionError, getExecutionResult, - getExecutionWidgetLayoutInfo, - getIsResizing, } from "@/redux/currentApp/executionTree/executionSelector" import { CopyManager } from "@/utils/copyManager" -import { FocusManager } from "@/utils/focusManager" import { trackInEditor } from "@/utils/mixpanelHelper" import { ShortCutContext } from "@/utils/shortcut/shortcutProvider" -import { isMAC } from "@/utils/userAgent" import { WrapperContainerProps } from "./interface" import { applyWrapperPendingStyle, hoverHotSpotStyle } from "./style" @@ -34,16 +26,11 @@ const WrapperContainer: FC = (props) => { widgetType, children, } = props - const { handleMouseEnter, handleMouseLeave } = useMouseHover() const executionResult = useSelector(getExecutionResult) const { t } = useTranslation() const shortcut = useContext(ShortCutContext) - const widgetExecutionLayoutInfo = useSelector(getExecutionWidgetLayoutInfo) - const dispatch = useDispatch() - const displayNameMapDepth = useSelector(getComponentDisplayNameMapDepth) const selectedComponents = useSelector(getSelectedComponentDisplayNames) - const isResizing = useSelector(getIsResizing) const isEditMode = useSelector(getIsILLAEditMode) const errors = useSelector(getExecutionError) @@ -65,100 +52,6 @@ const WrapperContainer: FC = (props) => { (realProps?.dynamicMaxHeight === widgetHeight || realProps?.dynamicMinHeight === widgetHeight) - const handleOnSelection = useCallback( - (e: MouseEvent) => { - e.stopPropagation() - - if (isResizing || !isEditMode) return - FocusManager.switchFocus("canvas", { - displayName: displayName, - type: "component", - clickPosition: [], - }) - trackInEditor(ILLA_MIXPANEL_EVENT_TYPE.SELECT, { - element: "component", - parameter1: "click", - }) - - if ((isMAC() && e.metaKey) || e.shiftKey || (!isMAC() && e.ctrlKey)) { - let currentSelectedDisplayName = klona(selectedComponents) - const index = currentSelectedDisplayName.findIndex( - (currentDisplayName) => displayName === currentDisplayName, - ) - if (index !== -1) { - currentSelectedDisplayName.splice(index, 1) - } else { - currentSelectedDisplayName.push(displayName) - } - - const depths = currentSelectedDisplayName.map((displayName) => { - return displayNameMapDepth[displayName] - }) - let isEqual = depths.every((depth) => depth === depths[0]) - if (!isEqual) { - return - } - if (currentSelectedDisplayName.length > 1) { - const firstParentNode = - widgetExecutionLayoutInfo[currentSelectedDisplayName[0]].parentNode - const isSameParentNode = currentSelectedDisplayName.every( - (displayName) => { - const parentNode = - widgetExecutionLayoutInfo[displayName].parentNode - return parentNode === firstParentNode - }, - ) - if (!isSameParentNode) { - const lastParentNode = - widgetExecutionLayoutInfo[ - currentSelectedDisplayName[ - currentSelectedDisplayName.length - 1 - ] - ].parentNode - currentSelectedDisplayName = currentSelectedDisplayName.filter( - (displayName) => { - const currentParentNode = - widgetExecutionLayoutInfo[displayName].parentNode - return lastParentNode === currentParentNode - }, - ) - } - } - currentSelectedDisplayName = Array.from( - new Set(currentSelectedDisplayName), - ) - dispatch( - configActions.updateSelectedComponent(currentSelectedDisplayName), - ) - return - } - - dispatch(configActions.updateSelectedComponent([displayName])) - }, - [ - dispatch, - displayName, - displayNameMapDepth, - isEditMode, - isResizing, - selectedComponents, - widgetExecutionLayoutInfo, - ], - ) - - const handleContextMenu = useCallback( - (e: MouseEvent) => { - FocusManager.switchFocus("canvas", { - displayName: displayName, - type: "component", - clickPosition: [], - }) - e.stopPropagation() - dispatch(configActions.updateSelectedComponent([displayName])) - }, - [displayName, dispatch], - ) - return ( = (props) => { css={hoverHotSpotStyle} data-displayname={displayName} data-parentnode={parentNodeDisplayName} - onMouseEnter={handleMouseEnter} - onMouseLeave={handleMouseLeave} - onClick={handleOnSelection} - onContextMenu={handleContextMenu} >
= (props) => { const handleResizeStart: ResizeStartCallback = (e) => { e.preventDefault() e.stopPropagation() - dispatch(executionActions.setResizingNodeIDsReducer([displayName])) + dispatch( + executionActions.setResizingNodeIDsReducer([ + `${displayName}-resize-footer`, + ]), + ) } const handleOnResizeStop: ResizeCallback = useCallback( diff --git a/apps/builder/src/widgetLibrary/DataGridWidget/dataGrid.tsx b/apps/builder/src/widgetLibrary/DataGridWidget/dataGrid.tsx index b722eda6ad..72b5c89bf1 100644 --- a/apps/builder/src/widgetLibrary/DataGridWidget/dataGrid.tsx +++ b/apps/builder/src/widgetLibrary/DataGridWidget/dataGrid.tsx @@ -412,7 +412,11 @@ export const DataGridWidget: FC = (props) => { toolbar: toolbar, }} onColumnHeaderEnter={() => { - dispatch(executionActions.setResizingNodeIDsReducer([displayName])) + dispatch( + executionActions.setResizingNodeIDsReducer([ + `${displayName}-column-header-resize`, + ]), + ) isInnerDragging.current = true }} onColumnHeaderLeave={() => { diff --git a/apps/builder/src/widgetLibrary/FormWidget/form.tsx b/apps/builder/src/widgetLibrary/FormWidget/form.tsx index b5fe18318b..d6817021bf 100644 --- a/apps/builder/src/widgetLibrary/FormWidget/form.tsx +++ b/apps/builder/src/widgetLibrary/FormWidget/form.tsx @@ -404,7 +404,11 @@ export const FormWidget: FC = (props) => { const handleResizeStart: ResizeStartCallback = (e) => { e.preventDefault() e.stopPropagation() - dispatch(executionActions.setResizingNodeIDsReducer([displayName])) + dispatch( + executionActions.setResizingNodeIDsReducer([ + `${displayName}-resize-form-header`, + ]), + ) } const handleOnResizeTopStop: ResizeCallback = useCallback( diff --git a/apps/builder/src/widgetLibrary/GridListWidget/components/ListWidgetWithAutoPagination/index.tsx b/apps/builder/src/widgetLibrary/GridListWidget/components/ListWidgetWithAutoPagination/index.tsx index 5434cdd871..d8fe04ecfa 100644 --- a/apps/builder/src/widgetLibrary/GridListWidget/components/ListWidgetWithAutoPagination/index.tsx +++ b/apps/builder/src/widgetLibrary/GridListWidget/components/ListWidgetWithAutoPagination/index.tsx @@ -122,7 +122,11 @@ const ListWidgetWithAutoPagination: FC = ( const handleResizeStart: ResizeStartCallback = (e) => { e.preventDefault() e.stopPropagation() - dispatch(executionActions.setResizingNodeIDsReducer([displayName])) + dispatch( + executionActions.setResizingNodeIDsReducer([ + `${displayName}-resize-grid`, + ]), + ) } const handleOnResizeTopStop: ResizeCallback = useCallback( diff --git a/apps/builder/src/widgetLibrary/GridListWidget/components/ListWidgetWithServerPagination/index.tsx b/apps/builder/src/widgetLibrary/GridListWidget/components/ListWidgetWithServerPagination/index.tsx index a024ace925..d7bc4b705c 100644 --- a/apps/builder/src/widgetLibrary/GridListWidget/components/ListWidgetWithServerPagination/index.tsx +++ b/apps/builder/src/widgetLibrary/GridListWidget/components/ListWidgetWithServerPagination/index.tsx @@ -162,7 +162,11 @@ const ListWidgetWithServerPagination: FC = ( const handleResizeStart: ResizeStartCallback = (e) => { e.preventDefault() e.stopPropagation() - dispatch(executionActions.setResizingNodeIDsReducer([displayName])) + dispatch( + executionActions.setResizingNodeIDsReducer([ + `${displayName}-resize-list-item`, + ]), + ) } const handleOnResizeTopStop: ResizeCallback = useCallback( diff --git a/apps/builder/src/widgetLibrary/ListWidget/components/ListWidgetWithAutoPagination/index.tsx b/apps/builder/src/widgetLibrary/ListWidget/components/ListWidgetWithAutoPagination/index.tsx index 38363e99b0..9659be853b 100644 --- a/apps/builder/src/widgetLibrary/ListWidget/components/ListWidgetWithAutoPagination/index.tsx +++ b/apps/builder/src/widgetLibrary/ListWidget/components/ListWidgetWithAutoPagination/index.tsx @@ -93,7 +93,11 @@ const ListWidgetWithAutoPagination: FC = ( const handleResizeStart: ResizeStartCallback = (e) => { e.preventDefault() e.stopPropagation() - dispatch(executionActions.setResizingNodeIDsReducer([displayName])) + dispatch( + executionActions.setResizingNodeIDsReducer([ + `${displayName}-resize-listItem`, + ]), + ) } const handleOnResizeTopStop: ResizeCallback = useCallback( diff --git a/apps/builder/src/widgetLibrary/ListWidget/components/ListWidgetWithServerPagination/index.tsx b/apps/builder/src/widgetLibrary/ListWidget/components/ListWidgetWithServerPagination/index.tsx index 125090969b..d896d49890 100644 --- a/apps/builder/src/widgetLibrary/ListWidget/components/ListWidgetWithServerPagination/index.tsx +++ b/apps/builder/src/widgetLibrary/ListWidget/components/ListWidgetWithServerPagination/index.tsx @@ -155,7 +155,11 @@ const ListWidgetWithServerPagination: FC = ( const handleResizeStart: ResizeStartCallback = (e) => { e.preventDefault() e.stopPropagation() - dispatch(executionActions.setResizingNodeIDsReducer([displayName])) + dispatch( + executionActions.setResizingNodeIDsReducer([ + `${displayName}-resize-listItem`, + ]), + ) } const handleOnResizeTopStop: ResizeCallback = useCallback( diff --git a/apps/builder/src/widgetLibrary/ModalWidget/modal.tsx b/apps/builder/src/widgetLibrary/ModalWidget/modal.tsx index 67e899cf33..d539477c9f 100644 --- a/apps/builder/src/widgetLibrary/ModalWidget/modal.tsx +++ b/apps/builder/src/widgetLibrary/ModalWidget/modal.tsx @@ -146,7 +146,11 @@ export const ModalWidget: FC = (props) => { const handleResizeStart: ResizeStartCallback = (e) => { e.preventDefault() e.stopPropagation() - dispatch(executionActions.setResizingNodeIDsReducer([displayName])) + dispatch( + executionActions.setResizingNodeIDsReducer([ + `${displayName}-resize-modal-header`, + ]), + ) } const handleOnResizeTopStop: ResizeCallback = useCallback( From c32e0384a923be6ad72d80ce45c0b8af1d206cb7 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Thu, 1 Feb 2024 20:43:43 +0800 Subject: [PATCH 4/4] [ci skip] Update package.json --- apps/builder/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/builder/package.json b/apps/builder/package.json index c22b5e344e..13f1516013 100644 --- a/apps/builder/package.json +++ b/apps/builder/package.json @@ -5,7 +5,7 @@ "private": true, "author": "ILLA Cloud ", "license": "Apache-2.0", - "version": "4.4.2", + "version": "4.4.3", "scripts": { "dev": "vite --strictPort --force", "build-cloud": "NODE_OPTIONS=--max-old-space-size=12288 vite build --mode cloud",