Implemented CSS styling support

.gitmodules

@@ -4,6 +4,6 @@
 [submodule "nanosvg"]
 	path = nanosvg
 	url = https://github.com/memononen/nanosvg.git
-[submodule "katana-parser"]
-	path = katana-parser
-	url = https://github.com/hackers-painters/katana-parser.git
+[submodule "libcss"]
+	path = libcss
+	url = https://github.com/Unix4ever/libcss.git

CMakeLists.txt

@@ -6,7 +6,7 @@ option(BUILD_SAMPLES "build ImVue samples" OFF)
 option(BUILD_IMGUI_FROM_SUBMODULE "build Dear ImGui from submodule" ON)
 option(BUILD_LUA_BINDINGS "build Lua bindings" ON)
 option(BUILD_CSS_STYLING "build css styling" ON)
-option(BUILD_KATANA_FROM_SUBMODULE "build libcss using submodule" ON)
+option(BUILD_CSS_FROM_SUBMODULE "build libcss using submodule" ON)
 option(BUILD_TESTS "build unit test for the project" OFF)
 option(IMVUE_NO_EXCEPTIONS "disable raising exceptions. Use log errors instead" OFF)
 option(IMVUE_USE_LUAJIT "use luajit" OFF)
@@ -40,14 +40,13 @@ if(BUILD_LUA_BINDINGS)
   set(ADDITIONAL_SOURCES src/lua/script.cpp ${ADDITIONAL_SOURCES})
 endif(BUILD_LUA_BINDINGS)
 
-# disable it for now. It's not used, and does not build on windows
-#if(BUILD_KATANA_FROM_SUBMODULE)
-#  set(KATANA_INCLUDE_DIRS katana-parser/src/)
-#  set(KATANA_LIBRARY katana)
-#  include_directories(${KATANA_INCLUDE_DIRS})
-#  file(GLOB_RECURSE sources katana-parser/src/*.c)
-#  add_library(${KATANA_LIBRARY} STATIC ${sources})
-#endif(BUILD_KATANA_FROM_SUBMODULE)
+if(BUILD_CSS_FROM_SUBMODULE)
+  add_subdirectory(libcss)
+  include_directories(libcss/libcss/include)
+  include_directories(libcss/libwapcaplet/include)
+  include_directories(libcss/libparserutils/include)
+  set(ADDITIONAL_LIBS ${ADDITIONAL_LIBS} css wapcaplet parserutils)
+endif(BUILD_CSS_FROM_SUBMODULE)
 
 if(BUILD_TESTS)
   find_package(GTest)
