diff --git a/src/plugins/layout/layout2/Inspector.js b/src/plugins/layout/layout2/Inspector.js index 440d6795b..c82d7f944 100644 --- a/src/plugins/layout/layout2/Inspector.js +++ b/src/plugins/layout/layout2/Inspector.js @@ -22,6 +22,7 @@ type Props = { ax?: boolean, client: PluginClient, showsSidebar: boolean, + inAlignmentMode?: boolean, selectedElement: ?ElementID, selectedAXElement: ?ElementID, onSelect: (ids: ?ElementID) => void, @@ -196,6 +197,7 @@ export default class Inspector extends Component { onElementHovered = debounce((key: ?ElementID) => this.props.client.call(this.call().SET_HIGHLIGHTED, { id: key, + isAlignmentMode: this.props.inAlignmentMode, }), ); diff --git a/src/plugins/layout/layout2/index.js b/src/plugins/layout/layout2/index.js index 34c0244d1..11cd0533c 100644 --- a/src/plugins/layout/layout2/index.js +++ b/src/plugins/layout/layout2/index.js @@ -23,6 +23,7 @@ type State = {| init: boolean, inTargetMode: boolean, inAXMode: boolean, + inAlignmentMode: boolean, selectedElement: ?ElementID, selectedAXElement: ?ElementID, |}; @@ -46,6 +47,7 @@ export default class Layout extends FlipperPlugin { init: false, inTargetMode: false, inAXMode: false, + inAlignmentMode: false, selectedElement: null, selectedAXElement: null, }; @@ -81,6 +83,16 @@ export default class Layout extends FlipperPlugin { this.setState({inAXMode: !this.state.inAXMode}); }; + onToggleAlignmentMode = () => { + if (this.state.selectedElement) { + this.client.send('setHighlighted', { + id: this.state.selectedElement, + inAlignmentMode: !this.state.inAlignmentMode, + }); + } + this.setState({inAlignmentMode: !this.state.inAlignmentMode}); + }; + onDataValueChanged = (path: Array, value: any) => { const id = this.state.inAXMode ? this.state.selectedAXElement @@ -96,6 +108,7 @@ export default class Layout extends FlipperPlugin { render() { const inspectorProps = { client: this.client, + inAlignmentMode: this.state.inAlignmentMode, selectedElement: this.state.selectedElement, selectedAXElement: this.state.selectedAXElement, setPersistedState: this.props.setPersistedState, @@ -122,6 +135,12 @@ export default class Layout extends FlipperPlugin { active={this.state.inAXMode} /> )} +