{
|
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;
|
}
|
|
|
|
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)/2+this.area.offsetLeft;
|
var yoff=(h-rule*this.height)/2+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({ option:this.option,item:rect,element:null });
|
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){
|
var event={
|
option:_this.option,
|
item:_this.items[i].data,
|
element:tag
|
};
|
_this.option.onItemClick(event);
|
_this.updateView();
|
break;
|
}
|
}
|
}
|
this.area.appendChild(rt);
|
this.items.push({
|
data:rect,
|
view:rt,
|
flag:0
|
});
|
|
}
|
this.updateView();
|
}
|
|
getSelection(){
|
var ret=[];
|
for(var i=0;i<this.items.length;i++){
|
var a=this.option.items[i];
|
var evt={
|
option:this.option,
|
item:this.items[i].data,
|
element:this.items[i].view
|
};
|
if(this.option.isSelected(evt)){
|
ret.push(a);
|
}
|
|
}
|
return ret;
|
}
|
|
|
|
|
updateView(){
|
for(var i=0;i<this.items.length;i++){
|
var evt={
|
option:this.option,
|
item:this.items[i].data,
|
element:this.items[i].view
|
};
|
this.option.onItemUpdate(evt);
|
}
|
}
|
|
createOneSelectOption(width,height,normalColor,selectColor){
|
var opt={
|
width:width,
|
height:height,
|
normalColor:normalColor,
|
selectColor:selectColor,
|
createRect:function(event){
|
var option=event.option;
|
var item=event.item;
|
var rt=document.createElement("div");
|
rt.setAttribute("class",rect_class);
|
rt.style["background-color"]=option.normalColor;
|
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;
|
},
|
onItemClick:function(event){
|
var option=event.option;
|
var itm=event.item;
|
var elm=event.element;
|
for(var i=0;i<option.items.length;i++){
|
var sit=option.items[i];
|
if(sit==itm){
|
sit.selected=true;
|
}
|
else{
|
sit.selected=false;
|
}
|
}
|
},
|
|
|
|
onItemUpdate:function(event){
|
var itm=event.item;
|
var elm=event.element;
|
|
elm.style["background-color"]=itm.selected?event.option.selectColor:event.option.normalColor;
|
},
|
isSelected:function(event){
|
var itm=event.item;
|
return itm.selected==true;
|
},
|
|
items:[]
|
};
|
return opt;
|
}
|
}
|
|
|
function createLayout(div){
|
var lay=new Layout(div);
|
return lay;
|
}
|
}
|
