Add multiple features, refactor the builder and move most of the code…

… out to the components instead of a single file, add WIP components which will be worked on later.
grkek · Jul 21, 2021 · d3ad934 · d3ad934
1 parent 8e67959
commit d3ad934
Show file tree

Hide file tree

Showing 27 changed files with 127 additions and 139 deletions.
diff --git a/.ameba.yml b/.ameba.yml
@@ -0,0 +1,15 @@
+# This configuration file was generated by `ameba --gen-config`
+# on 2021-06-26 15:36:50 UTC using Ameba version 0.13.4.
+# The point is for the user to remove these configuration records
+# one by one as the reported problems are removed from the code base.
+
+Style/RedundantBegin:
+  Description: Disallows redundant begin blocks
+  Enabled: false
+  Severity: Convention
+
+Metrics/CyclomaticComplexity:
+  Description: Disallows methods with a cyclomatic complexity higher than `MaxComplexity`
+  MaxComplexity: 30
+  Enabled: true
+  Severity: Convention
diff --git a/example/dist/index.html b/example/dist/index.html
@@ -1,9 +1,8 @@
-<Application gid="com.grrkek.monkeyshoulder">
+<Application gid="com.monkeyshoulder.desktop">
   <StyleSheet src="./example/dist/styles/index.css" />
   <Script src="./example/dist/scripts/index.js"></Script>
 
-  <Window className="main-window" title="${appConfiguration.window.title}" width="${appConfiguration.window.width}"
-    height="${appConfiguration.window.height}">
+  <Window className="main-window" title="${appConfiguration.window.title}" width="${appConfiguration.window.width}" height="${appConfiguration.window.height}">
     <Box className="main-box" orientation="vertical">
       <Box orientation="horizontal">
         <Label className="main-label" boxExpand="true" boxFill="true" horizontalAlign="start">
@@ -28,10 +27,8 @@
       <HorizontalSeparator className="horizontal-separator" />
 
       <Box orientation="horizontal">
-        <TextInput className="main-text-input" placeholder="E-Mail" boxExpand="true" boxFill="true"
-          horizontalAlign="fill" />
-        <TextInput className="main-text-input" placeholder="Password" isPassword="true" boxExpand="true" boxFill="true"
-          horizontalAlign="fill" />
+        <TextInput className="main-text-input" placeholder="E-Mail" boxExpand="true" boxFill="true" horizontalAlign="fill" />
+        <TextInput className="main-text-input" placeholder="Password" isPassword="true" boxExpand="true" boxFill="true" horizontalAlign="fill" />
       </Box>
 
       <HorizontalSeparator className="horizontal-separator-number" />
@@ -54,10 +51,8 @@
       <HorizontalSeparator className="horizontal-separator-number" />
 
       <Box className="number-box" orientation="horizontal">
-        <TextInput onChangeText={updateNumberOne} className="number-text" boxExpand="true" boxFill="true"
-          placeholder="Number 1" horizontalAlign="fill" />
-        <TextInput onChangeText={updateNumberTwo} className="number-text" placeholder="Number 2" boxExpand="true"
-          boxFill="true" horizontalAlign="fill" />
+        <TextInput onChangeText={textMutation.updateNumberOne} className="number-text" boxExpand="true" boxFill="true" placeholder="Number 1" horizontalAlign="fill" />
+        <TextInput onChangeText={textMutation.updateNumberTwo} className="number-text" placeholder="Number 2" boxExpand="true" boxFill="true" horizontalAlign="fill" />
       </Box>
 
       <HorizontalSeparator className="horizontal-separator-number" />
@@ -66,41 +61,19 @@
         <Frame className="main-frame" value="Collection of Lorem ipsum" boxExpand="true" boxFill="true">
           <ScrolledWindow className="main-scrolled-window">
             <ListBox className="main-list-box">
