senangwebs-aframe-editor 1.6.5

package/src/components/viewport/ViewportHUD.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import EntityRepresentation from '../EntityRepresentation';
+import Events from '../../lib/Events';
+
+export default class ViewportHUD extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hoveredEntity: null,
+      selectedEntity: null
+    };
+  }
+
+  componentDidMount() {
+    Events.on('raycastermouseenter', (el) => {
+      this.setState({ hoveredEntity: el });
+    });
+
+    Events.on('raycastermouseleave', (el) => {
+      this.setState({ hoveredEntity: el });
+    });
+  }
+
+  render() {
+    return (
+      <div id="viewportHud">
+        <p>
+          <EntityRepresentation entity={this.state.hoveredEntity} />
+        </p>
+      </div>
+    );
+  }
+}

package/src/components/widgets/BooleanWidget.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class BooleanWidget extends React.Component {
+  static propTypes = {
+    componentname: PropTypes.string.isRequired,
+    entity: PropTypes.object,
+    name: PropTypes.string.isRequired,
+    onChange: PropTypes.func,
+    value: PropTypes.bool
+  };
+
+  static defaultProps = {
+    value: false
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = { value: this.props.value };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.value !== prevProps.value) {
+      this.setState({ value: this.props.value });
+    }
+  }
+
+  onChange = (e) => {
+    var value = e.target.checked;
+    this.setState({ value: value });
+    if (this.props.onChange) {
+      this.props.onChange(this.props.name, value);
+    }
+  };
+
+  render() {
+    var id = this.props.componentname + '.' + this.props.name;
+
+    return (
+      <input
+        id={id}
+        type="checkbox"
+        checked={this.state.value}
+        value={this.state.value}
+        onChange={this.onChange}
+      />
+    );
+  }
+}

package/src/components/widgets/ColorWidget.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class ColorWidget extends React.Component {
+  static propTypes = {
+    componentname: PropTypes.string.isRequired,
+    entity: PropTypes.object,
+    name: PropTypes.string.isRequired,
+    onChange: PropTypes.func,
+    value: PropTypes.string
+  };
+
+  static defaultProps = {
+    value: '#ffffff'
+  };
+
+  constructor(props) {
+    super(props);
+
+    var value = this.props.value;
+    this.color = new THREE.Color();
+
+    this.state = {
+      value: value,
+      pickerValue: this.getHexString(value)
+    };
+  }
+
+  setValue(value) {
+    var pickerValue = this.getHexString(value);
+
+    this.setState({
+      value: value,
+      pickerValue: pickerValue
+    });
+
+    if (this.props.onChange) {
+      this.props.onChange(this.props.name, value);
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.value !== prevProps.value) {
+      this.setState({
+        value: this.props.value,
+        pickerValue: this.getHexString(this.props.value)
+      });
+    }
+  }
+
+  getHexString(value) {
+    return '#' + this.color.set(value).getHexString();
+  }
+
+  onChange = (e) => {
+    this.setValue(e.target.value);
+  };
+
+  onKeyUp = (e) => {
+    e.stopPropagation();
+    // if (e.keyCode === 13)
+    this.setValue(e.target.value);
+  };
+
+  onChangeText = (e) => {
+    this.setState({ value: e.target.value });
+  };
+
+  render() {
+    return (
+      <span className="color-widget">
+        <input
+          type="color"
+          className="color"
+          value={this.state.pickerValue}
+          title={this.state.value}
+          onChange={this.onChange}
+        />
+        <input
+          type="text"
+          className="color_value"
+          value={this.state.value}
+          onKeyUp={this.onKeyUp}
+          onChange={this.onChangeText}
+        />
+      </span>
+    );
+  }
+}

package/src/components/widgets/InputWidget.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class InputWidget extends React.Component {
+  static propTypes = {
+    componentname: PropTypes.string,
+    entity: PropTypes.object,
+    name: PropTypes.string.isRequired,
+    onChange: PropTypes.func,
+    value: PropTypes.any
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = { value: this.props.value || '' };
+  }
+
+  onChange = (e) => {
+    var value = e.target.value;
+    this.setState({ value: value });
+    if (this.props.onChange) {
+      this.props.onChange(this.props.name, value);
+    }
+  };
+
+  componentDidUpdate(prevProps) {
+    if (this.props.value !== prevProps.value) {
+      this.setState({ value: this.props.value });
+    }
+  }
+
+  render() {
+    return (
+      <input
+        type="text"
+        className="string"
+        value={this.state.value || ''}
+        onChange={this.onChange}
+      />
+    );
+  }
+}

