Skip to content

Flex layout implementation in progress #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Flex layout implementation in progress #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion LICENSE
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2019 Artem Chernyshev
Copyright (c) 2019-2020 Artem Chernyshev

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
2 changes: 1 addition & 1 deletion imgui
Open in desktop
Submodule imgui updated 72 files
+3 −1 .editorconfig
+7 −7 .github/issue_template.md
+111 −15 .github/workflows/build.yml
+49 −0 .gitignore
+1 −1 LICENSE.txt
+187 −10 docs/CHANGELOG.txt
+134 −73 docs/FAQ.md
+25 −39 docs/README.md
+38 −23 docs/TODO.txt
+0 −46 examples/.gitignore
+21 −16 examples/README.txt
+30 −9 examples/example_emscripten/Makefile
+8 −5 examples/example_emscripten/main.cpp
+4 −4 examples/example_glfw_metal/main.mm
+1 −1 examples/example_glfw_opengl2/main.cpp
+7 −0 examples/example_glfw_opengl3/Makefile
+20 −4 examples/example_glfw_opengl3/main.cpp
+7 −1 examples/example_glut_opengl2/Makefile
+3 −3 examples/example_glut_opengl2/main.cpp
+25 −13 examples/example_null/Makefile
+1 −1 examples/example_null/build_win32.bat
+0 −6 examples/example_null/unity_build.cpp
+2 −2 examples/example_sdl_directx11/example_sdl_directx11.vcxproj
+8 −1 examples/example_sdl_directx11/main.cpp
+46 −0 examples/example_sdl_metal/Makefile
+179 −0 examples/example_sdl_metal/main.mm
+1 −1 examples/example_sdl_opengl2/main.cpp
+7 −0 examples/example_sdl_opengl3/Makefile
+20 −4 examples/example_sdl_opengl3/main.cpp
+2 −2 examples/example_win32_directx10/example_win32_directx10.vcxproj
+3 −1 examples/example_win32_directx10/main.cpp
+2 −2 examples/example_win32_directx11/example_win32_directx11.vcxproj
+3 −1 examples/example_win32_directx11/main.cpp
+7 −2 examples/example_win32_directx12/main.cpp
+6 −4 examples/example_win32_directx9/main.cpp
+2 −1 examples/imgui_impl_allegro5.h
+2 −1 examples/imgui_impl_dx10.h
+2 −1 examples/imgui_impl_dx11.h
+2 −1 examples/imgui_impl_dx12.h
+6 −6 examples/imgui_impl_dx9.cpp
+2 −1 examples/imgui_impl_dx9.h
+11 −0 examples/imgui_impl_glfw.cpp
+4 −2 examples/imgui_impl_glfw.h
+6 −1 examples/imgui_impl_glut.cpp
+2 −1 examples/imgui_impl_glut.h
+2 −1 examples/imgui_impl_marmalade.h
+2 −0 examples/imgui_impl_metal.h
+4 −0 examples/imgui_impl_opengl2.cpp
+1 −0 examples/imgui_impl_opengl2.h
+37 −17 examples/imgui_impl_opengl3.cpp
+7 −0 examples/imgui_impl_opengl3.h
+6 −4 examples/imgui_impl_osx.h
+11 −1 examples/imgui_impl_sdl.cpp
+2 −0 examples/imgui_impl_sdl.h
+1 −1 examples/imgui_impl_vulkan.h
+127 −11 examples/imgui_impl_win32.cpp
+23 −7 examples/imgui_impl_win32.h
+13 −4 imconfig.h
+1,597 −1,372 imgui.cpp
+157 −76 imgui.h
+126 −44 imgui_demo.cpp
+297 −110 imgui_draw.cpp
+282 −167 imgui_internal.h
+405 −281 imgui_widgets.cpp
+3 −3 imstb_truetype.h
+6 −0 misc/README.txt
+1 −2 misc/cpp/imgui_stdlib.cpp
+1 −2 misc/cpp/imgui_stdlib.h
+1 −1 misc/freetype/README.md
+24 −18 misc/freetype/imgui_freetype.cpp
+1 −1 misc/freetype/imgui_freetype.h
+17 −0 misc/single_file/imgui_single_file.h
146 changes: 146 additions & 0 deletions samples/simple/layouts.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
<style>
@font-face {
font-family: "DroidSans";
src: local("../../../imgui/misc/fonts/DroidSans.ttf");
}

@font-face {
font-family: "MaterialIcons";
src: local("../../../samples/fonts/MaterialIcons-Regular.ttf");
unicode-range: U+E000-EB60;
}

template {
font-family: DroidSans;
padding: 5px;
}

.flex {
display: flex;
}

.flex-vertical {
display: inline-flex;
flex-direction: column;
}

.shape {
background-color: #FFCC00;
padding: 10px;
font-size: 2rem;
margin: 0.2rem;
border-radius: 5px;
min-width: 35px;
}

