chore(components): Renamed Render to Draft

Note that this was already exported as Draft, and the Draft folder
was a symlink to Render. Now it's just called Draft.

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@freesewing/components",
-  "version": "2.5.1",
+  "version": "2.5.0",
   "description": "A collection of React components for FreeSewing web UIs",
   "author": "Joost De Cock <joost@decock.org> (https://github.com/joostdecock)",
   "homepage": "https://freesewing.org/",
@@ -71,7 +71,7 @@
   ],
   "publishConfig": {
     "access": "public",
-    "tag": "next"
+    "tag": "latest"
   },
   "engines": {
     "node": ">=8.0.0",

packages/components/src/Draft

@@ -1 +0,0 @@
-Render/

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

@@ -0,0 +1,17 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Circle = (props) => (
+  <circle
+    cx={props.point.x}
+    cy={props.point.y}
+    r={props.point.attributes.get('data-circle')}
+    {...props.point.attributes.asPropsIfPrefixIs('data-circle-')}
+  />
+)
+
+Circle.propTypes = {
+  point: PropTypes.object.isRequired
+}
+
+export default Circle

packages/components/src/Draft/Defs/Grid/index.js

@@ -1,26 +1,16 @@
-import React from "react";
+import React from 'react'
 
-const Grid = props => {
+const Grid = (props) => {
   let style = {
     style: {
-      fill: "none",
+      fill: 'none',
-      stroke: "currentColor"
+      stroke: 'currentColor'
     }
-  };
+  }
-  if (props.units === "imperial")
+  if (props.units === 'imperial')
     return (
-      <pattern
+      <pattern id="grid" height="25.4" width="25.4" patternUnits="userSpaceOnUse" key="grid">
-        id="grid"
+        <path className="gridline lg imperial" d="M 0 0 L 0 25.4 L 25.4 25.4" {...style} />
-        height="25.4"
-        width="25.4"
-        patternUnits="userSpaceOnUse"
-        key="grid"
-      >
-        <path
-          className="gridline lg imperial"
-          d="M 0 0 L 0 25.4 L 25.4 25.4"
-          {...style}
-        />
         <path
           className="gridline lg imperial"
           d="M 12.7 0 L 12.7 25.4 M 0 12.7 L 25.4 12.7"
@@ -37,26 +27,12 @@ const Grid = props => {
           {...style}
         />
       </pattern>
-    );
+    )
   else
     return (
-      <pattern
+      <pattern id="grid" height="100" width="100" patternUnits="userSpaceOnUse" key="grid">
-        id="grid"
+        <path className="gridline lg metric" d="M 0 0 L 0 100 L 100 100" {...style} />
-        height="100"
+        <path className="gridline metric" d="M 50 0 L 50 100 M 0 50 L 100 50" {...style} />
-        width="100"
-        patternUnits="userSpaceOnUse"
-        key="grid"
-      >
-        <path
-          className="gridline lg metric"
-          d="M 0 0 L 0 100 L 100 100"
-          {...style}
-        />
-        <path
-          className="gridline metric"
-          d="M 50 0 L 50 100 M 0 50 L 100 50"
-          {...style}
-        />
         <path
           className="gridline sm metric"
           d="M 10 0 L 10 100 M 20 0 L 20 100 M 30 0 L 30 100 M 40 0 L 40 100 M 60 0 L 60 100 M 70 0 L 70 100 M 80 0 L 80 100 M 90 0 L 90 100"
@@ -78,7 +54,7 @@ const Grid = props => {
           {...style}
         />
       </pattern>
-    );
+    )
-};
+}
 
-export default Grid;
+export default Grid

packages/components/src/Draft/Defs/Markers/index.js

