feat: elementMgr functionally done

Author: xiazeyu

src/cLive2DApp.js

@@ -42,7 +42,7 @@ let opacityHover = 1;
 */
 
 import { config } from './config/configMgr';
-import { createElement, currWebGL } from './elementManager';
+import { createElement, currWebGL } from './elementMgr';
 
 /**
  * Main function of live2d-widget

src/elementManager.js renamed to src/elementMgr.js

@@ -15,7 +15,7 @@ let currWebGL = undefined;
 
 /**
  * The current canvas element
- * @type {DOMString}
+ * @type {HTMLElement}
  */
 
 let currCanvas;
@@ -29,9 +29,25 @@ function createElement(){
 
   let newElem = document.createElement('div');
   newElem.id = config.name.div;
-  newElem.innerHTML = htmlTemplate(config);
+  newElem.innerHTML = htmlTemplate;
+    let newCanvasElem = document.createElement('canvas');
+    newCanvasElem.setAttribute('id', config.name.canvas);
+    newCanvasElem.setAttribute('width', config.display.width * config.display.antialias);
+    newCanvasElem.setAttribute('height', config.display.height * config.display.antialias);
+    newCanvasElem.style.setProperty('position', 'fixed');
+    newCanvasElem.style.setProperty('width', config.display.width);
+    newCanvasElem.style.setProperty('height', config.display.height);
+    newCanvasElem.style.setProperty('opacity', config.react.opacityDefault);
+    newCanvasElem.style.setProperty(config.display.position, config.display.hOffset + 'px');
+    newCanvasElem.style.setProperty('bottom', config.display.vOffset + 'px');
+    newCanvasElem.style.setProperty('z-index', 99999);
+    newCanvasElem.style.setProperty('pointer-events', 'none');
+    if(config.dev.border) newCanvasElem.style.setProperty('border', 'dashed 1px #CCC');
+    newElem.appendChild(newCanvasElem);
+
   document.body.appendChild(newElem);
   currCanvas = document.getElementById(config.name.canvas);
+
   initWebGL();
 
 }
@@ -55,7 +71,7 @@ function initWebGL(){
       if(ctx) currWebGL = ctx;
     }catch(e){}
   }
-  if(!gl){
+  if(!currWebGL){
     console.error('Live2D widgets: Failed to create WebGL context.');
     if(!window.WebGLRenderingContext){
       console.error('Your browser may not support WebGL, check https://get.webgl.org/ for futher information.');

src/tmplate/innerHTML.html

@@ -1,20 +0,0 @@
-function htmlTemplate(config){
-  return `<canvas id="${config.name.canvas}" width="${config.display.widget * config.display.AA}" height="${config.display.height * config.display.AA}"></canvas>
-<style>
-  #${config.name.canvas}{
-    position: fixed;
-    width: ${config.display.widget};
-    height: ${config.display.height};
-    opacity: ${config.react.opacityDefault};
-    ${config.display.position}: ${config.display.hOffset};
-    bottom: ${config.display.vOffset};
-    z-index: 99999;
-    pointer-events: none;
-    ${config.dev.border ? 'border: dashed 1px #CCC;' : ''}
-  }
-</style>`
-}
-
-export {
-  htmlTemplate,
-}

webpack.config.js

@@ -80,15 +80,15 @@ module.exports = env => {return{
         use: [{
           loader: 'babel-loader',
         }],
-      },/*
+      },
       {test: /\.html$/,
         use: [{
           loader: 'html-loader',
           options: {
             minimize: true,
           },
         }],
-      },*/
+      },
     ]
   },
 }}