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

@ -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,
y: rect.y + rect.height / 2
x: rect.x + width / 2,
y: rect.y + height / 2
})
return {
x: topLeft.x,
y: topLeft.y,
width: rect.width,
height: rect.height,
width,
height,
center,
link
}

View File

@ -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 dy = 0
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)
return Math.sqrt((p.x - cx) * (p.x - cx) + (p.y - cy) * (p.y - cy))
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
}