D'n'd Element Blocks MouseMove Event on It.

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

[alekseos]

Sorry for delay.

1. Eventually we solved our problem with help by changing structure of DOM selectors. Before that we dragged wrapped element instead of single element without wrapping. This implementation didn’t pass clicks and any mouse events to appropriate inner elements but did dragging events for wrapper.

2. Before that we used another method. We blocked dragging from wrapper by using

handleMouseMove() {
   event.stopPropagation();
   event.preventDefault();

   ...code
}

I hope it will help.

10 окт. 2019 г., в 22:15, denys.bielkin [e-mail] написал(а):  Yes, sir!

Can you please tell me - how? )

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[denysbielkin]

Thank you a lot 😃