feat: Support notes in title macro

This started out as a fix for #5753 after I felt the approach in #5760
was not the best way to handle this.

The problem lies in the way the cutlist data is added to the pattern by
the title plugin. The whole cutlist thing was added by a less
experienced contributor, and they were a little too focussed on what
they were trying to accomplish, rather than keeping an eye on the big
picture.

In this case, a bunch of points get added to the part to anchor all of
the text for the cutlist. This causes problems when inheriting parts
because points are added per material, and now we don't know what
materials were used and how to remove these points.

I appreciate @woutervdub effort to resolve this in #5760 but as I
mentioned above, I don't love the approach.
Rather than finding a clever way to remove these points, I am of the
opinion that they should never have been added in the first place.

Specifically, all we are doing is adding one or more lines of text. The
idea that you need multiple points for this is an incorrect assumption,
and therein lies the root of this problem.

So, this refactor adds support to the title macro for 'notes'. These
notes will be added below the title. The cutlist info is now just
prepended to the notes. So it stops being something 'special' (which it
never should have been) and instead just behaves like other text that is
placed on the part by the title macro.

The only flanking measure required to make this happen was to add
support for nested arrays in handling text.
This way, you can pass a nested array to concatenate strings in such a
way that each part will still be individually translated.

And as all text in FreeSewing, to force a linebreak, you just use "\n"
as The Dark Lord intended.

config/changelog.yaml

@@ -1,6 +1,18 @@
 Unreleased:
   Added:
 
+  Added:
+    plugin-annotations:
+      - The `title` macro now takes a `notes` and `classes.notes` as its config, allowing you to add notes
+      - The `classes.cutlist` config is removed from the title plugin, cutlist info is now included as notes
+    plugin-i18n:
+      - This plugin now supports translation of nested arrays of strings, giving you more flexibility to concatenate translated parts of strings
+    react-components:
+      - This Pattern component now supports translation of nested arrays of strings, giving you more flexibility to concatenate translated parts of strings
+
+    Removed:
+      - The `classes.cutlist` config is removed from the title plugin, cutlist info is now included as notes
+
 3.1.0:
   date: 2023-12-26
   Added:

packages/react-components/src/pattern/utils.mjs

