fix: update pattern / element properties correctly

package.json

@@ -158,6 +158,7 @@
     "common-dir": "2.0.2",
     "commondir": "1.0.1",
     "deep-assign": "2.0.0",
+    "deep-diff": "1.0.1",
     "electron-is-dev": "0.3.0",
     "electron-log": "2.2.14",
     "electron-store": "2.0.0",

src/container/pattern-list/pattern-list-container.tsx

@@ -1,7 +1,7 @@
-import { Search, Space, SpaceSize } from '../../components';
+import * as Components from '../../components';
 import { ElementDragImage } from '../element-drag-image';
 import * as MobxReact from 'mobx-react';
-import { PatternFolderContainer } from './pattern-folder-container';
+// import { PatternFolderContainer } from './pattern-folder-container';
 import { PatternItemContainer } from './pattern-item-container';
 import * as React from 'react';
 import { ViewStore } from '../../store';
@@ -23,29 +23,22 @@ export class PatternListContainer extends React.Component {
 
 		return (
 			<div onDragStart={e => this.handleDragStart(e)}>
-				<Space sizeBottom={SpaceSize.XXS}>
-					<Search
+				<Components.Space sizeBottom={Components.SpaceSize.XXS}>
+					<Components.Search
 						placeholder="Search Library"
 						onChange={e => store.setPatternSearchTerm(e.target.value)}
 						value={store.getPatternSearchTerm()}
 					/>
-				</Space>
-				{store.getPatternLibraries().map(library => {
-					const patternRoot = library.getRoot();
-					const matches = library.query(store.getPatternSearchTerm());
-
-					return (
-						<PatternFolderContainer
-							isRoot
-							folder={patternRoot}
-							matches={matches}
-							key={library.getId()}
-							render={pattern => (
+				</Components.Space>
+				{store.getPatternLibraries().map(library => (
+					<Components.PatternFolderView key={library.getId()} name={library.getName()}>
+						{library
+							.getPatterns()
+							.map(pattern => (
 								<PatternItemContainer key={pattern.getId()} pattern={pattern} />
-							)}
-						/>
-					);
-				})}
+							))}
+					</Components.PatternFolderView>
+				))}
 
 				<ElementDragImage
 					element={store.getDraggedElement()}

src/container/property-list/property-list.tsx

@@ -3,7 +3,6 @@ import { partition } from 'lodash';
 import * as Model from '../../model';
 import { PropertyListItem } from './property-list-item';
 import * as React from 'react';
-import { Space, SpaceSize } from '../../components/space';
 import { ViewStore } from '../../store';
 import * as Types from '../../types';
 
@@ -28,11 +27,9 @@ export class PropertyListContainer extends React.Component {
 				{regularProps.map(elementProperty => (
 					<PropertyListItem key={elementProperty.getId()} property={elementProperty} />
 				))}
-				<Space sizeTop={SpaceSize.L}>
-					{eventHandlerProps.map(elementProperty => (
-						<PropertyListItem key={elementProperty.getId()} property={elementProperty} />
-					))}
-				</Space>
+				{eventHandlerProps.map(elementProperty => (
+					<PropertyListItem key={elementProperty.getId()} property={elementProperty} />
+				))}
 			</div>
 		);
 	}

src/model/element/element-content.ts

@@ -82,19 +82,21 @@ export class ElementContent {
 	}
 
 	@Mobx.action
-	public clone(): ElementContent {
+	public clone(opts?: { withState: boolean }): ElementContent {
+		const withState = Boolean(opts && opts.withState);
+
 		const clonedElements = this.elementIds
 			.map(elementId => this.project.getElementById(elementId))
 			.filter((e): e is Element => typeof e !== 'undefined')
-			.map(e => e.clone());
+			.map(e => e.clone({ withState }));
 
 		const clone = new ElementContent(
 			{
 				elementIds: clonedElements.map(e => e.getId()),
-				forcedOpen: false,
-				highlighted: false,
+				forcedOpen: withState ? this.forcedOpen : false,
+				highlighted: withState ? this.highlighted : false,
 				id: uuid.v4(),
-				open: false,
+				open: withState ? this.open : false,
 				slotId: this.slotId
 			},
 			{

src/model/element/element-property/element-property.ts

@@ -51,6 +51,21 @@ export class ElementProperty {
 		);
 	}
 
+	public static fromPatternProperty(
+		patternProperty: AnyPatternProperty,
+		context: ElementPropertyContext
+	): ElementProperty {
+		return new ElementProperty(
+			{
+				id: uuid.v4(),
+				patternPropertyId: patternProperty.getId(),
+				setDefault: patternProperty.getRequired(),
+				value: patternProperty.getDefaultValue()
+			},
+			context
+		);
+	}
+
 	public clone(): ElementProperty {
 		const cloneElementAction = (): string | undefined => {
 			const patternProperty = this.getPatternProperty();

src/model/element/element.ts

@@ -63,7 +63,7 @@ export class Element {
 
 	private readonly project: Project;
 
-	@Mobx.observable private properties: ElementProperty[];
+	@Mobx.observable private properties: Map<string, ElementProperty> = new Map();
 
 	private role: Types.ElementRole;
 
@@ -122,7 +122,7 @@ export class Element {
 			});
 		};
 
-		this.properties = getProperties();
+		getProperties().forEach(prop => this.properties.set(prop.getId(), prop));
 	}
 
 	public static from(serialized: Types.SerializedElement, context: ElementContext): Element {
@@ -171,28 +171,35 @@ export class Element {
 	}
 
 	@Mobx.action
-	public clone(): Element {
+	public addProperty(property: ElementProperty): void {
+		this.properties.set(property.getId(), property);
+	}
+
+	@Mobx.action
+	public clone(opts?: { withState: boolean }): Element {
+		const withState = Boolean(opts && opts.withState);
+
 		const clonedContents = this.contentIds
 			.map(contentId => this.project.getElementContentById(contentId))
 			.filter((content): content is ElementContent => typeof content !== 'undefined')
-			.map(content => content.clone());
+			.map(content => content.clone({ withState }));
 
 		const clone = new Element(
 			{
 				dragged: false,
-				focused: false,
-				highlighted: false,
+				focused: withState ? this.focused : false,
+				highlighted: withState ? this.highlighted : false,
 				id: uuid.v4(),
-				containerId: undefined,
+				containerId: withState ? this.containerId : undefined,
 				contentIds: clonedContents.map(content => content.getId()),
 				name: this.name,
-				open: false,
-				forcedOpen: false,
+				open: withState ? this.open : false,
+				forcedOpen: withState ? this.forcedOpen : false,
 				patternId: this.patternId,
-				placeholderHighlighted: false,
-				properties: this.properties.map(propertyValue => propertyValue.clone()),
+				placeholderHighlighted: withState ? this.placeholderHighlighted : false,
+				properties: this.getProperties().map(propertyValue => propertyValue.clone()),
 				role: this.role,
-				selected: false
+				selected: withState ? this.selected : false
 			},
 			{
 				project: this.project
@@ -388,6 +395,10 @@ export class Element {
 		return this.project.getElementById(containerParentId);
 	}
 
+	public hasPattern(pattern: Pattern): boolean {
+		return this.patternId === pattern.getId();
+	}
+
 	public getPattern(): Pattern | undefined {
 		return this.project.getPatternById(this.patternId);
 	}
@@ -396,8 +407,31 @@ export class Element {
 		return this.placeholderHighlighted;
 	}
 
+	@Mobx.action
 	public getProperties(): ElementProperty[] {
-		return this.properties;
+		const pattern = this.getPattern();
+		const elementProperties = [...this.properties.values()];
+
+		if (pattern) {
+			return pattern.getProperties().map(patternProperty => {
+				const elementProperty = elementProperties.find(
+					e => e.getPatternPropertyId() === patternProperty.getId()
+				);
+
+				if (elementProperty) {
+					return elementProperty;
+				}
+
+				const newElementProperty = ElementProperty.fromPatternProperty(patternProperty, {
+					project: this.project
+				});
+
+				this.addProperty(newElementProperty);
+				return newElementProperty;
+			});
+		}
+
+		return elementProperties;
 	}
 
 	public getRole(): Types.ElementRole {
@@ -556,7 +590,7 @@ export class Element {
 			forcedOpen: this.forcedOpen,
 			patternId: this.patternId,
 			placeholderHighlighted: this.placeholderHighlighted,
-			properties: this.properties.map(elementProperty => elementProperty.toJSON()),
+			properties: this.getProperties().map(elementProperty => elementProperty.toJSON()),
 			role: serializeRole(this.role),
 			selected: this.selected
 		};

src/model/index.ts

@@ -3,7 +3,6 @@ export * from './edit-history';
 export * from './element';
 export * from './element-action';
 export * from './page';
-export * from './pattern-folder';
 export * from './pattern-library';
 export * from './pattern-property';
 export * from './pattern';