feat: improves textbox sizing

src/components/TransformControlsManager/NodeTransformControls.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useNode } from 'src/hooks/useNode';
+import { TransformControls } from './TransformControls';
+
+interface Props {
+  id: string;
+}
+
+export const NodeTransformControls = ({ id }: Props) => {
+  const node = useNode(id);
+
+  return <TransformControls from={node.position} to={node.position} />;
+};

src/components/TransformControlsManager/TransformControlsManager.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useUiStateStore } from 'src/stores/uiStateStore';
 import { RectangleTransformControls } from './RectangleTransformControls';
 import { TextBoxTransformControls } from './TextBoxTransformControls';
+import { NodeTransformControls } from './NodeTransformControls';
 
 export const TransformControlsManager = () => {
   const itemControls = useUiStateStore((state) => {
@@ -9,6 +10,8 @@ export const TransformControlsManager = () => {
   });
 
   switch (itemControls?.type) {
+    case 'NODE':
+      return <NodeTransformControls id={itemControls.id} />;
     case 'RECTANGLE':
       return <RectangleTransformControls id={itemControls.id} />;
     case 'TEXTBOX':

src/stores/sceneStore.tsx

@@ -151,7 +151,7 @@ const initialState = () => {
               id
             );
 
-            if (updates.text || updates.fontSize) {
+            if (updates.text !== undefined || updates.fontSize !== undefined) {
               draftState.textBoxes[index].size = {
                 width: getTextWidth(updates.text ?? textBox.text, {
                   fontSize: updates.fontSize ?? textBox.fontSize,

src/utils/renderer.ts

@@ -503,6 +503,8 @@ interface FontProps {
 }
 
 export const getTextWidth = (text: string, fontProps: FontProps) => {
+  if (!text) return 0;
+
   const paddingX = TEXTBOX_DEFAULTS.paddingX * UNPROJECTED_TILE_SIZE;
   const fontSizePx = toPx(fontProps.fontSize * UNPROJECTED_TILE_SIZE);
   const canvas: HTMLCanvasElement = document.createElement('canvas');
@@ -517,7 +519,7 @@ export const getTextWidth = (text: string, fontProps: FontProps) => {
 
   canvas.remove();
 
-  return Math.ceil((metrics.width + paddingX * 2) / UNPROJECTED_TILE_SIZE);
+  return (metrics.width + paddingX * 2) / UNPROJECTED_TILE_SIZE - 0.8;
 };
 
 export const outermostCornerPositions = [