🚧 Progress on create-freesewing-pattern

config/scripts.yaml

@@ -24,6 +24,7 @@ components:
   # react-scripts doesn't handle .mjs files correctly
   modulebuild: '!'
   build: "npm run clean && npm run nodebuild"
+  watch: "BABEL_ENV=production rollup -c -w -o dist/index.js -f cjs"
 core:
   test: "BABEL_ENV=production nyc mocha tests/*.test.js"
   report: "BABEL_ENV=production nyc report --reporter=html mocha --compilers js:babel-core/register tests/*.test.js"

packages/components/package.json

@@ -16,6 +16,7 @@
   "main": "dist/index.js",
   "scripts": {
     "clean": "rimraf dist",
+    "watch": "BABEL_ENV=production rollup -c -w -o dist/index.js -f cjs",
     "nodebuild": "BABEL_ENV=production rollup -c -o dist/index.js -f cjs",
     "build": "npm run clean && npm run nodebuild",
     "test": "echo \"components: No tests configured. Perhaps you'd like to do this?\" && exit 0",

packages/components/src/Icon/index.js

@@ -23,7 +23,7 @@ const Icon = props => {
 Icon.propTypes = {
   size: PropTypes.number,
   viewBox: PropTypes.string,
-  pathString: PropTypes.string.isRequired
+  icon: PropTypes.string
 };
 
 Icon.defaultProps = {

packages/components/src/Workbench/DraftPattern/index.js

@@ -0,0 +1,64 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { defaultGist } from "@freesewing/utils";
+import DraftConfigurator from "../../DraftConfigurator";
+import themePlugin from "@freesewing/plugin-theme";
+import svgattrPlugin from "@freesewing/plugin-svgattr";
+import i18nPlugin from "@freesewing/plugin-i18n";
+import validatePlugin from "@freesewing/plugin-validate";
+import designerPlugin from "@freesewing/plugin-designer";
+import { strings } from "@freesewing/i18n";
+import { FormattedMessage } from "react-intl";
+
+const DraftPattern = props => {
+  let pattern = new props.Pattern(props.gist.settings)
+    .use(themePlugin)
+    .use(svgattrPlugin, { class: "freesewing draft" })
+    .use(i18nPlugin, { strings: strings })
+    .use(validatePlugin)
+    .use(designerPlugin, props.raiseEvent);
+  pattern.draft();
+  console.dir({ pattern });
+
+  return (
+    <div className="fs-sa">
+      <section>
+        <h2>
+          <FormattedMessage id="app.pattern" />
+        </h2>
+        <div dangerouslySetInnerHTML={{ __html: pattern.render() }} />
+        <h2>gist</h2>
+        <pre>{JSON.stringify(props.gist, null, 2)}</pre>
+      </section>
+
+      <aside>
+        <div className="sticky">
+          <DraftConfigurator
+            config={props.config}
+            gist={props.gist}
+            updateGist={props.updateGist}
+            raiseEvent={props.raiseEvent}
+            freesewing={props.freesewing}
+            units={props.units}
+          />
+        </div>
+      </aside>
+    </div>
+  );
+};
+
+DraftPattern.propTypes = {
+  gist: PropTypes.object.isRequired,
+  updateGist: PropTypes.func.isRequired,
+  config: PropTypes.object.isRequired,
+  raiseEvent: PropTypes.func.isRequired,
+  Pattern: PropTypes.func.isRequired,
+  units: PropTypes.oneOf(["metric", "imperial"])
+};
+
+DraftPattern.defaultProps = {
+  units: "metric",
+  pointInfo: null
+};
+
+export default DraftPattern;

packages/components/src/Workbench/Pattern/index.js

@@ -1,41 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { defaultGist } from "@freesewing/utils";
-import DraftConfigurator from "../../DraftConfigurator";
-
-const Pattern = props => {
-  let pattern = new props.Pattern(props.gist);
-  return (
-    <div className="fs-sa">
-      <section>
-        <div dangerouslySetInnerHTML={{ __hmtl: pattern.draft().render() }} />
-        <h2>gist</h2>
-        <pre>{JSON.stringify(props.gist, null, 2)}</pre>
-      </section>
-
-      <aside>
-        <div className="sticky">
-          <DraftConfigurator
-            config={props.config}
-            gist={props.gist}
-            updateGist={props.updateGist}
-            raiseEvent={props.raiseEvent}
-            freesewing={props.freesewing}
-            units={props.units}
-          />
-        </div>
-      </aside>
-    </div>
-  );
-};
-
-Pattern.propTypes = {
-  gist: PropTypes.object.isRequired,
-  updateGist: PropTypes.func.isRequired,
-  config: PropTypes.object.isRequired,
-  raiseEvent: PropTypes.func.isRequired,
-  Pattern: PropTypes.func.isRequired,
-  units: PropTypes.oneOf(["metric", "imperial"]).isRequired
-};
-
-export default Pattern;

packages/components/src/Workbench/Welcome/index.js

@@ -52,7 +52,7 @@ const Welcome = props => {
           variant="contained"
           size="large"
           color="primary"
-          onClick={() => props.setDisplay("pattern")}
+          onClick={() => props.setDisplay("draft")}
         >
           <FormattedMessage id="cfp.renderYourPattern" />
         </Button>

packages/components/src/Workbench/index.js

@@ -13,7 +13,7 @@ import withLanguage from "../withLanguage";
 import LanguageIcon from "@material-ui/icons/Translate";
 import DarkModeIcon from "@material-ui/icons/Brightness3";
 import LanguageChooser from "./LanguageChooser";
-import ShowPattern from "./Pattern";
+import DraftPattern from "./DraftPattern";
 import Welcome from "./Welcome";
 
 const Workbench = props => {
@@ -35,7 +35,7 @@ const Workbench = props => {
     if (theme === "light") setTheme("dark");
     else setTheme("light");
   };
-  const raiseEvent = (type, data) => {
+  const raiseEvent = (type = null, data = null) => {
     console.log("FIXME: Event raised", type, data);
   };
 
@@ -83,9 +83,9 @@ const Workbench = props => {
         />
       );
       break;
-    case "pattern":
+    case "draft":
       main = (
-        <ShowPattern
+        <DraftPattern
           freesewing={props.freesewing}
           Pattern={props.Pattern}
           config={props.config}
@@ -126,7 +126,7 @@ Workbench.propTypes = {
 };
 
 Workbench.defaultProps = {
-  from: false
+  from: { settings: { embed: true } }
 };
 
 export default withLanguage(

packages/create-freesewing-pattern/template/default/example/package.json

@@ -8,12 +8,12 @@
     "react-dom": "^16.8",
     "react-scripts": "^3.0.0",
     "@freesewing/core": "alpha",
-    "@freesewing/plugin-bust": "alpha",
-    "@freesewing/plugin-buttons": "alpha",
-    "@freesewing/plugin-flip": "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/i18n": "alpha",
     "@freesewing/components": "alpha",
     "@freesewing/css-theme": "alpha",

packages/create-freesewing-pattern/template/default/src/box.js

@@ -1,12 +1,26 @@
 export default function(part) {
-  let { Point, Path, points, paths, complete, paperless } = part.shorthand();
+  let {
+    options,
+    Point,
+    Path,
+    points,
+    paths,
+    complete,
+    paperless
+  } = part.shorthand();
 
-  points.start = new Point(0, 0);
-  points.end = new Point(75, 0);
+  points.topLeft = new Point(0, 0);
+  points.topRight = new Point(options.size, 0);
+  points.bottomLeft = new Point(0, options.size);
+  points.bottomRight = new Point(options.size, options.size);
 
   paths.demo = new Path()
-    .move(points.start)
-    .line(points.end)
+    .move(points.topLeft)
+    .line(points.bottomLeft)
+    .line(points.bottomRight)
+    .line(points.topRight)
+    .line(points.topLeft)
+    .close()
     .attr("data-text", "thisIsTheFrontPart")
     .attr("data-text-class", "center");
 

packages/plugin-designer/src/decorate.js

@@ -1,26 +1,25 @@
 const decorate = {};
 
 /** Decorares points with extra info */
-decorate.points = function(svg) {
+decorate.points = function(svg, pointHover) {
   for (let partId in svg.pattern.parts) {
     let part = svg.pattern.parts[partId];
     if (part.render) {
       for (let pointId in part.points) {
         let point = part.points[pointId];
-        point.attributes.set("id", svg.getId());
-        point.attributes.set("data-point", pointId);
-        point.attributes.set("data-part", partId);
         let type = pointId.substr(0, 1) === "_" ? "point-hidden" : "point";
         let id = "snippet-" + pointId;
-        part.snippets[id] = new svg.pattern.Snippet(
-          type,
-          point,
-          `Point ${pointId} in part ${partId}`
-        );
-        part.snippets[id].attributes.set("onmouseover", "pointHover(evt)");
-        part.snippets[id].attributes.set("id", id);
-        part.snippets[id].attributes.set("data-point", pointId);
-        part.snippets[id].attributes.set("data-part", partId);
+        part.snippets[id] = new svg.pattern.Snippet(type, point);
+        part.snippets[id].attributes.set("onmouseover", function() {
+          pointHover("test", "data");
+        });
+        //  raiseEvent('pointHover', {
+        //    type: "point",
+        //    pointId,
+        //    partId,
+        //    point,
+        //  })
+        //}));
       }
     }
   }

packages/plugin-designer/src/index.js

@@ -7,17 +7,35 @@ export default {
   name: name,
   version: version,
   hooks: {
-    preRender: function(svg) {
+    preRender: function(svg, raiseEvent) {
+      raiseEvent("preRender", { data: "foo" });
+      //const pointHover = raiseEvent.bind(svg);
+      //function(evt) {
+      //  raiseEvent.bind(svg)('plugin-designer-pointHover', evt);
+      //}
       if (svg.attributes.get("freesewing:plugin-designer") === false) {
         // Add script and snippets
-        svg.script += script;
+        //svg.script += script;
         svg.defs += snippets;
 
         // Add SVG attributes
         svg.attributes.add("freesewing:plugin-designer", version);
 
         // Decorate pattern
-        decorate.points(svg);
+        //decorate.points(svg, raiseEvent);
+        for (let partId in svg.pattern.parts) {
+          let part = svg.pattern.parts[partId];
+          if (part.render) {
+            for (let pointId in part.points) {
+              let point = part.points[pointId];
+              let type =
+                pointId.substr(0, 1) === "_" ? "point-hidden" : "point";
+              let id = "snippet-" + pointId;
+              part.snippets[id] = new svg.pattern.Snippet(type, point);
+              part.snippets[id].attributes.set("onmouseover", raiseEvent); //(function(){pointHover('test', 'data')}));
+            }
+          }
+        }
         decorate.paths(svg);
         svg.debug(
           { style: "info", label: "🚛 Pattern object" },