DraggableComponent constraints position on the screen

General JUCE discussion
1

Hi,
I am having trubles tryind to adding a limit constrainer on the area in which one or more objects can be dragged.

image
image901×643 11.1 KB

Goal : The central sphere (the second) must not be able to be dragged, respectively, beyond the left of the first and beyond the right of the third.

The Dragger component represents the sphere that you can drag on the screen.
It also has two member variables :

  1. ComponentBoundsConstrainer constrainer

  2. ComponentDragger d

So in the resized() method the setMinimumOnscreenAmounts() is called on constrainer to enforce the component’s bounds not go off the screen of a certain size.

Dragger::Dragger(MyComponent* m)
{
    this->myComp = m;
    setSize(15, 15);
    setRepaintsOnMouseActivity(true);
}

Dragger::~Dragger()
{
}

void Dragger::paint(juce::Graphics&g) {
    g.setColour(Colours::white);
    g.fillEllipse(getLocalBounds().reduced(2).toFloat());
}
void Dragger::resized() {
    constrainer.setMinimumOnscreenAmounts(getHeight() / 2.0f + 1, getWidth(), getHeight() / 2.0f - 1, getWidth());
}

void Dragger::moved() {
    if (isMouseButtonDown()) {
        relativePos = getBounds().getCentre().toFloat() / Point<int>(getParentWidth(), getParentHeight()).toFloat();
        myComp->repaint();
    }
}

void Dragger::mouseDown(const MouseEvent& e) {
        d.startDraggingComponent(this, e);
}

void Dragger::mouseDrag(const MouseEvent& e) {
    d.dragComponent(this, e, &constrainer);
}

The MyComponent is simply a class that contains an OwnedArray of Dragger objects.

MyComponent::MyComponent()
{
    Array<float> rPosX = { 0.1f,0.3f,0.7f };
    for (int i = 0; i < 3; ++i)
    {
        auto* d = new Dragger(this);
        d->relativePos = { rPosX[i],rPosX[i] };
        addAndMakeVisible(draggers.add(d));
    }

}

MyComponent::~MyComponent()
{
}

void MyComponent::paint (juce::Graphics& g)
{
    g.setColour(Colours::white);
    for (auto* d : draggers) {
        g.drawLine(d->getBounds().getCentre().getX(), 0, d->getBounds().getCentre().getX(), getHeight());
    }
}

void MyComponent::resized()
{
    for (auto* d : draggers) {
        d->setCentrePosition(proportionOfWidth(d->relativePos.x), proportionOfHeight(d->relativePos.y));
    }

}

Now the question is : Which constrained methods should I use to achieve this goal? what logic should i follow?

2

Hello, have you ever figured this out? I’m stuck with exactly the same problem.

3

Hi,
I can say yes…
Using the tracktion_engine you can fin a class named CurveEditor where this kind of problem is solved.
That class bases it’s behaviour on components called CurvePoint but you can customize it.
So i’ve created a subclass to slightly customize it’s behaviour.