Implementing triangle-tee arrow shape variants

@maxkfranz @ugurdogrusoz @gbader @jvwong @metincansiper @IgorRodchenkov

Note

This is a translation of my notes from talking with Max about how to implement custom arrow shapes. They represent a skeleton implementation and they are not fully fleshed out.

Requirements

Custom arrow shapes are needed for cytoscape.js.

Here is an example arrow shape that is required:

Implementation Notes

Draw the arrow-tee in phases

Split up the drawing execution into phases.

For example:

• phase 0 draws the arrow head
• phase 1 draws the arrow edge connector
• phase 2 draws extra lines that represent the variations in the arrow-tee Each portion of the shape can be rendered differently via config values associated with each phase.

Phase config values

• multiphased: boolean representing whether this shape should be drawn in multiple phases or not
• matchEdgeWidth: list of n booleans corresponding to the n drawing phases for the arrow shape. If matchEdgeWidth[n-1] is true, then phase n-1 will be drawn with the same line width as the edge it is attached to.
• forceStroke: boolean to override a shape style and render it using strokes instead of fill. (Used for special cases such as a line between two points. In this case, you need to draw it using a stroke)

Other remarks

The collision function for necessary stimulation could be improved.

    collide: function( x, y, size, angle, translation, padding ){
      var triPts = pointsToArr( transformPoints( this.points, size + 2 * padding, angle, translation ) );
      var teePts = pointsToArr( transformPoints( this.pointsTee, size + 2 * padding, angle, translation ) );

      var inside = math.pointInsidePolygonPoints( x, y, triPts ) || math.pointInsidePolygonPoints( x, y, teePts );

      return inside;
    },

math.inlineVicinity and math.squareDistanceToFiniteLine could be better suited for detecting collisions.

pointsTee should be renamed to pointsLine or something more descriptive – the points currently do not represent a tee.

A generic name for this type of arrow should be considered over the biology specific necessary stimulation term. arrow-tee-stripe, arrow-tee-cross are potential names.

[d2fong]

Okay, I have updated the docs, should I close this issue?
(I have just added triangle-cross to the list of documented arrow shapes. Is that suffcient?)

[maxkfranz]

Yes, I think that’s all