selection widgets improvements

web/app/cad/craft/ui/ModelButtonBehaviour.tsx

@@ -6,6 +6,7 @@ import {VisibleSwitch} from "cad/craft/ui/SceneInlineObjectExplorer";
 import {MOpenFaceShell} from "cad/model/mopenFace";
 import {MObject} from "cad/model/mobject";
 import {ModelIcon} from "cad/craft/ui/ModelIcon";
+import {SafeLength} from "cad/craft/ui/SafeLength";
 
 interface IModelButtonBehavior {
   select: () => void;
@@ -68,15 +69,3 @@ export function ModelButtonBehavior({children, model, controlVisibility}: {
     onMouseLeave
   });
 }
-
-function SafeLength(props: { text: string }): any {
-
-  const limit = 40;
-  const mid = limit / 2;
-  const text = props.text;
-  if (text.length > limit) {
-    return <span title={text}>{text.substring(0, mid)}...{text.substring(text.length - mid, text.length)}</span>;
-  } else {
-    return text;
-  }
-}

web/app/cad/craft/ui/SafeLength.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+export function SafeLength(props: { text: string, limit? : number }): any {
+
+  const limit = props.limit || 40;
+  const mid = limit / 2;
+  const text = props.text;
+  if (text.length > limit) {
+    return <span title={text}>{text.substring(0, mid)}...{text.substring(text.length - mid, text.length)}</span>;
+  } else {
+    return text;
+  }
+}

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

@@ -8,13 +8,21 @@ import {camelCaseSplitToStr} from 'gems/camelCaseSplit';
 import {EMPTY_ARRAY, removeInPlace} from 'gems/iterables';
 import {AppContext} from "cad/dom/components/AppContext";
 import produce from "immer";
+import {FiEdit} from "react-icons/all";
+import {MFace} from "cad/model/mface";
+import {ModelIcon} from "cad/craft/ui/ModelIcon";
+import {SafeLength} from "cad/craft/ui/SafeLength";
 
 
 function EntityList(props) {
 
   const ctx = useContext(AppContext);
 
-  let {name, label, active, setActive, value, placeholder, readOnly, entityRenderer = e => e} = props;
+  let {name, label, active, setActive, value, placeholder, readOnly, entityRenderer} = props;
+
+  if (!entityRenderer) {
+    entityRenderer = e => <SafeLength text={e} limit={20} />
+  }
 
   const deselect = (entityId) => {
     let {value, onChange} = props;
@@ -31,19 +39,40 @@ function EntityList(props) {
   }
   return <Field active={active} name={name} onClick={setActive}>
     <Label>{label||camelCaseSplitToStr(name)}:</Label>
-    <div>{value.length === 0 ?
+    <div className={ls.container}>{value.length === 0 ?
       <span className={ls.emptySelection}>{placeholder || '<not selected>'}</span> :
-      value.map((entity, i) => <span className={ls.entityRef} key={i}
-                                     onMouseEnter={() => ctx.highlightService.highlight(entity)}
-                                     onMouseLeave={() => ctx.highlightService.unHighlight(entity)}>
-        {entityRenderer(entity)}
-        {!readOnly && <span className={ls.rm} onClick={() => deselect(entity)}> <Fa icon='times'/></span>}
-      </span>)}
+      value.map((entity, i) => {
+        const model = ctx.cadRegistry.find(entity);
+        return <span className={ls.entityRef} key={i}
+                onMouseEnter={() => ctx.highlightService.highlight(entity)}
+                onMouseLeave={() => ctx.highlightService.unHighlight(entity)}>
+          <span className={ls.entityLabel}>
+            <EditButton model={model}/>
+            <ModelIcon entityType={model?.TYPE} style={{marginRight: 3}} />
+
+            {entityRenderer(entity)}
+          </span>
+            {!readOnly && <span className={ls.rm} onClick={() => deselect(entity)}> <Fa icon='times'/></span>}
+        </span>
+      })}
     </div>
   </Field>;
 
 }
 
+function EditButton({model}) {
+  const ctx = useContext(AppContext);
+
+  if (!(model instanceof MFace)) {
+    return null;
+  }
+
+  return <span onClick={() => ctx.sketcherService.sketchFace(model)} className={ls.editBtn}>
+    <FiEdit/>
+  </span>;
+}
+
+
 export default attachToForm(EntityList);
 
 function asArray(val) {

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

@@ -9,8 +9,11 @@
   border: 1px solid #d2d0e0;
   padding: 0 3px;
   margin: 0 2px 2px 2px;
-  display: inline-block;
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
   & .rm {
+    padding-left: 2px;
     background: none;
     cursor: pointer;
     &:hover {
@@ -20,4 +23,37 @@
       color: red;
     }
   }
+  &:hover .editBtn {
+    display: flex;
+  }
+}
+
+.entityLabel {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.editBtn {
+  display: none;
+  align-items: center;
+  position: absolute;
+  right: 0;
+  height: 100%;
+  padding: 0 2px;
+  background-color: #a9a91a;
+  &:hover {
+    color: #feffcb;
+  }
+  &:active {
+    color: yellow;
+  }
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
 }