@woosh/meep-engine/editor/view/ecs/components/common/NumberController.js

Pure JavaScript game engine. Fully featured and production ready.

import View from "../../../../../src/view/View.js";
import Vector1 from "../../../../../src/core/geom/Vector1.js";

const DEFAULT_VALUE = 0;

export class NumberController extends View {
    /**
     *
     * @param {string[]} [classList]
     * @param {number} [value]
     * @param figures
     */
    constructor({ classList = [], value = 0, figures = 6 } = {}) {
        super();

        const _value = new Vector1(value);

        /**
         *
         * @type {Vector1}
         */
        this.value = _value;

        const el = document.createElement('input');
        this.el = el;

        this.addClasses(classList);

        el.setAttribute('type', 'text');
        el.setAttribute('spellcheck', false);
        el.setAttribute('size', 2);

        el.classList.add('ui-number-controller');

        let lockForward = false;


        /**
         *
         * @param {number} num_value
         * @return {string}
         */
        function format_value_string(num_value) {

            let str = String(num_value);

            if (Math.abs(num_value) > 0 && Math.abs(num_value % 1).toString().length > (figures + 2)) {
                const long_form = num_value.toFixed(figures);

                const separator_index = long_form.indexOf('.');

                if (separator_index !== -1) {
                    // has a decimal fraction, remove trailing zeroes
                    let i = long_form.length - 1;

                    while (i > 0 && long_form.charAt(i) === "0") {
                        i--;
                    }

                    if (long_form.charAt(i) === '.') {
                        i--;
                    }

                    str = long_form.slice(0, i + 1);
                } else {
                    str = long_form;
                }
            }

            return str;
        }

        function data2view() {

            if (lockForward) {
                return;
            }

            const num_value = _value.getValue();

            el.value = format_value_string(num_value);

        }

        function view2data() {
            lockForward = true;

            const value = parseFloat(el.value);

            if (Number.isNaN(value)) {
                _value.set(DEFAULT_VALUE);
            } else {
                _value.set(value);
            }

            lockForward = false;
        }

        /**
         * Input field stops being edited
         */
        function handle_blur() {
            // reformat contents of the input field
            el.value = format_value_string(_value.getValue());
        }

        _value.process(data2view);

        el.addEventListener('input', view2data);
        el.addEventListener('blur', handle_blur);
    }
}