When adding images with the Images tool, they are not positioned on a grid

code/CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- [#1051](https://github.com/InditexTech/weavejs/issues/1051) When adding images with the Images tool, they are not positioned on a grid
 - [#1053](https://github.com/InditexTech/weavejs/issues/1053) Avoid OOM by cleaning up documents using Yjs destroy API
 
 ## [3.8.2] - 2026-05-11

code/packages/sdk/src/actions/image-tool/image-tool.ts

@@ -106,11 +106,9 @@ export class WeaveImageToolAction extends WeaveAction {
       if (dragProperties && dragId === WEAVE_IMAGE_TOOL_ACTION_NAME) {
         this.instance.getStage().setPointersPositions(e);
 
-        const position: Konva.Vector2d | null | undefined = this.instance
-          .getStage()
-          .getRelativePointerPosition();
+        const { mousePoint, container } = this.instance.getMousePointer();
 
-        if (!position) {
+        if (!mousePoint) {
           return;
         }
 
@@ -126,7 +124,8 @@ export class WeaveImageToolAction extends WeaveAction {
           ...(dragProperties.forceMainContainer && {
             forceMainContainer: dragProperties.forceMainContainer,
           }),
-          position,
+          container: container as Konva.Layer | Konva.Group | undefined,
+          position: mousePoint,
         });
       }
     });
@@ -409,7 +408,8 @@ export class WeaveImageToolAction extends WeaveAction {
       const { mousePoint, container } = this.instance.getMousePointer(position);
 
       this.imageAction[nodeId].clickPoint = mousePoint;
-      this.imageAction[nodeId].container = container;
+      this.imageAction[nodeId].container =
+        this.imageAction[nodeId].container ?? container;
 
       const nodeHandler = this.instance.getNodeHandler<WeaveImageNode>('image');
 
@@ -530,9 +530,9 @@ export class WeaveImageToolAction extends WeaveAction {
       props: this.initProps(),
       imageId: nodeId,
       clickPoint: null,
-      container: undefined,
       imageFile: null,
       imageURL: null,
+      container: params?.container,
       forceMainContainer: params?.forceMainContainer ?? false,
       uploadType: null,
       uploadImageFunction: null,

code/packages/sdk/src/actions/image-tool/types.ts

@@ -34,6 +34,7 @@ export type WeaveImageToolActionTriggerCommonParams = {
   imageId?: string;
   options?: ImageOptions;
   position?: Konva.Vector2d;
+  container?: Konva.Layer | Konva.Group;
   forceMainContainer?: boolean;
 };
 

code/packages/sdk/src/actions/images-tool/images-tool.ts

@@ -117,11 +117,10 @@ export class WeaveImagesToolAction extends WeaveAction {
 
       if (dragProperties && dragId === WEAVE_IMAGES_TOOL_ACTION_NAME) {
         this.instance.getStage().setPointersPositions(e);
-        const position: Konva.Vector2d | null | undefined = this.instance
-          .getStage()
-          .getRelativePointerPosition();
 
-        if (!position) {
+        const { mousePoint, container } = this.instance.getMousePointer();
+
+        if (!mousePoint) {
           return;
         }
 
@@ -130,7 +129,8 @@ export class WeaveImagesToolAction extends WeaveAction {
           {
             type: WEAVE_IMAGES_TOOL_UPLOAD_TYPE.IMAGE_URL,
             images: dragProperties.imagesURL,
-            position,
+            container: container as Konva.Layer | Konva.Group | undefined,
+            position: mousePoint,
             ...(dragProperties.forceMainContainer && {
               forceMainContainer: dragProperties.forceMainContainer,
             }),
@@ -377,7 +377,7 @@ export class WeaveImagesToolAction extends WeaveAction {
     const { mousePoint, container } = this.instance.getMousePointer(position);
 
     this.clickPoint = mousePoint;
-    this.container = container as Konva.Layer | Konva.Group;
+    this.container = this.container ?? (container as Konva.Layer | Konva.Group);
 
     const originPoint = {
       x: this.clickPoint?.x ?? 0,
@@ -485,10 +485,8 @@ export class WeaveImagesToolAction extends WeaveAction {
               },
               uploadImageFunction: uploadImageFunctionInternal,
               ...(imageId && { imageId }),
-              position: {
-                x: position.x,
-                y: position.y,
-              },
+              position,
+              container: this.container,
               forceMainContainer: this.forceMainContainer,
               nodeId,
             },
@@ -543,10 +541,8 @@ export class WeaveImagesToolAction extends WeaveAction {
               },
               ...(imageId && { imageId }),
               ...(options && { options }),
-              position: {
-                x: position.x,
-                y: position.y,
-              },
+              position,
+              container: this.container,
               forceMainContainer: this.forceMainContainer,
               nodeId,
             },
@@ -606,6 +602,10 @@ export class WeaveImagesToolAction extends WeaveAction {
       this.setState(WEAVE_IMAGES_TOOL_STATE.SELECTED_POSITION);
     }
 
+    if (params?.container) {
+      this.container = params.container;
+    }
+
     this.nodesIds = [];
     this.forceMainContainer = params.forceMainContainer ?? false;
 

code/packages/sdk/src/actions/images-tool/types.ts

@@ -31,6 +31,7 @@ export type ImageInfo = {
 
 export type WeaveImagesToolActionTriggerCommonParams = {
   position?: Vector2d;
+  container?: Konva.Layer | Konva.Group;
   forceMainContainer?: boolean;
 };
 

code/packages/sdk/src/actions/video-tool/types.ts

@@ -19,6 +19,7 @@ export type WeaveVideoToolDragParams = {
 export type WeaveVideoToolActionTriggerParams = {
   videoId?: string;
   videoParams?: WeaveVideoToolDragParams;
+  container?: Konva.Layer | Konva.Group;
   position?: Konva.Vector2d;
   forceMainContainer?: boolean;
 };

code/packages/sdk/src/actions/video-tool/video-tool.ts

@@ -81,14 +81,18 @@ export class WeaveVideoToolAction extends WeaveAction {
 
       if (dragProperties && dragId === VIDEO_TOOL_ACTION_NAME) {
         this.instance.getStage().setPointersPositions(e);
-        const position: Konva.Vector2d | null | undefined = this.instance
-          .getStage()
-          .getRelativePointerPosition();
+
+        const { mousePoint, container } = this.instance.getMousePointer();
+
+        if (!mousePoint) {
+          return;
+        }
 
         this.instance.triggerAction(VIDEO_TOOL_ACTION_NAME, {
           videoId: dragProperties.videoId,
           videoParams: dragProperties.videoParams,
-          position,
+          container: container as Konva.Layer | Konva.Group | undefined,
+          position: mousePoint,
         });
       }
     });
@@ -181,7 +185,7 @@ export class WeaveVideoToolAction extends WeaveAction {
       const { mousePoint, container } = this.instance.getMousePointer(position);
 
       this.clickPoint = mousePoint;
-      this.container = container;
+      this.container = this.container ?? container;
 
       const nodeHandler = this.instance.getNodeHandler<WeaveVideoNode>('video');
 
@@ -238,6 +242,7 @@ export class WeaveVideoToolAction extends WeaveAction {
       selectionPlugin.setSelectedNodes([]);
     }
 
+    this.container = params?.container;
     this.forceMainContainer = params?.forceMainContainer ?? false;
 
     if (params?.videoId) {

code/packages/sdk/src/managers/targeting.ts

@@ -199,19 +199,25 @@ export class WeaveTargetingManager {
       relativeMousePointer
     );
 
-    if (!containerAlt) {
-      containerAlt = this.instance.getMainLayer();
-    }
-
     const nodesSelection =
       this.instance.getPlugin<WeaveNodesSelectionPlugin>('nodesSelection');
 
     if (nodesSelection) {
       nodesSelection.getTransformer().visible(false);
     }
 
-    relativeMousePointer =
-      containerAlt?.getRelativePointerPosition() ?? relativeMousePointer;
+    if (containerAlt && point === undefined) {
+      relativeMousePointer =
+        containerAlt.getRelativePointerPosition() ?? relativeMousePointer;
+    }
+
+    if (!containerAlt && point === undefined) {
+      containerAlt = this.instance.getMainLayer();
+      relativeMousePointer = containerAlt?.getRelativePointerPosition() ?? {
+        x: 0,
+        y: 0,
+      };
+    }
 
     if (utilityLayer) {
       utilityLayer.visible(true);

docs/content/docs/main/changelog/3.x/3.8.3.mdx

@@ -1,6 +1,6 @@
 ---
 title: v3.8.3
-description: Fix OOM on server side, now we correctly cleanup the Yjs document
+description: Fix images tool positioning as grid and OOM on server side, now we correctly cleanup the Yjs document
 ---
 
 ## Metadata
@@ -9,4 +9,5 @@ description: Fix OOM on server side, now we correctly cleanup the Yjs document
 
 ### Fixed
 
-- [#1042](https://github.com/InditexTech/weavejs/issues/1042) Undo does not work correctly after cropping an image with Ctrl+drag corner
+- [#1051](https://github.com/InditexTech/weavejs/issues/1051) When adding images with the Images tool, they are not positioned on a grid
+- [#1053](https://github.com/InditexTech/weavejs/issues/1053) Avoid OOM by cleaning up documents using Yjs destroy API