Stop dragging once connected

215 Views Asked by At

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});
    }

Sample Connector

  1. First the connector means shapes should not cross rectangle or cannot go inside the boundary of rectangle.
  2. Once connected then individual shapes or rectangle should not move rather move collectively like a group
0

There are 0 best solutions below