feat: melhora alinhamento na sidenav e adiciona mais fundos 3D

Author: guiseek

public/images/delphi-3d.png

@@ -2,9 +2,11 @@ import {EventHandler, FormControl, LayerSchema, Schema} from '@interfaces'
 import {Form, Canvas, Sidenav, Accordion, DownloadButton} from '@elements'
 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 {h} from '@utils'
+import {login} from '@store'
 import {
   onSponsorAdded,
   onSponsorCreated,
@@ -16,7 +18,8 @@ import {
   onPresentationHandled,
   onPresentationSubmitted,
 } from '@events/presentation'
-import { TitleBar } from '@elements/title-bar'
+
+dispatch(login({username: 'user', password: 'pass'}))
 
 export const loadApp = (container: HTMLElement) => {
   const canvas = use(Canvas)

public/images/front-in-maringa-3d.png

@@ -33,7 +33,7 @@ export class DetailsLayer extends Layer implements DetailsSchema {
     .setColor('#f9f9f9')
 
   async render() {
-    this.context.clearRect(0, 0, this.width, this.height)
+    
 
     let y = this.height / 4 - 12
 
@@ -52,6 +52,8 @@ 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)

public/images/nodejs-3d.png

@@ -23,10 +23,12 @@ export class GridLayer extends Layer {
   }
 
   async render() {
-    this.context.clearRect(0, 0, this.width, this.height)
+    
     const col = this.width / this.size
     const row = this.height / this.size
 
+    this.context.clearRect(0, 0, this.width, this.height)
+    
     for (let x = 0; x < this.size; x++) {
       for (let y = 0; y < this.size; y++) {
         const path = new Path2D()

public/images/php-3d.png

@@ -20,9 +20,9 @@ export class ImageLayer extends Layer {
   }
 
   async render() {
-    this.context.canvas.width = this.context.canvas.width
     if (!this.#hasNoImage(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)
       })
     }

public/images/rust-3d.png

@@ -10,9 +10,8 @@ export class PhotoFrameLayer extends Layer {
   }
 
   async render() {
-    this.context.clearRect(0, 0, this.width, this.height)
-
     return this.#image.decode().then(() => {
+      this.context.clearRect(0, 0, this.width, this.height)
       this.context.drawImage(this.#image, 0, 0)
     })
   }

public/images/silicio.svg

@@ -37,11 +37,11 @@ export class PhotoLayer extends Layer {
   }
 
   async render() {
-    this.context.clearRect(0, 0, this.width, this.height)
-
     if (!this.#hasNoImage(this.#image.src)) {
       return this.#image.decode().then(() => {
         const {width, height} = this.#image
+
+        this.context.clearRect(0, 0, this.width, this.height)
         this.context.drawImage(this.#image, 8, 8, width, height)
       })
     }

public/images/typescript-3d.png

@@ -29,9 +29,9 @@ export class PresentationLayer extends Layer implements PresentationSchema {
     .setColor('#D9D9D9')
 
   async render() {
-    this.context.clearRect(0, 0, this.width, this.height)
-
     await this.photo.render().then(() => {
+      this.context.clearRect(0, 0, this.width, this.height)
+
       this.context.drawImage(
         this.photo,
         this.photo.position.x,

public/logos/front-in-maringa.svg

@@ -0,0 +1,14 @@
+import {action} from '@utils/state'
+
+export interface Login {
+  username: string
+  password: string
+}
+
+export interface Logged {
+  accressToken: string
+}
+
+export const login = action<Login>('Login')
+export const loginSuccess = action<Logged>('Login Success')
+export const loginError = action<DOMException>('Login Error')

src/app/app.ts

@@ -0,0 +1,3 @@
+export * from './actions';
+export * from './selectors';
+export * from './subscribers';

src/app/core/details-layer.ts

@@ -0,0 +1,6 @@
+import {Logged, Login} from './actions'
+import {select} from '@utils/state'
+
+export const onLogin = select<Login>('Login')
+export const onLoginSuccess = select<Logged>('Login Success')
+export const onLoginError = select<DOMException>('Login Error')

src/app/core/grid-layer.ts

@@ -0,0 +1,21 @@
+import {onLogin, onLoginSuccess, onLoginError} from './selectors'
+import {loginError, loginSuccess} from './actions'
+import {dispatch} from '@utils/state'
+
+onLogin(({username, password}) => {
+  console.log(username, password)
+
+  if (username === 'user' && password === 'pass') {
+    dispatch(loginSuccess({accressToken: btoa(username + password)}))
+  } else {
+    dispatch(loginError(new DOMException('Login failure')))
+  }
+})
+
+onLoginSuccess((value) => {
+  console.log(value.accressToken)
+})
+
+onLoginError((value) => {
+  console.log(value)
+})

src/app/core/image-layer.ts

@@ -1,4 +1,5 @@
 export * from './decorators';
+export * from './state';
 export * from './writes';
 export * from './async';
 export * from './data-from-form';

src/app/core/photo-frame.ts

@@ -0,0 +1,26 @@
+import {Callback} from '@interfaces/common'
+
+export class Action<T> {
+  constructor(public type: string, public value: T) {}
+}
+
+export const action = <T>(type: string) => {
+  return (value: T) => {
+    return new (class extends Action<T> {
+      constructor() {
+        super(type, value)
+      }
+    })()
+  }
+}
+
+const actions = new Map<string, Set<Callback<any>>>()
+
+export const setAction = <T>(type: string, callback: Callback<T>) => {
+  const callbacks = getAction<T>(type)
+  actions.set(type, callbacks.add(callback))
+}
+
+export const getAction = <T>(type: string) => {
+  return actions.get(type) ?? new Set<Callback<T>>()
+}

src/app/core/photo-layer.ts

@@ -0,0 +1,7 @@
+import {Action, getAction} from './action'
+
+export const dispatch = <T>(action: Action<T>) => {
+  for (const callback of getAction(action.type)) {
+    callback(action.value)
+  }
+}

src/app/core/presentation-layer.ts

@@ -0,0 +1,3 @@
+export * from './action';
+export * from './dispatch';
+export * from './select';

src/app/store/actions.ts

@@ -0,0 +1,8 @@
+import {Callback} from '@interfaces/common'
+import {setAction} from './action'
+
+export const select = <T>(type: string) => {
+  return (callback: Callback<T>) => {
+    setAction(type, callback)
+  }
+}

src/app/store/index.ts

@@ -112,7 +112,7 @@ const logos = [
   ['Agile', 'logos/agile.svg'],
   ['Curitiba', 'logos/curitiba.svg'],
   ['Delphi', 'logos/delphi.svg'],
-  ['Geral', 'logos/geral.svg'],
+  ['Front In', 'logos/front-in-maringa.svg'],
   ['NodeJS', 'logos/nodejs.svg'],
   ['PHP', 'logos/php.svg'],
   ['Rust', 'logos/rust.svg'],
@@ -121,12 +121,15 @@ const logos = [
 
 const backgrounds = [
   ['Github', 'images/github-wall.svg'],
-  ['Aspiral', 'images/bermuda-circle.svg'],
-  ['Colmeia', 'images/hive.svg'],
   ['NodeJS 3D', 'images/nodejs-3d.png'],
   ['PHP 3D', 'images/php-3d.png'],
   ['Rust 3D', 'images/rust-3d.png'],
-  ['Front In', 'images/front-in-maringa-3d.png'],
+  ['Front In 3D', 'images/front-in-maringa-3d.png'],
+  ['TypeScript 3D', 'images/typescript-3d.png'],
+  ['Delphi 3D', 'images/delphi-3d.png'],
+  ['Silício', 'images/silicio.svg'],
+  ['Colmeia', 'images/hive.svg'],
+  ['Circulos', 'images/bermuda-circle.svg'],
 ]
 
 export const config: Config = {
@@ -208,7 +211,7 @@ export const formControl: FormControl = {
 
 formControl.grid.add(
   new CheckboxLabel('Mostrar', 'gridActive', 'true', config.grid.active),
-  new SliderLabel('Quantidade', 'grid', config.grid.tile)
+  new SliderLabel('Tamanho', 'grid', config.grid.tile)
 )
 
 formControl.logo.add(

src/app/store/selectors.ts

@@ -9,7 +9,7 @@
   //   system-ui,
   //   -apple-system
   // );
-  // font-size: 16px;
+  // font-size: 0.9em;
   // line-height: 1.5;
   overflow: hidden;
 }
@@ -149,7 +149,7 @@
     system-ui,
     -apple-system
   );
-  font-size: 16px;
+  font-size: 0.9em;
   line-height: 1.5;
   overflow: hidden;
 }
@@ -366,7 +366,7 @@
     system-ui,
     -apple-system
   );
-  font-size: 16px;
+  font-size: 0.9em;
   line-height: 1.5;
   overflow: hidden;
 }

src/app/store/subscribers.ts

@@ -79,7 +79,7 @@ $width__sidenav: 420px;
   fieldset,
   form > button,
   form > label {
-    margin: 0.6em 1em;
+    margin: 0.6em;
   }
 
   details section {

src/app/utils/index.ts

@@ -16,7 +16,7 @@ body {
 :root {
   font-family: Mukta, sans-serif;
   line-height: 1.5;
-  font-size: 1.2em;
+  font-size: 1.1em;
   font-weight: 400;
 
   color: #13b52b;
@@ -50,7 +50,7 @@ body {
   height: env(titlebar-area-height, 50px);
   width: env(titlebar-area-width, 100%);
   -webkit-app-region: drag;
-  
+
   color: rgb(var(--cw-surface-rgb));
 
   display: flex;
@@ -70,14 +70,14 @@ body {
 
   > aside {
     min-width: var(--cw-sidenav-width);
-    
+
     max-height: 100vh;
     overflow-x: auto;
 
     transition: margin 400ms ease-in-out;
 
-    margin-left: calc(-420px - 2em);
-    
+    margin-left: calc(var(--cw-sidenav-width) * -1 - 2px);
+
     &.is-open {
       margin-left: 0;
     }
@@ -112,7 +112,6 @@ canvas {
   top: 1.5em;
   left: 1em;
   z-index: 1;
-
 }
 .cw-theme-toggle {
   position: fixed;
@@ -134,7 +133,7 @@ canvas {
 }
 
 .form-group {
-  margin: 16px;
+  margin: 0.6em;
   display: flex;
   flex-flow: row wrap;
   gap: 16px;
@@ -148,14 +147,14 @@ fieldset {
   display: flex;
   flex-flow: row wrap;
   border-radius: 0.4em;
-  padding: 1.8em 2.2em 2.2em;
+  padding: 1.4em 1.8em 1.8em;
   border: solid 2px rgba(var(--cw-onsurface-rgb, 0, 0, 0), 0.6);
-  gap: 1em 2em;
+  gap: 1em;
   legend {
     padding: 0 0.5em;
   }
 
   > label {
-    width: 120px;
+    width: 140px;
   }
 }

src/app/utils/state/action.ts

@@ -32,8 +32,8 @@
       "@utils": ["src/app/utils/index.ts"],
       "@core/*": ["src/core/*"],
       "@core": ["src/core/index.ts"],
-      "@models/*": ["src/app/core/*"],
-      "@models": ["src/app/core/index.ts"],
+      "@store/*": ["src/app/store/*"],
+      "@store": ["src/app/store/index.ts"],
       "@events/*": ["src/app/events/*"],
       "@events": ["src/app/events/index.ts"],
       "@elements/*": ["src/app/elements/*"],