senangwebs-aframe-editor 1.6.5

package/src/components/EntityRepresentation.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  faCamera,
+  faCube,
+  faFont,
+  faLightbulb
+} from '@fortawesome/free-solid-svg-icons';
+import { AwesomeIcon } from './AwesomeIcon';
+
+const ICONS = {
+  camera: (
+    <i title="camera">
+      <AwesomeIcon icon={faCamera} />
+    </i>
+  ),
+  mesh: (
+    <i title="mesh">
+      <AwesomeIcon icon={faCube} />
+    </i>
+  ),
+  light: (
+    <i title="light">
+      <AwesomeIcon icon={faLightbulb} />
+    </i>
+  ),
+  text: (
+    <i title="text">
+      <AwesomeIcon icon={faFont} />
+    </i>
+  )
+};
+
+export default class EntityRepresentation extends React.Component {
+  static propTypes = {
+    entity: PropTypes.object,
+    onDoubleClick: PropTypes.func
+  };
+
+  render() {
+    const entity = this.props.entity;
+    const onDoubleClick = this.props.onDoubleClick;
+
+    if (!entity) {
+      return null;
+    }
+
+    // Icons.
+    const icons = [];
+    for (let objType in ICONS) {
+      if (!entity.getObject3D(objType)) {
+        continue;
+      }
+      icons.push(<span key={objType}>&nbsp;{ICONS[objType]}</span>);
+    }
+
+    // Name.
+    let entityName = entity.id;
+    let type = 'id';
+    if (!entity.isScene && !entityName && entity.getAttribute('class')) {
+      entityName = entity.getAttribute('class').split(' ')[0];
+      type = 'class';
+    } else if (!entity.isScene && !entityName && entity.getAttribute('mixin')) {
+      entityName = entity.getAttribute('mixin').split(' ')[0];
+      type = 'mixin';
+    }
+
+    return (
+      <span className="entityPrint" onDoubleClick={onDoubleClick}>
+        <span className="entityTagName">
+          {'<' + entity.tagName.toLowerCase()}
+        </span>
+        {entityName && (
+          <span className="entityName" data-entity-name-type={type}>
+            &nbsp;{entityName}
+          </span>
+        )}
+        {icons.length > 0 && <span className="entityIcons">{icons}</span>}
+        <span className="entityCloseTag">{'>'}</span>
+      </span>
+    );
+  }
+}

package/src/components/Main.js

