feat: update devtools

Author: yuanzm

packages/devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minigame-canvas-engine-devtools",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "一些工具函数和方法，在调试阶段用于提高效率",
   "main": "dist/index.js",
   "scripts": {

packages/devtools/src/app.vue

@@ -66,13 +66,28 @@ export default defineComponent({
     doTCompile() {
       let xml = document.getElementById("template")?.innerHTML;
 
+      if (process.env.NODE_ENV !== 'production') {
+        xml = (window as any).layoutTpl;
+      }
+
       // 没有监听到模板的情况
       if (!xml) {
         this.showNoXMLDialog = true;
         return;
       }
 
-      let comment = `/**\n * xml经过doT.js编译出的模板函数\n * 因为小游戏不支持new Function，模板函数只能外部编译\n * 可直接拷贝本函数到小游戏中使用\n */\n`;
+      let comment = 
+  `
+/**
+ * 模板引擎使用教程可见：https://wechat-miniprogram.github.io/minigame-canvas-engine/tutorial/templateengine.html
+ * xml经过doT.js编译出的模板函数
+ * 因为小游戏不支持new Function，模板函数只能外部编译
+ * 可直接拷贝本函数到小游戏中使用
+ * 原始的模板如下：
+ * ${xml}
+ * 
+ */
+`;
 
       const tplFunc = String(template(xml));
 

packages/devtools/src/demos/bitmaptext.vue

@@ -35,6 +35,11 @@ export default defineComponent({
 
   methods: {
     init() {
+      // for devtools debug
+      if (process.env.NODE_ENV !== 'production') {
+        (window as any).layoutTpl = tpl;
+      }
+
       const Layout = (window as any).Layout;
       Layout.registBitMapFont(
         "fnt_number-export",

packages/devtools/src/demos/button.vue

@@ -4,7 +4,7 @@ import { defineComponent } from "vue";
 
 // <image src="https://res.wx.qq.com/wechatgame/product/webpack/userupload/20191119/wegoing.jpeg" id="wegoing"></image>
 
-let template = `
+let tpl = `
   <view id="container">
     <button id="testButton" value="邀请"></button>
   </view>
@@ -31,8 +31,13 @@ export default defineComponent({
   mounted() {},
   methods: {
     init() {
+      // for devtools debug
+      if (process.env.NODE_ENV !== 'production') {
+        (window as any).layoutTpl = tpl;
+      }
+
       const Layout = (window as any).Layout;
-      Layout.init(template, style);
+      Layout.init(tpl, style);
 
       let canvas = document.getElementById("button") as HTMLCanvasElement;
       let context = canvas.getContext("2d");

packages/devtools/src/demos/canvas.vue

@@ -42,6 +42,11 @@ export default defineComponent({
   mounted() {},
   methods: {
     init() {
+      // for devtools debug
+      if (process.env.NODE_ENV !== 'production') {
+        (window as any).layoutTpl = tpl;
+      }
+
       const Layout = (window as any).Layout;
       Layout.init(template(tpl)({}), style);
 

packages/devtools/src/demos/helloworld.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-let template = `
+let tpl = `
   <view id="container">
     <text id="testText" class="redText" value="Hello World"></text>
   </view>
@@ -38,9 +38,13 @@ export default defineComponent({
   mounted() {},
   methods: {
     init() {
+      // for devtools debug
+        if (process.env.NODE_ENV !== 'production') {
+        (window as any).layoutTpl = tpl;
+      }
       const Layout = (window as any).Layout;
       
-      Layout.init(template, style);
+      Layout.init(tpl, style);
       let canvas = document.getElementById("helloworld") as HTMLCanvasElement;
       let context = canvas.getContext("2d");
       document.body.append(canvas);

packages/devtools/src/demos/insertElement.vue

@@ -5,7 +5,7 @@ const renderRect = {
   width: 400,
   height: 600,
 };
-const template = `
+const tpl = `
     <view class="container">
       <text class="loading" value="加载中..."></text>
       <scrollview class="scrollView" scrollY="true"></scrollview>
@@ -45,6 +45,10 @@ export default defineComponent({
   mounted() {},
   methods: {
     init() {
+      // for devtools debug
+      if (process.env.NODE_ENV !== 'production') {
+        (window as any).layoutTpl = tpl;
+      }
       let canvas = document.getElementById("insertElement") as HTMLCanvasElement;
       let context = canvas.getContext("2d");
       canvas.style.width = 400 / 2 + 'px';
@@ -54,7 +58,7 @@ export default defineComponent({
 
       const Layout = (window as any).Layout;
       Layout.updateViewPort(canvas.getBoundingClientRect());
-      Layout.init(template, style);
+      Layout.init(tpl, style);
 
       Layout.layout(context);
       // 模拟数据加载

packages/devtools/src/demos/invite.vue

@@ -95,6 +95,10 @@ export default defineComponent({
   mounted() {},
   methods: {
     init() {
+      // for devtools debug
+      if (process.env.NODE_ENV !== 'production') {
+        (window as any).layoutTpl = tpl;
+      }
       const Layout = (window as any).Layout;
       let canvas = document.getElementById("invite") as HTMLCanvasElement;
       let context = canvas.getContext("2d");

packages/devtools/src/demos/loading.vue

@@ -31,6 +31,10 @@ export default defineComponent({
   mounted() {},
   methods: {
     init() {
+      // for devtools debug
+      if (process.env.NODE_ENV !== 'production') {
+        (window as any).layoutTpl = tpl;
+      }
       const Layout = (window as any).Layout;
       Layout.init(tpl, style);
 

packages/devtools/src/demos/ranklist.vue

@@ -151,6 +151,10 @@ export default defineComponent({
   mounted() {},
   methods: {
     init() {
+      // for devtools debug
+      if (process.env.NODE_ENV !== 'production') {
+        (window as any).layoutTpl = tpl;
+      }
       const Layout = (window as any).Layout;
       // 创建mock数据
       let item = {