107 lines
4.5 KiB
JavaScript
107 lines
4.5 KiB
JavaScript
import { LANES, MAKE_OBJECT } from './lib/scaffold.mjs';
|
|
|
|
/** Draw order: symbols always above sprites, `z` above hierarchy order. */
|
|
export async function drawing(t) {
|
|
const { check, json, shot, click, locate, typeText, press, undo, mutate, select, object } = t;
|
|
const orderOfCrates = () => json(`__gm.drawOrder().filter(id => id === 'o1' || id === 'o2')`);
|
|
|
|
// 5a. Symbols stay on top: put the camera first in the hierarchy (drawn first) and a crate
|
|
// right on top of its icon → the icon must still be drawn above the sprite.
|
|
await mutate(`
|
|
const objs = __gm.state.activeScene.objects;
|
|
const cam = objs.splice(objs.findIndex(o => o.id === 'o3'), 1)[0];
|
|
objs.unshift(cam);
|
|
const crate = objs.find(o => o.id === 'o1');
|
|
crate.position.x = 0; crate.position.y = 0;
|
|
__gm.state.select(null)`);
|
|
const layers = await json(`[__gm.layerOf('o3'), __gm.layerOf('o1'), __gm.layerOf('o2')]`);
|
|
check(
|
|
'camera symbol is drawn in the overlay layer above sprites',
|
|
JSON.stringify(layers) === '["overlay","objects","objects"]',
|
|
JSON.stringify(layers),
|
|
);
|
|
await shot('13-symbol-on-top');
|
|
|
|
// 5b. Z-order: put both crates on the origin. With equal z the hierarchy order wins
|
|
// (o1 before o2 → o2 on top); raising o1's z draws it above o2; undo restores it.
|
|
await mutate(
|
|
`const o2 = __gm.state.activeScene.objects.find(o => o.id === 'o2'); o2.position.x = 0; o2.position.y = 0`,
|
|
);
|
|
check(
|
|
'equal z keeps hierarchy order',
|
|
JSON.stringify(await orderOfCrates()) === '["o1","o2"]',
|
|
JSON.stringify(await orderOfCrates()),
|
|
);
|
|
await select({ kind: 'object', holderId: 'scene1', objectId: 'o1' });
|
|
const zLabel = await locate('Z');
|
|
await click(zLabel.x + 160, zLabel.y); // plain click → text editing with everything selected
|
|
await typeText('5');
|
|
await press('Enter');
|
|
check(
|
|
'Z field sets position.z',
|
|
(await object('o1')).position.z === 5,
|
|
`z=${(await object('o1')).position.z}`,
|
|
);
|
|
check(
|
|
'higher z is drawn on top',
|
|
JSON.stringify(await orderOfCrates()) === '["o2","o1"]',
|
|
JSON.stringify(await orderOfCrates()),
|
|
);
|
|
await shot('14-z-order');
|
|
await undo();
|
|
check('undo restores z', (await object('o1')).position.z === 0, `z=${(await object('o1')).position.z}`);
|
|
|
|
// 5c. The symbols are SVG files (#175): one of each in a lane of its own, read where each has a
|
|
// solid colour of the theme. Offsets are in world units from the symbol's centre.
|
|
const PLACED = { 's-beh': 'mover', 's-box': 's-box-a', 's-rb': 's-rb-a', 's-cam': 'cam', 's-pt': 's-pt-a' };
|
|
const SPOTS = [
|
|
['s-beh', 8, 0, '#b066ff'],
|
|
['s-beh', -6, -3, '#ffffff'],
|
|
['s-box', -4, -4, '#3fb8c9'],
|
|
['s-box', 4, 4, '#3fb8c9'],
|
|
['s-rb', 0, 3, '#4fd18b'],
|
|
['s-rb', 0, -4, '#4fd18b'],
|
|
['s-cam', 0, 0, '#8a90a0'],
|
|
['s-cam', 17, 0, '#8a90a0'],
|
|
['s-pt', 12.728, 12.728, '#c26a1f'],
|
|
['s-pt', -12.728, -12.728, '#c26a1f'],
|
|
];
|
|
const ids = Object.keys(PLACED);
|
|
await mutate(`
|
|
const p = __gm.state.project;
|
|
const scene = __gm.state.activeScene;
|
|
${MAKE_OBJECT}
|
|
p.assets.push(
|
|
{ id: 's-box-a', type: 'container', name: 's-box-a', props: { enabled: true }, objects: [] },
|
|
{ id: 's-rb-a', type: 'rigidbody', name: 's-rb-a', props: { bodyType: 'static' } },
|
|
{ id: 's-pt-a', type: 'particles', name: 's-pt-a', props: {}, graph: { nodes: [], edges: [] } },
|
|
);
|
|
Object.entries(${JSON.stringify(PLACED)}).forEach(([id, assetId], i) => {
|
|
const o = make(id, assetId, '', ${LANES.symbols}, id);
|
|
o.position.x = (i - 2) * 120;
|
|
scene.objects.push(o);
|
|
});
|
|
__gm.state.select(null);
|
|
__gm.lookAt(0, ${LANES.symbols});`);
|
|
const wrong = await json(`(() => {
|
|
const zoom = __gm.objectRect('s-beh').w / 28;
|
|
return ${JSON.stringify(SPOTS)}.flatMap(([id, dx, dy, want]) => {
|
|
const r = __gm.objectRect(id);
|
|
const got = __gm.pixelAt(Math.floor(r.x + dx * zoom), Math.floor(r.y + dy * zoom));
|
|
return got === want ? [] : [id + ' ' + dx + ',' + dy + ': ' + got + ' != ' + want];
|
|
});
|
|
})()`);
|
|
check(
|
|
'every symbol draws its SVG in the theme colour',
|
|
wrong.length === 0,
|
|
wrong.join('; ') || `${SPOTS.length} spots`,
|
|
);
|
|
await shot('15-symbols');
|
|
await mutate(`
|
|
const p = __gm.state.project;
|
|
const scene = __gm.state.activeScene;
|
|
scene.objects = scene.objects.filter((o) => !${JSON.stringify(ids)}.includes(o.id));
|
|
p.assets = p.assets.filter((a) => !['s-box-a', 's-rb-a', 's-pt-a'].includes(a.id));
|
|
__gm.lookAt(0, 0);`);
|
|
}
|