feat: text box has a default size, can be worked with properly: issues still remain like it cannot be resized, dragged,also the editor on right is a bad idea

Author: TeeWrath

lib/features/models/canvas_models/objects/text_box_object.dart

@@ -1,9 +1,7 @@
-// import 'dart:nativewrappers/_internal/vm/lib/math_patch.dart';
+// lib/features/models/canvas_models/objects/text_box_object.dart
 
 import 'dart:math';
-
 import 'package:cookethflow/features/models/canvas_models/canvas_object.dart';
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:uuid/uuid.dart';
 
@@ -21,22 +19,29 @@ class TextBoxObject extends CanvasObject {
     super.textDelta,
   });
 
-  TextBoxObject.fromJson(Map<String, dynamic> json)
-    : topLeft = Offset(json['top_left']['x'], json['top_left']['y']),
-      bottomRight = Offset(
+  factory TextBoxObject.fromJson(Map<String, dynamic> json) {
+    return TextBoxObject(
+      id: json['id'],
+      color: Color(json['color']),
+      topLeft: Offset(json['top_left']['x'], json['top_left']['y']),
+      bottomRight: Offset(
         json['bottom_right']['x'],
         json['bottom_right']['y'],
       ),
-      super(
-        id: json['id'],
-        color: json['color'],
-        textDelta: json['text_delta'],
-      );
+      textDelta: json['text_delta'],
+    );
+  }
 
-  TextBoxObject.createNew(Offset defaultTopLeft, Offset defaultBottomRight)
-    : topLeft = defaultTopLeft,
-      bottomRight = defaultBottomRight,
-      super(id: Uuid().v4(), color: Colors.transparent, textDelta: null);
+  factory TextBoxObject.createNew(
+      Offset defaultTopLeft, Offset defaultBottomRight) {
+    return TextBoxObject(
+      id: const Uuid().v4(),
+      color: Colors.transparent,
+      topLeft: defaultTopLeft,
+      bottomRight: defaultBottomRight,
+      textDelta: null,
+    );
+  }
 
   @override
   Map<String, dynamic> toJson() {
@@ -61,7 +66,8 @@ class TextBoxObject extends CanvasObject {
       id: id,
       color: color ?? this.color,
       topLeft: topLeft ?? this.topLeft,
-      bottomRight: bottomRight ?? this.topLeft,
+      // FIX: Corrected a bug where it referenced topLeft instead of bottomRight
+      bottomRight: bottomRight ?? this.bottomRight,
       textDelta: textDelta ?? this.textDelta,
     );
   }
@@ -88,10 +94,11 @@ class TextBoxObject extends CanvasObject {
       min(newTopLeft.dx, newBottomRight.dx),
       min(newTopLeft.dy, newBottomRight.dy),
     );
-    final corrextedBottomRight = Offset(
+    final correctedBottomRight = Offset(
       max(newTopLeft.dx, newBottomRight.dx),
       max(newTopLeft.dy, newBottomRight.dy),
     );
-    return copyWith(topLeft: correctedTopLeft, bottomRight: corrextedBottomRight);
+    return copyWith(
+        topLeft: correctedTopLeft, bottomRight: correctedBottomRight);
   }
-}
+}

lib/features/workspace/providers/workspace_provider.dart

@@ -491,16 +491,17 @@ class WorkspaceProvider extends StateHandler {
           defaultBottomRight,
         );
         break;
-      case DrawMode.textBox: // NEW: Handle TextBox creation
+      // CHANGE: Updated text box creation logic
+      case DrawMode.textBox:
         final textBoxTopLeft = details.globalPosition;
+        // Create a box with a default size instead of a single point
         final textBoxBottomRight = Offset(
           details.globalPosition.dx + _defaultTextBoxWidth,
           details.globalPosition.dy + _defaultTextBoxHeight,
         );
         newObject = TextBoxObject.createNew(textBoxTopLeft, textBoxBottomRight);
-        // NEW: Automatically set some default text for new text boxes
-        _tempQuillController.document =
-            Document()..insert(0, 'Double-click to edit text');
+        // Set initial dummy text
+        _tempQuillController.document = Document()..insert(0, 'Click to edit');
         newObject = (newObject as TextBoxObject).copyWith(
           textDelta: jsonEncode(
             _tempQuillController.document.toDelta().toJson(),
@@ -739,4 +740,4 @@ class WorkspaceProvider extends StateHandler {
       return a == b;
     }
   }
-}
+}

lib/features/workspace/widgets/object_text_editor.dart

