Adapt plugin-theme to support the new scale setting

Problem description

We’ve added improved support for very small (and large) patterns to our roadmap. Think patterns for dolls/giants.

The problem is that while the patterns themselves are made-to-measure, some things don’t scale:

• Stroke-width
• Arrow sizes (also based on stroke width)
• Font sizes
• Snippets like buttons and scalebox and whatnot

Here’s an example that illustrates the problem:

What is it that you would like to see happen?

In our frontend, we handle this with CSS variables. Alas, you cannot set CSS variables in SVG (or if you can, then I haven’t figured out how). So for stand-along SVG files this is not a solution.

So, we should adapt our plugin-theme package to take this variable on board. Specifically, rather than add a bunch of static CSS, it should generate the CSS dynamically, and multiply font sizes, stroke widths and so on with the settings.scale value (which defaults to 1).

Currently, the plugin imports the CSS, then adds it to the pattern (there’s also a prebuild step that turns SASS into CSS but we don’t really use SASS so it should not be a problem to remove it).

Instead, we should have a method that generates the CSS and takes the scale factor as input.

[nicholasdower]

No. You should close it 😃 I’d do it, but it’s your issue so you’ve earned closing it 😉

Woohoo!

[joostdecock]

A bit more info now that I have some more time:

• The plugin-theme plugin is a so-called run-time plugin. See: https://freesewing.dev/guides/plugins/types-of-plugins
• I hooks into the preRender lifecycle event and received the SVG object. See: https://freesewing.dev/reference/api/hooks/prerender
• The SVG object holds a reference to the full pattern object, precisely for plugins who need access to that. See: https://freesewing.dev/reference/api/svg/pattern
• The settings are stored in the settings property of the pattern object
• Which means that your plugin can access the scale setting as svg.pattern.settings.scale

Then, it’s a matter of taking the CSS and adapting stroke-widths, text-size and so on based on the scale. Quick example:

import {version, name} from '../package.json'

// Helper method to avoid having too many digits after the comma
const round = value => Math.round(value * 1e2) / 1e2

const svg = (scale=1) => `
stroke-xs {
  stroke-width: ${round(0.1*scale)};
}
stroke-sm {
  stroke-width: ${round(0.2*scale)};
}
stroke-lg {
  stroke-width: ${round(0.6*scale)};
}
/* and so on... */
`

export default {
  name: name,
  version: version,
  hooks: {
    preRender: svg => {
      // Don't add style twice, because a pattern van get rendered multiple times
      if (svg.attributes.get('freesewing:plugin-theme') === false) {
        svg.style += css(svg.pattern.settings.scale)
        // More stuff here
      }
    }
  }

This is from the top of my head, but I hope it makes some sense 😃