You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
1.6 KiB
99 lines
1.6 KiB
import Konva from "konva";
|
|
|
|
export default function (width,height){
|
|
const _width=width*0.5,_height=120
|
|
|
|
const container=function (){
|
|
const x=20,y=45
|
|
|
|
const layer=new Konva.Layer({
|
|
x:x,
|
|
y:y,
|
|
width:_width,
|
|
height:_height
|
|
})
|
|
layer.clipFunc(function(ctx) {
|
|
ctx.rect(0, 0, _width, _height);
|
|
});
|
|
|
|
const rect=new Konva.Rect({
|
|
x:0,
|
|
y:0,
|
|
width:_width,
|
|
height:_height,
|
|
stroke:'black',
|
|
strokeWidth:1,
|
|
})
|
|
|
|
layer.add(rect)
|
|
|
|
const group=new Konva.Group({
|
|
x:0,
|
|
y:0,
|
|
width:_width,
|
|
height:_height,
|
|
draggable: true,
|
|
dragBoundFunc:function (pos){
|
|
return {
|
|
x:pos.x,
|
|
y:y
|
|
}
|
|
},
|
|
})
|
|
layer.add(group)
|
|
|
|
|
|
return {layer,group}
|
|
}
|
|
|
|
let currentWork=null;
|
|
|
|
const getCurrentWorker=function (){
|
|
return currentWork
|
|
}
|
|
|
|
const person=function (index,persons={}){
|
|
|
|
const width=120,height=110
|
|
const x=index*120+(index+1)*5,y=5
|
|
const group=new Konva.Group({
|
|
x:x,
|
|
y:y,
|
|
width:width,
|
|
height:height
|
|
})
|
|
|
|
group.on('click touchstart',function (){
|
|
currentWork=persons
|
|
})
|
|
|
|
const rect=new Konva.Rect({
|
|
x:0,
|
|
y:0,
|
|
width:width,
|
|
height:height,
|
|
stroke:'black',
|
|
strokeWidth:1,
|
|
})
|
|
group.add(rect)
|
|
|
|
const text=new Konva.Text({
|
|
x:0,
|
|
y:0,
|
|
width:width,
|
|
height:height,
|
|
text: persons.userName,
|
|
align: 'center',
|
|
verticalAlign:'middle',
|
|
fontSize:12
|
|
})
|
|
group.add(text)
|
|
|
|
return group
|
|
}
|
|
|
|
return{
|
|
container,person,getCurrentWorker
|
|
}
|
|
}
|