neiam /diogramos

diogramos

Keep the embed fit across LiveView patches

8823810 · Gabriel Morell · 2026-10-13 14:47

5 files +12 -6

Message

{commit_body(@commit)}

modified lib/diogramos_web/live/canvas_live/embed.ex

+12 −6

@@ -267,7 +267,9 @@ defmodule DiogramosWeb.CanvasLive.Embed do

267	267	</marker>
268	268	</defs>
269	269
270		− <g id="embed-viewport">
	270	+ <%!-- The hook owns this transform; keep LiveView patches from
	271	+ stripping it, since the server never renders one. --%>
	272	+ <g id="embed-viewport" phx-mounted={JS.ignore_attributes(["transform"])}>
271	273	<%!-- The fit measures only this group, so cursors drawn alongside
272	274	it in the same coordinate space never move the camera. --%>
273	275	<g id="embed-content">

@@ -404,7 +406,8 @@ defmodule DiogramosWeb.CanvasLive.Embed do

404	406	if (bbox.width === 0 \|\| bbox.height === 0) return
405	407	const rect = this.el.getBoundingClientRect()
406	408	const key = [bbox.x, bbox.y, bbox.width, bbox.height, rect.width, rect.height].join(",")
407		− if (!force && key === this.lastFitKey) return
	409	+ // Unchanged fit: just make sure the transform is still on.
	410	+ if (!force && key === this.lastFitKey) return this.applyTransform()
408	411	this.lastFitKey = key
409	412	const margin = 24
410	413	const sx = (rect.width - margin * 2) / bbox.width

@@ -414,11 +417,14 @@ defmodule DiogramosWeb.CanvasLive.Embed do

414	417	this.scale = this.el.dataset.fit === "frame" ? fill : Math.min(1, fill)
415	418	this.tx = -bbox.x * this.scale + (rect.width - bbox.width * this.scale) / 2
416	419	this.ty = -bbox.y * this.scale + (rect.height - bbox.height * this.scale) / 2
417		− this.viewport.setAttribute(
418		− "transform",
419		− `translate(${this.tx} ${this.ty}) scale(${this.scale})`
420		− )
	420	+ this.applyTransform()
421	421	} catch (_) {}
	422	+ },
	423	+ applyTransform() {
	424	+ const transform = `translate(${this.tx} ${this.ty}) scale(${this.scale})`
	425	+ if (this.viewport.getAttribute("transform") !== transform) {
	426	+ this.viewport.setAttribute("transform", transform)
	427	+ }
422	428	}
423	429	}
424	430	</script>

Parents: 0b76ad1