feat: edit mode for drag operations

Author: Mint de Wit

packages/blueprints-integration/src/triggers.ts

@@ -265,6 +265,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[]
@@ -318,6 +324,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 @@ class RundownViewEventBus0 extends EventEmitter {
 	emit(event: RundownViewEvents.SEGMENT_ZOOM_ON): boolean
 	emit(event: RundownViewEvents.SEGMENT_ZOOM_OFF): boolean
 	emit(event: RundownViewEvents.SHELF_STATE, e: ShelfStateEvent): boolean
+	emit(event: RundownViewEvents.EDIT_MODE, e: EditModeEvent): boolean
 	emit(event: RundownViewEvents.REVEAL_IN_SHELF, e: RevealInShelfEvent): boolean
 	emit(event: RundownViewEvents.SWITCH_SHELF_TAB, e: SwitchToShelfTabEvent): boolean
 	emit(event: RundownViewEvents.MINI_SHELF_QUEUE_ADLIB, e: MiniShelfQueueAdLibEvent): boolean
@@ -175,6 +181,7 @@ class RundownViewEventBus0 extends EventEmitter {
 	on(event: RundownViewEvents.SEGMENT_ZOOM_OFF, listener: () => void): this
 	on(event: RundownViewEvents.REVEAL_IN_SHELF, listener: (e: RevealInShelfEvent) => void): this
 	on(event: RundownViewEvents.SHELF_STATE, listener: (e: ShelfStateEvent) => void): this
+	on(event: RundownViewEvents.EDIT_MODE, listener: (e: EditModeEvent) => void): this
 	on(event: RundownViewEvents.SWITCH_SHELF_TAB, listener: (e: SwitchToShelfTabEvent) => void): this
 	on(event: RundownViewEvents.MINI_SHELF_QUEUE_ADLIB, listener: (e: MiniShelfQueueAdLibEvent) => void): this
 	on(event: RundownViewEvents.GO_TO_PART, listener: (e: GoToPartEvent) => void): this

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

@@ -287,6 +287,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,
@@ -443,6 +454,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

@@ -104,6 +104,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

@@ -3,16 +3,20 @@
 $glow-color: rgba(255, 255, 255, 0.58);
 
 .element-selected {
-    box-shadow: inset 0 0 15px $glow-color;
-    animation: subtle-glow 1s ease-in-out infinite;
+	box-shadow: inset 0 0 15px $glow-color;
+	animation: subtle-glow 1s ease-in-out infinite;
 
-    @keyframes subtle-glow {
-        0%, 100% {
-            box-shadow: inset 0 0 15px $glow-color;
-        }
-        50% {
-            box-shadow: inset 0 0 25px $glow-color,
-                        inset 0 0 35px $glow-color;
-        }
-    }
-}
+	@keyframes subtle-glow {
+		0%,
+		100% {
+			box-shadow: inset 0 0 15px $glow-color;
+		}
+		50% {
+			box-shadow: inset 0 0 25px $glow-color, inset 0 0 35px $glow-color;
+		}
+	}
+}
+
+.draggable-element {
+	border: dotted white 1px;
+}