Import component Layer

index.lua

layers = {
  ...
  rectCopied = {class = {"imported"}
  ...
  }

rectCopied_imported.lua

• x, y
• color is (1, 1, 0) yellow

local props={
  path = "bookTest.components.parts.layers.buttonGroup.redRect",
  name = "rectCopied",
  class = {"button", "linear"},
  text = "hello importer class",
}

local layerProps = {
  x         = display.contentCenterX - 150,
  y         = display.contentCenterY - 100,
  color     = {1, 1, 0}
}

props.layerProps = layerProps
props.classProps = {
  button = {},
  linear = {}
}
return require("components.kwik.importer").new(props)

graph TB

subgraph parts
  bg
  square
  subgraph buttonGroup
    redRect
    greenRect
    blueRect
  end
  subgraph redGroup
   rectCopied
   circleRed
  end
  rectCopied -.import.->  redRect

end

subgraph page1
  bg1[bg]
  square1[square]
  buttonGroup1[buttonGroup]
end
square1 -.import.-> square
buttonGroup1 -.import.-> buttonGroup

TODO

• REST API

  • layerProps, classProps

  • group props

    props = {
      redRect = {layerProps = {x=display.contentCenterX+50, color = {0.5,0,0}}},
      redRect_button = {},
    }

• GUI class “imported”

  • selectLayer
  • properties

Page1

• buttonGroup1, bouttonGroup2 are imported from parts/buttonGroup

  index.lua

  layers = {
    {  bg={} },
    {  buttonGroup1={ class={"imported"} } },
    {  buttonGroup2={ class={"imported"} } },

  

  components/layers

  • bg.lua
  • square.lua
  • square_import.lua
  • buttonGroup1
  • buttonGroup1_import.lua
  • buttonGroup2
  • buttonGroup2_import.lua

• page1 buttonGroup1_import.lua

  local M={
    path = "bookTest.components.parts.layers.buttonGroup.index",
    name = "buttonGroup1",
  }
  
  M.props = {
    redRect = {layerProps = {x=display.contentCenterX+50, color = {0.5,0,0}}},
    redRect_button = {},
    redRect_linear = {},
    -- greenRect = {layerProps = {x=200}},
    greenRect = {layerProps = {x=display.contentCenterX+100, color = {0,0.5, 0}}},
    blueRect = {layerProps = {x=display.contentCenterX+150, color = {0,0,0.5}}},
  }
  
  return require("components.kwik.importer").new(M)

• page1 square_imported.lua

  local M={
    path = "bookTest.components.parts.layers.square",
    name = "square",
  }
  
  return require("components.kwik.importer").new(M)

Parts

• redGroup/rectCopied is imported from buttonGroup/Rect

  local layerProps = {
    x         = display.contentCenterX - 150,
    y         = display.contentCenterY - 100,
    color     = {1, 1, 0}
  }

• index.lua

  layers = {
    {  bg={} },
    {  buttonGroup={
        {redRect ={class={"button", "linear"}}},
        {greenRect = {}},
        {blueRect = {} }}
    },
    { redGroup= {
        {rectCopied = {class = {"imported"}}},
        {circleRed = {}}
      }
    }

  

components/layers files

• bg.lua

• square.lua

• square_animation.lua

• buttonGroup

  • redRect.lua
  • redRect_button.lua
  • redRect_linear.lua
  • greenRect.lua
  • blueRect.lua

• redGroup

  • rectCopied.lua
  • rectCopied_import.lua
  • circleRed.lua

• parts redGroup/rectCopied_imported.lua

  • props.layerProps

  • props.classProps

    local M={
      path = "bookTest.components.parts.layers.buttonGroup.redRect",
      name = "rectCopied",
      class = {"button", "linear"},
      text = "hello importer class",
    }
    
    local layerProps = {
      blendMode = "normal",
      height    = 50,
      width     = 50,
      kind      = solidColor,
      name      = "redRect",
      type      = "png",
      x         = display.contentCenterX - 150,
      y         = display.contentCenterY - 100,
      alpha     = 100/100,
      color     = {1, 1, 0}
    }
    
    props.layerProps = layerProps
    props.classProps = {
      button = {},
      linear = {}
    }
    
    return require("components.kwik.importer").new(props)
    -- this import need to call redRect.lua, redRect_button.lua redRect_linear.lua

Instance Name

the syntax is {{parent}}.{{name}}. You can access it like

• local obj = UI.sceneGroup(“three.eight”)

  A parent.name should be unique in all the layers in a page

  Application.lua

  function newModule(name)
    local M = {}
    local parent = name:match("(.-)[^%.]+$")
    local root = parent:sub(1, parent:len()-1):match("(.-)[^%.]+$")
    M.name = name:sub(root:len()+1)
    local isLayers = M.name:find("layers.")
    if isLayers then
      M.name = M.name:sub(8)
    end
    M.newInstance = newInstance
    return parent, root, M
  end

  for example, let’s make an instance of layer group - three

  

       layers = {
        {one = {}},
        {two={class={"linear"}}},
        {three = {
          { four={}},
          { five={class={"myClass"}}},
          { six={
              { seven = {class={"myClass", "linear"}}},
              { eight = {}}
            }
          }
        }}
      },

  

  You can import it to another page like this

  layers = {
     {  bg={} },
     {  three={ class={"imported", "linear"} } },
   },

  • three_imported.lua

    local M={
        path = "bookTest.components.page2.layers.three.index",
        name = "three",
      }
    
      M.props = {
        four={layerProps = {color={1,0,1}}},
        five={layerProps = {color={0,1,0}}},
        five_myClass = {},
        six={
            seven = {layerProps = {color={1,0,0}}},
            seven_myClass = {},
            seven_linear = {},
            eight = {layerProps = {color={1,1,0}}}
          }
      }
    
    return require("components.kwik.importer").new(M)

  • three_linear.lua

    function M:didShow(UI)
    
       local obj =  UI.sceneGroup["six.eight"]
       local linearOne, linearTwo
    
       linearOne = function()
         transition.to(obj, {xScale = 2, yScale=2, onComplete = linearTwo})
       end
    
       linearTwo = function()
         transition.to(obj, {xScale = 1, yScale=1, onComplete = linearOne})
       end
    
       linearOne()
     end