Tools

Kwik Visual Code Editor

update the test-proj/Solar2D/component/editor to develop/Solar2D/tools/kwik-editor

This tool visually edits Soar2D/src files of a Kwik project and is harnessed by Pegasus http-server

↑ Select a layer or an event to review. You can edit values of properties

TODO each kwik component with default values

TODO ui components like checkbox/selectors … for each component ⭐️

react compnents on webview – can be shared with UXP panel which may send params via http to pegasus in kwik editor

current editPorpsTable.lua servers as plain table viewer & editor

TODO save/copy params to .http (YAML) for httpYac

TODO how to send text to clipboard from Solar2D　⭐️

Launcher

develop/Solar2D/tools/pegasus-launcher

• test-Solar2D-SampleCode.http

You can open a solar2D project from VS Code with httpYac

Harness

Solar2D/server/tests

• bookTest01_editor_put.http
• bookTest01_editor_delete.http
• bookTest01_editor.http
• bookTest01_editor_transition2.http
• bookTest01_editor_imported.http
• bookTest01_editor_imported_group.http

You can post params with httpYac in VS Code to a Solar2D project

TODO set Layer varaible with samples

TODO create models: animation, transition2, button …, and pegasus-receiver in kwik-editor ⭐️

• Animation_bounce.http

  POST /layers/logo
  Content-Type: application/yaml
  
  - transition: bounce
  - params:
      height: 400
      width: 200
      time: 1000
      iterations: 0
  

Custom Code

you can put your own code(.lua) into commands/pageX/ and componets/pageX/layers folder.

• commands/pageX/*.lua
• components/pageX/layers/*.lua

Kwik Exporter traverses folders of Solar2D project to integrate your additons. Or you can manually add the file names to components/pageX/index.lua

for instance, myrect.lua calls myEvents.testHandler when user taps the rect.

The $weight in a comment line at the top is a variable for Kwik. A scene componet(layer or your custom code)with lower value will be placed upper. The top layer from Photoshop is zero. Then values are increases to until the background layer. For your custom code , you can use minus or positive with decimal. For example, myrect is -2, mycircle is -1. If you change weight values of custom code files, don’t forget to publish code again.

-- $weight=-2
--
local M = {}
--
function M:init(UI)
end
--
function M:create(UI)
  local sceneGroup = UI.scene.view
  local obj = display.newRect( sceneGroup, display.contentCenterX, display.contentCenterY-100, 100, 100 )
  obj:setFillColor(0.2,0.2,0.2);

  obj:addEventListener("tap", function()
    UI.scene:dispatchEvent({
      name = "myEvents.testHandler",
      UI = UI
    })
  end)
end
--
function M:didShow(UI)
end
--
function M:didHide(UI)
end
--
function  M:destory()
end
--
return M

myEvents.testHandker.lua

local instance = require("commands.kwik.baseCommand").new(
  function (params)
    local UI    = params.UI

    print("commands.myEvents.testhander")

    UI.scene:dispatchEvent({
      name = "myAction",
      UI = UI
    })

  end
)
--
return instance

You can find your custom code are inserted in components/pageX/index.lua. The layers are sorted internally by values of $weight variable.

local sceneName = ...
--
local model = {
    name = "page01",
    components = {
      layers = {
        {bg = {}},
        {mycircle={}},
        {myrect={}}
      },
        audios = {},
        groups = {},
        others = {},
        timers {},
        variables = {}
    },
    commands = {
      "myAction",
      "myEvnets.testHandler"
    },
    onInit = function(scene) print("onInit") end
}

--
local scene = require('components.kwik.scene').new(sceneName, model)

return scene

generate_scene_index tool

1. create .lua for commands or components

2. run the follwoing tool to update scenes/pageX/index.lua to append the new .lua to the index.lua

   /develop/Solar2D/tools/generate_scene_index is a Solar2D application. You can open the main.lua in Solar2D simulator.

   the table in the index.lua is updated by iterating files in editor.template/components and template/commands