.shape:hover, .shape:active {
background-color: #FFFFFF;
color: #000000;
}

.flex-0 {
background-color: #777777;
}

.flex-1 {
background-color: #447733;
flex-grow: 1;
}

.flex-2 {
background-color: #FFCC00;
flex-grow: 2;
}
</style>

<template>
<window name="Layouts Demo">
<html>
<body>
Horizontal flex
<div class="flex">
<div class="shape flex-0" :style="'width: ' .. self.value .. 'px'" v-on:click="self.value = self.value + self.delta"> </div>
<div class="shape flex-1">1</div>
<div class="shape flex-2">2</div>
</div>
<div class="flex">
<div class="shape flex-1">1</div>
<div class="shape flex-0" :style="'width: ' .. self.value .. 'px'" v-on:click="self.value = self.value + self.delta"> </div>
<div class="shape flex-2">2</div>
</div>
<div class="flex">
<div class="shape flex-1">1</div>
<div class="shape flex-2">2</div>
<div class="shape flex-0" :style="'width: ' .. self.value .. 'px'" v-on:click="self.value = self.value + self.delta"> </div>
</div>
Vertical flex (auto)
<div>
<div class="flex-vertical">
<div class="shape flex-0" :style="'width: ' .. self.value .. 'px'" v-on:click="self.value = self.value + self.delta"> </div>
<div class="shape flex-1">1</div>
<div class="shape flex-2">2</div>
</div>
<div class="flex-vertical">
<div class="shape flex-1">1</div>
<div class="shape flex-0" :style="'width: ' .. self.value .. 'px'" v-on:click="self.value = self.value + self.delta"> </div>
<div class="shape flex-2">2</div>
</div>
<div class="flex-vertical">
<div class="shape flex-1">1</div>
<div class="shape flex-2">2</div>
<div class="shape flex-0" :style="'width: ' .. self.value .. 'px'" v-on:click="self.value = self.value + self.delta"> </div>
</div>
</div>
Vertical flex (scaled)
<div style="height: 500px; overflow: hidden">
<div class="flex-vertical" style="height: 100%; flex-grow: 1">
<div class="shape flex-0" :style="'height: ' .. self.value .. 'px'" v-on:click="self.value = self.value + self.delta">s</div>
<div class="shape flex-1">1</div>
<div class="shape flex-2">2</div>
</div>
<div class="flex-vertical" style="height: 100%; flex-grow: 1">
<div class="shape flex-1">1</div>
<div class="shape flex-0" :style="'height: ' .. self.value .. 'px'" v-on:click="self.value = self.value + self.delta">s</div>
<div class="shape flex-2">2</div>
</div>
<div class="flex-vertical" style="height: 100%; flex-grow: 1">
<div class="shape flex-1">1</div>
<div class="shape flex-2">2</div>
<div class="shape flex-0" :style="'height: ' .. self.value .. 'px'" v-on:click="self.value = self.value + self.delta">s</div>
</div>
</div>
Flex in table mode
<div>
<div class="flex">
<div class="shape flex-1">1</div>
<div class="shape flex-1">2</div>
<div class="shape flex-1">3</div>
</div>
<div class="flex">
<div class="shape flex-1">1</div>
<div class="shape flex-1">2</div>
<div class="shape flex-1">3</div>
</div>
</div>
Dynamic flex
<div>
<div class="flex">
<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>
</div>
</div>
</body>
</html>
</window>
</template>

<script>
return ImVue.new({
data = function()
return {
value = 50,
delta = 20,
elements = {1}
}
end
})
</script>
4 changes: 3 additions & 1 deletion samples/simple/main.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,9 +104,11 @@ int main(int argc, char** argv)
ImGui::StyleColorsDark();
//ImGui::StyleColorsLight();

float scale = 1.5f;
float scale = 1.0f;

ImGuiStyle& style = ImGui::GetStyle();
style.FrameRounding = 5.0f;
style.FrameBorderSize = 1.0f;
style.ScaleAllSizes(scale);

// Setup Platform/Renderer bindings
Expand Down
84 changes: 84 additions & 0 deletions samples/simple/standard_controls.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<style>
body {
padding: 0.4em;
font-size: 15px;
overflow: scroll;
}

window {
padding: 0;
}

body > *, collapsing-header > * {
margin: 0.3em;
padding: 0.3em;
}

collapsing-header.inputs > * {
margin-right: 5em;
}

collapsing-header {
padding: 0.4em;
display: block;
}

arrow-button {
display: inline-block;
}

plot-line {
padding: 0.5em;
}

