import Panel from './Panel';

new Panel({
	container: '#panel',
	width: 800,
	height: 600,
	menuOption: [
		{text: '导出元数据', cb: (panel)=>{
			localStorage.setItem("xpanel",JSON.stringify(panel.exportCanavsData()));
		}, type: 0},
		{text: '导入元数据', cb: (panel)=>{
			let data = JSON.parse(localStorage.getItem("xpanel"));
			data && panel.importCanvasData(data);
		}, type: 0},
		{text: '修改', cb: (panel, activeShape)=>{
					// console.log(activeShape)
			// 图形修改框
			let alterModalBg = document.querySelector("#xpanelMenuAlter");
			if(alterModalBg){
				alterModalBg.style.display="block";
			}else{
				alterModalBg = document.createElement('div');
				alterModalBg.classList.add('xpanel-saveimage-bg');
				alterModalBg.setAttribute('id','xpanelMenuAlter');
				document.body.appendChild(alterModalBg);
			}
			alterModalBg.innerHTML=`
			<div class="xpanel-menu-alter">
				<h4>图形属性修改</h4>
				<div>
					<span>显示文本</span><input type="text" value="${activeShape.text}" name="text">
				</div>
				<div>
					<span>字体大小</span><input type="range" value="${activeShape.font.size}" onchange="this.nextSibling.innerHTML=this.value+'px'" name="font.size" min="14" max="20" step="1"><small style="vertical-align: super;">${activeShape.font.size}px</small>
				</div>
				<div>
					<span>背景颜色</span><input type="color" value="${activeShape.backgroundColor}" name="backgroundColor">
				</div>
				<div>
					<span>前景颜色</span><input type="color" value="${activeShape.color}" name="color">
				</div>
				<div>
					<button id="confirmAlter">确定</button>
					<button onclick="this.parentNode.parentNode.parentNode.style.display='none'">取消</button>
				</div>
			</div>
			`;

			document.querySelector("#confirmAlter").onclick=function (){
				var inputs = document.querySelectorAll("#xpanelMenuAlter input");
				for(var i of inputs){
					let name = i.getAttribute('name');
					let path = name.split('.'), propertyPath='activeShape';
					for(var p of path){
						propertyPath+=`['${p}']`;
					}
					// console.log(propertyPath)
					eval('('+propertyPath+'=i.value)');
				}
				panel.repaint();
				document.querySelector("#xpanelMenuAlter").style.display='none';
			}
			// console.log(activeShape)
		}, type: 1}
	]
});
@@ -805,16 +805,155 @@
 );%0A%09%09%09%7D%0A
+%09%09%09let dataHTML='';%0A%09%09%09for(let p in activeShape.data.properties)%7B%0A%09%09%09%09dataHTML+=%60%3Cdiv%3E$%7Bp%7D: $%7BactiveShape.data.properties%5Bp%5D%7D%3C/div%3E%60;%0A%09%09%09%7D%0A
 %09%09%09alter
@@ -1621,32 +1621,136 @@
 or%22%3E%0A%09%09%09%09%3C/div%3E%0A
+%09%09%09%09%3Chr/%3E%0A%09%09%09%09%3Cdiv%3E%0A%09%09%09%09%09%3Cspan style=%22float:left;%22%3E%E5%A4%96%E9%83%A8%E6%95%B0%E6%8D%AE%3C/span%3E%0A%09%09%09%09%09%3Cspan%3E$%7BdataHTML%7D%3C/span%3E%0A%09%09%09%09%3C/div%3E%0A
 %09%09%09%09%3Cdiv%3E%0A%09%09%09%09%09%3C

add external data display when altering shape