fix(style): box-sizing for minimap and hover activation for brand-adder

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

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';

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;
 `;

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

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 }>`

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\""
+    },
   ],
 
   /**

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>

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,
         }}