Skip to content

Add Anchor behavior grid-based editor and stories #8336

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LuniMoon wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Add Anchor behavior grid-based editor and stories #8336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c54a07a
Add storybook stories for Anchor behavior editors
LuniMoon Feb 26, 2026
056faed
Update SimplifiedProject snapshot after adding AnchorBehavior to test…
LuniMoon Feb 26, 2026
e1abe4e
Grid-based selection component
LuniMoon Feb 27, 2026
de28ebe
Fix Flow type error in getHighlightedCells loop variables
LuniMoon Feb 27, 2026
a2e64e4
Fix Flow missing-local-annot errors in AnchorGrid.js
LuniMoon Feb 27, 2026
c079463
Switching UI approach from grid
LuniMoon Mar 2, 2026
9f3a3e3
Fixing spacing issues in ToggleButtons
LuniMoon Mar 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
205 changes: 15 additions & 190 deletions newIDE/app/src/BehaviorsEditor/Editors/AnchorBehaviorEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,16 @@ import { Trans } from '@lingui/macro';
import * as React from 'react';
import { type BehaviorEditorProps } from './BehaviorEditorProps.flow';
import BehaviorPropertiesEditor from './BehaviorPropertiesEditor';
import SmallCrossIcon from '../../UI/CustomSvgIcons/SmallCross';
import LeftAlignmentIcon from '../../UI/CustomSvgIcons/LeftAlignment';
import CenterAlignmentIcon from '../../UI/CustomSvgIcons/CenterAlignment';
import RightAlignmentIcon from '../../UI/CustomSvgIcons/RightAlignment';
import FillIcon from '../../UI/CustomSvgIcons/HorizontalSize';
import ProportionalFillIcon from '../../UI/CustomSvgIcons/HorizontalSizePercent';
import TopAlignmentIcon from '../../UI/CustomSvgIcons/TopAlignment';
import CenterVerticalAlignmentIcon from '../../UI/CustomSvgIcons/CenterVerticalAlignment';
import BottomAlignmentIcon from '../../UI/CustomSvgIcons/BottomAlignment';
import VerticalFillIcon from '../../UI/CustomSvgIcons/VerticalSize';
import VerticalProportionalFillIcon from '../../UI/CustomSvgIcons/VerticalSizePercent';
import useForceUpdate from '../../Utils/UseForceUpdate';
import { ColumnStackLayout } from '../../UI/Layout';
import { Line } from '../../UI/Grid';
import Text from '../../UI/Text';
import {
getPropertyValue,
updateProperty,
} from '../../ObjectEditor/CompactObjectPropertiesEditor/CompactBehaviorPropertiesEditor';
import CompactToggleButtons, {
type CompactToggleButton,
} from '../../UI/CompactToggleButtons';
import AnchorGrid from './AnchorGrid';

type BasicAnchor =
export type BasicAnchor =
| 'None'
| 'ProportionalFill'
| 'FixedFill'
Expand Down Expand Up @@ -110,13 +96,13 @@ export const getBasicVerticalAnchor = (
getAnchorProperty(getPropertyValue, 'bottomEdgeAnchor')
);

