Skip to content

Commit f8594f4

Browse files
author
Artem Chernyshev
committed
Flex layout implementation in progress
1 parent 2fe55e7 commit f8594f4

File tree

15 files changed

+843
-89
lines changed

15 files changed

+843
-89
lines changed

‎samples/simple/layouts.xml

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<style>
2+
@font-face {
3+
font-family: "DroidSans";
4+
src: local("../../../imgui/misc/fonts/DroidSans.ttf");
5+
}
6+
7+
@font-face {
8+
font-family: "MaterialIcons";
9+
src: local("../../../samples/fonts/MaterialIcons-Regular.ttf");
10+
unicode-range: U+E000-EB60;
11+
}
12+
13+
template {
14+
font-family: DroidSans;
15+
padding: 5px;
16+
}
17+
18+
.flex {
19+
display: flex;
20+
}
21+
22+
.flex-vertical {
23+
display: flex;
24+
flex-flow: vertical;
25+
}
26+
27+
.shape {
28+
background-color: #FFCC00;
29+
padding: 10px;
30+
font-size: 2rem;
31+
margin: 0.2em;
32+
border-radius: 5px;
33+
}
34+
35+
.shape:hover, .shape:active {
36+
background-color: #FFFFFF;
37+
color: #000000;
38+
}
39+
40+
.flex-0 {
41+
background-color: #777777;
42+
}
43+
44+
.flex-1 {
45+
background-color: #447733;
46+
flex-grow: 1;
47+
}
48+
49+
.flex-2 {
50+
background-color: #FFCC00;
51+
flex-grow: 2;
52+
}
53+
</style>
54+
55+
<template>
56+
<window name="Layouts Demo">
57+
<html>
58+
<body>
59+
Horizontal flex
60+
<div class="flex">
61+
<div class="shape flex-0" :style="'width: ' .. self.value .. 'px'" v-on:click="self.value = self.value + self.delta"> </div>
62+
<div class="shape flex-1">1</div>
63+
<div class="shape flex-2">2</div>
64+
</div>
65+
<div class="flex">
66+
<div class="shape flex-1">1</div>
67+
<div class="shape flex-0" :style="'width: ' .. self.value .. 'px'" v-on:click="self.value = self.value + self.delta"> </div>
68+
<div class="shape flex-2">2</div>
69+
</div>
70+
<div class="flex">
71+
<div class="shape flex-1">1</div>
72+
<div class="shape flex-2">2</div>
73+
<div class="shape flex-0" :style="'width: ' .. self.value .. 'px'" v-on:click="self.value = self.value + self.delta"> </div>
74+
</div>
75+
Vertical flex
76+
<div class="flex-vertical">
77+
<div class="shape flex-0" :style="'width: ' .. self.value .. 'px'" v-on:click="self.value = self.value + self.delta"> </div>
78+
<div class="shape flex-1">1</div>
79+
<div class="shape flex-2">2</div>
80+
</div>
81+
<div class="flex-vertical">
82+
<div class="shape flex-1">1</div>
83+
<div class="shape flex-0" :style="'width: ' .. self.value .. 'px'" v-on:click="self.value = self.value + self.delta"> </div>
84+
<div class="shape flex-2">2</div>
85+
</div>
86+
<div class="flex-vertical">
87+
<div class="shape flex-1">1</div>
88+
<div class="shape flex-2">2</div>
89+
<div class="shape flex-0" :style="'width: ' .. self.value .. 'px'" v-on:click="self.value = self.value + self.delta"> </div>
90+
</div>
91+
</body>
92+
</html>
93+
</window>
94+
</template>
95+
96+
<script>
97+
return ImVue.new({
98+
data = function()
99+
return {
100+
value = 50,
101+
delta = 20
102+
}
103+
end
104+
})
105+
</script>

‎samples/simple/main.cpp

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,8 @@ int main(int argc, char** argv)
107107
float scale = 1.5f;
108108

109109
ImGuiStyle& style = ImGui::GetStyle();
110+
style.FrameRounding = 5.0f;
111+
style.FrameBorderSize = 1.0f;
110112
style.ScaleAllSizes(scale);
111113

112114
// Setup Platform/Renderer bindings

