adminandClaude Opus 5.5
495d87847d
A collider filled its area with a faint green in the scene view all the time. It lay over every sprite a collider sits on and made the art look washed out. The outline alone shows where a collider is. The area only matters while one works on that collider. - drawItem takes a selected flag. Only a selected collider is filled, every other one is drawn as its outline. - The fill is stronger than before, alpha 0.3 instead of 0.12, so the selected area is easy to see. The value is COLLIDER_FILL_ALPHA in src/viewport/symbols.ts. - The scene view says what is selected through isSelected. The game view keeps the default and never fills. - Only the collider object itself counts. Selecting its body leaves the area unfilled. Tests: - 2 new unit tests in tests/viewport/collider-color.test.ts read the Pixi instructions: outline only when not selected, fill at 0.3 and outline when selected. - Counter check: with the fill drawn regardless of selection the outline-only test fails. The original is back per cmp. - ./check.sh: 158 files, 2334 tests, CHECK EXIT 0. - e2e 1-17,28-30: no FAIL. e2e 39-43: ALL PASSED, 145 checks. A first run left out 39, which 40 builds on, and failed 8 checks in 40 for the missing tile only. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
56 lines
2.2 KiB
TypeScript
56 lines
2.2 KiB
TypeScript
import { describe, expect, it } from 'vitest';
|
|
import { IDENTITY } from '../../src/core/model/matrix';
|
|
import type { PropertyBag } from '../../src/core/model/Properties';
|
|
import { colliderShape } from '../../src/core/properties/collider';
|
|
import { Theme } from '../../src/ui';
|
|
import { Graphics } from 'pixi.js';
|
|
import type { DrawItem } from '../../src/viewport/items';
|
|
import { COLLIDER_FILL_ALPHA, colliderColor, drawItem } from '../../src/viewport/symbols';
|
|
|
|
const colorOf = (props: PropertyBag) => colliderColor(colliderShape(props, IDENTITY), props);
|
|
|
|
describe('the colour of a collider in the scene view, outline and icon alike', () => {
|
|
it('is the collider colour, the trigger colour for a trigger, red for a shape that collides with nothing', () => {
|
|
expect(colorOf({ shape: 'box', width: 40, height: 40 })).toBe(Theme.colors.collider);
|
|
expect(colorOf({ shape: 'circle', radius: 20, isTrigger: true })).toBe(Theme.colors.trigger);
|
|
const bowtie = [
|
|
{ x: -10, y: -10 },
|
|
{ x: 10, y: 10 },
|
|
{ x: 10, y: -10 },
|
|
{ x: -10, y: 10 },
|
|
];
|
|
expect(colorOf({ shape: 'polygon', points: bowtie })).toBe(Theme.colors.danger);
|
|
expect(colorOf({ shape: 'polygon', points: bowtie, isTrigger: true })).toBe(Theme.colors.danger);
|
|
});
|
|
});
|
|
|
|
describe('the area of a collider in the scene view', () => {
|
|
const item = {
|
|
id: 'c',
|
|
type: 'collider',
|
|
m: IDENTITY,
|
|
props: { shape: 'box', width: 40, height: 20 },
|
|
frame: null,
|
|
} as unknown as DrawItem;
|
|
const actions = (selected: boolean) => {
|
|
const node = new Graphics();
|
|
drawItem(node, item, { w: 40, h: 20 }, 1, selected);
|
|
return node.context.instructions.map((i) => ({
|
|
action: i.action,
|
|
alpha: (i.data.style as { alpha: number }).alpha,
|
|
}));
|
|
};
|
|
|
|
it('is only an outline while the collider is not selected', () => {
|
|
expect(actions(false)).toEqual([{ action: 'stroke', alpha: 1 }]);
|
|
});
|
|
|
|
it('is filled, more strongly than before, once the collider itself is selected', () => {
|
|
expect(COLLIDER_FILL_ALPHA).toBeGreaterThan(0.12);
|
|
expect(actions(true)).toEqual([
|
|
{ action: 'fill', alpha: COLLIDER_FILL_ALPHA },
|
|
{ action: 'stroke', alpha: 1 },
|
|
]);
|
|
});
|
|
});
|