feat: reenable select/create of store props

src/container/property-list/event-handler-property-view.tsx

@@ -28,21 +28,34 @@ export class EventHandlerPropertyView extends React.Component<EventHandlerProper
 			return;
 		}
 
-		const elementAction = new Model.ElementAction(
-			{
-				id: uuid.v4(),
-				payload: '',
-				storeActionId: selectedAction.getId(),
-				storePropertyId: selectedAction.getUserStorePropertyId() || ''
-			},
-			{
-				userStore: project.getUserStore()
-			}
-		);
+		const existingElementAction = project
+			.getElementActions()
+			.find(
+				action =>
+					action.getElementPropertyId() === props.elementProperty.getId() &&
+					selectedAction.getId() === action.getStoreActionId()
+			);
+
+		const elementAction =
+			existingElementAction ||
+			new Model.ElementAction(
+				{
+					elementPropertyId: props.elementProperty.getId(),
+					id: uuid.v4(),
+					payload: '',
+					storeActionId: selectedAction.getId(),
+					storePropertyId: selectedAction.getUserStorePropertyId() || ''
+				},
+				{
+					userStore: project.getUserStore()
+				}
+			);
 
 		project.addElementAction(elementAction);
 		props.elementProperty.setValue(elementAction.getId());
 
+		console.log({ elementActionId: elementAction.getId() });
+
 		const storePropertyId = elementAction.getStorePropertyId();
 		const storeProperty = storePropertyId
 			? userStore.getPropertyById(storePropertyId)
@@ -77,6 +90,43 @@ export class EventHandlerPropertyView extends React.Component<EventHandlerProper
 					elementAction.setStorePropertyId(storeProperty.getId());
 					props.store.commit();
 				}
