Skip to content

Commit 04128e7

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

28 files changed

+1308
-108
lines changed

‎LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2019 Artem Chernyshev
3+
Copyright (c) 2019-2020 Artem Chernyshev
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎imgui‎

Submodule imgui updated 72 files

‎samples/simple/layouts.xml‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
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: inline-flex;
24+
flex-direction: column;
25+
}
26+
27+
.shape {
28+
background-color: #FFCC00;
29+
padding: 10px;
30+
font-size: 2rem;
31+
margin: 0.2rem;
32+
border-radius: 5px;
33+
min-width: 35px;
34+
}
35+
36+
.shape:hover, .shape:active {
37+
background-color: #FFFFFF;
38+
color: #000000;
39+
}
40+
41+
.flex-0 {
42+
background-color: #777777;
43+
}
44+
45+
.flex-1 {
46+
background-color: #447733;
47+
flex-grow: 1;
48+
}
49+
50+
.flex-2 {
51+
background-color: #FFCC00;
52+
flex-grow: 2;
53+
}
54+
</style>
55+
56+
<template>
57+
<window name="Layouts Demo">
58+
<html>
59+
<body>
60+
Horizontal flex
61+
<div class="flex">
62+
<div class="shape flex-0" :style="'width: ' .. self.value .. 'px'" v-on:click="self.value = self.value + self.delta"> </div>
63+
<div class="shape flex-1">1</div>
64+
<div class="shape flex-2">2</div>
65+
</div>
66+
<div class="flex">
67+
<div class="shape flex-1">1</div>
68+
<div class="shape flex-0" :style="'width: ' .. self.value .. 'px'" v-on:click="self.value = self.value + self.delta"> </div>
69+
<div class="shape flex-2">2</div>
70+
</div>
71+
<div class="flex">
72+
<div class="shape flex-1">1</div>
73+
<div class="shape flex-2">2</div>
74+
<div class="shape flex-0" :style="'width: ' .. self.value .. 'px'" v-on:click="self.value = self.value + self.delta"> </div>
75+
</div>
76+
Vertical flex (auto)
77+
<div>
78+
<div class="flex-vertical">
79+
<div class="shape flex-0" :style="'width: ' .. self.value .. 'px'" v-on:click="self.value = self.value + self.delta"> </div>
80+
<div class="shape flex-1">1</div>
81+
<div class="shape flex-2">2</div>
82+
</div>
83+
<div class="flex-vertical">
84+
<div class="shape flex-1">1</div>
85+
<div class="shape flex-0" :style="'width: ' .. self.value .. 'px'" v-on:click="self.value = self.value + self.delta"> </div>
86+
<div class="shape flex-2">2</div>
87+
</div>
88+
<div class="flex-vertical">
89+
<div class="shape flex-1">1</div>
90+
<div class="shape flex-2">2</div>
91+
<div class="shape flex-0" :style="'width: ' .. self.value .. 'px'" v-on:click="self.value = self.value + self.delta"> </div>
92+
</div>
93+
</div>
94+
Vertical flex (scaled)
95+
<div style="height: 500px; overflow: hidden">
96+
<div class="flex-vertical" style="height: 100%; flex-grow: 1">
97+
<div class="shape flex-0" :style="'height: ' .. self.value .. 'px'" v-on:click="self.value = self.value + self.delta">s</div>
98+
<div class="shape flex-1">1</div>
99+
<div class="shape flex-2">2</div>
100+
</div>
101+
<div class="flex-vertical" style="height: 100%; flex-grow: 1">
102+
<div class="shape flex-1">1</div>
103+
<div class="shape flex-0" :style="'height: ' .. self.value .. 'px'" v-on:click="self.value = self.value + self.delta">s</div>
104+
<div class="shape flex-2">2</div>
105+
</div>
106+
<div class="flex-vertical" style="height: 100%; flex-grow: 1">
107+
<div class="shape flex-1">1</div>
108+
<div class="shape flex-2">2</div>
109+
<div class="shape flex-0" :style="'height: ' .. self.value .. 'px'" v-on:click="self.value = self.value + self.delta">s</div>
110+
</div>
111+
</div>
112+
Flex in table mode
113+
<div>
114+
<div class="flex">
115+
<div class="shape flex-1">1</div>
116+
<div class="shape flex-1">2</div>
117+
<div class="shape flex-1">3</div>
118+
</div>
119+
<div class="flex">
120+
<div class="shape flex-1">1</div>
121+
<div class="shape flex-1">2</div>
122+
<div class="shape flex-1">3</div>
123+
</div>
124+
</div>
125+
Dynamic flex
126+
<div>
127+
<div class="flex">
128+
<div v-for="(element, index) in self.elements" class="shape" :style="'flex-grow: ' .. tostring(index)" v-on:click="self.elements[#self.elements + 1] = #self.elements + 1">a</div>
129+
</div>
130+
</div>
131+
</body>
132+
</html>
133+
</window>
134+
</template>
135+
136+
<script>
137+
return ImVue.new({
138+
data = function()
139+
return {
140+
value = 50,
141+
delta = 20,
142+
elements = {1}
143+
}
144+
end
145+
})
146+
</script>

‎samples/simple/main.cpp‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,9 +104,11 @@ int main(int argc, char** argv)
104104
ImGui::StyleColorsDark();
105105
//ImGui::StyleColorsLight();
106106

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

‎samples/simple/styled.xml‎

Lines changed: 3 additions & 7 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>
@@ -254,10 +250,10 @@
254250
<input style="margin-right: 0.2rem; margin-top: 0.2rem; display: block" type="checkbox" value="third checkbox" v-model="arr"/>
255251

256252
<label>Choices:</label>
257-
<span style="display: inline-block; padding: 5px; background-color: #FFCC00; color: black; border-radius: 5px" v-for="c in self.arr">{{c}}</span>
253+
<span style="display: inline-block; padding: 5px; background-color: #FFCC00; color: black; border-radius: 5px" v-for="(index, c) in self.arr">{{index}}:{{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/svg.h‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -336,7 +336,6 @@ namespace ImVue {
336336
mTextureManager->deleteTexture(mTextureID);
337337
}
338338

339-
std::cout << "Image is redrawn\n";
340339
mTextureID = mTextureManager->createTexture(mData, (int)drawnSize.x, (int)drawnSize.y);
341340
}
342341

0 commit comments

Comments
 (0)