feat: select/deselect an element - fix flickering upen commit changes

Author: olzzon

packages/webui/src/client/ui/SegmentTimeline/SegmentTimeline.tsx

@@ -102,6 +102,7 @@ interface IProps {
 	showDurationSourceLayers?: Set<ISourceLayer['_id']>
 	fixedSegmentDuration: boolean | undefined
 	onSegmentSelect: (segmentId: SegmentId) => void
+	clearSelections: () => void
 	isSelected: boolean
 }
 interface IStateHeader {
@@ -1063,7 +1064,11 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 					<div
 						onDoubleClick={() => {
 							if (this.props.studio.settings.enableUserEdits && this.props.onSegmentSelect) {
-								this.props.onSegmentSelect(this.props.segment._id)
+								if (!this.props.isSelected) {
+									this.props.onSegmentSelect(this.props.segment._id)
+								} else {
+									this.props.clearSelections()
+								}
 							}
 						}}
 					>

packages/webui/src/client/ui/SegmentTimeline/SegmentTimelineContainer.tsx

@@ -72,7 +72,6 @@ interface IState {
 
 interface IProps extends IResolvedSegmentProps {
 	id: string
-	onSegmentSelect: (segmentId: SegmentId) => void
 }
 
 export function SegmentTimelineContainer(props: Readonly<IProps>): JSX.Element {
@@ -142,7 +141,7 @@ export function SegmentTimelineContainer(props: Readonly<IProps>): JSX.Element {
 }
 
 function SegmentTimelineContainerWithSelection(props: Readonly<IProps>): JSX.Element {
-	const { clearAndSetSelection, isSelected } = useSelection()
+	const { clearAndSetSelection, isSelected, clearSelections } = useSelection()
 
 	const handleSegmentSelect = (segmentId: SegmentId) => {
 		console.log('handleSegmentSelect', segmentId)
@@ -161,12 +160,15 @@ function SegmentTimelineContainerWithSelection(props: Readonly<IProps>): JSX.Ele
 			{...props}
 			isSelected={isElementSelected()}
 			onSegmentSelect={handleSegmentSelect}
+			clearSelections={clearSelections}
 		/>
 	)
 }
 
 interface IWithSelectionProps extends IProps {
 	isSelected: boolean
+	onSegmentSelect: (segmentId: SegmentId) => void
+	clearSelections: () => void
 }
 
 const SegmentTimelineContainerContent = withResolvedSegment(
@@ -732,6 +734,7 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 							fixedSegmentDuration={this.props.fixedSegmentDuration}
 							showDurationSourceLayers={this.props.showDurationSourceLayers}
 							onSegmentSelect={this.handleSegmentSelect}
+							clearSelections={this.props.clearSelections}
 							isSelected={this.props.isSelected}
 						/>
 					)}

packages/webui/src/client/ui/SegmentTimeline/SourceLayerItem.tsx

@@ -730,7 +730,7 @@ const SourceLayerItemWithSelection = withTranslation()(
 )
 
 export const SourceLayerItem = (props: ISourceLayerItemProps): React.ReactElement => {
-	const { isSelected, clearAndSetSelection } = useSelection()
+	const { isSelected, clearAndSetSelection, clearSelections } = useSelection()
 
 	const isPieceSelected = isSelected(props.piece.instance.piece._id)
 
@@ -740,7 +740,11 @@ export const SourceLayerItem = (props: ISourceLayerItemProps): React.ReactElemen
 			// As the piece currently doesn't have a unique ID, that can be used for back reference
 			// If it's not an instance
 			const partId = props.part.instance.part._id
-			clearAndSetSelection({ type: 'part', elementId: partId })
+			if (!isPieceSelected) {
+				clearAndSetSelection({ type: 'part', elementId: partId })
+			} else {
+				clearSelections()
+			}
 			props.onClick?.(piece, e)
 		},
 		[isPieceSelected]

packages/webui/src/client/ui/UserEditOperations/PropertiesPanel.tsx

@@ -36,7 +36,6 @@ export function PropertiesPanel(): JSX.Element {
 	const { listSelectedElements } = useSelection()
 	const selectedElement = listSelectedElements()?.[0]
 	const { t } = useTranslation()
-	if (!selectedElement) return <></>
 
 	const [pendingChanges, setPendingChanges] = React.useState<PendingChange[]>([])
 	const hasPendingChanges = pendingChanges.length > 0
@@ -52,20 +51,18 @@ export function PropertiesPanel(): JSX.Element {
 	}, [])
 
 	const part = useTracker(() => {
-		const foundPart = UIParts.findOne({ _id: selectedElement.elementId })
 		setPendingChanges([])
-		return foundPart
-	}, [selectedElement.elementId])
+		return UIParts.findOne({ _id: selectedElement?.elementId })
+	}, [selectedElement?.elementId])
 
 	const segment: DBSegment | undefined = useTracker(
-		() => Segments.findOne({ _id: part ? part.segmentId : selectedElement.elementId }),
-		[selectedElement.elementId]
+		() => Segments.findOne({ _id: part ? part.segmentId : selectedElement?.elementId }),
+		[selectedElement?.elementId]
 	)
 	const rundownId = part ? part.rundownId : segment?.rundownId
 
