problems with numberinput

[sandor]

I am using this angular code to set/change my canvas size:

    $scope.width = null;
    $scope.height = null;
    $scope.setNumeric = function (width, height) {
        console.log("test");
         canvas.setWidth(width);
    canvas.setHeight(height);
    canvas.calcOffset();
    };

Using regular inputs like this is working fine:

<form>     
    <input type="text" name="name" ng-model="width" />
    <input type="text" name="name2" ng-model="height" />
    <button ng-click="setNumeric(width, height)"></button>
</form>

Using your numberinput like this is not working. The function gets fired (according to log) but my canvas is not resizing. This happens with or without putting this code inside of a form tag:

    <div class="col-4">
        <x-numberinput class="small" skin="condensed" ng-value="canvas.getWidth()"  suffix=" px" ng-model="width">
            <x-stepper></x-stepper>
        </x-numberinput>
    </div>
    <div class="col-1">
    </div>
    <div class="col-4">
        <x-numberinput class="small" skin="condensed" ng-value="canvas.getHeight()"  suffix=" px" ng-model="height" >
            <x-stepper></x-stepper>
        </x-numberinput>
    </div>

    <div class="col-3"></div>
    <div class="col-4 centered_sm">Width</div>
    <div class="col-1"></div>
    <div class="col-4 centered_sm">Height</div>

    <div class="col-3"></div>
    <div class="col-9">
        <x-button skin="textured" style="width:197px;" type='submit' ng-click="setNumeric(width, height)">
            <x-box>
                <x-label>Apply</x-label>
            </x-box>
        </x-button>
    </div>

[jarek-foksa]

I'm sorry, but I don't really know what Angular is doing under the hood that is causing this bug to occur. I can fix it if you can reproduce it with plain DOM or someone else who knows Angular figures it out.

[sandor]

Had a lot of testing and searching today on this – really no luck. The numberinput is returning for me null as value... Using x-input is working (but not so cool looking):

    <div class="col-4">
        <x-input type="number" class="small" skin="condensed" ng-value="canvas.getWidth()"  suffix=" px" ng-model="width">
        </x-input>
    </div>
    <div class="col-1">
    </div>
    <div class="col-4">
        <x-input type="number" class="small" skin="condensed" ng-value="canvas.getHeight()"  suffix=" px" ng-model="height" >
        </x-input>
    </div>

    <div class="col-3"></div>
    <div class="col-4 centered_sm">Width</div>
    <div class="col-1"></div>
    <div class="col-4 centered_sm">Height</div>

    <div class="col-3"></div>
    <div class="col-9">
        <x-button skin="textured" style="width:197px;" ng-click="setNumeric(width, height)">
            <x-box>
                <x-label>Apply</x-label>
            </x-box>
        </x-button>
    </div>

But what exactly do you mean with reproducing in plain DOM? Just manipulate some DIV elements with the angular function instead of farbric.js? Would really love to use XEL with angular...

[sandor]

Forgot to mention: "ng-value" and "ng-click" is working fine. The problem seems to be on "ng-model" – dokumented here (SHOULD even work with custom form controls):

https://docs.angularjs.org/api/ng/directive/ngModel

[jarek-foksa]

But what exactly do you mean with reproducing in plain DOM? Just manipulate some DIV elements with the angular function instead of farbric.js? Would really love to use XEL with angular...

I mean a minimalistic demo that demonstrates the bug and does not rely on any frameworks as I have no experience with Angular and I don't understand what the code above really does.

[jarek-foksa]

Forgot to mention: "ng-value" and "ng-click" is working fine. The problem seems to be on "ng-model" – dokumented here (SHOULD even work with custom form controls): https://docs.angularjs.org/api/ng/directive/ngModel

Are you sure that by "custom form control" the documentation means any custom elements like x-numberinput rather than some Angular-specific stuff?

It's strange that it works with x-input but not with x-numberinput as they have very similar API and implementation.

[jarek-foksa]

One major difference between x-input vs x-numberinput is that the latter does not dispatch input events. Perhaps Angular relies on those events being dispatched somehow?

[sandor]

One major difference between x-input vs x-numberinput is that the latter does not dispatch input events. Perhaps Angular relies on those events being dispatched somehow?

This could be indeed the problem. Do you have a chance/time to change this (if it is possible to change) so that I could give this a try? My coding knowledge is simply not sufficient for such a task...

But Angular and Electron are really good friends, so the deserve a great UI :-)

BTW: would be great to have XEL on CDN so, that we could build some codepen starters for testing code. I was trying to setup a starter via gist and also with a deploy of xel on one of my servers but unfortunately this is not working.

Regarding minimalistic example: it is an Angular to XEL related problem, so making something without angular woul not make a sense :-)

[jarek-foksa]

I will add the "input" event if someone can confirm this is indeed the root cause of the bug.

Linking Xel from CDN or anywhere else other than ./node_modules/xel/ is not going to work because of how I'm currently resolving relative URLs. This might change once I migrate the code away from HTML imports to ES6 modules after Chrome 61 becomes stable.

[sandor]

Wait a second: what is the output of the x-numberinput? Are you also transmitting the prefix and suffix - so is it an array? Or just the number?

[jarek-foksa]

What do you mean specifically by output? The <x-numberiput> "value" property should have a number value in case of DOM property and a numeric string value in case of an attribute, it should not contain the prefix or suffix.

[sandor]

I am simply stuck on this...

<x-input name="name1" ng-value="canvas.getWidth()" ng-model="width"> </x-input>

is working fine - console is showing the defined value

<input name="name2" ng-value="canvas.getWidth()" ng-model="width" />

is working fine - console is showing the defined value

`

    </x-numberinput>`

is simply not working - console is showing "null"

The only thing that I see in my console when I enter some values in the x-numberinput is:

xel.min.html:6993 We don't execute document.execCommand() this time, because it is called recursively.

Any idea? Would really love to stick with Xel, but I need numberinputs... Would that be so hard to dispatch the input events on the x-numberinput (sorry for ignorance here)...?

[jarek-foksa]

xel.min.html:6993 We don't execute document.execCommand() this time, because it is called recursively.

Are you still getting this error with Xel version 0.0.52?

[sandor]

can I update to 0.0.52 via npm somehow?

[jarek-foksa]

Yes, version 0.0.52 has been released on NPM. You could install it e.g. by running npm install xel@0.0.52 in your project root directory.

[sandor]

OK, Cool! I see now also "xel.min.js" in my directory. Is this something new (undocumented)?

[sandor]

Anyhow,

xel.min.html:6993 We don't execute document.execCommand() this time, because it is called recursively.

is gone now but my function still not working...

[jarek-foksa]

xel.min.js contains the same compiled scripts as xel.min.html, I have provided it because Chrome Platform apps can't use xel.min.html due to content security policy restrictions.

I didn't bother documenting it because both files will be gone in a month or two anyway (I'm planning to switch to ES6 modules as soon as they are supported in stable Chrome and Electron releases).

[jarek-foksa]

Apparently We don't execute document.execCommand() this time, because it is called recursively warning was unrelated to the original bug you have reported.

I'm currently busy working on another project, I'm planning to resume work on Xel and take deeper look at all reported bugs in September.

[jarek-foksa]

Xel project underwent a major rewrite recently and it is now using ES6 modules. If you can still reproduce this bug, please report it on https://xel-toolkit.org/issues.