@@ -0,0 +1,222 @@
+import React from 'react';
+import {
+  faPlus,
+  faCog,
+  faCode,
+  faBars,
+  faTimes,
+  faEye,
+  faCube,
+  faCubes,
+  faFileUpload,
+  faFolderOpen,
+  faVrCardboard
+} from '@fortawesome/free-solid-svg-icons';
+import { AwesomeIcon } from './AwesomeIcon';
+import Events from '../lib/Events';
+import ComponentsSidebar from './components/Sidebar';
+import ModalTextures from './modals/ModalTextures';
+import ModalHelp from './modals/ModalHelp';
+import SceneGraph from './scenegraph/SceneGraph';
+import CameraToolbar from './viewport/CameraToolbar';
+import TransformToolbar from './viewport/TransformToolbar';
+import ViewportHUD from './viewport/ViewportHUD';
+
+THREE.ImageUtils.crossOrigin = '';
+
+export default class Main extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      entity: null,
+      inspectorEnabled: true,
+      isModalTexturesOpen: false,
+      sceneEl: AFRAME.scenes[0],
+      visible: {
+        scenegraph: true,
+        attributes: false // Set this to false
+      }
+    };
+
+    Events.on('togglesidebar', (event) => {
+      if (event.which === 'all') {
+        if (this.state.visible.scenegraph || this.state.visible.attributes) {
+          this.setState({
+            visible: {
+              scenegraph: false,
+              attributes: false
+            }
+          });
+        } else {
+          this.setState({
+            visible: {
+              scenegraph: true,
+              attributes: true
+            }
+          });
+        }
+      } else if (event.which === 'attributes') {
+        this.setState((prevState) => ({
+          visible: {
+            ...prevState.visible,
+            attributes: !prevState.visible.attributes
+          }
+        }));
+      } else if (event.which === 'scenegraph') {
+        this.setState((prevState) => ({
+          visible: {
+            ...prevState.visible,
+            scenegraph: !prevState.visible.scenegraph
+          }
+        }));
+      }
+    });
+  }
+
+  componentDidMount() {
+    Events.on(
+      'opentexturesmodal',
+      function (selectedTexture, textureOnClose) {
+        this.setState({
+          selectedTexture: selectedTexture,
+          isModalTexturesOpen: true,
+          textureOnClose: textureOnClose
+        });
+      }.bind(this)
+    );
+
+    Events.on('entityselect', (entity) => {
+      // Set the selected entity and ensure the attributes sidebar is visible
+      this.setState({
+        entity: entity,
+        visible: { ...this.state.visible, attributes: true }
+      });
+    });
+
+    Events.on('inspectortoggle', (enabled) => {
+      this.setState({ inspectorEnabled: enabled });
+    });
+
+    Events.on('openhelpmodal', () => {
+      this.setState({ isHelpOpen: true });
+    });
+  }
+
+  handleClose = () => {
+    Events.emit('togglesidebar', { which: 'attributes' });
+  };
+
+  onCloseHelpModal = (value) => {
+    this.setState({ isHelpOpen: false });
+  };
+
+  onModalTextureOnClose = (value) => {
+    this.setState({ isModalTexturesOpen: false });
+    if (this.state.textureOnClose) {
+      this.state.textureOnClose(value);
+    }
+  };
+
+  toggleEdit = () => {
+    if (this.state.inspectorEnabled) {
+      AFRAME.INSPECTOR.close();
+    } else {
+      AFRAME.INSPECTOR.open();
+    }
+  };
+
+  renderSceneGraphToggle() {
+    if (!this.state.inspectorEnabled || this.state.visible.scenegraph) {
+      return null;
+    }
+    return (
+      <div className="toggle-sidebar left">
+        <a
+          onClick={() => {
+            Events.emit('togglesidebar', { which: 'scenegraph' });
+          }}
+          title="Show scenegraph"
+        >
+          <AwesomeIcon icon={faPlus} />
+        </a>
+      </div>
+    );
+  }
+
+  render() {
+    const scene = this.state.sceneEl;
+    // Simplified toggle button text logic
+    const buttonText = this.state.inspectorEnabled ? 'Show' : 'Edit';
+
+    return (
+      <div>
+        <a
+          id="previewSceneBtn"
+          className="toggle-edit"
+          onClick={this.toggleEdit}
+        >
+          <AwesomeIcon icon={faVrCardboard} />
+        </a>
+
+        {this.renderSceneGraphToggle()}
+
+        <div
+          id="inspectorContainer"
+          className={this.state.inspectorEnabled ? '' : 'hidden'}
+        >
+          <div id="leftPanel">
+            <div className="scenegraph-menubar">
+              <div id="scenegraph-menu-back"></div>
+              <div id="scenegraph-panel-action"></div>
+            </div>
+            <SceneGraph
+              scene={scene}
+              selectedEntity={this.state.entity}
+              visible={this.state.visible.scenegraph}
+            />
+          </div>
+
+          <div id="viewportBar">
+            <CameraToolbar />
+            <TransformToolbar />
+            <div className="viewportHud-menubar">
+              <ViewportHUD />
+            </div>
+          </div>
+
+          <div
+            id="rightPanel"
+            className={this.state.visible.attributes ? '' : 'hidden'}
+          >
+            <div className="componentHeader title">
+              {/* <a>
+                <AwesomeIcon icon={faBars} />
+              </a> */}
+              <div id="entity-panel-action"></div>
+              <a onClick={this.handleClose}>
+                <AwesomeIcon icon={faTimes} />
+              </a>
+            </div>
+            <ComponentsSidebar
+              entity={this.state.entity}
+              visible={this.state.visible.attributes} // This prop might become redundant depending on CSS, but leave for now
+            />
+          </div>
+
+          <div id="actionBar"></div>
+        </div>
+
+        <ModalHelp
+          isOpen={this.state.isHelpOpen}
+          onClose={this.onCloseHelpModal}
+        />
+        <ModalTextures
+          isOpen={this.state.isModalTexturesOpen}
+          selectedTexture={this.state.selectedTexture}
+          onClose={this.onModalTextureOnClose}
+        />
+      </div>
+    );
+  }
+}

