ui: optimize element layouts

Author: dyon21

src/components/DiagramFrame/SeqDiagram/MessageLayer/Anchor.tsx

@@ -2,6 +2,20 @@ import { diagramElementAtom, dragAnchorAtom, scaleAtom } from "@/store/Store";
 import { useAtomValue, useSetAtom } from "jotai";
 import { useRef } from "react";
 
+const icon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="11"
+    height="11"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    className="life-line-anchor invisible"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M4.929 4.929a10 10 0 1 1 14.141 14.141a10 10 0 0 1 -14.14 -14.14zm8.071 4.071a1 1 0 1 0 -2 0v2h-2a1 1 0 1 0 0 2h2v2a1 1 0 1 0 2 0v-2h2a1 1 0 1 0 0 -2h-2v-2z" />
+  </svg>
+);
+
 export const Anchor = (props: {
   context: any;
   participant: string;
@@ -12,38 +26,29 @@ export const Anchor = (props: {
   const diagramElement = useAtomValue(diagramElementAtom);
   const setAnchor = useSetAtom(dragAnchorAtom);
   return (
-    <div
-      className="inline-block text-sky-500 -ml-3"
-      ref={elRef}
-      onMouseDown={(e) => {
-        e.stopPropagation();
-        const {
-          left = 0,
-          top = 0,
-          width = 0,
-          height = 0,
-        } = elRef.current?.getBoundingClientRect() || {};
-        const diagramRect = diagramElement?.getBoundingClientRect();
-        setAnchor({
-          context: props.context,
-          index: props.index,
-          participant: props.participant,
-          x: (left + width / 2 - (diagramRect?.left || 0)) / scale,
-          y: (top + height / 2 - (diagramRect?.top || 0)) / scale,
-        });
-      }}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="23"
-        height="23"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className="pointer-events-auto life-line-anchor"
+    <div className="relative w-6 h-6 -my-1 -ml-[12.5px]">
+      <div
+        className="text-sky-500 cursor-pointer absolute w-6 h-6 inline-flex justify-center items-center pointer-events-auto [&:hover>svg]:visible  overflow-hidden"
+        ref={elRef}
+        onMouseDown={(e) => {
+          e.stopPropagation();
+          const {
+            left = 0,
+            top = 0,
+            height = 0,
+          } = elRef.current?.getBoundingClientRect() || {};
+          const diagramRect = diagramElement?.getBoundingClientRect();
+          setAnchor({
+            context: props.context,
+            index: props.index,
+            participant: props.participant,
+            x: (left - (diagramRect?.left || 0)) / scale,
+            y: (top + height / 2 - (diagramRect?.top || 0)) / scale,
+          });
+        }}
       >
-        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-        <path d="M4.929 4.929a10 10 0 1 1 14.141 14.141a10 10 0 0 1 -14.14 -14.14zm8.071 4.071a1 1 0 1 0 -2 0v2h-2a1 1 0 1 0 0 2h2v2a1 1 0 1 0 2 0v-2h2a1 1 0 1 0 0 -2h-2v-2z" />
-      </svg>
+        {icon}
+      </div>
     </div>
   );
 };

src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Block.tsx

@@ -24,7 +24,7 @@ export const Block = (props: {
   };
   return (
     <div
-      className={cn("block pt-6 pb-2 pointer-events-none", props.className)}
+      className={cn("block pointer-events-none", props.className)}
       style={props.style}
       data-origin={props.origin}
     >

src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.tsx

@@ -95,10 +95,7 @@ export const Interaction = (props: {
       />
       {assignee && !isSelf && (
         <Message
-          className={cn(
-            "return transform -translate-y-full",
-            messageClassNames,
-          )}
+          className={cn("return transform -mt-4", messageClassNames)}
           context={message}
           content={assignee}
           rtl={!rightToLeft}

src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Occurrence/Occurrence.tsx

@@ -73,7 +73,9 @@ export const Occurrence = (props: {
         </>
       )}
       {hasAnyStatementsExceptReturn() && (
-        <CollapseButton collapsed={collapsed} onClick={toggle} />
+        <div className="mb-5">
+          <CollapseButton collapsed={collapsed} onClick={toggle} />
+        </div>
       )}
       {props.context.braceBlock() ? (
         <Block

src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLayer.scss

@@ -33,7 +33,6 @@
 
   .fragment {
     border-width: 1px;
-    margin: 8px 0 0 0;
     padding-bottom: 10px;
   }
 

src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLayer.tsx

@@ -36,7 +36,7 @@ export const MessageLayer = (props: {
 
   return (
     <div
-      className="message-layer relative z-30 pt-14 pb-10 pointer-events-none"
+      className="message-layer relative z-30 pt-20 pb-10 pointer-events-none"
       style={props.style}
     >
       <Block