import Layout from "https://cdn.skypack.dev/minigame-canvas-engine";

​

/**

 * 只需要在Web端调试场景下引用

 * 引入minigame-canvas-engine-devtools之后，layoutDevtools会自动挂载到windows

 */

import LayoutDevTools from "https://cdn.skypack.dev/minigame-canvas-engine-devtools";

window.layoutDevtools.init(Layout);

​

const template = document.getElementById('template').innerHTML;

const style = eval(document.getElementById("style").innerHTML);

​

let canvas = document.getElementById('canvas');

let context = canvas.getContext('2d');

​

Layout.init(template, style);

​

const container = Layout.getElementsById('container')[0];

​

// 设置canvas的尺寸和样式的container比例一致

canvas.style.width = container.style.width / 3 + 'px';

canvas.style.height = container.style.height / 3 + 'px';

canvas.width = container.style.width;

canvas.height = container.style.height;

​

Layout.updateViewPort(canvas.getBoundingClientRect());

​

Layout.layout(context);

​

// 获取 ScrollView

const list = Layout.getElementsByClassName('list')[0];

​

const cloneButton = Layout.getElementsById('cloneButton')[0];

console.log(cloneButton)

cloneButton.on('click', () => {

  // 对列表第一项进行深度拷贝

  const listItems = Layout.getElementsByClassName('listItem');

  const toCopyItem = listItems[0];

  const newListItem = Layout.cloneNode(toCopyItem);

​

  // 针对拷贝后的子节点做一些魔改

  const listItemNum = newListItem.getElementsByClassName('listItemText')[0];

  listItemNum.value = listItems.length + 1;

​

  // 将拷贝后的节点也添加到滚动列表

  list.appendChild(newListItem);

});

​