Workaround for wrong menu position when clicking on ... next to a seg…

…ment (#7680) * workaround for wrong menu position when clicking on ... next to a segment; also enlarge the clickable area for a segment item * update changelog
scalableminds · Mar 11, 2024 · 7573ada · 7573ada
1 parent 9d4a3c9
commit 7573ada
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 68 deletions.
diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
@@ -45,6 +45,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Fixed a slight offset when creating a node with the mouse. [#7639](https://github.com/scalableminds/webknossos/pull/7639)
 - Fixed small styling error with NML drag and drop uploading. [#7641](https://github.com/scalableminds/webknossos/pull/7641)
 - Fixed a bug where the annotation list would show teams the annotation is shared with multiple times. [#7659](https://github.com/scalableminds/webknossos/pull/7659)
+- Fixed incorrect menu position that could occur sometimes when clicking the ... button next to a segment. [#7680](https://github.com/scalableminds/webknossos/pull/7680)
 
 ### Removed
 

diff --git a/frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segment_list_item.tsx b/frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segment_list_item.tsx
@@ -593,7 +593,8 @@ function _SegmentListItem({
           (selectedSegmentIds || []).length > 1 && selectedSegmentIds?.includes(segment.id)
             ? multiSelectMenu
             : createSegmentContextMenu()
-        } // The overlay is generated lazily. By default, this would make the overlay
+        }
+        // The overlay is generated lazily. By default, this would make the overlay
         // re-render on each parent's render() after it was shown for the first time.
         // The reason for this is that it's not destroyed after closing.
         // Therefore, autoDestroy is passed.
@@ -607,78 +608,83 @@ function _SegmentListItem({
           if (info.source === "trigger") handleSegmentDropdownMenuVisibility(isVisible, segment.id);
         }}
         trigger={["contextMenu"]}
+        // Remove this again once https://github.com/react-component/trigger/pull/447 has bubbled
+        // through to antd.
+        alignPoint={false}
       >
-        <div style={{ display: "inline-flex", alignItems: "center" }}>
-          <ColoredDotIconForSegment segmentColorHSLA={segmentColorHSLA} />
-          <EditableTextLabel
-            value={getSegmentName(segment)}
-            label="Segment Name"
-            onClick={() => onSelectSegment(segment)}
-            onRenameStart={onRenameStart}
-            onRenameEnd={onRenameEnd}
-            onChange={(name) => {
-              if (visibleSegmentationLayer != null) {
-                updateSegment(
-                  segment.id,
-                  {
-                    name,
-                  },
-                  visibleSegmentationLayer.name,
-                  true,
-                );
-              }
-            }}
-            margin="0 5px"
-            disableEditing={!allowUpdate}
-          />
-          <Tooltip title="Open context menu (also available via right-click)">
-            <EllipsisOutlined
-              onClick={() => handleSegmentDropdownMenuVisibility(true, segment.id)}
+        <div>
+          <div style={{ display: "inline-flex", alignItems: "center" }}>
+            <ColoredDotIconForSegment segmentColorHSLA={segmentColorHSLA} />
+            <EditableTextLabel
+              value={getSegmentName(segment)}
+              label="Segment Name"
+              onClick={() => onSelectSegment(segment)}
+              onRenameStart={onRenameStart}
+              onRenameEnd={onRenameEnd}
+              onChange={(name) => {
+                if (visibleSegmentationLayer != null) {
+                  updateSegment(
+                    segment.id,
+                    {
+                      name,
+                    },
+                    visibleSegmentationLayer.name,
+                    true,
+                  );
+                }
+              }}
+              margin="0 5px"
+              disableEditing={!allowUpdate}
             />
-          </Tooltip>
-          {/* Show Default Segment Name if another one is already defined*/}
-          {getSegmentIdDetails()}
-          {segment.id === centeredSegmentId ? (
-            <Tooltip title="This segment is currently centered in the data viewports.">
-              <i
-                className="fas fa-crosshairs deemphasized"
-                style={{
-                  marginLeft: 4,
-                }}
+            <Tooltip title="Open context menu (also available via right-click)">
+              <EllipsisOutlined
+                onClick={() => handleSegmentDropdownMenuVisibility(true, segment.id)}
               />
             </Tooltip>
-          ) : null}
-          {segment.id === activeCellId ? (
-            <Tooltip title="The currently active segment id belongs to this segment.">
-              <i
-                className="fas fa-paint-brush deemphasized"
-                style={{
-                  marginLeft: 4,
-                }}
-              />
-            </Tooltip>
-          ) : null}
+            {/* Show Default Segment Name if another one is already defined*/}
+            {getSegmentIdDetails()}
+            {segment.id === centeredSegmentId ? (
+              <Tooltip title="This segment is currently centered in the data viewports.">
+                <i
+                  className="fas fa-crosshairs deemphasized"
+                  style={{
+                    marginLeft: 4,
+                  }}
+                />
+              </Tooltip>
+            ) : null}
+            {segment.id === activeCellId ? (
+              <Tooltip title="The currently active segment id belongs to this segment.">
+                <i
+                  className="fas fa-paint-brush deemphasized"
+                  style={{
+                    marginLeft: 4,
+                  }}
+                />
+              </Tooltip>
+            ) : null}
+          </div>
+
+          <div
+            style={{
+              marginLeft: 16,
+            }}
+          >
+            <MeshInfoItem
+              segment={segment}
+              isSelectedInList={
+                selectedSegmentIds != null ? selectedSegmentIds?.includes(segment.id) : false
+              }
+              isHovered={isHoveredSegmentId}
+              mesh={mesh}
+              handleSegmentDropdownMenuVisibility={handleSegmentDropdownMenuVisibility}
+              visibleSegmentationLayer={visibleSegmentationLayer}
+              setPosition={setPosition}
+              setAdditionalCoordinates={setAdditionalCoordinates}
+            />
+          </div>
         </div>
       </Dropdown>
-
-      <div
-        style={{
-          marginLeft: 16,
-        }}
-      >
-        <MeshInfoItem
-          segment={segment}
-          isSelectedInList={
-            selectedSegmentIds != null ? selectedSegmentIds?.includes(segment.id) : false
-          }
-          isHovered={isHoveredSegmentId}
-          mesh={mesh}
-          handleSegmentDropdownMenuVisibility={handleSegmentDropdownMenuVisibility}
-          visibleSegmentationLayer={visibleSegmentationLayer}
-          setPosition={setPosition}
-          setAdditionalCoordinates={setAdditionalCoordinates}
-        />
-      </div>
     </List.Item>
   );
 }

diff --git a/frontend/stylesheets/antd_overwrites.less b/frontend/stylesheets/antd_overwrites.less
@@ -219,6 +219,13 @@ label.ant-checkbox-wrapper {
   }
 }
 
+#segment-list {
+  .ant-tree-title {
+    // Make the tree elements in the segment list full-width
+    width: 100%;
+  }
+}
+
 .ant-tree-directory .ant-tree-title {
   // Make the directory tree element full-width (subtract the width of the
   // directory icon)
@@ -274,4 +281,4 @@ label.ant-checkbox-wrapper {
 
 .ant-radio-button-wrapper-disabled:first-child{
   opacity: 0.5;
-}
+}