add/remove methods, optional title bar for windows, demo-work

add/remove not implemented for window elements

elements/element.lua

@@ -5,6 +5,8 @@ do
   local _obj_0 = math
   floor, max = _obj_0.floor, _obj_0.max
 end
+local inheritsFromElement
+inheritsFromElement = require(tostring((...):sub(1, -19)) .. "/util").inheritsFromElement
 local element
 do
   local _class_0
@@ -176,6 +178,33 @@ do
         end
       end
     end,
+    add = function(self, element)
+      if not (inheritsFromElement(element)) then
+        for _index_0 = 1, #element do
+          local e = element[_index_0]
+          self:add(e)
+          return self
+        end
+      end
+      element.parent:remove(element)
+      table.insert(self.child, element)
+      table.insert(self.data.child, element.data)
+      return self
+    end,
+    remove = function(self, element)
+      if not (inheritsFromElement(element)) then
+        for _index_0 = 1, #element do
+          local e = element[_index_0]
+          self:remove(e)
+          return self
+        end
+      end
+      local index = self:indexOf(element)
+      local dataIndex = self:dataIndexOf(element.data)
+      table.remove(self.child, index)
+      table.remove(self.data.child, dataIndex)
+      return self
+    end,
     delete = function(self)
       for i = #self.child, 1, -1 do
         self.child[i]:delete()

elements/element.moon

@@ -5,6 +5,7 @@
 
 import graphics from love
 import floor, max from math
+import inheritsFromElement from require "#{(...)\sub 1, -19}/util"
 
 class element
     --- Constructor expects nothing, or a data table describing it.
@@ -223,6 +224,33 @@ class element
             if @data.child[i] == data
                 return i
 
+    add: (element) =>
+        unless inheritsFromElement element
+            for e in *element
+                @add e
+                return @
+
+        element.parent\remove(element)
+
+        table.insert @child, element
+        table.insert @data.child, element.data
+
+        return @
+
+    remove: (element) =>
+        unless inheritsFromElement element
+            for e in *element
+                @remove e
+                return @
+
+        index = @indexOf element
+        dataIndex = @dataIndexOf element.data
+
+        table.remove @child, index
+        table.remove @data.child, dataIndex
+
+        return @
+
     --- Deletes references to this element and then deletes it.
     delete: =>
         for i=#@child, 1, -1

elements/window.lua

@@ -6,6 +6,8 @@ do
 end
 local path = (...):sub(1, -7)
 local element = require(tostring(path) .. "/element")
+local inheritsFromElement
+inheritsFromElement = require(tostring(path:sub(1, -11)) .. "/util").inheritsFromElement
 path = path:sub(1, -11)
 local maximizeImage = graphics.newImage(tostring(path) .. "/images/maximize.png")
 local minimizeImage = graphics.newImage(tostring(path) .. "/images/minimize.png")
@@ -35,7 +37,9 @@ do
       if self.minimizeButton then
         self.minimizeButton:align()
       end
-      self.window_area:move(nil, self.header:getHeight())
+      if self.data.titleBar then
+        self.window_area:move(nil, self.header:getHeight())
+      end
       return self
     end,
     setSize = function(self, w, h)
@@ -61,8 +65,12 @@ do
         elseif "right" == _exp_0 then
           y = y - (h - self.data.h)
         end
-        self.window_area:setHeight(h - self.header:getHeight())
+        if self.data.titleBar then
-        self.window_area:move(nil, self.header:getHeight())
+          self.window_area:setHeight(h - self.header:getHeight())
+          self.window_area:move(nil, self.header:getHeight())
+        else
+          self.window_area:setHeight(h)
+        end
         self.data.h = h
         self.data.y = self.data.y + y
       end
@@ -83,11 +91,13 @@ do
     getPadding = function(self)
       return self.window_area:getPadding()
     end,
-    childAdded = function(self, element)
+    add = function(self, element)
-      table.insert(self.window_area.data, table.remove(self.data.child, self:dataIndexOf(element.data)))
+      self.window_area:add(element)
-      table.insert(self.window_area, table.remove(self.child, self:indexOf(element)))
+      local x, y = self.window_area.data.x, self.window_area.data.y
-      element:align()
+      return self
-      print("worked?")
+    end,
+    remove = function(self, element)
+      self.window_area:remove(element)
       return self
     end,
     maximize = function(self)
@@ -142,6 +152,9 @@ do
         self.data.containMethod = "mouse"
       end
       self.data.maximized = false
+      if self.data.titleBar == nil then
+        self.data.titleBar = true
+      end
       if self.data.maximizeable == nil then
         self.data.maximizeable = false
       end
