+
@@ -200,3 +208,6 @@ export const NavBar = () => {
}
+
+
+
diff --git a/src/react/toolTip copy.jsx b/src/react/toolTip copy.jsx
new file mode 100644
index 0000000..1425a22
--- /dev/null
+++ b/src/react/toolTip copy.jsx
@@ -0,0 +1,78 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+export const ToolTip = () => {
+ /**
+ * Fires when new element is mouseovered, checks if it has a tooltip attribute
+ * If it does, updates and unhides tooltip element after a preset timeout.
+ * The timout is reset if user moves off of the tooltipped element
+ *
+ * Unfortunately, new mouseover fires for svg children, which clears the
+ * tooltip state. We add hacky lines labelled svg workaround to bubbleup / ignore
+ * svg children mouseovers. We use prevTooltip ref check if new svg
+ * child mouseover is novel. If it's not, we ignore the event
+ */
+
+ const [text, setText] = useState(null)
+
+ const ref = useRef()
+
+ const activated = useRef(false)
+ const timeout = useRef(null)
+
+ const prevTooltip = useRef(null) // svg workaround
+
+ useEffect(() => {
+
+ const svgChildren = ['path', 'g', 'rect', 'circle']; // svg workaround
+
+ document.addEventListener('mouseover', (e) => {
+ let node = e.target;
+
+ while (svgChildren.includes(node.nodeName)) { // svg workaround
+ node = node.parentElement // svg workaround
+ } // svg workaround
+
+ const tooltip = node.getAttribute("tooltip")
+
+ if (tooltip == prevTooltip.current) return // svg workaround
+ prevTooltip.current = tooltip // svg workaround
+
+ clearTimeout(timeout.current)
+ if (tooltip) {
+ let { left, top, width, height } = node.getBoundingClientRect()
+ left = left + width / 2 - getTextWidth(tooltip) / 2 - 4 // 4 is padding
+ top = top + height + 6 // 6 is arrow height/width
+ setText(tooltip)
+ if (activated.current) {
+ ref.current.setAttribute('style', `left:${left}px; top:${top}px; visibility:visible`)
+ } else {
+ timeout.current = setTimeout(() => {
+ ref.current.setAttribute('style', `left:${left}px; top:${top}px; visibility:visible`)
+ activated.current = true
+ }, 1000);
+ }
+ } else {
+ ref.current.setAttribute('style', `visibility:hidden`)
+ activated.current = false
+ }
+ })
+ }, [])
+
+
+ return
+
+}
+
+
+function getTextWidth(text, font = "16px sans-serif") {
+ // https://stackoverflow.com/a/21015393
+ // re-use canvas object for better performance
+ let canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
+ let context = canvas.getContext("2d");
+ context.font = font;
+ let metrics = context.measureText(text);
+ return metrics.width;
+}
diff --git a/src/react/toolTip.jsx b/src/react/toolTip.jsx
index 5620d8f..a332765 100644
--- a/src/react/toolTip.jsx
+++ b/src/react/toolTip.jsx
@@ -19,7 +19,7 @@ export const ToolTip = () => {
const activated = useRef(false)
const timeout = useRef(null)
- const prevTooltip = useRef(null) // svg workaround
+ // const prevTooltip = useRef(null) // svg workaround
useEffect(() => {
@@ -34,8 +34,9 @@ export const ToolTip = () => {
const tooltip = node.getAttribute("tooltip")
- if (tooltip == prevTooltip.current) return // svg workaround
- prevTooltip.current = tooltip // svg workaround
+ // console.log(tooltip, prevTooltip.current)
+ // if (tooltip == prevTooltip.current) return // svg workaround
+ // prevTooltip.current = tooltip // svg workaround
clearTimeout(timeout.current)
if (tooltip) {
@@ -49,7 +50,7 @@ export const ToolTip = () => {
timeout.current = setTimeout(() => {
ref.current.setAttribute('style', `left:${left}px; top:${top}px; visibility:visible`)
activated.current = true
- }, 1000);
+ }, 700);
}
} else {
ref.current.setAttribute('style', `visibility:hidden`)
@@ -59,7 +60,7 @@ export const ToolTip = () => {
}, [])
- return
+ return
diff --git a/src/react/tree.jsx b/src/react/tree.jsx
index fc83c29..e29ddfa 100644
--- a/src/react/tree.jsx
+++ b/src/react/tree.jsx
@@ -50,7 +50,7 @@ const TreeEntry = ({ entId }) => {
const [_, forceUpdate] = useReducer(x => x + 1, 0);
const [mouseOn, setMouseOn] = useState(false)
- return
{
if (obj3d.userData.type == 'sketch') {
if (sc.activeSketch) {
@@ -71,7 +71,6 @@ const TreeEntry = ({ entId }) => {
}
}}
-
onPointerEnter={() => {
if (mouseOn) return
setMouseOn(true)
@@ -112,9 +111,13 @@ const TreeEntry = ({ entId }) => {
}
sc.render()
}}
+
+ tooltip= {obj3d.name[0] !='(' && "double click to edit"}
+ // tooltip= {obj3d.userData.name}
+
>
-
+
{entId}
diff --git a/tailwind.config.js b/tailwind.config.js
index e4a6284..5e98c0e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -13,6 +13,7 @@ module.exports = {
current: 'currentColor',
gray: colors.trueGray,
green: colors.emerald,
+ red: colors.red,
}
},
variants: {