Allow custom SVG marker functions directly as marker.symbol values

[Copilot]

Simplified Custom Marker API

This PR enables passing custom functions directly as marker.symbol values to create custom SVG marker shapes for scatter plots and related trace types, without requiring any registration step.

Changes Made

Core Implementation (src/components/drawing/index.js)

• Modified makePointPath() to accept either a symbol number or a custom function
• Updated singlePointStyle() to detect function symbols and pass them through directly
• Updated selectedPointStyle() to handle function symbols
• Added function check in backoff calculation to avoid calling symbolNumber() on custom functions

Tests (test/jasmine/tests/drawing_test.js)

• Tests for passing functions as marker.symbol
• Tests for arrays of custom functions
• Tests for mixing custom functions with built-in symbols

Documentation

• CUSTOM_MARKER_FUNCTIONS.md: API reference with examples
• devtools/custom_marker_demo.html: Interactive demo

Usage

// Define custom marker function
function heartMarker(r, angle, standoff) {
    var x = r * 0.6, y = r * 0.8;
    return 'M0,' + (-y/2) + 'C' + (-x) + ',' + (-y) + ' ' + 
           (-x*2) + ',' + (-y/3) + ' ' + (-x*2) + ',0' +
           'C' + (-x*2) + ',' + (y/2) + ' 0,' + (y) + ' 0,' + (y*1.5) +
           'C0,' + (y) + ' ' + (x*2) + ',' + (y/2) + ' ' + (x*2) + ',0' +
           'C' + (x*2) + ',' + (-y/3) + ' ' + (x) + ',' + (-y) + ' 0,' + (-y/2) + 'Z';
}

// Pass function directly as marker.symbol
Plotly.newPlot('div', [{
    type: 'scatter',
    mode: 'markers',
    marker: {
        symbol: heartMarker,  // No registration needed!
        size: 15
    }
}]);

Functions can be used in arrays and mixed with built-in symbol names:

marker: {
    symbol: ['circle', heartMarker, 'square', heartMarker]
}

Benefits

• ✅ Simpler - no registration required
• ✅ More flexible - functions can be defined inline or reused
• ✅ Works with arrays of symbols
• ✅ Mixes seamlessly with built-in symbol names
• ✅ Fully backward compatible

Original prompt

I want to add custom SVG markers to the scatter plot (at least) here by having a function like this:

function add_custom_marker(name, fun) {
const drawing = window.Drawing;
if (name in drawing.symbolNames) return;
const n = drawing.symbolNames.length;
const symDef = { f:fun, };

drawing.symbolList.push(n, String(n), name, n + 100, String(n + 100));
drawing.symbolNames[n] = name;
drawing.symbolFuncs[n] = symDef.f;

return n;

}

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[gatopeich]

@copilot It would be simpler to pass the custom symbol function directly instead of symbol name. Then the drawing code can check if "symbol" attribute is callable, and call it instead of looking into the index.

[Copilot]

@copilot It would be simpler to pass the custom symbol function directly instead of symbol name. Then the drawing code can check if "symbol" attribute is callable, and call it instead of looking into ...

Good point! I've simplified the implementation to allow passing custom marker functions directly as marker.symbol values.

The new approach:

• No registration needed - just pass the function directly
• Works with arrays: symbol: [myFunc1, 'circle', myFunc2]
• Much simpler API overall

Example:

function customMarker(r) {
    return 'M' + r + ',0L0,' + r + 'L-' + r + ',0L0,-' + r + 'Z';
}

Plotly.newPlot('div', [{
    marker: { symbol: customMarker }  // Direct function!
}]);

Changes in commit 86086e0.

[gatopeich]

Check if end symbol is function before calling symbolNumber() instead of falsy check

[gatopeich]

@copilot address this

[Copilot]

Fixed in 099b0d6. Now checking typeof endMarkerSymbol !== 'function' before calling symbolNumber(), consistent with how it's handled elsewhere in the code.

[gatopeich]

Just add check && typeof endMarkerSymbol !== 'function' instead of this messy change.

[Copilot]

Simplified in 42ab66d. Now using the ternary operator with the function check instead of introducing extra variables.

[gatopeich]

@copilot Remove "|| 0" from src/components/drawing/index.js:1509

[gatopeich]

Okay we'll leave the additional falsy check since it was present in other places too.