🚧 Work on components

packages/components/src/Draft/Snippet/index.js

@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { getProps } from "../utils";
 
 const Snippet = props => {
   const snippetProps = {
@@ -26,7 +27,7 @@ const Snippet = props => {
     }
   }
 
-  return <use {...snippetProps} />;
+  return <use {...snippetProps} {...getProps(props.snippet)} />;
 };
 
 Snippet.propTypes = {

packages/components/src/Draft/Svg/index.js

@@ -15,6 +15,7 @@ const Svg = props => {
     attributes.width = props.width;
     attributes.height = props.height;
   }
+  if (props.design) attributes.className += " design";
 
   return <svg {...attributes}>{props.children}</svg>;
 };

packages/components/src/Draft/index.js

@@ -11,6 +11,7 @@ const Draft = props => (
     height={props.height}
     language={props.settings.locale}
     id={props.settings.idPrefix + "svg"}
+    design={props.design}
   >
     <Defs
       units={props.settings.units}

packages/components/src/Example/bak.js

@@ -0,0 +1,130 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import examples from "@freesewing/examples";
+import rendertest from "@freesewing/rendertest";
+import i18nPlugin from "@freesewing/plugin-i18n";
+import Draft from "../Draft";
+import Design from "../Workbench/Design";
+import { FormattedMessage } from "react-intl";
+import IconButton from "@material-ui/core/IconButton";
+import DesignIcon from "@material-ui/icons/LocationSearching";
+import CodeIcon from "@material-ui/icons/Code";
+import ResetIcon from "@material-ui/icons/SettingsBackupRestore";
+import Prism from "prismjs";
+
+const Example = props => {
+  const [design, setDesign] = useState(false);
+  const [code, setCode] = useState(false);
+  const [focus, setFocus] = useState(null);
+
+  const raiseEvent = (type, data) => {
+    if (type === "clearFocusAll") return setFocus(null);
+    let f = {};
+    if (focus !== null) f = { ...focus };
+    if (typeof f[data.part] === "undefined")
+      f[data.part] = { paths: [], points: [], coords: [] };
+    if (type === "point") f[data.part].points.push(data.name);
+    else if (type === "path") f[data.part].paths.push(data.name);
+    else if (type === "coords") f[data.part].coords.push(data.coords);
+    else if (type === "clearFocus") {
+      let i = focus[data.part][data.type].indexOf(data.name);
+      f[data.part][data.type].splice(i, 1);
+    }
+
+    setFocus(f);
+  };
+
+  let focusCount = 0;
+  if (focus !== null) {
+    for (let p of Object.keys(focus)) {
+      for (let i in focus[p].points) focusCount++;
+      for (let i in focus[p].paths) focusCount++;
+      for (let i in focus[p].coords) focusCount++;
+    }
+  }
+
+  const patterns = {
+    examples,
+    rendertest
+  };
+  const settings = { options: { ...props.options } };
+  if (props.part !== "") settings.only = [props.part];
+  const pattern = new patterns[props.pattern](settings);
+
+  pattern.draft();
+  console.log(props);
+  const patternProps = pattern.getRenderProps();
+  return (
+    <figure className={design ? "design example" : "example"}>
+      <div className="example">
+        <div className="actions">
+          {design ? (
+            <IconButton
+              color="primary"
+              variant="contained"
+              onClick={() => raiseEvent("clearFocusAll", null)}
+            >
+              <ResetIcon />
+            </IconButton>
+          ) : null}
+          <IconButton
+            color="inherit"
+            className={design ? "active" : ""}
+            onClick={() => setDesign(!design)}
+          >
+            <DesignIcon color="inherit" />
+          </IconButton>
+          <IconButton
+            color="inherit"
+            className={code ? "active" : ""}
+            onClick={() => setCode(!code)}
+          >
+            <CodeIcon color="inherit" />
+          </IconButton>
+        </div>
+        <Draft
+          {...patternProps}
+          design={design}
+          focus={focus}
+          raiseEvent={raiseEvent}
+        />
+      </div>
+      <figcaption>{props.caption}</figcaption>
+      {design ? (
+        <div className="design">
+          <Design
+            focus={focus}
+            design={design}
+            raiseEvent={raiseEvent}
+            parts={patternProps.parts}
+          />
+        </div>
+      ) : null}
+      {code ? (
+        <div className="gatsby-highlight">
+          <pre className="language-js">
+            <code className="language-js">hi</code>
+          </pre>
+        </div>
+      ) : null}
+    </figure>
+  );
+};
+
+Example.propTypes = {
+  pattern: PropTypes.string,
+  design: PropTypes.bool,
+  caption: PropTypes.string,
+  part: PropTypes.string,
+  options: PropTypes.obj
+};
+
+Example.defaultProps = {
+  pattern: "examples",
+  design: false,
+  caption: "",
+  options: {},
+  part: ""
+};
+
+export default Example;

packages/components/src/Example/index.js

@@ -6,16 +6,12 @@ import i18nPlugin from "@freesewing/plugin-i18n";
 import Draft from "../Draft";
 import Design from "../Workbench/Design";
 import { FormattedMessage } from "react-intl";
-import source from "./source";
 import IconButton from "@material-ui/core/IconButton";
-import DesignIcon from "@material-ui/icons/LocationSearching";
-import CodeIcon from "@material-ui/icons/Code";
 import ResetIcon from "@material-ui/icons/SettingsBackupRestore";
-import Prism from "prismjs";
+import Switch from "@material-ui/core/Switch";
 
 const Example = props => {
   const [design, setDesign] = useState(false);
-  const [code, setCode] = useState(false);
   const [focus, setFocus] = useState(null);
 
   const raiseEvent = (type, data) => {
@@ -52,6 +48,12 @@ const Example = props => {
   if (props.part !== "") settings.only = [props.part];
   const pattern = new patterns[props.pattern](settings);
 
+  const style = {
+    thumb: {
+      background: "blue"
+    }
+  };
+
   pattern.draft();
   const patternProps = pattern.getRenderProps();
   return (
@@ -61,26 +63,17 @@ const Example = props => {
           {design ? (
             <IconButton
               color="primary"
-              variant="contained"
               onClick={() => raiseEvent("clearFocusAll", null)}
             >
               <ResetIcon />
             </IconButton>
           ) : null}
-          <IconButton
+          <Switch
-            color="inherit"
+            checked={design}
-            className={design ? "active" : ""}
+            onChange={() => setDesign(!design)}
-            onClick={() => setDesign(!design)}
+            value={design}
-          >
+            color="primary"
-            <DesignIcon color="inherit" />
+          />
-          </IconButton>
-          <IconButton
-            color="inherit"
-            className={code ? "active" : ""}
-            onClick={() => setCode(!code)}
-          >
-            <CodeIcon color="inherit" />
-          </IconButton>
         </div>
         <Draft
           {...patternProps}
@@ -100,22 +93,6 @@ const Example = props => {
           />
         </div>
       ) : null}
-      {code ? (
-        <div className="gatsby-highlight">
-          <pre className="language-js">
-            <code
-              className="language-js"
-              dangerouslySetInnerHTML={{
-                __html: Prism.highlight(
-                  source[props.part].toSource(),
-                  Prism.languages.javascript,
-                  "javascript"
-                )
-              }}
-            />
-          </pre>
-        </div>
-      ) : null}
     </figure>
   );
 };

packages/components/src/Example/source.js

@@ -1,134 +0,0 @@
-// Path API
-import path_ops from "@freesewing/examples/src/path_ops";
-import path_attr from "@freesewing/examples/src/path_attr";
-import path_clone from "@freesewing/examples/src/path_clone";
-import path_divide from "@freesewing/examples/src/path_divide";
-import path_edge from "@freesewing/examples/src/path_edge";
-import path_end from "@freesewing/examples/src/path_end";
-import path_intersects from "@freesewing/examples/src/path_intersects";
-import path_intersectsx from "@freesewing/examples/src/path_intersectsx";
-import path_intersectsy from "@freesewing/examples/src/path_intersectsy";
-import path_join from "@freesewing/examples/src/path_join";
-import path_length from "@freesewing/examples/src/path_length";
-import path_offset from "@freesewing/examples/src/path_offset";
-import path_reverse from "@freesewing/examples/src/path_reverse";
-import path_shiftalong from "@freesewing/examples/src/path_shiftalong";
-import path_shiftfractionalong from "@freesewing/examples/src/path_shiftfractionalong";
-import path_split from "@freesewing/examples/src/path_split";
-import path_start from "@freesewing/examples/src/path_start";
-import path_translate from "@freesewing/examples/src/path_translate";
-import path_trim from "@freesewing/examples/src/path_trim";
-// Plugins
-import plugin_cutonfold from "@freesewing/examples/src/plugin_cutonfold";
-import plugin_dimension from "@freesewing/examples/src/plugin_dimension";
-import plugin_grainline from "@freesewing/examples/src/plugin_grainline";
-import plugin_logo from "@freesewing/examples/src/plugin_logo";
-import plugin_scalebox from "@freesewing/examples/src/plugin_scalebox";
-import plugin_title from "@freesewing/examples/src/plugin_title";
-// Point API
-import point_angle from "@freesewing/examples/src/point_angle";
-import point_attr from "@freesewing/examples/src/point_attr";
-import point_clone from "@freesewing/examples/src/point_clone";
-import point_copy from "@freesewing/examples/src/point_copy";
-import point_dist from "@freesewing/examples/src/point_dist";
-import point_dx from "@freesewing/examples/src/point_dx";
-import point_dy from "@freesewing/examples/src/point_dy";
-import point_flipx from "@freesewing/examples/src/point_flipx";
-import point_flipy from "@freesewing/examples/src/point_flipy";
-import point_shift from "@freesewing/examples/src/point_shift";
-import point_shiftfractiontowards from "@freesewing/examples/src/point_shiftfractiontowards";
-import point_shifttowards from "@freesewing/examples/src/point_shifttowards";
-import point_shiftoutwards from "@freesewing/examples/src/point_shiftoutwards";
-import point_sitson from "@freesewing/examples/src/point_sitson";
-import point_rotate from "@freesewing/examples/src/point_rotate";
-import point_translate from "@freesewing/examples/src/point_translate";
-// Utils API
-import utils_linesintersect from "@freesewing/examples/src/utils_linesintersect";
-import utils_beamsintersect from "@freesewing/examples/src/utils_beamsintersect";
-import utils_beamintersectsx from "@freesewing/examples/src/utils_beamintersectsx";
-import utils_beamintersectsy from "@freesewing/examples/src/utils_beamintersectsy";
-import utils_lineintersectscurve from "@freesewing/examples/src/utils_lineintersectscurve";
-import utils_curvesintersect from "@freesewing/examples/src/utils_curvesintersect";
-import utils_pointonbeam from "@freesewing/examples/src/utils_pointonbeam";
-import utils_pointonline from "@freesewing/examples/src/utils_pointonline";
-import utils_pointoncurve from "@freesewing/examples/src/utils_pointoncurve";
-import utils_circlesintersect from "@freesewing/examples/src/utils_circlesintersect";
-import utils_beamintersectscircle from "@freesewing/examples/src/utils_beamintersectscircle";
-import utils_lineintersectscircle from "@freesewing/examples/src/utils_lineintersectscircle";
-import utils_curveintersectsx from "@freesewing/examples/src/utils_curveintersectsx";
-import utils_curveintersectsy from "@freesewing/examples/src/utils_curveintersectsy";
-import utils_splitcurve from "@freesewing/examples/src/utils_splitcurve";
-// Various
-import settings_sa from "@freesewing/examples/src/settings_sa";
-import snippet from "@freesewing/examples/src/snippet";
-import snippet_attr from "@freesewing/examples/src/snippet_attr";
-import snippet_clone from "@freesewing/examples/src/snippet_clone";
-
-export default {
-  path_ops,
-  path_ops,
-  path_ops,
-  path_ops,
-  path_ops,
-  path_ops,
-  path_attr,
-  path_clone,
-  path_divide,
-  path_edge,
-  path_end,
-  path_intersects,
-  path_intersectsx,
-  path_intersectsy,
-  path_join,
-  path_length,
-  path_offset,
-  path_ops,
-  path_reverse,
-  path_shiftalong,
-  path_shiftfractionalong,
-  path_split,
-  path_start,
-  path_translate,
-  path_trim,
-  plugin_cutonfold,
-  plugin_dimension,
-  plugin_grainline,
-  plugin_logo,
-  plugin_scalebox,
-  plugin_title,
-  point_angle,
-  point_attr,
-  point_clone,
-  point_copy,
-  point_dist,
-  point_dx,
-  point_dy,
-  point_flipx,
-  point_flipy,
-  point_shift,
-  point_shiftfractiontowards,
-  point_shifttowards,
-  point_shiftoutwards,
-  point_sitson,
-  point_rotate,
-  point_translate,
-  settings_sa,
-  snippet,
-  snippet_attr,
-  snippet_clone,
-  utils_linesintersect,
-  utils_beamsintersect,
-  utils_beamintersectsx,
-  utils_beamintersectsy,
-  utils_lineintersectscurve,
-  utils_curvesintersect,
-  utils_pointonbeam,
-  utils_pointonline,
-  utils_pointoncurve,
-  utils_circlesintersect,
-  utils_beamintersectscircle,
-  utils_lineintersectscircle,
-  utils_curveintersectsx,
-  utils_curveintersectsy,
-  utils_splitcurve
-};

packages/components/src/Navbar/index.js

@@ -3,8 +3,13 @@ import PropTypes from "prop-types";
 import Logo from "../Logo";
 import Emblem from "../Emblem";
 import { FormattedMessage } from "react-intl";
+import useMediaQuery from "@material-ui/core/useMediaQuery";
 
 const Navbar = props => {
+  const mobile = useMediaQuery.unstable_useMediaQuery("(max-width:599px)");
+
+  if (mobile) return null;
+
   const renderNav = (key, nav) => {
     let title = nav.title || nav.text;
     let text =
@@ -58,34 +63,15 @@ const Navbar = props => {
   return (
     <header className="navbar">
       <div>
-        <div className="only-xs">
+        <div style={{ display: "flex" }}>
-          {
-            //Object.keys(props.navs.mleft).map(key =>
-            //renderNav(key, props.navs.mleft[key])
-            //)
-          }
-        </div>
-        <div className="not-xs">
           {logo}
           {emblem}
           {Object.keys(props.navs.left).map(key =>
             renderNav(key, props.navs.left[key])
           )}
         </div>
-        <div className="spread">
+        <div className="spread" />
-          <div className="only-xs">
+        <div style={{ display: "flex" }}>
-            {logo}
-            {emblem}
-          </div>
-        </div>
-        <div className="only-xs">
-          {
-            //Object.keys(props.navs.mright).map(key =>
-            //renderNav(key, props.navs.mright[key])
-            // )
-          }
-        </div>
-        <div className="not-xs">
           {Object.keys(props.navs.right).map(key =>
             renderNav(key, props.navs.right[key])
           )}

packages/components/src/Robot/index.js

@@ -0,0 +1,37 @@
+import React from "react";
+import PropTypes from "prop-types";
+import poses from "./poses";
+
+const Robot = props => {
+  return (
+    <svg
+      className={props.className}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size}
+      height={props.size}
+      viewBox={props.viewBox}
+    >
+      <path
+        stroke="none"
+        fill={props.color ? props.color : "currentColor"}
+        d={poses[props.pose]}
+      />
+    </svg>
+  );
+};
+
+Robot.propTypes = {
+  size: PropTypes.number,
+  viewBox: PropTypes.string,
+  pose: PropTypes.string
+};
+
+Robot.defaultProps = {
+  size: 124,
+  viewBox: "0 0 500 500",
+  className: "",
+  pose: "yay",
+  color: false
+};
+
+export default Robot;

packages/components/src/index.js

@@ -8,6 +8,7 @@ export { default as Icon } from "./Icon";
 export { default as Logo } from "./Logo";
 export { default as Navbar } from "./Navbar";
 export { default as Ogol } from "./Ogol";
+export { default as Robot } from "./Robot";
 export { default as SampleConfigurator } from "./SampleConfigurator";
 export { default as withGist } from "./withGist";
 export { default as withLanguage } from "./withLanguage";