feat(lab): More dev info on Xray mode

2022-06-18 18:15:17 +02:00 · 2022-06-18 18:15:17 +02:00 · 70e0da6ced
commit 70e0da6ced
parent 026c7adcd2
6 changed files with 245 additions and 77 deletions
--- 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>
  )
 }
--- a/sites/shared/components/workbench/draft/path/index.js
+++ b/sites/shared/components/workbench/draft/path/index.js
@ -330,13 +330,14 @@ 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' }}>
+        <div>
          <table className="border-collapse h-fit">
            <tbody>
              <Tr>
@ -373,6 +374,17 @@ const pathInfo = (props) => {
              </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')
--- a/sites/shared/components/workbench/draft/point/index.js
+++ b/sites/shared/components/workbench/draft/point/index.js
@ -29,7 +29,6 @@ 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>
@ -50,6 +49,15 @@ const pointInfo = (props) => props.point
          </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
--- 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
--- 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>
  )
 }
--- 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-')}
+        {...attr}
      >
-      {text}
+        <TextSpans {...props}/>
      </text>
+      {props.gist._state?.xray?.enabled && <XrayText {...props} attr={attr}/>}
+    </>
  )
 }