feat: melhora fluxo que adiciona patrocinadores

src/app/app.ts

@@ -1,11 +1,15 @@
 import {EventHandler, FormControl, LayerSchema, Schema} from '@interfaces'
 import {Form, Canvas, Sidenav, Accordion, DownloadButton} from '@elements'
-import {onSponsorCreated, onSponsorSelected} from '@events/sponsor'
 import {PresentationForm} from '@components/presentation'
 import {ThemeToggle} from '@components/theme'
 import {onFormChange} from '@events'
 import {use} from '@websqnl/di'
 import {h} from '@utils'
+import {
+  onSponsorAdded,
+  onSponsorCreated,
+  onSponsorSelected,
+} from '@events/sponsor'
 import {
   onPresentationAdded,
   onPresentationCreated,
@@ -74,6 +78,7 @@ export const loadApp = (container: HTMLElement) => {
 
   handler.on('sponsor.selected', onSponsorSelected)
   handler.on('sponsor.created', onSponsorCreated)
+  handler.on('sponsor.added', onSponsorAdded)
 
   control.sponsor.button.onclick = () => {
     control.sponsor.input.click()

src/app/events/sponsor/index.ts

@@ -1,2 +1,3 @@
-export * from './sponsor.created'
-export * from './sponsor.selected'
+export * from './sponsor.added';
+export * from './sponsor.created';
+export * from './sponsor.selected';

src/app/events/sponsor/sponsor.added.ts

@@ -0,0 +1,16 @@
+import {LayerSchema} from '@interfaces/layer-schema'
+import {FormControl} from '@interfaces/form-control'
+import {use} from '@websqnl/di'
+
+export const onSponsorAdded = () => {
+  const control = use(FormControl)
+  const layer = use(LayerSchema)
+
+  if (layer.sponsors.length < 2) {
+    control.sponsor.button.focus()
+  } else {
+    control.sponsor.button.disabled = true
+    const first = control.grid.firstElementChild?.firstElementChild ?? []
+    if (first instanceof HTMLInputElement) first.focus()
+  }
+}

src/app/events/sponsor/sponsor.created.ts

@@ -1,14 +1,19 @@
+import {EventHandler} from '@interfaces/event-handler'
 import {LayerSchema} from '@interfaces/layer-schema'
 import {ImageLayer} from '@models/image-layer'
 import {Canvas} from '@elements/canvas'
 import {use} from '@websqnl/di'
 
 export const onSponsorCreated = (sponsor: ImageLayer) => {
-  const layer = use(LayerSchema)
   const canvas = use(Canvas)
+  const layer = use(LayerSchema)
+  const handler = use(EventHandler)
 
   canvas.add(sponsor)
   layer.sponsors.push(sponsor)
 
-  sponsor.render().then(canvas.render)
+  sponsor.render().then(() => {
+    canvas.render()
+    handler.emit('sponsor.added', sponsor)
+  })
 }

src/app/interfaces/event-map.ts

@@ -4,8 +4,9 @@ import {ImageLayer} from '@models/image-layer'
 import {Schema} from './schema'
 
 export interface EventMap {
-  'sponsor.created': ImageLayer
   'sponsor.selected': File
+  'sponsor.created': ImageLayer
+  'sponsor.added': ImageLayer
 
   'presentation.submitted': SubmittedPresentation
   'presentation.handled': Presentation

src/config.ts

@@ -202,8 +202,8 @@ export const formControl: FormControl = {
 }
 
 formControl.grid.add(
-  new SliderLabel('Quantidade', 'grid', config.grid.tile),
-  new CheckboxLabel('Mostrar', 'gridActive', 'true', config.grid.active)
+  new CheckboxLabel('Mostrar', 'gridActive', 'true', config.grid.active),
+  new SliderLabel('Quantidade', 'grid', config.grid.tile)
 )
 
 formControl.logo.add(