The render plan: data in, slides out

helloDeck hard-codes one text box. A real generator needs to draw whatever the layout engine decides. So between "working out the layout" and "writing the file" we put a simple data format: the render plan.

{ type: "rect", x: 40, y: 40,
  w: 300, h: 140, fill: "#EEF2FF" }

{ type: "text", x: 60, y: 60,
  w: 260, h: 34, fontSize: 28,
  text: "Hello, slides" }

{ type: "text", x: 60, y: 104,
  w: 260, h: 60, fontSize: 16,
  text: "Every number is…" }

Why a plan in the middle?

• One job per file. The layout engine decides positions. pptx.js only draws. Neither needs to know how the other works.
• You can look at it. A plan is plain data, so the browser can draw a preview from it, and tests can check it, without opening PowerPoint. The Slides tab in these exercises draws plans.
• Other outputs later. The same plan could become a PDF or an image by writing a different drawer.

The format

A plan has slides. Each slide has a background, optional notes, and elements. There are two kinds of element, and every number is in points:

• rect: a filled rectangle with x, y, w, h and fill.
• text: a text box with x, y, w, h, the text (or already-wrapped lines), fontSize, bold, color, font, align and valign.

Your job in drawElement is to convert the box from points to inches with pointsToInches from units.js, then call addShape or addText.