‎samples/simple/standard_controls.xml

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<style>
2+
body {
3+
padding: 0.4em;
4+
font-size: 15px;
5+
}
6+
7+
window {
8+
padding: 0;
9+
}
10+
11+
body > *, collapsing-header > * {
12+
margin: 0.3em;
13+
padding: 0.3em;
14+
}
15+
16+
collapsing-header {
17+
padding: 0.4em;
18+
display: block;
19+
}
20+
21+
arrow-button {
22+
display: inline-block;
23+
}
24+
25+
plot-line {
26+
padding: 0.5em;
27+
}
28+
29+
</style>
30+
<template>
31+
<window name="main" style="position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px" :flags="ImGuiWindowFlags_NoMove + ImGuiWindowFlags_NoResize + ImGuiWindowFlags_NoBackground + ImGuiWindowFlags_NoTitleBar">
32+
<body style="background-color: rgba(0, 0, 0, 0.7)">
33+
<span>Built-in elements showcase</span>
34+
<collapsing-header label="inputs" :flags="ImGuiTreeNodeFlags_SpanFullWidth">
35+
<slider-angle v-rad="0.1">slider angle</slider-angle>
36+
<input-int v="10">input int 1</input-int>
37+
<input-int2 v="{1,2}">input int 2</input-int2>
38+
<input-int3 v="{1,2,3}">input int 3</input-int3>
39+
<input-double v="1.0">input double</input-double>
40+
<drag-int v="10">drag int 1</drag-int>
41+
<drag-int2 v="{1,2}">drag int 2</drag-int2>
42+
<drag-int4 v="{1,2,3,4}">drag int 4</drag-int4>
43+
<input-float v="10">input float 1</input-float>
44+
<input-float2 v="{1,2}">input float 2</input-float2>
45+
<input-float3 v="{1,2,3}">input float 3</input-float3>
46+
<input-float4 v="{1,2,3,4}">input float 4</input-float4>
47+
<input-text buf-size="1024">input text</input-text>
48+
<input-text-multiline buf-size="4086">Multiline text</input-text-multiline>
49+
</collapsing-header>
50+
<collapsing-header label="widgets">
51+
<combo label="combo box" preview-value="select something">
52+
<selectable>option 1</selectable>
53+
<selectable>option 2</selectable>
54+
</combo>
55+
<drag-float-range2 v-current-min="-10" v-current-max="10" v-speed="0.1">input float 4</drag-float-range2>
56+
<color-edit3 :col="{1, 1, 1}">color edit 3</color-edit3>
57+
<color-edit4 :col="{1, 1, 1, 1}">color edit 4</color-edit4>
58+
<radio-button v-on:click="self.option = 'option 1'" :active="self.option == 'option 1'">option 1</radio-button>
59+
<radio-button v-on:click="self.option = 'option 2'" :active="self.option == 'option 2'">option 2</radio-button>
60+
<radio-button v-on:click="self.option = 'option 3'" :active="self.option == 'option 3'">option 3</radio-button>
61+
<checkbox>checkbox</checkbox>
62+
</collapsing-header>
63+
<collapsing-header label="plots">
64+
<plot-lines values="{1,2,3,4,5,6}" values-count="5" graph-size="0, 200"/>
65+
<plot-histogram values="{1,2,3,4,5,6}" values-count="5" graph-size="0, 200"/>
66+
</collapsing-header>
67+
<collapsing-header label="imgui layouts">
68+
<!-- TODO: columns layout does not work, fix: disable layout for it -->
69+
<columns count="3" id="3 columns"/>
70+
<button>test1</button>
71+
<next-column/>
72+
<button>test2</button>
73+
<next-column/>
74+
<button>test3</button>
75+
<columns count="1"/>
76+
<button>next</button>
77+
<arrow-button dir="0" str-id="arrow1"/>
78+
<arrow-button dir="1" str-id="arrow1"/>
79+
<arrow-button dir="2" str-id="arrow1"/>
80+
<arrow-button dir="3" str-id="arrow1"/>
81+
</collapsing-header>
82+
</body>
83+
</window>
84+
</template>
85+
86+
<script>
87+
return ImVue.new({
88+
data = function()
89+
return {
90+
option = "option 2"
91+
}
92+
end
93+
})
94+
</script>

‎samples/simple/styled.xml

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,6 @@
2525
padding: 5px;
2626
}
2727

28-
span {
29-
margin-right: 0.2rem;
30-
}
31-
3228
div:not(:last-of-type) {
3329
margin-bottom: 0.5rem;
3430
}
@@ -220,7 +216,7 @@
220216
<span class="icon active"></span>
221217
</div>
222218
<div class="icon heart" v-on:click="self.toggle = not self.toggle">{{if self.toggle then return self.heartActive else return self.heartInactive end}}</div>
223-
<div class="btn">APPROVED<span class="icon"></span></div>
219+
<div class="btn test__">APPROVED<span class="icon test__"></span></div>
224220
<h3>Forms</h3>
225221
<div class="form">
226222
<label>Styled input example:</label>
@@ -257,7 +253,7 @@
257253
<span style="display: inline-block; padding: 5px; background-color: #FFCC00; color: black; border-radius: 5px" v-for="c in self.arr">{{c}}</span>
258254
<span v-if="#self.arr == 0">No choices yet</span>
259255
</div>
260-
<span class="icon" v-if="self.checked" style="position: absolute; right: 0px; bottom: 0px; color: #000000; background-color: #FFCC00; display: inline; padding: 0.3em; border-radius: 0.2em"></span>
256+
<span class="icon" v-if="self.checked" style="position: fixed; right: 0px; bottom: 0px; color: #000000; background-color: #FFCC00; display: inline; padding: 0.3em; border-radius: 0.2em"></span>
261257
</body>
262258
</html>
263259
</window>

