feat(components): component selecting

Author: patrickocoffeyo

src/actions/component.js

@@ -0,0 +1,27 @@
+/**
+ * @file component.js
+ * Exports actions related to components.
+ */
+
+import { put, takeLatest } from 'redux-saga/effects';
+
+import { COMPONENT_SELECT } from '../constants';
+
+/**
+ * Sets the currently selected component.
+ *
+ * @param {object} payload - Payload for this saga action.
+ * @param {string} payload.id - ID of the component that should be selected.
+ */
+export function* componentSelect({ id }) {
+  yield put({
+    type: `${COMPONENT_SELECT}_SUCCESS`,
+    payload: {
+      id
+    }
+  });
+}
+
+export function* watchComponentActions() {
+  yield takeLatest(COMPONENT_SELECT, componentSelect);
+}

src/actions/index.js

@@ -8,11 +8,13 @@ import { all } from 'redux-saga/effects';
 import { watchUserActions } from './user';
 import { watchExperiencesActions } from './experiences';
 import { watchOpenExperienceActions } from './openExperience';
+import { watchComponentActions } from './component';
 
 export default function* rootSaga() {
   yield all([
     watchUserActions(),
     watchExperiencesActions(),
-    watchOpenExperienceActions()
+    watchOpenExperienceActions(),
+    watchComponentActions()
   ]);
 }

src/aframe/components/isEditable.js

@@ -0,0 +1,48 @@
+/**
+ * @file isExitable.js
+ * AFrame component that allows for components to be selected for editing.
+ */
+
+/* globals AFRAME */
+
+import { COMPONENT_SELECT, MODE_COMPONENT_SELECTING } from '../../constants';
+import connectRedux from '../utils/connectRedux';
+import connectRouter from '../utils/connectRouter';
+
+const isEditable = {
+  multiple: true,
+  clickHandler() {
+    const id = this.el.getAttribute('id');
+    const { dispatch } = this.props;
+    const {
+      match: {
+        params: { editorMode }
+      }
+    } = this.router;
+
+    if (id && editorMode === MODE_COMPONENT_SELECTING) {
+      dispatch({
+        type: COMPONENT_SELECT,
+        id
+      });
+    }
+  },
+  init() {
+    this.el.addEventListener('click', this.clickHandler.bind(this));
+  },
+  remove() {
+    this.el.removeEventListener('click', this.clickHandler.bind(this));
+  }
+};
+
+AFRAME.registerComponent(
+  'is-editable',
+  connectRedux(state => ({
+    experience: state.openExperience.item
+  }))(
+    connectRouter(
+      isEditable,
+      '/experience/vreditor/:experienceSlug/:sceneSlug/:editorMode?'
+    )
+  )
+);

src/aframe/components/spawnDialogs.js

@@ -65,6 +65,7 @@ const spawnDialogs = {
           const e = document.createElement('a-entity');
           e.setAttribute('id', component.id);
           e.setAttribute('look-at', '#camera');
+          e.setAttribute('is-editable', true);
           e.setAttribute('position', { x, y, z });
           e.setAttribute('dialog-popup', {
             title,

src/aframe/entities/scene.js

@@ -14,6 +14,7 @@ require('../components/spawnSky');
 require('../components/spawnLinks');
 require('../components/spawnDialogs');
 require('../components/navLink');
+require('../components/isEditable');
 
 export default () => (
   <a-scene

src/components/ComponentForm/ComponentForm.container.js

@@ -0,0 +1,19 @@
+/**
+ * @file ComponentForm.container.js
+ * Exports a redux-connected ComponentForm component.
+ */
+
+import { connect } from 'react-redux';
+
+import ComponentForm from './ComponentForm';
+
+const mapDispatchToProps = dispatch => ({
+  dispatch
+});
+
+const mapState = ({ user, openExperience }) => ({
+  user,
+  experience: openExperience
+});
+
+export default connect(mapState, mapDispatchToProps)(ComponentForm);

src/components/ComponentForm/ComponentForm.js

@@ -0,0 +1,24 @@
+/**
+ * @file ComponentForm.js
+ * Exports a component that allows users to operate on scene components.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withFormik } from 'formik';
+import { withStyles } from '@material-ui/core';
+
+import ComponentFormStyles from './ComponentForm.style';
+
+const ComponentForm = ({ id }) => <form>{id}</form>;
+
+ComponentForm.propTypes = {
+  id: PropTypes.string.isRequired
+};
+
+const FormikComponentForm = withFormik({
+  displayName: 'ComponentForm',
+  enableReinitialize: true
+})(ComponentForm);
+
+export default withStyles(ComponentFormStyles)(FormikComponentForm);

src/components/ComponentForm/ComponentForm.style.js

@@ -0,0 +1,6 @@
+/**
+ * @file ComponentForm.style.js
+ * Exports ComponentForm component styles.
+ */
+
+export default () => ({});

src/components/index.js

@@ -7,6 +7,7 @@ import App from './App/App';
 import LoginForm from './LoginForm/LoginForm.container';
 import ExperienceForm from './ExperienceForm/ExperienceForm.container';
 import SceneForm from './SceneForm/SceneForm.container';
+import ComponentForm from './ComponentForm/ComponentForm.container';
 import Loading from './Loading/Loading';
 import Message from './Message/Message';
 import SceneCards from './SceneCards/SceneCards.container';
@@ -20,5 +21,6 @@ export {
   Message,
   SceneCards,
   ToolsMenu,
-  SceneForm
+  SceneForm,
+  ComponentForm
 };

src/constants/component.js

@@ -0,0 +1,6 @@
+/**
+ * @file component.js
+ * Exports component-related constants.
+ */
+
+export const COMPONENT_SELECT = 'COMPONENT_SELECT';