{
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()
- }
- }}
>
- {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',
- }}
- />
- ) : (
-
- )}
+
{node.name}
{
marginTop: '2px',
opacity: 0,
transition: 'opacity 0.5s ease-in-out',
- pointerEvents: 'none',
}}
>
= ({
- children,
- selectionManager = 'default',
- allowZoneLabelEditing = false,
-}) => {
+const Viewer: React.FC = ({ children, selectionManager = 'default' }) => {
const theme = useViewer((state) => state.theme)
- const setAllowZoneLabelEditing = useViewer((state) => state.setAllowZoneLabelEditing)
-
- useEffect(() => {
- setAllowZoneLabelEditing(allowZoneLabelEditing)
- }, [allowZoneLabelEditing, setAllowZoneLabelEditing])
return (