diff --git a/web/app/cad/craft/ui/ModelButtonBehaviour.tsx b/web/app/cad/craft/ui/ModelButtonBehaviour.tsx index df2e09d2..dd2c27aa 100644 --- a/web/app/cad/craft/ui/ModelButtonBehaviour.tsx +++ b/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 {text.substring(0, mid)}...{text.substring(text.length - mid, text.length)}; - } else { - return text; - } -} diff --git a/web/app/cad/craft/ui/SafeLength.tsx b/web/app/cad/craft/ui/SafeLength.tsx new file mode 100644 index 00000000..81b5790b --- /dev/null +++ b/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 {text.substring(0, mid)}...{text.substring(text.length - mid, text.length)}; + } else { + return text; + } +} \ No newline at end of file diff --git a/web/app/cad/craft/wizard/components/form/EntityList.jsx b/web/app/cad/craft/wizard/components/form/EntityList.jsx index 2987a39c..6bd914a8 100644 --- a/web/app/cad/craft/wizard/components/form/EntityList.jsx +++ b/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 => + } const deselect = (entityId) => { let {value, onChange} = props; @@ -31,19 +39,40 @@ function EntityList(props) { } return -
{value.length === 0 ? +
{value.length === 0 ? {placeholder || ''} : - value.map((entity, i) => ctx.highlightService.highlight(entity)} - onMouseLeave={() => ctx.highlightService.unHighlight(entity)}> - {entityRenderer(entity)} - {!readOnly && deselect(entity)}> } - )} + value.map((entity, i) => { + const model = ctx.cadRegistry.find(entity); + return ctx.highlightService.highlight(entity)} + onMouseLeave={() => ctx.highlightService.unHighlight(entity)}> + + + + + {entityRenderer(entity)} + + {!readOnly && deselect(entity)}> } + + })}
; } +function EditButton({model}) { + const ctx = useContext(AppContext); + + if (!(model instanceof MFace)) { + return null; + } + + return ctx.sketcherService.sketchFace(model)} className={ls.editBtn}> + + ; +} + + export default attachToForm(EntityList); function asArray(val) { diff --git a/web/app/cad/craft/wizard/components/form/EntityList.less b/web/app/cad/craft/wizard/components/form/EntityList.less index 9b7b75e8..f1c6c949 100644 --- a/web/app/cad/craft/wizard/components/form/EntityList.less +++ b/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; } \ No newline at end of file