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

This commit is contained in:
knoxnoe 2025-03-11 22:20:23 +08:00
parent e6268727b7
commit ed090867df
8 changed files with 28 additions and 11 deletions

View File

@ -10,7 +10,7 @@ export const Minimap = () => {
left: 16,
bottom: 51,
zIndex: 100,
width: 182,
width: 198,
}}
>
<MinimapRender

View File

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

View File

@ -36,5 +36,5 @@ export const SelectZoom = styled.span`
export const MinimapContainer = styled.div`
position: absolute;
bottom: 60px;
width: 182px;
width: 198px;
`;

View File

@ -10,7 +10,7 @@ export const Minimap = () => {
left: 226,
bottom: 51,
zIndex: 100,
width: 182,
width: 198,
}}
>
<MinimapRender

View File

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

View File

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

View File

@ -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>

View File

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