@@ -30,10 +30,9 @@ class _ObjectTextEditorState extends State<ObjectTextEditor> {
     return Consumer2<WorkspaceProvider, CanvasProvider>(
       builder: (context, workspaceProvider, canvasProvider, child) {
         final selectedObjectId = workspaceProvider.currentlySelectedObjectId;
-        final selectedObject =
-            selectedObjectId != null
-                ? workspaceProvider.canvasObjects[selectedObjectId]
-                : null;
+        final selectedObject = selectedObjectId != null
+            ? workspaceProvider.canvasObjects[selectedObjectId]
+            : null;
 
         if (workspaceProvider.interactionMode != InteractionMode.editingText ||
             selectedObject == null) {
@@ -47,14 +46,11 @@ class _ObjectTextEditorState extends State<ObjectTextEditor> {
         });
 
         final Rect objectBounds = selectedObject.getBounds();
-        final Matrix4 transform = canvasProvider.transformationController.value;
+        final Matrix4 transform =
+            canvasProvider.transformationController.value;
         final vc.Vector3 transformedTopLeft = transform.transform3(
           vc.Vector3(objectBounds.topLeft.dx, objectBounds.topLeft.dy, 0),
         );
-        final Offset screenTopLeft = Offset(
-          transformedTopLeft.x,
-          transformedTopLeft.y,
-        );
         final vc.Vector3 transformedBottomRight = transform.transform3(
           vc.Vector3(
             objectBounds.bottomRight.dx,
@@ -63,23 +59,24 @@ class _ObjectTextEditorState extends State<ObjectTextEditor> {
           ),
         );
         final visibleRect = Rect.fromPoints(
-          screenTopLeft,
+          Offset(transformedTopLeft.x, transformedTopLeft.y),
           Offset(transformedBottomRight.x, transformedBottomRight.y),
         );
 
-        final quillController = workspaceProvider.selectedObjectQuillController;
+        final quillController =
+            workspaceProvider.selectedObjectQuillController;
 
-        return Positioned(
-          left: visibleRect.left,
-          // Position the entire widget (toolbar + editor) at the object's location
-          top: visibleRect.top,
-          child: Material(
-            color: Colors.transparent,
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Container(
-                  width: visibleRect.width < 350.w ? 350.w : visibleRect.width,
+        // RESTRUCTURE: Use a Stack to position the toolbar and editor independently.
+        return Stack(
+          children: [
+            // 1. The Quill Toolbar, positioned to the right of the text object.
+            Positioned(
+              left: visibleRect.right + 10.w, // Place it right of the object
+              top: visibleRect.top,
+              child: Material(
+                color: Colors.transparent,
+                child: Container(
+                  // The toolbar will size itself, but you can add constraints if needed
                   decoration: BoxDecoration(
                     color: Colors.white,
                     borderRadius: BorderRadius.circular(8.r),
@@ -111,18 +108,24 @@ class _ObjectTextEditorState extends State<ObjectTextEditor> {
                     ),
                   ),
                 ),
-                SizedBox(height: 4.h), // Spacing between toolbar and editor
-                // FIX: Add a visible container for the editor
-                Container(
-                  width: visibleRect.width,
-                  height: visibleRect.height,
+              ),
+            ),
+
+            // 2. The Quill Editor, positioned directly over the text object.
+            Positioned(
+              left: visibleRect.left,
+              top: visibleRect.top,
+              width: visibleRect.width,
+              height: visibleRect.height,
+              child: Material(
+                color: Colors.transparent,
+                child: Container(
                   decoration: BoxDecoration(
-                    color: Colors.white, // Make the editor background white
+                    color: Colors.white,
                     border: Border.all(
-                      color: Colors.blue.shade300,
-                      width: 1.5,
-                    ), // Add a border
-                    borderRadius: BorderRadius.circular(4.r),
+                      color: Colors.blue.shade400, // Brighter border
+                      width: 2.0, // Thicker border to indicate editing
+                    ),
                   ),
                   child: QuillEditor.basic(
                     controller: quillController,
@@ -139,17 +142,17 @@ class _ObjectTextEditorState extends State<ObjectTextEditor> {
                           null,
                         ),
                       ),
-                      placeholder: 'Type here...',
+                      placeholder: 'Type something...',
                     ),
                     focusNode: _focusNode,
                     scrollController: ScrollController(),
                   ),
                 ),
-              ],
+              ),
             ),
-          ),
+          ],
         );
       },
     );
   }
-}
+}