Прекратить перетаскивание после подключения

Я использую библиотеку React-Konva для создания фигур с использованием моей палитры. Затем я перетаскиваю его для подключения. Но как только он подключен, он должен перетаскиваться для группы, должен работать только не для каждого элемента.

Я поместил различные переменные в переменную глобально в 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"
/>

Теперь, как только я проверяю кнопку палитры, я нажимаю переменную внутри массива, но как только соединитель переменной формы касается перемычки, он должен быть объединен в один элемент или сгруппирован.

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

  1. Во-первых, соединитель означает, что фигуры не должны пересекать прямоугольник или не могут выходить за границы прямоугольника.
  2. После соединения отдельные фигуры или прямоугольники не должны двигаться, а двигаться вместе как группа

0 ответов

Другие вопросы по тегам