From ed090867dfce30620dce386893fa0bdbd34052bd Mon Sep 17 00:00:00 2001
From: knoxnoe <gknoxnoe@gmail.com>
Date: Tue, 11 Mar 2025 22:20:23 +0800
Subject: [PATCH] fix(style): box-sizing for minimap and hover activation for
 brand-adder

---
 .../src/components/minimap.tsx                   |  2 +-
 .../src/hooks/use-editor-props.tsx               |  4 ++--
 .../src/components/tools/styles.tsx              |  2 +-
 .../src/components/minimap.tsx                   |  2 +-
 .../src/components/tools/styles.tsx              |  2 +-
 common/config/rush/command-line.json             | 16 ++++++++++++++++
 .../src/components/branch-adder/index.tsx        |  6 +++---
 .../plugins/minimap-plugin/src/component.tsx     |  5 +++--
 8 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/apps/demo-fixed-layout-simple/src/components/minimap.tsx b/apps/demo-fixed-layout-simple/src/components/minimap.tsx
index 14161bf2..6e481681 100644
--- a/apps/demo-fixed-layout-simple/src/components/minimap.tsx
+++ b/apps/demo-fixed-layout-simple/src/components/minimap.tsx
@@ -10,7 +10,7 @@ export const Minimap = () => {
         left: 16,
         bottom: 51,
         zIndex: 100,
-        width: 182,
+        width: 198,
       }}
     >
       <MinimapRender
diff --git a/apps/demo-fixed-layout-simple/src/hooks/use-editor-props.tsx b/apps/demo-fixed-layout-simple/src/hooks/use-editor-props.tsx
index d05248fa..ce702ec7 100644
--- a/apps/demo-fixed-layout-simple/src/hooks/use-editor-props.tsx
+++ b/apps/demo-fixed-layout-simple/src/hooks/use-editor-props.tsx
@@ -3,12 +3,12 @@ import { useMemo } from 'react';
 import { createMinimapPlugin } from '@flowgram.ai/minimap-plugin';
 import { defaultFixedSemiMaterials } from '@flowgram.ai/fixed-semi-materials';
 import {
+  Field,
   type FixedLayoutProps,
   FlowDocumentJSON,
   FlowNodeRegistry,
-  FlowTextKey,
-  Field,
   FlowRendererKey,
+  FlowTextKey,
 } from '@flowgram.ai/fixed-layout-editor';
 
 import { NodeAdder } from '../components/node-adder';
diff --git a/apps/demo-fixed-layout/src/components/tools/styles.tsx b/apps/demo-fixed-layout/src/components/tools/styles.tsx
index 3a8ecda1..0bb1701b 100644
--- a/apps/demo-fixed-layout/src/components/tools/styles.tsx
+++ b/apps/demo-fixed-layout/src/components/tools/styles.tsx
@@ -36,5 +36,5 @@ export const SelectZoom = styled.span`
 export const MinimapContainer = styled.div`
   position: absolute;
   bottom: 60px;
