fix: deal with state retention bugs

src/container/editable-title/editable-title-container.tsx

@@ -23,24 +23,20 @@ export class EditableTitleContainer extends React.Component<EditableTitleContain
 	protected handleBlur(): void {
 		const { store } = this.props as EditableTitleContainerProps & { store: ViewStore };
 
-		if (!this.props.page.getName()) {
-			this.props.page.setName(
-				this.props.page.getName({ unedited: true }),
-				Types.EditableTitleState.Editing
-			);
+		if (this.props.page.getEditedName().trim().length === 0) {
+			this.props.page.setName(this.props.page.getName({ unedited: true }));
 			this.editNameState = Types.EditableTitleState.Editable;
 			return;
 		}
 
 		this.editNameState = Types.EditableTitleState.Editable;
-
-		this.props.page.setName(this.props.page.getName(), Types.EditableTitleState.Editing);
+		this.props.page.setName(this.props.page.getName());
 
 		store.commit();
 	}
 
 	protected handleChange(e: React.ChangeEvent<HTMLInputElement>): void {
-		this.props.page.setName(e.target.value, this.editNameState);
+		this.props.page.setEditableName(e.target.value);
 	}
 
 	protected handleClick(e: React.MouseEvent<HTMLElement>): void {
@@ -65,24 +61,18 @@ export class EditableTitleContainer extends React.Component<EditableTitleContain
 		switch (e.key) {
 			case 'Escape':
 				this.editNameState = Types.EditableTitleState.Editable;
-				this.props.page.setName(
-					this.props.page.getName({ unedited: true }),
-					Types.EditableTitleState.Editing
-				);
+				this.props.page.setName(this.props.page.getName({ unedited: true }));
 				return;
 			case 'Enter':
 				if (this.editNameState === Types.EditableTitleState.Editing) {
 					if (!this.props.page.getName()) {
-						this.props.page.setName(
-							this.props.page.getName({ unedited: true }),
-							this.editNameState
-						);
+						this.props.page.setName(this.props.page.getName({ unedited: true }));
 						this.editNameState = Types.EditableTitleState.Editable;
 						return;
 					}
 
 					this.editNameState = Types.EditableTitleState.Editable;
-					this.props.page.setName(this.props.page.getEditedName(), this.editNameState);
+					this.props.page.setName(this.props.page.getEditedName());
 					store.commit();
 					return;
 				}

src/model/element/element.ts

@@ -54,8 +54,6 @@ export class Element {
 
 	@Mobx.observable private open: boolean;
 
-	@Mobx.observable private page?: Page;
-
 	@Mobx.observable private parent: Element;
 
 	private readonly patternId: string;
@@ -331,6 +329,12 @@ export class Element {
 	}
 
 	public getHighlighted(): boolean {
+		const page = this.getPage();
+
+		if (!page || !page.getActive()) {
+			return false;
+		}
+
 		return this.highlighted;
 	}
 
@@ -369,15 +373,7 @@ export class Element {
 	}
 
 	public getPage(): Page | undefined {
-		if (this.page) {
-			return this.page;
-		}
-
-		if (this.parent) {
-			return this.parent.getPage();
-		}
-
-		return;
+		return this.project.getPages().find(page => page.hasElement(this));
 	}
 
 	public getParent(): Element | undefined {
@@ -405,6 +401,12 @@ export class Element {
 	}
 
 	public getPlaceholderHighlighted(): boolean {
+		const page = this.getPage();
+
+		if (!page || !page.getActive()) {
+			return false;
+		}
+
 		return this.placeholderHighlighted;
 	}
 
@@ -440,6 +442,12 @@ export class Element {
 	}
 
 	public getSelected(): boolean {
+		const page = this.getPage();
+
+		if (!page || !page.getActive()) {
+			return false;
+		}
+
 		return this.selected;
 	}
 
@@ -527,11 +535,6 @@ export class Element {
 		this.open = open;
 	}
 
-	@Mobx.action
-	public setPage(page: Page): void {
-		this.page = page;
-	}
-
 	@Mobx.action
 	public setParent(init: { index: number; parent: Element; slotId: string }): void {
 		const previousContainer = this.getContainer();

src/model/page/page.ts

@@ -39,12 +39,6 @@ export class Page {
 		this.active = init.active;
 		this.rootId = init.rootId;
 		this.name = init.name;
-
-		const rootElement = this.getRoot();
-
-		if (rootElement) {
-			rootElement.setPage(this);
-		}
 	}
 
 	@Mobx.computed
@@ -199,30 +193,40 @@ export class Page {
 		return this.project.getElementById(this.rootId);
 	}
 
+	public hasElement(element: Element): boolean {
+		const rootElement = this.getRoot();
+
+		if (!rootElement) {
+			return false;
+		}
+
+		return rootElement.getDescendants().some(desc => desc.getId() === element.getId());
+	}
+
 	@Mobx.action
 	public setActive(active: boolean): void {
 		this.active = active;
 	}
 
+	@Mobx.action
+	public setEditableName(name: string): void {
+		this.editedName = name;
+	}
+
 	@Mobx.action
 	public setFocused(focused: boolean): void {
 		this.focused = focused;
 	}
 
 	@Mobx.action
-	public setName(name: string, editNameState?: Types.EditableTitleState): void {
-		if (editNameState === Types.EditableTitleState.Editing) {
-			this.editedName = name;
-			return;
-		}
+	public setName(name: string): void {
 		this.name = name;
+		this.editedName = name;
 	}
 
 	@Mobx.action
 	public setNameState(state: Types.EditableTitleState): void {
-		if (state === Types.EditableTitleState.Editing) {
-			this.editedName = this.name;
-		}
+		this.editedName = this.name;
 		this.nameState = state;
 	}