diff --git a/package.json b/package.json index ce7e228b..20b57bd8 100644 --- a/package.json +++ b/package.json @@ -40,8 +40,8 @@ "manifold-3d": "^2.5.1", "moment": "^2.29.4", "serve-static": "^1.14.1", - "three": "^0.166.0", - "three-mesh-bvh": "^0.5.21", + "three": "^0.167.1", + "three-mesh-bvh": "^0.7.6", "uglify-js": "3.14.5", "validator": ">=13.7.0", "ws": "^7.5.5" diff --git a/src/mesh/api.js b/src/mesh/api.js index c61c74e0..22fdc3af 100644 --- a/src/mesh/api.js +++ b/src/mesh/api.js @@ -1231,6 +1231,7 @@ const mode = { $(`mode-${key}`).classList.remove('selected'); } $(`mode-${mode}`).classList.add('selected'); + $('mode-label').innerText = mode; api.mode.check(); mesh.edges?.end(); if (mode === 'sketch') { diff --git a/src/mesh/build.js b/src/mesh/build.js index c40073a5..5f06f750 100644 --- a/src/mesh/build.js +++ b/src/mesh/build.js @@ -451,7 +451,8 @@ function ui_build() { menu_item('Surface', mode.surface, '4', 'mode-surface'), menu_item('Face', mode.face, '5', 'mode-face'), menu_item('Edge', mode.edge, '6', 'mode-edge'), - ]) + ]), + div({ id: "mode-label" }) ]), div({ class: "menu sketch-on" }, [ div('Object'), diff --git a/web/mesh/index.css b/web/mesh/index.css index 9ea6bb70..cee73df2 100644 --- a/web/mesh/index.css +++ b/web/mesh/index.css @@ -217,6 +217,43 @@ button:hover { gap: 1px; } +#top-left:not(:hover) #mode-label { + display: flex; +} + +#mode-label { + display: none; + position: absolute; + text-transform: capitalize; + padding: 2px 4px 2px 4px; + background-color: rgba(0,200,0,0.35); + border: 1px solid rgba(0,0,0,0.25); + border-radius: 3px; + transform: translateX(-50%); + top: calc(100% + 2px); + left: 50%; +} + +#mode-label:before { + content: ''; + position: absolute; + top: -10px; /* Adjust to position the caret above the menu */ + left: 50%; + transform: translateX(-50%); + border-width: 5px; + border-style: solid; + border-color: transparent transparent #777 transparent; +} + +.dark #mode-label:before { + border-color: transparent transparent #ddd transparent; +} + +.dark #mode-label { + background-color: rgba(0,200,0,0.65); + border-color: rgba(255,255,255,0.25); +} + #top-mid { flex-grow: 1; }