@graph-knowledge/api 0.1.6 → 0.1.7

package/README.md

@@ -191,8 +191,20 @@ await api.elements.create(documentId, nodeId, {
     text: "Hello World",
     fontSize: 24,
     fontFamily: "Arial",
-    fillColor: "#000000",
-    textAlign: "center"
+    fillColor: "#000000"
+});
+
+// Create centered text within a container width
+// When you specify a width larger than the text, textAlign controls
+// positioning within that container (like CSS text-align)
+await api.elements.create(documentId, nodeId, {
+    type: "text",
+    x: 100,
+    y: 150,
+    width: 400,  // Container width
+    text: "Centered within 400px",
+    fontSize: 20,
+    textAlign: "center"  // "left" | "center" | "right"
 });
 
 // Create multi-line text (use \n for line breaks)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graph-knowledge/api",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Headless Document API for Graph Knowledge - programmatic access to documents, nodes, and elements",
   "license": "MIT",
   "author": "Graph Knowledge Team",

package/src/lib/operations/element-operations.js

@@ -173,6 +173,21 @@ class ElementOperations {
                 props[key] = value;
             }
         }
+        // For text elements with an explicitly specified width, set __usesTopLeft: true
+        // so the app's normalization knows that x/y is the bounding box top-left
+        // (not the text anchor point). Without this, the app would incorrectly adjust
+        // x/y based on textAlign, causing centered text to be positioned in negative
+        // coordinates.
+        //
+        // However, when width is omitted, a default width is applied elsewhere. In that
+        // case we DO NOT set __usesTopLeft, so the text plugin can treat the element as
+        // auto-sized text instead of preserving the default container width.
+        if (input.type === "text") {
+            const hasExplicitWidth = Object.prototype.hasOwnProperty.call(input, "width");
+            if (hasExplicitWidth) {
+                props["__usesTopLeft"] = true;
+            }
+        }
         return props;
     }
 }