Skip to content

Commit 7b974c5

Browse files
kunitokikunitoki
committed
Improved artboard viewTransform
1 parent 10beedf commit 7b974c5

File tree

3 files changed

+305
-17
lines changed

3 files changed

+305
-17
lines changed

‎examples/graphics/source/examples/Artboard.h‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ class ArtboardDemo : public yup::Component
2929
ArtboardDemo()
3030
{
3131
setWantsKeyboardFocus (true);
32+
setupControls();
3233
}
3334

3435
bool loadArtboard()
@@ -64,6 +65,8 @@ class ArtboardDemo : public yup::Component
6465
addAndMakeVisible (art);
6566

6667
art->setFile (artboardFile.getValue());
68+
art->setLayout (getSelectedLayout());
69+
art->setAlignment (getSelectedAlignment());
6770

6871
art->advanceAndApply (i * art->durationSeconds());
6972
}
@@ -85,6 +88,21 @@ class ArtboardDemo : public yup::Component
8588
return;
8689

8790
auto bounds = getLocalBounds().reduced (10, 20);
91+
auto controls = bounds.removeFromTop (30);
92+
93+
auto labelHeight = 20;
94+
auto comboHeight = 24;
95+
auto labelWidth = 70;
96+
auto comboWidth = 170;
97+
auto spacing = 12;
98+
99+
fitLabel.setBounds (controls.removeFromLeft (labelWidth).withHeight (labelHeight));
100+
fitCombo.setBounds (controls.removeFromLeft (comboWidth).withHeight (comboHeight));
101+
controls.removeFromLeft (spacing);
102+
alignmentLabel.setBounds (controls.removeFromLeft (labelWidth).withHeight (labelHeight));
103+
alignmentCombo.setBounds (controls.removeFromLeft (comboWidth).withHeight (comboHeight));
104+
105+
bounds.removeFromTop (10);
88106
auto width = bounds.getWidth() / totalColumns;
89107
auto height = bounds.getHeight() / totalRows;
90108

@@ -106,7 +124,119 @@ class ArtboardDemo : public yup::Component
106124
}
107125

