senangwebs-aframe-editor 1.6.5

package/src/components/scenegraph/SceneGraph.js

@@ -0,0 +1,337 @@
+/* eslint-disable no-unused-vars, react/no-danger */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { faSearch, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { AwesomeIcon } from '../AwesomeIcon';
+import debounce from 'lodash.debounce';
+
+import Entity from './Entity';
+import Toolbar from './Toolbar';
+import Events from '../../lib/Events';
+import CameraToolbar from '../viewport/CameraToolbar';
+
+export default class SceneGraph extends React.Component {
+  static propTypes = {
+    id: PropTypes.string,
+    onChange: PropTypes.func,
+    scene: PropTypes.object,
+    selectedEntity: PropTypes.object,
+    visible: PropTypes.bool
+  };
+
+  static defaultProps = {
+    selectedEntity: '',
+    index: -1,
+    id: 'left-sidebar'
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      entities: [],
+      expandedElements: new WeakMap([[props.scene, true]]),
+      filter: '',
+      filteredEntities: [],
+      selectedIndex: -1
+    };
+
+    this.rebuildEntityOptions = debounce(
+      this.rebuildEntityOptions.bind(this),
+      1000
+    );
+    this.updateFilteredEntities = debounce(
+      this.updateFilteredEntities.bind(this),
+      500
+    );
+  }
+
+  componentDidMount() {
+    this.rebuildEntityOptions();
+    Events.on('entityidchange', this.rebuildEntityOptions);
+    Events.on('entitycreated', this.rebuildEntityOptions);
+    Events.on('entityclone', this.rebuildEntityOptions);
+    Events.on('entityupdate', (detail) => {
+      if (detail.component === 'mixin') {
+        this.rebuildEntityOptions();
+      }
+    });
+  }
+
+  /**
+   * Selected entity updated from somewhere else in the app.
+   */
+  componentDidUpdate(prevProps) {
+    if (prevProps.selectedEntity !== this.props.selectedEntity) {
+      this.selectEntity(this.props.selectedEntity);
+    }
+  }
+
+  selectEntity = (entity) => {
+    let found = false;
+    for (let i = 0; i < this.state.filteredEntities.length; i++) {
+      const entityOption = this.state.filteredEntities[i];
+      if (entityOption.entity === entity) {
+        this.setState({ selectedEntity: entity, selectedIndex: i });
+        // Make sure selected value is visible in scenegraph
+        this.expandToRoot(entity);
+        if (this.props.onChange) {
+          this.props.onChange(entity);
+        }
+        Events.emit('entityselect', entity, true);
+        found = true;
+      }
+    }
+
+    if (!found) {
+      this.setState({ selectedEntity: null, selectedIndex: -1 });
+    }
+  };
+
+  rebuildEntityOptions = () => {
+    const entities = [{ depth: 0, entity: this.props.scene }];
+
+    function treeIterate(element, depth) {
+      if (!element) {
+        return;
+      }
+      depth += 1;
+
+      for (let i = 0; i < element.children.length; i++) {
+        let entity = element.children[i];
+
+        if (
+          entity.dataset.isInspector ||
+          !entity.isEntity ||
+          entity.isInspector ||
+          'aframeInspector' in entity.dataset
+        ) {
+          continue;
+        }
+
+        entities.push({ entity: entity, depth: depth });
+
+        treeIterate(entity, depth);
+      }
+    }
+    treeIterate(this.props.scene, 0);
+
+    this.setState({
+      entities: entities,
+      filteredEntities: this.getFilteredEntities(this.state.filter, entities)
+    });
+  };
+
+  selectIndex = (index) => {
+    if (index >= 0 && index < this.state.entities.length) {
+      this.selectEntity(this.state.entities[index].entity);
+    }
+  };
+
+  onFilterKeyUp = (event) => {
+    if (event.key === 'Escape') { // Use event.key for consistency
+      this.clearFilter();
+    }
+  };
+
+  onKeyDown = (event) => {
+    switch (event.key) {
+      case 'ArrowLeft':
+      case 'ArrowUp':
+      case 'ArrowRight':
+      case 'ArrowDown':
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+    }
+  };
+
+  onKeyUp = (event) => {
+    if (this.props.selectedEntity === null) {
+      return;
+    }
+
+    switch (event.key) {
+      case 'ArrowLeft':
+        if (this.isExpanded(this.props.selectedEntity)) {
+          this.toggleExpandedCollapsed(this.props.selectedEntity);
+        }
+        break;
+      case 'ArrowUp':
+        this.selectIndex(
+          this.previousExpandedIndexTo(this.state.selectedIndex)
+        );
+        break;
+      case 'ArrowRight':
+        if (!this.isExpanded(this.props.selectedEntity)) {
+          this.toggleExpandedCollapsed(this.props.selectedEntity);
+        }
+        break;
+      case 'ArrowDown':
+        this.selectIndex(this.nextExpandedIndexTo(this.state.selectedIndex));
+        break;
+    }
+  };
+
+  getFilteredEntities(filter, entities) {
+    entities = entities || this.state.entities;
+    if (!filter) {
+      return entities;
+    }
+    return entities.filter((entityOption) => {
+      return filterEntity(entityOption.entity, filter || this.state.filter);
+    });
+  }
+
+  isVisibleInSceneGraph = (x) => {
+    let curr = x.parentNode;
+    if (!curr) {
+      return false;
+    }
+    while (curr !== undefined && curr.isEntity) {
+      if (!this.isExpanded(curr)) {
+        return false;
+      }
+      curr = curr.parentNode;
+    }
+    return true;
+  };
+
+  isExpanded = (x) => this.state.expandedElements.get(x) === true;
+
+  toggleExpandedCollapsed = (x) => {
+    this.setState({
+      expandedElements: this.state.expandedElements.set(x, !this.isExpanded(x))
+    });
+  };
+
+  expandToRoot = (x) => {
+    // Expand element all the way to the scene element
+    let curr = x.parentNode;
+    while (curr !== undefined && curr.isEntity) {
+      this.state.expandedElements.set(curr, true);
+      curr = curr.parentNode;
+    }
+    this.setState({ expandedElements: this.state.expandedElements });
+  };
+
+  previousExpandedIndexTo = (i) => {
+    for (let prevIter = i - 1; prevIter >= 0; prevIter--) {
+      const prevEl = this.state.entities[prevIter].entity;
+      if (this.isVisibleInSceneGraph(prevEl)) {
+        return prevIter;
+      }
+    }
+    return -1;
+  };
+
+  nextExpandedIndexTo = (i) => {
+    for (
+      let nextIter = i + 1;
+      nextIter < this.state.entities.length;
+      nextIter++
+    ) {
+      const nextEl = this.state.entities[nextIter].entity;
+      if (this.isVisibleInSceneGraph(nextEl)) {
+        return nextIter;
+      }
+    }
+    return -1;
+  };
+
+  onChangeFilter = (evt) => {
+    const filter = evt.target.value;
+    this.setState({ filter: filter });
+    this.updateFilteredEntities(filter);
+  };
+
+  updateFilteredEntities(filter) {
+    this.setState({
+      filteredEntities: this.getFilteredEntities(filter)
+    });
+  }
+
+  clearFilter = () => {
+    this.setState({ filter: '' });
+    this.updateFilteredEntities('');
+  };
+
+  renderEntities = () => {
+    return this.state.filteredEntities.map((entityOption, idx) => {
+      if (
+        !this.isVisibleInSceneGraph(entityOption.entity) &&
+        !this.state.filter
+      ) {
+        return null;
+      }
+      return (
+        <Entity
+          {...entityOption}
+          key={idx}
+          isFiltering={!!this.state.filter}
+          isExpanded={this.isExpanded(entityOption.entity)}
+          isSelected={this.props.selectedEntity === entityOption.entity}
+          selectEntity={this.selectEntity}
+          toggleExpandedCollapsed={this.toggleExpandedCollapsed}
+        />
+      );
+    });
+  };
+
+  render() {
+    // To hide the SceneGraph we have to hide its parent too (#left-sidebar).
+    if (!this.props.visible) {
+      return null;
+    }
+
+    const clearFilter = this.state.filter ? (
+      <a onClick={this.clearFilter} className="button">
+        <AwesomeIcon icon={faTimes} />
+      </a>
+    ) : null;
+
+    return (
+      <div id="scenegraph" className="scenegraph">
+        <div className="scenegraph-toolbar">
+          <Toolbar />
+          <div className="search">
+            <input
+              id="filter"
+              placeholder="Search..."
+              onChange={this.onChangeFilter}
+              onKeyUp={this.onFilterKeyUp}
+              value={this.state.filter}
+            />
+            {clearFilter}
+            {!this.state.filter && <AwesomeIcon icon={faSearch} />}
+          </div>
+        </div>
+        <div
+          className="outliner"
+          tabIndex="0"
+          onKeyDown={this.onKeyDown}
+          onKeyUp={this.onKeyUp}
+        >
+          {this.renderEntities()}
+        </div>
+      </div>
+    );
+  }
+}
+
+function filterEntity(entity, filter) {
+  if (!filter) {
+    return true;
+  }
+
+  // Check if the ID, tagName, class, selector includes the filter.
+  if (
+    entity.id.toUpperCase().indexOf(filter.toUpperCase()) !== -1 ||
+    entity.tagName.toUpperCase().indexOf(filter.toUpperCase()) !== -1 ||
+    entity.classList.contains(filter) ||
+    entity.matches(filter)
+  ) {
+    return true;
+  }
+
+  return false;
+}