-              <Label>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris in nunc commodo
-                ullamcorper sit amet non lectus. Quisque non fermentum dui. Vestibulum ante ipsum primis in faucibus
-                orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient
-                montes, nascetur ridiculus mus. Nam id massa eu leo consequat pellentesque id sed est. Vivamus maximus
-                non ex sit amet ultricies. Maecenas vitae nulla ultricies, suscipit nunc ac, sollicitudin nisi.</Label>
-              <Label>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris in nunc commodo
-                ullamcorper sit amet non lectus. Quisque non fermentum dui. Vestibulum ante ipsum primis in faucibus
-                orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient
-                montes, nascetur ridiculus mus. Nam id massa eu leo consequat pellentesque id sed est. Vivamus maximus
-                non ex sit amet ultricies. Maecenas vitae nulla ultricies, suscipit nunc ac, sollicitudin nisi.</Label>
-              <Label>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris in nunc commodo
-                ullamcorper sit amet non lectus. Quisque non fermentum dui. Vestibulum ante ipsum primis in faucibus
-                orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient
-                montes, nascetur ridiculus mus. Nam id massa eu leo consequat pellentesque id sed est. Vivamus maximus
-                non ex sit amet ultricies. Maecenas vitae nulla ultricies, suscipit nunc ac, sollicitudin nisi.</Label>
-              <Label>4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris in nunc commodo
-                ullamcorper sit amet non lectus. Quisque non fermentum dui. Vestibulum ante ipsum primis in faucibus
-                orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient
-                montes, nascetur ridiculus mus. Nam id massa eu leo consequat pellentesque id sed est. Vivamus maximus
-                non ex sit amet ultricies. Maecenas vitae nulla ultricies, suscipit nunc ac, sollicitudin nisi.</Label>
-              <Label>5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris in nunc commodo
-                ullamcorper sit amet non lectus. Quisque non fermentum dui. Vestibulum ante ipsum primis in faucibus
-                orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient
-                montes, nascetur ridiculus mus. Nam id massa eu leo consequat pellentesque id sed est. Vivamus maximus
-                non ex sit amet ultricies. Maecenas vitae nulla ultricies, suscipit nunc ac, sollicitudin nisi.</Label>
+              <Label>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris in nunc commodo ullamcorper sit amet non lectus. Quisque non fermentum dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</Label>
+              <Label>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris in nunc commodo ullamcorper sit amet non lectus. Quisque non fermentum dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</Label>
+              <Label>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris in nunc commodo ullamcorper sit amet non lectus. Quisque non fermentum dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</Label>
+              <Label>4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris in nunc commodo ullamcorper sit amet non lectus. Quisque non fermentum dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</Label>
+              <Label>5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris in nunc commodo ullamcorper sit amet non lectus. Quisque non fermentum dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</Label>
             </ListBox>
           </ScrolledWindow>
         </Frame>
       </Box>
 
       <Box orientation="horizontal">
-        <Label id="numberOneLabel" className="main-label" boxExpand="true" boxFill="false"
-          horizontalAlign="start">Number 1 TextEntry text!</Label>
-        <Label id="numberTwoLabel" className="main-label" boxExpand="true" boxFill="false" horizontalAlign="end">Number
-          2 TextEntry text!</Label>
+        <Label id="numberOneLabel" className="main-label" boxExpand="true" boxFill="false" horizontalAlign="start">Number 1 TextEntry text!</Label>
+        <Label id="numberTwoLabel" className="main-label" boxExpand="true" boxFill="false" horizontalAlign="end">Number 2 TextEntry text!</Label>
       </Box>
     </Box>
   </Window>

diff --git a/example/dist/scripts/index.js b/example/dist/scripts/index.js
@@ -14,8 +14,18 @@ const appConfiguration = {
   }
 };
 
-if (fs.fileExists("./config.json")) {
-  appConfiguration = JSON.parse(fs.readFile("./config.json"))
-} else {
-  fs.writeFile("./config.json", JSON.stringify(appConfiguration, null, 2))
-}
+const textMutation = {
+  updateNumberOne: function (_element, text) {
+    var label = getElementByComponentId("numberOneLabel");
+    label.setText(text);
+
+    print(text);
+  },
+
+  updateNumberTwo: function (_element, text) {
+    var label = getElementByComponentId("numberTwoLabel");
+    label.setText(text);
+
+    print(text);
+  },
+};
diff --git a/shard.yml b/shard.yml
@@ -19,6 +19,11 @@ dependencies:
     github: grkek/beautify
     branch: master
 
+development_dependencies:
+  ameba:
+    github: crystal-ameba/ameba
+    version: ~> 0.13.0
+
 crystal: 1.0.0
 
 license: MIT
diff --git a/src/layout/dom/box.cr b/src/layout/dom/box.cr
@@ -38,7 +38,7 @@ module Layout
 
         box = Gtk::Box.new(name: id, orientation: orientation, spacing: spacing.to_i, halign: horizontal_align, valign: vertical_align)
 
-        box.on_event_after do |widget, event|
+        box.on_event_after do |_widget, event|
           case event.event_type
           when Gdk::EventType::MOTION_NOTIFY
             false
@@ -49,7 +49,6 @@ module Layout
         end
 
         containerize(widget, box, box_expand, box_fill, box_padding)
-
         add_class_to_css(box, class_name)
         component_storage.store(id, box)
         component_storage.store(@cid, box)

diff --git a/src/layout/dom/button.cr b/src/layout/dom/button.cr
@@ -42,7 +42,7 @@ module Layout
 
         button = Gtk::Button.new(name: id, label: text, relief: relief_style, halign: horizontal_align, valign: vertical_align)
 
