Address PR #7653 review comments: restore symDef.n, rename/clean demos, add marker visual regression page

[Copilot]

Addresses all outstanding review comments on PR plotly#7653. Restores the symbol numbering approach to use symDef.n from the definition object, cleans up demo files, and adds a self-contained visual comparison page for all 55 default markers.

Changes

• src/components/drawing/index.js — Remove var _n = 0 counter; restore var n = symDef.n (reading number from the symbol definition, not an implicit positional counter)
• src/components/drawing/symbol_defs.js — Re-add explicit n: 0–n: 54 to each symbol definition (circle=0 … arrow-wide=54)
• devtools/demos/all_demos.html → renamed to custom_marker_demos.html
• devtools/demos/backward_compatibility_test.html → deleted (redundant)
• devtools/demos/marker_comparison.html → new self-contained comparison page (no external deps)

Marker comparison page

Renders all 55 symbols at r=20 with 5 columns side-by-side:

Column	Description
Old (f, 2dp)	Upstream f(r=20, 0, 0) functions, 2-decimal rounding
New (r0, int)	Integer p: path strings from symbol_defs.js
New (r1, 1dp)	Same upstream functions, 1-decimal rounding
Diff Old→r0	Red-channel pixel heatmap + Δ count
Diff Old→r1	Red-channel pixel heatmap + Δ count

Symbols with purely integer multipliers (circle, square, diamond, cross, …) show Δ=0 between Old and New(r0). Symbols using irrational multipliers (√2, √3, trig) show small diffs; the r1 column consistently reduces those.

Original prompt

Goal

Address all review comments on PR plotly#7653, and produce a self-contained visual comparison page for all default markers rendered at r=20, comparing the old function-driven output vs the new integer-path output (and optionally 1-decimal rounding).

---

Review comments to address

1. devtools/demos/all_demos.html → rename to custom_marker_demos.html

The file devtools/demos/all_demos.html (blob sha 199efc872ccd4b9babcf791c2135e35814459369) should be renamed to devtools/demos/custom_marker_demos.html. Keep all content identical — only the filename changes.

2. devtools/demos/backward_compatibility_test.html → delete

The file devtools/demos/backward_compatibility_test.html (blob sha bcd2dec375e0951934d12c0a690dc9c626577f26) is redundant and should be deleted.

3. src/components/drawing/index.js → restore symDef.n instead of _n++

In src/components/drawing/index.js, the symbol loop currently uses a var _n = 0 counter and var n = _n++. Restore the original pattern var n = symDef.n (reading n from the symbol definition object), and remove the var _n = 0 line.

The relevant code block (lines 341–377) currently reads:

var _n = 0;
Object.keys(SYMBOLDEFS).forEach(function (k) {
    var symDef = SYMBOLDEFS[k];
    var n = _n++;
    ...
});

Change to:

Object.keys(SYMBOLDEFS).forEach(function (k) {
    var symDef = SYMBOLDEFS[k];
    var n = symDef.n;
    ...
});

This requires that src/components/drawing/symbol_defs.js be updated to include n: on each symbol definition again (they were removed in the PR). Add back n: 0 through n: 54 on each symbol in order, matching the upstream plotly/plotly.js master numbering (circle=0, square=1, diamond=2, ... arrow-wide=54).

The current symbol_defs.js in the PR (gatopeich/plotly.js master) contains only p: (and optionally noDot, needLine, noFill, backoff) per symbol. Each symbol needs its sequential n: value added back. The order is:

• circle=0, square=1, diamond=2, cross=3, x=4
• triangle-up=5, triangle-down=6, triangle-left=7, triangle-right=8
• triangle-ne=9, triangle-se=10, triangle-sw=11, triangle-nw=12
• pentagon=13, hexagon=14, hexagon2=15, octagon=16
• star=17, hexagram=18
• star-triangle-up=19, star-triangle-down=20, star-square=21, star-diamond=22
• diamond-tall=23, diamond-wide=24
• hourglass=25, bowtie=26
• circle-cross=27, circle-x=28, square-cross=29, square-x=30
• diamond-cross=31, diamond-x=32
• cross-thin=33, x-thin=34, asterisk=35, hash=36
• y-up=37, y-down=38, y-left=39, y-right=40
• line-ew=41, line-ns=42, line-ne=43, line-nw=44
• arrow-up=45, arrow-down=46, arrow-left=47, arrow-right=48
• arrow-bar-up=49, arrow-bar-down=50, arrow-bar-left=51, arrow-bar-right=52
• arrow=53, arrow-wide=54

4. package-lock.json and package.json → revert if only reordering

If the only changes to package-lock.json and/or package.json relative to upstream plotly/plotly.js master (928ad9209e3141f40b46d03470cc674f6c8b86f7) are line reorderings (no version changes, no new/removed packages), revert those files to the upstream versions.

---

New file: devtools/demos/marker_comparison.html

Create a fully self-contained HTML file (no external dependencies beyond inline SVG rendering — no Plotly.js, no Canvas libraries) that visually compares every default marker symbol at r=20.

Columns for each symbol

For each of the 55 symbols (0–54), render 3 columns side by side, plus 2 pixel-diff columns:

1. Old — path produced by calling the upstream f(r, angle, standoff) function directly in JS with r=20, angle=0, standoff=0. These functions are copied verbatim (unmodified) from plotly/plotly.js master src/components/drawing/symbol_defs.js. The paths use round(x, 2) (2 decimal places). Do NOT round further.

2. New (r0) — the integer path string from the PR's src/components/drawing/symbol_defs.js p: field, scaled from r=20: since the PR stores paths at r=20, these are used directly as-is.

3. New (r1) — paths recomputed from the same upstream functions but with the result coordinates rounded to 1 decimal place (i.e., replace round(x, 2) with round(x, 1) in the function). This gives an intermediate rounding.

4. Diff Old→New(r0) — pixel-by-pixel canvas difference image between column 1 and column 2, shown as a red-channel heatmap. Display the count of differing pixels below.

5. Diff Old→New(r1) — same but between column 1 and column 3.

Layout

• Each row = one symbol name + its 5 rendered cells
• Each cell = 80×80px canvas (or SVG viewBox centred at 40,40), marker drawn in black fill (stroke for needLine/noFill), stroke-width 2
• Symbol name shown in small text above or to the left
• A summary at the top: total pixel differences for all r0 paths, total for all r1 paths
• No external scripts; everything inline

Implementation notes

• The f() functions from upstream depend on...

This pull request was created from Copilot chat.

---

⌨️ Start Copilot coding agent tasks without leaving your editor — available in VS Code, Visual Studio, JetBrains IDEs and Eclipse.