I am using cytoscape.js to draw graphs. My specifications call for the use of a “crowsfoot” graphic at the arrow’s source.

Out-of-the-box, cytoscape does not support this graphic, but
it serves me so well in other ways that I hoped to either add
the crowsfoot graphic into the source, or revise and repurpose
an existing definition rather than abandon the use of cytoscape.

Per the guidance in the package readme, I queried the chatbot
Phind. It told me I needed to do three steps:

1. add my new arrow shape to arrow-shapes.js in the
   ..srcextensionsrendererbase folder;
2. then integrate that new style into cytoscape.js;
3. then specify my new arrow shape in the style section of my js graph file.

Unfortunately, it was not able to provide details for the second step: “integrate that new style into cytoscape”.

I tried adding this code into arrrow-shapes.js right after the
code for “chevron”. It is essentially the code for chevron with
the signs for the data points flipped (i.e., positive when negative).

I rebuilt cytoscape per the package readme.md. In my graph js file
I specified ‘source-arrow-shape’ : ‘crowsfoot’ in the style section
with the other edge preferences.

At runtime, cytoscape reported the error that ‘crowsfoot’ was not a legitimate shape.

<< start of code snippet >>
    defineArrowShape( 'crowsfoot', {
        points: [
        0, 0,
        0.15, 0.15,
        0.1, 0.2,
        0, 0.1,
        -0.1, 0.2,
        -0.15, 0.15
    ],

    gap: function( edge ){
      return 0.95 * edge.pstyle( 'width' ).pfValue * edge.pstyle( 'arrow-scale' ).value;
    }
    } );
    <<end of code snippet>>

When that didn’t work, I repurposed the specification for the “vee” arrow-shape by flipping the signs of its data points. cytoscape reports no errors, but draws nothing on the graph.

Can someone help with one or the other option, so I can meet my specification?