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 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

@ -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 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) 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) { 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
} }