senangwebs-aframe-editor 1.6.5

package/src/components/icons/PrimitiveTextIcon.js

@@ -0,0 +1,89 @@
+import React from 'react';
+
+const PrimitiveTextIcon = ({ color = '#A3A3A3' }) => (
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 406 406"
+    style={{ overflow: 'hidden' }}
+  >
+    <g transform="translate(-1309 -1574)">
+      <path
+        d="M1323.5 1587.5 1323.5 1965.45"
+        stroke={color}
+        strokeWidth="26.6667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit="10"
+        fill="none"
+        fillRule="evenodd"
+      />
+      <path
+        d="M1701.5 1587.5 1701.5 1965.45"
+        stroke={color}
+        strokeWidth="26.6667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit="10"
+        fill="none"
+        fillRule="evenodd"
+      />
+      <path
+        d="M0 0 377.953 0.000104987"
+        stroke={color}
+        strokeWidth="26.6667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit="10"
+        fill="none"
+        fillRule="evenodd"
+        transform="matrix(-1 0 0 1 1701.45 1965.5)"
+      />
+      <path
+        d="M0 0 377.953 0.000104987"
+        stroke={color}
+        strokeWidth="26.6667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit="10"
+        fill="none"
+        fillRule="evenodd"
+        transform="matrix(-1 0 0 1 1701.45 1587.5)"
+      />
+      <path
+        d="M0 0 151.181 0.000104987"
+        stroke={color}
+        strokeWidth="26.6667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit="10"
+        fill="none"
+        fillRule="evenodd"
+        transform="matrix(-1 0 0 1 1587.68 1890.5)"
+      />
+      <path
+        d="M1512.5 1663.5 1512.5 1890.27"
+        stroke={color}
+        strokeWidth="26.6667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit="10"
+        fill="none"
+        fillRule="evenodd"
+      />
+      <path
+        d="M0 0 151.181 0.000104987"
+        stroke={color}
+        strokeWidth="26.6667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit="10"
+        fill="none"
+        fillRule="evenodd"
+        transform="matrix(-1 0 0 1 1587.68 1663.5)"
+      />
+    </g>
+  </svg>
+);
+
+export default PrimitiveTextIcon;

package/src/components/icons/PrimitiveTorusIcon.js

@@ -0,0 +1,31 @@
+import React from 'react';
+
+const PrimitiveTorusIcon = ({ color = '#A3A3A3' }) => (
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 406 406"
+    style={{ overflow: 'hidden' }}
+  >
+    <g transform="translate(-2292 -1044)">
+      <path
+        d="M2306.5 1247.5C2306.5 1143.12 2390.89 1058.5 2495 1058.5 2599.11 1058.5 2683.5 1143.12 2683.5 1247.5 2683.5 1351.88 2599.11 1436.5 2495 1436.5 2390.89 1436.5 2306.5 1351.88 2306.5 1247.5Z"
+        stroke={color}
+        strokeWidth="26.6667"
+        strokeMiterlimit="8"
+        fill="none"
+        fillRule="evenodd"
+      />
+      <path
+        d="M2381.5 1248C2381.5 1185.32 2432.32 1134.5 2495 1134.5 2557.68 1134.5 2608.5 1185.32 2608.5 1248 2608.5 1310.68 2557.68 1361.5 2495 1361.5 2432.32 1361.5 2381.5 1310.68 2381.5 1248Z"
+        stroke={color}
+        strokeWidth="26.6667"
+        strokeMiterlimit="8"
+        fill="none"
+        fillRule="evenodd"
+      />
+    </g>
+  </svg>
+);
+
+export default PrimitiveTorusIcon;

package/src/components/icons/RightViewIcon.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const RightViewIcon = (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 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 Right Face */}
+    <path d="M 19 5 L 24 2 L 24 16 L 19 19 Z" fill="#00ff99" />
+  </svg>
+);
+
+export default RightViewIcon;

package/src/components/icons/TopViewIcon.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const TopViewIcon = (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 Top Face */}
+    <path d="M 5 5 L 10 2 L 24 2 L 19 5 Z" fill="#00ff99" />
+  </svg>
+);
+
+export default TopViewIcon;