-        button.on_event_after do |widget, event|
+        button.on_event_after do |_widget, event|
           case event.event_type
           when Gdk::EventType::MOTION_NOTIFY
             false
@@ -56,9 +56,8 @@ module Layout
           Layout::Js::Engine::INSTANCE.evaluate("#{on_click}(getElementByComponentId(\"#{@cid}\"))")
         end
 
-        add_class_to_css(button, class_name)
-
         containerize(widget, button, box_expand, box_fill, box_padding)
+        add_class_to_css(button, class_name)
         component_storage.store(id, button)
         component_storage.store(@cid, button)
         did_mount(@cid)

diff --git a/src/layout/dom/entry.cr b/src/layout/dom/entry.cr
@@ -78,9 +78,7 @@ module Layout
           box_padding = box_padding[..box_padding.size - 3]
         end
 
-        containerize(widget, entry, box_expand, box_fill, box_padding)
-
-        entry.on_event_after do |widget, event|
+        entry.on_event_after do |_widget, event|
           case event.event_type
           when Gdk::EventType::MOTION_NOTIFY
             false
@@ -90,6 +88,7 @@ module Layout
           end
         end
 
+        containerize(widget, entry, box_expand, box_fill, box_padding)
         add_class_to_css(entry, class_name)
         component_storage.store(id, entry)
         component_storage.store(@cid, entry)

diff --git a/src/layout/dom/frame.cr b/src/layout/dom/frame.cr
@@ -25,11 +25,9 @@ module Layout
           box_padding = box_padding[..box_padding.size - 3]
         end
 
-        spacing = @attributes["spacing"]? || "2"
-
         frame = Gtk::Frame.new(name: id, label: value, halign: horizontal_align, valign: vertical_align)
 
-        frame.on_event_after do |widget, event|
+        frame.on_event_after do |_widget, event|
           case event.event_type
           when Gdk::EventType::MOTION_NOTIFY
             false
@@ -40,7 +38,6 @@ module Layout
         end
 
         containerize(widget, frame, box_expand, box_fill, box_padding)
-
         add_class_to_css(frame, class_name)
         component_storage.store(id, frame)
         component_storage.store(@cid, frame)

diff --git a/src/layout/dom/horizontal_separator.cr b/src/layout/dom/horizontal_separator.cr
@@ -31,9 +31,7 @@ module Layout
           box_padding = box_padding[..box_padding.size - 3]
         end
 
-        containerize(widget, horizontal_separator, box_expand, box_fill, box_padding)
-
-        horizontal_separator.on_event_after do |widget, event|
+        horizontal_separator.on_event_after do |_widget, event|
           case event.event_type
           when Gdk::EventType::MOTION_NOTIFY
             false
@@ -43,6 +41,7 @@ module Layout
           end
         end
 
+        containerize(widget, horizontal_separator, box_expand, box_fill, box_padding)
         add_class_to_css(horizontal_separator, class_name)
         component_storage.store(id, horizontal_separator)
         component_storage.store(@cid, horizontal_separator)

diff --git a/src/layout/dom/image.cr b/src/layout/dom/image.cr
@@ -22,7 +22,7 @@ module Layout
         width = @attributes["width"]? || "256"
         height = @attributes["height"]? || "256"
 
-        preserve_aspect_ration = @attributes["preserveAspectRation"]? || "true"
+        # preserve_aspect_ration = @attributes["preserveAspectRation"]? || "true"
 
         if width.includes?(".0")
           width = width[..width.size - 3]
@@ -60,9 +60,7 @@ module Layout
           box_padding = box_padding[..box_padding.size - 3]
         end
 
-        containerize(widget, image, box_expand, box_fill, box_padding)
-
-        image.on_event_after do |widget, event|
+        image.on_event_after do |_widget, event|
           case event.event_type
           when Gdk::EventType::MOTION_NOTIFY
             false
@@ -72,8 +70,8 @@ module Layout
           end
         end
 
+        containerize(widget, image, box_expand, box_fill, box_padding)
         add_class_to_css(image, class_name)
-
         component_storage.store(id, image)
         component_storage.store(@cid, image)
         did_mount(@cid)

diff --git a/src/layout/dom/label.cr b/src/layout/dom/label.cr
@@ -29,9 +29,7 @@ module Layout
           box_padding = box_padding[..box_padding.size - 3]
         end
 
-        containerize(widget, label, box_expand, box_fill, box_padding)
-
-        label.on_event_after do |widget, event|
+        label.on_event_after do |_widget, event|
           case event.event_type
           when Gdk::EventType::MOTION_NOTIFY
             false
@@ -41,6 +39,7 @@ module Layout
           end
         end
 
