diff --git a/src/components/App.tsx b/src/components/App.tsx index 8e4ab635..18615e9c 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -4740,9 +4740,13 @@ class App extends React.Component { }); const { x, y } = viewportCoordsToSceneCoords(event, this.state); + + const frame = this.getTopLayerFrameAtSceneCoords({ x, y }); + mutateElement(pendingImageElement, { x, y, + frameId: frame ? frame.id : null, }); } else if (this.state.activeTool.type === "freedraw") { this.handleFreeDrawElementOnPointerDown( @@ -5609,9 +5613,11 @@ class App extends React.Component { private createImageElement = ({ sceneX, sceneY, + addToFrameUnderCursor = true, }: { sceneX: number; sceneY: number; + addToFrameUnderCursor?: boolean; }) => { const [gridX, gridY] = getGridPoint( sceneX, @@ -5621,10 +5627,12 @@ class App extends React.Component { : this.state.gridSize, ); - const topLayerFrame = this.getTopLayerFrameAtSceneCoords({ - x: gridX, - y: gridY, - }); + const topLayerFrame = addToFrameUnderCursor + ? this.getTopLayerFrameAtSceneCoords({ + x: gridX, + y: gridY, + }) + : null; const element = newImageElement({ type: "image", @@ -7554,6 +7562,7 @@ class App extends React.Component { const imageElement = this.createImageElement({ sceneX: x, sceneY: y, + addToFrameUnderCursor: false, }); if (insertOnCanvasDirectly) { diff --git a/src/cursor.ts b/src/cursor.ts index c39c2efc..0d5fd2c3 100644 --- a/src/cursor.ts +++ b/src/cursor.ts @@ -99,7 +99,7 @@ export const setCursorForShape = ( interactiveCanvas.style.cursor = `url(${url}), auto`; } else if (!["image", "custom"].includes(appState.activeTool.type)) { interactiveCanvas.style.cursor = CURSOR_TYPE.CROSSHAIR; - } else { + } else if (appState.activeTool.type !== "image") { interactiveCanvas.style.cursor = CURSOR_TYPE.AUTO; } };