108126
private:
127+
void setupControls()
128+
{
129+
auto labelFont = yup::ApplicationTheme::getGlobalTheme()->getDefaultFont().withHeight (12.0f);
130+
131+
fitLabel.setText ("Fit", yup::dontSendNotification);
132+
fitLabel.setFont (labelFont);
133+
addAndMakeVisible (fitLabel);
134+
135+
fitCombo.addItem ("Fill", 1);
136+
fitCombo.addItem ("Contain", 2);
137+
fitCombo.addItem ("Cover", 3);
138+
fitCombo.addItem ("Fit Width", 4);
139+
fitCombo.addItem ("Fit Height", 5);
140+
fitCombo.addItem ("None", 6);
141+
fitCombo.addItem ("Scale Down", 7);
142+
fitCombo.addItem ("Layout", 8);
143+
fitCombo.setSelectedId (2);
144+
fitCombo.onSelectedItemChanged = [this]
145+
{
146+
updateArtboardsLayout();
147+
};
148+
addAndMakeVisible (fitCombo);
149+
150+
alignmentLabel.setText ("Align", yup::dontSendNotification);
151+
alignmentLabel.setFont (labelFont);
152+
addAndMakeVisible (alignmentLabel);
153+
154+
alignmentCombo.addItem ("Top Left", 1);
155+
alignmentCombo.addItem ("Top Center", 2);
156+
alignmentCombo.addItem ("Top Right", 3);
157+
alignmentCombo.addItem ("Center Left", 4);
158+
alignmentCombo.addItem ("Center", 5);
159+
alignmentCombo.addItem ("Center Right", 6);
160+
alignmentCombo.addItem ("Bottom Left", 7);
161+
alignmentCombo.addItem ("Bottom Center", 8);
162+
alignmentCombo.addItem ("Bottom Right", 9);
163+
alignmentCombo.setSelectedId (5);
164+
alignmentCombo.onSelectedItemChanged = [this]
165+
{
166+
updateArtboardsLayout();
167+
};
168+
addAndMakeVisible (alignmentCombo);
169+
}
170+
171+
yup::Artboard::Layout getSelectedLayout() const
172+
{
173+
switch (fitCombo.getSelectedId())
174+
{
175+
case 1:
176+
return yup::Artboard::Layout::fill;
177+
case 2:
178+
return yup::Artboard::Layout::contain;
179+
case 3:
180+
return yup::Artboard::Layout::cover;
181+
case 4:
182+
return yup::Artboard::Layout::fitWidth;
183+
case 5:
184+
return yup::Artboard::Layout::fitHeight;
185+
case 6:
186+
return yup::Artboard::Layout::none;
187+
case 7:
188+
return yup::Artboard::Layout::scaleDown;
189+
case 8:
190+
return yup::Artboard::Layout::layout;
191+
}
192+
193+
return yup::Artboard::Layout::contain;
194+
}
195+
196+
yup::Artboard::Alignment getSelectedAlignment() const
197+
{
198+
switch (alignmentCombo.getSelectedId())
199+
{
200+
case 1:
201+
return yup::Artboard::Alignment::topLeft;
202+
case 2:
203+
return yup::Artboard::Alignment::topCenter;
204+
case 3:
205+
return yup::Artboard::Alignment::topRight;
206+
case 4:
207+
return yup::Artboard::Alignment::centerLeft;
208+
case 5:
209+
return yup::Artboard::Alignment::center;
210+
case 6:
211+
return yup::Artboard::Alignment::centerRight;
212+
case 7:
213+
return yup::Artboard::Alignment::bottomLeft;
214+
case 8:
215+
return yup::Artboard::Alignment::bottomCenter;
216+
case 9:
217+
return yup::Artboard::Alignment::bottomRight;
218+
}
219+
220+
return yup::Artboard::Alignment::center;
221+
}
222+
223+
void updateArtboardsLayout()
224+
{
225+
auto newLayout = getSelectedLayout();
226+
auto newAlignment = getSelectedAlignment();
227+
228+
for (auto* artboard : artboards)
229+
{
230+
artboard->setLayout (newLayout);
231+
artboard->setAlignment (newAlignment);
232+
}
233+
}
234+
109235
yup::OwnedArray<yup::Artboard> artboards;
236+
yup::Label fitLabel;
237+
yup::ComboBox fitCombo;
238+
yup::Label alignmentLabel;
239+
yup::ComboBox alignmentCombo;
110240
int totalRows = 1;
111241
int totalColumns = 1;
112242
};

‎modules/yup_gui/artboard/yup_Artboard.cpp‎

