[Completed*] Add an `Drop Hover Preview Item View` Component which is similar to `Equipped Item View`

Justus

Member
there are two components could help us customize the appearance of drag target slot and Drag Off View
- Drop Hover Icon Preview Item View
- Drag Off View

1651673490028.png

1. Sometimes we may want to not only change the color of a image of preview, but also want to show something special.
The similar concept has already be implement by `Equipped Item View` and `Select View`.
1651673678851.png

Could you please help to add `Drop Hover Preview Item View` which allow us indicate multiple gameobjects that:
- Enabled On `No Condition Passed`
- Enabled On `Condition Passed`

2. For Drag Off View, we may need an enhancement that allow us:
- Enabled On Drag
- Enabled One Left Over (though I don't know what is `Left Over`)

3. the (1) is about the target slot(preview), the (2)is about the mouse/cursor (dragging), is there anything allow us customize the drag source?
for example, I want to add a special frame for drag source slot, or change its background to other appearance.
 
An Example for `Source Slot` appearance customization. The source slot which is waiting the end of moving operation has Blue and a special frame before the operation truely done.
1651674608093.png
 
These are all very good ideas. I'll add it all.

1) I made a lot of changes hopefully now you'll have the options you need

2) Same here, I also renamed the fields such that they are easier to understand "DragMoving" & "DragSource"

3) DragOffView allows you to do that. It was the "LeftOver" fields, which are now renamend to "DragSource "

If you need any other changes or if something doesn't work as it should do let me know
 

Attachments

  • DropHoverIconPreviewItemView.cs
    8.5 KB · Views: 1
  • DragOffView.cs
    5 KB · Views: 1
They works well. But there is still one thing missing.
Could you please provide an new option for `Do Not Preview In Source if Destination is Null`?
if there is nothing in Destination slot, I don't want the `empty` be previewed in the Source slot, I prefered that Source Slot still shows the item at this situation.
1651748000947.png
 
Give this a try:

Code:
[Tooltip("Should the Item View Destination show the item within the source Item View if the Destination is Null.")]
[SerializeField] protected bool m_DoNotPreviewInSourceIfDestinationIsNull;


....

....


/// <summary>
/// Preview the source.
/// </summary>
/// <param name="dropHandler">The drop handler info.</param>
/// <param name="dropIndex">The drop index</param>
/// <param name="selected">Is the view selected.</param>
protected virtual void TryPreviewInSource(ItemViewDropHandler dropHandler, int dropIndex, bool selected)
{
    if (m_DoNotPreviewInSource
        || (m_DoNotPreviewInSourceIfDestinationIsNull && ItemInfo.Item == null)) {
        return;
    }
    
    var sourceViewModules = dropHandler.SlotCursorManager.SourceItemViewSlot.ItemView.Modules;
    var previewItemInfo = selected ? ItemInfo : ItemInfo.None;
    for (int i = 0; i < sourceViewModules.Count; i++) {
        if (!(sourceViewModules[i] is ItemViewModule itemViewModule)) { continue; }
        itemViewModule.SetValue(previewItemInfo);
    }
}


(I'm looking into the other problem)
 
I've added a feature scene for drag&drop in the next update.
I've tested it and it works both with Drag&Drop and Move Item Action. (I had to fix a bug with move action but I don't think it is related to the things you metioned above)

I have a list of other things I need to fix. Once I do I'll release an update, hopefully this will be early next week, but I'm not making any promises.
 
Give this a try:

Code:
[Tooltip("Should the Item View Destination show the item within the source Item View if the Destination is Null.")]
[SerializeField] protected bool m_DoNotPreviewInSourceIfDestinationIsNull;


....

....


/// <summary>
/// Preview the source.
/// </summary>
/// <param name="dropHandler">The drop handler info.</param>
/// <param name="dropIndex">The drop index</param>
/// <param name="selected">Is the view selected.</param>
protected virtual void TryPreviewInSource(ItemViewDropHandler dropHandler, int dropIndex, bool selected)
{
    if (m_DoNotPreviewInSource
        || (m_DoNotPreviewInSourceIfDestinationIsNull && ItemInfo.Item == null)) {
        return;
    }
   
    var sourceViewModules = dropHandler.SlotCursorManager.SourceItemViewSlot.ItemView.Modules;
    var previewItemInfo = selected ? ItemInfo : ItemInfo.None;
    for (int i = 0; i < sourceViewModules.Count; i++) {
        if (!(sourceViewModules[i] is ItemViewModule itemViewModule)) { continue; }
        itemViewModule.SetValue(previewItemInfo);
    }
}


