From 70eba4ce5aa39f9b522f7cf4e75fbd7dd2c25b18 Mon Sep 17 00:00:00 2001
From: Joost De Cock <joost@joost.at>
Date: Tue, 29 Dec 2020 18:27:37 +0100
Subject: [PATCH] fix(components): Include snippets provided by theme plugin in
 Example component

Whereas most snippets are provided by build-time plugins that are
part of the plugin bundle, some of them are provided by the theme
plugin, which is a run-time plugin, and so we depend on the frontend
integration to make these available.

In the long(er) run, it might make more sense to move these to
another build-time plugin, but for the time being I've included
them into the Example component until we've clearly idendified
the ripple effects that moving them would have.

See #757 for follow-up of this.
---
 config/changelog.yaml                    |  5 +++
 packages/components/src/Example/index.js |  3 +-
 packages/components/src/Example/theme.js | 53 ++++++++++++++++++++++++
 3 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 packages/components/src/Example/theme.js

diff --git a/config/changelog.yaml b/config/changelog.yaml
index 04d5ecc0ae0..651b0196b81 100644
--- a/config/changelog.yaml
+++ b/config/changelog.yaml
@@ -2,6 +2,11 @@ Unreleased:
   date:
   Added:
   Changed:
+  Fixed:
+    components:
+      - Include basic themeing in Example component
+    shin:
+      - Removed unused lengthBonus option
 
 2.10.7:
   date: 2020-11-18
diff --git a/packages/components/src/Example/index.js b/packages/components/src/Example/index.js
index 57e93f20e63..b2811058724 100644
--- a/packages/components/src/Example/index.js
+++ b/packages/components/src/Example/index.js
@@ -7,6 +7,7 @@ import Design from '../Workbench/Design'
 import IconButton from '@material-ui/core/IconButton'
 import ResetIcon from '@material-ui/icons/SettingsBackupRestore'
 import Switch from '@material-ui/core/Switch'
+import theme from './theme'
 
 const Example = ({
   pattern = 'examples',
@@ -56,7 +57,7 @@ const Example = ({
     ...settings
   }
   if (part !== '') settings.only = [part]
-  const patternInstance = new patterns[pattern](settings)
+  const patternInstance = new patterns[pattern](settings).use(theme)
 
   if (sample) patternInstance.sample()
   else patternInstance.draft()
diff --git a/packages/components/src/Example/theme.js b/packages/components/src/Example/theme.js
new file mode 100644
index 00000000000..d1aa5ed2f3e
--- /dev/null
+++ b/packages/components/src/Example/theme.js
@@ -0,0 +1,53 @@
+const notch = `
+<g id="notch">
+  <circle cy="0" cx="0" r="1.4" class="inner" />
+  <circle cy="0" cx="0" r="2.8" class="outer" />
+</g>
+<g id="bnotch">
+  <path d="M -1.1 -1.1 L 1.1 1.1 M 1.1 -1.1 L -1.1 1.1" class="cross" />
+  <circle cy="0" cx="0" r="2.8" class="outer" />
+</g>`
+const button = `
+<g id="button">
+  <circle cx="0" cy="0" r="3.4" class="btn" />
+  <circle cx="-1" cy="-1" r="0.5" class="hole" />
+  <circle cx="1" cy="-1" r="0.5" class="hole" />
+  <circle cx="1" cy="1" r="0.5" class="hole" />
+  <circle cx="-1" cy="1" r="0.5" class="hole" />
+</g>`
+const buttonhole = `
+<g id="buttonhole">
+  <path class="end" d="M -1,-5 L 1,-5 L 1,5 L -1,5 z" />
+  <path class="side" d="M -1,-5 L 1,-5 L 1,-4 L -1,-4 z M -1,5 L 1,5 L 1,4 L -1,4 z" />
+</g>`
+const snaps = `
+<radialGradient id="snap-stud-grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+  <stop offset="30%" style="stop-color:rgb(235,235,235); stop-opacity:1"/>
+  <stop offset="80%" style="stop-color:rgb(100,100,100);stop-opacity:1" />
+</radialGradient>
+<g id="snap-stud">
+  <circle id="snap-stud-circle-edge" cx="0" cy="0" r="3.4" style="stroke:#666;fill:#dddddd;stroke-width:0.3;" />
+  <circle id="snap-stud-circle-middle" cx="0" cy="0" r="1.8" style="stroke:none;fill:url(#snap-stud-grad);"/>
+  <path style="fill:none;stroke:#666; stroke-width:0.2;" d="M -2,0 L -3,0 M 2,0 L 3,0 M 0,2 L 0,3 M 0,-2 L 0,-3 M 1.5,1.5 L 2.1,2.1 M -1.5,1.5 L -2.1,2.1 M -1.5,-1.5 L -2.1,-2.1 M 1.5,-1.5 L 2.1,-2.1" id="snap-stud-lines"/>
+</g>
+<g id="snap-socket">
+  <circle id="snap-socket-circle-edge" cx="0" cy="0" r="3.4" style="stroke:#666;fill:#bbbbbb;stroke-width:0.3;"/>
+  <circle id="snap-socket-circle-middle" cx="0" cy="0" r="2" style="stroke:#666;fill:#dddddd; stroke-width:0.4;"/>
+  <path style="fill:none;stroke:#666; stroke-width:0.5;" d="M -1.7,-1 L -1.7,1 M 1.7,-1 L 1.7,1" id="snap-socket-lines" />
+</g>`
+
+const version = '0.0.1'
+
+export default {
+  name: 'example-theme',
+  version,
+  hooks: {
+    preRender: function (svg) {
+      if (svg.attributes.get('freesewing:example-theme') === false) {
+        svg.attributes.set('class', 'freesewing example')
+        svg.defs += notch + button + buttonhole + snaps
+        svg.attributes.add('freesewing:example-theme', version)
+      }
+    }
+  }
+}