senangwebs-aframe-editor 1.6.5

package/src/components/components/Component.js

@@ -0,0 +1,151 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { faClipboard, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { AwesomeIcon } from '../AwesomeIcon';
+import PropertyRow from './PropertyRow';
+import Collapsible from '../Collapsible';
+import copy from 'clipboard-copy';
+import { getComponentClipboardRepresentation } from '../../lib/entity';
+import Events from '../../lib/Events';
+
+const isSingleProperty = AFRAME.schema.isSingleProperty;
+
+/**
+ * Single component.
+ */
+export default class Component extends React.Component {
+  static propTypes = {
+    component: PropTypes.any,
+    entity: PropTypes.object,
+    isCollapsed: PropTypes.bool,
+    name: PropTypes.string
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      entity: this.props.entity,
+      name: this.props.name
+    };
+  }
+
+  componentDidMount() {
+    Events.on('entityupdate', (detail) => {
+      if (detail.entity !== this.props.entity) {
+        return;
+      }
+      if (detail.component === this.props.name) {
+        this.forceUpdate();
+      }
+    });
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    if (state.entity !== props.entity) {
+      return { entity: props.entity };
+    }
+    if (state.name !== props.name) {
+      return { name: props.name };
+    }
+    return null;
+  }
+
+  removeComponent = (event) => {
+    var componentName = this.props.name;
+    event.stopPropagation();
+    if (
+      confirm('Do you really want to remove component `' + componentName + '`?')
+    ) {
+      this.props.entity.removeAttribute(componentName);
+      Events.emit('componentremove', {
+        entity: this.props.entity,
+        component: componentName
+      });
+    }
+  };
+
+  /**
+   * Render propert(ies) of the component.
+   */
+  renderPropertyRows = () => {
+    const componentData = this.props.component;
+
+    if (isSingleProperty(componentData.schema)) {
+      const componentName = this.props.name;
+      const schema = AFRAME.components[componentName.split('__')[0]].schema;
+      return (
+        <PropertyRow
+          key={componentName}
+          name={componentName}
+          schema={schema}
+          data={componentData.data}
+          componentname={componentName}
+          isSingle={true}
+          entity={this.props.entity}
+        />
+      );
+    }
+
+    return Object.keys(componentData.schema)
+      .sort()
+      .map((propertyName) => (
+        <PropertyRow
+          key={propertyName}
+          name={propertyName}
+          schema={componentData.schema[propertyName]}
+          data={componentData.data[propertyName]}
+          componentname={this.props.name}
+          isSingle={false}
+          entity={this.props.entity}
+        />
+      ));
+  };
+
+  render() {
+    let componentName = this.props.name;
+    let subComponentName = '';
+    if (componentName.indexOf('__') !== -1) {
+      subComponentName = componentName;
+      componentName = componentName.substr(0, componentName.indexOf('__'));
+    }
+
+    return (
+      <Collapsible collapsed={this.props.isCollapsed}>
+        <div className="componentHeader collapsible-header">
+          <span
+            className="componentTitle"
+            title={subComponentName || componentName}
+          >
+            <span>{subComponentName || componentName}</span>
+          </span>
+          <div className="componentHeaderActions">
+            {/* <a
+              title="Copy to clipboard"
+              className="button"
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                copy(
+                  getComponentClipboardRepresentation(
+                    this.state.entity,
+                    (subComponentName || componentName).toLowerCase()
+                  )
+                );
+              }}
+            >
+              <AwesomeIcon icon={faClipboard} />
+            </a> */}
+            <a
+              title="Remove component"
+              className="button"
+              onClick={this.removeComponent}
+            >
+              <AwesomeIcon icon={faTrashAlt} />
+            </a>
+          </div>
+        </div>
+        <div className="collapsible-content">{this.renderPropertyRows()}</div>
+      </Collapsible>
+    );
+  }
+}

