{
|
let rect_style="border:1px solid black;";
|
let rect_class="rect";
|
let normal_color="lightblue";
|
|
let remove_color="rgba(255,255,255,0.1)";
|
|
|
|
|
class Layout{
|
|
constructor(div){
|
this.items=[];
|
this.area=div;
|
}
|
|
|
|
|
|
tryRemove(item){
|
if(item.flag==0){
|
item.flag=1;
|
item.data.remove=true;
|
}
|
else{
|
item.flag=0;
|
item.data.remove=false;
|
}
|
for(var i=0;i<this.items.length;i++){
|
var itm=this.items[i];
|
if(itm.flag==0){
|
this.option.onRectResume(itm.view);
|
if(itm.data.color!=null && itm.data.color!=undefined){
|
itm.view.style["background-color"]=itm.data.color;
|
}
|
}
|
else{
|
this.option.onRectRemove(itm.view);
|
}
|
}
|
}
|
|
|
layout(option){
|
this.width=option.width;
|
this.height=option.height;
|
this.option=option;
|
var w= this.area.offsetWidth;
|
var h= this.area.offsetHeight;
|
var dw=w/this.width;
|
var dh=h/this.height;
|
this.items=[];
|
this.area.innerHTML=null;
|
var rule=dw<dh?dw:dh;
|
var xoff=w-rule*this.width+this.area.offsetLeft;
|
var yoff=h-rule*this.height+this.area.offsetTop;
|
var data=this.option;
|
for(var i=0;i<data.items.length;i++){
|
var rect=data.items[i];
|
var rt=this.option.createRect(rect);
|
var rx=xoff+rect.x*rule;
|
var ry=yoff+rect.y*rule;
|
var rw=rect.width*rule;
|
var rh=rect.height*rule;
|
var st="position:absolute;left:"+rx+"px;top:"+ry+"px;width:"+rw+"px;height:"+rh+"px";
|
rt.style=st;
|
|
var lay=this;
|
rt.onmousedown=function(evt){
|
var _this=lay;
|
var tag= evt.currentTarget;
|
for(var i=0;i<_this.items.length;i++){
|
if(_this.items[i].view==tag){
|
_this.tryRemove(_this.items[i]);
|
}
|
}
|
}
|
this.area.appendChild(rt);
|
this.items.push({
|
data:rect,
|
view:rt,
|
flag:0
|
});
|
|
}
|
this.updateFlag();
|
}
|
|
updateFlag(){
|
for(var i=0;i<this.items.length;i++){
|
var itm=this.items[i];
|
if(itm.data.remove==false){
|
itm.flag=0;
|
this.option.onRectResume(itm.view);
|
if(itm.data.color!=null && itm.data.color!=undefined){
|
itm.view.style["background-color"]=itm.data.color;
|
}
|
}
|
else{
|
itm.flag=1;
|
this.option.onRectRemove(itm.view);
|
}
|
}
|
}
|
|
createOption(width,height){
|
var opt={
|
width:width,
|
height:height,
|
createRect:function(item){
|
var rt=document.createElement("div");
|
rt.setAttribute("class",rect_class);
|
if(item.color!=null && item.color!=undefined){
|
rt.style["background-color"]=item.color;
|
}
|
rt.innerText=item.id+"\r\n"+item.width+"x"+item.height;
|
if(item.text!=null && item.text!=undefined){
|
rt.innerText=item.text;
|
}
|
else{
|
rt.innerText=item.id+"\r\n"+item.width+"x"+item.height;
|
}
|
|
return rt;
|
},
|
onRectRemove:function(element){
|
element.style["background-color"]="rgba(255,255,255,0.1)";
|
|
},
|
onRectResume:function(element){
|
|
element.style["background-color"]="lightblue";
|
},
|
items:[]
|
};
|
return opt;
|
}
|
}
|
|
|
|
|
|
|
function createLayout(div){
|
var lay=new Layout(div);
|
return lay;
|
}
|
|
|
|
}
|
