feat: fix scroll issues in properties editor and enable properties editor for invalid parts (SOFIE-282 and SOFIE-283)

packages/webui/src/client/styles/rundownView.scss

@@ -1568,7 +1568,7 @@ svg.icon {
 				bottom: 0;
 				right: 1px;
 				z-index: 10;
-				pointer-events: all;
+				pointer-events: none;
 				background-image: repeating-linear-gradient(
 						45deg,
 						var(--invalid-reason-color-transparent) 0%,

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

@@ -1378,6 +1378,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps,
 					<SelectedElementsContext.Consumer>
 						{(selectionContext) => {
 							const isPropertiesPanelOpen = selectionContext.listSelectedElements().length > 0
+
 							return (
 								<div
 									className={classNames('rundown-view', {

packages/webui/src/client/ui/RundownView/SelectedElementsContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useState } from 'react'
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from 'react'
 import {
 	AdLibActionId,
 	PartId,
@@ -215,12 +215,21 @@ export function useSelectedElements(
 	const [segment, setSegment] = useState<DBSegment | undefined>(undefined)
 	const rundownId = piece ? piece.startRundownId : part ? part.rundownId : segment?.rundownId
 
+	const lastValidPiece = useRef<Piece | undefined>(undefined)
+
 	useEffect(() => {
 		clearPendingChange() // element id changed so any pending change is for an old element
 
 		const computation = Tracker.nonreactive(() =>
 			Tracker.autorun(() => {
-				const piece = Pieces.findOne(selectedElement?.elementId)
+				let piece = Pieces.findOne(selectedElement?.elementId)
+
+				if (!piece && lastValidPiece.current && lastValidPiece.current._id === selectedElement?.elementId) {
+					piece = lastValidPiece.current
+				} else if (piece) {
+					lastValidPiece.current = piece
+				}
+
 				const part = UIParts.findOne({ _id: piece ? piece.startPartId : selectedElement?.elementId })
 				const segment = Segments.findOne({ _id: part ? part.segmentId : selectedElement?.elementId })
 

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

@@ -139,7 +139,7 @@ export const SegmentContextMenu = withTranslation()(
 								)}
 							</>
 						)}
-						{part && !part.instance.part.invalid && timecode !== null && (
+						{part && timecode !== null && (
 							<>
 								<MenuItem
 									onClick={(e) => this.props.onSetNext(part.instance.part, e)}

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

@@ -176,15 +176,14 @@ export const SourceLayerItem = (props: Readonly<ISourceLayerItemProps>): JSX.Ele
 					innerPiece.userEditProperties?.globalProperties ||
 					innerPiece.userEditProperties?.operations?.length
 				)
+
 				if (!hasEditableContent) return
 
 				const pieceId = innerPiece._id
-				if (!selectElementContext.isSelected(pieceId)) {
-					RundownViewEventBus.emit(RundownViewEvents.CLOSE_NOTIFICATIONS)
-					selectElementContext.clearAndSetSelection({ type: 'piece', elementId: pieceId })
-				} else {
-					selectElementContext.clearSelections()
-				}
+
+				RundownViewEventBus.emit(RundownViewEvents.CLOSE_NOTIFICATIONS)
+				selectElementContext.clearAndSetSelection({ type: 'piece', elementId: pieceId })
+
 				// Until a proper data structure, the only reference is a part.
 				// const partId = this.props.part.instance.part._id
 				// if (!selectElementContext.isSelected(partId)) {