{
textShadow: `-1px -1px 0 ${node.color}, 1px -1px 0 ${node.color}, -1px 1px 0 ${node.color}, 1px 1px 0 ${node.color}`,
textAlign: 'center',
}}
+ onMouseEnter={() => {
+ setHoveredId(node.id)
+ setIsLabelHovered(true)
+ }}
+ onMouseLeave={() => {
+ setHoveredId(null)
+ setIsLabelHovered(false)
+ }}
+ onMouseDown={(event) => {
+ if (allowZoneLabelEditing) {
+ event.stopPropagation()
+ }
+ }}
>
-
{node.name}
+ {allowZoneLabelEditing && isEditingLabel ? (
+
setLabelValue(event.target.value)}
+ onBlur={() => {
+ if (ignoreBlurSaveRef.current) {
+ ignoreBlurSaveRef.current = false
+ return
+ }
+ stopLabelEditing(true)
+ }}
+ onClick={(event) => event.stopPropagation()}
+ onMouseDown={(event) => {
+ event.stopPropagation()
+ }}
+ onKeyDown={(event) => {
+ event.stopPropagation()
+ if (event.key === 'Enter') {
+ event.preventDefault()
+ ignoreBlurSaveRef.current = true
+ stopLabelEditing(true)
+ return
+ }
+ if (event.key === 'Escape') {
+ event.preventDefault()
+ ignoreBlurSaveRef.current = true
+ stopLabelEditing(false)
+ }
+ }}
+ style={{
+ width: `${Math.max((labelValue || node.name || '').length + 1, 4)}ch`,
+ maxWidth: '220px',
+ border: 'none',
+ borderBottom: `1px solid ${node.color}`,
+ backgroundColor: 'transparent',
+ color: 'white',
+ textShadow: `-1px -1px 0 ${node.color}, 1px -1px 0 ${node.color}, -1px 1px 0 ${node.color}, 1px 1px 0 ${node.color}`,
+ outline: 'none',
+ padding: 0,
+ margin: 0,
+ fontSize: 'inherit',
+ lineHeight: 'inherit',
+ fontFamily: 'inherit',
+ }}
+ />
+ ) : (
+
+ )}
{
marginTop: '2px',
opacity: 0,
transition: 'opacity 0.5s ease-in-out',
+ pointerEvents: 'none',
}}
>
= ({ children, selectionManager = 'default' }) => {
+const Viewer: React.FC = ({
+ children,
+ selectionManager = 'default',
+ allowZoneLabelEditing = false,
+}) => {
const theme = useViewer((state) => state.theme)
+ const setAllowZoneLabelEditing = useViewer((state) => state.setAllowZoneLabelEditing)
+
+ useEffect(() => {
+ setAllowZoneLabelEditing(allowZoneLabelEditing)
+ }, [allowZoneLabelEditing, setAllowZoneLabelEditing])
return (