core: changing canvas id attribute enabled

MyThemeWay · Mar 24, 2022 · aa81523 · aa81523
1 parent 3e71a36
commit aa81523
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -209,22 +209,27 @@ Way 2: `npm run terser`	= with [terser](https://github.com/terser/terser "Check
 2. change `const canvas` and save it
 	```js
 	// 
-	// Canvas Settings: path to canvas (p2c) & GLSL preprocessing (prepr)
+	// CANVAS SETTINGS
+	//  - path:  path to canvas
+	//  - prepr: GLSL preprocessing
+	//  - id:    canvas id attribute
 	// 
 
 	// TWGL
 	//
-	// const canvas = { p2c: './src/twgl/mtw-canvas-disks', prepr: null };
-	// const canvas = { p2c: './src/twgl/mtw-canvas-malachite', prepr: {} };
-	// const canvas = { p2c: './src/twgl/mtw-canvas-blacksea', prepr: {} };
-	// const canvas = { p2c: './src/twgl/mtw-canvas-spiral', prepr: null };
+	// const canvas = { path: './src/twgl/mtw-canvas-disks', prepr: null, id: 'mtw-canvas' };
+	// const canvas = { path: './src/twgl/mtw-canvas-malachite', prepr: {}, id: 'mtw-canvas' };
+	// const canvas = { path: './src/twgl/mtw-canvas-blacksea', prepr: {}, id: 'mtw-canvas' };
+	// const canvas = { path: './src/twgl/mtw-canvas-spiral', prepr: null, id: 'mtw-canvas' };
 
 	// three.js
 	// 
-	// const canvas = { p2c: './src/three/mtw-canvas-disks', prepr: null };
-	const canvas = { p2c: './src/three/mtw-canvas-malachite', prepr: {} };
-	// const canvas = { p2c: './src/three/mtw-canvas-blacksea', prepr: {} };
-	// const canvas = { p2c: './src/three/mtw-canvas-spiral', prepr: null };
+	// const canvas = { path: './src/three/mtw-canvas-disks', prepr: null, id: 'mtw-canvas' };
+	const canvas = { path: './src/three/mtw-canvas-malachite', prepr: {}, id: 'mtw-canvas' };
+	// const canvas = { path: './src/three/mtw-canvas-blacksea', prepr: {}, id: 'mtw-canvas' };
+	// const canvas = { path: './src/three/mtw-canvas-spiral', prepr: null, id: 'mtw-canvas' };
+
+	module.exports = canvas;
 	```
 
 ### Add Canvas
@@ -233,27 +238,34 @@ Way 2: `npm run terser`	= with [terser](https://github.com/terser/terser "Check
 2. follow the <a title="Go there" href="#switch-canvas" >switch canvas</a>  procedure
 	```js
 	// 
-	// Canvas Settings: path to canvas (p2c) & GLSL preprocessing (prepr)
+	// CANVAS SETTINGS
+	//  - path:  path to canvas
+	//  - prepr: GLSL preprocessing
+	//  - id:    canvas id attribute
 	// 
 
 	// TWGL
 	//
-	// const canvas = { p2c: './src/twgl/mtw-canvas-disks', prepr: null };
-	// const canvas = { p2c: './src/twgl/mtw-canvas-malachite', prepr: {} };
+	// const canvas = { path: './src/twgl/mtw-canvas-disks', prepr: null, id: 'mtw-canvas' };
+	// const canvas = { path: './src/twgl/mtw-canvas-malachite', prepr: {}, id: 'mtw-canvas' };
 	const canvas = {
-		p2c: './src/twgl/mtw-canvas-new',
+		path: './src/twgl/mtw-canvas-new',
 		prepr: {
 			myVar: 1,
 			myMacro: function (arg) { return arg; }
-		}
+		},
+		id: 'mtw-canvas'
 	};
-	// const canvas = { p2c: './src/twgl/mtw-canvas-blacksea', prepr: {} };
-	// const canvas = { p2c: './src/twgl/mtw-canvas-spiral', prepr: null };
+	// const canvas = { path: './src/twgl/mtw-canvas-blacksea', prepr: {}, id: 'mtw-canvas' };
+	// const canvas = { path: './src/twgl/mtw-canvas-spiral', prepr: null, id: 'mtw-canvas' };
+
+	module.exports = canvas;
 	```
 
 ### Note:
-> * `mtw-canvas-new` must have a `main.js` file
-> * to customize the fragment and/or vertex shaders, modify the `shaders.glslx` files
+> * `mtw-canvas-new` must have a <b>main.js</b> file
+> * your <b>canvas ID attribute (id)</b> setting is only used in production mode; in development mode it is always the default `mtw-canvas`
+> * to customize the fragment and/or vertex shaders, modify the <b>shaders.glslx</b> files
 > * [mtw-canvas-disks](https://github.com/MyThemeWay/mtw-canvas-disks "Get it") <b>[included] [default]</b>; Fragment shader is based on [CoordSys - intersection](https://www.shadertoy.com/view/lsfGDB "Check it out") [License: [MIT](https://www.shadertoy.com/view/lsfGDB "Go there"); Copyright: ©️ 2013 Inigo Quilez; Changes: made]
 > * [mtw-canvas-malachite](https://github.com/MyThemeWay/mtw-canvas-malachite "Get it") <b>[included]</b>; Fragment shader is based on [Glare of water](https://www.shadertoy.com/view/ttSGz3 "Check it out") [License: [CC&nbsp;BY&nbsp;3.0](https://www.shadertoy.com/view/ttSGz3 "Go there"); Copyright: ©️ 2019 Jan Mróz; Changes: made]
 > * [mtw-canvas-spiral](https://github.com/MyThemeWay/mtw-canvas-spiral "Get it") and [mtw-canvas-blacksea](https://github.com/MyThemeWay/mtw-canvas-blacksea "Get it") <b>[not included]</b>; you have to add them manually

diff --git a/canvas.config.js b/canvas.config.js
@@ -7,17 +7,20 @@
  */
 
 // 
-// Canvas Settings: path to canvas (p2c) & GLSL preprocessing (prepr)
-// 
+// CANVAS SETTINGS
+//  - path:  path to canvas
+//  - prepr: GLSL preprocessing
+//  - id:    canvas id attribute
+//  
 
 // TWGL
 //
-const canvas = { p2c: './src/twgl/mtw-canvas-disks', prepr: null };
-// const canvas = { p2c: './src/twgl/mtw-canvas-malachite', prepr: {} };
+const canvas = { path: './src/twgl/mtw-canvas-disks', prepr: null, id: 'mtw-canvas' };
+// const canvas = { path: './src/twgl/mtw-canvas-malachite', prepr: {}, id: 'mtw-canvas' };
 
 // three.js
 // 
-// const canvas = { p2c: './src/three/mtw-canvas-disks', prepr: null };
-// const canvas = { p2c: './src/three/mtw-canvas-malachite', prepr: {} };
+// const canvas = { path: './src/three/mtw-canvas-disks', prepr: null, id: 'mtw-canvas' };
+// const canvas = { path: './src/three/mtw-canvas-malachite', prepr: {}, id: 'mtw-canvas' };
 
 module.exports = canvas;
diff --git a/dev.config.js b/dev.config.js
@@ -23,12 +23,13 @@ const addErrDiv = `
 
 async function buildCmd() {
   return build({
-    entryPoints: [`${canvas.p2c}/main.js`],
+    entryPoints: [`${canvas.path}/main.js`],
     outfile: './canvas.bundle.js',
     logLevel: 'info',
     bundle: true,
     write: false,
     metafile: true,
+    define: { MTW_CANVAS_ID: '"mtw-canvas"' },
 
     plugins: [
       glslxPlugin({

diff --git a/pro.config.js b/pro.config.js
@@ -17,13 +17,14 @@ const { basename } = require('path');
 console.log("[\x1b[90mesbuild\x1b[0m]: starting `\x1b[36mproduction-mode\x1b[0m`...")
 
 build({
-  entryPoints: [`${canvas.p2c}/main.js`],
+  entryPoints: [`${canvas.path}/main.js`],
   outfile: './dist/canvas.bundle.min.js',
   logLevel: 'info',
   bundle: true,
   write: ((!(argv[2])) ? true : false),
   minify: true,
   metafile: true,
+  define: { MTW_CANVAS_ID: `'${canvas.id}'` },
 
   plugins: [
     glslxPlugin({

diff --git a/src/three/mtw-canvas-disks/main.js b/src/three/mtw-canvas-disks/main.js
@@ -22,7 +22,7 @@ import { WebGLRenderer, OrthographicCamera, Scene, PlaneGeometry, ShaderMaterial
 import { fragmentShader as fs, renaming } from './shaders.glslx';
 
 (() => {
-  const canvas = document.getElementById("mtw-canvas");
+  const canvas = document.getElementById(MTW_CANVAS_ID);
 
   canvas.style.backgroundColor="black";
 

diff --git a/src/three/mtw-canvas-malachite/main.js b/src/three/mtw-canvas-malachite/main.js
@@ -22,7 +22,7 @@ import { WebGLRenderer, OrthographicCamera, Scene, PlaneGeometry, ShaderMaterial
 import { fragmentShader as fs, renaming } from './shaders.glslx';
 
 (() => {
-  const canvas = document.getElementById("mtw-canvas");
+  const canvas = document.getElementById(MTW_CANVAS_ID);
 
   canvas.style.backgroundColor="black";
 

diff --git a/src/twgl/mtw-canvas-disks/main.js b/src/twgl/mtw-canvas-disks/main.js
@@ -22,7 +22,7 @@ import { createProgramInfo, createBufferInfoFromArrays, resizeCanvasToDisplaySiz
 import { fragmentShader, vertexShader, renaming } from './shaders.glslx';
 
 (() => {
-  const canvas = document.getElementById("mtw-canvas");
+  const canvas = document.getElementById(MTW_CANVAS_ID);
 
   canvas.style.backgroundColor="black";
 

diff --git a/src/twgl/mtw-canvas-malachite/main.js b/src/twgl/mtw-canvas-malachite/main.js
@@ -22,7 +22,7 @@ import { createProgramInfo, createBufferInfoFromArrays, resizeCanvasToDisplaySiz
 import { fragmentShader, vertexShader, renaming } from './shaders.glslx';
 
 (() => {
-  const canvas = document.getElementById("mtw-canvas");
+  const canvas = document.getElementById(MTW_CANVAS_ID);
 
   canvas.style.backgroundColor="black";