@@ -0,0 +1,34 @@
+import React from 'react'
+
+const Markers = (props) => {
+  const markerProps = {
+    orient: 'auto',
+    refX: '0.0',
+    refY: '0.0',
+    style: { overflow: 'visible' }
+  }
+  const from = { d: 'M 0,0 L 12,-4 C 10,-2 10,2  12, 4 z' }
+  const to = { d: 'M 0,0 L -12,-4 C -10,-2 -10,2  -12, 4 z' }
+  const types = {
+    grainline: 'note',
+    cutonfold: 'note',
+    dimension: 'mark'
+  }
+  let output = []
+  for (let type in types) {
+    output.push(
+      <marker id={type + 'From'} key={type + '-from'} {...markerProps}>
+        <path className={types[type] + ' fill-' + types[type]} {...from} />
+      </marker>
+    )
+    output.push(
+      <marker id={type + 'To'} key={type + '-to'} {...markerProps}>
+        <path className={types[type] + ' fill-' + types[type]} {...to} />
+      </marker>
+    )
+  }
+
+  return output
+}
+
+export default Markers

packages/components/src/Draft/Defs/Snippets/index.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import logoPathString from './logo-path'
 
-const Snippets = props => {
+const Snippets = (props) => {
   const fill = { fill: 'currentColor', stroke: 'none' }
   const stroke = { fill: 'none', stroke: 'currentColor' }
   return [

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

@@ -0,0 +1,31 @@
+import React from 'react'
+import Markers from './Markers'
+import Snippets from './Snippets'
+import Grid from './Grid'
+
+const Defs = (props) => {
+  let paperlessGrids = null
+  if (props.paperless) {
+    paperlessGrids = []
+    for (let p in props.parts) {
+      let anchor = { x: 0, y: 0 }
+      if (typeof props.parts[p].points.gridAnchor !== 'undefined')
+        anchor = props.parts[p].points.gridAnchor
+      else if (typeof props.parts[p].points.anchor !== 'undefined')
+        anchor = props.parts[p].points.anchor
+      paperlessGrids.push(
+        <pattern id={'grid-' + p} key={'grid-' + p} xlinkHref="#grid" x={anchor.x} y={anchor.y} />
+      )
+    }
+  }
+  return (
+    <defs>
+      <Markers />
+      <Snippets />
+      <Grid units={props.units} />
+      {paperlessGrids}
+    </defs>
+  )
+}
+
+export default Defs

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

@@ -1,6 +1,6 @@
 import React from 'react'
 
-const DesignPath = props => {
+const DesignPath = (props) => {
   let output = []
   let i = 0
   let from = null

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

@@ -1,6 +1,6 @@
-import React from "react";
+import React from 'react'
 
-const DesignPoint = props => (
+const DesignPoint = (props) => (
   <g className={props.className}>
     <circle cx={props.point.x} cy={props.point.y} r="2" className="center" />
     <circle
@@ -9,7 +9,7 @@ const DesignPoint = props => (
       r="7.5"
       className="hovertrap"
       onClick={() =>
-        props.raiseEvent("point", {
+        props.raiseEvent('point', {
           point: props.point,
           name: props.name,
           part: props.part
@@ -17,6 +17,6 @@ const DesignPoint = props => (
       }
     />
   </g>
-);
+)
 
-export default DesignPoint;
+export default DesignPoint

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

@@ -1,20 +1,20 @@
-import React from "react";
+import React from 'react'
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types'
-import Path from "../Path";
+import Path from '../Path'
-import Point from "../Point";
+import Point from '../Point'
-import Snippet from "../Snippet";
+import Snippet from '../Snippet'
-import { getProps } from "../utils";
+import { getProps } from '../utils'
 
-const Part = props => {
+const Part = (props) => {
   const focusPoint = (point, i) => {
-    let p = props.part.points[point];
+    let p = props.part.points[point]
-    let pathString = `M ${p.x} ${props.part.topLeft.y} `;
+    let pathString = `M ${p.x} ${props.part.topLeft.y} `
-    pathString += `L ${p.x} ${props.part.bottomRight.y} `;
+    pathString += `L ${p.x} ${props.part.bottomRight.y} `
-    pathString += `M ${props.part.topLeft.x} ${p.y} `;
+    pathString += `M ${props.part.topLeft.x} ${p.y} `
-    pathString += `L ${props.part.bottomRight.x} ${p.y} `;
+    pathString += `L ${props.part.bottomRight.x} ${p.y} `
-    let classes = "focus point c" + (i % 4); // Cycle through 4 CSS classes
+    let classes = 'focus point c' + (i % 4) // Cycle through 4 CSS classes
     return (
-      <React.Fragment key={"fp" + point}>
+      <React.Fragment key={'fp' + point}>
         <path d={pathString} className={classes} />
         <circle
           cx={p.x}
@@ -22,25 +22,25 @@ const Part = props => {
           r="5"
           className={classes}
           onClick={() =>
-            props.raiseEvent("clearFocus", {
+            props.raiseEvent('clearFocus', {
               part: props.name,
-              type: "points",
+              type: 'points',
               name: point
             })
           }
         />
       </React.Fragment>
-    );
+    )
-  };
+  }
 
   const focusCoords = (p, i) => {
-    let pathString = `M ${p.x} ${props.part.topLeft.y} `;
+    let pathString = `M ${p.x} ${props.part.topLeft.y} `
-    pathString += `L ${p.x} ${props.part.bottomRight.y} `;
+    pathString += `L ${p.x} ${props.part.bottomRight.y} `
-    pathString += `M ${props.part.topLeft.x} ${p.y} `;
+    pathString += `M ${props.part.topLeft.x} ${p.y} `
-    pathString += `L ${props.part.bottomRight.x} ${p.y} `;
+    pathString += `L ${props.part.bottomRight.x} ${p.y} `
-    let classes = "focus coords c" + (i % 4); // Cycle through 4 CSS classes
+    let classes = 'focus coords c' + (i % 4) // Cycle through 4 CSS classes
     return (
-      <React.Fragment key={"cp" + i}>
+      <React.Fragment key={'cp' + i}>
         <path d={pathString} className={classes} />
         <circle
           cx={p.x}
@@ -48,16 +48,16 @@ const Part = props => {
           r="5"
           className={classes}
           onClick={() =>
-            props.raiseEvent("clearFocus", {
+            props.raiseEvent('clearFocus', {
               part: props.name,
-              type: "coords",
+              type: 'coords',
               data: p
             })
           }
         />
       </React.Fragment>
-    );
+    )
-  };
+  }
 
   let grid = props.paperless ? (
     <rect
@@ -66,41 +66,41 @@ const Part = props => {
       width={props.part.width}
       height={props.part.height}
       className="grid"
-      fill={"url(#grid-" + props.name + ")"}
+      fill={'url(#grid-' + props.name + ')'}
     />
-  ) : null;
+  ) : null
 
-  let focus = [];
+  let focus = []
   if (props.design) {
-    if (props.focus && typeof props.focus[props.name] !== "undefined") {
+    if (props.focus && typeof props.focus[props.name] !== 'undefined') {
       for (let i in props.focus[props.name].points)
-        focus.push(focusPoint(props.focus[props.name].points[i], i));
+        focus.push(focusPoint(props.focus[props.name].points[i], i))
       for (let i in props.focus[props.name].paths) {
-        let name = props.focus[props.name].paths[i];
+        let name = props.focus[props.name].paths[i]
         focus.push(
           <path
-            key={"fpa-" + name}
+            key={'fpa-' + name}
             d={props.part.paths[name].asPathstring()}
-            className={"focus path c" + (i % 4)}
+            className={'focus path c' + (i % 4)}
             onClick={() =>
-              props.raiseEvent("clearFocus", {
+              props.raiseEvent('clearFocus', {
                 part: props.name,
-                type: "paths",
+                type: 'paths',
                 name
               })
             }
           />
-        );
+        )
       }
       for (let i in props.focus[props.name].coords)
-        focus.push(focusCoords(props.focus[props.name].coords[i], i));
+        focus.push(focusCoords(props.focus[props.name].coords[i], i))
     }
   }
 
   return (
-    <g {...getProps(props.part)}>
+    <g {...getProps(props.part)} id={`part-${props.name}`}>
       {grid}
-      {Object.keys(props.part.paths).map(name => (
+      {Object.keys(props.part.paths).map((name) => (
         <Path
           key={name}
           name={name}
@@ -114,7 +114,7 @@ const Part = props => {
           raiseEvent={props.raiseEvent}
         />
       ))}
-      {Object.keys(props.part.points).map(name => (
+      {Object.keys(props.part.points).map((name) => (
         <Point
           key={name}
           name={name}
@@ -128,13 +128,13 @@ const Part = props => {
           raiseEvent={props.raiseEvent}
         />
       ))}
-      {Object.keys(props.part.snippets).map(name => (
+      {Object.keys(props.part.snippets).map((name) => (
         <Snippet key={name} name={name} snippet={props.part.snippets[name]} />
       ))}
       {focus}
     </g>
-  );
+  )
-};
+}
 
 Part.propTypes = {
   part: PropTypes.object.isRequired,
@@ -142,6 +142,6 @@ Part.propTypes = {
   language: PropTypes.string.isRequired,
   paperless: PropTypes.bool.isRequired,
   design: PropTypes.bool.isRequired
-};
+}
 
-export default Part;
+export default Part

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

@@ -0,0 +1,27 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import TextOnPath from '../TextOnPath'
+import DesignPath from '../DesignPath'
+import { getProps } from '../utils'
+
+const Path = (props) => {
+  if (!props.path.render) return null
+  const output = []
+  const pathId = 'path-' + props.part + '-' + props.name
+  if (props.design) output.push(<DesignPath {...props} key={'dpa-' + props.name} />)
+  output.push(
+    <path id={pathId} key={pathId} d={props.path.asPathstring()} {...getProps(props.path)} />
+  )
+  if (props.path.attributes.get('data-text'))
+    output.push(<TextOnPath key={'text-on-path-' + props.name} pathId={pathId} {...props} />)
+
+  return output
+}
+
+Path.propTypes = {
+  path: PropTypes.object.isRequired,
+  name: PropTypes.string.isRequired,
+  language: PropTypes.string.isRequired
+}
+
+export default Path

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

@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import DesignPoint from '../DesignPoint'
+import Text from '../Text'
+import Circle from '../Circle'
+
+const Point = (props) => {
+  const output = []
+  if (props.design)
+    output.push(<DesignPoint {...props} key={'dp-' + props.name} className="design point" />)
+  if (props.point.attributes.get('data-text'))
+    output.push(<Text {...props} key={'point-' + props.name} />)
+  if (props.point.attributes.get('data-circle'))
+    output.push(<Circle point={props.point} key={'circle-' + props.name} />)
+  if (output.length < 1) return null
+  else return output
+}
+
+Point.propTypes = {
+  point: PropTypes.object.isRequired,
+  name: PropTypes.string.isRequired,
+  language: PropTypes.string.isRequired
+}
+
+export default Point

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

@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { getProps } from '../utils'
+
+const Snippet = (props) => {
+  const snippetProps = {
+    xlinkHref: '#' + props.snippet.def,
+    x: props.snippet.anchor.x,
+    y: props.snippet.anchor.y
+  }
+  let scale = props.snippet.attributes.get('data-scale')
+  let rotate = props.snippet.attributes.get('data-rotate')
+  if (scale || rotate) {
+    snippetProps.transform = ''
+    if (scale) {
+      snippetProps.transform += `translate(${snippetProps.x}, ${snippetProps.y}) `
+      snippetProps.transform += `scale(${scale}) `
+      snippetProps.transform += `translate(${snippetProps.x * -1}, ${snippetProps.y * -1}) `
+    }
+    if (rotate) {
+      snippetProps.transform += `rotate(${rotate}, ${snippetProps.x}, ${snippetProps.y}) `
+    }
+  }
+
+  return <use {...snippetProps} {...getProps(props.snippet)} />
+}
+
+Snippet.propTypes = {
+  snippet: PropTypes.object.isRequired
+}
+
+export default Snippet

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

@@ -0,0 +1,39 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Svg = (props) => {
+  let attributes = {
+    xmlns: 'http://www.w3.org/2000/svg',
+    'xmlns:svg': 'http://www.w3.org/2000/svg',
+    xmlnsXlink: 'http://www.w3.org/1999/xlink',
+    xmlLang: props.language,
+    viewBox: `0 0 ${props.width} ${props.height}`,
+    className: props.className,
+    style: props.style
+  }
+
+  if (!props.embed) {
+    attributes.width = props.width + 'mm'
+    attributes.height = props.height + 'mm'
+  }
+  if (props.design) attributes.className += ' design'
+
+  return <svg {...attributes}>{props.children}</svg>
+}
+
+Svg.propTypes = {
+  embed: PropTypes.bool,
+  className: PropTypes.string,
+  language: PropTypes.string,
+  design: PropTypes.bool
+}
+
+Svg.defaultProps = {
+  embed: true,
+  design: false,
+  language: 'en',
+  className: 'freesewing draft',
+  style: {}
+}
+
+export default Svg

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

@@ -0,0 +1,49 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { strings } from '@freesewing/i18n'
+
+const Text = (props) => {
+  let text = []
+  // Handle translation
+  let translated = ''
+  for (let string of props.point.attributes.getAsArray('data-text')) {
+    if (strings[props.language]['plugin.' + string])
+      translated += strings[props.language]['plugin.' + string]
+    else translated += string
+    translated += ' '
+  }
+  // Handle muti-line text
+  if (translated.indexOf('\n') !== -1) {
+    let key = 0
+    let lines = translated.split('\n')
+    text.push(<tspan key={'tspan-' + key}>{lines.shift()}</tspan>)
+    for (let line of lines) {
+      key++
+      text.push(
+        <tspan
+          key={'tspan-' + key}
+          x={props.point.x}
+          dy={props.point.attributes.get('data-text-lineheight') || 12}
+        >
+          {line}
+        </tspan>
+      )
+    }
+  } else text.push(<tspan key="tspan-1">{translated}</tspan>)
+  return (
+    <text
+      x={props.point.x}
+      y={props.point.y}
+      {...props.point.attributes.asPropsIfPrefixIs('data-text-')}
+    >
+      {text}
+    </text>
+  )
+}
+
+Text.propTypes = {
+  point: PropTypes.object.isRequired,
+  language: PropTypes.string.isRequired
+}
+
+export default Text

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

@@ -0,0 +1,37 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { strings } from '@freesewing/i18n'
+
+const TextOnPath = (props) => {
+  let text = []
+  // Handle translation
+  let translated = ''
+  for (let string of props.path.attributes.getAsArray('data-text')) {
+    if (strings[props.language]['plugin.' + string])
+      translated += strings[props.language]['plugin.' + string]
+    else translated += string
+    translated += ' '
+  }
+  let textPathProps = {
+    xlinkHref: '#' + props.pathId,
+    startOffset: '0%'
+  }
+  let align = props.path.attributes.get('data-text-class')
+  if (align && align.indexOf('center') > -1) textPathProps.startOffset = '50%'
+  else if (align && align.indexOf('right') > -1) textPathProps.startOffset = '100%'
+
+  return (
+    <text>
+      <textPath {...textPathProps}>
+        <tspan {...props.path.attributes.asPropsIfPrefixIs('data-text-')}>{translated}</tspan>
+      </textPath>
+    </text>
+  )
+}
+
+TextOnPath.propTypes = {
+  path: PropTypes.object.isRequired,
+  language: PropTypes.string.isRequired
+}
+
+export default TextOnPath

packages/components/src/Draft/index.js

@@ -1,16 +1,16 @@
-import React from "react";
+import React from 'react'
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types'
-import Svg from "./Svg";
+import Svg from './Svg'
-import Defs from "./Defs";
+import Defs from './Defs'
-import Part from "./Part";
+import Part from './Part'
 
-const Draft = props => (
+const Draft = (props) => (
   <Svg
     embed={props.settings.embed}
     width={props.width}
     height={props.height}
     language={props.settings.locale}
-    id={props.settings.idPrefix + "svg"}
+    id={props.settings.idPrefix + 'svg'}
     design={props.design}
     style={props.style}
   >
@@ -21,7 +21,7 @@ const Draft = props => (
       design={props.design}
     />
     <g>
-      {Object.keys(props.parts).map(name => (
+      {Object.keys(props.parts).map((name) => (
         <Part
           part={props.parts[name]}
           language={props.settings.locale}
@@ -36,18 +36,18 @@ const Draft = props => (
       ))}
     </g>
   </Svg>
-);
+)
 
 Draft.propTypes = {
   parts: PropTypes.object.isRequired,
   settings: PropTypes.object.isRequired,
   design: PropTypes.bool
-};
+}
 
 Draft.defaultProps = {
   design: false,
   focus: false,
   style: {}
-};
+}
 
-export default Draft;
+export default Draft

packages/components/src/Draft/utils.js

@@ -0,0 +1,36 @@
+export const getProps = (obj) => {
+  /** I can't believe it but there seems to be no method on NPM todo this */
+  const cssKey = (key) => {
+    let chunks = key.split('-')
+    if (chunks.length > 1) {
+      key = chunks.shift()
+      for (let s of chunks) key += s.charAt(0).toUpperCase() + s.slice(1)
+    }
+
+    return key
+  }
+
+  const convert = (css) => {
+    let style = {}
+    let rules = css.split(';')
+    for (let rule of rules) {
+      let chunks = rule.split(':')
+      if (chunks.length === 2) style[cssKey(chunks[0].trim())] = chunks[1].trim()
+    }
+    return style
+  }
+
+  let rename = {
+    class: 'className',
+    'marker-start': 'markerStart',
+    'marker-end': 'markerEnd'
+  }
+  let props = {}
+  for (let key in obj.attributes.list) {
+    if (key === 'style') props[key] = convert(obj.attributes.get(key))
+    if (Object.keys(rename).indexOf(key) !== -1) props[rename[key]] = obj.attributes.get(key)
+    else if (key !== 'style') props[key] = obj.attributes.get(key)
+  }
+
+  return props
+}

packages/components/src/Render/Circle/index.js

@@ -1,17 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-const Circle = props => (
-  <circle
-    cx={props.point.x}
-    cy={props.point.y}
-    r={props.point.attributes.get("data-circle")}
-    {...props.point.attributes.asPropsIfPrefixIs("data-circle-")}
-  />
-);
-
-Circle.propTypes = {
-  point: PropTypes.object.isRequired
-};
-
-export default Circle;

packages/components/src/Render/Defs/Markers/index.js

@@ -1,34 +0,0 @@
-import React from "react";
-
-const Markers = props => {
-  const markerProps = {
-    orient: "auto",
-    refX: "0.0",
-    refY: "0.0",
-    style: { overflow: "visible" }
-  };
-  const from = { d: "M 0,0 L 12,-4 C 10,-2 10,2  12, 4 z" };
-  const to = { d: "M 0,0 L -12,-4 C -10,-2 -10,2  -12, 4 z" };
-  const types = {
-    grainline: "note",
-    cutonfold: "note",
-    dimension: "mark"
-  };
-  let output = [];
-  for (let type in types) {
-    output.push(
-      <marker id={type + "From"} key={type + "-from"} {...markerProps}>
-        <path className={types[type] + " fill-" + types[type]} {...from} />
-      </marker>
-    );
-    output.push(
-      <marker id={type + "To"} key={type + "-to"} {...markerProps}>
-        <path className={types[type] + " fill-" + types[type]} {...to} />
-      </marker>
-    );
-  }
-
-  return output;
-};
-
-export default Markers;

packages/components/src/Render/Defs/index.js

@@ -1,37 +0,0 @@
-import React from "react";
-import Markers from "./Markers";
-import Snippets from "./Snippets";
-import Grid from "./Grid";
-
-const Defs = props => {
-  let paperlessGrids = null;
-  if (props.paperless) {
-    paperlessGrids = [];
-    for (let p in props.parts) {
-      let anchor = { x: 0, y: 0 };
-      if (typeof props.parts[p].points.gridAnchor !== "undefined")
-        anchor = props.parts[p].points.gridAnchor;
-      else if (typeof props.parts[p].points.anchor !== "undefined")
-        anchor = props.parts[p].points.anchor;
-      paperlessGrids.push(
-        <pattern
-          id={"grid-" + p}
-          key={"grid-" + p}
-          xlinkHref="#grid"
-          x={anchor.x}
-          y={anchor.y}
-        />
-      );
-    }
-  }
-  return (
-    <defs>
-      <Markers />
-      <Snippets />
-      <Grid units={props.units} />
-      {paperlessGrids}
-    </defs>
-  );
-};
-
-export default Defs;

packages/components/src/Render/Path/index.js

@@ -1,39 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import TextOnPath from "../TextOnPath";
-import DesignPath from "../DesignPath";
-import { getProps } from "../utils";
-
-const Path = props => {
-  if (!props.path.render) return null;
-  const output = [];
-  const pathId = "path-" + props.part + "-" + props.name;
-  if (props.design)
-    output.push(<DesignPath {...props} key={"dpa-" + props.name} />);
-  output.push(
-    <path
-      id={pathId}
-      key={"path-" + props.name}
-      d={props.path.asPathstring()}
-      {...getProps(props.path)}
-    />
-  );
-  if (props.path.attributes.get("data-text"))
-    output.push(
-      <TextOnPath
-        key={"text-on-path-" + props.name}
-        pathId={pathId}
-        {...props}
-      />
-    );
-
-  return output;
-};
-
-Path.propTypes = {
-  path: PropTypes.object.isRequired,
-  name: PropTypes.string.isRequired,
-  language: PropTypes.string.isRequired
-};
-
-export default Path;

packages/components/src/Render/Point/index.js

@@ -1,31 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import DesignPoint from "../DesignPoint";
-import Text from "../Text";
-import Circle from "../Circle";
-
-const Point = props => {
-  const output = [];
-  if (props.design)
-    output.push(
-      <DesignPoint
-        {...props}
-        key={"dp-" + props.name}
-        className="design point"
-      />
-    );
-  if (props.point.attributes.get("data-text"))
-    output.push(<Text {...props} key={"point-" + props.name} />);
-  if (props.point.attributes.get("data-circle"))
-    output.push(<Circle point={props.point} key={"circle-" + props.name} />);
-  if (output.length < 1) return null;
-  else return output;
-};
-
-Point.propTypes = {
-  point: PropTypes.object.isRequired,
-  name: PropTypes.string.isRequired,
-  language: PropTypes.string.isRequired
-};
-
-export default Point;

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

@@ -1,37 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { getProps } from "../utils";
-
-const Snippet = props => {
-  const snippetProps = {
-    xlinkHref: "#" + props.snippet.def,
-    x: props.snippet.anchor.x,
-    y: props.snippet.anchor.y
-  };
-  let scale = props.snippet.attributes.get("data-scale");
-  let rotate = props.snippet.attributes.get("data-rotate");
-  if (scale || rotate) {
-    snippetProps.transform = "";
-    if (scale) {
-      snippetProps.transform += `translate(${snippetProps.x}, ${
-        snippetProps.y
-      }) `;
-      snippetProps.transform += `scale(${scale}) `;
-      snippetProps.transform += `translate(${snippetProps.x *
-        -1}, ${snippetProps.y * -1}) `;
-    }
-    if (rotate) {
-      snippetProps.transform += `rotate(${rotate}, ${snippetProps.x}, ${
-        snippetProps.y
-      }) `;
-    }
-  }
-
-  return <use {...snippetProps} {...getProps(props.snippet)} />;
-};
-
-Snippet.propTypes = {
-  snippet: PropTypes.object.isRequired
-};
-
-export default Snippet;

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

@@ -1,39 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-const Svg = props => {
-  let attributes = {
-    xmlns: "http://www.w3.org/2000/svg",
-    "xmlns:svg": "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
-    xmlLang: props.language,
-    viewBox: `0 0 ${props.width} ${props.height}`,
-    className: props.className,
-    style: props.style
-  };
-
-  if (!props.embed) {
-    attributes.width = props.width + "mm";
-    attributes.height = props.height + "mm";
-  }
-  if (props.design) attributes.className += " design";
-
-  return <svg {...attributes}>{props.children}</svg>;
-};
-
-Svg.propTypes = {
-  embed: PropTypes.bool,
-  className: PropTypes.string,
-  language: PropTypes.string,
-  design: PropTypes.bool
-};
-
-Svg.defaultProps = {
-  embed: true,
-  design: false,
-  language: "en",
-  className: "freesewing draft",
-  style: {}
-};
-
-export default Svg;

packages/components/src/Render/Text/index.js

@@ -1,49 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { strings } from "@freesewing/i18n";
-
-const Text = props => {
-  let text = [];
-  // Handle translation
-  let translated = "";
-  for (let string of props.point.attributes.getAsArray("data-text")) {
-    if (strings[props.language]["plugin." + string])
-      translated += strings[props.language]["plugin." + string];
-    else translated += string;
-    translated += " ";
-  }
-  // Handle muti-line text
-  if (translated.indexOf("\n") !== -1) {
-    let key = 0;
-    let lines = translated.split("\n");
-    text.push(<tspan key={"tspan-" + key}>{lines.shift()}</tspan>);
-    for (let line of lines) {
-      key++;
-      text.push(
-        <tspan
-          key={"tspan-" + key}
-          x={props.point.x}
-          dy={props.point.attributes.get("data-text-lineheight") || 12}
-        >
-          {line}
-        </tspan>
-      );
-    }
-  } else text.push(<tspan key="tspan-1">{translated}</tspan>);
-  return (
-    <text
-      x={props.point.x}
-      y={props.point.y}
-      {...props.point.attributes.asPropsIfPrefixIs("data-text-")}
-    >
-      {text}
-    </text>
-  );
-};
-
-Text.propTypes = {
-  point: PropTypes.object.isRequired,
-  language: PropTypes.string.isRequired
-};
-
-export default Text;

packages/components/src/Render/TextOnPath/index.js

@@ -1,40 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { strings } from "@freesewing/i18n";
-
-const TextOnPath = props => {
-  let text = [];
-  // Handle translation
-  let translated = "";
-  for (let string of props.path.attributes.getAsArray("data-text")) {
-    if (strings[props.language]["plugin." + string])
-      translated += strings[props.language]["plugin." + string];
-    else translated += string;
-    translated += " ";
-  }
-  let textPathProps = {
-    xlinkHref: "#" + props.pathId,
-    startOffset: "0%"
-  };
-  let align = props.path.attributes.get("data-text-class");
-  if (align && align.indexOf("center") > -1) textPathProps.startOffset = "50%";
-  else if (align && align.indexOf("right") > -1)
-    textPathProps.startOffset = "100%";
-
-  return (
-    <text>
-      <textPath {...textPathProps}>
-        <tspan {...props.path.attributes.asPropsIfPrefixIs("data-text-")}>
-          {translated}
-        </tspan>
-      </textPath>
-    </text>
-  );
-};
-
-TextOnPath.propTypes = {
-  path: PropTypes.object.isRequired,
-  language: PropTypes.string.isRequired
-};
-
-export default TextOnPath;

packages/components/src/Render/utils.js

@@ -1,38 +0,0 @@
-export const getProps = obj => {
-  /** I can't believe it but there seems to be no method on NPM todo this */
-  const cssKey = key => {
-    let chunks = key.split("-");
-    if (chunks.length > 1) {
-      key = chunks.shift();
-      for (let s of chunks) key += s.charAt(0).toUpperCase() + s.slice(1);
-    }
-
-    return key;
-  };
-
-  const convert = css => {
-    let style = {};
-    let rules = css.split(";");
-    for (let rule of rules) {
-      let chunks = rule.split(":");
-      if (chunks.length === 2)
-        style[cssKey(chunks[0].trim())] = chunks[1].trim();
-    }
-    return style;
-  };
-
-  let rename = {
-    class: "className",
-    "marker-start": "markerStart",
-    "marker-end": "markerEnd"
-  };
-  let props = {};
-  for (let key in obj.attributes.list) {
-    if (key === "style") props[key] = convert(obj.attributes.get(key));
-    if (Object.keys(rename).indexOf(key) !== -1)
-      props[rename[key]] = obj.attributes.get(key);
-    else if (key !== "style") props[key] = obj.attributes.get(key);
-  }
-
-  return props;
-};

packages/components/src/index.js

@@ -10,7 +10,6 @@ export default [
   'Logo',
   'Navbar',
   'Ogol',
-  'Render',
   'Robot',
   'Spinner',
   'SampleConfigurator',