-  width: 182px;
+  width: 198px;
 `;
diff --git a/apps/demo-free-layout-simple/src/components/minimap.tsx b/apps/demo-free-layout-simple/src/components/minimap.tsx
index 6e35e0e5..518eacfa 100644
--- a/apps/demo-free-layout-simple/src/components/minimap.tsx
+++ b/apps/demo-free-layout-simple/src/components/minimap.tsx
@@ -10,7 +10,7 @@ export const Minimap = () => {
         left: 226,
         bottom: 51,
         zIndex: 100,
-        width: 182,
+        width: 198,
       }}
     >
       <MinimapRender
diff --git a/apps/demo-free-layout/src/components/tools/styles.tsx b/apps/demo-free-layout/src/components/tools/styles.tsx
index 8e35994f..15db1792 100644
--- a/apps/demo-free-layout/src/components/tools/styles.tsx
+++ b/apps/demo-free-layout/src/components/tools/styles.tsx
@@ -39,7 +39,7 @@ export const SelectZoom = styled.span`
 export const MinimapContainer = styled.div`
   position: absolute;
   bottom: 60px;
-  width: 182px;
+  width: 198px;
 `;
 
 export const UIIconMinimap = styled(IconMinimap)<{ visible: boolean }>`
diff --git a/common/config/rush/command-line.json b/common/config/rush/command-line.json
index 09c53904..b2a1da3e 100644
--- a/common/config/rush/command-line.json
+++ b/common/config/rush/command-line.json
@@ -267,6 +267,14 @@
       "safeForSimultaneousRushProcesses": true,
       "shellCommand": "concurrently --kill-others --prefix \"{name}\" --names [watch],[demo] -c white,blue \"rush build:watch --to-except @flowgram.ai/demo-fixed-layout\" \"cd apps/demo-fixed-layout && rushx dev\""
     },
+    {
+      "name": "dev:demo-fixed-layout-simple",
+      "commandKind": "global",
+      "summary": "⭐️️ run dev in app/demo-fixed-layout-simple",
+      "autoinstallerName": "rush-commands",
+      "safeForSimultaneousRushProcesses": true,
+      "shellCommand": "concurrently --kill-others --prefix \"{name}\" --names [watch],[demo] -c white,blue \"rush build:watch --to-except @flowgram.ai/demo-fixed-layout-simple\" \"cd apps/demo-fixed-layout-simple && rushx dev\""
+    },
     {
       "name": "dev:demo-free-layout",
       "commandKind": "global",
@@ -275,6 +283,14 @@
       "safeForSimultaneousRushProcesses": true,
       "shellCommand": "concurrently --kill-others --prefix \"{name}\" --names [watch],[demo] -c white,blue \"rush build:watch --to-except @flowgram.ai/demo-free-layout\" \"cd apps/demo-free-layout && rushx dev\""
     },
+    {
+      "name": "dev:demo-free-layout-simple",
+      "commandKind": "global",
+      "summary": "⭐️️ run dev in app/demo-free-layout-simple",
+      "autoinstallerName": "rush-commands",
+      "safeForSimultaneousRushProcesses": true,
+      "shellCommand": "concurrently --kill-others --prefix \"{name}\" --names [watch],[demo] -c white,blue \"rush build:watch --to-except @flowgram.ai/demo-free-layout-simple\" \"cd apps/demo-free-layout-simple && rushx dev\""
+    },
   ],
 
   /**
diff --git a/packages/materials/fixed-semi-materials/src/components/branch-adder/index.tsx b/packages/materials/fixed-semi-materials/src/components/branch-adder/index.tsx
index 9dbc204a..7a70403f 100644
--- a/packages/materials/fixed-semi-materials/src/components/branch-adder/index.tsx
+++ b/packages/materials/fixed-semi-materials/src/components/branch-adder/index.tsx
@@ -5,9 +5,9 @@ import {
   type FlowNodeEntity,
   FlowNodeRenderData,
   FlowNodeTransformData,
+  FlowOperationService,
   usePlayground,
   useService,
-  FlowOperationService,
 } from '@flowgram.ai/fixed-layout-editor';
 import { IconPlus } from '@douyinfe/semi-icons';
 
@@ -40,7 +40,7 @@ export default function BranchAdder(props: PropsType) {
   return (
     <Container
       isVertical={isVertical}
-      activated={activated}
+      activated={activated || nodeData?.hovered}
       onMouseEnter={() => nodeData?.toggleMouseEnter()}
       onMouseLeave={() => nodeData?.toggleMouseLeave()}
     >
@@ -49,7 +49,7 @@ export default function BranchAdder(props: PropsType) {
           addBranch();
         }}
         aria-hidden="true"
-        style={{ flexGrow: 1, textAlign: 'center' }}
+        style={{ flexGrow: 1, textAlign: 'center', cursor: 'pointer' }}
       >
         <IconPlus />
       </div>
diff --git a/packages/plugins/minimap-plugin/src/component.tsx b/packages/plugins/minimap-plugin/src/component.tsx
index 1aedf86c..61821af2 100644
--- a/packages/plugins/minimap-plugin/src/component.tsx
+++ b/packages/plugins/minimap-plugin/src/component.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties, FC, useEffect, useRef, useState } from 'react';
+import React, { CSSProperties, useEffect, useRef, useState } from 'react';
 
 import { MinimapInactiveStyle } from './type';
 import { FlowMinimapService } from './service';
@@ -11,7 +11,7 @@ interface MinimapProps {
   inactiveStyle?: Partial<MinimapInactiveStyle>;
 }
 
-export const MinimapRender: FC<MinimapProps> = props => {
+export const MinimapRender: React.FC<MinimapProps> = (props) => {
   const {
     service,
     panelStyles = {},
@@ -72,6 +72,7 @@ export const MinimapRender: FC<MinimapProps> = props => {
           overflow: 'hidden',
           boxShadow:
             '0px 2.289px 6.867px 0px rgba(0, 0, 0, 0.08), 0px 4.578px 13.733px 0px rgba(0, 0, 0, 0.04)',
+          boxSizing: 'border-box',
           padding: 8,
           ...panelStyles,
         }}