feat: responsive

src/app/app.ts

@@ -0,0 +1,17 @@
+import {dispatch} from '@websqnl/event-flow'
+import {Toolbar} from '../features/toolbar'
+import {canvas} from '../features/canvas'
+import {throttle} from '@shared/utils'
+import {windowResize} from './events'
+
+export const app = () => {
+  const toolbar = new Toolbar()
+
+  const getSize = () => Math.min(innerWidth, innerHeight)
+
+  dispatch(windowResize(getSize()))
+
+  onresize = throttle(() => dispatch(windowResize(getSize())), 250)
+
+  root.append(toolbar, canvas)
+}

src/app/events.ts

@@ -0,0 +1,4 @@
+import {createEvent, createListener} from '@websqnl/event-flow'
+
+export const windowResize = createEvent('window.resize')
+export const onWindowResize = createListener('window.resize')

src/app/handlers/index.ts

@@ -0,0 +1 @@
+export * from './on-window-resize';

src/app/handlers/on-window-resize.ts

@@ -0,0 +1,15 @@
+import {dispatch} from '@websqnl/event-flow'
+import {onWindowResize} from '../events'
+import {canvasUpdateSize} from '@features/canvas'
+
+onWindowResize((size) => {
+  const ideal = size < 1080 ? 540 : 1080
+  const {clientWidth: w, clientHeight: h} = root
+
+  dispatch(canvasUpdateSize({current: {w, h}, ideal}))
+
+  document.documentElement.style.setProperty(
+    '--cf-canvas-max-size',
+    `${ideal}px`
+  )
+})

src/app/index.ts

@@ -0,0 +1,3 @@
+export * from './handlers';
+export * from './app';
+export * from './events';

src/features/index.ts

@@ -1,4 +1,3 @@
+export * from './toolbar';
 export * from './canvas';
 export * from './layers';
-export * from './toolbar';
-export * from './app';

src/main.ts

@@ -1,5 +1,5 @@
 import {loadFont} from '@shared/utils'
-import {app} from './features'
+import {app} from './app'
 import './style.scss'
 
 loadFont('Mukta', [400, 600, 800]).then(app)

src/style.scss

@@ -7,6 +7,8 @@
   --cf-onprimary-rgb: 255, 255 255;
   --cf-surface-rgb: 250, 250, 250;
   --cf-onsurface-rgb: 16, 16, 16;
+
+  --cf-canvas-max-size: 1080px;
 }
 
 html,

src/styles/_canvas.scss

@@ -4,8 +4,8 @@ canvas {
   width: calc(100vw - 1em);
   height: calc(100vw - 1em);
 
-  max-width: 540px;
-  max-height: 540px;
+  max-width: var(--cf-canvas-max-size);
+  max-height: var(--cf-canvas-max-size);
 
   background-color: #e0e0e050;
   background-image: linear-gradient(45deg, #cccccc50 25%, transparent 25%),

src/vite-env.d.ts

@@ -38,6 +38,8 @@ interface StateEventMap {
   'toolbar.select.image': void
   'toolbar.select.text': void
   'toolbar.selected': ToolbarAction
+
+  'window.resize': number
 }
 
 interface Size {