package/src/components/modals/Modal.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class Modal extends React.Component {
+  static propTypes = {
+    id: PropTypes.string,
+    children: PropTypes.oneOfType([PropTypes.array, PropTypes.element])
+      .isRequired,
+    isOpen: PropTypes.bool,
+    extraCloseKeyCode: PropTypes.number,
+    closeOnClickOutside: PropTypes.bool,
+    onClose: PropTypes.func,
+    title: PropTypes.string
+  };
+
+  static defaultProps = {
+    closeOnClickOutside: true
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = { isOpen: this.props.isOpen };
+    this.self = React.createRef();
+  }
+
+  componentDidMount() {
+    document.addEventListener('keyup', this.handleGlobalKeydown);
+    document.addEventListener('mousedown', this.handleGlobalMousedown);
+  }
+
+  handleGlobalKeydown = (event) => {
+    if (
+      this.state.isOpen &&
+      (event.keyCode === 27 ||
+        (this.props.extraCloseKeyCode &&
+          event.keyCode === this.props.extraCloseKeyCode))
+    ) {
+      this.close();
+
+      // Prevent closing the inspector
+      event.stopPropagation();
+    }
+  };
+
+  shouldClickDismiss = (event) => {
+    var target = event.target;
+    // This piece of code isolates targets which are fake clicked by things
+    // like file-drop handlers
+    if (target.tagName === 'INPUT' && target.type === 'file') {
+      return false;
+    }
+    if (target === this.self.current || this.self.current.contains(target)) {
+      return false;
+    }
+    return true;
+  };
+
+  handleGlobalMousedown = (event) => {
+    if (
+      this.props.closeOnClickOutside &&
+      this.state.isOpen &&
+      this.shouldClickDismiss(event)
+    ) {
+      if (typeof this.props.onClose === 'function') {
+        this.props.onClose();
+      }
+    }
+  };
+
+  componentWillUnmount() {
+    document.removeEventListener('keyup', this.handleGlobalKeydown);
+    document.removeEventListener('mousedown', this.handleGlobalMousedown);
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    if (state.isOpen !== props.isOpen) {
+      return { isOpen: props.isOpen };
+    }
+    return null;
+  }
+
+  close = () => {
+    this.setState({ isOpen: false });
+    if (this.props.onClose) {
+      this.props.onClose();
+    }
+  };
+
+  render() {
+    return (
+      <div
+        id={this.props.id}
+        className={this.state.isOpen ? 'modal' : 'modal hide'}
+      >
+        <div className="modal-content" ref={this.self}>
+          <div className="modal-header">
+            <span className="close" onClick={this.close}>
+              ×
+            </span>
+            <h3>{this.props.title}</h3>
+          </div>
+          <div className="modal-body">{this.props.children}</div>
+        </div>
+      </div>
+    );
+  }
+}

package/src/components/modals/ModalHelp.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Modal from './Modal';
+
+export default class ModalHelp extends React.Component {
+  static propTypes = {
+    isOpen: PropTypes.bool,
+    onClose: PropTypes.func
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: this.props.isOpen
+    };
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    if (state.isOpen !== props.isOpen) {
+      return { isOpen: props.isOpen };
+    }
+    return null;
+  }
+
+  onClose = () => {
+    if (this.props.onClose) {
+      this.props.onClose();
+    }
+  };
+
+  render() {
+    let shortcuts = [
+      [
+        { key: ['w'], description: 'Translate' },
+        { key: ['e'], description: 'Rotate' },
+        { key: ['r'], description: 'Scale' },
+        { key: ['d'], description: 'Duplicate selected entity' },
+        { key: ['f'], description: 'Focus on selected entity' },
+        { key: ['g'], description: 'Toggle grid visibility' },
+        { key: ['n'], description: 'Add new entity' },
+        { key: ['o'], description: 'Toggle local between global transform' },
+        { key: ['supr | backspace'], description: 'Delete selected entity' }
+      ],
+      [
+        { key: ['0'], description: 'Toggle panels' },
+        { key: ['1'], description: 'Perspective view' },
+        { key: ['2'], description: 'Left view' },
+        { key: ['3'], description: 'Right view' },
+        { key: ['4'], description: 'Top view' },
+        { key: ['5'], description: 'Bottom view' },
+        { key: ['6'], description: 'Back view' },
+        { key: ['7'], description: 'Front view' },
+
+        { key: ['ctrl | cmd', 'x'], description: 'Cut selected entity' },
+        { key: ['ctrl | cmd', 'c'], description: 'Copy selected entity' },
+        { key: ['ctrl | cmd', 'v'], description: 'Paste entity' },
+        { key: ['h'], description: 'Show this help' },
+        { key: ['Esc'], description: 'Unselect entity' },
+        { key: ['ctrl', 'alt', 'i'], description: 'Switch Edit and VR Modes' }
+      ]
+    ];
+
+    return (
+      <Modal
+        title="Shortcuts"
+        isOpen={this.state.isOpen}
+        onClose={this.onClose}
+        extraCloseKeyCode={72}
+      >
+        <div className="help-lists">
+          {shortcuts.map(function (column, idx) {
+            return (
+              <ul className="help-list" key={idx}>
+                {column.map(function (shortcut) {
+                  return (
+                    <li key={shortcut.key} className="help-key-unit">
+                      {shortcut.key.map(function (key) {
+                        return (
+                          <kbd key={key} className="help-key">
+                            <span>{key}</span>
+                          </kbd>
+                        );
+                      })}
+                      <span className="help-key-def">
+                        {shortcut.description}
+                      </span>
+                    </li>
+                  );
+                })}
+              </ul>
+            );
+          })}
+        </div>
+      </Modal>
+    );
+  }
+}

