aframe-input/lib/a-input-text.mjs

Using input element in AFRAME!

import { SIDES } from "./constants.mjs";
var POSITION_Z = 0.0025;
AFRAME.registerComponent('input-text', {
  schema: {
    value: {
      type: 'string',
      "default": ''
    },
    color: {
      type: 'color',
      "default": '#000'
    },
    font: {
      type: 'string',
      "default": ''
    },
    align: {
      type: 'string',
      "default": 'left'
    },
    positionX: {
      type: 'number',
      "default": 0
    }
  },

  /** @private */
  side: {
    front: document.createElement('a-troika-text'),
    back: document.createElement('a-troika-text')
  },

  /** @private */
  width: 0,

  /** @private */
  height: 0,
  init: function init() {
    var _this = this;

    SIDES.forEach(function (side) {
      return _this.initSide(side);
    });
  },

  /** @private */
  initSide: function initSide(side) {
    this.side[side].setAttribute('side', side);
    this.side[side].setAttribute('font', this.data.font);
    this.side[side].setAttribute('position', {
      x: 0,
      y: 0,
      z: side === 'front' ? POSITION_Z : -POSITION_Z
    });
    this.side[side].setAttribute('anchor', this.data.align);
    this.el.appendChild(this.side[side]);
  },
  tick: function tick() {
    // @ts-ignore
    var _this$side$front$obje = this.side.front.object3DMap.mesh.geometry.boundingBox.max,
        x = _this$side$front$obje.x,
        y = _this$side$front$obje.y;
    this.width = x;
    this.height = y;
  },
  update: function update({
    value: value,
    color: color,
    font: font,
    align: align,
    positionX: positionX
  }) {
    if (color !== this.data.color) {
      this.updateColor();
    }

    if (value !== this.data.value) {
      this.updateValue();
    }

    if (font !== this.data.font) {
      this.updateFont();
    }

    if (align !== this.data.align) {
      this.updateAlign();
    }

    if (positionX !== this.data.positionX) {
      this.updatePositionX();
    }
  },

  /** @private */
  updateValue: function updateValue() {
    var _this2 = this;

    SIDES.forEach(function (side) {
      return _this2.side[side].setAttribute('value', _this2.data.value);
    });
  },

  /** @private */
  updateColor: function updateColor() {
    var _this3 = this;

    SIDES.forEach(function (side) {
      return _this3.side[side].setAttribute('color', _this3.data.color);
    });
  },

  /** @private */
  updateFont: function updateFont() {
    var _this4 = this;

    SIDES.forEach(function (side) {
      return _this4.side[side].setAttribute('font', _this4.data.font);
    });
  },

  /** @private */
  updateAlign: function updateAlign() {
    var _this5 = this;

    SIDES.forEach(function (side) {
      return _this5.side[side].setAttribute('anchor', _this5.data.align);
    });
  },

  /** @private */
  updatePositionX: function updatePositionX() {
    var _this6 = this;

    SIDES.forEach(function (side) {
      return _this6.side[side].setAttribute('position', 'x', _this6.data.positionX);
    });
  }
});
AFRAME.registerPrimitive('a-input-text', {
  defaultComponents: {
    'input-text': {}
  },
  mappings: {
    value: 'input-text.value',
    color: 'input-text.color',
    font: 'input-text.font',
    align: 'input-text.align',
    'position-x': 'input-text.positionX'
  }
});
export default {};