feuerwerk/tools/e2e/47-vectorart.mjs

import { colourDistance } from '../lib/harness.mjs';
import { LANES, MAKE_OBJECT } from './lib/scaffold.mjs';

/**
 * Vector art (#129), stages 2 and 3: the drawing is rasterised and travels the picture path of #185. What
 * only a running editor can show – the shapes are painted by the GPU, so what a check reads here is
 * the picture itself: the fill of a shape, the hole a ring inside it cuts, which of two shapes lies
 * on top, the outline along a ring, and that a changed drawing becomes a new picture while the old
 * one is let go.
 *
 * The shapes of the first blocks are put into the model rather than drawn with the mouse: those
 * checks are about the rasteriser, not about the tool. From 47c on it is the tool that is measured –
 * the pen puts points down, the arrow drags one and takes one away, and what comes out is read from
 * the model, which is the only place a point's coordinates exist exactly.
 */

const CANVAS = 256;
const FIELD = '#2e8b57';
const BADGE = '#dd4433';
const OUTLINE = '#1133ee';
const REDRAWN = '#e8c020';

/** The square field with a square hole in it, and a badge with an outline drawn over it. */
const SHAPES = [
  {
    id: 'va-field',
    name: 'Field',
    fill: 0x2e8b57,
    opacity: 1,
    rings: [
      {
        closed: true,
        points: [
          { x: 16, y: 16 },
          { x: 240, y: 16 },
          { x: 240, y: 240 },
          { x: 16, y: 240 },
        ],
      },
      {
        closed: true,
        points: [
          { x: 96, y: 96 },
          { x: 160, y: 96 },
          { x: 160, y: 160 },
          { x: 96, y: 160 },
        ],
      },
    ],
  },
  {
    id: 'va-badge',
    name: 'Badge',
    fill: 0xdd4433,
    opacity: 1,
    stroke: { color: 0x1133ee, width: 10 },
    rings: [
      {
        closed: true,
        points: [
          { x: 176, y: 32 },
          { x: 232, y: 32 },
          { x: 232, y: 88 },
          { x: 176, y: 88 },
        ],
      },
    ],
  },
];

