Why does this pointerdown event not fire?

[paulwispnext]

Introduction

I am trying to create a thin wrapper around joint, to make handling with react a bit easier. (basically hiding the whole useEffect stuff into a more declarative shell. I have some code, yet it doesn't seem that the pointerdown is triggered I do not see an alert or anything.

Steps to reproduce

This is the code I have:

import {ReactNode, useEffect, useRef, useState} from "react";
import {dia, shapes} from "@joint/core";
import {GraphContext} from "@/joint-react/graphContext";
import Graph = dia.Graph;
import {ElementContext, ElementDict} from "@/joint-react/ElementContext";

type PropTy = Omit<dia.Paper.Options, "el" | "model"> & {
    children?: ReactNode
    renderCount: number
}
export const Paper = (props: PropTy) => {
    const {children, renderCount} = props;
    const paperEl = useRef(null);
    const graph = useRef(new Graph({}, {cellNamespace: shapes}))

    const paper = useRef<dia.Paper|undefined>();
    const [elements, setElements] = useState<ElementDict>({})
    const value = {elements, setElements}
    console.log('rerender the paper ' + renderCount)
    const {
        width, height
    } = props;

    useEffect(() => {
        if (graph.current) {
            console.log('creating paper')
            paper.current = new dia.Paper({
                el: paperEl.current,
                model: graph.current,
                width: 800,
                height: 600,
                background: { color: '#F5F5F5' },
            });

            // paper.current.on({
            //     "blank:pointerdown": (evt, x, y) => {
            //         console.log('clicked anywhere')
            //     }
            // })
            console.log("adding blank:pointerdown event")
            paper.current.on('blank:pointerdown', function(evt, x, y) {
                console.log('inside paper pointerdown event')
                alert('pointerdown on a blank area in the paper.')
            })
        }


        return () => {
            if (paper.current) {
                console.log('removing events')
                paper.current.stopListening();
                paper.current = undefined;
            }
        };
    }, [
        graph,
    ]);

    return (<>
        <div>{renderCount}</div>
        <GraphContext.Provider value={graph.current}>
            <ElementContext.Provider value={value}>
                <div ref={paperEl} style={{ width: "100%", height: "500px" }}/>
                {children}
            </ElementContext.Provider>
        </GraphContext.Provider>
    </>);
}

However I notice that while the console logs to "build" the paper are executed (twice as expected) the actual event never fires. The same happens with then pointerclick event.

Am I missing something?

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS

[samuelgja]

Hey. In your useEffect, you’re attaching the blank:pointerdown event to the paper, but it might not fire due to re-renders or incorrect element setup. Ensure the paperEl.current is correctly initialized and that events are attached after the paper is fully rendered.

Also, keep in mind that we're preparing a new React-JointJS library that simplifies this process. It abstracts the event handling and setup, providing a more declarative API that should fix these kinds of issues. Stay tuned for its release! (https://github.com/clientIO/joint/tree/dev/packages/joint-react)

[paulwispnext]

this is the exact code that runs, I do not see how I can even change how paperEl.current is initialized?

Should I use useLayoutEffect?

---

I'd love to collaborate with the joint-react as well, as my whole library I am making myself is just that: a way to specify how jointjs works in a more declarative and react manner, so I could do things like:

<Paper width={800} height={800} background={background.current} cellViewNamespace={namespace}>
    <Rect id={"source"} x={200} y={100} width={80} height={40} />
    <Rect id="target" x={200} y={300} width={80} height={40} />
    <Circle x={40} y={220} radius={20}/>
    <Link
        source={{id: "source"}}
        target={{id: "target"}}
        vertices={vertices}
        labels={[{
            attrs: {
                text: {
                    text: "elem",
                }
            }
        }]}
        attrs={{
            // @ts-ignore
            'line/strokeWidth': 4
        }}
    />
</Paper>

We (ISPnext) are in a position where we quickly have to decide and pick a new more modern flowchart library, and I'm championing the use of newer version of jointjs; main reason we are still dubious is because the formal integration is so "non react like".
So a formal way to use joint-react would be music to my ears, may I contact you about details?

[kumilingus]

Hi @paulwispnext, absolutely, please drop us an email at support[at]jointjs.com and let's arrange a call.