Create the shapes centered on the canvas

Co-authored-by: Michael Chung <michaelchung@michaels-mbp-2.home>

frontend/apps/editor2d/src/KonvaApp/Api.ts

@@ -280,10 +280,12 @@ export class Api extends ApiManager {
   }
 
   public async enqueueImageGeneration({
+    disableSystemPrompt,
     prompt,
     snapshotMediaToken,
     additionalImages,
   }: {
+    disableSystemPrompt: boolean;
     prompt: string;
     snapshotMediaToken: string;
     additionalImages?: string[];
@@ -293,6 +295,7 @@ export class Api extends ApiManager {
     const uuidIdempotencyToken = crypto.randomUUID(); // Generate a new UUID
     const body = {
       uuid_idempotency_token: uuidIdempotencyToken,
+      disable_system_prompt: disableSystemPrompt,
       prompt,
       snapshot_media_token: snapshotMediaToken, // Changed from scene_media_token to snapshot_media_token
       additional_images: additionalImages,
@@ -301,6 +304,7 @@ export class Api extends ApiManager {
     const postResponse = await this.post<
       {
         uuid_idempotency_token: string;
+        disable_system_prompt: boolean;
         prompt: string;
         snapshot_media_token: string;
         additional_images?: string[];

frontend/apps/editor2d/src/KonvaApp/Nodes/ShapeNode.ts

@@ -56,11 +56,8 @@ export class ShapeNode extends NetworkedNode {
     switch (shapeType) {
       case ShapeType.CIRCLE:
         shape = new Konva.Ellipse({
-          x: size.width,
-          y: size.height,
-          radiusX: size.width,
-          radiusY: size.height,
-          ...transform,
+          radiusX: size.width / 2,
+          radiusY: size.height / 2,
           fill: color,
           strokeScaleEnabled: false,
           draggable: true,
@@ -80,8 +77,6 @@ export class ShapeNode extends NetworkedNode {
 
       case ShapeType.TRIANGLE:
         shape = new Konva.Shape({
-          x: 0,
-          y: 0,
           width: size.width,
           height: size.height,
           ...transform,
@@ -113,12 +108,20 @@ export class ShapeNode extends NetworkedNode {
     this.size = size;
     this.color = color;
 
-    // Add shape to group
+    // Center the shape
     const centerPosition = NodeUtilities.positionNodeOnCanvasCenter({
       canvasOffset: canvasPosition,
-      componentSize: canvasSize,
+      componentSize: this.size,
       maxSize: canvasSize,
     });
+
+    // If the shape is an ellipse, the center is the origin so we need to offset it
+    if (shapeType === ShapeType.CIRCLE) {
+      centerPosition.x += size.width / 2;
+      centerPosition.y += size.height / 2;
+    }
+
+    // Add shape to group
     // bring to the front
     this.kNode.moveToTop();
     this.kNode.setPosition(centerPosition);

frontend/apps/editor2d/src/components/PromptBox.tsx

@@ -236,10 +236,10 @@ export const PromptBox = () => {
           );
           return;
         }
-
+        console.log("useSystemPrompt", useSystemPrompt);
         console.log("Snapshot media token:", snapshotMediaToken.data);
-
         const response = await api.enqueueImageGeneration({
+          disableSystemPrompt: !useSystemPrompt,
           prompt: prompt,
           snapshotMediaToken: snapshotMediaToken.data,
           additionalImages: referenceImages.map((image) => image.mediaToken),

frontend/apps/editor3d/app/Classes/ApiManager/EngineApi.ts

@@ -87,19 +87,22 @@ export class EngineApi extends ApiManager {
   }
 
   public async enqueueImageGeneration({
+    disableSystemPrompt,
     prompt,
     snapshotMediaToken,
     additionalImages,
   }: {
+    disableSystemPrompt: boolean;
     prompt: string;
     snapshotMediaToken: string;
     additionalImages?: string[];
   }): Promise<ApiResponse<string>> {
     const endpoint = `${this.ApiTargets.BaseApi}/v1/image_studio/prompt`;
-    // for now ...
+    
     const uuidIdempotencyToken = crypto.randomUUID(); // Generate a new UUID
     const body = {
       uuid_idempotency_token: uuidIdempotencyToken,
+      disable_system_prompt: disableSystemPrompt,
       prompt,
       snapshot_media_token: snapshotMediaToken, // Changed from scene_media_token to snapshot_media_token
       additional_images: additionalImages,
@@ -108,6 +111,7 @@ export class EngineApi extends ApiManager {
     const postResponse = await this.post<
       {
         uuid_idempotency_token: string;
+        disable_system_prompt: boolean;
         prompt: string;
         snapshot_media_token: string;
         additional_images?: string[];

frontend/apps/editor3d/app/pages/PageEnigma/comps/PromptBox/PromptBox.tsx

@@ -430,8 +430,10 @@ export const PromptBox = () => {
           screenshot: snapshot.file,
           sceneMediaToken: "",
         });
-
+        
+        console.log("useSystemPrompt", useSystemPrompt);
         await engineApi.enqueueImageGeneration({
+          disableSystemPrompt: !useSystemPrompt,
           prompt: prompt,
           snapshotMediaToken: snapshotResult.data || "",
           additionalImages: referenceImages.map((image) => image.mediaToken),