package/src/components/scenegraph/Toolbar.js

@@ -0,0 +1,147 @@
+import React from 'react';
+import {
+  faPlus,
+  faPause,
+  faPlay,
+  // faCube, // Removed as it's not used directly here anymore
+  // faCode, // Removed as it's not used directly here anymore
+  // faFloppyDisk // Removed as it's not used directly here anymore
+} from '@fortawesome/free-solid-svg-icons';
+import { AwesomeIcon } from '../AwesomeIcon';
+import Events from '../../lib/Events';
+import ModalPrimitive from '../modals/ModalPrimitive'; // Import the new modal component
+
+function filterHelpers(scene, visible) {
+  scene.traverse((o) => {
+    if (o.userData.source === 'INSPECTOR') {
+      o.visible = visible;
+    }
+  });
+}
+
+function getSceneName(scene) {
+  return scene.id || slugify(window.location.host + window.location.pathname);
+}
+
+/**
+ * Slugify the string removing non-word chars and spaces
+ * @param  {string} text String to slugify
+ * @return {string}      Slugified string
+ */
+function slugify(text) {
+  return text
+    .toString()
+    .toLowerCase()
+    .replace(/\s+/g, '-') // Replace spaces with -
+    .replace(/[^\w-]+/g, '-') // Replace all non-word chars with -
+    .replace(/--+/g, '-') // Replace multiple - with single -
+    .replace(/^-+/, '') // Trim - from start of text
+    .replace(/-+$/, ''); // Trim - from end of text
+}
+
+/**
+ * Tools and actions.
+ */
+export default class Toolbar extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isPlaying: false,
+      isAddEntityModalOpen: false // Add state for modal visibility
+    };
+  }
+
+  exportSceneToGLTF() {
+    const sceneName = getSceneName(AFRAME.scenes[0]);
+    const scene = AFRAME.scenes[0].object3D;
+    filterHelpers(scene, false);
+    AFRAME.INSPECTOR.exporters.gltf.parse(
+      scene,
+      function (buffer) {
+        filterHelpers(scene, true);
+        const blob = new Blob([buffer], { type: 'application/octet-stream' });
+        saveBlob(blob, sceneName + '.glb');
+      },
+      function (error) {
+        console.error(error);
+      },
+      { binary: true }
+    );
+  }
+
+  // Renamed original addEntity to toggleAddEntityModal
+  toggleAddEntityModal = () => {
+    this.setState({ isAddEntityModalOpen: !this.state.isAddEntityModalOpen });
+  };
+
+  // New function to handle entity creation based on modal selection
+  createEntity = (primitiveType) => {
+    if (primitiveType) {
+      Events.emit('entitycreate', { element: primitiveType, components: {} });
+    }
+    this.setState({ isAddEntityModalOpen: false }); // Close modal after selection or cancellation
+  };
+
+
+  toggleScenePlaying = () => {
+    if (this.state.isPlaying) {
+      AFRAME.scenes[0].pause();
+      this.setState({ isPlaying: false });
+      AFRAME.scenes[0].isPlaying = true;
+      document.getElementById('aframeInspectorMouseCursor').play();
+      return;
+    }
+    AFRAME.scenes[0].isPlaying = false;
+    AFRAME.scenes[0].play();
+    this.setState({ isPlaying: true });
+  };
+
+  render() {
+    // const watcherTitle = 'Write changes with aframe-watcher.'; // Keep or remove as needed
+
+    return (
+      <div id="toolbar">
+        <div className="toolbarActions">
+          <a
+            className="button"
+            title="Add a new entity"
+            onClick={this.toggleAddEntityModal} // Changed onClick handler
+          >
+            <AwesomeIcon icon={faPlus} />
+            <span>Add Entity</span>
+          </a>
+          {/* Play/Pause Button */}
+          <a
+            id="playPauseScene"
+            className="button"
+            title={this.state.isPlaying ? 'Pause scene' : 'Resume scene'}
+            onClick={this.toggleScenePlaying}
+          >
+            {this.state.isPlaying ? (
+              <>
+                <AwesomeIcon icon={faPause} />
+                <span>Pause Scene</span>
+              </>
+            ) : (
+              <>
+                <AwesomeIcon icon={faPlay} />
+                <span>Play Scene</span>
+              </>
+            )}
+          </a>
+          {/* Add other buttons like export, save if needed */}
+        </div>
+
+        {/* Conditionally render the modal */}
+        {this.state.isAddEntityModalOpen && (
+          <ModalPrimitive
+            isOpen={this.state.isAddEntityModalOpen}
+            onClose={this.toggleAddEntityModal} // Pass function to close modal
+            onSelectPrimitive={this.createEntity} // Pass function to create entity
+          />
+        )}
+      </div>
+    );
+  }
+}