@@ -226,8 +239,16 @@ do
       end
       local height = self.title:getHeight() + 1
       self.header:setSize(self.data.w - self.data.header_width_reduction, height)
-      self.window_area:setSize(self.data.w, self.data.h - height)
+      if self.data.titleBar then
-      self.window_area:move(nil, height)
+        self.window_area:setSize(self.data.w, self.data.h - height)
+        self.window_area:move(nil, height)
+      else
+        self.header.data.draw = false
+        self.window_area.data.x = self.data.x + self.data.padding
+        self.window_area.data.y = self.data.y + self.data.padding
+        self.window_area.data.w = self.data.w - self.data.padding * 2
+        self.window_area.data.h = self.data.h - self.data.padding * 2
+      end
       self.window_area.mousepressed = function(self, x, y, button)
         if button == pop.constants.left_mouse then
           local grandparent = self.parent.parent

elements/window.moon

@@ -12,6 +12,8 @@ import graphics, mouse from love
 path = (...)\sub 1, -7
 element = require "#{path}/element"
 
+import inheritsFromElement from require "#{path\sub 1, -11}/util"
+
 path = path\sub 1, -11
 maximizeImage = graphics.newImage "#{path}/images/maximize.png"
 minimizeImage = graphics.newImage "#{path}/images/minimize.png"
@@ -35,6 +37,7 @@ class window extends element
         @data.containMethod = "mouse" unless @data.containMethod
 
         @data.maximized = false
+        @data.titleBar = true if @data.titleBar == nil
         @data.maximizeable = false if @data.maximizeable == nil
         @data.minimizeable = false if @data.minimizeable == nil
         @data.closeable = false if @data.closeable == nil
@@ -70,8 +73,16 @@ class window extends element
 
         height = @title\getHeight! + 1
         @header\setSize @data.w - @data.header_width_reduction, height
-        @window_area\setSize @data.w, @data.h - height
+
-        @window_area\move nil, height
+        if @data.titleBar
+          @window_area\setSize @data.w, @data.h - height
+          @window_area\move nil, height
+        else
+          @header.data.draw = false
+          @window_area.data.x = @data.x + @data.padding
+          @window_area.data.y = @data.y + @data.padding
+          @window_area.data.w = @data.w - @data.padding*2
+          @window_area.data.h = @data.h - @data.padding*2
 
         -- window area steals mouse events to prevent propagation to elements under it
         @window_area.mousepressed = (x, y, button) =>
@@ -82,7 +93,23 @@ class window extends element
         @window_area.clicked = =>
             return nil
 