(I'm looking into the other problem)
m_DoNotPreviewInSourceIfDestinationIsNull didn't work as expectation.

If you drag a Item to an empty slot. like this, the ItemInfo.Item will always be the draging item, not null. so the source slot still shows empty.
1651806700340.png1651806800046.png
 
Could you try this instead?

Code:
/// <summary>
/// Preview the source.
/// </summary>
/// <param name="dropHandler">The drop handler info.</param>
/// <param name="dropIndex">The drop index</param>
/// <param name="selected">Is the view selected.</param>
protected virtual void TryPreviewInSource(ItemViewDropHandler dropHandler, int dropIndex, bool selected)
{
    if (m_DoNotPreviewInSource
        || (m_DoNotPreviewInSourceIfDestinationIsNull && dropHandler.DestinationItemInfo.Item == null)) {
        return;
    }
    
    var sourceViewModules = dropHandler.SlotCursorManager.SourceItemViewSlot.ItemView.Modules;
    var previewItemInfo = selected ? dropHandler.DestinationItemInfo : ItemInfo.None;
    for (int i = 0; i < sourceViewModules.Count; i++) {
        if (!(sourceViewModules[i] is ItemViewModule itemViewModule)) { continue; }
        itemViewModule.SetValue(previewItemInfo);
    }
}
 
Could you try this instead?

Code:
/// <summary>
/// Preview the source.
/// </summary>
/// <param name="dropHandler">The drop handler info.</param>
/// <param name="dropIndex">The drop index</param>
/// <param name="selected">Is the view selected.</param>
protected virtual void TryPreviewInSource(ItemViewDropHandler dropHandler, int dropIndex, bool selected)
{
    if (m_DoNotPreviewInSource
        || (m_DoNotPreviewInSourceIfDestinationIsNull && dropHandler.DestinationItemInfo.Item == null)) {
        return;
    }
   
    var sourceViewModules = dropHandler.SlotCursorManager.SourceItemViewSlot.ItemView.Modules;
    var previewItemInfo = selected ? dropHandler.DestinationItemInfo : ItemInfo.None;
    for (int i = 0; i < sourceViewModules.Count; i++) {
        if (!(sourceViewModules[i] is ItemViewModule itemViewModule)) { continue; }
        itemViewModule.SetValue(previewItemInfo);
    }
}
This code makes some change. Only the first time you drag an item to empty slot, it will work as the expectation.
- If you drag-hovering to an non-empty slot, this feature will not work forever
- If you release your mouse button on an empty slot and the a move action down, this feature will not work forever

Example:
1) first time draggin to an empty slot
1651824710851.png
2) second time dragging <------------BUG now
1651824760269.png
3) first time dragging, button has hovered over an non-empty slot <----------------BUG now
1651824862062.png
 
Ok, I made sure to test it thouroughly this time. This should work:
Code:
/// <summary>
/// Preview the source.
/// </summary>
/// <param name="dropHandler">The drop handler info.</param>
/// <param name="dropIndex">The drop index</param>
/// <param name="selected">Is the view selected.</param>
protected virtual void TryPreviewInSource(ItemViewDropHandler dropHandler, int dropIndex, bool selected)
{
    if (selected &&
        (m_DoNotPreviewInSource
         || (m_DoNotPreviewInSourceIfDestinationIsNull && dropHandler.DestinationItemInfo.Item == null))) {
        return;
    }
    
    var sourceViewModules = dropHandler.SlotCursorManager.SourceItemViewSlot.ItemView.Modules;
    var previewItemInfo = selected ? dropHandler.DestinationItemInfo : dropHandler.SourceItemInfo;
    for (int i = 0; i < sourceViewModules.Count; i++) {
        if (!(sourceViewModules[i] is ItemViewModule itemViewModule)) { continue; }
        itemViewModule.SetValue(previewItemInfo);
    }
}
 
Ok, I made sure to test it thouroughly this time. This should work:
Code:
/// <summary>
/// Preview the source.
/// </summary>
/// <param name="dropHandler">The drop handler info.</param>
/// <param name="dropIndex">The drop index</param>
/// <param name="selected">Is the view selected.</param>
protected virtual void TryPreviewInSource(ItemViewDropHandler dropHandler, int dropIndex, bool selected)
{
    if (selected &&
        (m_DoNotPreviewInSource
         || (m_DoNotPreviewInSourceIfDestinationIsNull && dropHandler.DestinationItemInfo.Item == null))) {
        return;
    }
   
    var sourceViewModules = dropHandler.SlotCursorManager.SourceItemViewSlot.ItemView.Modules;
    var previewItemInfo = selected ? dropHandler.DestinationItemInfo : dropHandler.SourceItemInfo;
    for (int i = 0; i < sourceViewModules.Count; i++) {
        if (!(sourceViewModules[i] is ItemViewModule itemViewModule)) { continue; }
        itemViewModule.SetValue(previewItemInfo);
    }
}
This works well. We have quite decent drag & drop preview feature now.

The rest problem is only the Item Action - Move (moved by Move Cursor) could not show source preview collectly.

Let's clarify this issue

1. (works well condition) If I bind the Move action to an dedicated button, and trigger it directly(without open action panel), everything works well, like this:
1651831225740.png
1651831358467.png
move by D-pad of controller or mouse hovering
1651831311930.png
2. (BUG condition) if I open the `Item Action Panel` first and then click the `Move` action button. then the MoveSource slot will not show preview correctly.
 
When I test it in my test scene it works correctly. So I'm not sure what is going on. Since I've been making a few changes it is possible that I fixed this without realising it. Or that you have setup you ItemView modules different than mine.

As soon as I can I'll send you an early version of the update so that you can test it out and tell me if this is still an issue. If so I'll then you can show me how to reproduce it in the new feature scene
 
Found the direct cause, and there is the reproduce steps for the "DragSource" preview not working issue.
1. open the feature demo `1_3 Drag&Drop and Move Item`
2. delete the Move Cursor unbinding setting.
1651905354995.png

3. enter the play mode, use the `Item Action Panel` to trigger moving, the source preview not work now <-----------------------------BUG
1) (works well ) dragging via mouse
1651905482526.png
2) (BUG) move via the `Move` button on `Item Action Panel`
1651905650358.png
 
You need to unbind the Item Action panel, otherwise you'll have the action panel popup at the moment of placing the item.
As for why the preview doesn't appear without unbinding I am not sure
 
the feature itself work well, so I mark this thread as Completed.
For the preview disappear issue, still need further fix.
 
Top