@glissade/backend-dom 0.21.0-pre.2 → 0.21.0-pre.4

package/README.md

@@ -44,6 +44,14 @@ function frame(t) {
 }
 ```
 
+> **A node may stamp `data-node-id` on more than one element.** Identity is
+> stamped per emitted command, so a node's transform wrapper *and* its content
+> element (the `<svg>`/text `<div>`) both carry the id. Use `el.closest('[data-node-id]')`
+> for hit-testing (the editing contract — it resolves to the nearest tagged
+> element regardless); if you build a node→element MAP, `querySelectorAll('[data-node-id="x"]')`
+> returns more than one element per node, so dedupe by id (or key off the outer
+> wrapper).
+
 Then the DOM is your **interaction surface** while the scene graph stays the single
 source of truth — read identity, mutate the scene, never write the DOM back:
 

package/dist/index.js

@@ -265,8 +265,8 @@ var DomBackend = class {
 					const o = this.#matchOrCreate(cursor, key, "fillText", () => {
 						const div = doc.createElement("div");
 						div.style.position = "absolute";
-						div.style.transform = "translateY(-0.8em)";
 						div.style.whiteSpace = "pre";
+						div.style.lineHeight = "1";
 						return {
 							op: "fillText",
 							el: div,
@@ -276,11 +276,15 @@ var DomBackend = class {
 					const div = o.el;
 					this.#setStyle(o, div, "left", `${cmd.x}px`);
 					this.#setStyle(o, div, "top", `${cmd.y}px`);
-					this.#setStyle(o, div, "font", fontString(cmd.font));
+					const ax = cmd.align === "center" ? "-50%" : cmd.align === "right" ? "-100%" : "0px";
+					this.#setStyle(o, div, "transform", `translate(${ax}, -0.84em)`);
+					this.#setStyle(o, div, "fontFamily", cmd.font.family);
+					this.#setStyle(o, div, "fontSize", `${cmd.font.size}px`);
+					this.#setStyle(o, div, "fontWeight", cmd.font.weight !== void 0 ? String(cmd.font.weight) : void 0);
+					this.#setStyle(o, div, "fontStyle", cmd.font.style !== void 0 ? cmd.font.style : void 0);
 					this.#setStyle(o, div, "fontVariationSettings", cmd.font.fontVariationSettings !== void 0 ? cmd.font.fontVariationSettings : void 0);
 					this.#setStyle(o, div, "color", this.#solid(cmd.paint));
 					this.#setAttr(div, o, "dataApprox", "data-approx", cmd.paint.kind !== "color" ? "true" : void 0);
-					this.#setStyle(o, div, "textAlign", cmd.align !== void 0 ? cmd.align : void 0);
 					this.#setText(div, o, cmd.text);
 					this.#stamp(o, div, id);
 					break;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glissade/backend-dom",
-  "version": "0.21.0-pre.2",
+  "version": "0.21.0-pre.4",
   "description": "glissade DOM render backend: DisplayList -> HTML/SVG elements. A preview / non-parity realtime tier (accessibility, selectable text, CSS-native embedding) — NOT a Skia-export twin.",
   "license": "Apache-2.0",
   "engines": {
@@ -18,8 +18,8 @@
     "dist"
   ],
   "dependencies": {
-    "@glissade/core": "0.21.0-pre.2",
-    "@glissade/scene": "0.21.0-pre.2"
+    "@glissade/core": "0.21.0-pre.4",
+    "@glissade/scene": "0.21.0-pre.4"
   },
   "repository": {
     "type": "git",