Styjun

I have 4 blocks above d'n'd element. When I do "mousedown" event to any one of this blocks turning off dragging I want to do some "mousemove" event for making connecting line from this element and etc.

I've alredy read the similar issue. But unfortunately I don't understand how to let pass over "mousemove" event above d'n'd element.

Also I know that drag event forbid "mousemove" by default.

Who knows how does it work?

I'll be glad for any information.

constructor(props: ElementProps & DiagramInjectStore) 
 super(props);

 this.handleFlowCursorSnapping = this.handleFlowCursorSnapping.bind(this) as (event: MouseEvent) => void;
 this.handleFlowCursorFinalSnapping = this.handleFlowCursorFinalSnapping.bind(this) as (event: MouseEvent) => void;


public render(): JSX.Element 
 const coord, size = this.element.properties;
 const diagramId = this.props;
 const connectors = this.element;

 return (
 <Select
 coord= coord 
 size= size 
 stage= this.selectStage 
 canResizing= false 

 onDragStart= () => this.handleDragStart() 
 onDrag= e => this.handleDrag(e) 
 onDragEnd= e => this.handleDragEnd(e) 
 >
 <StyledGlyphElement>
 <Connectors
 diagramId= diagramId 
 type= ConnectorTypeKind.Element 
 connectors= connectors 
 onMouseDown= event => this.handleCreateFlow(event) 
 onMouseOver= event => this.handleBlur(event) 
 />
 </StyledGlyphElement>
 </Select>
 );


public componentDidMount(): void 
 document.body.addEventListener('mousemove', this.handleFlowCursorSnapping, false);
 document.body.addEventListener('mouseup', this.handleFlowCursorFinalSnapping, false);


public componentWillUnmount(): void 
 document.body.removeEventListener('mousemove', this.handleFlowCursorSnapping, false);
 document.body.removeEventListener('mouseup', this.handleFlowCursorFinalSnapping, false);


private handleFlowCursorSnapping(event: MouseEvent): void 
 document.body.addEventListener('mousemove', this.handleFlowCursorFinalSnapping, false);


private handleFlowCursorFinalSnapping(event: MouseEvent): void 
 document.body.removeEventListener('mousemove', this.handleFlowCursorSnapping, false);

enter image description here