text alignment

src/pages/editor/components/tools/TextShape.tsx

@@ -87,10 +87,18 @@ const TextShape = ({
       const { width: rw, height: rh } = textNode.getClientRect({
         skipTransform: true,
       });
-      const w = Math.ceil(rw);
+      const measuredWidth = Math.ceil(rw);
       const h = Math.ceil(rh);
-      if (w > 0 && h > 0 && (w !== obj.width || h !== obj.height)) {
-        onUpdate(obj.id, { width: w, height: h });
+      const nextWidth = obj.width && obj.width > 0 ? obj.width : measuredWidth;
+
+      // For text alignment to be visible, keep an existing text box width
+      // and only auto-calc width when the object has no width yet.
+      if (
+        nextWidth > 0 &&
+        h > 0 &&
+        (nextWidth !== obj.width || h !== obj.height)
+      ) {
+        onUpdate(obj.id, { width: nextWidth, height: h });
       }
       textNode.getLayer()?.batchDraw();
     };
@@ -156,6 +164,7 @@ const TextShape = ({
   const fontFamily = useMemo(() => getFontFamily(obj.fontFamily), [obj.fontFamily]);
   const konvaFontStyle = useMemo(() => getKonvaFontStyle(obj.fontWeight), [obj.fontWeight]);
   const fillColor = useMemo(() => getColorWithOpacity(obj.fill, obj.opacity), [obj.fill, obj.opacity]);
+  const textAlign = obj.textAlign ?? "right";
 
   const handleDblClick = () => {
     if (!shapeRef.current || !groupRef.current) return;
@@ -203,7 +212,7 @@ const TextShape = ({
       color: obj.fill || "#000000",
       letterSpacing: `${(obj.letterSpacing || 0) * stageScale}px`,
       lineHeight: textNode.lineHeight().toString(),
-      textAlign: "right",
+      textAlign,
       direction: "rtl",
       padding: "0",
       margin: "0",
@@ -306,7 +315,7 @@ const TextShape = ({
     >
       <Text
         ref={shapeRef}
-        x={0}
+        x={-(obj.width || 0)}
         y={0}
         text={obj.text || ""}
         fontSize={obj.fontSize || 24}
@@ -315,7 +324,8 @@ const TextShape = ({
         fontStyle={konvaFontStyle}
         letterSpacing={obj.letterSpacing ?? 0}
         lineHeight={obj.lineHeight ?? 1.2}
-        align="right"
+        width={obj.width || undefined}
+        align={textAlign}
       />
     </Group>
   );