package/src/components/components/ComponentsContainer.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import AddComponent from './AddComponent';
+import Component from './Component';
+import CommonComponents from './CommonComponents';
+import DEFAULT_COMPONENTS from './DefaultComponents';
+import Events from '../../lib/Events';
+
+export default class ComponentsContainer extends React.Component {
+  static propTypes = {
+    entity: PropTypes.object
+  };
+
+  componentDidMount() {
+    Events.on('entityupdate', (detail) => {
+      if (detail.entity !== this.props.entity) {
+        return;
+      }
+      if (detail.component === 'mixin') {
+        this.forceUpdate();
+      }
+    });
+  }
+
+  render() {
+    const entity = this.props.entity;
+    const components = entity ? entity.components : {};
+    const definedComponents = Object.keys(components).filter(function (key) {
+      return DEFAULT_COMPONENTS.indexOf(key) === -1;
+    });
+
+    const renderedComponents = definedComponents.sort().map(function (key) {
+      return (
+        <Component
+          isCollapsed={definedComponents.length > 2}
+          component={components[key]}
+          entity={entity}
+          key={key}
+          name={key}
+        />
+      );
+    });
+
+    return (
+      <div className="components">
+        <CommonComponents entity={entity} />
+        <AddComponent entity={entity} />
+        {renderedComponents}
+      </div>
+    );
+  }
+}

package/src/components/components/DefaultComponents.js

@@ -0,0 +1 @@
+export default ['visible', 'position', 'scale', 'rotation'];

package/src/components/components/Mixins.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Select from 'react-select';
+import Events from '../../lib/Events';
+
+export default class Mixin extends React.Component {
+  static propTypes = {
+    entity: PropTypes.object.isRequired
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = { mixins: this.getMixinValue() };
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (this.props.entity === prevProps.entity) {
+      return;
+    }
+    this.setState({ mixins: this.getMixinValue() });
+  }
+
+  getMixinValue() {
+    return (this.props.entity.getAttribute('mixin') || '')
+      .split(/\s+/g)
+      .filter((v) => !!v)
+      .map((v) => ({ label: v, value: v }));
+  }
+
+  getMixinOptions = () => {
+    const mixinIds = this.props.entity.mixinEls.map(function (mixin) {
+      return mixin.id;
+    });
+
+    return Array.prototype.slice
+      .call(document.querySelectorAll('a-mixin'))
+      .filter(function (mixin) {
+        return mixinIds.indexOf(mixin.id) === -1;
+      })
+      .sort()
+      .map(function (mixin) {
+        return { value: mixin.id, label: mixin.id };
+      });
+  };
+
+  updateMixins = (value) => {
+    const entity = this.props.entity;
+
+    this.setState({ mixins: value });
+    const mixinStr = value.map((v) => v.value).join(' ');
+    entity.setAttribute('mixin', mixinStr);
+
+    Events.emit('entityupdate', {
+      component: 'mixin',
+      entity: entity,
+      property: '',
+      value: mixinStr
+    });
+  };
+
+  render() {
+    return (
+      <div className="mixinOptions">
+        <div className="propertyRow">
+          <span className="text">mixins</span>
+          <span className="mixinValue">
+            <Select
+              id="mixinSelect"
+              classNamePrefix="select"
+              options={this.getMixinOptions()}
+              isMulti={true}
+              placeholder="Add mixin..."
+              noResultsText="No mixins found"
+              onChange={this.updateMixins.bind(this)}
+              simpleValue
+              value={this.state.mixins}
+            />
+          </span>
+        </div>
+      </div>
+    );
+  }
+}

package/src/components/components/PropertyRow.js

