fix: editor no longer refreshes on element hover

Closes #807 Related to #796
bpmn-io · Sep 24, 2023 · 3d0487e · 3d0487e
1 parent 508ea99
commit 3d0487e
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 24 deletions.
diff --git a/packages/form-js-editor/src/render/components/FormEditor.js b/packages/form-js-editor/src/render/components/FormEditor.js
@@ -97,7 +97,7 @@ function Element(props) {
         modeling = useService('modeling'),
         selection = useService('selection');
 
-  const { hoveredId, setHoveredId } = useContext(FormRenderContext);
+  const { hoverInfo } = useContext(FormRenderContext);
 
   const { field } = props;
 
@@ -109,6 +109,8 @@ function Element(props) {
 
   const ref = useRef();
 
+  const [ hovered, setHovered ] = useState(false);
+
   function scrollIntoView({ selection }) {
     if (!selection || selection.id !== id || !ref.current) {
       return;
@@ -143,23 +145,31 @@ function Element(props) {
     ref.current.focus();
   }
 
-  const classes = [];
+  const isSelected = selection.isSelected(field);
 
-  if (props.class) {
-    classes.push(...props.class.split(' '));
-  }
+  const classString = useMemo(() => {
 
-  if (selection.isSelected(field)) {
-    classes.push('fjs-editor-selected');
-  }
+    const classes = [];
 
-  if (showOutline) {
-    classes.push('fjs-outlined');
-  }
+    if (props.class) {
+      classes.push(...props.class.split(' '));
+    }
 
-  if (hoveredId === field.id) {
-    classes.push('fjs-editor-hovered');
-  }
+    if (isSelected) {
+      classes.push('fjs-editor-selected');
+    }
+
+    if (showOutline) {
+      classes.push('fjs-outlined');
+    }
+
+    if (hovered) {
+      classes.push('fjs-editor-hovered');
+    }
+
+    return classes.join(' ');
+
+  }, [ hovered, isSelected, props.class, showOutline ]);
 
   const onRemove = (event) => {
     event.stopPropagation();
@@ -180,17 +190,20 @@ function Element(props) {
 
   return (
     <div
-      class={ classes.join(' ') }
+      class={ classString }
       data-id={ id }
       data-field-type={ type }
       tabIndex={ type === 'default' ? -1 : 0 }
       onClick={ onClick }
       onKeyPress={ onKeyPress }
       onMouseOver={
         (e) => {
+          if (hoverInfo.cleanup) {
+            hoverInfo.cleanup();
+          }
 
-          // @ts-ignore
-          setHoveredId(field.id);
+          setHovered(true);
+          hoverInfo.cleanup = () => setHovered(false);
           e.stopPropagation();
         }
       }
@@ -416,17 +429,14 @@ export default function FormEditor(props) {
     eventBus.fire('formEditor.rendered');
   }, []);
 
-  const [ hoveredId, setHoveredId ] = useState(null);
-
   const formRenderContext = useMemo(() => ({
     Children,
     Column,
     Element,
     Empty,
     Row,
-    hoveredId,
-    setHoveredId
-  }), [ hoveredId ]);
+    hoverInfo: {}
+  }), []);
 
   const formContext = useMemo(() => ({
     getService(type, strict = true) {

diff --git a/packages/form-js-viewer/src/render/context/FormRenderContext.js b/packages/form-js-viewer/src/render/context/FormRenderContext.js
@@ -23,8 +23,7 @@ const FormRenderContext = createContext({
 
     return <div class={ props.class } style={ props.style }>{ props.children }</div>;
   },
-  hoveredId: [],
-  setHoveredId: (newValue) => { console.log(`setHoveredId not defined, called with '${newValue}'`); }
+  hoverInfo: {},
 });
 
 export default FormRenderContext;