feat(ds.dev): example is not a shared component

2021-12-24 17:13:48 +01:00 · 2021-12-24 17:13:48 +01:00 · e705da9e7f
commit e705da9e7f
parent cbac621186
18 changed files with 784 additions and 108 deletions
--- a/packages/freesewing.shared/components/mdx/example/Part/index.js
+++ b/packages/freesewing.shared/components/mdx/example/Part/index.js
@ -0,0 +1,138 @@
+import React from 'react'
+import Path from '../Path'
+import Point from '../Point'
+import Snippet from '../Snippet'
+import { getProps } from '../utils'
+
+const Part = (props) => {
+  const focusPoint = (point, i) => {
+    const p = props.part.points[point]
+    const pathString = `M ${p.x} ${props.part.topLeft.y} `
+      + `L ${p.x} ${props.part.bottomRight.y} `
+      + `M ${props.part.topLeft.x} ${p.y} `
+      + `L ${props.part.bottomRight.x} ${p.y} `
+    const classes = 'focus point c' + (i % 8) // Cycle through 8 colors
+    return (
+      <React.Fragment key={'fp' + point}>
+        <path d={pathString} className={classes} />
+        <circle
+          cx={p.x}
+          cy={p.y}
+          r="5"
+          className="contrast"
+          onClick={() =>
+            props.raiseEvent('clearFocus', {
+              part: props.name,
+              type: 'points',
+              name: point
+            })
+          }
+        />
+      </React.Fragment>
+    )
+  }
+
+  const focusCoords = (p, i) => {
+    let pathString = `M ${p.x} ${props.part.topLeft.y} `
+    pathString += `L ${p.x} ${props.part.bottomRight.y} `
+    pathString += `M ${props.part.topLeft.x} ${p.y} `
+    pathString += `L ${props.part.bottomRight.x} ${p.y} `
+    let classes = 'focus coords c' + (i % 4) // Cycle through 4 CSS classes
+    return (
+      <React.Fragment key={'cp' + i}>
+        <path d={pathString} className={classes} />
+        <circle
+          cx={p.x}
+          cy={p.y}
+          r="5"
+          className={classes}
+          onClick={() =>
+            props.raiseEvent('clearFocus', {
+              part: props.name,
+              type: 'coords',
+              data: p
+            })
+          }
+        />
+      </React.Fragment>
+    )
+  }
+
+  let grid = props.paperless ? (
+    <rect
+      x={props.part.topLeft.x}
+      y={props.part.topLeft.y}
+      width={props.part.width}
+      height={props.part.height}
+      className="grid"
+      fill={'url(#grid-' + props.name + ')'}
+    />
+  ) : null
+
+  let focus = []
+  if (props.develop) {
+    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))
+      for (let i in props.focus[props.name].paths) {
+        let name = props.focus[props.name].paths[i]
+        focus.push(
+          <path
+            key={'fpa-' + name}
+            d={props.part.paths[name].asPathstring()}
+            className={'focus path c' + (i % 4)}
+            onClick={() =>
+              props.raiseEvent('clearFocus', {
+                part: props.name,
+                type: 'paths',
+                name
+              })
+            }
+          />
+        )
+      }
+      for (let i in props.focus[props.name].coords)
+        focus.push(focusCoords(props.focus[props.name].coords[i], i))
+    }
+  }
+
+  return (
+    <g {...getProps(props.part)} id={`part-${props.name}`}>
+      {grid}
+      {Object.keys(props.part.paths).map((name) => (
+        <Path
+          key={name}
+          name={name}
+          part={props.name}
+          language={props.language}
+          path={props.part.paths[name]}
+          focus={props.focus}
+          topLeft={props.part.topLeft}
+          bottomRight={props.part.bottomRight}
+          develop={props.develop}
+          raiseEvent={props.raiseEvent}
+        />
+      ))}
+      {Object.keys(props.part.points).map((name) => (
+        <Point
+          key={name}
+          name={name}
+          part={props.name}
+          language={props.language}
+          point={props.part.points[name]}
+          focus={props.focus}
+          topLeft={props.part.topLeft}
+          bottomRight={props.part.bottomRight}
+          develop={props.develop}
+          raiseEvent={props.raiseEvent}
+        />
+      ))}
+      {Object.keys(props.part.snippets).map((name) => (
+        <Snippet key={name} name={name} snippet={props.part.snippets[name]} />
+      ))}
+      {focus}
+    </g>
+  )
+}
+
+export default Part