@@ -73,7 +72,10 @@ add_library(${LIB_NAME} STATIC
   src/imvue_element.cpp
   src/imvue_script.cpp
   src/imvue_context.cpp
+  src/imvue_style.cpp
+  src/imvue_layout.cpp
   src/imstring.cpp
+  src/css/select.cpp
 ${ADDITIONAL_SOURCES})
 
 set(IMGUI_SOURCES

README.md

@@ -38,6 +38,15 @@ You can either define them using `lua` syntax or `imv` xml file.
 
 `imv` files search path is configured using `package.imvpath` variable.
 
+CSS Styles Support
+------------------
+
+ImVue supports CSS styling and HTML syntax to some extent.
+
+[Styled document example](samples/simple/styled.xml) in action:
+
+![demo](demo.gif)
+
 Vue Special Syntax
 ------------------
 
@@ -65,7 +74,6 @@ Vue Special Syntax
 - Getting `event.target` in event handlers.
 - Changing element properties using refs (RO access only).
 - `${}` eval syntax in attributes.
-- CSS styles.
 - V8 JS integration.
 
 ### Lua Implementation Specifics
@@ -76,33 +84,18 @@ there is no limitation on what you can do. Globals are also available.
 Besides, it will create reactive listeners for each field that was used in the
 evaluation.
 
-Benchmarks
-----------
-
-Rendering 1000 windows with a single button.
-
-```
-------------------------------------------------------------------------------
-Benchmark                                    Time             CPU   Iterations
-------------------------------------------------------------------------------
-ImVueBenchmark/RenderImGuiLuaStatic    1968641 ns      1963054 ns         3493 # lua bindings
-ImVueBenchmark/RenderImGuiStatic       1894949 ns      1894921 ns         3654 # vanilla ImGui
-ImVueBenchmark/RenderImVueScripted     1909691 ns      1909661 ns         3615 # imgui with lua scripting enabled
-ImVueBenchmark/RenderImVueStatic       1888849 ns      1888819 ns         3667 # static xml template
-```
-
 Dependencies
 ------------
 
 - ImGui without any modifications.
 - NanoSVG is used for image rendering. Using customized rasterizer.
 - RapidXML is used for XML parsing.
+- customized version of [LibCSS](https://github.com/Unix4ever/libcss).
 
 Optional Core Dependecies
 -------------------------
 
 - Lua 5.1+/LuaJIT 2.0.5+ - adds script interpreter.
-- katana-parser allows reading CSS to change widgets style.
 
 Samples Dependencies
 --------------------
@@ -119,7 +112,3 @@ Build
 1. Run:
 
 `make build`
-
-### Using conan
-
-TODO

samples/CMakeLists.txt

@@ -15,10 +15,10 @@ add_library(imgui_sdl2
 
 set(LIBS
   imgui
+  ${ADDITIONAL_LIBS}
   ${OPENGL_LIBRARIES}
   ${GLEW_LIBRARIES}
-  #${SDL2_LIBRARIES}
-  ${LUA_LIBRARIES}
+  ${SDL2_LIBRARIES}
   SDL2::SDL2main
   SDL2::SDL2-static
 )

samples/simple/components/window.imv

@@ -0,0 +1,149 @@
+<style scoped="true">
+window.custom > .body > * {
+  margin: 0 !important;
+}
+
+window.custom {
+  padding: 0;
+  font-size: 1rem;
+}
+
+window.custom > .body {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  right: 2px;
+  bottom: 2px;
+  background-color: #b3b3b3;
+  border-radius: 15px;
+  border: 2px solid #CCCCCC;
+}
+
+.title {
+  background-color: #bbbbbb;
+  padding: 0.3rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-radius: 10px 10px 0 0;
+  color: #222222;
+  margin: 0;
+}
+
+.separator {
+  height: 0;
+  margin: 0;
+  border-top: 1px solid #CCCCCC;
+  border-bottom: 2px solid #999999;
+}
+
+.icon-btn {
+  color: #222222;
+  margin: 0;
+  padding: 0;
+  font-family: MaterialIcons;
+  border-radius: 5px;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.icon-btn:hover {
+  background-color: rgba(255, 255, 255, 0.7);
+}
+
+.icon-btn:active {
+  background-color: rgba(255, 255, 255, 0.7);
+}
+
+.title:hover, .title:active {
+  background-color: #DDDDDD;
+}
+
+.content {
+  padding: 0.2rem 0.2rem;
+}
+
+.content > label {
+  color: #111111;
+}
+
+input[type="text"] {
+  background-color: #DDDDDD;
+  border: 2px solid #999999;
+  color: #000000;
+  padding: 0.3em 0.5em;
+  border-radius: 8px;
+  margin: 0;
+  margin-bottom: 5px;
+}
+
+input[type="text"]:active {
+  border: 2px solid #3686ad;
+  color: #000000;
+  padding: 0.3em 0.5em;
+  border-radius: 8px;
+  margin-bottom: 5px;
+}
+
+.btn {
+  padding: 0.2rem 0.7rem;
+  background-color: #EEEEEE;
+  color: #000000;
+  border: 2px solid #555555;
+  margin-right: 0.2rem;
+  background-color: rgba(255, 255, 255, 0.4);
+  border-radius: 0;
+}
+
+.btn:hover {
+  background-color: rgba(255, 255, 255, 0.7);
+  border: 2px solid #3686ad;
+}
+
+.btn:active {
+  background-color: rgba(255, 255, 255, 0.6);
+  border: 2px solid #3686ad;
+}
+
+</style>
+
+<template>
+  <window class="custom" :name="self.name" :flags="ImGuiWindowFlags_NoBackground + ImGuiWindowFlags_NoTitleBar" v-if="not self.closed" :ref="self.name">
+    <div class="body">
+      <div>
+        <div class="title test">
+          <text-unformatted style="display: inline">{{ self.title or self.name }}</text-unformatted>
+        </div>
+      </div>
+      <div v-if="self.closable" class="icon-btn" style="position: absolute; right: 6px; top: 6px" v-on:click="self.closed = true"></div>
+      <div class="separator"/>
+      <div class="content">
+        <slot/>
+      </div>
+    </div>
+  </window>
+</template>
+
+<script>
+return {
+  props = {
+    name = {
+      type = ImVue_String,
+      required = true
+    },
+    title = {
+      type = ImVue_String
+    },
+    closable = {
+      type = ImVue_Boolean,
+      default = false
+    }
+  },
+  data = function()
+    return {
+      closed = false,
+      windowSize = {0, 0}
+    }
+  end
+}
+</script>

samples/simple/main.cpp

@@ -104,7 +104,7 @@ int main(int argc, char** argv)
     ImGui::StyleColorsDark();
     //ImGui::StyleColorsLight();
 
-    float scale = 1.0f;
+    float scale = 1.5f;
 
     ImGuiStyle& style = ImGui::GetStyle();
     style.ScaleAllSizes(scale);
@@ -145,6 +145,8 @@ int main(int argc, char** argv)
           new OpenGL2TextureManager()
       );
 
+      ctx->scale = ImVec2(scale, scale);
+
       ImVue::Document document(ctx);
       const char* page = "simple.xml";
       if(argc == 2) {

samples/simple/simple.xml

@@ -1,3 +1,14 @@
+<style>
+  * {
+    padding: 5px;
+  }
+
+  menu {
+    display: inline;
+  }
+
+</style>
+
 <template>
   <window name="demo">
     <button v-on:mouseover="self.showTooltip = true" v-on:mouseout="self.showTooltip = false">right click</button>
@@ -13,7 +24,6 @@
     <progress-bar :fraction="self.progress"/>
     <!-- click handler -->
     <button v-on:click="self:testing()">add more elements</button>
-    <same-line/>
     <button v-on:click="self.values = {}">clear list</button>
     <text-unformatted>Dynamic list</text-unformatted>
     <!-- loops -->
@@ -22,6 +32,15 @@
     <input-text buf-size="512" ref="input" v-on:keypress.enter="self:runScript()">console</input-text>
     <button v-on:click="self:runScript()">run script</button>
     <text-unformatted>submitted input: {{ if self.inputText then return self.inputText else return 'none' end}}</text-unformatted>
+    <h4>Tab bar</h4>
+    <tab-bar str-id="test" :flags="ImGuiTabBarFlags_Reorderable">
+      <tab-item label="tab 1" p-open="true">
+        <button>it works</button>
+      </tab-item>
+      <tab-item label="tab 2" p-open="true"/>
+      <tab-item label="tab 3" p-open="true"/>
+      <tab-item label="tab 4" p-open="true"/>
+    </tab-bar>
   </window>
 
   <main-menu-bar>