Fixed a problem with clicking transformed rects in card wrappers.

lib/card/wrapper.js

@@ -54,7 +54,7 @@ export default class CardWrapper extends Object {
 
     isClickable(node) {
         if (node == null) return false
-        //  console.log("isClickable", node, this.isClickPrevented(node))
+            //  console.log("isClickable", node, this.isClickPrevented(node))
         if (this.isClickPrevented(node)) {
             return false
         }
@@ -101,16 +101,24 @@ export default class CardWrapper extends Object {
 
         let clickRects = activeNodes.map(link => {
             let rect = link.getBoundingClientRect()
+                // Since the getBoundingClientRect is untransformed we cannot rely on it's size
+                // We need a transformed bottom right to calculate local width and height
+            let bottomRight = Points.fromPageToNode(element, {
+                x: rect.x + rect.width,
+                y: rect.y + rect.height
+            })
             let topLeft = Points.fromPageToNode(element, rect)
+            let width = Math.abs(bottomRight.x - topLeft.x)
+            let height = Math.abs(bottomRight.y - topLeft.y)
             let center = Points.fromPageToNode(element, {
-                x: rect.x + rect.width / 2,
+                x: rect.x + width / 2,
-                y: rect.y + rect.height / 2
+                y: rect.y + height / 2
             })
             return {
                 x: topLeft.x,
                 y: topLeft.y,
-                width: rect.width,
+                width,
-                height: rect.height,
+                height,
                 center,
                 link
             }

lib/utils.js

@@ -184,7 +184,7 @@ export class Dates {
         return new Date(date.getTime() + 1)
     }
 
-    static *iterYears(start, end) {
+    static * iterYears(start, end) {
         let date = this.create(start.getFullYear(), 0, 1)
         while (date <= end) {
             yield date
@@ -193,7 +193,7 @@ export class Dates {
         yield date
     }
 
-    static *iterMonths(year, limit = 12) {
+    static * iterMonths(year, limit = 12) {
         let month = 0
         while (month < limit) {
             let date = this.create(year.getFullYear(), month, 1)
@@ -202,7 +202,7 @@ export class Dates {
         }
     }
 
-    static *iterMonthsOfYears(years) {
+    static * iterMonthsOfYears(years) {
         for (let year of years) {
             for (let month of this.iterMonths(year)) {
                 yield month
@@ -210,7 +210,7 @@ export class Dates {
         }
     }
 
-    static *iterDays(month) {
+    static * iterDays(month) {
         let day = 1
         let limit = Dates.daysInMonth(month)
         while (day <= limit) {
@@ -220,7 +220,7 @@ export class Dates {
         }
     }
 
-    static *iterDaysOfMonths(months) {
+    static * iterDaysOfMonths(months) {
         for (let month of months) {
             for (let day of this.iterDays(month)) {
                 yield day
@@ -396,9 +396,22 @@ export class Points {
 
     // Distance == 0.0 indicates an inside relation.
     static distanceToRect(p, r) {
-        let cx = Math.max(Math.min(p.x, r.x + r.width), r.x)
+        let dx = 0
-        let cy = Math.max(Math.min(p.y, r.y + r.height), r.y)
+        let dy = 0
-        return Math.sqrt((p.x - cx) * (p.x - cx) + (p.y - cy) * (p.y - cy))
+        if (p.x < r.x)
+            dx = p.x - r.x
+        else if (p.x > r.x + r.width)
+            dx = p.x - (r.x + r.width)
+        if (p.y < r.y)
+            dy = p.y - r.y
+        else if (p.y > r.y + r.height)
+            dy = p.y - (r.y + r.height)
+        return Math.sqrt(dx * dx + dy * dy)
+            /* let cx = Math.max(Math.min(p.x, r.x + r.width), r.x)
+            let cy = Math.max(Math.min(p.y, r.y + r.height), r.y)
+            let result = Math.sqrt((p.x - cx) * (p.x - cx) + (p.y - cy) * (p.y - cy))
+            console.log("distanceToRect", p, r, result)
+            return result */
     }
 
     static fromPageToNode(element, p) {
@@ -438,7 +451,8 @@ export class Sets {
         const i = sets.reduce((m, s, i) => (s.size < sets[m].size ? i : m), 0)
         const [smallest] = sets.splice(i, 1)
         const res = new Set()
-        for (let val of smallest) if (sets.every(s => s.has(val))) res.add(val)
+        for (let val of smallest)
+            if (sets.every(s => s.has(val))) res.add(val)
         return res
     }
 
@@ -987,11 +1001,11 @@ export class LowPassFilter {
     next(nextValue) {
         // push new value to the end, and remove oldest one
         let removed = this.__push(nextValue)
-        // smooth value using all values from buffer
+            // smooth value using all values from buffer
         let result = this.buffer.reduce((last, current) => {
-            return this.smoothing * current + (1 - this.smoothing) * last
+                return this.smoothing * current + (1 - this.smoothing) * last
-        }, removed)
+            }, removed)
-        // replace smoothed value
+            // replace smoothed value
         this.buffer[this.buffer.length - 1] = result
         return result
     }