highlighting items from the wizard on 2d sketch

web/app/cad/craft/wizard/components/form/EntityList.jsx

@@ -20,7 +20,7 @@ export default class EntityList extends React.Component {
   };
   
   render() {
-    let {name, label, active, setActive, value, placeholder, readOnly, entityRenderer = e => e} = this.props;
+    let {name, label, active, setActive, value, placeholder, readOnly, onEntityEnter, onEntityLeave,  entityRenderer = e => e} = this.props;
     if (!Array.isArray(value)) {
       value = value ? asArray(value) : EMPTY_ARRAY;
     }
@@ -28,7 +28,9 @@ export default class EntityList extends React.Component {
       <Label>{label||camelCaseSplitToStr(name)}:</Label> 
       <div>{value.length === 0 ? 
         <span className={ls.emptySelection}>{placeholder || '<not selected>'}</span> :
-        value.map((entity, i) => <span className={ls.entityRef} key={i}>
+        value.map((entity, i) => <span className={ls.entityRef} key={i}
+                                       onMouseEnter={() => onEntityEnter&&onEntityEnter(entity)}
+                                       onMouseLeave={() => onEntityLeave&&onEntityLeave(entity)}>
           {entityRenderer(entity)}
           {!readOnly && <span className={ls.rm} onClick={() => this.deselect(entity)}> <Fa icon='times'/></span>}
         </span>)}

web/app/sketcher/components/SketcherOperationWizard.jsx

@@ -105,6 +105,8 @@ export default function SketcherOperationWizard({}) {
             if (field.type === 'selection') {
               return <Entity name={field.name} title={field.title || field.name}
                              placeholder={schema.placeholder} key={field.name}
+                             onEntityEnter={obj => {viewer.capture('highlight2', [obj], true); viewer.refresh();}}
+                             onEntityLeave={obj => {viewer.withdrawAll('highlight2');viewer.refresh();}}
                              entityRenderer={entityRenderer}/>
             }
           })();

web/app/sketcher/viewer2d.js

@@ -588,18 +588,21 @@ class Layer {
 }
 
 const CAPTURES = {
+  highlight2: {
+    ...Styles.HIGHLIGHT2,
+    priority: 1
+  },
   tool: {
     ...Styles.TOOL_HELPER,
-    priority: 1
+    priority: 2
   },
   highlight: {
     ...Styles.HIGHLIGHT,
-    priority: 2
-
+    priority: 3
   },
   selection: {
     ...Styles.SELECTION,
-    priority: 3
+    priority: 4
   },
 };