basic draw demo

src/lib/Canvas.svelte

@@ -0,0 +1,89 @@
+<script>
+	import { onMount } from 'svelte'
+
+	// export let width = 300
+	// export let height = 300
+	export let color = '#333'
+	export let background = '#fff'
+  export let wrapperWidth;
+  export let wrapperHeight;
+
+  $: width = wrapperWidth;
+  $: height = wrapperHeight - 55;
+
+
+	let canvas
+	let context
+	let isDrawing
+	let start
+
+	let t, l
+
+	onMount(() => {
+		context = canvas.getContext('2d')
+		context.lineWidth = 3
+
+		handleSize()
+	})
+
+	$: if(context) {
+			context.strokeStyle = color
+	}
+
+	const handleStart = (({ offsetX: x, offsetY: y }) => {
+		if(color === background) {
+			context.clearRect(0, 0, width, height)
+		} else {
+			isDrawing = true
+			start = { x, y }
+		}
+	})
+
+	const handleEnd = () => { isDrawing = false }
+	const handleMove = (({ offsetX: x1, offsetY: y1 }) => {
+		if(!isDrawing) return
+
+		const { x, y } = start
+		context.beginPath()
+		context.moveTo(x, y)
+		context.lineTo(x1, y1)
+		context.closePath()
+		context.stroke()
+
+		start = { x: x1, y: y1 }
+	})
+
+	const handleSize = () => {
+		const { top, left } = canvas.getBoundingClientRect()
+		t = top
+		l = left
+	}
+</script>
+
+<svelte:window on:resize={handleSize} />
+
+<canvas
+				{width}
+				{height}
+				style:background
+				bind:this={canvas}
+				on:mousedown={handleStart}
+				on:touchstart={e => {
+					const { clientX, clientY } = e.touches[0]
+					handleStart({
+						offsetX: clientX - l,
+						offsetY: clientY - t
+					})
+				}}
+				on:mouseup={handleEnd}
+				on:touchend={handleEnd}
+				on:mouseleave={handleEnd}
+				on:mousemove={handleMove}
+				on:touchmove={e => {
+					const { clientX, clientY } = e.touches[0]
+					handleMove({
+						offsetX: clientX - l,
+						offsetY: clientY - t
+					})
+				}}
+				/>

src/lib/CanvasApp.svelte

@@ -0,0 +1,53 @@
+<script>
+  export let wrapperWidth;
+  export let wrapperHeight;
+
+	import Canvas from './Canvas.svelte'
+	import Palette from './Palette.svelte'
+
+	const colors = [
+		'#334169',
+		'#72354d',
+		'#4fa9cc',
+		'#3f8d27',
+	]
+	const background = '#1d1f21';
+
+	let color = colors[0]
+	const paletteColor = color;
+
+  $: console.log('wrapperHeight @@@@@@@@@@@@@ ', wrapperHeight);
+</script>
+
+<main>
+	<Canvas {color} {background} {wrapperWidth} {wrapperHeight} />
+	<Palette
+    {paletteColor}
+    {colors}
+    {background}
+    on:color="{({ detail }) => {
+      color = detail.color
+    }}"
+  />
+</main>
+
+<style>
+	:global(.visually-hidden:not(:focus):not(:active)) {
+		clip: rect(0 0 0 0);
+		clip-path: inset(50%);
+		height: 1px;
+		width: 1px;
+		overflow: hidden;
+		position: absolute;
+		white-space: nowrap;
+	}
+	main {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem 0;
+	}
+	main :global(canvas) {
+		align-self: center;
+	}
+</style>

src/lib/NoteDetail.svelte

@@ -11,8 +11,9 @@
   import { isEmptyObject } from '../utils/isEmptyObject';
 
   import Settings from './Settings.svelte';
+  import CanvasApp from './CanvasApp.svelte';
 
-  let innerHeight;
+  // let innerHeight;
 
   onMount(async () => {
     addRxPlugin(RxDBUpdatePlugin);
@@ -28,11 +29,15 @@
       return data;
     });
   };
+
+  let innerWidth, innerHeight;
 </script>
 
-<svelte:window bind:innerHeight />
+<!-- <svelte:window bind:innerHeight /> -->
 
 <div
+  bind:clientWidth={innerWidth}
+  bind:clientHeight={innerHeight}
   class="relative overflow-hidden h-full overflow-y-auto"
   style="margin-bottom: 35px; background: var(--app-notedetail-background);"
 >
@@ -42,6 +47,8 @@
     </div>
   {:else if $selectedNote.guid === '00000000-0000-0000-0000-000000000000'}
     <Settings />
+  {:else if $selectedNote.guid === '00000000-0000-0000-0000-111111111111'}
+    <CanvasApp wrapperWidth={innerWidth} wrapperHeight={innerHeight} />
   {:else}
     <textarea
       id="body-editor"

src/lib/Palette.svelte

@@ -0,0 +1,106 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+
+	export let colors = [
+		'#d58141',
+		'#d7c44c',
+		'#4fa9cc',
+		'#3f8d27',
+	]
+
+	export let paletteColor
+	export let background = '#fff'
+</script>
+
+<section>
+	<div>
+		{#each colors as color}
+		<button
+						on:click="{() => {
+							dispatch('color', { color })
+							paletteColor = color
+						}}"
+						style:background={color}>
+			<span class="visually-hidden">
+				Select the color {color}
+			</span>
+		</button>
+		{/each}
+	</div>
+
+	<button
+					on:click={() => {
+						dispatch('color', { color: background })
+						paletteColor = background
+					}}
+					style:background>
+		<span class="visually-hidden">
+			Select the background color to clear the canvas
+		</span>
+	</button>
+
+	<svg style:color={paletteColor} viewBox="-50 -50 100 100">
+		<g fill="currentColor" stroke="currentColor" stroke-width="0" stroke-linecap="round">
+			<path d="M -38 12 a 38 38 0 0 0 76 0 q 0 -28 -38 -62 -38 34 -38 62" />
+		</g>
+	</svg>
+</section>
+
+
+<style>
+	section {
+		--size: 1.75rem;
+		padding: 0.25rem;
+		display: flex;
+		align-items: center;
+		gap: 0 1rem;
+	}
+
+	section > div {
+		flex-grow: 1;
+	}
+
+	section > svg {
+		flex-shrink: 0;
+	}
+
+	div {
+		display: flex;
+		gap: 0 0.5rem;
+		align-items: center;
+		overflow-x: auto;
+	}
+
+	div::-webkit-scrollbar {
+		height: 0.25rem;
+	}
+
+	div::-webkit-scrollbar-track {
+		background: hsl(0, 0%, 100%);
+	}
+
+	div::-webkit-scrollbar-thumb {
+		background: currentColor;
+	}
+
+	div button {
+		flex-shrink: 0;
+	}
+
+	button,
+	section > svg {
+		width: var(--size);
+		height: var(--size);
+	}
+
+	button  {
+		cursor: pointer;
+		border-radius: 50%;
+		margin: 0;
+	}
+
+	section > svg {
+		display: block;
+	}
+</style>

src/lib/store.js

@@ -73,8 +73,16 @@ Don't forget to follow the project on 𝕏 at @nvAuxApp and let us know what you
       createdAt: new Date().getTime(),
       updatedAt: new Date().getTime()
     });
+    await db.notes.insert({
+      guid: '00000000-0000-0000-0000-111111111111',
+      name: 'Sketch Pad Demo',
+      body: 'Use this demo note to test out the sketch pad feature.',
+      createdAt: new Date().getTime(),
+      updatedAt: new Date().getTime()
+    });
   };
 
+
   dbPromise = db;
   return db;
 };