[Bug]: Imprecise floating point operations when zooming paperscroller

This issue has been tracked since 2022-10-28.

What happened?

I found out that applying zoom operations with decimals will result in imprecise zoom level.

console.log(paper.zoom());
1
paper.zoom(+0.1);
console.log(paper.zoom());
1.1
paper.zoom(+0.1);
console.log(paper.zoom());
1.200000000000002

This might be triggering an unnecessarily complex / costly cpu operations (pure speculation, I haven't actually done my homework and I haven't run actual benchmarks), but since the fix is very simple I thought I'd report it.

Proposed fix:

PaperScroller.mjs

    zoom: function(value, opt = {}) {

        ...

        if (!opt.absolute) {
-          sx += this._sx;
-          sy += this._sy;
+          sx = parseFloat((this._sx + sx).toFixed(12), 10)
+          sy = parseFloat((this._sy + sy).toFixed(12), 10)

       ...

Version

3.6.1

What browsers are you seeing the problem on?

No response

What operating system are you seeing the problem on?

No response

kumilingus wrote this answer on 2022-11-11

We don't need benchmarking to change that. At the very least, it'll make DOM look nicer 😄

<g
  joint-selector="layers"
  class="joint-layers"
  transform="matrix(1.2000000000000002,0,0,1.2000000000000002,0,0)">
</g>

Note that parseFloat accepts a single parameter (not the same as its counterpart parseInt).

More Details About Repo
Owner Name clientIO
Repo Name joint
Full Name clientIO/joint
Language JavaScript
Created Date 2009-09-11
Updated Date 2022-12-06
Star Count 3717
Watcher Count 155
Fork Count 817
Issue Count 53

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date