package/src/components/widgets/NumberWidget.js

@@ -0,0 +1,179 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class NumberWidget extends React.Component {
+  static propTypes = {
+    componentname: PropTypes.string,
+    entity: PropTypes.object,
+    max: PropTypes.number,
+    min: PropTypes.number,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    precision: PropTypes.number,
+    step: PropTypes.number,
+    value: PropTypes.number
+  };
+
+  static defaultProps = {
+    min: -Infinity,
+    max: Infinity,
+    value: 0,
+    precision: 3,
+    step: 1
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: this.props.value,
+      displayValue:
+        typeof this.props.value === 'number'
+          ? this.props.value.toFixed(this.props.precision)
+          : ''
+    };
+    this.input = React.createRef();
+  }
+
+  componentDidMount() {
+    this.distance = 0;
+    this.onMouseDownValue = 0;
+    this.prevPointer = [0, 0];
+
+    this.setValue(this.props.value);
+    this.onBlur();
+  }
+
+  onMouseMove = (event) => {
+    const currentValue = parseFloat(this.state.value);
+    const pointer = [event.clientX, event.clientY];
+    const delta =
+      pointer[0] - this.prevPointer[0] - (pointer[1] - this.prevPointer[1]);
+    this.distance += delta;
+
+    // Add minimum tolerance to reduce unintentional drags when clicking on input.
+    // if (Math.abs(delta) <= 2) { return; }
+
+    let value =
+      this.onMouseDownValue +
+      ((this.distance / (event.shiftKey ? 5 : 50)) * this.props.step) / 2;
+    value = Math.min(this.props.max, Math.max(this.props.min, value));
+    if (currentValue !== value) {
+      this.setValue(value);
+    }
+    this.prevPointer = [event.clientX, event.clientY];
+  };
+
+  onMouseDown = (event) => {
+    event.preventDefault();
+    this.distance = 0;
+    this.onMouseDownValue = this.state.value;
+    this.prevPointer = [event.clientX, event.clientY];
+    document.addEventListener('mousemove', this.onMouseMove, false);
+    document.addEventListener('mouseup', this.onMouseUp, false);
+  };
+
+  onMouseUp = () => {
+    document.removeEventListener('mousemove', this.onMouseMove, false);
+    document.removeEventListener('mouseup', this.onMouseUp, false);
+
+    if (Math.abs(this.distance) < 2) {
+      this.input.current.focus();
+      this.input.current.select();
+    }
+  };
+
+  setValue(value) {
+    if (value === this.state.value) return;
+
+    if (value !== undefined) {
+      if (this.props.precision === 0) {
+        value = parseInt(value);
+      } else {
+        value = parseFloat(value);
+      }
+
+      // If we inadvertently typed a character in the field, set value to the previous value from props
+      if (isNaN(value)) {
+        value = this.props.value;
+      }
+
+      if (value < this.props.min) {
+        value = this.props.min;
+      }
+      if (value > this.props.max) {
+        value = this.props.max;
+      }
+
+      this.setState({
+        value: value,
+        displayValue: value.toFixed(this.props.precision)
+      });
+
+      if (this.props.onChange) {
+        this.props.onChange(this.props.name, parseFloat(value.toFixed(5)));
+      }
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    // This will be triggered typically when the element is changed directly with
+    // element.setAttribute.
+
+    // We use Object.is instead of === for comparison here so that comparing two NaN doesn't trigger an infinite update.
+    // Object.is(NaN, NaN) is true, NaN === NaN is false
+    if (!Object.is(this.props.value, prevProps.value)) {
+      this.setState({
+        value: this.props.value,
+        displayValue: this.props.value.toFixed(this.props.precision)
+      });
+    }
+  }
+
+  onBlur = () => {
+    this.setValue(parseFloat(this.input.current.value));
+    this.setState({ class: '' });
+  };
+
+  onChange = (e) => {
+    this.setState({ value: e.target.value, displayValue: e.target.value });
+  };
+
+  onKeyDown = (event) => {
+    event.stopPropagation();
+
+    // enter.
+    if (event.keyCode === 13) {
+      this.setValue(parseFloat(this.input.current.value));
+      this.input.current.blur();
+      return;
+    }
+
+    // up.
+    if (event.keyCode === 38) {
+      this.setValue(parseFloat(this.state.value) + 0.01);
+      return;
+    }
+
+    // down.
+    if (event.keyCode === 40) {
+      this.setValue(parseFloat(this.state.value) - 0.01);
+      return;
+    }
+  };
+
+  render() {
+    return (
+      <input
+        ref={this.input}
+        className="number"
+        type="text"
+        value={this.state.displayValue}
+        onKeyDown={this.onKeyDown}
+        onChange={this.onChange}
+        onMouseDown={this.onMouseDown}
+        onFocus={this.onFocus}
+        onBlur={this.onBlur}
+      />
+    );
+  }
+}

