From 70e0da6ced5e9653b2dc7cdd3811c91a64ba3ed6 Mon Sep 17 00:00:00 2001
From: Joost De Cock <joost@joost.at>
Date: Sat, 18 Jun 2022 18:15:17 +0200
Subject: [PATCH] feat(lab): More dev info on Xray mode

---
 .../components/workbench/draft/part/index.js  | 18 +++-
 .../components/workbench/draft/path/index.js  | 87 ++++++++++--------
 .../components/workbench/draft/point/index.js | 50 +++++-----
 .../workbench/draft/snippet/index.js          | 52 ++++++++++-
 .../workbench/draft/text-on-path/index.js     | 23 ++++-
 .../components/workbench/draft/text/index.js  | 92 ++++++++++++++++---
 6 files changed, 245 insertions(+), 77 deletions(-)

diff --git a/sites/shared/components/workbench/draft/part/index.js b/sites/shared/components/workbench/draft/part/index.js
index 2aec3ae500a..43cb0c3266d 100644
--- a/sites/shared/components/workbench/draft/part/index.js
+++ b/sites/shared/components/workbench/draft/part/index.js
@@ -62,18 +62,32 @@ const partInfo = (props) => {
           </Tr>
         </tbody>
       </table>
+      <div className="flex flex-row flex-wrap gap-2 mt-4">
       {props.gist?.only && props.gist.only.length > 0
         ? (
           <button
-            className="btn btn-primary btn-lg w-full mt-4"
+            className="btn btn-primary"
             onClick={() => props.unsetGist(['only'])}
           >Show all parts</button>
         ) : (
           <button
-            className="btn btn-primary btn-lg w-full mt-4"
+            className="btn btn-primary"
             onClick={() => props.updateGist(['only'], [props.partName])}
           >Show only this part</button>
         )}
+        <button
+          className="btn btn-success"
+          onClick={() => console.log(props.part)}
+        >console.log(part)</button>
+        <button
+          className="btn btn-success"
+          onClick={() => console.table(props.part.points)}
+        >console.table(part.points)</button>
+        <button
+          className="btn btn-success"
+          onClick={() => console.table(props.part.paths)}
+        >console.table(part.paths)</button>
+      </div>
     </div>
   )
 }
diff --git a/sites/shared/components/workbench/draft/path/index.js b/sites/shared/components/workbench/draft/path/index.js
index 32f21740930..0d136191323 100644
--- a/sites/shared/components/workbench/draft/path/index.js
+++ b/sites/shared/components/workbench/draft/path/index.js
@@ -330,49 +330,61 @@ export const Attributes = ({ list }) => list
     </ul>
   ) : null
 
