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.
chearon · Nov 20, 2024 · e12da87 · e12da87
1 parent 5a24b0f
commit e12da87
Show file tree

Hide file tree

Showing 10 changed files with 35 additions and 30 deletions.
diff --git 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
@@ -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
@@ -7,7 +7,7 @@ registerFontAsset('Cairo/Cairo-Regular.ttf');
 registerFontAsset('Arimo/Arimo-Regular.ttf');
 
 const rootElement = flow.parse(`
-  <html style="height: 100%;">
+  <html style="zoom: 2; height: 100%;">
     <div style="background-color: #ccc; direction: ltr; font-size: 14px; height: 100%;" x-dropflow-log>
       abc<span style="background-color: red;">Hello</span>def
       <span style="background-color: green;">آلو</span>
@@ -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
@@ -9,7 +9,7 @@ registerFontAsset('Arimo/Arimo-Regular.ttf');
 registerFontAsset('Arimo/Arimo-Italic.ttf');
 
 const rootElement = flow.parse(`
-  <div x-dropflow-log style="font-family: Arimo; background-color: white; text-align: center;">
+  <div x-dropflow-log style="zoom: 2; font-family: Arimo; background-color: white; text-align: center;">
     <span style="font-style: italic; font-size: 0.5em;">English:</span> Welcome<br>
     <span style="font-style: italic; font-size: 0.5em;">Arabic:</span> أهلاً و سهلاً<br>
     <span style="font-style: italic; font-size: 0.5em;">Hebrew:</span> ברוך הבא
@@ -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
@@ -9,7 +9,7 @@ registerFontAsset('Arimo/Arimo-Italic.ttf');
 registerFontAsset('Cousine/Cousine-Regular.ttf');
 
 const rootElement = flow.parse(`
-  <div style="font: 16px/1.4 Arimo; background-color: white;" x-dropflow-log>
+  <div style="font: 16px/1.4 Arimo; background-color: white; zoom: 2;" x-dropflow-log>
     <span style="background-color: #eee;">
       I <span style="font-family: Cousine; color: #11a;">like</span> to write
       <span style="font-size: 3em;">layout code</span>
@@ -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
@@ -14,7 +14,7 @@ console.timeEnd('Add fonts');
 console.log();
 
 const rootElement = flow.parse(`
-  <div style="padding: 1em; background-color: #fff; font-family: Arimo;">
+  <div style="zoom: 2; padding: 1em; background-color: #fff; font-family: Arimo;">
     <p style="font: bold 24px Arimo; display: block;">CSS Floats
     <p style="font: italic 16px Arimo; display: block;">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
@@ -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
@@ -7,7 +7,7 @@ registerFontAsset('Cairo/Cairo-Regular.ttf'),
 registerFontAsset('Raleway/Raleway-Regular.ttf')
 
 const rootElement = flow.parse(`
-  <div style="background-color: #ccc;" x-dropflow-log>
+  <div style="background-color: #ccc; zoom: 2;" x-dropflow-log>
     <div style="line-height: 2.5; direction: rtl;" x-dropflow-log>
       <span style="background-color: red; color: white; border: 2px solid green;">
         أجمل التهاني بمناسبة الميلاد
@@ -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
@@ -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
@@ -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;