Draw across a panel layout

A cut-and-sewn garment is printed as panels sewn together. To run one artwork unbroken across their seams, name one of the blank’s panel layouts in place of placementId: its name, its canvas at the size you sell, where each window is cut from it, and on a garment whose panels change with its size, the size that canvas is at (variantRow): the proof and the designs are made at it. To show the design on the blank’s photos, add how each window’s piece is cut and turned (srcRectInFile, rotationDeg, mirrored) and the size of each placement’s print (prints). A designer link’s page reads all of these from its link.

blankId: 'blank_hoodie',
panelLayout: {
  name: 'All-over',
  canvasWidthMm: 880,
  canvasHeightMm: 550,
  variantRow: { Size: 'L' },
  focusPlacementId: 'front',
  windows: [
    {
      placementId: 'front', placementName: 'Front', piece: 'Front',
      xMm: 0, yMm: 0, widthMm: 440, heightMm: 550,
      srcRectInFile: { xMm: 0, yMm: 0, widthMm: 440, heightMm: 550 },
      rotationDeg: 0, mirrored: false,
    },
    {
      placementId: 'sleeve', placementName: 'Sleeve', piece: 'Left',
      xMm: 440, yMm: 0, widthMm: 440, heightMm: 550,
      srcRectInFile: { xMm: 0, yMm: 0, widthMm: 440, heightMm: 550 },
      rotationDeg: 0, mirrored: false,
    },
  ],
  prints: [
    { placementId: 'front', widthMm: 440, heightMm: 550 },
    { placementId: 'sleeve', widthMm: 440, heightMm: 550 },
  ],
},

With prints, the preview is the blank’s photos: every view of a placement the layout cuts is drawn with each placement’s print cut from the canvas, in one variant at the size the layout is drawn at (the first of variants there, when you pass them), so no option is offered to choose, and every edit redraws them all. The canvas is not offered as a view, and renderTemplate() with a viewId rejects with a TypeError. Without prints, on a blank with no photos, or with no variant at the layout’s size, the preview is the layout’s canvas, with each window’s outline over it, so the customer sees where each panel is cut. approve() makes one proof of the whole canvas, and its token commits on your server at POST /v1/designs/layout, one design per placement. commit() makes those designs at once: it resolves with the first placement’s, and with one entry per placement under sides. A layout is drawn on its canvas alone: printSizes, mockups or placements beside it are refused with a TypeError at mount.

A picture the template lets the customer move anywhere starts centred on the layout’s focus placement (focusPlacementId, the first window’s placement when you name none), fitted to the whole canvas, while its fit shows the whole picture, so it runs onto the pieces around the focus placement; one that fills the frame covers the whole canvas, as all-over art does. The form’s Place your picture offers Centre on with a tile per placement of the layout, which centres the picture on that placement’s print area at the size it has; a Size slider, where 100 % is the picture fitted to the whole canvas (so filling the frame reads 100 %), sizing it about its centre from 5 % to 200 %; and nudges that move it 1 cm on the print. A layout of one placement measures the size against that placement instead, from 20 % to 300 %. Its Reset puts it back on the focus placement at 100 %. On the blank’s photos the picture is dragged to move it across the seams, where it snaps to each placement’s centre lines, or dragged by a corner to size it. Its ring and corner handles show while it is dragged or sized, and at all times with showPlacementFrame. Placing it writes the layer’s transform, as a drag does, so getState(), the proof and every placement’s design carry it. A picture whose crop is offered is moved inside its frame (setCropMode) on the photos too: the frame is drawn in each region the framed part of the canvas prints in, through its window, and a drag on any of those pieces moves the picture as it would on the canvas.