-const pathInfo = (props) => {
+export const pathInfo = (props) => {
   const bbox = props.path.boundary()
 
   return (
     <div className="p-4 border bg-neutral bg-opacity-40 shadow rounded-lg">
       <h5 className="text-neutral-content text-center pb-4">Path info</h5>
       <div className="flex flex-row flex-wrap overflow-scroll" style={{ maxHeight: '80vh' }}>
-        <table className="border-collapse h-fit">
-          <tbody>
-            <Tr>
-              <KeyTd>Name</KeyTd>
-              <ValTd>{bbox.name}</ValTd>
-            </Tr>
-            <Tr>
-              <KeyTd>Length</KeyTd>
-              <ValTd>{round(props.path.length(), 2)}mm</ValTd>
-            </Tr>
-            <Tr>
-              <KeyTd>Width</KeyTd>
-              <ValTd>{round(bbox.bottomRight.x - bbox.topLeft.x, 2)}mm</ValTd>
-            </Tr>
-            <Tr>
-              <KeyTd>Height</KeyTd>
-              <ValTd>{round(bbox.bottomRight.y - bbox.topLeft.y, 2)}mm</ValTd>
-            </Tr>
-            <Tr>
-              <KeyTd>Top Left</KeyTd>
-              <ValTd>{pointCoords(bbox.topLeft)}</ValTd>
-            </Tr>
-            <Tr>
-              <KeyTd>Bottom Right</KeyTd>
-              <ValTd>{pointCoords(bbox.bottomRight)}</ValTd>
-            </Tr>
-            <Tr>
-              <KeyTd>Part</KeyTd>
-              <ValTd>{props.partName}</ValTd>
-            </Tr>
-            <Tr>
-              <KeyTd>Attributes</KeyTd>
-              <ValTd><Attributes list={bbox.attributes.list} /></ValTd>
-            </Tr>
-          </tbody>
-        </table>
+        <div>
+          <table className="border-collapse h-fit">
+            <tbody>
+              <Tr>
+                <KeyTd>Name</KeyTd>
+                <ValTd>{bbox.name}</ValTd>
+              </Tr>
+              <Tr>
+                <KeyTd>Length</KeyTd>
+                <ValTd>{round(props.path.length(), 2)}mm</ValTd>
+              </Tr>
+              <Tr>
+                <KeyTd>Width</KeyTd>
+                <ValTd>{round(bbox.bottomRight.x - bbox.topLeft.x, 2)}mm</ValTd>
+              </Tr>
+              <Tr>
+                <KeyTd>Height</KeyTd>
+                <ValTd>{round(bbox.bottomRight.y - bbox.topLeft.y, 2)}mm</ValTd>
+              </Tr>
+              <Tr>
+                <KeyTd>Top Left</KeyTd>
+                <ValTd>{pointCoords(bbox.topLeft)}</ValTd>
+              </Tr>
+              <Tr>
+                <KeyTd>Bottom Right</KeyTd>
+                <ValTd>{pointCoords(bbox.bottomRight)}</ValTd>
+              </Tr>
+              <Tr>
+                <KeyTd>Part</KeyTd>
+                <ValTd>{props.partName}</ValTd>
+              </Tr>
+              <Tr>
+                <KeyTd>Attributes</KeyTd>
+                <ValTd><Attributes list={bbox.attributes.list} /></ValTd>
+              </Tr>
+            </tbody>
+          </table>
+          <div className="flex flex-row flex-wrap gap-2 mt-4">
+            <button
+              className="btn btn-success"
+              onClick={() => console.log(props.path)}
+            >console.log(path)</button>
+            <button
+              className="btn btn-success"
+              onClick={() => console.table(props.path)}
+            >console.table(path)</button>
+          </div>
+        </div>
         <table className="border-collapse h-fit">
           <tbody>
             {props.path.ops.map((op, i) => (
@@ -438,6 +450,7 @@ const XrayPath = props => {
         {...getProps(props.path)}
         className="opacity-0 stroke-7xl stroke-contrast hover:opacity-25 hover:cursor-pointer"
         onClick={(evt) => { evt.preventDefault(); props.showInfo(pathInfo(props)) }}
+        markerStart="none" markerEnd="none"
       />
       {ops.length > 0
         ? ops.map((op,i) => (op.ops[1].type === 'curve')
diff --git a/sites/shared/components/workbench/draft/point/index.js b/sites/shared/components/workbench/draft/point/index.js
index 2110c8dd61a..1c6a5a4bf80 100644
--- a/sites/shared/components/workbench/draft/point/index.js
+++ b/sites/shared/components/workbench/draft/point/index.js
@@ -29,27 +29,35 @@ const pointInfo = (props) => props.point
   ? (
     <div className="p-4 border bg-neutral bg-opacity-60 shadow rounded-lg">
       <h5 className="text-neutral-content text-center pb-4">Point info</h5>
-      <div className="flex flex-row flex-wrap">
-        <table className="border-collapse h-fit">
-          <tbody>
-            <Tr>
-              <KeyTd>Coordinates</KeyTd>
-              <ValTd>{pointCoords(props.point)}</ValTd>
-            </Tr>
-            <Tr>
-              <KeyTd>Name</KeyTd>
-              <ValTd>{props.pointName}</ValTd>
-            </Tr>
-            <Tr>
-              <KeyTd>Part</KeyTd>
-              <ValTd>{props.partName}</ValTd>
-            </Tr>
-            <Tr>
-              <KeyTd>Attributes</KeyTd>
-              <ValTd><Attributes list={props.point.attributes.list} /></ValTd>
-            </Tr>
-          </tbody>
-        </table>
+      <table className="border-collapse h-fit">
+        <tbody>
+          <Tr>
+            <KeyTd>Coordinates</KeyTd>
+            <ValTd>{pointCoords(props.point)}</ValTd>
+          </Tr>
+          <Tr>
+            <KeyTd>Name</KeyTd>
+            <ValTd>{props.pointName}</ValTd>
+          </Tr>
+          <Tr>
+            <KeyTd>Part</KeyTd>
+            <ValTd>{props.partName}</ValTd>
+          </Tr>
+          <Tr>
+            <KeyTd>Attributes</KeyTd>
+            <ValTd><Attributes list={props.point.attributes.list} /></ValTd>
+          </Tr>
+        </tbody>
+      </table>
+      <div className="flex flex-col flex-wrap gap-2 mt-4">
+        <button
+          className="btn btn-success"
+          onClick={() => console.log(props.point)}
+        >console.log(point)</button>
+        <button
+          className="btn btn-success"
+          onClick={() => console.table(props.point)}
+        >console.table(point)</button>
       </div>
     </div>
   ) : null
diff --git a/sites/shared/components/workbench/draft/snippet/index.js b/sites/shared/components/workbench/draft/snippet/index.js
index 1d1fd0b1627..2c6f1ea9e6f 100644
--- a/sites/shared/components/workbench/draft/snippet/index.js
+++ b/sites/shared/components/workbench/draft/snippet/index.js
@@ -1,5 +1,49 @@
 import React from 'react'
 import { getProps } from '../utils'
+import { Tr, KeyTd, ValTd, Attributes, pointCoords } from '../path/index'
+
+const snippetInfo = (props) => {
+console.log(props.snippet)
+  return (
+    <div className="p-4 border bg-neutral bg-opacity-40 shadow rounded-lg">
+      <h5 className="text-neutral-content text-center pb-4">Snippet info</h5>
+      <table className="border-collapse h-fit">
+        <tbody>
+          <Tr>
+            <KeyTd>Def</KeyTd>
+            <ValTd>{props.snippet.def}</ValTd>
+          </Tr>
+          <Tr>
+            <KeyTd>Anchor</KeyTd>
+            <ValTd>{props.snippet.anchor.name}</ValTd>
+          </Tr>
+          <Tr>
+            <KeyTd>Coords</KeyTd>
+            <ValTd>{pointCoords(props.snippet.anchor)}</ValTd>
+          </Tr>
+          <Tr>
+            <KeyTd>Coords</KeyTd>
+            <ValTd>{pointCoords(props.snippet.anchor)}</ValTd>
+          </Tr>
+          <Tr>
+            <KeyTd>Attributes</KeyTd>
+            <ValTd><Attributes list={props.snippet.attributes.list}/></ValTd>
+          </Tr>
+        </tbody>
+      </table>
+      <div className="flex flex-col flex-wrap gap-2 mt-4">
+        <button
+          className="btn btn-success"
+          onClick={() => console.log(props.snippet)}
+        >console.log(snippet)</button>
+        <button
+          className="btn btn-success"
+          onClick={() => console.table(props.snippet)}
+        >console.table(snippet)</button>
+      </div>
+    </div>
+  )
+}
 
 const Snippet = (props) => {
   const snippetProps = {
@@ -21,7 +65,13 @@ const Snippet = (props) => {
     }
   }
 
-  return <use {...snippetProps} {...getProps(props.snippet)} />
+  return <use
+    {...snippetProps}
+    {...getProps(props.snippet)}
+    color="currentColor"
+    className="hover:cursor-pointer hover:fill-primary hover:text-secondary"
+    onClick={(evt) => { evt.stopPropagation(); props.showInfo(snippetInfo(props)) }}
+  />
 }
 
 export default Snippet
diff --git a/sites/shared/components/workbench/draft/text-on-path/index.js b/sites/shared/components/workbench/draft/text-on-path/index.js
index 9714cfb95b5..7d80cbd0375 100644
--- a/sites/shared/components/workbench/draft/text-on-path/index.js
+++ b/sites/shared/components/workbench/draft/text-on-path/index.js
@@ -1,4 +1,15 @@
 import { useTranslation } from 'next-i18next'
+import { pathInfo } from '../path/index'
+
+const XrayTextOnPath = props => (
+    <tspan
+      {...props.attr}
+      dangerouslySetInnerHTML={{__html: props.translated}}
+      className={`${props.attr.className} no-fill stroke-transparent stroke-4xl opacity-10 hover:cursor-pointer hover:stroke-secondary`}
+      style={{strokeOpacity: 0.25}}
+      onClick={(evt) => { evt.stopPropagation(); props.showInfo(pathInfo(props)) }}
+    />
+)
 
 const TextOnPath = (props) => {
   const { t } = useTranslation(['app'])
@@ -16,14 +27,18 @@ const TextOnPath = (props) => {
   if (align && align.indexOf('center') > -1) textPathProps.startOffset = '50%'
   else if (align && align.indexOf('right') > -1) textPathProps.startOffset = '100%'
 
+  const attr = props.path.attributes.asPropsIfPrefixIs('data-text-')
+
   return (
     <text>
       <textPath {...textPathProps}>
-        <tspan
-          {...props.path.attributes.asPropsIfPrefixIs('data-text-')}
-          dangerouslySetInnerHTML={{__html: translated}}
-        />
+        <tspan {...attr} dangerouslySetInnerHTML={{__html: translated}} />
       </textPath>
+      {props.gist._state?.xray?.enabled && (
+        <textPath {...textPathProps}>
+          <XrayTextOnPath {...props} attr={attr} translated={translated}/>
+        </textPath>
+      )}
     </text>
   )
 }
diff --git a/sites/shared/components/workbench/draft/text/index.js b/sites/shared/components/workbench/draft/text/index.js
index 7671e38e2b1..a64547e7793 100644
--- a/sites/shared/components/workbench/draft/text/index.js
+++ b/sites/shared/components/workbench/draft/text/index.js
@@ -1,11 +1,63 @@
 import { useTranslation } from 'next-i18next'
+import { Tr, KeyTd, ValTd, Attributes, pointCoords } from '../path/index'
 
-const Text = (props) => {
+const textInfo = (props) => props.point
+  ? (
+    <div className="p-4 border bg-neutral bg-opacity-60 shadow rounded-lg">
+      <h5 className="text-neutral-content text-center pb-4">Text info</h5>
+      <table className="border-collapse h-fit">
+        <tbody>
+          <Tr>
+            <KeyTd>Coordinates</KeyTd>
+            <ValTd>{pointCoords(props.point)}</ValTd>
+          </Tr>
+          <Tr>
+            <KeyTd>Name</KeyTd>
+            <ValTd>{props.pointName}</ValTd>
+          </Tr>
+          <Tr>
+            <KeyTd>Part</KeyTd>
+            <ValTd>{props.partName}</ValTd>
+          </Tr>
+          <Tr>
+            <KeyTd>Attributes</KeyTd>
+            <ValTd><Attributes list={props.point.attributes.list} /></ValTd>
+          </Tr>
+        </tbody>
+      </table>
+      <div className="flex flex-col flex-wrap gap-2 mt-4">
+        <button
+          className="btn btn-success"
+          onClick={() => console.log(props.point)}
+        >console.log(point)</button>
+        <button
+          className="btn btn-success"
+          onClick={() => console.table(props.point)}
+        >console.table(point)</button>
+      </div>
+    </div>
+  ) : null
+
+const XrayText = props => (
+  <text
+    x={props.point.x}
+    y={props.point.y}
+    {...props.attr}
+  >
+    <TextSpans {...props}
+      className="stroke-transparent stroke-4xl opacity-10 hover:cursor-pointer hover:stroke-secondary"
+      style={{strokeOpacity: 0.25}}
+      onClick={(evt) => { evt.stopPropagation(); props.showInfo(textInfo(props)) }}
+    />
+  </text>
+)
+
+const TextSpans = ({ point, className='', style={}, onClick=null }) => {
   const { t } = useTranslation(['app'])
   let text = []
   // Handle translation
   let translated = ''
-  for (let string of props.point.attributes.getAsArray('data-text')) {
+  for (let string of point.attributes.getAsArray('data-text')) {
     translated += t(string.toString()).replace(/&quot;/g, '"') + ' '
   }
   // Handle muti-line text
@@ -18,23 +70,39 @@ const Text = (props) => {
       text.push(
         <tspan
           key={'tspan-' + key}
-          x={props.point.x}
-          dy={props.point.attributes.get('data-text-lineheight') || 12}
+          x={point.x}
+          dy={point.attributes.get('data-text-lineheight') || 12}
+          className={className} style={style}
+          onClick={onClick}
         >
           {line.toString().replace(/&quot;/g, '"')}
         </tspan>
       )
     }
-  } else text.push(<tspan key="tspan-1">{translated}</tspan>)
+  } else text.push(<tspan key="tspan-1"
+      className={className}
+      style={style}
+      onClick={onClick}
+    >{translated}</tspan>)
+
+  return text
+
+}
+
+const Text = (props) => {
+  const attr = props.point.attributes.asPropsIfPrefixIs('data-text-')
 
   return (
-    <text
-      x={props.point.x}
-      y={props.point.y}
-      {...props.point.attributes.asPropsIfPrefixIs('data-text-')}
-    >
-      {text}
-    </text>
+    <>
+      <text
+        x={props.point.x}
+        y={props.point.y}
+        {...attr}
+      >
+        <TextSpans {...props}/>
+      </text>
+      {props.gist._state?.xray?.enabled && <XrayText {...props} attr={attr}/>}
+    </>
   )
 }