dustinswan
/
cg
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixing ugly canvas. now full browser window, fixing dpi blurry issue

Browse Source
master
Dustin Swan 4 days ago
parent 86996ed4ef
commit 58715f42bf
Signed by: dustinswan
GPG Key ID: 30D46587E2100467
4 changed files with 45 additions and 11 deletions
Show Stats Download Patch File Download Diff File

20
index.html
Unescape Escape View File

@ -5,7 +5,27 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>cg</title> <title>cg</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
display: block;
width: 100%;
height: 100%;
}
</style>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>

10
src/main.ts
Unescape Escape View File

@ -13,10 +13,7 @@ import textInputCode from './textinput-test.cg?raw';
import testCode from './test.cg?raw'; import testCode from './test.cg?raw';
import counterApp from './counter.cg?raw'; import counterApp from './counter.cg?raw';
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas') as HTMLCanvasElement;
canvas.width = 800;
canvas.height = 600;
canvas.style.border = "1px solid #000";
document.body.appendChild(canvas); document.body.appendChild(canvas);
const cgCode = stdlibCode + '\n' + designTokensCode + '\n' + uiComponentsCode + '\n' + textInputCode; const cgCode = stdlibCode + '\n' + designTokensCode + '\n' + uiComponentsCode + '\n' + textInputCode;
@ -27,13 +24,8 @@ const ast = parser.parse();
console.log(ast); console.log(ast);
const env: Env = new Map(Object.entries(builtins)); const env: Env = new Map(Object.entries(builtins));
// const res = evaluate(ast, env);
// console.log(res);
const appRecord = evaluate(ast, env); const appRecord = evaluate(ast, env);
console.log(appRecord);
if (appRecord.kind !== 'record') if (appRecord.kind !== 'record')
throw new Error('Expected record'); throw new Error('Expected record');

21
src/runtime.ts
Unescape Escape View File

@ -12,6 +12,18 @@ export type App = {
export function runApp(app: App, canvas: HTMLCanvasElement) { export function runApp(app: App, canvas: HTMLCanvasElement) {
let state = app.init; let state = app.init;
function setupCanvas() {
const dpr = window.devicePixelRatio || 1;
canvas.width = window.innerWidth * dpr;
canvas.height = window.innerHeight * dpr;
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';
}
setupCanvas();
function rerender() { function rerender() {
if (app.view.kind !== 'closure') if (app.view.kind !== 'closure')
throw new Error('view must be a function'); throw new Error('view must be a function');
@ -19,8 +31,8 @@ export function runApp(app: App, canvas: HTMLCanvasElement) {
const viewport: Value = { const viewport: Value = {
kind: 'record', kind: 'record',
fields: { fields: {
width: { kind: 'int', value: canvas.width }, width: { kind: 'int', value: window.innerWidth },
height: { kind: 'int', value: canvas.height } height: { kind: 'int', value: window.innerHeight }
} }
}; };
@ -77,5 +89,10 @@ export function runApp(app: App, canvas: HTMLCanvasElement) {
} }
}) })
window.addEventListener('resize', (e) => {
setupCanvas();
rerender();
})
rerender(); rerender();
} }

5
src/ui.ts
Unescape Escape View File

@ -25,7 +25,12 @@ let focusedInputSubmit: Value | null = null;
export function render(ui: UIValue, canvas: HTMLCanvasElement) { export function render(ui: UIValue, canvas: HTMLCanvasElement) {
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
if (ctx) { if (ctx) {
const dpr = window.devicePixelRatio || 1;
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
clickRegions = []; clickRegions = [];
textInputRegions = []; textInputRegions = [];
renderUI(ui, ctx, 0, 0); renderUI(ui, ctx, 0, 0);

Write Preview
Loading…
Cancel
Save