+        containerize(widget, label, box_expand, box_fill, box_padding)
         add_class_to_css(label, class_name)
         component_storage.store(id, label)
         component_storage.store(@cid, label)

diff --git a/src/layout/dom/list_box.cr b/src/layout/dom/list_box.cr
@@ -16,14 +16,6 @@ module Layout
         class_name = @attributes["className"]? || nil
         horizontal_align = to_align(@attributes["horizontalAlign"]? || "")
         vertical_align = to_align(@attributes["verticalAlign"]? || "")
-        case @attributes["orientation"]?
-        when "vertical"
-          orientation = Gtk::Orientation::VERTICAL
-        when "horizontal"
-          orientation = Gtk::Orientation::HORIZONTAL
-        else
-          orientation = Gtk::Orientation::VERTICAL
-        end
 
         box_expand = @attributes["boxExpand"]? || "false"
         box_fill = @attributes["boxFill"]? || "false"
@@ -33,11 +25,9 @@ module Layout
           box_padding = box_padding[..box_padding.size - 3]
         end
 
-        spacing = @attributes["spacing"]? || "2"
-
         list_box = Gtk::ListBox.new(name: id, halign: horizontal_align, valign: vertical_align)
 
-        list_box.on_event_after do |widget, event|
+        list_box.on_event_after do |_widget, event|
           case event.event_type
           when Gdk::EventType::MOTION_NOTIFY
             false
@@ -48,7 +38,6 @@ module Layout
         end
 
         containerize(widget, list_box, box_expand, box_fill, box_padding)
-
         add_class_to_css(list_box, class_name)
         component_storage.store(id, list_box)
         component_storage.store(@cid, list_box)

diff --git a/src/layout/dom/scrolled_window.cr b/src/layout/dom/scrolled_window.cr
@@ -24,11 +24,9 @@ module Layout
           box_padding = box_padding[..box_padding.size - 3]
         end
 
-        spacing = @attributes["spacing"]? || "2"
-
         scrolled_window = Gtk::ScrolledWindow.new(name: id, halign: horizontal_align, valign: vertical_align)
 
-        scrolled_window.on_event_after do |widget, event|
+        scrolled_window.on_event_after do |_widget, event|
           case event.event_type
           when Gdk::EventType::MOTION_NOTIFY
             false
@@ -39,7 +37,6 @@ module Layout
         end
 
         containerize(widget, scrolled_window, box_expand, box_fill, box_padding)
-
         add_class_to_css(scrolled_window, class_name)
         component_storage.store(id, scrolled_window)
         component_storage.store(@cid, scrolled_window)

diff --git a/src/layout/dom/switch.cr b/src/layout/dom/switch.cr
@@ -42,9 +42,7 @@ module Layout
           true
         end
 
-        containerize(widget, switch, box_expand, box_fill, box_padding)
-
-        switch.on_event_after do |widget, event|
+        switch.on_event_after do |_widget, event|
           case event.event_type
           when Gdk::EventType::MOTION_NOTIFY
             false
@@ -54,6 +52,7 @@ module Layout
           end
         end
 
+        containerize(widget, switch, box_expand, box_fill, box_padding)
         add_class_to_css(switch, class_name)
         component_storage.store(id, switch)
         component_storage.store(@cid, switch)

diff --git a/src/layout/dom/tab.cr b/src/layout/dom/tab.cr
@@ -27,9 +27,7 @@ module Layout
           box_padding = box_padding[..box_padding.size - 3]
         end
 
-        containerize(widget, tab, box_expand, box_fill, box_padding)
-
-        tab.on_event_after do |widget, event|
+        tab.on_event_after do |_widget, event|
           case event.event_type
           when Gdk::EventType::MOTION_NOTIFY
             false
@@ -39,6 +37,7 @@ module Layout
           end
         end
 
+        containerize(widget, tab, box_expand, box_fill, box_padding)
         add_class_to_css(tab, class_name)
         component_storage.store(id, tab)
         component_storage.store(@cid, tab)

diff --git a/src/layout/dom/text_view.cr b/src/layout/dom/text_view.cr
@@ -30,9 +30,7 @@ module Layout
           box_padding = box_padding[..box_padding.size - 3]
         end
 
-        containerize(widget, text_view, box_expand, box_fill, box_padding)
-
-        text_view.on_event_after do |widget, event|
+        text_view.on_event_after do |_widget, event|
           case event.event_type
           when Gdk::EventType::MOTION_NOTIFY
             false
@@ -42,6 +40,7 @@ module Layout
           end
         end
 
+        containerize(widget, text_view, box_expand, box_fill, box_padding)
         add_class_to_css(text_view, class_name)
         component_storage.store(id, text_view)
         component_storage.store(@cid, text_view)