Architecure

Architecure

UXP panel

flowchart LR

Designer((fas:fa-user Designer))
Developer((fas:fa-user Developer))
User((fas:fa-user User or AI))


subgraph Photoshop[Photoshop UXP]
	graphics(images/lua renderer<br>scaffolder)
end

subgraph Editor[Kwik Visual Editor]
	subgraph App
		assets[(assets/images<br>models/json)]
		lua[(Source .lua)]
	end
	tools(GUI tools<br><br>renderer<br>scaffolder)
	httpServer
	RestApi(RestApi<br>transform<br>animation)
	RestApi -.- tools
end

subgraph RestApi[REST API]
	form(Properties <br> CRUD)
end

subgraph VSCode
	httpYac(httpYac)
  coding
end

Photoshop -.img/json.-> assets
RestApi <-.img/json.-> httpServer
httpServer <-.-> assets
httpServer -.- tools
tools -.- App

User -.- Browser
Browser-.maybe in future.- RestApi
httpYac -.- RestApi
coding -.- lua

RestApi -.- assets

Designer --- tools
Designer --- Photoshop

Developer --- VSCode

Rest api

pegasus is runningin Editor

1. run Editor

2. upload an image to pegasus server

   • save it assets/images/book/
   • create display.object
   • .json

Kwik Visual Editor

1. outputs images/json to App/book

2. run App/book

Data store

A Kwik Project

flowchart RL


subgraph Editor[kwik editor]

  subgraph nanostores
    layerstore[layers]
    actions
    assets
    audios
  end

  GUI[ menu > Layer]

  subgraph asset
    assetSelectBox
    classProps
    buttons
  end

  subgraph parts
    selectors
    bookTable
    pageTable
    layerTable
    propsTable
    buttons
    subgraph controller
      selectLayer

    end
    controller -.- selectors
  end

  selectors -. 1 click .- GUI

  subgraph action
    actionTable
    actionCommandTable
    actionPropsTable
  end

  subgraph classEditors
    subgraph animation
      selectBox
      classProps
      controller
    end
    audio
  end
  controller
  template
  scripts

end



subgraph framework
  controller
  subgraph components_kwik[components]
    bookstore
    common[Common <br> myClass]
    custom
    layer
    anim
    button
  end
  command_kwik[command]
  plugin
  extlib
end


subgraph App/bookX
  assets
  subgraph components
      page(pageX.index <br> - layers <br> - audios <br> - ........)
  end

  subgraph commands
    pageX
  end
  scene(index.lua returns scenes as pageXs)
end

Select Layer to load the layer table

flowchart RL


subgraph Editor[kwik editor]

  GUI[ menu > Layer]

  subgraph asset
    assetSelectBox
    classProps
    buttons
  end

  action
  classEditors

  subgraph parts
    selectors
    bookTable
    pageTable
    layerTable
    propsTable
    buttons
    subgraph controller
      selectLayer

    end
    controller -.- selectors
  end

  selectors -. 1 click .- GUI

  controller
  template
  scripts

    subgraph nanostores
    layerstore[layers data]
    actions
    assets
    audios
  end

end

subgraph framework
end


subgraph App/bookX
  assets
  subgraph components
      page(pageX.index <br> - layers <br> - audios <br> - ........)
  end

  subgraph commands
    pageX
  end
  scene(index.lua returns scenes as pageXs)
end

selectLayer -. 2 read .-> components
selectLayer -. 3 set .-> layerstore

layerTable -. 4 listening for  createTable .- layerstore

• layers lua -> framework.components.layer -> view (App.pageX.layers)
• layers data -> nanostore -> view (editro.layersTable)