feat: começa usar actions e selectors

src/app/app.ts

@@ -1,25 +1,13 @@
-import {EventHandler, FormControl, LayerSchema, Schema} from '@interfaces'
 import {Form, Canvas, Sidenav, Accordion, DownloadButton} from '@elements'
+import {selectSponsor, submitPresentation, updateForm} from '@store'
+import {FormControl, LayerSchema, Schema} from '@interfaces'
 import {PresentationForm} from '@components/presentation'
 import {ThemeToggle} from '@components/theme'
 import {TitleBar} from '@elements/title-bar'
-import {onFormChange} from '@events'
 import {dispatch, h} from '@utils'
 import {use} from '@websqnl/di'
-import {login} from '@store'
-import {
-  onSponsorAdded,
-  onSponsorCreated,
-  onSponsorSelected,
-} from '@events/sponsor'
-import {
-  onPresentationAdded,
-  onPresentationCreated,
-  onPresentationHandled,
-  onPresentationSubmitted,
-} from '@events/presentation'
-
-dispatch(login({username: 'user', password: 'pass'}))
+
+// dispatch(login({username: 'user', password: 'pass'}))
 
 export const loadApp = (container: HTMLElement) => {
   const canvas = use(Canvas)
@@ -29,8 +17,6 @@ export const loadApp = (container: HTMLElement) => {
   const layer = use(LayerSchema)
   const control = use(FormControl)
 
-  const handler = use(EventHandler)
-
   const accordion = new Accordion()
 
   const theme = use(ThemeToggle)
@@ -61,16 +47,17 @@ export const loadApp = (container: HTMLElement) => {
     form.onsubmit = (ev) => {
       ev.preventDefault()
 
-      handler.emit('presentation.submitted', form.value)
+      dispatch(submitPresentation(form.value))
+      // handler.emit('presentation.submitted', form.value)
 
       accordion.closeAll()
     }
   }
 
-  handler.on('presentation.submitted', onPresentationSubmitted)
-  handler.on('presentation.handled', onPresentationHandled)
-  handler.on('presentation.created', onPresentationCreated)
-  handler.on('presentation.added', onPresentationAdded)
+  // handler.on('presentation.submitted', onPresentationSubmitted)
+  // handler.on('presentation.handled', onPresentationHandled)
+  // handler.on('presentation.created', onPresentationCreated)
+  // handler.on('presentation.added', onPresentationAdded)
 
   /**
    *  ___ _ __   ___  _ __  ___  ___  _ __
@@ -81,27 +68,31 @@ export const loadApp = (container: HTMLElement) => {
    */
   control.sponsor.input.onchange = () => {
     const [file] = control.sponsor.input.files ?? []
-    handler.emit('sponsor.selected', file)
+    dispatch(selectSponsor(file))
+    // handler.emit('sponsor.selected', file)
   }
 
-  handler.on('sponsor.selected', onSponsorSelected)
-  handler.on('sponsor.created', onSponsorCreated)
-  handler.on('sponsor.added', onSponsorAdded)
+  // handler.on('sponsor.selected', onSponsorSelected)
+  // handler.on('sponsor.created', onSponsorCreated)
+  // handler.on('sponsor.added', onSponsorAdded)
 
   control.sponsor.button.onclick = () => {
     control.sponsor.input.click()
   }
 
   const form = new Form<Schema>(() => {
-    handler.emit('form.updated', form.value)
+    dispatch(updateForm(form.value))
+    // handler.emit('form.updated', form.value)
   })
 
-  handler.on('form.updated', onFormChange)
+  // handler.on('form.updated', onFormChange)
 
   layer.background.setDraggable(false).setSrc(form.value.logo).render()
 
   layer.logo.setOrder(4).setSrc('logos/dev-parana.svg').render()
 
+  layer.devParana.setSrc('dev-parana.svg').setOrder(19).render()
+
   layer.title
     .setText(control.title.value)
     .setSize(78)
@@ -119,7 +110,8 @@ export const loadApp = (container: HTMLElement) => {
     layer.logo,
     layer.background,
     layer.title,
-    layer.details
+    layer.details,
+    layer.devParana
   )
 
   const dateTime = h(

src/app/components/presentation/presentation-form.ts

@@ -34,6 +34,14 @@ export class PresentationForm extends Form<SubmittedPresentation> {
     this.append(...values(this.controls), ...values(this.actions))
     this.controls.photoUrl.element.readOnly = true
 
+    this.addEventListener('submit', () => {
+      this.controls.title.element.readOnly = true
+      this.controls.github.element.readOnly = true
+      this.controls.speaker.element.readOnly = true
+      this.controls.role.element.readOnly = true
+      this.controls.photo.element.readOnly = true
+    })
+
     this.controls.github.onchange = async () => {
       if (this.github.value) {
         const user = await this.getFromGithub(this.github.value)

src/app/core/base/layer.ts

@@ -82,6 +82,7 @@ export abstract class Layer extends OffscreenCanvas {
   dragTo(point: Vector2) {
     if (this.dragging) {
       console.log(point)
+      console.log(this.offset)
 
       this.position.copy(point).sub(this.offset)
     }

src/app/core/image-layer.ts

@@ -21,13 +21,21 @@ export class ImageLayer extends Layer {
 
   async render() {
     if (!this.#hasNoImage(this.#image.src)) {
-      return this.#image.decode().then(() => {
+      if (this.#normalizeSrc(this.#image.src)) {
+        return this.#image.decode().then(() => {
+          this.context.clearRect(0, 0, this.width, this.height)
+          this.context.drawImage(this.#image, 0, 0, this.width, this.height)
+        })
+      } else {
         this.context.clearRect(0, 0, this.width, this.height)
-        this.context.drawImage(this.#image, 0, 0, this.width, this.height)
-      })
+      }
     }
   }
 
+  #normalizeSrc(src = '') {
+    return src.replace(`${location.origin}/`, '')
+  }
+
   #hasNoImage(src?: string) {
     return src === location.origin + '/undefined'
   }

src/app/elements/title-bar.ts

@@ -1,4 +1,4 @@
-import { debounce } from '@utils/debounce'
+import {debounce} from '@utils/debounce'
 import {builtIn} from '@utils/decorators'
 
 @builtIn('div', 'cw-title-bar')
@@ -12,16 +12,35 @@ export class TitleBar extends HTMLDivElement {
   }
 
   connectedCallback() {
+    this.style.display = 'none'
+
     if ('windowControlsOverlay' in navigator) {
       navigator.windowControlsOverlay.addEventListener(
-        "geometrychange",
+        'geometrychange',
         debounce((event) => {
-          const { visible } = navigator.windowControlsOverlay;
-          const { width } = event.titlebarAreaRect;
-          const is = visible ? "visible" : "hidden";
-          console.log(`Overlay is ${is} with ${width}px`);
+          if (this.style.display === 'none') this.#setstyles()
+
+          const {visible} = navigator.windowControlsOverlay
+          const {width} = event.titlebarAreaRect
+          const is = visible ? 'visible' : 'hidden'
+          console.log(`Overlay is ${is} with ${width}px`)
         })
-      );
+      )
     }
   }
+
+  #setstyles() {
+    this.style.position = 'fixed'
+    this.style.left = `env(titlebar-area-x, 0)`
+    this.style.top = `env(titlebar-area-y, 0)`
+    this.style.height = `env(titlebar-area-height, 50px)`
+    this.style.width = `env(titlebar-area-width, 100%)`
+    this.style.color = `rgb(var(--cw-surface-rgb))`
+    this.style.display = `flex`
+    this.style.alignContent = `center`
+    this.style.justifyContent = `center`
+    this.style.fontWeight = `bold`
+    this.style.fontSize = `1.2em`
+    this.style.margin = `0`
+  }
 }

src/app/store/actions.ts

@@ -1,14 +1,33 @@
+import {Presentation, SubmittedPresentation} from '@interfaces/presentation'
+import {ImageLayer, PresentationLayer} from '../core'
+import {Schema} from '@interfaces/schema'
 import {action} from '@utils/state'
 
-export interface Login {
-  username: string
-  password: string
-}
+/**
+ * Form
+ */
+export const updateForm = action<Schema>('form.updated')
 
-export interface Logged {
-  accressToken: string
-}
+/**
+ * Presentation
+ */
+export const submitPresentation = action<SubmittedPresentation>(
+  'presentation.submitted'
+)
 
-export const login = action<Login>('Login')
-export const loginSuccess = action<Logged>('Login Success')
-export const loginError = action<DOMException>('Login Error')
+export const handlePresentation = action<Presentation>('presentation.handled')
+
+export const createPresentation = action<PresentationLayer>(
+  'presentation.created'
+)
+
+export const addPresentation = action<PresentationLayer>('presentation.added')
+
+/**
+ * Sponsor
+ */
+export const selectSponsor = action<File>('sponsor.selected')
+
+export const createSponsor = action<ImageLayer>('sponsor.created')
+
+export const addSponsor = action<ImageLayer>('sponsor.added')