Add ability to convert items between types and UX improvements for context menus (#106)

* Update dependencies

Signed-off-by: Axel Boberg <git@axelboberg.se>

* Remove a call to populate item data when dropped into the rundown by moving it to createItem

Signed-off-by: Axel Boberg <git@axelboberg.se>

* Add ability to convert items to other types through the rundown

Signed-off-by: Axel Boberg <git@axelboberg.se>

* Update changelog

Signed-off-by: Axel Boberg <git@axelboberg.se>

* Keep tinting ancestor menu items in context menus when their child menus are opened

Signed-off-by: Axel Boberg <git@axelboberg.se>

* Update changelog

Signed-off-by: Axel Boberg <git@axelboberg.se>

---------

Signed-off-by: Axel Boberg <git@axelboberg.se>

Author: axelboberg

CHANGELOG.md

@@ -3,6 +3,8 @@
 ## 1.0.0-beta.9 - [UNRELEASED]
 ### Added
 - Support for named urls when sharing links to workspaces
+- Ability to convert items to other types by right-clicking
+- Ancestor items in context menus now stay tinted when their child menus are opened
 ### Fixed
 - An issue where the inspector started to scroll horisontally on overflow
 - Closing electron windows may cause a loop preventing user defaults from being saved

app/components/ContextMenuItem/index.jsx

@@ -20,7 +20,15 @@ const MOUSE_LEAVE_DELAY_MS = 150
 
 export const ContextMenuItem = ({ text, children = [], onClick = () => {} }) => {
   const elRef = React.useRef()
+
+  /*
+  Delayed hover is used for preventing unmounting of
+  child menus when the cursor leaves the item,
+  regular hover is used for tinting the item
+  */
+  const [delayedHover, setDelayedHover] = React.useState(false)
   const [hover, setHover] = React.useState(false)
+
   const childArr = Array.isArray(children) ? children : [children]
 
   const timeoutRef = React.useRef()
@@ -29,12 +37,14 @@ export const ContextMenuItem = ({ text, children = [], onClick = () => {} }) =>
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current)
     }
+    setDelayedHover(true)
     setHover(true)
   }
 
   function handleMouseLeave () {
+    setHover(false)
     timeoutRef.current = setTimeout(() => {
-      setHover(false)
+      setDelayedHover(false)
     }, MOUSE_LEAVE_DELAY_MS)
   }
 
@@ -45,6 +55,7 @@ export const ContextMenuItem = ({ text, children = [], onClick = () => {} }) =>
   }
 
   function handleFocus (e) {
+    setDelayedHover(true)
     setHover(true)
   }
 
@@ -53,7 +64,7 @@ export const ContextMenuItem = ({ text, children = [], onClick = () => {} }) =>
   return (
     <div
       ref={elRef}
-      className='ContextMenuItem'
+      className={`ContextMenuItem ${hover ? 'is-hovered' : ''}`}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       onClick={() => onClick()}
@@ -69,7 +80,7 @@ export const ContextMenuItem = ({ text, children = [], onClick = () => {} }) =>
         <Icon name='arrowRight' color='black' />
       }
       {
-        hover && childArr.length > 0
+        delayedHover && childArr.length > 0
           ? (
             <ContextMenu x={bounds?.x + CTX_MENU_OFFSET_X_PX} y={bounds?.y + bounds?.height / 2}>
               {children}

app/components/ContextMenuItem/style.css

@@ -29,7 +29,8 @@
   --base-color: black;
 }
 
-.ContextMenuItem:hover > .ContextMenuItem-text {
+.ContextMenuItem:hover > .ContextMenuItem-text,
+.ContextMenuItem.is-hovered > .ContextMenuItem-text {
   background: rgb(228, 228, 228);
 }
 

package-lock.json

@@ -281,9 +281,7 @@ export function RundownList ({
           console.warn('Dropped spec is missing type')
           return
         }
-        const itemId = await bridge.items.createItem(spec.type)
-
-        bridge.items.applyItem(itemId, spec)
+        const itemId = await bridge.items.createItem(spec.type, spec?.data)
         bridge.commands.executeCommand('rundown.moveItem', rundownId, newIndex, itemId)
       } catch (_) {
         console.warn('Tried to drop an invalid spec')

plugins/rundown/app/components/RundownList/index.jsx

@@ -128,6 +128,11 @@ export function RundownListItem ({
         label: 'Add after',
         children: contextMenu.generateAddContextMenuItems(types, typeId => handleAdd(typeId))
       },
+      {
+        type: 'item',
+        label: 'Convert to',
+        children: contextMenu.generateAddContextMenuItems(types, typeId => handleConvertTo(typeId))
+      },
       {
         type: 'item',
         label: 'Create reference',
@@ -189,6 +194,16 @@ export function RundownListItem ({
     bridge.commands.executeCommand('rundown.moveItem', rundownId, index + 1, itemId)
   }
 
+  async function handleConvertTo (typeId) {
+    if (!item?.id) {
+      return
+    }
+
+    await bridge.items.applyItem(item?.id, {
+      type: typeId
+    })
+  }
+
   async function handleCreateReference () {
     const newItemId = await bridge.items.createItem('bridge.types.reference')