wip(lab): Progess on Xray for points and paths

packages/freesewing.shared/components/workbench/menu/index.js

@@ -12,6 +12,16 @@ export const Details = props => (
   </details>
 )
 export const Deg = props => <span className="text-3xl inline-block p-0 leading-3 px-2 translate-y-3">&deg;</span>
+export const NoSumDiv = props => (
+  <div className={`
+    grow px-2 ml-2 border-l-2
+    ${linkClasses}
+    hover:cursor-resize
+    hover:border-secondary
+    sm:hover:border-secondary-focus
+    text-base-content sm:text-neutral-content
+  `}>{props.children}</div>
+)
 export const SumDiv = props => (
   <div className={`
     grow pl-2 border-l-2

packages/freesewing.shared/components/workbench/menu/xray/attributes.js

@@ -0,0 +1,48 @@
+import { Chevron } from 'shared/components/navigation/primary.js'
+import { Ul, Li, Details, Summary, SumDiv, NoSumDiv, Deg } from 'shared/components/workbench/menu'
+import { round } from 'shared/utils.js'
+
+const XrayAttributes = ({ attr=false }) => {
+  if (!attr || !attr.list || Object.keys(attr.list).length < 1) return null
+
+  return (
+    <Li>
+      <Details>
+        <Summary>
+          <SumDiv>
+            <Deg />
+            Attributes
+          </SumDiv>
+          <Chevron />
+        </Summary>
+        <Ul>
+          {Object.keys(attr.list).map(at => (
+          <Li>
+            <Details>
+              <Summary>
+                <SumDiv>
+                  <Deg />
+                  {at}
+                </SumDiv>
+                <Chevron />
+              </Summary>
+              <Ul>
+                {attr.list[at].map(val => (
+                  <Li key={val}>
+                    <NoSumDiv>
+                      <Deg />
+                      <span>{val}</span>
+                    </NoSumDiv>
+                  </Li>
+                ))}
+              </Ul>
+            </Details>
+          </Li>
+          ))}
+        </Ul>
+      </Details>
+    </Li>
+  )
+}
+
+export default XrayAttributes

packages/freesewing.shared/components/workbench/menu/xray/list.js

@@ -14,6 +14,8 @@ const XrayList = props => {
   let title = props.app.t(`parts.${props.partName}`)
   if (title !== props.partName || true) title + ` (${props.partName})`
 
+  const part = props.gist.xray.parts[props.partName]
+
   return (
     <Li>
       <Details>
@@ -31,7 +33,7 @@ const XrayList = props => {
           </button>
           <Chevron w={6} m={3}/>
         </Summary>
-        {Object.keys(types).map(type => props.gist.xray.parts[props.partName][type] && (
+        {Object.keys(types).map(type => part[type] && (
           <Ul>
             <Li>
               <Details>
@@ -39,8 +41,16 @@ const XrayList = props => {
                   <SumDiv>
                     <span className="capitalize">{type}</span>
                   </SumDiv>
+                  <button
+                    className="text-accent px-3 hover:text-secondary-focus"
+                    onClick={() => props.unsetGist(['xray', 'parts', props.partName, type])}
+                  >
+                    <ClearIcon />
+                  </button>
+                  <Chevron />
                 </Summary>
-                {Object.keys(props.gist.xray.parts[props.partName][type])
+                <Ul>
+                  {Object.keys(part[type])
                     .map(id => (
                       <Li>
                         <Details>
@@ -49,13 +59,21 @@ const XrayList = props => {
                               <Deg />
                               <span>{id}</span>
                             </SumDiv>
+                            <button
+                              className="text-accent px-3 hover:text-secondary-focus"
+                              onClick={() => props.unsetGist(['xray', 'parts', props.partName, type, id])}
+                            >
+                              <ClearIcon />
+                            </button>
                             <Chevron />
                           </Summary>
-                        {types[type]({...props, id})}
+                          {type === 'paths' && <Path path={part.paths[id]} />}
+                          {type === 'points' && <Point point={part.points[id]} />}
                         </Details>
                       </Li>
                     ))
                   }
+                </Ul>
               </Details>
             </Li>
           </Ul>

packages/freesewing.shared/components/workbench/menu/xray/path-ops.js

@@ -0,0 +1,76 @@
+import { Chevron } from 'shared/components/navigation/primary.js'
+import { Ul, Li, Details, Summary, SumDiv, NoSumDiv, Deg } from 'shared/components/workbench/menu'
+import { round } from 'shared/utils.js'
+import Point from './point.js'
+
+const MoveLine = ({ op }) => <Point point={op.to} />
+const Curve = ({ op }) => ['cp1', 'cp2', 'to'].map(pnt => (
+  <Li key={pnt}>
+    <Details>
+      <Summary>
+        <SumDiv>
+          <Deg />
+          <span className="font-bold">{pnt}</span>
+        </SumDiv>
+        <Chevron />
+      </Summary>
+      <Point point={op[pnt]} />
+    </Details>
+  </Li>
+))
+const Close = () => (
+  <p>Close</p>
+)
+
+const XrayPathOp = ({ op }) => (
+  <Li>
+  {op.type === 'close'
+    ? (
+      <NoSumDiv>
+        <Deg />
+        <span className="font-bold">{op.type}</span>
+      </NoSumDiv>
+    ) : (
+      <Details>
+        <Summary>
+          <SumDiv>
+            <Deg />
+            <span className="font-bold">{op.type}</span>
+            <span>To</span>
+          </SumDiv>
+          <Chevron />
+        </Summary>
+        <Ul>
+          {op.type === 'curve'
+            ? <Curve op={op} />
+            : <MoveLine op={op} />
+          }
+        </Ul>
+      </Details>
+    )
+  }
+  </Li>
+)
+
+const XrayPathOps = ({ ops=false }) => {
+  if (!ops || ops.length < 1) return null
+
+  return (
+    <Li>
+      <Details>
+        <Summary>
+          <SumDiv>
+            <Deg />
+            PathOps
+          </SumDiv>
+          <Chevron />
+        </Summary>
+        <Ul>
+          {ops.map(op => <XrayPathOp op={op} />)}
+        </Ul>
+      </Details>
+    </Li>
+  )
+}
+
+export default XrayPathOps

packages/freesewing.shared/components/workbench/menu/xray/path.js

@@ -1,14 +1,26 @@
+import { Ul, Li, Details, Summary, NoSumDiv, Deg } from 'shared/components/workbench/menu'
+import ClearIcon from 'shared/components/icons/clear.js'
+import Attributes from './attributes.js'
+import Ops from './path-ops.js'
 /*
  * Things to add
  *
- * attributes
  * ops
- * render
  */
 
 
-const XrayPath = props => {
-    return <pre>{JSON.stringify(props.gist.xray.parts[props.partName].paths[props.id], null ,2)}</pre>
-}
+const XrayPath = ({ path }) => (
+  <Ul>
+    <Li>
+      <NoSumDiv>
+        <Deg />
+        <span className="font-bold mr-2">Render =</span>
+        <span>{JSON.stringify(path.render)}</span>
+      </NoSumDiv>
+    </Li>
+    <Attributes attr={path.attributes} />
+    <Ops ops={path.ops} />
+  </Ul>
+)
 
 export default XrayPath

packages/freesewing.shared/components/workbench/menu/xray/point.js

@@ -1,9 +1,20 @@
-import { Ul, Li, Details, Summary, SumDiv, Deg } from 'shared/components/workbench/menu'
+import { Ul, Li, Details, Summary, NoSumDiv, Deg } from 'shared/components/workbench/menu'
+import { round } from 'shared/utils.js'
+import Attributes from './attributes.js'
 
-const XrayPoint = props => [
-  <Li key='x'>x: {props.x}</Li>,
-  <Li key='y'>x: {props.y}</Li>,
-  <Li key='attributes'>Attributes: {props.y}</Li>,
-]
+const XrayPoint = ({ point }) => (
+  <Ul>
+    {['x', 'y'].map(coord => (
+      <Li key={coord}>
+        <NoSumDiv>
+          <Deg />
+          <span className="font-bold mr-2">{coord} =</span>
+          <span>{round(point[coord])}</span>
+        </NoSumDiv>
+      </Li>
+    ))}
+    <Attributes attr={point.attributes} />
+  </Ul>
+)
 
 export default XrayPoint