Canvas

Canvas

PSD

  • bookFree > canvas

Unit Test

  • editor.test.suite_canvas

Kwik4

  • components.kwik.layer_canvas.lua

index

  • App/bookFree/canvas

genereated from editor.template.componetns/pageX/index.lua

{
    name = "pageX",
    components = {
      layers = {
        {  back={ } },
        {  painting={} },
        {  butBlue={ class={"button"}} },
        {  butWhite={class={"button"}} },
        {  butOrange={class={"button"}} },
        {  butCamera={class={"button"}} },
        {  butLarge={class={"button"}} },
        {  butMedium={class={"button"}} },
        {  bigCandice={class={"button"}} },
        { Candice={class = {"canvas"}},
      },
    },
    commands = {},
}
  • editor/template/components/pageX/interaction/defaults/canvas.lua

    // TODO add attributes

    local M = {
      name = "canvas",
      class="canvas",
      controls = {
        isActive = true
      }
    }
    
    return M

template

  • editor/template/components/pageX/interaction/layer_canvas

    //TODO create it from kwik4’s components.kwik.layer_canvas.lua

    local name = ...
    local parent,root = parent_root(name)
    local layerProps = require(parent.."{{layer}}")
    
    local M = {
      name ="{{name}}",
      class = "{{class}}", -- button, drag, canvas ...
      --
      {{#controls}}
        UI.canvas.name                           = "UI.canvas"
        UI.canvas.cR, UI.canvas.cG, UI.canvas.cB = {{bc}}
        UI.canvas.brushSize                      = {{bs}}
        UI.canvas.brushAlpha                     = 1
        UI.canvas.lineTable                      = {}
        UI.canvas.undone                         = {}
      {{/controls}}
      layerProps = layerProps
    }
    
    function M:create(UI)
      local sceneGroup = UI.scene.view
      local obj =  self:createCanvas(UI)
      UI.layers[self.name] = obj
      sceneGroup[self.name] = obj
      sceneGroup:insert(obj)
    end
    ...
    ...
    
    return require("components.kwik.layer_canvas").new(M)

module

  • components.kwik.layer_canvas"

editor

// editor.ihdex:getTool() returns a component editor from id of editor.model

  • components.editor.interaction.index

    // TODO implement a color selector for the attributes with Color

action commands

Please see design/project_model/commands/canvas and screenshot