All files / web/src/components/create/abacus InfillControls.tsx

62.63% Statements 57/91
40% Branches 2/5
25% Functions 1/4
62.63% Lines 57/91

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 921x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 9x 9x 9x 9x 9x 9x 9x 9x               9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x                                                       9x 9x 9x 9x 9x 9x 9x 9x 9x  
'use client'
 
// InfillControls — the infill block (abacus-infill.ts), in the PRINT rail's
// "Print options" section.
//
// WHY THE PRINT RAIL. Infill is not visible in the design and does not exist on
// the paper lane: it is purely how the same object gets made — how stiff it is,
// how the beads weigh and click, how long the plate takes. It rode in the design
// rail beside the feet for a while, which put a slicer question in front of
// people printing stickers.
//
// Linked is the default because "make it sturdier" is one thought, not two. The
// split exists for the one combination worth asking for — heavy beads on a light
// frame — so the second select stays out of the way until it's asked for.
 
import { StudioCheckbox } from '@/components/studio/StudioCheckbox'
import { StudioSelect } from '@/components/studio/StudioSelect'
import { STUDIO } from '@/components/studio/theme'
import { useAbacusStudio } from './AbacusStudioContext'
import { INFILL_OPTIONS, type InfillLevel, infillOption } from './abacus-infill'
 
const NOTE = STUDIO.type.note
 
export function InfillControls() {
  const { params, set } = useAbacusStudio()
  return (
    <>
      <StudioSelect
        label={params.infill_linked ? 'infill' : 'infill — frame'}
        value={params.infill_frame}
        options={INFILL_OPTIONS.map((o) => ({ value: o.id, label: o.label }))}
        onChange={(v) => {
          set('infill_frame', v as InfillLevel)
          // While linked the beads follow the frame in the STORED value too, so
          // "set beads separately" starts the beads where the frame is and the
          // checkbox on its own never changes the print. (`set` is a functional
          // update, so the two writes compose.)
          if (params.infill_linked) set('infill_beads', v as InfillLevel)
        }}
        dataElement="abacus-infill-frame"
        dataAction="set-infill-frame"
      />
      <div data-component="InfillControls" data-element="abacus-infill-frame-note" style={NOTE}>
        {infillOption(params.infill_frame).frame}{' '}
        {params.infill_linked ? `${infillOption(params.infill_frame).beads} ` : ''}
        {infillOption(params.infill_frame).time}
      </div>
      <div data-element="abacus-infill-link">
        <StudioCheckbox
          label="Set beads separately"
          checked={!params.infill_linked}
          onChange={(separate) => set('infill_linked', !separate)}
        />
      </div>
      {!params.infill_linked && (
        <>
          <StudioSelect
            label="infill — beads"
            value={params.infill_beads}
            options={INFILL_OPTIONS.map((o) => ({ value: o.id, label: o.label }))}
            onChange={(v) => set('infill_beads', v as InfillLevel)}
            dataElement="abacus-infill-beads"
            dataAction="set-infill-beads"
          />
          <div data-component="InfillControls" data-element="abacus-infill-beads-note" style={NOTE}>
            {infillOption(params.infill_beads).beads}
          </div>
          {/* Bodies are per FILAMENT slot, so a scheme that paints the beads in
              the frame's spool leaves one body to carry one density — and the
              frame's wins. Only monochrome makes that certain, so only
              monochrome gets told. */}
          {params.color_scheme === 'monochrome' && (
            <div
              data-component="InfillControls"
              data-element="abacus-infill-monochrome-note"
              style={{ ...NOTE, color: STUDIO.color.warnInline }}
            >
              In the monochrome scheme the beads print in the frame&apos;s filament, so they take
              the frame&apos;s infill.
            </div>
          )}
        </>
      )}
      {params.feet_mode === 'printed' && (
        <div data-component="InfillControls" data-element="abacus-infill-feet-note" style={NOTE}>
          Feet always print solid.
        </div>
      )}
    </>
  )
}