package/src/components/widgets/SelectWidget.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Select from 'react-select';
+
+export default class SelectWidget extends React.Component {
+  static propTypes = {
+    componentname: PropTypes.string.isRequired,
+    entity: PropTypes.object,
+    name: PropTypes.string.isRequired,
+    onChange: PropTypes.func,
+    options: PropTypes.array.isRequired,
+    value: PropTypes.string
+  };
+
+  constructor(props) {
+    super(props);
+    const value = this.props.value || '';
+    this.state = { value: { value: value, label: value } };
+  }
+
+  onChange = (value) => {
+    this.setState({ value: value }, () => {
+      if (this.props.onChange) {
+        this.props.onChange(this.props.name, value.value);
+      }
+    });
+  };
+
+  componentDidUpdate(prevProps) {
+    const props = this.props;
+    if (props.value !== prevProps.value) {
+      this.setState({
+        value: { value: props.value, label: props.value }
+      });
+    }
+  }
+
+  render() {
+    const options = this.props.options.map((value) => {
+      return { value: value, label: value };
+    });
+
+    return (
+      <Select
+        className="select-widget"
+        classNamePrefix="select"
+        options={options}
+        simpleValue
+        clearable={true}
+        placeholder=""
+        value={this.state.value}
+        noResultsText="No value found"
+        onChange={this.onChange}
+        searchable={true}
+      />
+    );
+  }
+}

package/src/components/widgets/TextureWidget.js

