fix: model forced open state as additional combinator (#477)

* fix: model forced open state as additional combinator
meetalva · May 29, 2018 · 499bce0 · 499bce0
1 parent be9df1d
commit 499bce0
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 5 deletions.
diff --git a/src/container/element-list/element-container.tsx b/src/container/element-list/element-container.tsx
@@ -16,7 +16,7 @@ export class ElementContainer extends React.Component<ElementContainerProps> {
 		const store = ViewStore.getInstance();
 		const { props } = this;
 		const open =
-			props.element.getOpen() || props.element.getDescendants().some(e => e.getSelected());
+			props.element.getOpen() || props.element.getForcedOpen();
 
 		// Ensure mobx registers
 		props.element.getSelected();

diff --git a/src/model/element/element.ts b/src/model/element/element.ts
@@ -12,6 +12,7 @@ export interface ElementInit {
 	containerId?: string;
 	contentIds: string[];
 	dragged: boolean;
+	forcedOpen: boolean;
 	highlighted: boolean;
 	id?: string;
 	name?: string;
@@ -37,6 +38,8 @@ export class Element {
 
 	@Mobx.observable private editedName: string;
 
+	@Mobx.observable private forcedOpen: boolean;
+
 	@Mobx.observable private highlighted: boolean;
 
 	private readonly id: string;
@@ -70,6 +73,7 @@ export class Element {
 		this.patternId = init.patternId;
 		this.containerId = init.containerId;
 		this.open = init.open;
+		this.forcedOpen = init.forcedOpen;
 		this.patternLibrary = context.patternLibrary;
 		this.project = context.project;
 		this.selected = init.selected;
@@ -128,6 +132,7 @@ export class Element {
 				containerId: serialized.containerId,
 				contentIds: serialized.contentIds,
 				open: serialized.open,
+				forcedOpen: serialized.forcedOpen,
 				properties: serialized.properties.map(p =>
 					ElementProperty.from(p, { patternLibrary: context.patternLibrary })
 				),
@@ -170,6 +175,7 @@ export class Element {
 				contentIds: clonedContents.map(content => content.getId()),
 				name: this.name,
 				open: false,
+				forcedOpen: false,
 				patternId: this.patternId,
 				placeholderHighlighted: false,
 				properties: this.properties.map(propertyValue => propertyValue.clone()),
@@ -190,6 +196,19 @@ export class Element {
 		return clone;
 	}
 
+	public getAncestors(init: Element[] = []): Element[] {
+		const parent = this.getParent();
+
+		if (!parent) {
+			return init;
+		}
+
+		init.push(parent);
+		parent.getAncestors(init);
+
+		return init;
+	}
+
 	public getContainer(): ElementContent | undefined {
 		if (!this.containerId) {
 			return;
@@ -281,6 +300,10 @@ export class Element {
 		return result;
 	}
 
+	public getForcedOpen(): boolean {
+		return this.forcedOpen;
+	}
+
 	public getHighlighted(): boolean {
 		return this.highlighted;
 	}
@@ -387,6 +410,11 @@ export class Element {
 		this.dragged = dragged;
 	}
 
+	@Mobx.action
+	public setForcedOpen(forcedOpen: boolean): void {
+		this.forcedOpen = forcedOpen;
+	}
+
 	@Mobx.action
 	public setHighlighted(highlighted: boolean): void {
 		this.highlighted = highlighted;
@@ -481,7 +509,8 @@ export class Element {
 
 	@Mobx.action
 	public toggleOpen(): void {
-		this.setOpen(!this.getOpen());
+		this.setOpen(!this.getOpen() && !this.getForcedOpen());
+		this.setForcedOpen(false);
 	}
 
 	@Mobx.action
@@ -498,6 +527,7 @@ export class Element {
 			id: this.id,
 			name: this.name,
 			open: this.open,
+			forcedOpen: this.forcedOpen,
 			patternId: this.patternId,
 			placeholderHighlighted: this.placeholderHighlighted,
 			properties: this.properties.map(elementProperty => elementProperty.toJSON()),

diff --git a/src/model/page/page.ts b/src/model/page/page.ts
@@ -95,6 +95,7 @@ export class Page {
 				contentIds: rootContents.map(c => c.getId()),
 				dragged: false,
 				open: true,
+				forcedOpen: false,
 				patternId: rootPattern.getId(),
 				placeholderHighlighted: false,
 				properties: [],

diff --git a/src/model/types.ts b/src/model/types.ts
@@ -28,6 +28,7 @@ export interface SerializedElement {
 	containerId?: string;
 	contentIds: string[];
 	dragged: boolean;
+	forcedOpen: boolean;
 	highlighted: boolean;
 	id: string;
 	name: string;

diff --git a/src/store/view-store.ts b/src/store/view-store.ts
@@ -32,7 +32,7 @@ export class ViewStore {
 	private static EPHEMERAL_CONTENTS: WeakMap<
 		Model.Element,
 		Model.ElementContent[]
-	> = new WeakMap();
+		> = new WeakMap();
 
 	/**
 	 * The store singleton instance.
@@ -104,7 +104,7 @@ export class ViewStore {
 	/**
 	 * Creates a new store.
 	 */
-	private constructor() {}
+	private constructor() { }
 
 	/**
 	 * Returns (or creates) the one global store instance.
@@ -227,6 +227,7 @@ export class ViewStore {
 				contentIds: elementContents.map(e => e.getId()),
 				dragged: init.dragged || false,
 				highlighted: false,
+				forcedOpen: false,
 				open: false,
 				patternId: init.pattern.getId(),
 				placeholderHighlighted: false,
@@ -921,10 +922,18 @@ export class ViewStore {
 
 		if (previousSelectedElement) {
 			previousSelectedElement.setSelected(false);
+
+			previousSelectedElement.getAncestors().forEach(ancestor => {
+				ancestor.setForcedOpen(false);
+			});
 		}
 
 		this.rightPane = null;
 		selectedElement.setSelected(true);
+
+		selectedElement.getAncestors().forEach(ancestor => {
+			ancestor.setForcedOpen(true);
+		});
 	}
 
 	@Mobx.action
@@ -972,7 +981,12 @@ export class ViewStore {
 			return;
 		}
 
-		this.project.getElements().forEach(element => element.setSelected(false));
+		this.project.getElements().forEach(element => {
+			element.setSelected(false);
+			element.getAncestors().forEach(ancestor => {
+				ancestor.setForcedOpen(false);
+			});
+		});
 	}
 
 	@Mobx.action