export async function vectorArt(t) {
  const { check, click, doubleClick, drag, clickText, json, evaluate, mutate, settle, sleep, shot, showTab } =
    t;
  const Y = LANES.vectorArt;

  // 47a. A drawing on a sprite: what the rasteriser put on the GPU, read off the screen.
  await mutate(`
    const project = __gm.state.project;
    const scene = __gm.state.activeScene;
    ${MAKE_OBJECT}
    project.assets.push({ id: 'va-art', type: 'vectorart', name: 'Emblem',
      props: { canvasWidth: ${CANVAS}, canvasHeight: ${CANVAS} }, shapes: ${JSON.stringify(SHAPES)} });
    const sprite = structuredClone(project.assets.find((a) => a.id === 'crate'));
    sprite.id = 'va-sprite';
    sprite.name = 'Emblem sprite';
    sprite.props = { ...sprite.props, width: ${CANVAS}, height: ${CANVAS}, color: 0xffffff,
      texture: 'va-art', shader: '' };
    project.assets.push(sprite);
    scene.objects.push(make('va-object', 'va-sprite', '', ${Y}, 'Emblem object'));
    __gm.state.select(null)`);
  await showTab('scene');
  await evaluate(`__gm.lookAt(0, ${Y})`);
  await settle();
  await sleep(300);

  const picture = await json("__gm.drawnPicture('va-art')");
  check(
    'the drawing lies on the GPU at twice its canvas, and measures the canvas',
    Boolean(picture) &&
      picture.width === CANVAS &&
      picture.height === CANVAS &&
      picture.pixelWidth === CANVAS * 2 &&
      picture.pixelHeight === CANVAS * 2 &&
      picture.kept,
    JSON.stringify(picture),
  );

  const box = await json("__gm.objectRect('va-object')");
  check('the sprite wearing the drawing is on screen', Boolean(box) && box.w > 32, JSON.stringify(box));
  if (!box) return;
  /**
   * A point of the canvas, in canvas pixels, as the colour on screen. `objectRect` answers with the
   * middle of the object, not its corner, so the canvas is measured out from there.
   */
  const at = (cx, cy) =>
    json(
      `__gm.pixelAt(${Math.round(box.x + (cx / CANVAS - 0.5) * box.w)}, ${Math.round(box.y + (cy / CANVAS - 0.5) * box.h)})`,
    );

  const field = await at(48, 200);
  check('the sprite shows the fill of the first shape', colourDistance(field, FIELD) < 14, field);

  const outside = await json(`__gm.pixelAt(${Math.round(box.x - box.w)}, ${Math.round(box.y)})`);
  // Off the middle of the hole: the scene's grid lines cross exactly there, and a grid line is not
  // the background either – the check would then read the wrong colour for the right reason.
  const hole = await at(112, 148);
  check(
    'the ring inside the shape is a hole – the scene shows through it',
    colourDistance(hole, outside) < 14 && colourDistance(hole, FIELD) > 40,
    JSON.stringify({ hole, outside }),
  );

  const badge = await at(204, 60);
  check('the shape drawn later lies over the one before it', colourDistance(badge, BADGE) < 14, badge);

  const outline = await at(176, 60);
  check('the outline is drawn along the ring', colourDistance(outline, OUTLINE) < 24, outline);

  await shot('47-vector-art');

  // 47b. A changed drawing is a new picture (#185): the key moves on, the old one is let go.
  const before = picture?.file;
  await mutate(`
    const art = __gm.state.project.assets.find((a) => a.id === 'va-art');
    art.shapes[0].fill = 0x${REDRAWN.slice(1)}`);
  await settle();
  await sleep(300);
  const after = await json("__gm.drawnPicture('va-art')");
  const oldOne = before ? await json(`__gm.textureFilter(${JSON.stringify(before)})`) : null;
  check(
    'a changed drawing gets a key of its own and the old picture is freed',
    Boolean(after) && after.file !== before && after.kept && oldOne === null,
    JSON.stringify({ before, after: after?.file, oldOne }),
  );
  const repainted = await at(48, 200);
  check('the sprite shows the changed fill', colourDistance(repainted, REDRAWN) < 14, repainted);

  // 47c. The tab: the pen draws a triangle and closes it.
  await evaluate("__gm.openDocument('asset:va-art')");
  await settle();
  const info = await json('__gm.vectorArt.info()');
  check(
    'the Vector art tab shows the drawing and its canvas',
    (await json('__gm.vectorArt.current()')) === 'va-art' && info.startsWith(`${CANVAS} \u00d7 ${CANVAS} px`),
    JSON.stringify({ current: await json('__gm.vectorArt.current()'), info }),
  );

  await clickText('Pen');
  check('the pen is the tool a press uses', (await json('__gm.vectorArt.tool()')) === 'pen');

  const TRIANGLE = [
    { x: 40, y: 40 },
    { x: 110, y: 40 },
    { x: 110, y: 110 },
  ];
  const screen = [];
  for (const point of TRIANGLE) {
    const at = await json(`__gm.vectorArt.pointAt(${point.x}, ${point.y})`);
    screen.push(at);
    await click(at.x, at.y);
  }
  // The first point again: that is what closes a line, and the pen has nothing open afterwards.
  await click(screen[0].x, screen[0].y);
  await settle();

  const drawn = (await json("__gm.vectorArt.shapes('va-art')")).at(-1);
  const near = (a, b) => Math.abs(a - b) <= 1.5;
  check(
    'the pen drew a closed shape of three points where it was clicked',
    Boolean(drawn) &&
      drawn.rings.length === 1 &&
      drawn.rings[0].closed &&
      drawn.rings[0].points.length === 3 &&
      drawn.rings[0].points.every((p, i) => near(p.x, TRIANGLE[i].x) && near(p.y, TRIANGLE[i].y)) &&
      (await json('__gm.vectorArt.drawing()')) === false,
    JSON.stringify(drawn?.rings?.[0]),
  );

  // 47d. The arrow: a point is dragged, one is made round, one is taken away.
  await clickText('Select');
  const corner = await json(`__gm.vectorArt.pointAt(${TRIANGLE[1].x}, ${TRIANGLE[1].y})`);
  const target = await json(`__gm.vectorArt.pointAt(180, 40)`);
  await drag(corner.x, corner.y, target.x, target.y);
  const moved = (await json("__gm.vectorArt.shapes('va-art')")).at(-1).rings[0].points[1];
  check(
    'dragging a point writes it where the pointer left it',
    near(moved.x, 180) && near(moved.y, 40),
    JSON.stringify(moved),
  );

  const pulled = await json(`__gm.vectorArt.pointAt(180, 40)`);
  await click(pulled.x, pulled.y, 'left', { alt: true });
  const smooth = (await json("__gm.vectorArt.shapes('va-art')")).at(-1).rings[0].points[1];
  check(
    'Alt on a point makes it round – it grows the two handles of a curve',
    Boolean(smooth.in) && Boolean(smooth.out),
    JSON.stringify(smooth),
  );

  await shot('47-vector-tab');

  const firstPoint = await json(`__gm.vectorArt.pointAt(${TRIANGLE[0].x}, ${TRIANGLE[0].y})`);
  await doubleClick(firstPoint.x, firstPoint.y);
  const left = (await json("__gm.vectorArt.shapes('va-art')")).at(-1).rings[0].points;
  check(
    'a double-click takes a point away',
    left.length === 2 && near(left[0].x, 180),
    JSON.stringify(left.map((p) => [Math.round(p.x), Math.round(p.y)])),
  );

  // The drawing is a picture like any other: what the tool changed reaches the sprite by itself.
  const undrawn = await json("__gm.drawnPicture('va-art')");
  check(
    'what was drawn in the tab is the picture the sprite wears',
    Boolean(undrawn) && undrawn.file !== after?.file && undrawn.kept,
    JSON.stringify({ was: after?.file, now: undrawn?.file }),
  );
}