feat: select elements from preview

package.json

@@ -124,6 +124,7 @@
     "@types/webpack-dev-middleware": "2.0.1",
     "@types/ws": "5.1.0",
     "concurrently": "3.5.1",
+    "devtron": "1.4.0",
     "electron": "1.8.4",
     "electron-builder": "20.8.1",
     "electron-devtools-installer": "2.2.3",

src/container/app.tsx

@@ -41,15 +41,6 @@ export class App extends React.Component {
 		this.redirectUndoRedo();
 	}
 
-	private getDevTools(): React.StatelessComponent | null {
-		try {
-			const DevToolsExports = require('mobx-react-devtools');
-			return DevToolsExports ? DevToolsExports.default : undefined;
-		} catch (error) {
-			return null;
-		}
-	}
-
 	private redirectUndoRedo(): void {
 		document.body.onkeydown = event => {
 			if (event.keyCode === 16) {
@@ -81,12 +72,6 @@ export class App extends React.Component {
 
 	public render(): JSX.Element | null {
 		const store = ViewStore.getInstance();
-		const DevTools = this.getDevTools();
-
-		// Using port as heuristic to determine
-		// if the backend has fully initialized
-		// might change to an explicit AppState
-		// in the future
 
 		if (store.getAppState() !== Types.AppState.Started) {
 			return null;
@@ -124,7 +109,7 @@ export class App extends React.Component {
 							<SideBar
 								side={LayoutSide.Left}
 								direction={LayoutDirection.Column}
-								onClick={() => store.setSelectedElement()}
+								onClick={() => store.unsetSelectedElement()}
 								border={LayoutBorder.Side}
 							>
 								<ElementPane>
@@ -136,7 +121,7 @@ export class App extends React.Component {
 									onClick={e => {
 										e.stopPropagation();
 										store.setRightPane(Types.RightPane.Patterns);
-										store.setSelectedElement();
+										store.unsetSelectedElement();
 									}}
 								/>
 							</SideBar>
@@ -170,7 +155,6 @@ export class App extends React.Component {
 					)}
 				</MainArea>
 				<IconRegistry names={IconName} />
-				{DevTools ? <DevTools /> : null}
 			</Layout>
 		);
 	}

src/container/element-list/element-list.tsx

@@ -48,6 +48,8 @@ export class ElementList extends React.Component<{}, ElementListState> {
 	public createItemFromElement(element: Model.Element): ElementNodeProps {
 		const store = Store.ViewStore.getInstance();
 		const pattern: Model.Pattern | undefined = element.getPattern();
+		const selectedElement = store.getSelectedElement();
+		const open = element.getDescendants().some(e => e === selectedElement);
 
 		if (!pattern) {
 			return {
@@ -57,6 +59,7 @@ export class ElementList extends React.Component<{}, ElementListState> {
 				dragging: this.state.dragging,
 				editable: false,
 				id: element.getId(),
+				open,
 				title: `Invalid: ${element.getName()}`
 			};
 		}
@@ -82,7 +85,8 @@ export class ElementList extends React.Component<{}, ElementListState> {
 			dragging: this.state.dragging,
 			editable: element.isNameEditable(),
 			id: element.getId(),
-			title: element.getName()
+			title: element.getName(),
+			open: element.getOpen() || element.getDescendants().some(e => e === selectedElement)
 		};
 	}
 
@@ -103,7 +107,8 @@ export class ElementList extends React.Component<{}, ElementListState> {
 			draggable: false,
 			dragging: this.state.dragging,
 			children: slotContent.getElements().map(e => this.createItemFromElement(e)),
-			active: false
+			active: false,
+			open: true
 		};
 
 		return slotListItem;
@@ -121,6 +126,7 @@ export class ElementList extends React.Component<{}, ElementListState> {
 
 	private handleClick(e: React.MouseEvent<HTMLElement>): void {
 		const target = e.target as HTMLElement;
+		const icon = above(target, `svg[${ElementAnchors.icon}]`);
 
 		// Skip and deselect elements if the root itself is clicked
 		if (target.getAttribute('data-drag-root')) {
@@ -137,6 +143,10 @@ export class ElementList extends React.Component<{}, ElementListState> {
 
 		e.stopPropagation();
 
+		if (icon) {
+			element.toggleOpen();
+		}
+
 		if (store.getSelectedElement() === element && label) {
 			store.setNameEditableElement(element);
 		}
@@ -350,6 +360,7 @@ export interface ElementNodeProps extends ElementProps {
 	draggable: boolean;
 	dragging: boolean;
 	id: string;
+	open: boolean;
 }
 
 function ElementTree(props: ElementNodeProps): JSX.Element {

src/container/element-list/element-wrapper.tsx

@@ -1,11 +1,10 @@
-import { Element, ElementAnchors } from '../../components';
+import { Element } from '../../components';
 import * as React from 'react';
 import { ViewStore } from '../../store';
 
 export interface ElementWrapperState {
 	highlight?: boolean;
 	highlightPlaceholder?: boolean;
-	open?: boolean;
 }
 
 export interface ElementWrapperProps {
@@ -19,7 +18,7 @@ export interface ElementWrapperProps {
 	onDragDrop?: React.DragEventHandler<HTMLElement>;
 	onDragDropForChild?: React.DragEventHandler<HTMLElement>;
 	onDragStart?: React.DragEventHandler<HTMLElement>;
-	open?: boolean;
+	open: boolean;
 	title: string;
 }
 
@@ -41,18 +40,6 @@ export class ElementWrapper extends React.Component<ElementWrapperProps, Element
 		}
 	}
 
-	private handleClick(e: React.MouseEvent<HTMLElement>): void {
-		const target = e.target as HTMLElement;
-		const icon = above(target, `svg[${ElementAnchors.icon}]`);
-
-		if (icon) {
-			e.stopPropagation();
-			this.setState({
-				open: !this.state.open
-			});
-		}
-	}
-
 	private handleDragDrop(e: React.DragEvent<HTMLElement>): void {
 		this.setState({
 			highlight: false
@@ -113,7 +100,6 @@ export class ElementWrapper extends React.Component<ElementWrapperProps, Element
 				draggable={this.props.draggable}
 				editable={this.props.editable}
 				onChange={e => this.handleChange(e)}
-				onClick={e => this.handleClick(e)}
 				onDragDrop={e => this.handleDragDrop(e)}
 				onDragDropForChild={e => this.handleDragDropForChild(e)}
 				onDragEnter={e => this.handleDragEnter(e)}
@@ -124,7 +110,7 @@ export class ElementWrapper extends React.Component<ElementWrapperProps, Element
 				highlight={this.state.highlight}
 				highlightPlaceholder={this.state.highlightPlaceholder}
 				id={this.props.id}
-				open={!this.state.open}
+				open={this.props.open}
 				title={title}
 			>
 				{children}
@@ -133,7 +119,7 @@ export class ElementWrapper extends React.Component<ElementWrapperProps, Element
 	}
 }
 
-function above(node: EventTarget, selector: string): HTMLElement | null {
+/* function above(node: EventTarget, selector: string): HTMLElement | null {
 	let el = node as HTMLElement;
 	let ended = false;
 
@@ -151,4 +137,4 @@ function above(node: EventTarget, selector: string): HTMLElement | null {
 	}
 
 	return ended ? null : el;
-}
+} */

src/electron/main.ts

@@ -416,6 +416,22 @@ async function createWindow(): Promise<void> {
 						payload: message.payload,
 						type: ServerMessageType.SketchExportResponse
 					});
+					break;
+				}
+				case PreviewMessageType.SelectElement: {
+					Sender.send({
+						id: message.id,
+						payload: message.payload,
+						type: ServerMessageType.SelectElement
+					});
+					break;
+				}
+				case PreviewMessageType.UnselectElement: {
+					Sender.send({
+						id: message.id,
+						payload: undefined,
+						type: ServerMessageType.UnselectElement
+					});
 				}
 			}
 		} catch (err) {
@@ -440,21 +456,22 @@ async function createWindow(): Promise<void> {
 		e.preventDefault();
 	});
 
-	let devToolsInstaller;
-	try {
-		devToolsInstaller = require('electron-devtools-installer');
-	} catch (error) {
-		// Ignored
-	}
+	// Install development tools in dev mode
+	if (electronIsDev) {
+		require('devtron').install();
+
+		const {
+			REACT_DEVELOPER_TOOLS,
+			REACT_PERF,
+			MOBX_DEVTOOLS
+		} = require('electron-devtools-installer');
+		const installDevTool = require('electron-devtools-installer').default;
 
-	if (devToolsInstaller) {
-		devToolsInstaller
-			.default(devToolsInstaller.REACT_DEVELOPER_TOOLS)
-			// tslint:disable-next-line:no-any
-			.catch((err: any) => {
-				console.warn('An error occurred: ', err);
-			});
+		await installDevTool(REACT_DEVELOPER_TOOLS);
+		await installDevTool(REACT_PERF);
+		await installDevTool(MOBX_DEVTOOLS);
 	}
+
 	checkForUpdates(win);
 }
 

src/electron/renderer.ts

@@ -112,6 +112,17 @@ Sender.receive(message => {
 
 				library.setState(state);
 			});
+			break;
+		}
+		case ServerMessageType.SelectElement: {
+			const element = store.getElementById(message.payload.id);
+			if (element) {
+				store.setSelectedElement(element);
+			}
+			break;
+		}
+		case ServerMessageType.UnselectElement: {
+			store.unsetSelectedElement();
 		}
 	}
 });

src/message/message.ts

@@ -5,9 +5,11 @@ export enum PreviewMessageType {
 	ContentResponse = 'content-response',
 	ElementChange = 'element-change',
 	Reload = 'reload',
+	SelectElement = 'select-element',
 	SketchExportRequest = 'sketch-export-request',
 	SketchExportResponse = 'sketch-export-response',
 	State = 'state',
+	UnselectElement = 'unselect-element',
 	Update = 'update'
 }
 
@@ -51,11 +53,13 @@ export enum ServerMessageType {
 	PasteElementInside = 'paste-page-element-inside',
 	Redo = 'redo',
 	Save = 'save',
+	SelectElement = 'select-element',
 	SketchExportRequest = 'sketch-export-request',
 	SketchExportResponse = 'sketch-export-response',
 	StartApp = 'start-app',
 	PatternLibraryChange = 'pattern-library-change',
 	Undo = 'undo',
+	UnselectElement = 'unselect-element',
 	UpdatePatternLibraryRequest = 'update-pattern-library-request'
 }
 
@@ -106,11 +110,13 @@ export type ServerMessage =
 	| PastePageElementInside
 	| Redo
 	| Save
+	| SelectElement
 	| SketchExportRequest
 	| SketchExportResponse
 	| StartAppMessage
 	| StyleGuideChange
 	| Undo
+	| UnselectElement
 	| UpdatePatternLibraryRequest;
 
 export type AppLoaded = EmptyEnvelope<ServerMessageType.AppLoaded>;
@@ -175,6 +181,7 @@ export type PastePageElementBelow = Envelope<ServerMessageType.PasteElementBelow
 export type PastePageElementInside = Envelope<ServerMessageType.PasteElementInside, string>;
 export type Redo = EmptyEnvelope<ServerMessageType.Redo>;
 export type Save = Envelope<ServerMessageType.Save, Types.SavePayload>;
+export type SelectElement = Envelope<ServerMessageType.SelectElement, Types.SelectPayload>;
 export type SketchExportRequest = Envelope<
 	ServerMessageType.SketchExportRequest,
 	Types.SketchExportPayload
@@ -186,6 +193,7 @@ export type StyleGuideChange = Envelope<
 	Types.SerializedPatternLibrary
 >;
 export type Undo = EmptyEnvelope<ServerMessageType.Undo>;
+export type UnselectElement = EmptyEnvelope<ServerMessageType.UnselectElement>;
 export type UpdatePatternLibraryRequest = Envelope<
 	ServerMessageType.UpdatePatternLibraryRequest,
 	Types.SerializedProject

src/model/element/element-content.ts

@@ -86,6 +86,13 @@ export class ElementContent {
 		return clone;
 	}
 
+	public getDescendants(): Element[] {
+		return this.getElements().reduce(
+			(acc, element) => [...acc, element, ...element.getDescendants()],
+			[]
+		);
+	}
+
 	public getElementIndexById(id: string): number {
 		return this.elementIds.indexOf(id);
 	}