‎src/css/select.cpp

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -360,6 +360,7 @@ namespace ImVue {
360360
return CSS_OK;
361361
}
362362

363+
// TODO: not implemented yet
363364
css_error node_has_attribute_dashmatch(void *pw, void *n,
364365
const css_qname *qname,
365366
lwc_string *value,
@@ -373,6 +374,7 @@ namespace ImVue {
373374
return CSS_OK;
374375
}
375376

377+
// TODO: not implemented yet
376378
css_error node_has_attribute_includes(void *pw, void *n,
377379
const css_qname *qname,
378380
lwc_string *value,
@@ -386,6 +388,7 @@ namespace ImVue {
386388
return CSS_OK;
387389
}
388390

391+
// TODO: not implemented yet
389392
css_error node_has_attribute_prefix(void *pw, void *n,
390393
const css_qname *qname,
391394
lwc_string *value,
@@ -399,6 +402,7 @@ namespace ImVue {
399402
return CSS_OK;
400403
}
401404

405+
// TODO: not implemented yet
402406
css_error node_has_attribute_suffix(void *pw, void *n,
403407
const css_qname *qname,
404408
lwc_string *value,
@@ -412,6 +416,7 @@ namespace ImVue {
412416
return CSS_OK;
413417
}
414418

419+
// TODO: not implemented yet
415420
css_error node_has_attribute_substring(void *pw, void *n,
416421
const css_qname *qname,
417422
lwc_string *value,

‎src/extras/xhtml.h

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,20 @@ namespace ImVue {
5656
}
5757
};
5858

59+
inline void addMaxPadding(Element* element)
60+
{
61+
ImVec2 max;
62+
if(element->style()->widthMode != CSS_WIDTH_SET) {
63+
max.x += element->padding[2];
64+
}
65+
66+
if(element->style()->heightMode != CSS_HEIGHT_SET) {
67+
max.y += element->padding[3];
68+
}
69+
70+
ImGui::SetCursorScreenPos(ImGui::GetItemRectMax() + max);
71+
}
72+
5973
/**
6074
* Base class for any html node
6175
*/
@@ -137,15 +151,25 @@ namespace ImVue {
137151
}
138152

139153
if(drawContent) {
140-
ContainerElement::renderBody();
154+
if(mChildren.size() == 0 && mStyle.heightMode == CSS_HEIGHT_AUTO) {
155+
ImVec2 p = ImGui::GetCursorScreenPos();
156+
ImVec2 s(0, size.y);
157+
if(s.y == 0) {
158+
s.y = ImGui::GetTextLineHeight();
159+
}
160+
ImRect bb(p, p + s);
161+
ImGui::ItemSize(s);
162+
ImGui::ItemAdd(bb, 0);
163+
} else {
164+
ContainerElement::renderBody();
165+
}
141166
}
142167

168+
addMaxPadding(this);
143169
if(useChild) {
144-
ImGui::SetCursorScreenPos(ImGui::GetItemRectMax() + pad.Max);
145170
mWidth = ImGui::GetItemRectSize().x + pad.Min.x + pad.Max.x;
146171
ImGui::EndChild();
147172
} else {
148-
ImGui::SetCursorScreenPos(ImGui::GetItemRectMax() + pad.Max);
149173
ImGui::EndGroup();
150174
}
151175
}
@@ -163,9 +187,9 @@ namespace ImVue {
163187
{
164188
// Resize string callback
165189
ImVector<char>* str = (ImVector<char>*)data->UserData;
166-
IM_ASSERT(data->Buf == str->Data);
167-
str->resize(data->BufTextLen);
168-
data->Buf = str->Data;
190+
IM_ASSERT(data->Buf == str->begin());
191+
str->resize(data->BufSize);
192+
data->Buf = str->begin();
169193
}
170194

171195
return 0;
@@ -307,7 +331,7 @@ namespace ImVue {
307331
ImGui::PushStyleVar(ImGuiStyleVar_FrameBorderSize, 0);
308332
ImGuiInputTextFlags flags = ImGuiInputTextFlags_CallbackResize;
309333
if(size.x != 0) {
310-
ImGui::PushItemWidth(size.x - pad.Min.x - pad.Max.x);
334+
ImGui::PushItemWidth(contentWidth());
311335
}
312336
int col[4] = {0};
313337
bool changed = false;
@@ -392,7 +416,7 @@ namespace ImVue {
392416
}
393417
ImGui::PopStyleColor(popColor);
394418
ImGui::PopStyleVar(2);
395-
ImGui::SetCursorScreenPos(ImGui::GetItemRectMax() + pad.Max);
419+
addMaxPadding(this);
396420
ImGui::EndGroup();
397421

398422
if(ImGui::IsItemClicked(0)) {

‎src/imvue.h

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,7 @@ namespace ImVue {
180180
, mMounted(other.mMounted)
181181
, mRefs(other.mRefs)
182182
{
183+
mLayout = 0;
183184
(*mRefs)++;
184185
}
185186

0 commit comments

Comments
 (0)