@@ -0,0 +1,145 @@
+/* eslint-disable no-prototype-builtins */
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+import BooleanWidget from '../widgets/BooleanWidget';
+import ColorWidget from '../widgets/ColorWidget';
+import InputWidget from '../widgets/InputWidget';
+import NumberWidget from '../widgets/NumberWidget';
+import SelectWidget from '../widgets/SelectWidget';
+import TextureWidget from '../widgets/TextureWidget';
+import Vec4Widget from '../widgets/Vec4Widget';
+import Vec3Widget from '../widgets/Vec3Widget';
+import Vec2Widget from '../widgets/Vec2Widget';
+import { updateEntity } from '../../lib/entity';
+
+export default class PropertyRow extends React.Component {
+  static propTypes = {
+    componentname: PropTypes.string.isRequired,
+    data: PropTypes.oneOfType([
+      PropTypes.array.isRequired,
+      PropTypes.bool.isRequired,
+      PropTypes.number.isRequired,
+      PropTypes.object.isRequired,
+      PropTypes.string.isRequired
+    ]),
+    entity: PropTypes.object.isRequired,
+    isSingle: PropTypes.bool.isRequired,
+    name: PropTypes.string.isRequired,
+    schema: PropTypes.object.isRequired
+  };
+
+  constructor(props) {
+    super(props);
+    this.id = props.componentname + ':' + props.name;
+  }
+
+  getWidget() {
+    const props = this.props;
+    const isMap =
+      props.componentname === 'material' &&
+      (props.name === 'envMap' || props.name === 'src');
+    let type = props.schema.type;
+    if (props.componentname === 'animation' && props.name === 'loop') {
+      // fix wrong number type for animation loop property
+      type = 'boolean';
+    }
+
+    const value =
+      props.schema.type === 'selector'
+        ? props.entity.getDOMAttribute(props.componentname)?.[props.name]
+        : props.data;
+
+    const widgetProps = {
+      componentname: props.componentname,
+      entity: props.entity,
+      isSingle: props.isSingle,
+      name: props.name,
+      onChange: function (name, value) {
+        updateEntity(
+          props.entity,
+          props.componentname,
+          !props.isSingle ? props.name : '',
+          value
+        );
+      },
+      value: value
+    };
+    const numberWidgetProps = {
+      min: props.schema.hasOwnProperty('min') ? props.schema.min : -Infinity,
+      max: props.schema.hasOwnProperty('max') ? props.schema.max : Infinity
+    };
+
+    if (props.schema.oneOf && props.schema.oneOf.length > 0) {
+      return <SelectWidget {...widgetProps} options={props.schema.oneOf} />;
+    }
+    if (type === 'map' || isMap) {
+      return <TextureWidget {...widgetProps} />;
+    }
+
+    switch (type) {
+      case 'number': {
+        return <NumberWidget {...widgetProps} {...numberWidgetProps} />;
+      }
+      case 'int': {
+        return (
+          <NumberWidget {...widgetProps} {...numberWidgetProps} precision={0} />
+        );
+      }
+      case 'vec2': {
+        return <Vec2Widget {...widgetProps} />;
+      }
+      case 'vec3': {
+        return <Vec3Widget {...widgetProps} />;
+      }
+      case 'vec4': {
+        return <Vec4Widget {...widgetProps} />;
+      }
+      case 'color': {
+        return <ColorWidget {...widgetProps} />;
+      }
+      case 'boolean': {
+        return <BooleanWidget {...widgetProps} />;
+      }
+      default: {
+        if (
+          props.schema.type === 'string' &&
+          widgetProps.value &&
+          typeof widgetProps.value !== 'string'
+        ) {
+          // Allow editing a custom type like event-set component schema
+          widgetProps.value = props.schema.stringify(widgetProps.value);
+        }
+        return <InputWidget {...widgetProps} />;
+      }
+    }
+  }
+
+  render() {
+    const props = this.props;
+    const value =
+      props.schema.type === 'selector'
+        ? props.entity.getDOMAttribute(props.componentname)?.[props.name]
+        : JSON.stringify(props.data);
+    const title =
+      props.name + '\n - type: ' + props.schema.type + '\n - value: ' + value;
+
+    const className = clsx({
+      propertyRow: true,
+      propertyRowDefined: props.isSingle
+        ? !!props.entity.getDOMAttribute(props.componentname)
+        : props.name in
+          (props.entity.getDOMAttribute(props.componentname) || {})
+    });
+
+    return (
+      <div className={className}>
+        <label htmlFor={this.id} className="text" title={title}>
+          {props.name}
+        </label>
+        {this.getWidget(props.schema.type)}
+      </div>
+    );
+  }
+}

package/src/components/components/Sidebar.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { AwesomeIcon } from '../AwesomeIcon'; // Assuming AwesomeIcon is in the parent directory
+import ComponentsContainer from './ComponentsContainer';
+import EntityRepresentation from '../EntityRepresentation';
+import Events from '../../lib/Events';
+
+export default class Sidebar extends React.Component {
+  static propTypes = {
+    entity: PropTypes.object,
+    visible: PropTypes.bool
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = { open: false };
+  }
+
+  componentDidMount() {
+    Events.on('componentremove', (event) => {
+      this.forceUpdate();
+    });
+
+    Events.on('componentadd', (event) => {
+      this.forceUpdate();
+    });
+  }
+
+  handleToggle = () => {
+    this.setState({ open: !this.state.open });
+  };
+
+  handleClose = () => {
+    Events.emit('togglesidebar', { which: 'attributes' });
+  };
+
+  render() {
+    const entity = this.props.entity;
+    const visible = this.props.visible;
+    if (entity && visible) {
+      return (
+        <div id="sidebar">
+          <ComponentsContainer entity={entity} />
+        </div>
+      );
+    } else {
+      return <div />;
+    }
+  }
+}

