Alignment mode

Summary: Adding a toggle to enable/disable alignment mode

Reviewed By: jknoxville

Differential Revision: D14100534

fbshipit-source-id: e3a49f1f31112ca2c99c2246a12c4f34be1ec61a

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<Props> {
   onElementHovered = debounce((key: ?ElementID) =>
     this.props.client.call(this.call().SET_HIGHLIGHTED, {
       id: key,
+      isAlignmentMode: this.props.inAlignmentMode,
     }),
   );
 

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<State, void, PersistedState> {
     init: false,
     inTargetMode: false,
     inAXMode: false,
+    inAlignmentMode: false,
     selectedElement: null,
     selectedAXElement: null,
   };
@@ -81,6 +83,16 @@ export default class Layout extends FlipperPlugin<State, void, PersistedState> {
     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<string>, value: any) => {
     const id = this.state.inAXMode
       ? this.state.selectedAXElement
@@ -96,6 +108,7 @@ export default class Layout extends FlipperPlugin<State, void, PersistedState> {
   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<State, void, PersistedState> {
                   active={this.state.inAXMode}
                 />
               )}
+              <ToolbarIcon
+                onClick={this.onToggleAlignmentMode}
+                title="Toggle AlignmentMode to show alignment lines"
+                icon="borders"
+                active={this.state.inAlignmentMode}
+              />
             </Toolbar>
 
             <FlexRow grow={true}>