feat(store): edit text child elements

src/component/presentation/preview.tsx

@@ -4,6 +4,7 @@ import { PageElement } from '../../store/page/page_element';
 import { Pattern } from '../../store/pattern';
 import { PropertyValue } from '../../store/page/property_value';
 import * as React from 'react';
+import { TextPattern } from '../../store/pattern/text_pattern';
 
 export interface PreviewProps {
 	page?: Page;
@@ -51,6 +52,9 @@ export class Preview extends React.Component<PreviewProps> {
 			}
 
 			const pattern: Pattern = pageElement.getPattern() as Pattern;
+			if (pattern instanceof TextPattern) {
+				return pageElement.getPropertyValue('text');
+			}
 
 			// tslint:disable-next-line:no-any
 			const componentProps: any = {};

src/store/index.ts

@@ -71,6 +71,7 @@ export class Store {
 			this.currentPage = undefined;
 			this.projects.clear();
 			this.patternRoot = new PatternFolder(this, '');
+			this.patternRoot.addTextPattern();
 
 			const projects: Project[] = [];
 

src/store/page/page_element.ts

@@ -13,9 +13,10 @@ export class PageElement {
 	private pattern?: Pattern;
 	@MobX.observable private propertyValues: Map<string, PropertyValue> = new Map();
 
-	public constructor(pattern?: Pattern) {
+	public constructor(pattern?: Pattern, parent?: PageElement) {
 		this.pattern = pattern;
 		this.patternPath = pattern ? pattern.getRelativePath().replace(PathUtils.sep, '/') : '';
+		this.setParent(parent);
 	}
 
 	public static fromJsonObject(
@@ -25,8 +26,7 @@ export class PageElement {
 	): PageElement | undefined {
 		const patternPath: string = json['pattern'] as string;
 		const pattern: Pattern | undefined = store.getPattern(patternPath);
-		const element = new PageElement(pattern);
-		element.setParent(parent);
+		const element = new PageElement(pattern, parent);
 
 		if (!pattern) {
 			console.warn(`Ignoring unknown pattern "${patternPath}"`);
@@ -37,20 +37,37 @@ export class PageElement {
 		if (json.properties) {
 			Object.keys(json.properties as JsonObject).forEach((propertyId: string) => {
 				const value: JsonValue = (json.properties as JsonObject)[propertyId];
-				element.setPropertyValue(propertyId, element.createElementOrValue(value, store));
+				element.setPropertyValue(
+					propertyId,
+					element.createPropertyElementOrValue(value, store)
+				);
 			});
 		}
 
 		if (json.children) {
 			element.children = (json.children as JsonArray).map(
-				(childJson: JsonObject) => element.createElementOrValue(childJson, store) as PageElement
+				(childJson: JsonObject) =>
+					element.createChildElementOrValue(childJson, store) as PageElement
 			);
 		}
 
 		return element;
 	}
 
-	protected createElementOrValue(json: JsonValue, store: Store): PageElement | PropertyValue {
+	protected createChildElementOrValue(json: JsonValue, store: Store): PageElement | PropertyValue {
+		if (json && (json as JsonObject)['_type'] === 'pattern') {
+			return PageElement.fromJsonObject(json as JsonObject, store, this);
+		} else {
+			const element: PageElement = new PageElement(store.getPattern('text'), this);
+			element.setPropertyValue('text', String(json));
+			return element;
+		}
+	}
+
+	protected createPropertyElementOrValue(
+		json: JsonValue,
+		store: Store
+	): PageElement | PropertyValue {
 		if (json && (json as JsonObject)['_type'] === 'pattern') {
 			return PageElement.fromJsonObject(json as JsonObject, store, this);
 		} else {
@@ -136,20 +153,20 @@ export class PageElement {
 
 		this.propertyValues.forEach((value: PropertyValue, key: string) => {
 			(json.properties as JsonObject)[key] =
-				value !== null && value !== undefined ? this.valueToJson(value) : value;
+				value !== null && value !== undefined ? this.propertyToJsonValue(value) : value;
 		});
 
 		return json;
 	}
 
-	protected valueToJson(value: PropertyValue): JsonValue {
+	protected propertyToJsonValue(value: PropertyValue): JsonValue {
 		if (value instanceof PageElement) {
 			return value.toJsonObject();
 		} else if (value instanceof Object) {
 			const jsonObject: JsonObject = {};
 			Object.keys(value).forEach((propertyId: string) => {
 				// tslint:disable-next-line:no-any
-				jsonObject[propertyId] = this.valueToJson((value as any)[propertyId]);
+				jsonObject[propertyId] = this.propertyToJsonValue((value as any)[propertyId]);
 			});
 			return jsonObject;
 		} else {

src/store/pattern/folder.ts

@@ -1,6 +1,7 @@
 import * as FileUtils from 'fs';
 import * as MobX from 'mobx';
 import * as PathUtils from 'path';
+import { TextPattern } from './text_pattern';
 import { Pattern } from '.';
 import { Store } from '..';
 
@@ -19,6 +20,11 @@ export class PatternFolder {
 		this.reload();
 	}
 
+	public addTextPattern(): void {
+		const pattern: Pattern = new TextPattern(this);
+		this.patterns.set(pattern.getName(), pattern);
+	}
+
 	public getAbsolutePath(): string {
 		return PathUtils.join(this.store.getPatternsPath(), this.getRelativePath());
 	}

src/store/pattern/index.ts

@@ -6,24 +6,24 @@ import { TypeScriptParser } from './parser/typescript_parser';
 
 export class Pattern {
 	/**
-	 * The name of the pattern folder.
+	 * The name of the pattern within the folder.
 	 */
-	private name: string;
+	protected name: string;
 
 	/**
 	 * The parent folder containing the pattern folder.
 	 */
-	private folder: PatternFolder;
+	protected folder: PatternFolder;
 
 	/**
 	 * The properties this pattern supports.
 	 */
-	private properties: Map<string, Property> = new Map();
+	protected properties: Map<string, Property> = new Map();
 
 	/**
 	 * This is a valid pattern for Alva (has been parsed successfully).
 	 */
-	private valid: boolean = false;
+	protected valid: boolean = false;
 
 	public constructor(folder: PatternFolder, name: string) {
 		this.folder = folder;

src/store/pattern/text_pattern.ts

@@ -0,0 +1,17 @@
+import { PatternFolder } from './folder';
+import { Property } from './property/index';
+import { StringProperty } from './property/string_property';
+import { Pattern } from '.';
+
+export class TextPattern extends Pattern {
+	public constructor(folder: PatternFolder) {
+		super(folder, 'text');
+
+		const property: Property = new StringProperty('text', 'Text', false);
+		this.properties.set(property.getId(), property);
+	}
+
+	public reload(): void {
+		// Do nothing, this is a synthetic pattern
+	}
+}