package/src/components/icons/BackViewIcon.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const BackViewIcon = (props) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    {/* Cube Outline (adjust perspective for back view) */}
+    {/* Draw the back face first */}
+    <path d="M 10 2 L 24 2 L 24 16 L 10 16 Z" fill="#00ff99" />{' '}
+    {/* Back Face Highlighted */}
+    {/* Draw visible edges from back view */}
+    <path d="M 5 5 L 10 2" /> {/* Top-Left Edge */}
+    <path d="M 5 5 L 5 19" /> {/* Front-Left Edge */}
+    <path d="M 5 19 L 10 16" /> {/* Bottom-Left Edge */}
+    <path d="M 19 5 L 24 2" /> {/* Top-Right Edge */}
+    <path d="M 19 5 L 19 19" /> {/* Front-Right Edge */}
+    <path d="M 19 19 L 24 16" /> {/* Bottom-Right Edge */}
+  </svg>
+);
+
+export default BackViewIcon;

package/src/components/icons/BottomViewIcon.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+const BottomViewIcon = (props) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    {/* Cube Outline */}
+    <path d="M 5 5 L 19 5 L 19 19 L 5 19 Z" /> {/* Front Face */}
+    <path d="M 5 5 L 10 2 L 24 2 L 19 5" /> {/* Top Edge */}
+    <path d="M 19 5 L 24 2 L 24 16 L 19 19" /> {/* Right Edge */}
+    <path d="M 5 19 L 10 16 L 10 2" /> {/* Left Edge */}
+    <path d="M 10 16 L 24 16" /> {/* Bottom Edge */}
+    {/* Highlight Bottom Face (approximated) */}
+    {/* Since it's a bottom view, we might just show the bottom square or a variation */}
+    {/* Let's highlight the bottom part of the front and right faces visible from a low angle */}
+    <path d="M 5 19 L 19 19 L 24 16 L 10 16 Z" fill="#00ff99" />
+  </svg>
+);
+
+export default BottomViewIcon;

package/src/components/icons/FrontViewIcon.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const FrontViewIcon = (props) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    {/* Cube Outline */}
+    <path d="M 5 5 L 19 5 L 19 19 L 5 19 Z" fill="#00ff99" />{' '}
+    {/* Front Face Highlighted */}
+    <path d="M 5 5 L 10 2 L 24 2 L 19 5" /> {/* Top Edge */}
+    <path d="M 19 5 L 24 2 L 24 16 L 19 19" /> {/* Right Edge */}
+    <path d="M 5 19 L 10 16 L 10 2" /> {/* Left Edge */}
+    <path d="M 10 16 L 24 16" /> {/* Bottom Edge */}
+  </svg>
+);
+
+export default FrontViewIcon;

package/src/components/icons/LeftViewIcon.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const LeftViewIcon = (props) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    {/* Cube Outline */}
+    <path d="M 5 5 L 19 5 L 19 19 L 5 19 Z" /> {/* Front Face */}
+    <path d="M 5 5 L 10 2 L 24 2 L 19 5" /> {/* Top Face */}
+    <path d="M 19 5 L 24 2 L 24 16 L 19 19" /> {/* Right Face */}
+    <path d="M 5 19 L 10 16 L 10 2" /> {/* Left Edge */}
+    <path d="M 10 16 L 24 16" /> {/* Bottom Edge */}
+    {/* Highlight Left Face */}
+    <path d="M 5 5 L 10 2 L 10 16 L 5 19 Z" fill="#00ff99" />
+  </svg>
+);
+
+export default LeftViewIcon;

package/src/components/icons/PerspectiveIcon.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const PerspectiveIcon = (props) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    {/* Simple Cube Outline */}
+    <path d="M 5 5 L 19 5 L 19 19 L 5 19 Z" /> {/* Front Face */}
+    <path d="M 5 5 L 10 2 L 24 2 L 19 5" /> {/* Top Face */}
+    <path d="M 19 5 L 24 2 L 24 16 L 19 19" /> {/* Right Face */}
+    {/* Optional: Add inner lines for perspective effect if needed */}
+    {/* <path d="M 5 19 L 10 16 L 10 2" /> */}
+    {/* <path d="M 10 16 L 24 16" /> */}
+  </svg>
+);
+
+export default PerspectiveIcon;