fix: ensure container is set correctly

src/container/property-list.tsx

@@ -10,9 +10,15 @@ import {
 import { ServerMessageType } from '../message';
 import * as MobX from 'mobx';
 import { observer } from 'mobx-react';
-import { PageElement } from '../store/page/page-element';
 import * as React from 'react';
-import { EnumProperty, ObjectProperty, Option, PropertyValueCommand, ViewStore } from '../store';
+import {
+	EnumProperty,
+	ObjectProperty,
+	Option,
+	PageElement,
+	PropertyValueCommand,
+	ViewStore
+} from '../store';
 import * as Types from '../store/types';
 import * as uuid from 'uuid';
 

src/electron/context-menus.ts

@@ -1,8 +1,7 @@
 import * as Sender from '../message/client';
 import { MenuItemConstructorOptions, remote } from 'electron';
 import { ServerMessageType } from '../message';
-import { PageElement } from '../store/page/page-element';
-import { ViewStore } from '../store';
+import { PageElement, ViewStore } from '../store';
 import * as uuid from 'uuid';
 
 const store = ViewStore.getInstance();

src/store/command/command.ts

@@ -1,4 +1,4 @@
-import { PageElement } from '../page/page-element';
+import { PageElement } from '../page-element';
 
 /**
  * A user operation on a page or project, with the ability to undo and redo.

src/store/command/element-command.ts

@@ -1,6 +1,6 @@
 import { ViewStore } from '../';
 import { Command } from './command';
-import { PageElement } from '../page/page-element';
+import { PageElement } from '../page-element';
 
 /**
  * A user operation on a page element, ensuring that the page is loaded and references get

src/store/command/element-location-command.ts

@@ -1,7 +1,7 @@
 import { Command } from './command';
 import { ElementCommand } from './element-command';
 import { Page } from '../page/page';
-import { PageElement } from '../page/page-element';
+import { PageElement } from '../page-element';
 import { ViewStore } from '../view-store';
 
 /**

src/store/command/element-name-command.ts

@@ -1,6 +1,6 @@
 import { Command } from './command';
 import { ElementCommand } from './element-command';
-import { PageElement } from '../page/page-element';
+import { PageElement } from '../page-element';
 
 /**
  * A user operation to set the name of a page element.

src/store/command/element-remove-command.ts

@@ -1,7 +1,7 @@
 import { Command } from './command';
 import { ElementCommand } from './element-command';
 import { Page } from '../page/page';
-import { PageElement } from '../page/page-element';
+import { PageElement } from '../page-element';
 import { ViewStore } from '../view-store';
 
 /**

src/store/command/property-value-command.ts

@@ -1,6 +1,6 @@
 import { Command } from './command';
 import { ElementCommand } from './element-command';
-import { PageElement } from '../page/page-element';
+import { PageElement } from '../page-element';
 
 /**
  * A user operation to set the value of a page element property.

src/store/index.ts

@@ -1,5 +1,6 @@
 export * from './command';
 export * from './page';
+export * from './page-element';
 export * from './persister';
 export * from './project';
 export * from './styleguide';

src/store/page-element/index.ts

@@ -0,0 +1,2 @@
+export * from './page-element';
+export * from './page-element-content';

src/store/page-element/page-element-content.ts

@@ -0,0 +1,90 @@
+import * as MobX from 'mobx';
+import { PageElement } from './page-element';
+import { Styleguide } from '../styleguide';
+import * as Types from '../types';
+
+export interface PageElementContentContext {
+	elementId: string;
+	styleguide: Styleguide;
+}
+
+export interface PageElementContentInit {
+	elementId: string;
+	elements: PageElement[];
+	id: string;
+	name: string;
+}
+
+// TODO: Distinguish between content id and slot id
+export class PageElementContent {
+	@MobX.observable private elementId: string;
+	@MobX.observable private elements: PageElement[] = [];
+	@MobX.observable private id: string;
+	@MobX.observable private name: string;
+
+	public constructor(init: PageElementContentInit) {
+		this.id = init.id;
+		this.elementId = init.elementId;
+		this.name = init.name;
+		this.elements = init.elements;
+		this.elements.forEach((element, index) => this.insert({ element, at: index }));
+	}
+
+	public static from(
+		serialized: Types.SerializedPageElementContent,
+		context: PageElementContentContext
+	): PageElementContent {
+		return new PageElementContent({
+			elementId: context.elementId,
+			id: serialized.id,
+			name: serialized.name,
+			elements: serialized.elements.map(element =>
+				PageElement.from(element, { styleguide: context.styleguide })
+			)
+		});
+	}
+
+	public getElementId(): string {
+		return this.elementId;
+	}
+
+	public getElements(): PageElement[] {
+		return this.elements;
+	}
+
+	public getId(): string {
+		return this.id;
+	}
+
+	@MobX.action
+	public insert(options: { at: number; element: PageElement }): void {
+		const id = options.element.getId();
+
+		options.element.setContainer(this);
+
+		if (this.elements.find(e => e.getId() === id)) {
+			return;
+		}
+
+		this.elements.splice(options.at, 0, options.element);
+	}
+
+	@MobX.action
+	public remove(options: { element: PageElement }): void {
+		const index = this.elements.indexOf(options.element);
+
+		if (index === -1) {
+			return;
+		}
+
+		this.elements.splice(index, 1);
+	}
+
+	public toJSON(): Types.SerializedPageElementContent {
+		return {
+			id: this.id,
+			name: this.name,
+			elements: this.elements.map(element => element.toJSON())
+		};
+	}
+}

src/store/page/page-element.ts → src/store/page-element/page-element.ts

@@ -1,8 +1,8 @@
-// tslint:disable:no-any
 import * as deepAssign from 'deep-assign';
 import * as MobX from 'mobx';
 import * as ObjectPath from 'object-path';
-import { Page } from './page';
+import { Page } from '../page';
+import { PageElementContent } from './page-element-content';
 import { Pattern, Property, Styleguide } from '../styleguide';
 import * as Types from '../types';
 import * as Uuid from 'uuid';
@@ -22,84 +22,6 @@ export interface PageElementContext {
 	styleguide: Styleguide;
 }
 
-export interface PageElementContentContext {
-	elementId: string;
-	styleguide: Styleguide;
-}
-
-export interface PageElementContentInit {
-	elementId: string;
-	elements: PageElement[];
-	id: string;
-	name: string;
-}
-
-// TODO: Distinguish between content id and slot id
-export class PageElementContent {
-	@MobX.observable private elementId: string;
-	@MobX.observable private elements: PageElement[] = [];
-	@MobX.observable private id: string;
-	@MobX.observable private name: string;
-
-	public constructor(init: PageElementContentInit) {
-		this.id = init.id;
-		this.elementId = init.elementId;
-		this.name = init.name;
-		this.elements = init.elements;
-		this.elements.forEach((element, index) => this.insert({ element, at: index }));
-	}
-
-	public static from(
-		serialized: Types.SerializedPageElementContent,
-		context: PageElementContentContext
-	): PageElementContent {
-		return new PageElementContent({
-			elementId: context.elementId,
-			id: serialized.id,
-			name: serialized.name,
-			elements: serialized.elements.map(element =>
-				PageElement.from(element, { styleguide: context.styleguide })
-			)
-		});
-	}
-
-	public getElementId(): string {
-		return this.elementId;
-	}
-
-	public getElements(): PageElement[] {
-		return this.elements;
-	}
-
-	public getId(): string {
-		return this.id;
-	}
-
-	@MobX.action
-	public insert(options: { at: number; element: PageElement }): void {
-		this.elements.splice(options.at, 0, options.element);
-	}
-
-	@MobX.action
-	public remove(options: { element: PageElement }): void {
-		const index = this.elements.indexOf(options.element);
-
-		if (index === -1) {
-			return;
-		}
-
-		this.elements.splice(index, 1);
-	}
-
-	public toJSON(): Types.SerializedPageElementContent {
-		return {
-			id: this.id,
-			name: this.name,
-			elements: this.elements.map(element => element.toJSON())
-		};
-	}
-}
-
 /**
  * A page element provides the properties data of a pattern.
  * It represents the pattern component instance from a designer's point-of-view.
@@ -376,6 +298,7 @@ export class PageElement {
 		}
 
 		const store = ViewStore.getInstance();
+		console.log(this.container);
 		return store.getElementById(this.container.getElementId());
 	}
 
@@ -450,7 +373,7 @@ export class PageElement {
 	 * @return Whether this page element is the root element.
 	 */
 	public isRoot(): boolean {
-		return this.container === null;
+		return !Boolean(this.container);
 	}
 
 	/**
@@ -463,6 +386,10 @@ export class PageElement {
 		}
 	}
 
+	public setContainer(container: PageElementContent): void {
+		this.container = container;
+	}
+
 	/**
 	 * Moves this page element to a new position within its parent
 	 * @param index The new 0-based position within the parent's children.

src/store/page/index.ts

@@ -1,2 +1 @@
 export * from './page';
-export * from './page-element';

src/store/page/page.ts

@@ -1,5 +1,5 @@
 import * as MobX from 'mobx';
-import { PageElement } from './page-element';
+import { PageElement } from '../page-element';
 import { Styleguide, SyntheticPatternType } from '../styleguide';
 import * as Types from '../types';
 import * as uuid from 'uuid';

src/store/view-store.ts

@@ -8,7 +8,8 @@ import {
 
 import * as MobX from 'mobx';
 import * as Os from 'os';
-import { Page, PageElement } from './page';
+import { Page } from './page';
+import { PageElement } from './page-element';
 import * as Path from 'path';
 import { Project } from './project';
 import { Pattern, Styleguide } from './styleguide';