feat: doubleclick on part selection for properties panel

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

@@ -2,7 +2,7 @@ import React from 'react'
 import {
 	AdLibActionId,
 	PartInstanceId,
-	PieceId,
+	PieceInstanceId,
 	RundownId,
 	SegmentId,
 } from '@sofie-automation/corelib/dist/dataModel/Ids'
@@ -23,9 +23,9 @@ interface PartInstanceElement {
 	elementId: PartInstanceId
 }
 
-interface PieceElement {
-	type: 'piece'
-	elementId: PieceId
+interface PieceInstanceElement {
+	type: 'pieceInstance'
+	elementId: PieceInstanceId
 }
 
 interface AdlibActionElement {
@@ -34,7 +34,7 @@ interface AdlibActionElement {
 }
 
 // Union types for all possible elements
-type SelectedElement = RundownElement | SegmentElement | PartInstanceElement | PieceElement | AdlibActionElement
+type SelectedElement = RundownElement | SegmentElement | PartInstanceElement | PieceInstanceElement | AdlibActionElement
 type ElementId = SelectedElement['elementId']
 
 export interface SelectionContextType {
@@ -155,11 +155,13 @@ export const useSelection = (): SelectionContextType => {
 }
 
 // Helper hook for common selection patterns
-export const useElementSelection = (element: SelectedElement): { isSelected: boolean; toggleSelection: () => void } => {
-	const { isSelected, toggleSelection } = useSelection()
+export const useElementSelection = (
+	element: SelectedElement
+): { isSelected: boolean; clearAndSetSelection: () => void } => {
+	const { isSelected, clearAndSetSelection } = useSelection()
 
 	return {
 		isSelected: React.useMemo(() => isSelected(element.elementId), [isSelected, element.elementId]),
-		toggleSelection: React.useCallback(() => toggleSelection(element), [toggleSelection, element]),
+		clearAndSetSelection: React.useCallback(() => clearAndSetSelection(element), [clearAndSetSelection, element]),
 	}
 }

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

@@ -23,6 +23,7 @@ import { TransitionSourceRenderer } from './Renderers/TransitionSourceRenderer'
 import { UIStudio } from '@sofie-automation/meteor-lib/dist/api/studios'
 import { ReadonlyDeep } from 'type-fest'
 import { PieceContentStatusObj } from '@sofie-automation/meteor-lib/dist/api/pieceContentStatus'
+import { useSelection } from '../RundownView/SelectedElementsContext'
 const LEFT_RIGHT_ANCHOR_SPACER = 15
 const MARGINAL_ANCHORED_WIDTH = 5
 
@@ -102,11 +103,20 @@ interface ISourceLayerItemState {
 	/** Set to `true` when the segment is "highlighted" (in focus, generally from a scroll event) */
 	highlight: boolean
 }
-export const SourceLayerItem = withTranslation()(
-	class SourceLayerItem extends React.Component<ISourceLayerItemProps & WithTranslation, ISourceLayerItemState> {
+
+interface WithSelectionProps {
+	handlePieceSelect: (piece: PieceUi, e: React.MouseEvent<HTMLDivElement>) => void
+	isPieceSelected: boolean
+}
+
+const SourceLayerItemWithSelection = withTranslation()(
+	class SourceLayerItem extends React.Component<
+		ISourceLayerItemProps & WithTranslation & WithSelectionProps,
+		ISourceLayerItemState
+	> {
 		animFrameHandle: number | undefined
 
-		constructor(props: ISourceLayerItemProps & WithTranslation) {
+		constructor(props: ISourceLayerItemProps & WithTranslation & WithSelectionProps) {
 			super(props)
 			this.state = {
 				showMiniInspector: false,
@@ -465,11 +475,15 @@ export const SourceLayerItem = withTranslation()(
 		}
 
 		itemDblClick = (e: React.MouseEvent<HTMLDivElement>) => {
-			e.preventDefault()
-			e.stopPropagation()
+			if (this.props.studio?.settings.enableUserEdits) {
+				this.props.handlePieceSelect(this.props.piece, e)
+			} else {
+				e.preventDefault()
+				e.stopPropagation()
 
-			if (typeof this.props.onDoubleClick === 'function') {
-				this.props.onDoubleClick(this.props.piece, e)
+				if (typeof this.props.onDoubleClick === 'function') {
+					this.props.onDoubleClick(this.props.piece, e)
+				}
 			}
 		}
 
@@ -714,3 +728,21 @@ export const SourceLayerItem = withTranslation()(
 		}
 	}
 )
+
+export const SourceLayerItem = (props: ISourceLayerItemProps & WithTranslation): React.ReactElement => {
+	const { isSelected, clearAndSetSelection } = useSelection()
+
+	const isPieceSelected = isSelected(props.piece.instance._id)
+
+	const handlePieceSelect = React.useCallback(
+		(piece: PieceUi, e: React.MouseEvent<HTMLDivElement>) => {
+			clearAndSetSelection({ type: 'pieceInstance', elementId: piece.instance._id })
+			props.onClick?.(piece, e)
+		},
+		[isPieceSelected]
+	)
+
+	return (
+		<SourceLayerItemWithSelection {...props} handlePieceSelect={handlePieceSelect} isPieceSelected={isPieceSelected} />
+	)
+}

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

@@ -1,6 +1,4 @@
 import * as React from 'react'
-// @ts-expect-error No types available
-import * as VelocityReact from 'velocity-react'
 import { i18nTranslator } from '../i18n'
 import { translateMessage } from '@sofie-automation/corelib/dist/TranslatableMessage'
 import { doUserAction, UserAction } from '../../lib/clientUserAction'
@@ -22,7 +20,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { useTracker } from '../../lib/ReactMeteorData/ReactMeteorData'
 import _ from 'underscore'
-import { Segments } from '../../collections'
+import { Segments, PieceInstances } from '../../collections'
 import { UIPartInstances, UIParts } from '../Collections'
 import { useSelection } from '../RundownView/SelectedElementsContext'
 import { DBSegment } from '@sofie-automation/corelib/dist/dataModel/Segment'
@@ -46,75 +44,81 @@ export function PropertiesPanel(): JSX.Element {
 		}
 	}, [])
 
+	const pieceInstance = useTracker(
+		() => PieceInstances.findOne({ _id: selectedElement.elementId }),
+		[selectedElement?.elementId]
+	)
+
 	const partInstance = useTracker(
-		() => UIPartInstances.findOne({ _id: selectedElement.elementId }),
-		[selectedElement.elementId]
+		() => UIPartInstances.findOne({ _id: pieceInstance ? pieceInstance.partInstanceId : selectedElement.elementId }),
+		[selectedElement?.elementId]
 	)
 	const part = useTracker(() => UIParts.findOne({ _id: partInstance?.part._id }), [partInstance?.part._id])
 
 	const segment: DBSegment | undefined = useTracker(
 		() => Segments.findOne({ _id: part ? part.segmentId : selectedElement.elementId }),
-		[selectedElement.elementId]
+		[selectedElement?.elementId]
 	)
 	const rundownId = part ? part.rundownId : segment?.rundownId
 
 	if (!rundownId) return <></>
 
 	return (
 		<div className="propertiespanel-pop-up">
-			{selectedElement.type === 'partInstance' && (
-				<>
-					<div className="propertiespanel-pop-up__header">
-						{part?.userEditOperations &&
-							part.userEditOperations.map((operation) => {
-								if (operation.type === UserEditingType.FORM || !operation.svgIcon || !operation.isActive) return null
+			{selectedElement.type === 'partInstance' ||
+				(selectedElement.type === 'pieceInstance' && (
+					<>
+						<div className="propertiespanel-pop-up__header">
+							{part?.userEditOperations &&
+								part.userEditOperations.map((operation) => {
+									if (operation.type === UserEditingType.FORM || !operation.svgIcon || !operation.isActive) return null
 
-								return (
-									<div
-										key={operation.id}
-										className="svg"
-										dangerouslySetInnerHTML={{
-											__html: operation.svgIcon,
-										}}
-									></div>
-								)
-							})}
-						PART : {String(part?.title)}
-					</div>
-					<div className="propertiespanel-pop-up__contents">
-						{segment &&
-							part?._id &&
-							part.userEditOperations?.map((userEditOperation, i) => {
-								switch (userEditOperation.type) {
-									case UserEditingType.ACTION:
-										return (
-											<EditingTypeAction
-												key={i}
-												userEditOperation={userEditOperation}
-												segment={segment}
-												part={part}
-												rundownId={rundownId}
-											/>
-										)
-									case UserEditingType.FORM:
-										return (
-											<EditingTypeChangeSource
-												key={i}
-												userEditOperation={userEditOperation}
-												segment={segment}
-												part={part}
-												rundownId={rundownId}
-											/>
-										)
-									default:
-										assertNever(userEditOperation)
-										return null
-								}
-							})}
-						<hr />
-					</div>
-				</>
-			)}
+									return (
+										<div
+											key={operation.id}
+											className="svg"
+											dangerouslySetInnerHTML={{
+												__html: operation.svgIcon,
+											}}
+										></div>
+									)
+								})}
+							PART : {String(part?.title)}
+						</div>
+						<div className="propertiespanel-pop-up__contents">
+							{segment &&
+								part?._id &&
+								part.userEditOperations?.map((userEditOperation, i) => {
+									switch (userEditOperation.type) {
+										case UserEditingType.ACTION:
+											return (
+												<EditingTypeAction
+													key={i}
+													userEditOperation={userEditOperation}
+													segment={segment}
+													part={part}
+													rundownId={rundownId}
+												/>
+											)
+										case UserEditingType.FORM:
+											return (
+												<EditingTypeChangeSource
+													key={i}
+													userEditOperation={userEditOperation}
+													segment={segment}
+													part={part}
+													rundownId={rundownId}
+												/>
+											)
+										default:
+											assertNever(userEditOperation)
+											return null
+									}
+								})}
+							<hr />
+						</div>
+					</>
+				))}
 			{selectedElement.type === 'segment' && (
 				<>
 					<div className="propertiespanel-pop-up__header">
@@ -305,7 +309,7 @@ function EditingTypeChangeSource(props: {
 		enum: string[]
 		tsEnumNames: string[]
 	}
-	let groups: UserEditingGroupingType[] = clone(props.userEditOperation.grouping) || []
+	const groups: UserEditingGroupingType[] = clone(props.userEditOperation.grouping) || []
 	const numberOfEmptySlots = 14 - groups.length
 	for (let i = 0; i < numberOfEmptySlots; i++) {
 		groups.push({})