+
+				elementAction.setPayload('');
+				break;
+			}
+			case 'create-option': {
+				const newProperty = new Model.UserStoreProperty({
+					id: uuid.v4(),
+					name: item.value,
+					type: Types.UserStorePropertyType.String,
+					payload: ''
+				});
+
+				userStore.addProperty(newProperty);
+				elementAction.setStorePropertyId(newProperty.getId());
+				elementAction.setPayload('');
+				props.store.commit();
+			}
+		}
+
+		/* const props = this.props as EventHandlerPropertyViewProps & StoreInjection;
+		const project = props.store.getProject();
+		const userStore = project.getUserStore();
+		const elementAction = project.getElementActionById(String(props.elementProperty.getValue()));
+
+		if (!elementAction) {
+			return;
+		}
+
+		switch (action.action) {
+			case 'select-option': {
+				const storeProperty = userStore.getPropertyById(item.value);
+
+				if (storeProperty) {
+					elementAction.setStorePropertyId(storeProperty.getId());
+					props.store.commit();
+				}
+
 				break;
 			}
 			case 'create-option': {
@@ -101,7 +151,7 @@ export class EventHandlerPropertyView extends React.Component<EventHandlerProper
 					props.store.commit();
 				}
 			}
-		}
+		} */
 	}
 
 	public render(): JSX.Element | null {
@@ -177,7 +227,7 @@ export class EventHandlerPropertyView extends React.Component<EventHandlerProper
 					{elementAction &&
 						userAction &&
 						userAction.getAcceptsProperty() && (
-							<div style={{ width: '100%', marginBottom: '6px' }}>
+							<div style={{ width: '100%', marginTop: '6px', marginBottom: '6px' }}>
 								<Component.CreateSelect
 									options={project
 										.getUserStore()
@@ -196,7 +246,8 @@ export class EventHandlerPropertyView extends React.Component<EventHandlerProper
 								/>
 							</div>
 						)}
-					{userProperty &&
+					{elementAction &&
+						userProperty &&
 						(() => {
 							switch (userProperty.getType()) {
 								case Types.UserStorePropertyType.String:
@@ -212,11 +263,9 @@ export class EventHandlerPropertyView extends React.Component<EventHandlerProper
 											<Component.PropertyLabel label="to" />
 											<Component.PropertyInput
 												type={Component.PropertyInputType.Text}
-												value={userProperty.getPayload()}
+												value={elementAction.getPayload()}
 												onBlur={() => props.store.commit()}
-												onChange={e => {
-													userProperty.setPayload(e.target.value);
-												}}
+												onChange={e => elementAction.setPayload(e.target.value)}
 											/>
 										</div>
 									);

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

@@ -70,7 +70,6 @@ export class PropertyListItem extends React.Component<PropertyListItemProps> {
 
 		// TODO: Split ElementProperty into type-specific classes for better type safety
 		// TODO: Implement inputs for
-		// - Number
 		// - NumberArray
 		// - Object
 		// - StringArray

src/model/element-action.ts

@@ -10,20 +10,23 @@ export interface Sender {
 }
 
 export interface ElementActionInit {
+	elementPropertyId: string;
 	id: string;
 	payload: string;
 	storeActionId: string;
 	storePropertyId: string;
 }
 
 export class ElementAction {
+	private elementPropertyId: string;
 	private id: string;
 	private userStore: UserStore;
 	@Mobx.observable private payload: string;
 	@Mobx.observable private storeActionId: string;
 	@Mobx.observable private storePropertyId: string;
 
 	public constructor(init: ElementActionInit, ctx: { userStore: UserStore }) {
+		this.elementPropertyId = init.elementPropertyId;
 		this.id = init.id;
 		this.payload = init.payload;
 		this.storeActionId = init.storeActionId;
@@ -37,6 +40,7 @@ export class ElementAction {
 	): ElementAction {
 		return new ElementAction(
 			{
+				elementPropertyId: serialized.elementPropertyId,
 				id: serialized.id,
 				payload: serialized.payload || '',
 				storeActionId: serialized.storeActionId,
@@ -49,6 +53,7 @@ export class ElementAction {
 	public clone(): ElementAction {
 		return new ElementAction(
 			{
+				elementPropertyId: this.elementPropertyId,
 				id: uuid.v4(),
 				payload: this.payload,
 				storeActionId: this.storeActionId,
@@ -75,6 +80,7 @@ export class ElementAction {
 			case Types.UserStoreActionType.Set: {
 				const storeProperty = this.userStore.getPropertyById(this.storePropertyId);
 				if (storeProperty) {
+					console.log(this.payload);
 					storeProperty.setPayload(this.payload);
 				}
 				break;
@@ -97,6 +103,10 @@ export class ElementAction {
 		return this.id;
 	}
 
+	public getElementPropertyId(): string {
+		return this.elementPropertyId;
+	}
+
 	public getPayload(): string {
 		return this.payload;
 	}
@@ -121,6 +131,7 @@ export class ElementAction {
 
 	public toJSON(): Types.SerializedElementAction {
 		return {
+			elementPropertyId: this.elementPropertyId,
 			id: this.id,
 			payload: this.payload,
 			storeActionId: this.storeActionId,

src/model/project.ts

@@ -9,8 +9,6 @@ import { PatternLibrary } from './pattern-library';
 import { AnyPatternProperty } from './pattern-property';
 import * as Types from '../types';
 import { UserStore } from './user-store';
-import { UserStoreAction } from './user-store-action';
-import { UserStoreProperty } from './user-store-property';
 import * as uuid from 'uuid';
 
 export interface ProjectProperties {
@@ -128,49 +126,7 @@ export class Project {
 			state: Types.PatternLibraryState.Connected
 		});
 
-		const currentPageProperty = new UserStoreProperty({
-			id: uuid.v4(),
-			name: 'Current Page',
-			payload: '',
-			type: Types.UserStorePropertyType.Page
-		});
-
-		const noopAction = new UserStoreAction({
-			acceptsProperty: false,
-			id: uuid.v4(),
-			name: 'No Interaction',
-			type: Types.UserStoreActionType.Noop
-		});
-
-		const navigatePageAction = new UserStoreAction({
-			acceptsProperty: false,
-			id: uuid.v4(),
-			name: 'Switch Page',
-			userStorePropertyId: currentPageProperty.getId(),
-			type: Types.UserStoreActionType.Set
-		});
-
-		const openLinkAction = new UserStoreAction({
-			acceptsProperty: false,
-			id: uuid.v4(),
-			name: 'Navigate',
-			userStorePropertyId: undefined,
-			type: Types.UserStoreActionType.OpenExternal
-		});
-
-		// TODO: Reenable when implementing full variable support
-		/* const setPropertyAction = new UserStoreAction({
-			acceptsProperty: true,
-			id: uuid.v4(),
-			name: 'Set Variable',
-			type: Types.UserStoreActionType.Set
-		}); */
-
-		const userStore = new UserStore({
-			id: uuid.v4(),
-			properties: [currentPageProperty],
-			actions: [noopAction, navigatePageAction, openLinkAction /*, setPropertyAction*/]
-		});
+		const userStore = new UserStore({ id: uuid.v4() });
 
 		const project = new Project({
 			name: init.name,
@@ -191,8 +147,7 @@ export class Project {
 			)
 		);
 
-		currentPageProperty.setProject(project);
-
+		userStore.getPageProperty().setProject(project);
 		return project;
 	}
 

src/model/user-store.ts

@@ -3,13 +3,15 @@ import * as Mobx from 'mobx';
 import * as Message from '../message';
 import { Project } from './project';
 import * as Types from '../types';
+import * as uuid from 'uuid';
 import { UserStoreAction } from './user-store-action';
 import { UserStoreProperty } from './user-store-property';
 
 export interface UserStoreInit {
-	actions: UserStoreAction[];
 	id: string;
-	properties: UserStoreProperty[];
+	properties?: UserStoreProperty[];
+	actions?: UserStoreAction[];
+	currentPageProperty?: UserStoreProperty;
 }
 
 export interface UserStoreContext {
@@ -18,18 +20,70 @@ export interface UserStoreContext {
 
 export class UserStore {
 	private id: string;
-	@Mobx.observable private actions: Map<string, UserStoreAction> = new Map();
+	private actions: Map<string, UserStoreAction> = new Map();
+	private currentPageProperty: UserStoreProperty;
 	@Mobx.observable private properties: Map<string, UserStoreProperty> = new Map();
 
 	public constructor(init: UserStoreInit) {
 		this.id = init.id;
-		init.properties.forEach(prop => this.addProperty(prop));
-		init.actions.forEach(action => this.addAction(action));
+
+		if (init.currentPageProperty) {
+			this.currentPageProperty = init.currentPageProperty;
+		} else {
+			this.currentPageProperty = new UserStoreProperty({
+				id: uuid.v4(),
+				name: 'Current Page',
+				payload: '',
+				type: Types.UserStorePropertyType.Page
+			});
+		}
+
+		(init.properties || []).forEach(prop => this.addProperty(prop));
+
+		const actions = init.actions || [];
+
+		[
+			new UserStoreAction({
+				acceptsProperty: false,
+				id: uuid.v4(),
+				name: 'No Interaction',
+				type: Types.UserStoreActionType.Noop
+			}),
+			new UserStoreAction({
+				acceptsProperty: false,
+				id: uuid.v4(),
+				name: 'Switch Page',
+				userStorePropertyId: this.currentPageProperty.getId(),
+				type: Types.UserStoreActionType.Set
+			}),
+			new UserStoreAction({
+				acceptsProperty: false,
+				id: uuid.v4(),
+				name: 'Navigate',
+				userStorePropertyId: undefined,
+				type: Types.UserStoreActionType.OpenExternal
+			}),
+			new UserStoreAction({
+				acceptsProperty: true,
+				id: uuid.v4(),
+				name: 'Set Variable',
+				type: Types.UserStoreActionType.Set
+			})
+		]
+			.filter(
+				b => !actions.some(i => b.getType() === i.getType() && b.getName() === i.getName())
+			)
+			.forEach(b => actions.push(b));
+
+		actions.forEach(action => this.addAction(action));
 	}
 
 	public static from(serialized: Types.SerializedUserStore): UserStore {
 		return new UserStore({
 			actions: serialized.actions.map(a => UserStoreAction.from(a)),
+			currentPageProperty: serialized.currentPageProperty
+				? UserStoreProperty.from(serialized.currentPageProperty)
+				: undefined,
 			id: serialized.id,
 			properties: serialized.properties.map(p => UserStoreProperty.from(p))
 		});
@@ -60,9 +114,7 @@ export class UserStore {
 	}
 
 	public getPageProperty(): UserStoreProperty {
-		return this.getProperties().find(
-			p => p.getType() === Types.UserStorePropertyType.Page
-		) as UserStoreProperty;
+		return this.currentPageProperty;
 	}
 
 	public getProperties(): UserStoreProperty[] {
@@ -109,6 +161,7 @@ export class UserStore {
 	public toJSON(): Types.SerializedUserStore {
 		return {
 			actions: this.getActions().map(a => a.toJSON()),
+			currentPageProperty: this.currentPageProperty.toJSON(),
 			id: this.id,
 			properties: this.getProperties().map(p => p.toJSON())
 		};

src/types/types.ts

@@ -340,6 +340,7 @@ export type ElementPropertyValue =
 	| string[];
 
 export interface SerializedElementAction {
+	elementPropertyId: string;
 	id: string;
 	payload: string;
 	storeActionId: string;