diff options
author | Kristóf Marussy <kristof@marussy.com> | 2024-04-27 23:47:56 +0200 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2024-04-27 23:49:15 +0200 |
commit | c934d31d002cb07b8436cf256f088af3a1e4885b (patch) | |
tree | 8325d9d0155b84fe8bf9674d07276738ba0f9a64 /subprojects/frontend/src/graph/ZoomCanvas.tsx | |
parent | refactor(frontend): fix icon placement in Safari (diff) | |
download | refinery-c934d31d002cb07b8436cf256f088af3a1e4885b.tar.gz refinery-c934d31d002cb07b8436cf256f088af3a1e4885b.tar.zst refinery-c934d31d002cb07b8436cf256f088af3a1e4885b.zip |
refactor(frontend): crisper zoom in WebKitGTK
Use the non-standard zoom: property whenever available,
because it gives a crisper result than transform: scale() in WebKitGTK.
See https://developer.mozilla.org/en-US/docs/Web/CSS/zoom
Diffstat (limited to 'subprojects/frontend/src/graph/ZoomCanvas.tsx')
-rw-r--r-- | subprojects/frontend/src/graph/ZoomCanvas.tsx | 29 |
1 files changed, 22 insertions, 7 deletions
diff --git a/subprojects/frontend/src/graph/ZoomCanvas.tsx b/subprojects/frontend/src/graph/ZoomCanvas.tsx index 0254bc59..8f4f1776 100644 --- a/subprojects/frontend/src/graph/ZoomCanvas.tsx +++ b/subprojects/frontend/src/graph/ZoomCanvas.tsx | |||
@@ -40,6 +40,8 @@ export type FitZoomCallback = ((newSize?: { | |||
40 | }) => void) & | 40 | }) => void) & |
41 | ((newSize: boolean) => void); | 41 | ((newSize: boolean) => void); |
42 | 42 | ||
43 | const useZoom = 'zoom' in document.body.style; | ||
44 | |||
43 | export default function ZoomCanvas({ | 45 | export default function ZoomCanvas({ |
44 | children, | 46 | children, |
45 | fitPadding, | 47 | fitPadding, |
@@ -83,8 +85,12 @@ export default function ZoomCanvas({ | |||
83 | if (newSize === undefined || typeof newSize === 'boolean') { | 85 | if (newSize === undefined || typeof newSize === 'boolean') { |
84 | const elementRect = elementRef.current.getBoundingClientRect(); | 86 | const elementRect = elementRef.current.getBoundingClientRect(); |
85 | const currentFactor = d3.zoomTransform(canvasRef.current).k; | 87 | const currentFactor = d3.zoomTransform(canvasRef.current).k; |
86 | width = elementRect.width / currentFactor; | 88 | if (useZoom) { |
87 | height = elementRect.height / currentFactor; | 89 | ({ width, height } = elementRect); |
90 | } else { | ||
91 | width = elementRect.width / currentFactor; | ||
92 | height = elementRect.height / currentFactor; | ||
93 | } | ||
88 | } else { | 94 | } else { |
89 | ({ width, height } = newSize); | 95 | ({ width, height } = newSize); |
90 | } | 96 | } |
@@ -194,11 +200,20 @@ export default function ZoomCanvas({ | |||
194 | position: 'absolute', | 200 | position: 'absolute', |
195 | top: '50%', | 201 | top: '50%', |
196 | left: '50%', | 202 | left: '50%', |
197 | transform: ` | 203 | ...(useZoom |
198 | translate(${zoom.x}px, ${zoom.y}px) | 204 | ? { |
199 | scale(${zoom.k}) | 205 | transform: ` |
200 | translate(-50%, -50%) | 206 | translate(calc(${zoom.x / zoom.k}px - 50%), calc(${zoom.y / zoom.k}px - 50%)) |
201 | `, | 207 | `, |
208 | zoom: zoom.k, | ||
209 | } | ||
210 | : { | ||
211 | transform: ` | ||
212 | translate(${zoom.x}px, ${zoom.y}px) | ||
213 | scale(${zoom.k}) | ||
214 | translate(-50%, -50%) | ||
215 | `, | ||
216 | }), | ||
202 | transformOrigin: '0 0', | 217 | transformOrigin: '0 0', |
203 | }} | 218 | }} |
204 | ref={elementRef} | 219 | ref={elementRef} |