From e12da87a102f474d89a77bfc039170ff641dc814 Mon Sep 17 00:00:00 2001 From: Caleb Hearon Date: Tue, 19 Nov 2024 22:44:16 -0500 Subject: [PATCH] remove the density paint argument (zoom is better) Ref #16. Just need to snap border, padding, and content areas during paint (absolutify?) and then I can close it. --- CHANGELOG.md | 1 + README.md | 4 ++-- examples/bidi-1.ts | 6 ++---- examples/fallbacks-1.ts | 7 +++---- examples/inlines-1.ts | 9 ++++----- examples/perf-1.ts | 11 +++++------ examples/readme.ts | 2 +- examples/rtl-1.ts | 6 ++---- site/index.js | 14 +++++++++++++- src/api.ts | 5 ++--- 10 files changed, 35 insertions(+), 30 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 742eb8a..75f049c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ project adheres to [Semantic Versioning](http://semver.org/). * Styles must now be passed through `flow.style` before being given to `h`. * `cascadeStyles` has been removed. Pass an array of styles to `h` instead. * Removed `getRootStyle` +* paintToCanvas no longer has a density argument. Use the zoom CSS property instead. ### Added * Added support for the `zoom` property diff --git a/README.md b/README.md index 1fd475b..4a0aacc 100644 --- a/README.md +++ b/README.md @@ -123,7 +123,7 @@ const rootElement = flow.dom( // Layout and paint into the entire canvas (see also renderToCanvasContext) const canvas = createCanvas(250, 50); -flow.renderToCanvas(rootElement, canvas, /* optional density: */ 2); +flow.renderToCanvas(rootElement, canvas); // Save your image canvas.createPNGStream().pipe(fs.createWriteStream(new URL('hello.png', import.meta.url))); @@ -157,7 +157,7 @@ const rootElement = flow.parse(` `); const canvas = createCanvas(250, 50); -flow.renderToCanvas(rootElement, canvas, 2); +flow.renderToCanvas(rootElement, canvas); canvas.createPNGStream().pipe(fs.createWriteStream(new URL('hello.png', import.meta.url))); ``` diff --git a/examples/bidi-1.ts b/examples/bidi-1.ts index b67abb6..5557cdf 100644 --- a/examples/bidi-1.ts +++ b/examples/bidi-1.ts @@ -7,7 +7,7 @@ registerFontAsset('Cairo/Cairo-Regular.ttf'); registerFontAsset('Arimo/Arimo-Regular.ttf'); const rootElement = flow.parse(` - +
abcHellodef آلو @@ -22,10 +22,8 @@ const blockContainer = flow.generate(rootElement); console.log(blockContainer.repr()); -flow.layout(blockContainer, 100, 125); - const canvas = createCanvas(200, 250); +flow.layout(blockContainer, canvas.width, canvas.height); const ctx = canvas.getContext('2d'); -ctx.scale(2, 2); flow.paintToCanvas(blockContainer, ctx); canvas.createPNGStream().pipe(fs.createWriteStream(new URL('bidi-1.png', import.meta.url))); diff --git a/examples/fallbacks-1.ts b/examples/fallbacks-1.ts index 500ca5a..82abba8 100644 --- a/examples/fallbacks-1.ts +++ b/examples/fallbacks-1.ts @@ -9,7 +9,7 @@ registerFontAsset('Arimo/Arimo-Regular.ttf'); registerFontAsset('Arimo/Arimo-Italic.ttf'); const rootElement = flow.parse(` -
+
English: Welcome
Arabic: أهلاً و سهلاً
Hebrew: ברוך הבא @@ -20,10 +20,9 @@ const blockContainer = flow.generate(rootElement); console.log(blockContainer.repr()); -flow.layout(blockContainer, 200, 50); - const canvas = createCanvas(400, 150); +flow.layout(blockContainer, canvas.width, canvas.height); + const ctx = canvas.getContext('2d'); -ctx.scale(2, 2); flow.paintToCanvas(blockContainer, ctx); canvas.createPNGStream().pipe(fs.createWriteStream(new URL('fallbacks-1.png', import.meta.url))); diff --git a/examples/inlines-1.ts b/examples/inlines-1.ts index 0e7a446..a566ee1 100644 --- a/examples/inlines-1.ts +++ b/examples/inlines-1.ts @@ -9,7 +9,7 @@ registerFontAsset('Arimo/Arimo-Italic.ttf'); registerFontAsset('Cousine/Cousine-Regular.ttf'); const rootElement = flow.parse(` -
+
I like to write layout code @@ -25,12 +25,11 @@ const rootElement = flow.parse(` `); const blockContainer = flow.generate(rootElement); -console.log(blockContainer.repr()); - -flow.layout(blockContainer, 300, 200); +console.log(blockContainer.repr(0, {css: 'zoom'})); const canvas = createCanvas(600, 400); +flow.layout(blockContainer, canvas.width, canvas.height); + const ctx = canvas.getContext('2d'); -ctx.scale(2, 2); flow.paintToCanvas(blockContainer, ctx); canvas.createPNGStream().pipe(fs.createWriteStream(new URL('inlines-1.png', import.meta.url))); diff --git a/examples/perf-1.ts b/examples/perf-1.ts index c2e16c3..7e29261 100644 --- a/examples/perf-1.ts +++ b/examples/perf-1.ts @@ -14,7 +14,7 @@ console.timeEnd('Add fonts'); console.log(); const rootElement = flow.parse(` -
+

CSS Floats

An excerpt from the Visual Formatting Model, CSS2 §9.5 @@ -48,19 +48,18 @@ const rootElement = flow.parse(` const canvas = createCanvas(1600, 1600); const ctx = canvas.getContext('2d'); -ctx.scale(2, 2); const blockContainer = flow.generate(rootElement); -flow.layout(blockContainer, 800, 800); -ctx.clearRect(0, 0, 1600, 1600); +flow.layout(blockContainer, canvas.width, canvas.height); +ctx.clearRect(0, 0, canvas.width, canvas.height); flow.paintToCanvas(blockContainer, ctx); canvas.createPNGStream().pipe(fs.createWriteStream(new URL('perf-1.png', import.meta.url))); bench('10 paragraphs generate, layout, and paint', () => { const blockContainer = flow.generate(rootElement); clearWordCache(); - flow.layout(blockContainer, 800, 800); - ctx.clearRect(0, 0, 1600, 1600); + flow.layout(blockContainer, canvas.width, canvas.height); + ctx.clearRect(0, 0, canvas.width, canvas.height); flow.paintToCanvas(blockContainer, ctx); }); diff --git a/examples/readme.ts b/examples/readme.ts index 65d733d..55dddca 100644 --- a/examples/readme.ts +++ b/examples/readme.ts @@ -30,7 +30,7 @@ const rootElement = flow.dom( // Layout and paint into the entire canvas (see also renderToCanvasContext) const canvas = createCanvas(250, 50); -flow.renderToCanvas(rootElement, canvas, /* optional density: */ 2); +flow.renderToCanvas(rootElement, canvas); // Save your image canvas.createPNGStream().pipe(fs.createWriteStream(new URL('hello.png', import.meta.url))); diff --git a/examples/rtl-1.ts b/examples/rtl-1.ts index 69d84f6..21c2d60 100644 --- a/examples/rtl-1.ts +++ b/examples/rtl-1.ts @@ -7,7 +7,7 @@ registerFontAsset('Cairo/Cairo-Regular.ttf'), registerFontAsset('Raleway/Raleway-Regular.ttf') const rootElement = flow.parse(` -

+
أجمل التهاني بمناسبة الميلاد @@ -27,10 +27,8 @@ const blockContainer = flow.generate(rootElement); console.log(blockContainer.repr()); -flow.layout(blockContainer, 100, 300); - const canvas = createCanvas(200, 600); +flow.layout(blockContainer, canvas.width, canvas.height); const ctx = canvas.getContext('2d'); -ctx.scale(2, 2); flow.paintToCanvas(blockContainer, ctx); canvas.createPNGStream().pipe(fs.createWriteStream(new URL('rtl-1.png', import.meta.url))); diff --git a/site/index.js b/site/index.js index 5f57e51..f750c6a 100644 --- a/site/index.js +++ b/site/index.js @@ -10,6 +10,8 @@ const [canvas] = document.getElementsByTagName('canvas'); const wrap = document.getElementById('wrap'); const canvasLabel = document.getElementById('canvas-label'); +flow.setOriginStyle({zoom: window.devicePixelRatio}); + async function render(html) { const documentElement = flow.parse(html); const ctx = canvas.getContext('2d'); @@ -27,7 +29,7 @@ async function render(html) { ctx.save(); ctx.clearRect(0, 0, canvas.width, canvas.height); - flow.renderToCanvas(documentElement, canvas, window.devicePixelRatio); + flow.renderToCanvas(documentElement, canvas); ctx.restore(); window.documentElement = documentElement; @@ -136,6 +138,16 @@ const observer = new ResizeObserver(function () { render(view.state.doc.toString()) }); +let lastDevicePixelRatio = window.devicePixelRatio; + +window.addEventListener('resize', function () { + if (window.devicePixelRatio !== lastDevicePixelRatio) { + lastDevicePixelRatio = window.devicePixelRatio; + flow.setOriginStyle({zoom: window.devicePixelRatio}); + render(view.state.doc.toString()) + } +}); + observer.observe(document.body); window.flow = flow; diff --git a/src/api.ts b/src/api.ts index 90d0aba..9dc9b60 100644 --- a/src/api.ts +++ b/src/api.ts @@ -104,10 +104,9 @@ export function renderToCanvasContext( paintToCanvas(root, ctx); } -export function renderToCanvas(rootElement: HTMLElement, canvas: Canvas, density = 1) { +export function renderToCanvas(rootElement: HTMLElement, canvas: Canvas) { const ctx = canvas.getContext('2d'); - ctx.scale(density, density); - renderToCanvasContext(rootElement, ctx, canvas.width / density, canvas.height / density); + renderToCanvasContext(rootElement, ctx, canvas.width, canvas.height); } type HsChild = HTMLElement | string;