package/src/components/__tests__/Collapsible.test.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import Collapsible from '../Collapsible.js';
+
+describe('Collapsible', () => {
+  it('does not set class when not collapsed', () => {
+    const tree = renderer
+      .create(
+        <Collapsible collapsed={false}>
+          <div />
+          <div />
+        </Collapsible>
+      )
+      .toJSON();
+    expect(tree.children[1].props.className).not.toContain('hide');
+  });
+
+  it('sets class when collapsed', () => {
+    const tree = renderer
+      .create(
+        <Collapsible collapsed={true}>
+          <div />
+          <div />
+        </Collapsible>
+      )
+      .toJSON();
+    expect(tree.children[1].props.className).toContain('hide');
+  });
+});

package/src/components/components/AddComponent.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Events from '../../lib/Events';
+import Select from 'react-select';
+
+export default class AddComponent extends React.Component {
+  static propTypes = {
+    entity: PropTypes.object
+  };
+
+  /**
+   * Add blank component.
+   * If component is instanced, generate an ID.
+   */
+  addComponent = (value) => {
+    let componentName = value.value;
+
+    var entity = this.props.entity;
+
+    if (AFRAME.components[componentName].multiple) {
+      const id = prompt(
+        `Provide an ID for this component (e.g., 'foo' for ${componentName}__foo).`
+      );
+      componentName = id ? `${componentName}__${id}` : componentName;
+    }
+
+    entity.setAttribute(componentName, '');
+    Events.emit('componentadd', { entity: entity, component: componentName });
+  };
+
+  /**
+   * Component dropdown options.
+   */
+  getComponentsOptions() {
+    const usedComponents = Object.keys(this.props.entity.components);
+    var commonOptions = Object.keys(AFRAME.components)
+      .filter(function (componentName) {
+        return (
+          AFRAME.components[componentName].multiple ||
+          usedComponents.indexOf(componentName) === -1
+        );
+      })
+      .sort()
+      .map(function (value) {
+        return { value: value, label: value, origin: 'loaded' };
+      });
+
+    this.options = commonOptions;
+    this.options = this.options.sort(function (a, b) {
+      return a.label === b.label ? 0 : a.label < b.label ? -1 : 1;
+    });
+  }
+
+  renderOption(option) {
+    var bullet = (
+      <span title="Component already loaded in the scene">&#9679;</span>
+    );
+    return (
+      <strong className="option">
+        {option.label} {option.origin === 'loaded' ? bullet : ''}
+      </strong>
+    );
+  }
+
+  render() {
+    const entity = this.props.entity;
+    if (!entity) {
+      return <div />;
+    }
+
+    this.getComponentsOptions();
+
+    return (
+      <div id="addComponentContainer">
+        <p id="addComponentHeader">COMPONENTS</p>
+        <Select
+          id="addComponent"
+          className="addComponent"
+          classNamePrefix="select"
+          options={this.options}
+          simpleValue
+          clearable={true}
+          placeholder="Add component..."
+          noResultsText="No components found"
+          onChange={this.addComponent}
+          optionRenderer={this.renderOption}
+          searchable={true}
+        />
+      </div>
+    );
+  }
+}
+
+/* eslint-disable no-unused-vars */
+/**
+ * Check if component has multiplicity.
+ */
+function isComponentInstanced(entity, componentName) {
+  for (var component in entity.components) {
+    if (component.substring(0, component.indexOf('__')) === componentName) {
+      return true;
+    }
+  }
+}

package/src/components/components/CommonComponents.js