@@ -0,0 +1,252 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Events from '../../lib/Events';
+
+function getUrlFromId(assetId) {
+  return (
+    assetId.length > 1 &&
+    document.querySelector(assetId) &&
+    document.querySelector(assetId).getAttribute('src')
+  );
+}
+
+function GetFilename(url) {
+  if (url) {
+    var m = url.toString().match(/.*\/(.+?)\./);
+    if (m && m.length > 1) {
+      return m[1];
+    }
+  }
+  return '';
+}
+
+function insertNewAsset(type, id, src) {
+  var element = null;
+  switch (type) {
+    case 'img':
+      {
+        element = document.createElement('img');
+        element.id = id;
+        element.src = src;
+      }
+      break;
+  }
+  if (element) {
+    document.getElementsByTagName('a-assets')[0].appendChild(element);
+  }
+}
+
+function insertOrGetImageAsset(src) {
+  var id = GetFilename(src);
+  // Search for already loaded asset by src
+  var element = document.querySelector("a-assets > img[src='" + src + "']");
+
+  if (element) {
+    id = element.id;
+  } else {
+    // Check if first char of the ID is a number (Non a valid ID)
+    // In that case a 'i' preffix will be added
+    if (!isNaN(parseInt(id[0], 10))) {
+      id = 'i' + id;
+    }
+    if (document.getElementById(id)) {
+      var i = 1;
+      while (document.getElementById(id + '_' + i)) {
+        i++;
+      }
+      id += '_' + i;
+    }
+    insertNewAsset('img', id, src);
+  }
+
+  return id;
+}
+
+export default class TextureWidget extends React.Component {
+  static propTypes = {
+    componentname: PropTypes.string,
+    entity: PropTypes.object,
+    mapName: PropTypes.string,
+    name: PropTypes.string.isRequired,
+    onChange: PropTypes.func,
+    value: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
+  };
+
+  static defaultProps = {
+    value: '',
+    mapName: 'nomap',
+    dataURL: ''
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = { value: this.props.value || '' };
+    this.canvas = React.createRef();
+  }
+
+  componentDidMount() {
+    this.setValue(this.props.value || '');
+  }
+
+  componentDidUpdate(prevProps) {
+    var component = this.props.entity.components[this.props.componentname];
+    if (!component) {
+      return;
+    }
+    // component.attrValue may be undefined if component is from a mixin
+    var newValue = component.attrValue && component.attrValue[this.props.name];
+
+    // This will be triggered typically when the element is changed directly with element.setAttribute
+    // Compare with prevProps.value instead of this.state.value to avoid infinite loops
+    if (newValue && newValue !== prevProps.value) {
+      this.setValue(newValue);
+    }
+  }
+
+  setValue(value) {
+    var canvas = this.canvas.current;
+    var context = canvas.getContext('2d');
+
+    function paintPreviewWithImage(image) {
+      var filename = image.src.replace(/^.*[\\/]/, '');
+      if (image !== undefined && image.width > 0) {
+        canvas.title = filename;
+        var scale = canvas.width / image.width;
+        context.drawImage(
+          image,
+          0,
+          0,
+          image.width * scale,
+          image.height * scale
+        );
+        // self.setState({dataURL: canvas.toDataURL()});
+      } else {
+        context.clearRect(0, 0, canvas.width, canvas.height);
+      }
+    }
+
+    function paintPreview(texture) {
+      var image = texture.image;
+      paintPreviewWithImage(image);
+    }
+
+    function getTextureFromSrc(src) {
+      for (var hash in AFRAME.INSPECTOR.sceneEl.systems.material.textureCache) {
+        // The key in textureCache is not always a json.
+        // For example <a-videosphere src="#video"> gives a "video" key in textureCache.
+        // So we check for '{' before using JSON.parse here.
+        if (hash[0] === '{' && JSON.parse(hash).src === src) {
+          return AFRAME.INSPECTOR.sceneEl.systems.material.textureCache[hash];
+        }
+      }
+      return null;
+    }
+
+    var url;
+    var isAssetHash = value[0] === '#';
+    var isAssetImg = value instanceof HTMLImageElement;
+    var isAssetVideo = value instanceof HTMLVideoElement;
+    var isAssetImgOrVideo = isAssetImg || isAssetVideo;
+
+    if (isAssetImgOrVideo) {
+      url = value.src;
+    } else if (isAssetHash) {
+      url = getUrlFromId(value);
+    } else {
+      url = AFRAME.utils.srcLoader.parseUrl(value);
+    }
+
+    var texture = getTextureFromSrc(value);
+    var valueType = null;
+    valueType = isAssetImgOrVideo || isAssetHash ? 'asset' : 'url';
+    if (!isAssetVideo && texture) {
+      texture.then(paintPreview);
+    } else if (!isAssetVideo && url) {
+      // The image still didn't load
+      var image = new Image();
+      image.addEventListener(
+        'load',
+        () => {
+          paintPreviewWithImage(image);
+        },
+        false
+      );
+      image.src = url;
+    } else {
+      context.clearRect(0, 0, canvas.width, canvas.height);
+    }
+
+    this.setState({
+      value: isAssetImgOrVideo ? '#' + value.id : value,
+      valueType: valueType,
+      url: url
+    });
+  }
+
+  notifyChanged = (value) => {
+    if (this.props.onChange) {
+      this.props.onChange(this.props.name, value);
+    }
+    this.setState({ value: value });
+  };
+
+  onChange = (e) => {
+    var value = e.target.value;
+    this.setState({ value: value });
+    this.notifyChanged(value);
+  };
+
+  removeMap = () => {
+    this.setValue('');
+    this.notifyChanged('');
+  };
+
+  openDialog = () => {
+    Events.emit('opentexturesmodal', this.state.value, (image) => {
+      if (!image) {
+        return;
+      }
+      var value = image.value;
+      if (image.type !== 'asset') {
+        var assetId = insertOrGetImageAsset(image.src);
+        value = '#' + assetId;
+      }
+
+      if (this.props.onChange) {
+        this.props.onChange(this.props.name, value);
+      }
+
+      this.setValue(value);
+    });
+  };
+
+  render() {
+    let hint = '';
+    if (this.state.value) {
+      if (this.state.valueType === 'asset') {
+        hint = 'Asset ID: ' + this.state.value + '\nURL: ' + this.state.url;
+      } else {
+        hint = 'URL: ' + this.state.value;
+      }
+    }
+
+    return (
+      <span className="texture">
+        <input
+          className="map_value string"
+          type="text"
+          title={hint}
+          value={this.state.value}
+          onChange={this.onChange}
+        />
+        <canvas
+          ref={this.canvas}
+          width="32"
+          height="16"
+          title={hint}
+          onClick={this.openDialog}
+        />
+      </span>
+    );
+  }
+}