-	if (!rundownId) return <></>
-
 	const handleCommitChanges = async (e: React.MouseEvent) => {
+		if (!rundownId || !selectedElement) return
 		for (const change of pendingChanges) {
 			doUserAction(t, e, UserAction.EXECUTE_USER_OPERATION, (e, ts) =>
 				MeteorCall.userAction.executeUserChangeOperation(
@@ -84,35 +81,36 @@ export function PropertiesPanel(): JSX.Element {
 				)
 			)
 		}
-		setPendingChanges([])
+		// Delay the Clear pending changes after executing to avoid async flickering:
+		setTimeout(() => setPendingChanges([]), 100)
 	}
 
 	const handleRevertChanges = (e: React.MouseEvent) => {
+		if (!rundownId || !selectedElement) return
 		setPendingChanges([])
-		rundownId &&
-			doUserAction(t, e, UserAction.EXECUTE_USER_OPERATION, (e, ts) =>
-				MeteorCall.userAction.executeUserChangeOperation(
-					e,
-					ts,
-					rundownId,
-					{
-						segmentExternalId: segment?.externalId,
-						partExternalId: part?.externalId,
-						pieceExternalId: undefined,
-					},
-					{
-						id:
-							selectedElement.type === 'partInstance'
-								? DefaultUserOperationsTypes.REVERT_PART
-								: DefaultUserOperationsTypes.REVERT_SEGMENT,
-					}
-				)
+		doUserAction(t, e, UserAction.EXECUTE_USER_OPERATION, (e, ts) =>
+			MeteorCall.userAction.executeUserChangeOperation(
+				e,
+				ts,
+				rundownId,
+				{
+					segmentExternalId: segment?.externalId,
+					partExternalId: part?.externalId,
+					pieceExternalId: undefined,
+				},
+				{
+					id:
+						selectedElement.type === 'partInstance'
+							? DefaultUserOperationsTypes.REVERT_PART
+							: DefaultUserOperationsTypes.REVERT_SEGMENT,
+				}
 			)
+		)
 	}
 
 	return (
 		<div className="propertiespanel-pop-up">
-			{selectedElement.type === 'part' && (
+			{rundownId && selectedElement?.type === 'part' && (
 				<>
 					<div className="propertiespanel-pop-up__header">
 						{part?.userEditOperations &&
@@ -168,7 +166,7 @@ export function PropertiesPanel(): JSX.Element {
 					</div>
 				</>
 			)}
-			{selectedElement.type === 'segment' && (
+			{rundownId && selectedElement?.type === 'segment' && (
 				<>
 					<div className="propertiespanel-pop-up__header">
 						{segment?.userEditOperations &&