refactor (#1)

* fix: core tsconfig path and left logo position

* refactor: event flow

Author: guiseek

src/app/app.ts

@@ -80,6 +80,11 @@ export const loadApp = (container: HTMLElement) => {
     control.sponsor.input.click()
   }
 
+  control.logo.onchange = (ev) => {
+    console.log(ev.target);
+    
+  }
+
   const form = new Form<Schema>(() => {
     dispatch(updateForm(form.value))
     // handler.emit('form.updated', form.value)
@@ -101,7 +106,7 @@ export const loadApp = (container: HTMLElement) => {
 
   sidenav.onOpen = () => {
     queueMicrotask(() => {
-      control.title.element.focus()
+      // control.title.element.focus()
     })
   }
 
@@ -122,13 +127,13 @@ export const loadApp = (container: HTMLElement) => {
   )
 
   form.append(
+    control.logo,
     control.title,
     dateTime,
     control.location,
-    control.logo,
+    control.background,
     control.presentation.add,
     accordion,
-    control.background,
     control.sponsor.button,
     control.grid
   )

src/app/config/index.ts

@@ -0,0 +1 @@
+export * from './positions';

src/app/config/positions.ts

@@ -0,0 +1,102 @@
+export const getPositions = (size: number, tiles = 6) => {
+  const base = size / 6
+
+  const width = size
+  const height = size
+
+  const grid = {
+    x: 0,
+    y: 0,
+    w: size,
+    h: size,
+    tiles,
+    active: false,
+  }
+
+  const background = {
+    x: 0,
+    y: 0,
+    w: size,
+    h: size,
+  }
+
+  const logo = {
+    x: base / 4.5,
+    y: base / 4.5,
+    w: base + base / 4.5,
+    h: base + base / 4.5,
+  }
+
+  const title = {
+    x: logo.x + logo.w,
+    y: base / 3,
+    w: size - base,
+    h: base,
+  }
+
+  const presentation = {
+    x: 0,
+    y: base,
+    w: size,
+    h: base * 3,
+  }
+
+  const date = {
+    x: 0,
+    y: size - base * 2,
+    w: base * 1.5,
+    h: base,
+  }
+
+  const time = {
+    x: date.x + date.w,
+    y: date.y,
+    w: base,
+    h: date.h,
+  }
+
+  const location = {
+    x: time.x + time.w,
+    y: time.y,
+    w: size - time.x - time.w,
+    h: time.h,
+  }
+
+  const details = {
+    x: base / 4.5,
+    y: size - base * 2,
+    w: size,
+    h: base,
+  }
+
+  const sponsor = {
+    x: base / 4.5,
+    y: size - base,
+    w: base * 2,
+    h: base,
+  }
+
+  const devParana = {
+    x: size - 250,
+    y: size - 90,
+    w: 200,
+    h: 50,
+  }
+
+  return {
+    width,
+    height,
+    base,
+    grid,
+    background,
+    logo,
+    title,
+    presentation,
+    date,
+    time,
+    location,
+    details,
+    sponsor,
+    devParana,
+  }
+}

src/app/core/details-layer.ts

@@ -5,36 +5,34 @@ import {Layer} from './base'
 import {dateTime} from '@utils/date-time'
 
 export class DetailsLayer extends Layer implements DetailsSchema {
-  calendar = new ImageLayer(this.position.x, 0, 180, 180)
-    .setSize(48, 48)
+  calendar = new ImageLayer(this.position.x, 0, this.height, this.height)
+    .setSize(this.height / 4, this.height / 4)
     .setSrc('icons/calendar.svg')
 
-  clock = new ImageLayer(this.position.x, 0, 180, 180)
-    .setSize(48, 48)
+  clock = new ImageLayer(this.position.x, 0, this.height, this.height)
+    .setSize(this.height / 4, this.height / 4)
     .setSrc('icons/clock.svg')
 
-  pin = new ImageLayer(this.position.x, 0, 1080, 180)
-    .setSize(48, 48)
+  pin = new ImageLayer(this.position.x, 0, 1080, this.height)
+    .setSize(this.height / 4, this.height / 4)
     .setSrc('icons/pin.svg')
 
-  date = new WordLayer(0, 0, this.width - this.calendar.width, 180)
-    .setSize(48)
+  date = new WordLayer(0, 0, this.width - this.calendar.width, this.height)
+    .setSize(this.height / 4)
     .setWeight('normal')
     .setColor('#f9f9f9')
 
-  time = new WordLayer(0, 0, this.width - this.clock.width, 180)
-    .setSize(48)
+  time = new WordLayer(0, 0, this.width - this.clock.width, this.height)
+    .setSize(this.height / 4)
     .setWeight('normal')
     .setColor('#f9f9f9')
 
-  location = new WordLayer(0, 0, this.width - this.pin.width, 180)
-    .setSize(48)
+  location = new WordLayer(0, 0, this.width - this.pin.width, this.height)
+    .setSize(this.height / 4)
     .setWeight('normal')
     .setColor('#f9f9f9')
 
   async render() {
-    
-
     let y = this.height / 4 - 12
 
     let x = 20
@@ -53,7 +51,7 @@ export class DetailsLayer extends Layer implements DetailsSchema {
 
   async renderDate(x: number, y: number) {
     this.context.clearRect(0, 0, this.width, this.height)
-    
+
     if (!this.date.isEmpty) {
       await this.calendar.render()
       this.context.drawImage(this.calendar, x, y)

src/app/elements/canvas.ts

@@ -61,22 +61,6 @@ export class Canvas extends HTMLCanvasElement {
     return () => this.#onContextMenu.delete(fn)
   }
 
-  onMouseDown = ({offsetX, offsetY}: MouseEvent) => {
-    const position = new Vector2(offsetX, offsetY)
-
-    const layer = this.#layers
-      .filter((layer) => layer.draggable)
-      .find((layer) => {
-        return layer.detectCollision(position)
-      })
-
-    if (layer) {
-      // this.#dragLayer(layer, position)
-      this.#dragging = layer
-      layer.dragStart(position)
-    }
-  }
-
   #onMouseDown = ({offsetX, offsetY}: MouseEvent) => {
     const position = new Vector2(offsetX, offsetY)
 

src/app/elements/field-set.ts

@@ -5,6 +5,12 @@ import {h} from '@utils/h'
 export class FieldSet extends HTMLFieldSetElement {
   legend
 
+  #controls = new Map()
+
+  get controls() {
+    return Object.fromEntries(this.#controls.entries())
+  }
+
   constructor(text: string) {
     super()
     this.legend = this.#createLegend(text)
@@ -16,9 +22,12 @@ export class FieldSet extends HTMLFieldSetElement {
 
   connectedCallback() {
     this.append(this.legend)
-  }
 
+    console.log(this.elements)
+  }
+  
   add(...children: Element[]) {
     this.append(...children)
+    console.log(this.elements)
   }
 }

src/app/interfaces/config.ts

@@ -6,7 +6,7 @@ interface RectConfig {
 }
 
 interface GridConfig extends RectConfig {
-  tile: number
+  tiles: number
   active: boolean
 }
 

src/app/interfaces/event-map.ts

@@ -14,4 +14,5 @@ export interface EventMap {
   'presentation.added': PresentationLayer
 
   'form.updated': Schema
+  'form.logo-updated': HTMLOptionElement
 }

src/app/store/actions.ts

@@ -1,33 +1,45 @@
-import {Presentation, SubmittedPresentation} from '@interfaces/presentation'
-import {ImageLayer, PresentationLayer} from '../core'
-import {Schema} from '@interfaces/schema'
-import {action} from '@utils/state'
+import {EventMap} from '@interfaces/event-map'
+import {store} from './store'
+
+export const state = store<EventMap>()
 
 /**
  * Form
  */
-export const updateForm = action<Schema>('form.updated')
+export const updateForm = state.action('form.updated')
+export const updateLogo = state.action('form.logo-updated')
+// export const updateForm = action<Schema>('form.updated')
+// export const updateLogo = action<HTMLOptionElement>('form.logo-updated')
 
 /**
  * Presentation
  */
-export const submitPresentation = action<SubmittedPresentation>(
-  'presentation.submitted'
-)
+export const submitPresentation = state.action('presentation.submitted')
+// export const submitPresentation = action<SubmittedPresentation>(
+//   'presentation.submitted'
+// )
 
-export const handlePresentation = action<Presentation>('presentation.handled')
+export const handlePresentation = state.action('presentation.handled')
+// export const handlePresentation = action<Presentation>('presentation.handled')
 
-export const createPresentation = action<PresentationLayer>(
-  'presentation.created'
-)
+export const createPresentation = state.action('presentation.created')
+// export const createPresentation = action<PresentationLayer>(
+//   'presentation.created'
+// )
 
-export const addPresentation = action<PresentationLayer>('presentation.added')
+export const addPresentation = state.action('presentation.added')
+// export const addPresentation = action<PresentationLayer>('presentation.added')
 
 /**
  * Sponsor
  */
-export const selectSponsor = action<File>('sponsor.selected')
+export const selectSponsor = state.action('sponsor.selected')
+
+export const createSponsor = state.action('sponsor.created')
+
+export const addSponsor = state.action('sponsor.added')
+// export const selectSponsor = action<File>('sponsor.selected')
 
-export const createSponsor = action<ImageLayer>('sponsor.created')
+// export const createSponsor = action<ImageLayer>('sponsor.created')
 
-export const addSponsor = action<ImageLayer>('sponsor.added')
+// export const addSponsor = action<ImageLayer>('sponsor.added')

src/app/store/form/form.logo-change.ts

@@ -0,0 +1,5 @@
+import {onLogoUpdated} from '@store/selectors'
+
+onLogoUpdated(({text, value}) => {
+  console.log(text, value)
+})

src/app/store/form/index.ts

@@ -1 +1,2 @@
+export * from './form.logo-change';
 export * from './form.updated';

src/app/store/presentation/presentation.handled.ts

@@ -11,7 +11,7 @@ onPresentationHandled((value) => {
   const layer = use(LayerSchema)
 
   const width = config.width
-  const height = config.height / config.grid.tile
+  const height = config.height / config.grid.tiles
 
   const y = height * (layer.presentations.length + 1) + 90
 

src/app/store/selectors.ts

@@ -1,35 +1,25 @@
-import {Presentation, SubmittedPresentation} from '@interfaces/presentation'
-import {ImageLayer, PresentationLayer} from '../core'
-import {Schema} from '@interfaces/schema'
-import {select} from '@utils/state'
-
+import {state} from './actions'
 
 /**
  * Form
  */
-export const onFormUpdated = select<Schema>('form.updated')
+export const onFormUpdated = state.select('form.updated')
+export const onLogoUpdated = state.select('form.logo-updated')
 
 /**
  * Presentation
  */
-export const onPresentationSubmitted = select<SubmittedPresentation>(
-  'presentation.submitted'
-)
+export const onPresentationSubmitted = state.select('presentation.submitted')
 
-export const onPresentationHandled = select<Presentation>(
-  'presentation.handled'
-)
+export const onPresentationHandled = state.select('presentation.handled')
 
-export const onPresentationCreated = select<PresentationLayer>(
-  'presentation.created'
-)
+export const onPresentationCreated = state.select('presentation.created')
 
-export const onPresentationAdded =
-  select<PresentationLayer>('presentation.added')
+export const onPresentationAdded = state.select('presentation.added')
 
 /**
  * Sponsor
  */
-export const onSponsorSelected = select<File>('sponsor.selected')
-export const onSponsorCreated = select<ImageLayer>('sponsor.created')
-export const onSponsorAdded = select<ImageLayer>('sponsor.added')
+export const onSponsorSelected = state.select('sponsor.selected')
+export const onSponsorCreated = state.select('sponsor.created')
+export const onSponsorAdded = state.select('sponsor.added')