</style>
<template>
<window name="main" style="position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px" :flags="ImGuiWindowFlags_NoMove + ImGuiWindowFlags_NoResize + ImGuiWindowFlags_NoBackground + ImGuiWindowFlags_NoTitleBar">
<body style="background-color: rgba(0, 0, 0, 0.7)">
<span>Built-in elements showcase</span>
<collapsing-header label="inputs" :flags="ImGuiTreeNodeFlags_SpanFullWidth" class="inputs">
<slider-angle v-rad="0.1">slider angle</slider-angle>
<input-int v="10">input int 1</input-int>
<input-int2 v="{1,2}">input int 2</input-int2>
<input-int3 v="{1,2,3}">input int 3</input-int3>
<input-double v="1.0">input double</input-double>
<drag-int v="10">drag int 1</drag-int>
<drag-int2 v="{1,2}">drag int 2</drag-int2>
<drag-int4 v="{1,2,3,4}">drag int 4</drag-int4>
<input-float v="10">input float 1</input-float>
<input-float2 v="{1,2}">input float 2</input-float2>
<input-float3 v="{1,2,3}">input float 3</input-float3>
<input-float4 v="{1,2,3,4}">input float 4</input-float4>
<input-text buf-size="1024">input text</input-text>
<input-text-multiline buf-size="4086" style="margin-right: 5em">Multiline text</input-text-multiline>
</collapsing-header>
<collapsing-header label="widgets" class="inputs">
<combo label="combo box" preview-value="select something">
<selectable>option 1</selectable>
<selectable>option 2</selectable>
</combo>
<drag-float-range2 v-current-min="-10" v-current-max="10" v-speed="0.1">input float 4</drag-float-range2>
<color-edit3 :col="{1, 1, 1}">color edit 3</color-edit3>
<color-edit4 :col="{1, 1, 1, 1}">color edit 4</color-edit4>
<radio-button v-on:click="self.option = 'option 1'" :active="self.option == 'option 1'">option 1</radio-button>
<radio-button v-on:click="self.option = 'option 2'" :active="self.option == 'option 2'">option 2</radio-button>
<radio-button v-on:click="self.option = 'option 3'" :active="self.option == 'option 3'">option 3</radio-button>
<checkbox>checkbox</checkbox>
</collapsing-header>
<collapsing-header label="plots">
<plot-lines values="{1,2,3,4,5,6}" values-count="5" graph-size="0, 200"/>
<plot-histogram values="{1,2,3,4,5,6}" values-count="5" graph-size="0, 200"/>
</collapsing-header>
</body>
</window>
</template>

<script>
return ImVue.new({
data = function()
return {
option = "option 2"
}
end
})
</script>
10 changes: 3 additions & 7 deletions samples/simple/styled.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,6 @@
padding: 5px;
}

span {
margin-right: 0.2rem;
}

div:not(:last-of-type) {
margin-bottom: 0.5rem;
}
Expand Down Expand Up @@ -220,7 +216,7 @@
<span class="icon active"></span>
</div>
<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>
<div class="btn">APPROVED<span class="icon"></span></div>
<div class="btn test__">APPROVED<span class="icon test__"></span></div>
<h3>Forms</h3>
<div class="form">
<label>Styled input example:</label>
Expand Down Expand Up @@ -254,10 +250,10 @@
<input style="margin-right: 0.2rem; margin-top: 0.2rem; display: block" type="checkbox" value="third checkbox" v-model="arr"/>

<label>Choices:</label>
<span style="display: inline-block; padding: 5px; background-color: #FFCC00; color: black; border-radius: 5px" v-for="c in self.arr">{{c}}</span>
<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>
<span v-if="#self.arr == 0">No choices yet</span>
</div>
<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>
<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>
</body>
</html>
</window>
Expand Down
5 changes: 5 additions & 0 deletions src/css/select.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -360,6 +360,7 @@ namespace ImVue {
return CSS_OK;
}

// TODO: not implemented yet
css_error node_has_attribute_dashmatch(void *pw, void *n,
const css_qname *qname,
lwc_string *value,
Expand All @@ -373,6 +374,7 @@ namespace ImVue {
return CSS_OK;
}

// TODO: not implemented yet
css_error node_has_attribute_includes(void *pw, void *n,
const css_qname *qname,
lwc_string *value,
Expand All @@ -386,6 +388,7 @@ namespace ImVue {
return CSS_OK;
}

// TODO: not implemented yet
css_error node_has_attribute_prefix(void *pw, void *n,
const css_qname *qname,
lwc_string *value,
Expand All @@ -399,6 +402,7 @@ namespace ImVue {
return CSS_OK;
}

// TODO: not implemented yet
css_error node_has_attribute_suffix(void *pw, void *n,
const css_qname *qname,
lwc_string *value,
Expand All @@ -412,6 +416,7 @@ namespace ImVue {
return CSS_OK;
}

// TODO: not implemented yet
css_error node_has_attribute_substring(void *pw, void *n,
const css_qname *qname,
lwc_string *value,
Expand Down
1 change: 0 additions & 1 deletion src/extras/svg.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -336,7 +336,6 @@ namespace ImVue {
mTextureManager->deleteTexture(mTextureID);
}

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

Expand Down
Loading