Fixed a problem with clicking transformed rects in card wrappers.

This commit is contained in:
Uwe Oestermeier 2020-08-27 07:38:35 +02:00
parent 4211548b8b
commit 116058ba77
2 changed files with 42 additions and 20 deletions

View File

@ -54,7 +54,7 @@ export default class CardWrapper extends Object {
isClickable(node) { isClickable(node) {
if (node == null) return false if (node == null) return false
// console.log("isClickable", node, this.isClickPrevented(node)) // console.log("isClickable", node, this.isClickPrevented(node))
if (this.isClickPrevented(node)) { if (this.isClickPrevented(node)) {
return false return false
} }
@ -101,16 +101,24 @@ export default class CardWrapper extends Object {
let clickRects = activeNodes.map(link => { let clickRects = activeNodes.map(link => {
let rect = link.getBoundingClientRect() 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 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, { 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 { return {
x: topLeft.x, x: topLeft.x,
y: topLeft.y, y: topLeft.y,
width: rect.width, width,
height: rect.height, height,
center, center,
link link
} }

View File

@ -184,7 +184,7 @@ export class Dates {
return new Date(date.getTime() + 1) return new Date(date.getTime() + 1)
} }
static *iterYears(start, end) { static * iterYears(start, end) {
let date = this.create(start.getFullYear(), 0, 1) let date = this.create(start.getFullYear(), 0, 1)
while (date <= end) { while (date <= end) {
yield date yield date
@ -193,7 +193,7 @@ export class Dates {
yield date yield date
} }
static *iterMonths(year, limit = 12) { static * iterMonths(year, limit = 12) {
let month = 0 let month = 0
while (month < limit) { while (month < limit) {
let date = this.create(year.getFullYear(), month, 1) 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 year of years) {
for (let month of this.iterMonths(year)) { for (let month of this.iterMonths(year)) {
yield month yield month
@ -210,7 +210,7 @@ export class Dates {
} }
} }
static *iterDays(month) { static * iterDays(month) {
let day = 1 let day = 1
let limit = Dates.daysInMonth(month) let limit = Dates.daysInMonth(month)
while (day <= limit) { while (day <= limit) {
@ -220,7 +220,7 @@ export class Dates {
} }
} }
static *iterDaysOfMonths(months) { static * iterDaysOfMonths(months) {
for (let month of months) { for (let month of months) {
for (let day of this.iterDays(month)) { for (let day of this.iterDays(month)) {
yield day yield day
@ -396,9 +396,22 @@ export class Points {
// Distance == 0.0 indicates an inside relation. // Distance == 0.0 indicates an inside relation.
static distanceToRect(p, r) { 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) { 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 i = sets.reduce((m, s, i) => (s.size < sets[m].size ? i : m), 0)
const [smallest] = sets.splice(i, 1) const [smallest] = sets.splice(i, 1)
const res = new Set() 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 return res
} }
@ -987,11 +1001,11 @@ export class LowPassFilter {
next(nextValue) { next(nextValue) {
// push new value to the end, and remove oldest one // push new value to the end, and remove oldest one
let removed = this.__push(nextValue) 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) => { 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 this.buffer[this.buffer.length - 1] = result
return result return result
} }