@@ -71,7 +71,8 @@ export const getId = ({
 export const translateStrings = (t, list) => {
   let translated = ''
   for (const string of list) {
-    if (string) translated += t(string.toString()).replace(/"/g, '"') + ' '
+    if (Array.isArray(string)) translated += translateStrings(t, string)
+    else if (string) translated += t(string.toString()).replace(/"/g, '"') + ' '
   }
 
   return translated

plugins/plugin-annotations/src/title.mjs

@@ -1,3 +1,6 @@
+const capitalize = (string) =>
+  typeof string === 'string' ? string.charAt(0).toUpperCase() + string.slice(1) : ''
+
 /*
  * Defaults for the title macro
  */
@@ -12,10 +15,10 @@ const macroDefaults = {
   rotation: 0,
   scale: 1,
   title: 'plugin-annotations:noName',
+  notes: false,
   classes: {
-    cutlist: 'text-md fill-current',
+    notes: 'text-md fill-current',
     date: 'text-sm fill-current',
-    for: 'fill-current font-bold',
     name: 'fill-note',
     nr: 'text-4xl fill-note font-bold',
     title: 'text-lg fill-current font-bold',
@@ -74,9 +77,8 @@ const title = function (config, { Point, points, scale, locale, store, part, log
 
   /*
    * Get the list of IDs
-   * Initialize the verticle cadence
    */
-  const ids = store.generateMacroIds(['cutlist', 'date', 'for', 'name', 'nr', 'title'], mc.id)
+  const ids = store.generateMacroIds(['nr', 'date', 'title', 'name', 'notes'], mc.id)
 
   let shift = mc.dy
 
@@ -93,6 +95,24 @@ const title = function (config, { Point, points, scale, locale, store, part, log
     store.set(['partNumbers', part.name], mc.nr)
   } else delete ids.nr
 
+  /*
+   * Title: date
+   */
+  points[ids.date] = mc.at
+    .shift(-90, shift / 2)
+    .addText(
+      new Date().toLocaleString(locale || 'en', {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      }),
+      `${mc.classes.date} ${mc.align}`
+    )
+    .attr('data-text-transform', transform)
+    .attr('data-render-always', 1) // Render even when outside the part bounding box
+  shift += mc.dy
+
   /*
    * Title: title
    */
@@ -100,18 +120,39 @@ const title = function (config, { Point, points, scale, locale, store, part, log
     points[ids.title] = mc.at
       .clone()
       .shift(-90, shift)
-      .attr('data-text', mc.title, mc.append ? false : true)
-      .attr('data-text-class', `${mc.classes.title} ${mc.align}`)
       .attr('data-text-transform', transform)
       .attr('data-render-always', 1) // Render even when outside the part bounding box
+    if (mc.append) points[ids.title].addText(mc.title, `${mc.classes.title} ${mc.align}`)
+    else points[ids.title].setText(mc.title, `${mc.classes.title} ${mc.align}`)
     shift += mc.dy
     store.set(['partTitles', part.name], mc.title)
   } else delete ids.title
 
   /*
-   * Title: cutlist
+   * Title: name
    */
+  points[ids.name] = mc.at
+    .clone()
+    .shift(-90, shift)
+    .addText(
+      `FreeSewing ${capitalize(
+        (store.data?.name || 'plugin-annotations:noName').replace('@freesewing/', '')
+      )} v${store.data?.version || 'plugin-annotations:noVersion'} ( `,
+
+      `${mc.classes.name} ${mc.align}`
+    )
+    .addText(store.data?.for ? store.data.for : 'ephemeral')
+    .addText(' )')
+    .attr('data-text-transform', transform)
+    .attr('data-render-always', 1) // Render even when outside the part bounding box
+  shift += mc.dy
+
+  /*
+   * Title: notes
+   */
+  const notes = []
   if (mc.cutlist) {
+    points[ids.notes] = mc.at.clone().shift(-90, shift)
     /*
      * Get cutlist instructions from the store, only proceed if the list is available
      */
@@ -123,93 +164,38 @@ const title = function (config, { Point, points, scale, locale, store, part, log
       for (const [material, instructions] of Object.entries(partCutlist.materials)) {
         instructions.forEach(({ cut, identical, onBias, onFold }, c) => {
           /*
-           * Create point
+           * Concat line
-           */
-          const id = `${ids.cutlist}_${material}_${c}`
-          ids[`cutlist_${material}_${c}`] = id
-          points[id] = mc.at
-            .clone()
-            .shift(-90, shift)
-            .attr('data-text', 'plugin-annotations:cut')
-            .attr('data-text-class', `${mc.classes.cutlist} ${mc.align}`)
-            .attr('data-text-transform', transform)
-            .attr('data-render-always', 1) // Render even when outside the part bounding box
-            .addText(cut)
-          shift += mc.dy
-
-          /*
-           * Add instructions if parts are mirrored
-           */
-          if (!identical && cut > 1) points[id].addText('plugin-annotations:mirrored')
-
-          /*
-           * Add instructions if parts are cut on fold
            */
+          notes.push('plugin-annotations:cut')
+          notes.push(cut)
+          if (!identical && cut > 1) notes.push('plugin-annotations:mirrored')
           if (onFold)
-            points[id].addText(
+            notes.push(onBias ? 'plugin-annotations:onFoldAndBias' : 'plugin-annotations:onFold')
-              onBias ? 'plugin-annotations:onFoldAndBias' : 'plugin-annotations:onFold'
+          else if (onBias) notes.push('plugin-annotations:onBias')
-            )
+          notes.push('plugin-annotations:from', 'plugin-annotations:' + material)
           /*
-           * Add instructions if parts on on bias
+           * Force a line break between materials
-           */ else if (onBias) points[id].addText('plugin-annotations:onBias')
-
-          /*
-           * Add 'from' (material) text
            */
-          points[id].addText('plugin-annotations:from').addText('plugin-annotations:' + material)
+          notes.push('\n')
         })
       }
     }
+  }
+  if (mc.notes) {
+    if (Array.isArray(notes)) notes.push(...mc.notes)
+    else notes.push(mc.notes)
+  }
+  if (notes.length > 0) {
+    /*
+     * Add all text on a single point
+     */
+    points[ids.notes]
+      .addText(notes, `${mc.classes.notes} ${mc.align}`)
+      .attr('data-text-transform', transform)
+      .attr('data-render-always', 1) // Render even when outside the part bounding box
+      .attr('data-text-lineheight', mc.dy)
   } else delete ids.cutlist
 
-  /*
-   * Title: Design name
-   */
-  points[ids.name] = mc.at
-    .clone()
-    .shift(-90, shift)
-    .attr(
-      'data-text',
-      `${(store.data?.name || 'plugin-annotations:noName').replace('@freesewing/', '')} v${
-        store.data?.version || 'plugin-annotations:noVersion'
-      }`
-    )
-    .attr('data-text-class', `${mc.classes.name} ${mc.align}`)
-    .attr('data-text-transform', transform)
-    .attr('data-render-always', 1) // Render even when outside the part bounding box
-  shift += mc.dy
-
-  /*
-   * Title: For (measurements set)
-   */
-  if (store.data.for) {
-    points[ids.for] = mc.at
-      .shift(-90, shift)
-      .attr('data-text', `(${store.data.for})`)
-      .attr('data-text-class', `${mc.classes.for} ${mc.align}`)
-      .attr('data-text-transform', transform)
-      .attr('data-render-always', 1) // Render even when outside the part bounding box
-    shift += mc.dy
-  } else delete ids.for
-
-  /*
-   * Title: Date
-   */
-  points[ids.date] = mc.at
-    .shift(-90, shift)
-    .attr(
-      'data-text',
-      new Date().toLocaleString(locale || 'en', {
-        weekday: 'long',
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-      })
-    )
-    .attr('data-text-class', `${mc.classes.date} ${mc.align}`)
-    .attr('data-text-transform', transform)
-    .attr('data-render-always', 1) // Render even when outside the part bounding box
-
   /*
    * Store all IDs in the store so we can remove this macro with rmtitle
    */

plugins/plugin-i18n/src/index.mjs

@@ -1,10 +1,13 @@
 import { name, version } from '../data.mjs'
 
-export const plugin = {
+const translate = (locale, text, t, pattern) => {
-  name,
+  let translated = ''
-  version,
+  /*
-  hooks: {
+   * Call oneself recursively if text is an array
-    insertText: (locale, text, t, pattern) => {
+   */
+  if (Array.isArray(text))
+    return text.map((string) => translate(locale, string, t, pattern)).join(' ')
+
   if (t instanceof Function) return t(text, locale)
   else if (typeof t[locale] === 'object') return t[locale][text] || text
   else {
@@ -19,7 +22,13 @@ export const plugin = {
 
     return text
   }
-    },
+}
+
+export const plugin = {
+  name,
+  version,
+  hooks: {
+    insertText: (locale, text, t, pattern) => translate(locale, text, t, pattern),
   },
 }