I am using React-Konva library for creating shapes using my palette. Then I am dragging it to connect. But once it is connected it should then draggable for group should only work not for each item.
I have put different shapes inside a variable globally in const.
const shapes=
<Group
draggable
>
<Shape
sceneFunc={(context, shape) => {
context.beginPath();
context.moveTo(300, 100);
context.lineTo(300, 100);
context.quadraticCurveTo(150, 100, 100, 100);
context.closePath();
context.fillStrokeShape(shape);
}}
fill="#eff0f1"
stroke="#222"
/>
<Circle
x={305}
y={100}
radius={10}
fill="#eff0f1"
stroke="#222"
/>
</Group>
const block=<Rect
x={2}
y={170}
width={100}
height={100}
draggable
fill="#eff0f1"
stroke="#222"
/>
Now once it I check the palette button I push variable inside an array but once the connector of shape variable touches reactangle then it should be joined as a single element or grouped
<Stage width={950} height={585}>
<Layer>
<Group draggable>
{connector && multiConnector.map(shape=>{
return shape;
})}
{rect && multiBlock.map(block=>{
return block;
})}
</Group>
</Layer>
</Stage>
constructor(){
super();
this.state={
connector:false,
rect:false,
multiBlock:[],
multiConnector:[]
}
}
showConnector=() =>{
const { multiConnector } = this.state;
multiConnector.push(shapes);
this.setState({connector:true, multiConnector:multiConnector});
}
showRect=()=>{
const { multiBlock } = this.state;
multiBlock.push(block);
this.setState({rect:true, multiBlock:multiBlock});
}
- First the connector means shapes should not cross rectangle or cannot go inside the boundary of rectangle.
- Once connected then individual shapes or rectangle should not move rather move collectively like a group