Skip to content

Improve coordinate system node contrast with shadow outlines #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
veillette merged 1 commit into from
Feb 22, 2026
Merged

Improve coordinate system node contrast with shadow outlines #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 11 additions & 5 deletions src/TrackLabColors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,16 +89,16 @@ const TrackLabColors = {
new Color(160, 160, 180), // Darker stroke for light panel
),

// Axes (X red, Y green) - semi-transparent for better video visibility
// Axes (X red, Y green)
axisXColorProperty: profileColor(
"axisX",
new Color(255, 68, 68, 0.5), // 50% opacity
new Color(238, 51, 51, 0.5),
new Color(255, 68, 68, 0.85),
new Color(238, 51, 51, 0.85),
),
axisYColorProperty: profileColor(
"axisY",
new Color(68, 204, 68, 0.5), // 50% opacity
new Color(51, 187, 51, 0.5),
new Color(68, 204, 68, 0.85),
new Color(51, 187, 51, 0.85),
),

// Calibration tool (bright colors with shadows for visibility on all backgrounds)
Expand Down Expand Up @@ -171,6 +171,12 @@ const TrackLabColors = {
new Color(119, 119, 119, 0.8), // 80% opacity stroke for visibility
new Color(70, 70, 70, 0.8),
),
// Shadow/outline stroke for coordinate system (contrast on all backgrounds)
coordShadowStrokeProperty: profileColor(
"coordShadowStroke",
new Color(0, 0, 0, 0.8), // Dark shadow for contrast on light backgrounds
new Color(0, 0, 0, 0.8),
),

// Buttons
buttonBaseDarkProperty: profileColor(
Expand Down
40 changes: 38 additions & 2 deletions src/screen-name/view/CoordinateSystemNode.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,17 @@ const FONT = new PhetFont({ size: 14, weight: "bold" });
const ARROW_HEAD_WIDTH = 12;
const ARROW_HEAD_HEIGHT = 10;
const ARROW_TAIL_WIDTH = 3;
const SHADOW_ARROW_HEAD_WIDTH = 16; // wider shadow for contrast outline
const SHADOW_ARROW_HEAD_HEIGHT = 14;
const SHADOW_ARROW_TAIL_WIDTH = 7;
const LABEL_OFFSET_X = 6; // gap between arrow tip and axis label
const LABEL_OFFSET_Y = 4; // gap between arrow tip and axis label
const LABEL_STROKE_WIDTH = 0.6; // outline width for axis label text
const HANDLE_RADIUS = 8; // rotation handle disk radius
const HANDLE_TOUCH_DILATION = 12; // extra pixels for easier pickup (mouseArea/touchArea)
const HANDLE_LINE_WIDTH = 1.5;
const ORIGIN_RADIUS = 5; // origin marker circle radius
const ORIGIN_SHADOW_LINE_WIDTH = 4; // wider outline for contrast
const ORIGIN_TOUCH_DILATION = 12; // extra pixels for easier pickup (mouseArea/touchArea)
const ORIGIN_LINE_WIDTH = 1;
const TRANSLATE_DRAG_SPEED = 300; // pixels/s for normal keyboard drag
Expand Down Expand Up @@ -53,6 +58,27 @@ export class CoordinateSystemNode extends Node {
// ── Rotating node: axes + rotation handle ─────────────────────────────
const rotatingNode = new Node();

// ── Shadow arrows (rendered first, underneath) for contrast on all backgrounds
rotatingNode.addChild(
new ArrowNode(0, 0, ARROW_LENGTH, 0, {
fill: TrackLabColors.coordShadowStrokeProperty,
stroke: null,
headWidth: SHADOW_ARROW_HEAD_WIDTH,
headHeight: SHADOW_ARROW_HEAD_HEIGHT,
tailWidth: SHADOW_ARROW_TAIL_WIDTH,
}),
);
rotatingNode.addChild(
new ArrowNode(0, 0, 0, -ARROW_LENGTH, {
fill: TrackLabColors.coordShadowStrokeProperty,
stroke: null,
headWidth: SHADOW_ARROW_HEAD_WIDTH,
headHeight: SHADOW_ARROW_HEAD_HEIGHT,
tailWidth: SHADOW_ARROW_TAIL_WIDTH,
}),
);

// ── Main axis arrows (rendered on top of shadows)
// X axis arrow (horizontal, pointing right)
rotatingNode.addChild(
new ArrowNode(0, 0, ARROW_LENGTH, 0, {
Expand All @@ -75,10 +101,13 @@ export class CoordinateSystemNode extends Node {
}),
);

// ── Axis labels with outline stroke for contrast
rotatingNode.addChild(
new Text(coordStrings.xAxisLabelStringProperty, {
font: FONT,
fill: TrackLabColors.axisXColorProperty,
stroke: TrackLabColors.coordShadowStrokeProperty,
lineWidth: LABEL_STROKE_WIDTH,
left: ARROW_LENGTH + LABEL_OFFSET_X,
centerY: 0,
}),
Expand All @@ -88,6 +117,8 @@ export class CoordinateSystemNode extends Node {
new Text(coordStrings.yAxisLabelStringProperty, {
font: FONT,
fill: TrackLabColors.axisYColorProperty,
stroke: TrackLabColors.coordShadowStrokeProperty,
lineWidth: LABEL_STROKE_WIDTH,
centerX: 0,
bottom: -ARROW_LENGTH - LABEL_OFFSET_Y,
}),
Expand All @@ -110,7 +141,12 @@ export class CoordinateSystemNode extends Node {
handleDisk.touchArea = handleTouchArea;
rotatingNode.addChild(handleDisk);

// ── Origin marker ─────────────────────────────────────────────────────
// ── Origin marker with shadow outline for contrast ──────────────────
const originShadow = new Circle(ORIGIN_RADIUS, {
stroke: TrackLabColors.coordShadowStrokeProperty,
lineWidth: ORIGIN_SHADOW_LINE_WIDTH,
fill: "transparent",
});
const originMarker = new Circle(ORIGIN_RADIUS, {
fill: TrackLabColors.originFillProperty,
stroke: TrackLabColors.originStrokeProperty,
Expand All @@ -119,7 +155,7 @@ export class CoordinateSystemNode extends Node {

// ── Position wrapper: translates with model.coordOriginProperty ───────
const positionNode = new Node({
children: [rotatingNode, originMarker],
children: [rotatingNode, originShadow, originMarker],
cursor: "move",
tagName: "div",
focusable: true,
Expand Down