Drag And Drop component affects other components

General JUCE discussion
1

Hi there,

I am developping a simple color palette for a larger app. I draw squares which colours’ can change. These items are draggable, so that the user can reset them by dragging them to a bin. Everything works fine when I set the squares colours by using g.fillAll(appropriateColour).

However for design purposes I am willing to draw rounded rectanlges. No issue with the drawing itself whatsoever. But when I drag these rounded rectangle they leave a dark mark on the other coloured components. I am using a custom class for the buttons which inherits from juce::DrawableButton and juce::DragAndDropContainer.

I’ve tried (among other things) to fill the whole button clip region with a transparent colour and then filling a rounded rectangle over it, without success. I’ve also tried to reduce the clip region according to a path representing a rounded rectangle, also without success.

I’ll attach an image to show what is happening. Of course I can provide you with code samples if needed.

Capture

Cheers,

Josh

2

I had a quick go at reproducing the problem, but wasn’t able to. Please could you provide a minimal code example demonstrating your approach?

I’m not sure whether I understand your post - are you saying that each individual colour swatch inherits from DragAndDropContainer? I don’t think this should be necessary. Normally the Container would be an outer component which contains all of the inner draggable components:

struct Swatch : public juce::Component
{
    Swatch (juce::DragAndDropContainer& containerIn)
        : container (containerIn)
    {}

    void paint (juce::Graphics& g) override
    {
        g.fillAll (fill);
    }

    void mouseDown (const juce::MouseEvent&) override
    {
        container.startDragging ({}, this);
    }

    juce::DragAndDropContainer& container;
    juce::Random random;
    juce::Colour fill = juce::Colour::fromHSL (random.nextFloat(), 0.5f, 0.5f, 1.0f);
};

class MainComponent : public juce::Component,
                      public juce::DragAndDropContainer
{
public:
    MainComponent()
    {
        setSize (600, 400);

        addAndMakeVisible (a);
        addAndMakeVisible (b);
        addAndMakeVisible (c);
    }

    void paint (juce::Graphics& g)
    {
        g.fillAll (getLookAndFeel().findColour (juce::ResizableWindow::backgroundColourId));
    }

    void resized()
    {
        const auto getItem = [&] (auto& item)
        {
            return juce::FlexItem { item }.withFlex (1.0f).withMargin ({ 20.0f });
        };

        juce::FlexBox g;
        g.items = { getItem (a), getItem (b), getItem (c) };
        g.performLayout (getLocalBounds());
    }

private:
    Swatch a { *this }, b { *this }, c { *this };
};