From c7dc1df8b363c8858d3c92cfa4cae30c58baf145 Mon Sep 17 00:00:00 2001 From: yuanchuan Date: Mon, 29 Nov 2021 20:24:27 +0800 Subject: [PATCH] Rename paint to canvas --- src/canvas.js | 45 ++++++++++++++++++++++++++++----------------- src/generator.js | 22 +++++++++++----------- src/index.js | 28 +++++++++------------------- src/paint.js | 42 ++---------------------------------------- 4 files changed, 50 insertions(+), 87 deletions(-) diff --git a/src/canvas.js b/src/canvas.js index 5beb968..5fa9953 100644 --- a/src/canvas.js +++ b/src/canvas.js @@ -1,30 +1,41 @@ import { un_entity } from './utils/index'; import Cache from './utils/cache'; -function draw_canvas(code, width, height, random) { +let counter = 1; + +function draw_canvas(code) { let result = Cache.get(code); if (result) { return Promise.resolve(result); } + let name = 'css-doodle-paint-' + (counter++); + let wrapped = generate(name, code); - let canvas = document.createElement('canvas'); - let ctx = canvas.getContext('2d'); - let ratio = window.devicePixelRatio || 1; - - canvas.style.width = canvas.width +'px'; - canvas.style.height = canvas.height +'px'; - canvas.width = width * ratio; - canvas.height = height * ratio; - - ctx.scale(ratio, ratio); - + let blob = new Blob([wrapped], { type: 'text/javascript' }); try { - let fn = new Function(`return (ctx, width, height, random) => {${un_entity(code)}}`)(); - fn(ctx, width, height, random); - } catch(e) { - // ignore + if (CSS.paintWorklet) { + CSS.paintWorklet.addModule(URL.createObjectURL(blob)); + } + } catch(e) {} + + return Promise.resolve(Cache.set(code, `paint(${name})`)); +} + +function generate(name, code) { + code = un_entity(code); + // make it so + if (!code.includes('paint(')) { + code = ` + paint(ctx, {width, height}, props) { + ${code} + } + ` } - return Promise.resolve(Cache.set(code, canvas.toDataURL())); + return ` + registerPaint('${name}', class { + ${ code } + }) + `; } export { diff --git a/src/generator.js b/src/generator.js index c309fa0..3388202 100644 --- a/src/generator.js +++ b/src/generator.js @@ -139,9 +139,9 @@ class Rules { case 'shaders': return this.compose_shaders(value, coords); case 'canvas': - return this.compose_canvas(value, coords); + return this.compose_canvas(value, arg.arguments.slice(1)); case 'paint': - return this.compose_paint(value, arg.arguments.slice(1)); + return this.compose_paint(value); } } } @@ -182,23 +182,23 @@ class Rules { return '${' + id + '}'; } - compose_canvas(code, {x, y, z}) { - let id = this.unique_id('canvas'); - this.canvas[id] = { + compose_paint(code, {x, y, z}) { + let id = this.unique_id('paint'); + this.paint[id] = { code, cell: cell_id(x, y, z) }; return '${' + id + '}'; } - compose_paint(code, rest = []) { + compose_canvas(code, rest = []) { let commands = code; let result = rest.map(group => get_value(group[0])).join(','); if (result.length) { commands = code + ',' + result; } - let id = this.unique_id('paint'); - this.paint[id] = { code: commands }; + let id = this.unique_id('canvas'); + this.canvas[id] = { code: commands }; return '${' + id + '}'; } @@ -236,10 +236,10 @@ class Rules { result += this.compose_doodle(value); break; case 'shaders': result += this.compose_shaders(value, coords); break; - case 'canvas': - result += this.compose_canvas(value, coords); break; case 'paint': - result += this.compose_paint(value, val.arguments.slice(1)); break; + result += this.compose_paint(value); break; + case 'canvas': + result += this.compose_canvas(value, val.arguments.slice(1)); break; } } } else { diff --git a/src/index.js b/src/index.js index fdab550..bb2df52 100644 --- a/src/index.js +++ b/src/index.js @@ -6,7 +6,6 @@ import seedrandom from './lib/seedrandom'; import { svg_to_png } from './svg'; import { draw_shader } from './shader'; import { draw_canvas } from './canvas'; -import { make_paint } from './paint'; import { uniform_time } from './uniform'; import get_props from './utils/get-props'; @@ -234,16 +233,12 @@ class Doodle extends HTMLElement { }); } - canvas_to_image({ code, cell }, fn) { - let element = this.doodle.getElementById(cell); - let { width, height } = element && element.getBoundingClientRect() || { - width: 0, height: 0 - }; - draw_canvas(code, width, height, this.random).then(fn); + paint_to_image({ code, cell }, fn) { + } - paint_to_image({ code, cell }, fn) { - make_paint(code).then(fn); + canvas_to_image({ code }, fn) { + draw_canvas(code).then(fn); } shader_to_image({ shader, cell }, fn) { @@ -300,8 +295,9 @@ class Doodle extends HTMLElement { let path_ids = Object.keys(paths); let canvas_ids = Object.keys(canvas); let paint_ids = Object.keys(paint); + let length = doodle_ids.length + canvas_ids.length + shader_ids.length + path_ids.length + paint_ids.length; return input => { - if (!doodle_ids.length && !shader_ids.length && !path_ids.length && !canvas_ids.length && !paint_ids.length) { + if (!length) { return Promise.resolve(input); } let mappings = [].concat( @@ -333,13 +329,7 @@ class Doodle extends HTMLElement { } }), paint_ids.map(id => { - if (input.includes(id)) { - return new Promise(resolve => { - this.paint_to_image(paint[id], value => resolve({ id, value })); - }); - } else { - return Promise.resolve(''); - } + return Promise.resolve(''); }), path_ids.map(id => { if (input.includes(id)) { @@ -355,14 +345,14 @@ class Doodle extends HTMLElement { mapping.forEach(({ id, value }) => { input = input.replaceAll( '${' + id + '}', - /^paint/.test(id) ? value : `url(${value})` + /^canvas/.test(id) ? value : `url(${value})` ); }); } else { mapping.forEach(({ id, value }) => { input = input.replace( '${' + id + '}', - /^paint/.test(id) ? value : `url(${value})` + /^canvas/.test(id) ? value : `url(${value})` ) }); } diff --git a/src/paint.js b/src/paint.js index bd84015..dbc9045 100644 --- a/src/paint.js +++ b/src/paint.js @@ -1,43 +1,5 @@ -import { un_entity } from './utils/index'; import Cache from './utils/cache'; -let counter = 1; - -function make_paint(code) { - let result = Cache.get(code); - if (result) { - return Promise.resolve(result); - } - let name = 'css-doodle-paint-' + (counter++); - let wrapped = generate(name, code); - - let blob = new Blob([wrapped], { type: 'text/javascript' }); - try { - if (CSS.paintWorklet) { - CSS.paintWorklet.addModule(URL.createObjectURL(blob)); - } - } catch(e) {} - - return Promise.resolve(Cache.set(code, `paint(${name})`)); -} - -function generate(name, code) { - code = un_entity(code); - // make it so - if (!code.includes('paint(')) { - code = ` - paint(ctx, {width, height}, props) { - ${code} - } - ` - } - return ` - registerPaint('${name}', class { - ${ code } - }) - `; -} - -export { - make_paint +export function make_paint() { + return ''; }