package/src/components/modals/ModalPrimitive.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import PrimitiveBoxIcon from '../icons/primitiveBoxIcon';
+import PrimitiveConeIcon from '../icons/PrimitiveConeIcon';
+import PrimitiveCylinderIcon from '../icons/PrimitiveCylinderIcon';
+import PrimitiveEmptyEntityIcon from '../icons/PrimitiveEmptyEntityIcon';
+import PrimitiveImageIcon from '../icons/PrimitiveImageIcon';
+import PrimitiveLightIcon from '../icons/PrimitiveLightIcon';
+import PrimitivePlaneIcon from '../icons/PrimitivePlaneIcon';
+import PrimitiveSphereIcon from '../icons/PrimitiveSphereIcon';
+import PrimitiveTorusIcon from '../icons/PrimitiveTorusIcon';
+import PrimitiveTextIcon from '../icons/PrimitiveTextIcon';
+
+const PRIMITIVES = [
+  { type: 'a-box', label: 'Box', icon: <PrimitiveBoxIcon color="#ffffff" /> },
+  {
+    type: 'a-sphere',
+    label: 'Sphere',
+    icon: <PrimitiveSphereIcon color="#ffffff" />
+  },
+  {
+    type: 'a-cylinder',
+    label: 'Cylinder',
+    icon: <PrimitiveCylinderIcon color="#ffffff" />
+  },
+  {
+    type: 'a-cone',
+    label: 'Cone',
+    icon: <PrimitiveConeIcon color="#ffffff" />
+  },
+  {
+    type: 'a-torus',
+    label: 'Torus',
+    icon: <PrimitiveTorusIcon color="#ffffff" />
+  },
+  {
+    type: 'a-plane',
+    label: 'Plane',
+    icon: <PrimitivePlaneIcon color="#ffffff" />
+  },
+  {
+    type: 'a-image',
+    label: 'Image',
+    icon: <PrimitiveImageIcon color="#ffffff" />
+  },
+  {
+    type: 'a-text',
+    label: 'Text',
+    icon: <PrimitiveTextIcon color="#ffffff" />
+  },
+  {
+    type: 'a-light',
+    label: 'Light',
+    icon: <PrimitiveLightIcon color="#ffffff" />
+  },
+  {
+    type: 'a-entity',
+    label: 'Empty Entity',
+    icon: <PrimitiveEmptyEntityIcon color="#ffffff" />
+  }
+];
+
+export default function ModalPrimitive({ isOpen, onClose, onSelectPrimitive }) {
+  if (!isOpen) {
+    return null;
+  }
+
+  const handleSelect = (primitiveType) => {
+    onSelectPrimitive(primitiveType);
+  };
+
+  // Stop propagation to prevent closing modal when clicking inside
+  const handleModalContentClick = (e) => {
+    e.stopPropagation();
+  };
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div
+        className="modal-content"
+        id="primitive-modal"
+        onClick={handleModalContentClick}
+      >
+        <div className="modal-header">
+          <h3>Select Primitive</h3>
+          <span className="close" onClick={onClose}>
+            ×
+          </span>
+        </div>
+        <div className="modal-body">
+          <div className="primitive-grid">
+            {PRIMITIVES.map((primitive) => (
+              <button
+                key={primitive.type}
+                className="primitive-button"
+                onClick={() => handleSelect(primitive.type)}
+                title={`Add ${primitive.label}`}
+              >
+                {primitive.icon}
+                {primitive.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+ModalPrimitive.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onSelectPrimitive: PropTypes.func.isRequired
+};