Lines changed: 115 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,62 @@
2222
namespace yup
2323
{
2424

25+
//==============================================================================
26+
namespace
27+
{
28+
rive::Fit toRiveFit (Artboard::Layout layout)
29+
{
30+
switch (layout)
31+
{
32+
case Artboard::Layout::fill:
33+
return rive::Fit::fill;
34+
case Artboard::Layout::contain:
35+
return rive::Fit::contain;
36+
case Artboard::Layout::cover:
37+
return rive::Fit::cover;
38+
case Artboard::Layout::fitWidth:
39+
return rive::Fit::fitWidth;
40+
case Artboard::Layout::fitHeight:
41+
return rive::Fit::fitHeight;
42+
case Artboard::Layout::none:
43+
return rive::Fit::none;
44+
case Artboard::Layout::scaleDown:
45+
return rive::Fit::scaleDown;
46+
case Artboard::Layout::layout:
47+
return rive::Fit::layout;
48+
}
49+
50+
return rive::Fit::contain;
51+
}
52+
53+
rive::Alignment toRiveAlignment (Artboard::Alignment alignment)
54+
{
55+
switch (alignment)
56+
{
57+
case Artboard::Alignment::topLeft:
58+
return rive::Alignment::topLeft;
59+
case Artboard::Alignment::topCenter:
60+
return rive::Alignment::topCenter;
61+
case Artboard::Alignment::topRight:
62+
return rive::Alignment::topRight;
63+
case Artboard::Alignment::centerLeft:
64+
return rive::Alignment::centerLeft;
65+
case Artboard::Alignment::center:
66+
return rive::Alignment::center;
67+
case Artboard::Alignment::centerRight:
68+
return rive::Alignment::centerRight;
69+
case Artboard::Alignment::bottomLeft:
70+
return rive::Alignment::bottomLeft;
71+
case Artboard::Alignment::bottomCenter:
72+
return rive::Alignment::bottomCenter;
73+
case Artboard::Alignment::bottomRight:
74+
return rive::Alignment::bottomRight;
75+
}
76+
77+
return rive::Alignment::center;
78+
}
79+
} // namespace
80+
2581
//==============================================================================
2682

2783
Artboard::Artboard (StringRef componentID)
@@ -59,6 +115,39 @@ void Artboard::clear()
59115
stateMachine = nullptr;
60116

61117
eventProperties.clear();
118+
viewTransform = rive::Mat2D();
119+
}
120+
121+
//==============================================================================
122+
123+
void Artboard::setLayout (Layout newLayout)
124+
{
125+
if (layout == newLayout)
126+
return;
127+
128+
layout = newLayout;
129+
updateViewTransform();
130+
repaint();
131+
}
132+
133+
Artboard::Layout Artboard::getLayout() const
134+
{
135+
return layout;
136+
}
137+
138+
void Artboard::setAlignment (Alignment newAlignment)
139+
{
140+
if (alignment == newAlignment)
141+
return;
142+
143+
alignment = newAlignment;
144+
updateViewTransform();
145+
repaint();
146+
}
147+
148+
Artboard::Alignment Artboard::getAlignment() const
149+
{
150+
return alignment;
62151
}
63152

64153
//==============================================================================
@@ -265,32 +354,23 @@ void Artboard::paint (Graphics& g)
265354

266355
auto* renderer = g.getRenderer();
267356

268-
renderer->save();
357+
auto transform = g.getTransform()
358+
.translated (g.getDrawingArea().getX(), g.getDrawingArea().getY())
359+
.scaled (g.getContextScale());
269360

361+
renderer->save();
362+
renderer->transform (transform.toMat2D());
270363
renderer->transform (viewTransform);
271364

272365
scene->draw (renderer);
273-
274366
renderer->restore();
275367
}
276368

277369
//==============================================================================
278370

279371
void Artboard::resized()
280372
{
281-
auto scaleDpi = getScaleDpi();
282-
auto scaledBounds = getBounds() * scaleDpi;
283-
auto frameBounds = scaledBounds.toAABB();
284-
285-
rive::AABB artboardBounds;
286-
if (artboard != nullptr)
287-
artboardBounds = artboard->bounds();
288-
289-
viewTransform = rive::computeAlignment (
290-
rive::Fit::contain,
291-
rive::Alignment::center,
292-
frameBounds,
293-
artboardBounds);
373+
updateViewTransform();
294374
}
295375

296376
//==============================================================================
@@ -416,6 +496,9 @@ void Artboard::updateSceneFromFile()
416496
scene = std::move (currentScene);
417497

418498
stateMachine = currentStateMachine;
499+
500+
updateViewTransform();
501+
repaint();
419502
}
420503

421504
//==============================================================================
@@ -466,10 +549,25 @@ void Artboard::pullEventsFromStateMachines()
466549

467550
Point<float> Artboard::transformPoint (Point<float> point) const
468551
{
469-
point *= getScaleDpi();
470-
471552
const auto xy = viewTransform.invertOrIdentity() * rive::Vec2D (point.getX(), point.getY());
472553
return { xy.x, xy.y };
473554
}
474555

556+
//==============================================================================
557+
558+
void Artboard::updateViewTransform()
559+
{
560+
if (artboard == nullptr)
561+
{
562+
viewTransform = rive::Mat2D();
563+
return;
564+
}
565+
566+
viewTransform = rive::computeAlignment (
567+
toRiveFit (layout),
568+
toRiveAlignment (alignment),
569+
getLocalBounds().toAABB(),
570+
artboard->bounds());
571+
}
572+
475573
} // namespace yup

0 commit comments

Comments
 (0)