feat(lab): Hover info for parts

sites/shared/components/workbench/draft/part/index.js

@@ -3,6 +3,8 @@ import Path from '../path'
 import Point from '../point'
 import Snippet from '../snippet'
 import { getProps } from '../utils'
+import { round } from 'shared/utils'
+import { Tr, KeyTd, ValTd, Attributes, pointCoords } from '../path/index'
 
 class ErrorBoundary extends React.Component {
   constructor(props) {
@@ -27,12 +29,56 @@ class ErrorBoundary extends React.Component {
   }
 }
 
+const partInfo = (props) => {
+
+  return (
+    <div className="p-4 border bg-neutral bg-opacity-40 shadow rounded-lg">
+      <h5 className="text-neutral-content text-center pb-4">Part info</h5>
+      <table className="border-collapse h-fit">
+        <tbody>
+          <Tr>
+            <KeyTd>Name</KeyTd>
+            <ValTd>{props.partName}</ValTd>
+          </Tr>
+          <Tr>
+            <KeyTd>Width</KeyTd>
+            <ValTd>{round(props.part.width,2)}mm</ValTd>
+          </Tr>
+          <Tr>
+            <KeyTd>Height</KeyTd>
+            <ValTd>{round(props.part.height,2)}mm</ValTd>
+          </Tr>
+          <Tr>
+            <KeyTd>Top Left</KeyTd>
+            <ValTd>{pointCoords(props.part.topLeft)}</ValTd>
+          </Tr>
+          <Tr>
+            <KeyTd>Bottom Right</KeyTd>
+            <ValTd>{pointCoords(props.part.bottomRight)}</ValTd>
+          </Tr>
+          <Tr>
+            <KeyTd>Attributes</KeyTd>
+            <ValTd><Attributes list={props.part.attributes.list} /></ValTd>
+          </Tr>
+        </tbody>
+      </table>
+      {props.gist?.only && props.gist.only.length > 0
+        ? (
+          <button
+            className="btn btn-primary btn-lg w-full mt-4"
+            onClick={() => props.unsetGist(['only'])}
+          >Show all parts</button>
+        ) : (
+          <button
+            className="btn btn-primary btn-lg w-full mt-4"
+            onClick={() => props.updateGist(['only'], [props.partName])}
+          >Show only this part</button>
+        )}
+    </div>
+  )
+}
+
 const XrayPart = props => {
-  // Don't bother if this is the only part on display
-  if (props.gist.only && props.gist.only.length === 1) return null
-  const i = props.gist._state?.xray?.reveal
-    ? Object.keys(props.gist._state.xray.reveal).indexOf(props.partName)%10
-    : 0
   const { topLeft, bottomRight } = props.part
 
   return (
@@ -42,7 +88,11 @@ const XrayPart = props => {
         L ${topLeft.x} ${bottomRight.y}
         L ${bottomRight.x} ${bottomRight.y}
         L ${bottomRight.x} ${topLeft.y}
-        z`} className={`fill-color-${i} opacity-10`} />
+        z
+        `} className={`peer stroke-note lashed opacity-30 hover:opacity-90 fill-fabric hover:cursor-pointer hover:stroke-mark`}
+        style={{ fillOpacity: 0}}
+        onClick={(evt) => { evt.stopPropagation(); props.showInfo(partInfo(props)) }}
+      />
     </g>
   )
 }
@@ -66,8 +116,7 @@ const Part = props => {
         {grid}
         {
           props.gist?._state?.xray?.enabled &&
-          props.gist?._state?.xray?.reveal?.[partName]
-          && <XrayPart {...props} />
+          <XrayPart {...props} />
         }
         {Object.keys(part.paths).map((pathName) => (
           <Path

sites/shared/components/workbench/draft/path/index.js

@@ -11,7 +11,7 @@ export const Tr = ({ children }) => <tr className="border border-base-300">{chil
 export const KeyTd = ({ children }) => <td className="p-3 text-right">{children}:</td>
 export const ValTd = ({ children }) => <td className="p-3">{children}</td>
 
-const TextAlongPath = ({id, size, fill="var(--pattern-note)", txt}) => (
+export const TextAlongPath = ({id, size, fill="var(--pattern-note)", txt}) => (
   <text>
     <textPath xlinkHref={`#${id}`} startOffset="50%">
       <tspan
@@ -24,7 +24,7 @@ const TextAlongPath = ({id, size, fill="var(--pattern-note)", txt}) => (
     </textPath>
   </text>
 )
-const PointCircle = ({ point, size, className="stroke-neutral-content" }) => (
+export const PointCircle = ({ point, size, className="stroke-neutral-content" }) => (
   <circle
     cx={point.x} cy={point.y} r={size/50}
     className={className}
@@ -76,7 +76,7 @@ const pathDimensions = (from, to, cp1=false, cp2=false, path=false) => {
   }
 }
 
-const Defs = () => (
+export const Defs = () => (
   <defs>
     <marker orient="auto" refY="0.0" refX="0.0" id="arrowTo" style={{overflow: 'visible'}}>
       <path className="fill-neutral-content" d="M 0,0 L -12,-4 C -10,-2 -10,2  -12, 4 z" fillOpacity="0.5"></path>
@@ -87,7 +87,7 @@ const Defs = () => (
   </defs>
 )
 
-const svgProps = {
+export const svgProps = {
   xmlns: "http://www.w3.org/2000/svg",
   xmlnsSvg: "http://www.w3.org/2000/svg",
   xmlnsXlink: "http://www.w3.org/1999/xlink",