feat: edit mode for drag operations

Author: Mint de Wit

packages/blueprints-integration/src/ingest.ts

@@ -179,6 +179,7 @@ export type DefaultUserOperations =
 	| DefaultUserOperationRevertPart
 	| DefaultUserOperationEditProperties
 	| DefaultUserOperationImportMOSItem
+	| DefaultUserOperationRetimePiece
 
 export interface UserOperationChange<TCustomBlueprintOperations extends { id: string } = never> {
 	/** Indicate that this change is from user operations */

packages/blueprints-integration/src/triggers.ts

@@ -272,6 +272,12 @@ export interface IShelfAction extends ITriggeredActionBase {
 	filterChain: IGUIContextFilterLink[]
 }
 
+export interface IEditModeAction extends ITriggeredActionBase {
+	action: ClientActions.editMode
+	state: true | false | 'toggle'
+	filterChain: IGUIContextFilterLink[]
+}
+
 export interface IGoToOnAirLineAction extends ITriggeredActionBase {
 	action: ClientActions.goToOnAirLine
 	filterChain: IGUIContextFilterLink[]
@@ -325,6 +331,7 @@ export type SomeAction =
 	| IRundownPlaylistResetAction
 	| IRundownPlaylistResyncAction
 	| IShelfAction
+	| IEditModeAction
 	| IGoToOnAirLineAction
 	| IRewindSegmentsAction
 	| IShowEntireCurrentSegmentAction

packages/meteor-lib/src/triggers/RundownViewEventBus.ts

@@ -29,6 +29,7 @@ export enum RundownViewEvents {
 	REVEAL_IN_SHELF = 'revealInShelf',
 	SWITCH_SHELF_TAB = 'switchShelfTab',
 	SHELF_STATE = 'shelfState',
+	EDIT_MODE = 'editMode',
 	MINI_SHELF_QUEUE_ADLIB = 'miniShelfQueueAdLib',
 	GO_TO_PART = 'goToPart',
 	GO_TO_PART_INSTANCE = 'goToPartInstance',
@@ -74,6 +75,10 @@ export interface ShelfStateEvent extends IEventContext {
 	state: boolean | 'toggle'
 }
 
+export interface EditModeEvent extends IEventContext {
+	state: boolean | 'toggle'
+}
+
 export interface MiniShelfQueueAdLibEvent extends IEventContext {
 	forward: boolean
 }
@@ -139,6 +144,7 @@ export interface RundownViewEventBusEvents {
 	[RundownViewEvents.SEGMENT_ZOOM_ON]: []
 	[RundownViewEvents.SEGMENT_ZOOM_OFF]: []
 	[RundownViewEvents.SHELF_STATE]: [e: ShelfStateEvent]
+	[RundownViewEvents.EDIT_MODE]: [e: EditModeEvent]
 	[RundownViewEvents.REVEAL_IN_SHELF]: [e: RevealInShelfEvent]
 	[RundownViewEvents.SWITCH_SHELF_TAB]: [e: SwitchToShelfTabEvent]
 	[RundownViewEvents.MINI_SHELF_QUEUE_ADLIB]: [e: MiniShelfQueueAdLibEvent]

packages/meteor-lib/src/triggers/actionFactory.ts

@@ -286,6 +286,17 @@ function createShelfAction(_filterChain: IGUIContextFilterLink[], state: boolean
 	}
 }
 
+function createEditModeAction(_filterChain: IGUIContextFilterLink[], state: boolean | 'toggle'): ExecutableAction {
+	return {
+		action: ClientActions.editMode,
+		execute: () => {
+			RundownViewEventBus.emit(RundownViewEvents.EDIT_MODE, {
+				state,
+			})
+		},
+	}
+}
+
 function createMiniShelfQueueAdLibAction(_filterChain: IGUIContextFilterLink[], forward: boolean): ExecutableAction {
 	return {
 		action: ClientActions.miniShelfQueueAdLib,
@@ -442,6 +453,8 @@ export function createAction(
 	switch (action.action) {
 		case ClientActions.shelf:
 			return createShelfAction(action.filterChain, action.state)
+		case ClientActions.editMode:
+			return createEditModeAction(action.filterChain, action.state)
 		case ClientActions.goToOnAirLine:
 			return createGoToOnAirLineAction(action.filterChain)
 		case ClientActions.rewindSegments:

packages/shared-lib/src/core/model/ShowStyle.ts

@@ -107,6 +107,7 @@ export enum ClientActions {
 	'rewindSegments' = 'rewindSegments',
 	'showEntireCurrentSegment' = 'showEntireCurrentSegment',
 	'miniShelfQueueAdLib' = 'miniShelfQueueAdLib',
+	'editMode' = 'editMode',
 }
 
 export enum DeviceActions {

packages/webui/src/client/lib/ui/pieceUiClassNames.ts

@@ -19,7 +19,8 @@ export function pieceUiClassNames(
 	uiState?: {
 		leftAnchoredWidth: number
 		rightAnchoredWidth: number
-	}
+	},
+	draggable?: boolean
 ): string {
 	const typeClass = layerType ? RundownUtils.getSourceLayerClassName(layerType) : ''
 
@@ -57,5 +58,7 @@ export function pieceUiClassNames(
 		'invert-flash': highlight,
 
 		'element-selected': selected,
+
+		'draggable-element': draggable,
 	})
 }

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

@@ -18,3 +18,7 @@ $glow-color: rgba(255, 255, 255, 0.58);
 		}
 	}
 }
+
+.draggable-element {
+	border: dotted white 1px;
+}

packages/webui/src/client/ui/RundownView/DragContext.ts

@@ -26,6 +26,11 @@ export interface IDragContext {
 	 */
 	setHoveredPart: (partId: PartInstanceId, segmentId: SegmentId, position: { x: number; y: number }) => void
 
+	/**
+	 * Whether dragging is enabled
+	 */
+	enabled: boolean
+
 	/**
 	 * PieceId of the piece that is being dragged
 	 */

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

@@ -1,14 +1,18 @@
 import { PartInstanceId, PieceInstanceId, SegmentId } from '@sofie-automation/corelib/dist/dataModel/Ids'
-import { PropsWithChildren, useRef, useState } from 'react'
-import { dragContext, IDragContext } from './DragContext'
-import { PieceUi } from '../SegmentContainer/withResolvedSegment'
-import { doUserAction, UserAction } from '../../lib/clientUserAction'
-import { MeteorCall } from '../../lib/meteorApi'
+import { PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react'
+import { dragContext, IDragContext } from './DragContext.js'
+import { PieceUi } from '../SegmentContainer/withResolvedSegment.js'
+import { doUserAction, UserAction } from '../../lib/clientUserAction.js'
+import { MeteorCall } from '../../lib/meteorApi.js'
 import { TFunction } from 'i18next'
 import { UIParts } from '../Collections.js'
 import { Segments } from '../../collections/index.js'
 import { literal } from '../../lib/tempLib.js'
 import { DefaultUserOperationRetimePiece, DefaultUserOperationsTypes } from '@sofie-automation/blueprints-integration'
+import RundownViewEventBus, {
+	RundownViewEvents,
+	EditModeEvent,
+} from '@sofie-automation/meteor-lib/dist/triggers/RundownViewEventBus'
 
 const DRAG_TIMEOUT = 10000
 
@@ -21,6 +25,8 @@ export function DragContextProvider({ t, children }: PropsWithChildren<Props>):
 	const [pieceId, setPieceId] = useState<undefined | PieceInstanceId>(undefined)
 	const [piece, setPiece] = useState<undefined | PieceUi>(undefined)
 
+	const [enabled, setEnabled] = useState(false)
+
 	const partIdRef = useRef<undefined | PartInstanceId>(undefined)
 	const positionRef = useRef({ x: 0, y: 0 })
 	const segmentIdRef = useRef<undefined | SegmentId>(undefined)
@@ -137,10 +143,27 @@ export function DragContextProvider({ t, children }: PropsWithChildren<Props>):
 		positionRef.current = pos
 	}
 
+	const onSetEditMode = useCallback((e: EditModeEvent) => {
+		if (e.state === 'toggle') {
+			setEnabled((s) => !s)
+		} else {
+			setEnabled(e.state)
+		}
+	}, [])
+
+	useEffect(() => {
+		RundownViewEventBus.on(RundownViewEvents.EDIT_MODE, onSetEditMode)
+		return () => {
+			RundownViewEventBus.off(RundownViewEvents.EDIT_MODE, onSetEditMode)
+		}
+	})
+
 	const ctx = literal<IDragContext>({
 		pieceId,
 		piece,
 
+		enabled,
+
 		startDrag,
 		setHoveredPart,
 	})

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

@@ -122,6 +122,9 @@ export const SourceLayerItem = (props: Readonly<ISourceLayerItemProps>): JSX.Ele
 	const [rightAnchoredWidth, setRightAnchoredWidth] = useState<number>(0)
 
 	const dragCtx = useContext(dragContext)
+	const hasDraggableElement = !!piece.instance.piece.userEditOperations?.find(
+		(op) => op.type === UserEditingType.SOFIE && op.id === DefaultUserOperationsTypes.RETIME_PIECE
+	)
 
 	const state = {
 		highlight,
@@ -193,25 +196,11 @@ export const SourceLayerItem = (props: Readonly<ISourceLayerItemProps>): JSX.Ele
 		(e: React.MouseEvent<HTMLDivElement>) => {
 			e.preventDefault()
 			e.stopPropagation()
-			console.log(
-				'mousedown',
-				UserEditingType.SOFIE,
-				DefaultUserOperationsTypes,
-				piece.instance.piece.userEditOperations?.map(
-					(op) => op.type === UserEditingType.SOFIE && op.id === '__sofie-retime-piece'
-				)
-			)
 
-			if (
-				!piece.instance.piece.userEditOperations?.find(
-					// (op) => op.type === UserEditingType.SOFIE && op.id === DefaultUserOperationsTypes.RETIME_PIECE
-					(op) => op.type === UserEditingType.SOFIE && op.id === '__sofie-retime-piece'
-				)
-			)
-				return
+			if (!hasDraggableElement) return
 
 			const targetPos = (e.target as HTMLDivElement).getBoundingClientRect()
-			if (dragCtx)
+			if (dragCtx && dragCtx.enabled)
 				dragCtx.startDrag(
 					piece,
 					timeScale,
@@ -223,7 +212,7 @@ export const SourceLayerItem = (props: Readonly<ISourceLayerItemProps>): JSX.Ele
 					part.instance.segmentId
 				)
 		},
-		[piece, timeScale]
+		[piece, timeScale, dragCtx]
 	)
 	const itemMouseUp = useCallback((e: any) => {
 		const eM = e as MouseEvent
@@ -614,8 +603,10 @@ export const SourceLayerItem = (props: Readonly<ISourceLayerItemProps>): JSX.Ele
 					layer.type,
 					part.partId,
 					highlight,
-					elementWidth
+					elementWidth,
 					// this.state
+					undefined,
+					hasDraggableElement && dragCtx?.enabled
 				)}
 				data-obj-id={piece.instance._id}
 				ref={setRef}