From aa09c5dce12bfc4f6ddead11d9cf1c7ee0024df3 Mon Sep 17 00:00:00 2001
From: xiazeyu_2011 <xiazeyu_2011@126.com>
Date: Sat, 13 Jan 2018 20:47:07 +0800
Subject: [PATCH] feat: elementMgr functionally done

---
 src/cLive2DApp.js                        |  2 +-
 src/{elementManager.js => elementMgr.js} | 22 +++++++++++++++++++---
 src/tmplate/innerHTML.html               | 20 --------------------
 webpack.config.js                        |  4 ++--
 4 files changed, 22 insertions(+), 26 deletions(-)
 rename src/{elementManager.js => elementMgr.js} (56%)

diff --git a/src/cLive2DApp.js b/src/cLive2DApp.js
index 3609d76..0d4daf8 100644
--- a/src/cLive2DApp.js
+++ b/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
diff --git a/src/elementManager.js b/src/elementMgr.js
similarity index 56%
rename from src/elementManager.js
rename to src/elementMgr.js
index e7a5c8a..9fb347a 100644
--- a/src/elementManager.js
+++ b/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.');
diff --git a/src/tmplate/innerHTML.html b/src/tmplate/innerHTML.html
index 40bf971..e69de29 100644
--- a/src/tmplate/innerHTML.html
+++ b/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,
-}
diff --git a/webpack.config.js b/webpack.config.js
index 46320ac..c7b4d1e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -80,7 +80,7 @@ module.exports = env => {return{
         use: [{
           loader: 'babel-loader',
         }],
-      },/*
+      },
       {test: /\.html$/,
         use: [{
           loader: 'html-loader',
@@ -88,7 +88,7 @@ module.exports = env => {return{
             minimize: true,
           },
         }],
-      },*/
+      },
     ]
   },
 }}