Split the example into .js files

.eslintrc.js

@@ -31,4 +31,17 @@ module.exports = {
 		'unused-imports/no-unused-imports-ts': 'error',
 		'@typescript-eslint/no-namespace': 'off',
 	},
+	overrides: [
+		{
+			files: ['demo/examples/*.js'],
+			globals: {
+				Path: 'readonly',
+				scalar: 'readonly',
+				vec2: 'readonly',
+				mat2d: 'readonly',
+				draw: 'readonly',
+				context: 'readonly',
+			},
+		},
+	],
 }

demo/examples/Primitives.js

@@ -0,0 +1,30 @@
+/**
+ * The range of canvas is fixed to the size [100, 100].
+ *
+ * The variables shown below are available in the global scope:
+ * import {Path} from 'pathed'
+ * import {scalar, vec2, mat2d} from 'linearly'
+ *
+ * // The 2D context of the canvas
+ * context: CanvasRenderingContext2D
+ *
+ * // Draws a stroke with the given path
+ * draw: (path: Path, color: string, width: number) => void
+ */
+
+const c = Path.circle([50, 50], 40)
+draw(c, 'PaleGreen', 1)
+
+const r = Path.rectangle([10, 10], [50, 50])
+draw(r, 'PowderBlue')
+
+const t = Path.regularPolygon([50, 50], 40, 5)
+draw(t, 'MediumSlateBlue')
+
+const b = Path.cubicBezierTo(
+	Path.moveTo([], [10, 50]),
+	[10, 100],
+	[90, 0],
+	[90, 50]
+)
+draw(b, 'plum')

demo/examples/index.ts

@@ -1 +1,3 @@
-export default new Map<string, string>([['circle', 'console.log(10)']])
+import Primitives from './Primitives?raw'
+
+export default new Map<string, string>([['Primitives', Primitives]])

demo/examples/types.d.ts

@@ -0,0 +1,4 @@
+declare module '*?raw' {
+	const content: string
+	export default content
+}

demo/main.ts

@@ -1,28 +1,30 @@
 import {mat2d, scalar, vec2} from 'linearly'
-import {debounce} from 'lodash'
 import {Path} from 'pathed'
 import saferEval from 'safer-eval'
 
-import {drawPath} from './draw'
 import Examples from './examples'
 
 // Setup canvas and drawing context
 const canvas = document.getElementById('canvas') as HTMLCanvasElement
 const context = canvas.getContext('2d')!
 
-window.addEventListener('resize', () => {
+function fitCanvas() {
 	const {width, height} = canvas.getBoundingClientRect()
 	const dpi = window.devicePixelRatio
 	canvas.width = width * dpi
 	canvas.height = height * dpi
+	const scale = (width * dpi) / 100
 	context.resetTransform()
-	context.transform(dpi, 0, 0, dpi, 0, 0)
+	context.transform(...mat2d.fromScaling([scale, scale]))
+}
+
+window.addEventListener('resize', () => {
+	fitCanvas()
 	runCode()
 })
-window.dispatchEvent(new Event('resize'))
 
 const code =
-	localStorage.getItem('com.baku89.pathed.code') || Examples.get('circle')
+	localStorage.getItem('com.baku89.pathed.code') || Examples.get('Primitives')
 
 // Setup Ace Editor
 const editor = (window as any).ace.edit('editor')
@@ -76,24 +78,30 @@ editor.on('change', () => {
 	runCode(code)
 })
 
-const draw = (path: Path, color = '#000', lineWidth = 5) => {
+const draw = (path: Path, color = '#000', lineWidth = 1) => {
 	context.strokeStyle = color
 	context.lineWidth = lineWidth
-	drawPath(path, context)
-	context.stroke()
+	context.stroke(Path.toPath2D(path))
 }
 
-const runCode = debounce((code = '') => {
+let lastCode = code
+const runCode = (code = lastCode) => {
 	context.clearRect(0, 0, canvas.width, canvas.height)
 
-	saferEval(`(() => {${code}\n})()`, {
-		context,
-		Path,
-		scalar,
-		vec2,
-		mat2d,
-		draw,
-	})
-}, 10)
+	lastCode = code
+	try {
+		saferEval(`(() => {${code}})()`, {
+			context,
+			Path,
+			scalar,
+			vec2,
+			mat2d,
+			draw,
+		})
+	} catch (e) {
+		null
+	}
+}
 
+fitCanvas()
 runCode(code)

demo/style.css

@@ -87,16 +87,20 @@ h2::first-letter {
 	position: relative;
 	border: 1px solid black;
 	border-radius: 10px;
-	height: 100%;
 	width: 100%;
 }
 
+#editor-wrapper {
+	height: 100%;
+}
+
 .editor-wrapper-inner {
 	position: relative;
 	width: calc(100% - 2em);
 	height: calc(100% - 2em);
 	margin: 1em;
 }
+
 #editor {
 	height: 100%;
 	width: 100%;
@@ -106,14 +110,11 @@ h2::first-letter {
 }
 
 #canvas {
-	--grid: 50px;
+	aspect-ratio: 1;
+	--grid: 10%;
 	--gm1: calc(var(--grid) - 1px);
 
-	background-image: linear-gradient(
-			0deg,
-			transparent var(--gm1),
-			#ccc var(--grid)
-		),
-		linear-gradient(90deg, transparent var(--gm1), #ccc var(--grid));
-	background-size: var(--grid) var(--grid);
+	background-image: linear-gradient(0deg, #ccc 1px, transparent 1px),
+		linear-gradient(90deg, #ccc 1px, transparent 1px);
+	background-size: 10% 10%;
 }

demo/tsconfig.json

@@ -5,5 +5,5 @@
 			"pathed": ["./src/index.ts"]
 		}
 	},
-	"include": ["."]
+	"include": ["./**/*.ts", "./**/*.js"]
 }