feat: init new element on pattern doubleclick

meetalva · May 24, 2018 · d3077f7 · d3077f7
1 parent ce202c5
commit d3077f7
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 33 deletions.
diff --git a/src/components/pattern-list/index.tsx b/src/components/pattern-list/index.tsx
@@ -12,6 +12,7 @@ export interface PatternListItemProps {
 	draggable?: boolean;
 	icon?: string;
 	onClick?: React.MouseEventHandler<HTMLElement>;
+	onDoubleClick?: React.MouseEventHandler<HTMLElement>;
 	onDragStart?: React.DragEventHandler<HTMLElement>;
 }
 
@@ -91,7 +92,12 @@ export const PatternFolderView: React.SFC<PatternFolderViewProps> = props => (
 export const PatternListItem: React.StatelessComponent<PatternListItemProps> = props => {
 	const { draggable, onDragStart, icon, onClick } = props;
 	return (
-		<StyledPatternListItem onDragStart={onDragStart} draggable={draggable} onClick={onClick}>
+		<StyledPatternListItem
+			onDoubleClick={props.onDoubleClick}
+			onDragStart={onDragStart}
+			draggable={draggable}
+			onClick={onClick}
+		>
 			{icon ? (
 				<StyledImg {...{ [PatternAnchor.icon]: 'true' }} src={icon} />
 			) : (

diff --git a/src/container/pattern-list/pattern-item-container.tsx b/src/container/pattern-list/pattern-item-container.tsx
@@ -1,12 +1,26 @@
 import { PatternAnchor, PatternListItem } from '../../components';
 import { Pattern } from '../../model';
 import * as React from 'react';
+import { ViewStore } from '../../store';
 
 export interface PatternItemContainerContainerProps {
 	pattern: Pattern;
 }
 
 export class PatternItemContainer extends React.Component<PatternItemContainerContainerProps> {
+	private handleDoubleClick(e: React.MouseEvent<HTMLElement>): void {
+		const store = ViewStore.getInstance();
+		const element = store.addNewElement({ pattern: this.props.pattern });
+		const selectedElement = store.getSelectedElement();
+		const page = store.getCurrentPage();
+
+		const targetElement = selectedElement ? selectedElement : page ? page.getRoot() : null;
+
+		if (element && targetElement) {
+			store.insertAfterElement({ element, targetElement });
+		}
+	}
+
 	private handleDragStart(e: React.DragEvent<HTMLElement>): void {
 		e.dataTransfer.dropEffect = 'copy';
 
@@ -25,6 +39,7 @@ export class PatternItemContainer extends React.Component<PatternItemContainerCo
 			<PatternListItem
 				key={props.pattern.getId()}
 				draggable
+				onDoubleClick={e => this.handleDoubleClick(e)}
 				onDragStart={e => this.handleDragStart(e)}
 			>
 				{props.pattern.getName()}

diff --git a/src/store/view-store.ts b/src/store/view-store.ts
@@ -520,6 +520,55 @@ export class ViewStore {
 		return this.undoBuffer.length > 0;
 	}
 
+	public insertAfterElement(init: {
+		element: Model.Element;
+		targetElement: Model.Element;
+	}): Model.Element | undefined {
+		if (init.targetElement.isRoot()) {
+			return this.insertInsideElement(init);
+		}
+
+		const container = init.targetElement.getContainer();
+
+		if (!container) {
+			return;
+		}
+
+		this.execute(
+			Model.ElementLocationCommand.addChild({
+				index: init.targetElement.getIndex() + 1,
+				contentId: container.getId(),
+				childId: init.element.getId()
+			})
+		);
+
+		this.setSelectedElement(init.element);
+		return init.element;
+	}
+
+	public insertInsideElement(init: {
+		element: Model.Element;
+		targetElement: Model.Element;
+	}): Model.Element | undefined {
+		const contents = init.targetElement.getContentBySlotType(Types.SlotType.Children);
+
+		if (!contents) {
+			return;
+		}
+
+		this.execute(
+			Model.ElementLocationCommand.addChild({
+				contentId: contents.getId(),
+				childId: init.element.getId(),
+				index: contents.getElements().length
+			})
+		);
+
+		this.setSelectedElement(init.element);
+
+		return init.element;
+	}
+
 	public isElementHighlightedById(id: string): boolean {
 		const highlightedElement = this.getHighlightedElement();
 
@@ -552,27 +601,12 @@ export class ViewStore {
 
 	public pasteAfterElement(targetElement: Model.Element): Model.Element | undefined {
 		const clipboardElement = this.getClipboardItem(ClipBoardType.Element);
-		const container = targetElement.getContainer();
 
-		if (!clipboardElement || !container) {
+		if (!clipboardElement) {
 			return;
 		}
 
-		if (targetElement.isRoot()) {
-			return this.pasteInsideElement(targetElement);
-		}
-
-		this.execute(
-			Model.ElementLocationCommand.addChild({
-				index: targetElement.getIndex() + 1,
-				contentId: container.getId(),
-				childId: clipboardElement.getId()
-			})
-		);
-
-		this.setSelectedElement(clipboardElement);
-
-		return clipboardElement;
+		return this.insertAfterElement({ element: clipboardElement, targetElement });
 	}
 
 	public pasteAfterElementById(id: string): Model.Element | undefined {
@@ -602,21 +636,7 @@ export class ViewStore {
 			return;
 		}
 
-		const contents = element.getContentBySlotType(Types.SlotType.Children);
-
-		if (!contents) {
-			return;
-		}
-
-		this.execute(
-			Model.ElementLocationCommand.addChild({
-				contentId: contents.getId(),
-				childId: clipboardElement.getId(),
-				index: contents.getElements().length - 1
-			})
-		);
-
-		this.setSelectedElement(clipboardElement);
+		this.insertInsideElement({ element: clipboardElement, targetElement: element });
 
 		return clipboardElement;
 	}