package/src/components/viewport/CameraToolbar.js

@@ -0,0 +1,122 @@
+import React from 'react';
+import Select from 'react-select';
+import Events from '../../lib/Events';
+
+// Import custom SVG icons
+import PerspectiveIcon from '../icons/PerspectiveIcon';
+import LeftViewIcon from '../icons/LeftViewIcon';
+import RightViewIcon from '../icons/RightViewIcon';
+import TopViewIcon from '../icons/TopViewIcon';
+import BottomViewIcon from '../icons/BottomViewIcon';
+import BackViewIcon from '../icons/BackViewIcon';
+import FrontViewIcon from '../icons/FrontViewIcon';
+
+const options = [
+  {
+    value: 'perspective',
+    event: 'cameraperspectivetoggle',
+    payload: null,
+    label: 'Perspective',
+    icon: <PerspectiveIcon width="24" height="24" /> // Use custom icon
+  },
+  {
+    value: 'ortholeft',
+    event: 'cameraorthographictoggle',
+    payload: 'left',
+    label: 'Left View',
+    icon: <LeftViewIcon width="24" height="24" /> // Use custom icon
+  },
+  {
+    value: 'orthoright',
+    event: 'cameraorthographictoggle',
+    payload: 'right',
+    label: 'Right View',
+    icon: <RightViewIcon width="24" height="24" /> // Use custom icon
+  },
+  {
+    value: 'orthotop',
+    event: 'cameraorthographictoggle',
+    payload: 'top',
+    label: 'Top View',
+    icon: <TopViewIcon width="24" height="24" /> // Use custom icon
+  },
+  {
+    value: 'orthobottom',
+    event: 'cameraorthographictoggle',
+    payload: 'bottom',
+    label: 'Bottom View',
+    icon: <BottomViewIcon width="24" height="24" /> // Use custom icon
+  },
+  {
+    value: 'orthoback',
+    event: 'cameraorthographictoggle',
+    payload: 'back',
+    label: 'Back View',
+    icon: <BackViewIcon width="24" height="24" /> // Use custom icon
+  },
+  {
+    value: 'orthofront',
+    event: 'cameraorthographictoggle',
+    payload: 'front',
+    label: 'Front View',
+    icon: <FrontViewIcon width="24" height="24" /> // Use custom icon
+  }
+];
+
+export default class CameraToolbar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedCamera: 'perspective'
+    };
+    this.justChangedCamera = false;
+  }
+
+  componentDidMount() {
+    Events.on('cameratoggle', (data) => {
+      if (this.justChangedCamera) {
+        // Prevent recursion.
+        this.justChangedCamera = false;
+        return;
+      }
+      // Check if the incoming data value exists in our options
+      const isValidOption = options.some((opt) => opt.value === data.value);
+      if (isValidOption) {
+        this.setState({ selectedCamera: data.value });
+      }
+    });
+  }
+
+  onChange(option) {
+    console.log('Selected Camera Option:', option);
+    this.justChangedCamera = true;
+    this.setState({ selectedCamera: option.value });
+    Events.emit(option.event, option.payload);
+  }
+
+  render() {
+    // Custom formatOption to render label and icon
+    const formatOptionLabel = ({ label, icon }) => (
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        {icon}
+        <span style={{ marginLeft: '8px' }}>{label}</span>
+      </div>
+    );
+
+    return (
+      <div id="cameraToolbar">
+        <Select
+          id="cameraSelect"
+          classNamePrefix="select"
+          options={options}
+          value={options.find(
+            (option) => option.value === this.state.selectedCamera
+          )}
+          isSearchable={false}
+          onChange={this.onChange.bind(this)}
+          formatOptionLabel={formatOptionLabel}
+        />
+      </div>
+    );
+  }
+}