@@ -0,0 +1,160 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { faClipboard } from '@fortawesome/free-solid-svg-icons';
+import { faTimes, faBars } from '@fortawesome/free-solid-svg-icons';
+import { AwesomeIcon } from '../AwesomeIcon';
+import { InputWidget } from '../widgets';
+import DEFAULT_COMPONENTS from './DefaultComponents';
+import PropertyRow from './PropertyRow';
+import Collapsible from '../Collapsible';
+import Mixins from './Mixins';
+import {
+  updateEntity,
+  getEntityClipboardRepresentation
+} from '../../lib/entity';
+import EntityRepresentation from '../EntityRepresentation';
+import Events from '../../lib/Events';
+import copy from 'clipboard-copy';
+import { saveBlob } from '../../lib/utils';
+import GLTFIcon from '../../../assets/gltf.svg';
+
+// @todo Take this out and use updateEntity?
+function changeId(componentName, value) {
+  var entity = AFRAME.INSPECTOR.selectedEntity;
+  if (entity.id !== value) {
+    entity.id = value;
+    Events.emit('entityidchange', entity);
+  }
+}
+
+export default class CommonComponents extends React.Component {
+  static propTypes = {
+    entity: PropTypes.object
+  };
+
+  componentDidMount() {
+    Events.on('entityupdate', (detail) => {
+      if (detail.entity !== this.props.entity) {
+        return;
+      }
+      if (
+        DEFAULT_COMPONENTS.indexOf(detail.component) !== -1 ||
+        detail.component === 'mixin'
+      ) {
+        this.forceUpdate();
+      }
+    });
+  }
+
+  renderCommonAttributes() {
+    const entity = this.props.entity;
+    return ['position', 'rotation', 'scale', 'visible'].map((componentName) => {
+      const schema = AFRAME.components[componentName].schema;
+      var data = entity.object3D[componentName];
+      if (componentName === 'rotation') {
+        data = {
+          x: THREE.MathUtils.radToDeg(entity.object3D.rotation.x),
+          y: THREE.MathUtils.radToDeg(entity.object3D.rotation.y),
+          z: THREE.MathUtils.radToDeg(entity.object3D.rotation.z)
+        };
+      }
+      return (
+        <PropertyRow
+          onChange={updateEntity}
+          key={componentName}
+          name={componentName}
+          showHelp={true}
+          schema={schema}
+          data={data}
+          isSingle={true}
+          componentname={componentName}
+          entity={entity}
+        />
+      );
+    });
+  }
+
+  exportToGLTF() {
+    const entity = this.props.entity;
+    AFRAME.INSPECTOR.exporters.gltf.parse(
+      entity.object3D,
+      function (buffer) {
+        const blob = new Blob([buffer], { type: 'application/octet-stream' });
+        saveBlob(blob, (entity.id || 'entity') + '.glb');
+      },
+      function (error) {
+        console.error(error);
+      },
+      { binary: true }
+    );
+  }
+
+  render() {
+    const entity = this.props.entity;
+    if (!entity) {
+      return <div />;
+    }
+    const entityButtons = (
+      <div>
+        <a
+          title="Close components"
+          onClick={(event) => {
+            this.handleClose();
+          }}
+        >
+          <AwesomeIcon icon={faTimes} />
+        </a>
+        {/* <a
+          title="Export entity to GLTF"
+          className="gltfIcon"
+          onClick={(event) => {
+            this.exportToGLTF();
+            event.preventDefault();
+            event.stopPropagation();
+          }}
+        >
+          <img src={GLTFIcon} />
+        </a>
+        <a
+          title="Copy entity HTML to clipboard"
+          className="button"
+          onClick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            copy(getEntityClipboardRepresentation(this.props.entity));
+          }}
+        >
+          <AwesomeIcon icon={faClipboard} />
+        </a> */}
+      </div>
+    );
+
+    return (
+      <Collapsible id="componentEntityHeader" className="commonComponents">
+        <div className="collapsible-header sidebar-header">
+          <EntityRepresentation entity={entity} />
+          {/* {entityButtons} */}
+        </div>
+        <div className="collapsible-content">
+          <div className="propertyRow">
+            <label htmlFor="id" className="text">
+              ID
+            </label>
+            <InputWidget
+              onChange={changeId}
+              entity={entity}
+              name="id"
+              value={entity.id}
+            />
+          </div>
+          <div className="propertyRow">
+            <label className="text">class</label>
+            <span>{entity.getAttribute('class')}</span>
+          </div>
+          {this.renderCommonAttributes()}
+          <Mixins entity={entity} />
+        </div>
+      </Collapsible>
+    );
+  }
+}