+ {design ? (
+
+
+
+ (
+ setDesign(false)}>
+
+
+ )
+ {focusCount > 0 ? (
+
+ (
+ raiseEvent("clearFocusAll", null)}
+ >
+
+
+ )
+
+ ) : null}
+
+
+
+ ) : (
+
+
+ (
+ setDesign(true)}>
+
+
+ )
+
+ )}
{
if (theme === "light") setTheme("dark");
else setTheme("light");
};
- const raiseEvent = (type = null, data = null) => {
- console.log("FIXME: Event raised", type, data);
- };
+ const raiseEvent = (type = null, data = null) => {};
const navs = {
left: {
diff --git a/packages/create-freesewing-pattern/template/default/example/.babelrc b/packages/create-freesewing-pattern/template/default/example/.babelrc
new file mode 100644
index 00000000000..6e3090a4956
--- /dev/null
+++ b/packages/create-freesewing-pattern/template/default/example/.babelrc
@@ -0,0 +1,10 @@
+{
+ "plugins": [
+ ["prismjs", {
+ "languages": ["javascript", "css", "markup"],
+ "plugins": ["line-numbers"],
+ "theme": "twilight",
+ "css": true
+ }]
+ ]
+}
diff --git a/packages/create-freesewing-pattern/template/default/example/package-lock.json b/packages/create-freesewing-pattern/template/default/example/package-lock.json
new file mode 100644
index 00000000000..61f7bad6b2d
--- /dev/null
+++ b/packages/create-freesewing-pattern/template/default/example/package-lock.json
@@ -0,0 +1,55 @@
+{
+ "name": "{{name}}-example",
+ "version": "0.0.0",
+ "lockfileVersion": 1,
+ "requires": true,
+ "dependencies": {
+ "babel-plugin-prismjs": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/babel-plugin-prismjs/-/babel-plugin-prismjs-1.0.2.tgz",
+ "integrity": "sha512-WbUE86Aih6h6daLpyavuikEXECrkon21oWh4MOHa5stMfY/IK1e/Sr79qEGhl7KrL16fMChB3tdbVR82ubnzOg==",
+ "dev": true
+ },
+ "clipboard": {
+ "version": "2.0.4",
+ "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz",
+ "integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==",
+ "requires": {
+ "good-listener": "^1.2.2",
+ "select": "^1.1.2",
+ "tiny-emitter": "^2.0.0"
+ }
+ },
+ "delegate": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+ "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+ },
+ "good-listener": {
+ "version": "1.2.2",
+ "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+ "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+ "requires": {
+ "delegate": "^3.1.2"
+ }
+ },
+ "prismjs": {
+ "version": "1.16.0",
+ "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.16.0.tgz",
+ "integrity": "sha512-OA4MKxjFZHSvZcisLGe14THYsug/nF6O1f0pAJc0KN0wTyAcLqmsbE+lTGKSpyh+9pEW57+k6pg2AfYR+coyHA==",
+ "requires": {
+ "clipboard": "^2.0.0"
+ }
+ },
+ "select": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+ "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
+ },
+ "tiny-emitter": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+ "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+ }
+ }
+}
diff --git a/packages/create-freesewing-pattern/template/default/example/package.json b/packages/create-freesewing-pattern/template/default/example/package.json
index 97758f5e537..f89a8f2288c 100644
--- a/packages/create-freesewing-pattern/template/default/example/package.json
+++ b/packages/create-freesewing-pattern/template/default/example/package.json
@@ -4,29 +4,30 @@
"version": "0.0.0",
"private": true,
"dependencies": {
- "react": "^16.8",
- "react-dom": "^16.8",
- "react-scripts": "^3.0.0",
- "@freesewing/core": "alpha",
- "@freesewing/plugin-debug": "alpha",
- "@freesewing/plugin-theme": "alpha",
- "@freesewing/plugin-designer": "alpha",
- "@freesewing/plugin-svgattr": "alpha",
- "@freesewing/plugin-i18n": "alpha",
- "@freesewing/plugin-validate": "alpha",
- "@freesewing/plugin-react": "alpha",
- "@freesewing/i18n": "alpha",
- "@freesewing/utils": "alpha",
- "@freesewing/models": "alpha",
"@freesewing/components": "alpha",
+ "@freesewing/core": "alpha",
"@freesewing/css-theme": "alpha",
+ "@freesewing/i18n": "alpha",
+ "@freesewing/models": "alpha",
"@freesewing/mui-theme": "alpha",
"@freesewing/pattern-info": "alpha",
+ "@freesewing/plugin-debug": "alpha",
+ "@freesewing/plugin-designer": "alpha",
+ "@freesewing/plugin-i18n": "alpha",
+ "@freesewing/plugin-react": "alpha",
+ "@freesewing/plugin-svgattr": "alpha",
+ "@freesewing/plugin-theme": "alpha",
+ "@freesewing/plugin-validate": "alpha",
+ "@freesewing/utils": "alpha",
"@material-ui/core": "^3.9.3",
"@material-ui/icons": "^3.0.2",
"@material-ui/lab": "^3.0.0-alpha.30",
- "typeface-roboto-condensed": "latest",
- "pattern": "{{#if yarn}}link:..{{else}}file:..{{/if}}"
+ "pattern": "{{#if yarn}}link:..{{else}}file:..{{/if}}",
+ "prismjs": "1.16.0",
+ "react": "^16.8",
+ "react-dom": "^16.8",
+ "react-scripts": "^3.0.0",
+ "typeface-roboto-condensed": "latest"
},
"scripts": {
"start": "react-scripts start",
@@ -42,5 +43,8 @@
"not dead",
"not ie <= 11",
"not op_mini all"
- ]
+ ],
+ "devDependencies": {
+ "babel-plugin-prismjs": "1.0.2"
+ }
}
diff --git a/packages/css-theme/src/_components.scss b/packages/css-theme/src/_components.scss
index f2e6f8f27b5..b558c6b856c 100644
--- a/packages/css-theme/src/_components.scss
+++ b/packages/css-theme/src/_components.scss
@@ -2,3 +2,4 @@
@import "components/navbar";
@import "components/draft";
@import "components/draft-configurator";
+@import "components/draft-design";
diff --git a/packages/css-theme/src/_elements.scss b/packages/css-theme/src/_elements.scss
index 34f47fd70d1..f2a16aa5315 100644
--- a/packages/css-theme/src/_elements.scss
+++ b/packages/css-theme/src/_elements.scss
@@ -1,3 +1,4 @@
@import "elements/a";
@import "elements/footer";
@import "elements/ul";
+@import "elements/code";
diff --git a/packages/css-theme/src/_prism.css b/packages/css-theme/src/_prism.css
new file mode 100644
index 00000000000..885caccbb49
--- /dev/null
+++ b/packages/css-theme/src/_prism.css
@@ -0,0 +1,147 @@
+/**
+ * atom-dark theme for `prism.js`
+ * Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax
+ * @author Joe Gibson (@gibsjose)
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+ color: #c5c8c6;
+ text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+ font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
+ direction: ltr;
+ text-align: left;
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+ line-height: 1.5;
+
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+ padding: 1em;
+ margin: .5em 0;
+ overflow: auto;
+ border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+ background: #1d1f21;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+ padding: .1em;
+ border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: #7C7C7C;
+}
+
+.token.punctuation {
+ color: #c5c8c6;
+}
+
+.namespace {
+ opacity: .7;
+}
+
+.token.property,
+.token.keyword,
+.token.tag {
+ color: #96CBFE;
+}
+
+.token.class-name {
+ color: #FFFFB6;
+ text-decoration: underline;
+}
+
+.token.boolean,
+.token.constant {
+ color: #99CC99;
+}
+
+.token.symbol,
+.token.deleted {
+ color: #f92672;
+}
+
+.token.number {
+ color: #FF73FD;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+ color: #A8FF60;
+}
+
+.token.variable {
+ color: #C6C5FE;
+}
+
+.token.operator {
+ color: #EDEDED;
+}
+
+.token.entity {
+ color: #FFFFB6;
+ /* text-decoration: underline; */
+}
+
+.token.url {
+ color: #96CBFE;
+}
+
+.language-css .token.string,
+.style .token.string {
+ color: #87C38A;
+}
+
+.token.atrule,
+.token.attr-value {
+ color: #F9EE98;
+}
+
+.token.function {
+ color: #DAD085;
+}
+
+.token.regex {
+ color: #E9C062;
+}
+
+.token.important {
+ color: #fd971f;
+}
+
+.token.important,
+.token.bold {
+ font-weight: bold;
+}
+.token.italic {
+ font-style: italic;
+}
+
+.token.entity {
+ cursor: help;
+}
+
diff --git a/packages/css-theme/src/components/_draft-design.scss b/packages/css-theme/src/components/_draft-design.scss
new file mode 100644
index 00000000000..94409e80ed1
--- /dev/null
+++ b/packages/css-theme/src/components/_draft-design.scss
@@ -0,0 +1,129 @@
+svg.freesewing.draft {
+ g.design.point {
+ circle {
+ stroke: none;
+ fill-opacity: 0.5;
+ }
+ circle.hovertrap {
+ opacity: 0;
+ transition: opacity 0.1s ease-in;
+ }
+ circle.hovertrap:hover {
+ cursor: pointer;
+ opacity: 0.3;
+ }
+ }
+ path.design.hovertrap {
+ stroke-width: 5;
+ stroke-opacity: 0;
+ transition: stroke-opacity 0.1s ease-in;
+ }
+ path.design.hovertrap:hover {
+ cursor: pointer;
+ stroke-opacity: 0.2;
+ }
+ path.focus.point,
+ path.focus.coords {
+ stroke-width: 0.2;
+ stroke: $oc-red-6;
+ }
+ circle.focus.point,
+ circle.focus.coords {
+ fill: white;
+ fill-opacity: 0.01;
+ stroke: $oc-red-6;
+ stroke-width: 0.2;
+ }
+ circle.focus.point:hover,
+ circle.focus.coords:hover {
+ cursor: pointer;
+ }
+ path.focus.path {
+ stroke-width: 5;
+ stroke-opacity: 0.3;
+ stroke-dasharray: 4 5.5;
+ }
+ path.focus.path:hover {
+ cursor: pointer;
+ }
+ path.focus.point.c0,
+ circle.focus.point.c0,
+ path.focus.coords.c0,
+ circle.focus.coords.c0 {
+ stroke: $oc-red-6;
+ }
+ path.focus.point.c1,
+ circle.focus.point.c1,
+ path.focus.coords.c1,
+ circle.focus.coords.c01{
+ stroke: $oc-green-6;
+ }
+ path.focus.point.c2,
+ circle.focus.point.c2,
+ path.focus.coords.c2,
+ circle.focus.coords.c02{
+ stroke: $oc-blue-6;
+ }
+ path.focus.point.c3,
+ circle.focus.point.c3,
+ path.focus.coords.c3,
+ circle.focus.coords.c03{
+ stroke: $oc-grape-6;
+ }
+ path.focus.coords,
+ circle.focus.coords {
+ stroke-dasharray: 3 3;
+ }
+ path.design.path.cp {
+ stroke: $oc-orange-5;
+ stroke-width: 0.5;
+ }
+ circle.design.path.cp {
+ stroke: $oc-orange-5;
+ stroke-width: 1;
+ }
+ path.focus.path.c0 { stroke: $oc-red-6 }
+ path.focus.path.c1 { stroke: $oc-green-6 }
+ path.focus.path.c2 { stroke: $oc-blue-6 }
+ path.focus.path.c3 { stroke: $oc-grape-6 }
+}
+
+div.design {
+ h4.point.c0 { border-bottom: 1px solid $oc-red-6; }
+ h4.point.c1 { border-bottom: 1px solid $oc-green-6; }
+ h4.point.c2 { border-bottom: 1px solid $oc-blue-6; }
+ h4.point.c3 { border-bottom: 1px solid $oc-grape-6; }
+}
+
+.theme-wrapper.light svg.freesewing.draft {
+ g.design.point {
+ circle { fill: $fc-link-light; }
+ circle.hovertrap { stroke: $fc-link-light; }
+ }
+ path.design.hovertrap { stroke: $fc-link-light; }
+ circle.design.path.cp { fill: $fc-bg-light; }
+}
+
+.theme-wrapper.light div.design {
+ h4.path.c0 { background-color: rgba($oc-red-6, 0.3) }
+ h4.path.c1 { background-color: rgba($oc-green-6, 0.3) }
+ h4.path.c2 { background-color: rgba($oc-blue-6, 0.3) }
+ h4.path.c3 { background-color: rgba($oc-grape-6, 0.3) }
+}
+
+.theme-wrapper.dark svg.freesewing.draft {
+ g.design.point {
+ circle { fill: $fc-link-dark; }
+ circle.hovertrap { stroke: $fc-link-dark; }
+ }
+ path.design.hovertrap { stroke: $fc-link-dark; }
+ circle.design.path.cp { fill: $fc-bg-dark; }
+ path.focus.path { stroke-opacity: 0.5; }
+}
+
+.theme-wrapper.dark div.design {
+ h4.path.c0 { background-color: rgba($oc-red-6, 0.5) }
+ h4.path.c1 { background-color: rgba($oc-green-6, 0.5) }
+ h4.path.c2 { background-color: rgba($oc-blue-6, 0.5) }
+ h4.path.c3 { background-color: rgba($oc-grape-6, 0.5) }
+}
diff --git a/packages/css-theme/src/elements/_code.scss b/packages/css-theme/src/elements/_code.scss
new file mode 100644
index 00000000000..b6238dcd0e2
--- /dev/null
+++ b/packages/css-theme/src/elements/_code.scss
@@ -0,0 +1,54 @@
+.theme-wrapper.light :not(pre) > code[class*="language-"] {
+ padding: 0.125rem 0.5rem;
+ background: $oc-gray-6;
+ border: 1px $oc-gray-5 solid;
+ color: $oc-gray-9;
+}
+.theme-wrapper.dark :not(pre) > code[class*="language-"] {
+ padding: 0.125rem 0.5rem;
+ background: $oc-gray-6;
+ border: 1px $oc-gray-5 solid;
+ color: $oc-gray-9;
+}
+
+div.gatsby-highlight {
+ position: relative;
+}
+div.gatsby-highlight pre.language-js {
+ padding-top: 1rem;
+}
+
+pre.language-js:before,
+pre.language-json:before,
+pre.language-svg:before,
+pre.language-bash:before {
+ border-top: 2px dashed $oc-gray-9;
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 20px;
+ color: black;
+ padding: 1px 4px;
+ border-bottom-right-radius: 3px;
+ border-bottom-left-radius: 3px;
+ font-weight: bold;
+ text-shadow: none;
+}
+pre.language-js:before {
+ content: "js";
+ background: rgba(255, 255, 0, 0.9);
+}
+pre.language-json:before {
+ content: "json";
+ background: rgba(255, 255, 0, 0.9);
+}
+pre.language-bash:before {
+ content: "bash";
+ background: rgba(29, 227, 0, 0.9);
+}
+pre.language-svg:before {
+ content: "svg";
+ background: rgba(129, 197, 255, 0.9);
+}
+
+
diff --git a/packages/css-theme/src/theme.scss b/packages/css-theme/src/theme.scss
index 268f58abf94..e06524be569 100644
--- a/packages/css-theme/src/theme.scss
+++ b/packages/css-theme/src/theme.scss
@@ -2,6 +2,7 @@
@import '../../../node_modules/open-color/open-color.scss';
@import "variables";
@import "mixins";
+@import "prism";
@import "theme-wrapper";
@import "layout";
@import "scroll";
diff --git a/packages/i18n/src/locales/de/cfp.yaml b/packages/i18n/src/locales/de/cfp.yaml
index ca82db66a6b..a520a6f02b2 100644
--- a/packages/i18n/src/locales/de/cfp.yaml
+++ b/packages/i18n/src/locales/de/cfp.yaml
@@ -21,4 +21,8 @@ size: Größe
noRequiredMeasurements: Dieses Muster hat keine erforderlichen Messungen.
howtoAddMeasurements: Um Messungen anzufordern, fügen Sie sie dem measurements der Konfigurationsdatei des Musters hinzu.
seeDocsAt: Dokumentation zu diesem Thema finden Sie unter
+designModeIsOn: Der Designmodus ist aktiviert
+designModeIsOff: Entwurfsmodus ist deaktiviert
+turnOn: Aktivieren
+turnOff: Deaktivieren
diff --git a/packages/i18n/src/locales/en/cfp.yaml b/packages/i18n/src/locales/en/cfp.yaml
index 38240770c53..b0257f5f4b3 100644
--- a/packages/i18n/src/locales/en/cfp.yaml
+++ b/packages/i18n/src/locales/en/cfp.yaml
@@ -20,3 +20,7 @@ size: Size
noRequiredMeasurements: This pattern has no required measurements
howtoAddMeasurements: To require measurements, add them to the measurements section of the pattern's configuration file.
seeDocsAt: Documentation on this topic is available at
+designModeIsOn: Design mode is on
+designModeIsOff: Design mode is off
+turnOn: Turn on
+turnOff: Turn off
diff --git a/packages/i18n/src/locales/es/cfp.yaml b/packages/i18n/src/locales/es/cfp.yaml
index 15bb363fb65..1aed6819eba 100644
--- a/packages/i18n/src/locales/es/cfp.yaml
+++ b/packages/i18n/src/locales/es/cfp.yaml
@@ -21,3 +21,8 @@ size: Tamaño
noRequiredMeasurements: Este patrón no tiene medidas requeridas.
howtoAddMeasurements: Para requerir mediciones, agréguelas a la sección de measurements del archivo de configuración del patrón.
seeDocsAt: La documentación sobre este tema está disponible en
+designModeIsOn: El modo de diseño está activado
+designModeIsOff: El modo de diseño esta apagado
+turnOn: Encender
+turnOff: Apagar
+
diff --git a/packages/i18n/src/locales/fr/cfp.yaml b/packages/i18n/src/locales/fr/cfp.yaml
index b92f63479b3..6706b64f472 100644
--- a/packages/i18n/src/locales/fr/cfp.yaml
+++ b/packages/i18n/src/locales/fr/cfp.yaml
@@ -21,3 +21,8 @@ size: Taille
noRequiredMeasurements: Ce patron n'a pas de mesures requises.
howtoAddMeasurements: Pour exiger des mesures, ajoutez-les à la section measurements du fichier de configuration du patron.
seeDocsAt: Documentation sur ce sujet est disponible à l'adresse
+designModeIsOn: Le mode de conception est activé
+designModeIsOff: Le mode de conception est désactivé
+turnOn: Activer
+turnOff: Désactiver
+
diff --git a/packages/i18n/src/locales/nl/cfp.yaml b/packages/i18n/src/locales/nl/cfp.yaml
index cb86ed4a22b..65446e00d0b 100644
--- a/packages/i18n/src/locales/nl/cfp.yaml
+++ b/packages/i18n/src/locales/nl/cfp.yaml
@@ -21,3 +21,8 @@ size: Maat
noRequiredMeasurements: Dit patroon vereist geen lichaamsmaten.
howtoAddMeasurements: Om lichaamsmaten te vereisen, voegt u ze toe aan de measurements sectie van het configuratiebestand van het patroon.
seeDocsAt: Documentatie over dit onderwerp is beschikbaar op
+designModeIsOn: Ontwerpmodus is ingeschakeld
+designModeIsOff: Ontwerpmodus is uitgeschakeld
+turnOn: Inschakelen
+turnOff: Uitschakelen
+