package/src/components/viewport/TransformToolbar.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import {
+  faArrowsAlt,
+  faRotateRight,
+  faUpRightAndDownLeftFromCenter
+} from '@fortawesome/free-solid-svg-icons';
+import { AwesomeIcon } from '../AwesomeIcon';
+import clsx from 'clsx';
+import Events from '../../lib/Events';
+
+var TransformButtons = [
+  { value: 'translate', icon: <AwesomeIcon icon={faArrowsAlt} /> },
+  { value: 'rotate', icon: <AwesomeIcon icon={faRotateRight} /> },
+  {
+    value: 'scale',
+    icon: <AwesomeIcon icon={faUpRightAndDownLeftFromCenter} />
+  }
+];
+
+export default class TransformToolbar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedTransform: 'translate',
+      localSpace: false
+    };
+  }
+
+  componentDidMount() {
+    Events.on('transformmodechange', (mode) => {
+      this.setState({ selectedTransform: mode });
+    });
+
+    Events.on('transformspacechange', () => {
+      Events.emit(
+        'transformspacechanged',
+        this.state.localSpace ? 'world' : 'local'
+      );
+      this.setState({ localSpace: !this.state.localSpace });
+    });
+  }
+
+  changeTransformMode = (mode) => {
+    this.setState({ selectedTransform: mode });
+    Events.emit('transformmodechange', mode);
+  };
+
+  onLocalChange = (e) => {
+    const local = e.target.checked;
+    this.setState({ localSpace: local });
+    Events.emit('transformspacechanged', local ? 'local' : 'world');
+  };
+
+  renderTransformButtons = () => {
+    return TransformButtons.map(
+      function (option, i) {
+        var selected = option.value === this.state.selectedTransform;
+        var classes = clsx({
+          button: true,
+          active: selected
+        });
+
+        return (
+          <a
+            title={option.value}
+            key={i}
+            onClick={this.changeTransformMode.bind(this, option.value)}
+            className={classes}
+          >
+            {option.icon}
+          </a>
+        );
+      }.bind(this)
+    );
+  };
+
+  render() {
+    return (
+      <div id="transformToolbar" className="toolbarButtons">
+        {this.renderTransformButtons()}
+        {/* <span className="local-transform">
+          <input
+            id="local"
+            type="checkbox"
+            title="Toggle between local and world space transforms"
+            checked={
+              this.state.localSpace || this.state.selectedTransform === 'scale'
+            }
+            disabled={this.state.selectedTransform === 'scale'}
+            onChange={this.onLocalChange}
+          />
+          <label
+            htmlFor="local"
+            title="Toggle between local and world space transforms"
+          >
+            Local Space Transform
+          </label>
+        </span> */}
+      </div>
+    );
+  }
+}