type AnchorMapping = Array<{|
export type AnchorMapping = Array<{|
basicAnchor: BasicAnchor,
minEdge: string,
maxEdge: string,
|}>;

const horizontalAnchorMapping: AnchorMapping = [
export const horizontalAnchorMapping: AnchorMapping = [
{ basicAnchor: 'None', minEdge: 'None', maxEdge: 'None' },
{ basicAnchor: 'MinEdge', minEdge: 'WindowLeft', maxEdge: 'WindowLeft' },
{ basicAnchor: 'Center', minEdge: 'WindowCenter', maxEdge: 'WindowCenter' },
Expand All @@ -129,7 +115,7 @@ const horizontalAnchorMapping: AnchorMapping = [
},
];

const verticalAnchorMapping: AnchorMapping = [
export const verticalAnchorMapping: AnchorMapping = [
{ basicAnchor: 'None', minEdge: 'None', maxEdge: 'None' },
{ basicAnchor: 'MinEdge', minEdge: 'WindowTop', maxEdge: 'WindowTop' },
{ basicAnchor: 'Center', minEdge: 'WindowCenter', maxEdge: 'WindowCenter' },
Expand All @@ -142,157 +128,6 @@ const verticalAnchorMapping: AnchorMapping = [
},
];

const AnchorButtonGroup = ({
id,
basicAnchor,
minEdgePropertyName,
maxEdgePropertyName,
anchorMapping,
renderIcon,
renderTooltip,
onUpdateProperty,
expand,
}: {|
id: string,
basicAnchor: BasicAnchor,
minEdgePropertyName: string,
maxEdgePropertyName: string,
anchorMapping: Array<{|
basicAnchor: BasicAnchor,
minEdge: string,
maxEdge: string,
|}>,
renderIcon: (basicAnchor: string, className?: string) => React.Node,
renderTooltip: (basicAnchor: string) => React.Node,
onUpdateProperty: (propertyName: string, value: string) => void,
expand?: boolean,
|}): React.Node => {
const buttons: Array<CompactToggleButton> = anchorMapping.map(item => ({
id: item.basicAnchor,
renderIcon: (className?: string) => renderIcon(item.basicAnchor, className),
tooltip: renderTooltip(item.basicAnchor),
isActive: basicAnchor === item.basicAnchor,
onClick: () => {
onUpdateProperty(minEdgePropertyName, item.minEdge);
onUpdateProperty(maxEdgePropertyName, item.maxEdge);
},
}));

return <CompactToggleButtons id={id} buttons={buttons} expand={false} />;
};

export const HorizontalAnchorButtonGroup = ({
basicAnchor,
onUpdateProperty,
expand,
}: {|
basicAnchor: BasicAnchor,
onUpdateProperty: (propertyName: string, value: string) => void,
expand?: boolean,
|}): React.Node => {
return (
<AnchorButtonGroup
id="horizontal-anchor"
basicAnchor={basicAnchor}
minEdgePropertyName="leftEdgeAnchor"
maxEdgePropertyName="rightEdgeAnchor"
anchorMapping={horizontalAnchorMapping}
renderIcon={(basicAnchor, className) => {
switch (basicAnchor) {
case 'MinEdge':
return <LeftAlignmentIcon class={className} />;
case 'Center':
return <CenterAlignmentIcon class={className} />;
case 'MaxEdge':
return <RightAlignmentIcon class={className} />;
case 'FixedFill':
return <FillIcon class={className} />;
case 'ProportionalFill':
return <ProportionalFillIcon class={className} />;
case 'None':
default:
return <SmallCrossIcon class={className} />;
}
}}
renderTooltip={basicAnchor => {
switch (basicAnchor) {
case 'MinEdge':
return <Trans>Left</Trans>;
case 'Center':
return <Trans>Center</Trans>;
case 'MaxEdge':
return <Trans>Right</Trans>;
case 'FixedFill':
return <Trans>Fill</Trans>;
case 'ProportionalFill':
return <Trans>Fill proportionally</Trans>;
case 'None':
default:
return <Trans>None</Trans>;
}
}}
onUpdateProperty={onUpdateProperty}
expand={expand}
/>
);
};

export const VerticalAnchorButtonGroup = ({
basicAnchor,
onUpdateProperty,
expand,
}: {|
basicAnchor: BasicAnchor,
onUpdateProperty: (propertyName: string, value: string) => void,
expand?: boolean,
|}): React.Node => {
return (
<AnchorButtonGroup
id="vertical-anchor"
basicAnchor={basicAnchor}
minEdgePropertyName="topEdgeAnchor"
maxEdgePropertyName="bottomEdgeAnchor"
anchorMapping={verticalAnchorMapping}
renderIcon={(basicAnchor, className) => {
switch (basicAnchor) {
case 'MinEdge':
return <TopAlignmentIcon class={className} />;
case 'Center':
return <CenterVerticalAlignmentIcon class={className} />;
case 'MaxEdge':
return <BottomAlignmentIcon class={className} />;
case 'FixedFill':
return <VerticalFillIcon class={className} />;
case 'ProportionalFill':
return <VerticalProportionalFillIcon class={className} />;
case 'None':
default:
return <SmallCrossIcon class={className} />;
}
}}
renderTooltip={basicAnchor => {
switch (basicAnchor) {
case 'MinEdge':
return <Trans>Top</Trans>;
case 'Center':
return <Trans>Center</Trans>;
case 'MaxEdge':
return <Trans>Bottom</Trans>;
case 'FixedFill':
return <Trans>Fill</Trans>;
case 'ProportionalFill':
return <Trans>Fill proportionally</Trans>;
case 'None':
default:
return <Trans>None</Trans>;
}
}}
onUpdateProperty={onUpdateProperty}
expand={expand}
/>
);
};

type Props = BehaviorEditorProps;

const AnchorBehaviorEditor = ({
Expand Down Expand Up @@ -324,29 +159,20 @@ const AnchorBehaviorEditor = ({
[forceUpdate, onBehaviorUpdated]
);

const horizontalBasicAnchor = getBasicHorizontalAnchor(_getPropertyValue);
const verticalBasicAnchor = getBasicVerticalAnchor(_getPropertyValue);
const isAdvanced =
getBasicHorizontalAnchor(_getPropertyValue) === 'Advanced' ||
getBasicVerticalAnchor(_getPropertyValue) === 'Advanced';

return (
<ColumnStackLayout expand>
<Text size="sub-title">
<Trans>Horizontal anchor</Trans>
<Trans>Alignment</Trans>
</Text>
<Line noMargin>
<HorizontalAnchorButtonGroup
basicAnchor={horizontalBasicAnchor}
onUpdateProperty={_updateProperty}
/>
</Line>
<Text size="sub-title">
<Trans>Vertical anchor</Trans>
</Text>
<Line noMargin>
<VerticalAnchorButtonGroup
basicAnchor={verticalBasicAnchor}
onUpdateProperty={_updateProperty}
/>
</Line>
<AnchorGrid
getPropertyValue={_getPropertyValue}
onUpdateProperty={_updateProperty}
initialInstance={null}
/>
<BehaviorPropertiesEditor
project={project}
object={object}
Expand All @@ -355,8 +181,7 @@ const AnchorBehaviorEditor = ({
resourceManagementProps={resourceManagementProps}
projectScopedContainersAccessor={projectScopedContainersAccessor}
isAdvancedSectionInitiallyUncollapsed={
horizontalBasicAnchor === 'Advanced' ||
verticalBasicAnchor === 'Advanced' ||
isAdvanced ||
_getPropertyValue('relativeToOriginalWindowSize') === 'false'
}
/>
Expand Down
Loading