-        --print "window_area " .. tostring @window_area
+        -- @window_area.add = (element) =>
+        --     pop.elements.box.__parent.add @, element
+        --     --NOTE temporarily disabled
+        --     -- this seems to be working but errors with previous == nil
+        --     -- I have moved the intended functionality to the window element's function that calls these
+        --     if false and inheritsFromElement element
+        --         -- we need to adjust its position based on the previous element
+        --         previous = @data.child[#@data.child-1]
+        --         y, h = previous.y, previous.h
+        --         y += h + @data.padding
+        --         element.data.x = @data.x + @data.padding
+        --         element.data.y = y
+        --         element\setWidth @data.w - @data.padding*2
+        --
+        -- @window_area.remove = (element) =>
+        --     pop.elements.box.__parent.remove @, element
+        --     --TODO we need to adjust all elements' positions
 
         selected = false
         mx = 0
@@ -144,7 +171,8 @@ class window extends element
         if @minimizeButton
             @minimizeButton\align!
 
-        @window_area\move nil, @header\getHeight!
+        if @data.titleBar
+            @window_area\move nil, @header\getHeight!
 
         return @
 
@@ -173,8 +201,11 @@ class window extends element
                 when "right"
                     y -= h - @data.h
 
-            @window_area\setHeight h - @header\getHeight!
+            if @data.titleBar
-            @window_area\move nil, @header\getHeight!
+                @window_area\setHeight h - @header\getHeight!
+                @window_area\move nil, @header\getHeight!
+            else
+                @window_area\setHeight h
             @data.h = h
             @data.y += y
 
@@ -196,13 +227,46 @@ class window extends element
     getPadding: =>
         return @window_area\getPadding!
 
-    childAdded: (element) =>
+    add: (element) =>
-        table.insert @window_area.data, table.remove @data.child, @dataIndexOf element.data
+        @window_area\add element
-        table.insert @window_area, table.remove @child, @indexOf element
+
-        element\align!
+        x, y = @window_area.data.x, @window_area.data.y
-        print "worked?"
+        --for element in *@window_area.child
+            --element\setWidth @data.w - @data.padding*2
+            --TODO needs to align them vertically with appropriate padding (I am not taking margin into account which is bad)
+
         return @
 
+        -- @window_area.add = (element) =>
+        --     pop.elements.box.__parent.add @, element
+        --     --NOTE temporarily disabled
+        --     -- this seems to be working but errors with previous == nil
+        --     -- I have moved the intended functionality to the window element's function that calls these
+        --     if false and inheritsFromElement element
+        --         -- we need to adjust its position based on the previous element
+        --         previous = @data.child[#@data.child-1]
+        --         y, h = previous.y, previous.h
+        --         y += h + @data.padding
+        --         element.data.x = @data.x + @data.padding
+        --         element.data.y = y
+        --         element\setWidth @data.w - @data.padding*2
+        --
+        -- @window_area.remove = (element) =>
+        --     pop.elements.box.__parent.remove @, element
+        --     --TODO we need to adjust all elements' positions
+
+    remove: (element) =>
+        @window_area\remove element
+        return @
+
+    --NOTE was this even used?
+    --childAdded: (element) =>
+    --    table.insert @window_area.data, table.remove @data.child, @dataIndexOf element.data
+    --    table.insert @window_area, table.remove @child, @indexOf element
+    --    element\align!
+    --    print "worked?"
+    --    return @
+
     maximize: =>
         if @data.maximized
             @setSize @data.previous.w, @data.previous.h

extensions/utility.moon

@@ -11,6 +11,7 @@ element = require "#{path}/elements/element"
 --text = require "#{path}/elements/text"
 
 --- @todo make this built-in as maximize for window elements
+--- @todo rewrite to take into account margin!
 element.__base.fill = =>
   @data.x = @parent.data.x + @parent.data.padding
   @data.y = @parent.data.y + @parent.data.padding

main.lua

@@ -1,140 +1,165 @@
+local graphics
+graphics = love.graphics
 local pop = require("")
 local debug = false
 love.load = function()
-  pop.text("Hello World!"):align("center", "center")
+  local old_method
-  local testWindow = pop.window({
+  old_method = function()
-    windowBackground = {
+    pop.text("Hello World!"):align("center", "center")
-      200,
+    local testWindow = pop.window({
-      200,
+      windowBackground = {
-      200
+        200,
-    },
+        200,
-    closeable = true,
+        200
-    maximizeable = true,
+      },
-    minimizeable = true
+      closeable = true,
-  }, "Testing Window"):move(20, 20):setSize(200, 100):align("right", "top")
+      maximizeable = true,
-  print(testWindow.window_area)
+      minimizeable = true
-  pop.window({
+    }, "Testing Window"):move(20, 20):setSize(200, 100):align("right", "top")
-    maximizeable = true
+    print(testWindow.window_area)
-  }, "Test Window #2"):align("center", "bottom")
+    pop.window({
-  local centerBox = pop.box({
+      maximizeable = true
-    w = 200,
+    }, "Test Window #2"):align("center", "bottom")
-    h = 200
+    local centerBox = pop.box({
-  }, {
+      w = 200,
-    255,
+      h = 200
-    255,
+    }, {
-    0,
-    120
-  }):align("center", "center")
-  pop.box(centerBox, {
-    w = 10,
-    h = 20
-  }):align("left", "top")
-  pop.box(centerBox, {
-    w = 30,
-    h = 30
-  }):align("center", "top")
-  pop.box(centerBox, {
-    w = 5,
-    h = 40
-  }):align("left", "center")
-  pop.box(centerBox, {
-    w = 50,
-    h = 50
-  }):align("right", "center")
-  pop.box(centerBox):align("left", "bottom"):setSize(5, 5)
-  pop.box(centerBox, {
-    w = 25,
-    h = 10
-  }):align("center", "bottom")
-  pop.text(centerBox, "Align me!"):align("right", "top")
-  pop.window(centerBox):align("right", "bottom")
-  centerBox:setPadding(5)
-  pop.box(centerBox, {
-    w = 10,
-    h = 20,
-    background = {
-      0,
-      0,
       255,
-      100
-    }
-  }):align("left", "top")
-  pop.box(centerBox, {
-    w = 30,
-    h = 30,
-    background = {
-      0,
-      0,
       255,
-      100
-    }
-  }):align("center", "top")
-  pop.box(centerBox, {
-    w = 5,
-    h = 40,
-    background = {
       0,
-      0,
+      120
-      255,
+    }):align("center", "center")
-      100
+    pop.box(centerBox, {
-    }
+      w = 10,
-  }):align("left", "center")
+      h = 20
-  pop.box(centerBox, {
+    }):align("left", "top")
-    w = 50,
+    pop.box(centerBox, {
-    h = 50,
+      w = 30,
-    background = {
+      h = 30
-      0,
+    }):align("center", "top")
-      0,
+    pop.box(centerBox, {
-      255,
+      w = 5,
-      100
+      h = 40
-    }
+    }):align("left", "center")
-  }):align("right", "center")
+    pop.box(centerBox, {
-  pop.text(centerBox, {
+      w = 50,
-    color = {
+      h = 50
-      0,
+    }):align("right", "center")
-      0,
+    pop.box(centerBox):align("left", "bottom"):setSize(5, 5)
-      255,
+    pop.box(centerBox, {
-      100
+      w = 25,
-    }
+      h = 10
-  }, "Text!"):align("left", "bottom")
+    }):align("center", "bottom")
-  pop.box(centerBox, {
+    pop.text(centerBox, "Align me!"):align("right", "top")
-    w = 25,
+    pop.window(centerBox):align("right", "bottom")
-    h = 10,
+    centerBox:setPadding(5)
-    background = {
+    pop.box(centerBox, {
-      0,
+      w = 10,
-      0,
+      h = 20,
-      255,
+      background = {
-      100
+        0,
-    }
+        0,
-  }):align("center", "bottom")
+        255,
-  pop.text(centerBox, {
+        100
-    color = {
+      }
-      0,
+    }):align("left", "top")
-      0,
+    pop.box(centerBox, {
-      255,
+      w = 30,
-      100
+      h = 30,
-    }
+      background = {
-  }, "Align me!"):align("right", "top")
+        0,
-  return pop.window(centerBox, {
+        0,
-    titleColor = {
+        255,
-      0,
+        100
-      0,
+      }
-      0,
+    }):align("center", "top")
-      150
+    pop.box(centerBox, {
-    },
+      w = 5,
-    titleBackground = {
+      h = 40,
-      0,
+      background = {
-      0,
+        0,
-      255,
+        0,
-      100
+        255,
-    },
+        100
-    windowBackground = {
+      }
-      200,
+    }):align("left", "center")
-      200,
+    pop.box(centerBox, {
-      255,
+      w = 50,
-      100
+      h = 50,
-    }
+      background = {
-  }):align("right", "bottom")
+        0,
+        0,
+        255,
+        100
+      }
+    }):align("right", "center")
+    pop.text(centerBox, {
+      color = {
+        0,
+        0,
+        255,
+        100
+      }
+    }, "Text!"):align("left", "bottom")
+    pop.box(centerBox, {
+      w = 25,
+      h = 10,
+      background = {
+        0,
+        0,
+        255,
+        100
+      }
+    }):align("center", "bottom")
+    pop.text(centerBox, {
+      color = {
+        0,
+        0,
+        255,
+        100
+      }
+    }, "Align me!"):align("right", "top")
+    return pop.window(centerBox, {
+      titleColor = {
+        0,
+        0,
+        0,
+        150
+      },
+      titleBackground = {
+        0,
+        0,
+        255,
+        100
+      },
+      windowBackground = {
+        200,
+        200,
+        255,
+        100
+      }
+    }):align("right", "bottom")
+  end
+  local new_method
+  new_method = function()
+    local partsGrid = pop.dynamicGrid()
+    return pop.window({
+      w = graphics.getWidth() / 2,
+      h = graphics.getHeight(),
+      titleBar = false
+    }):add({
+      pop.box({
+        h = 17
+      }),
+      pop.scrollbox():add(partsGrid),
+      pop.grid():add({
+        pop.button(),
+        pop.button(),
+        pop.button()
+      })
+    })
+  end
+  return new_method()
 end
 love.update = function(dt)
   return pop.update(dt)

main.moon

@@ -2,37 +2,57 @@
 --- @copyright Paul Liverman III (2016)
 --- @license The MIT License (MIT)
 
+import graphics from love
+
 pop = require ""
 debug = false
 
 love.load = ->
-    pop.text("Hello World!")\align "center", "center"
+    old_method = ->
-    testWindow = pop.window({windowBackground: {200, 200, 200}, closeable: true, maximizeable: true, minimizeable: true}, "Testing Window")\move(20, 20)\setSize(200, 100)\align "right", "top"
+        pop.text("Hello World!")\align "center", "center"
-    print testWindow.window_area
+        testWindow = pop.window({windowBackground: {200, 200, 200}, closeable: true, maximizeable: true, minimizeable: true}, "Testing Window")\move(20, 20)\setSize(200, 100)\align "right", "top"
+        print testWindow.window_area
 
-    pop.window({maximizeable: true}, "Test Window #2")\align "center", "bottom"
+        pop.window({maximizeable: true}, "Test Window #2")\align "center", "bottom"
 
-    -- alignment testing
+        -- alignment testing
-    centerBox = pop.box({w: 200, h: 200}, {255, 255, 0, 120})\align "center", "center"
+        centerBox = pop.box({w: 200, h: 200}, {255, 255, 0, 120})\align "center", "center"
-    pop.box(centerBox, {w: 10, h: 20})\align "left", "top"
+        pop.box(centerBox, {w: 10, h: 20})\align "left", "top"
-    pop.box(centerBox, {w: 30, h: 30})\align "center", "top"
+        pop.box(centerBox, {w: 30, h: 30})\align "center", "top"
-    pop.box(centerBox, {w: 5, h: 40})\align "left", "center"
+        pop.box(centerBox, {w: 5, h: 40})\align "left", "center"
-    pop.box(centerBox, {w: 50, h: 50})\align "right", "center"
+        pop.box(centerBox, {w: 50, h: 50})\align "right", "center"
-    pop.box(centerBox)\align("left", "bottom")\setSize 5, 5
+        pop.box(centerBox)\align("left", "bottom")\setSize 5, 5
-    pop.box(centerBox, {w: 25, h: 10})\align "center", "bottom"
+        pop.box(centerBox, {w: 25, h: 10})\align "center", "bottom"
-    pop.text(centerBox, "Align me!")\align "right", "top"
+        pop.text(centerBox, "Align me!")\align "right", "top"
-    pop.window(centerBox)\align "right", "bottom"
+        pop.window(centerBox)\align "right", "bottom"
 
-    centerBox\setPadding 5
+        centerBox\setPadding 5
 
-    pop.box(centerBox, {w: 10, h: 20, background: {0, 0, 255, 100}})\align "left", "top"
+        pop.box(centerBox, {w: 10, h: 20, background: {0, 0, 255, 100}})\align "left", "top"
-    pop.box(centerBox, {w: 30, h: 30, background: {0, 0, 255, 100}})\align "center", "top"
+        pop.box(centerBox, {w: 30, h: 30, background: {0, 0, 255, 100}})\align "center", "top"
-    pop.box(centerBox, {w: 5, h: 40, background: {0, 0, 255, 100}})\align "left", "center"
+        pop.box(centerBox, {w: 5, h: 40, background: {0, 0, 255, 100}})\align "left", "center"
-    pop.box(centerBox, {w: 50, h: 50, background: {0, 0, 255, 100}})\align "right", "center"
+        pop.box(centerBox, {w: 50, h: 50, background: {0, 0, 255, 100}})\align "right", "center"
-    pop.text(centerBox, {color: {0, 0, 255, 100}}, "Text!")\align("left", "bottom")--\setSize 5, 5
+        pop.text(centerBox, {color: {0, 0, 255, 100}}, "Text!")\align("left", "bottom")--\setSize 5, 5
-    pop.box(centerBox, {w: 25, h: 10, background: {0, 0, 255, 100}})\align "center", "bottom"
+        pop.box(centerBox, {w: 25, h: 10, background: {0, 0, 255, 100}})\align "center", "bottom"
-    pop.text(centerBox, {color: {0, 0, 255, 100}}, "Align me!")\align "right", "top"
+        pop.text(centerBox, {color: {0, 0, 255, 100}}, "Align me!")\align "right", "top"
-    pop.window(centerBox, {titleColor: {0, 0, 0, 150}, titleBackground: {0, 0, 255, 100}, windowBackground: {200, 200, 255, 100}})\align "right", "bottom"
+        pop.window(centerBox, {titleColor: {0, 0, 0, 150}, titleBackground: {0, 0, 255, 100}, windowBackground: {200, 200, 255, 100}})\align "right", "bottom"
+
+    new_method = ->
+        partsGrid = pop.dynamicGrid!
+        pop.window({w: graphics.getWidth!/2, h: graphics.getHeight!, titleBar: false})\add({
+            pop.box({h: 17}) -- temporary height
+            pop.scrollbox()\add(
+                partsGrid
+            )
+            pop.grid()\add({
+                pop.button()
+                pop.button()
+                pop.button()
+            })
+        })
+
+    --old_method!
+    new_method!
 
 love.update = (dt) ->
     pop.update dt