From 487b1beb8503e6ac5dee1505bc5fd7cae972971e Mon Sep 17 00:00:00 2001 From: Steve Ruiz Date: Tue, 18 Jun 2024 11:46:55 +0100 Subject: [PATCH] Fix asset positions (#3965) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR fixes the positions of assets created when multiple assets are created at once. ### Change Type - [x] `sdk` — Changes the tldraw SDK - [x] `bugfix` — Bug fix ### Test Plan 1. Drop / paste multiple images on the canvas. 2. The shapes should be top aligned and positioned next to eachother. ### Release Notes - Fixes the position of multiple assets when pasted / dropped onto the canvas. --- .../src/lib/defaultExternalContentHandlers.ts | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/tldraw/src/lib/defaultExternalContentHandlers.ts b/packages/tldraw/src/lib/defaultExternalContentHandlers.ts index 75d2c29e3..8e9efef54 100644 --- a/packages/tldraw/src/lib/defaultExternalContentHandlers.ts +++ b/packages/tldraw/src/lib/defaultExternalContentHandlers.ts @@ -450,14 +450,15 @@ export async function createShapesForAssets( const currentPoint = Vec.From(position) const partials: TLShapePartial[] = [] - for (const asset of assets) { + for (let i = 0; i < assets.length; i++) { + const asset = assets[i] switch (asset.type) { case 'bookmark': { partials.push({ id: createShapeId(), type: 'bookmark', - x: currentPoint.x - 150, - y: currentPoint.y - 160, + x: currentPoint.x, + y: currentPoint.y, opacity: 1, props: { assetId: asset.id, @@ -465,15 +466,15 @@ export async function createShapesForAssets( }, }) - currentPoint.x += 300 + currentPoint.x += 300 // BOOKMARK_WIDTH break } case 'image': { partials.push({ id: createShapeId(), type: 'image', - x: currentPoint.x - asset.props.w / 2, - y: currentPoint.y - asset.props.h / 2, + x: currentPoint.x, + y: currentPoint.y, opacity: 1, props: { assetId: asset.id, @@ -489,8 +490,8 @@ export async function createShapesForAssets( partials.push({ id: createShapeId(), type: 'video', - x: currentPoint.x - asset.props.w / 2, - y: currentPoint.y - asset.props.h / 2, + x: currentPoint.x, + y: currentPoint.y, opacity: 1, props: { assetId: asset.id,