From 9954e5f3c2d3818cf7e115193f2f2394d1acbd08 Mon Sep 17 00:00:00 2001 From: Ryan Di Date: Tue, 22 Oct 2024 17:16:19 +0800 Subject: [PATCH] use crop hash in svg export to fix multi instance crop error --- packages/excalidraw/renderer/staticSvgScene.ts | 5 +++-- .../excalidraw/tests/__snapshots__/export.test.tsx.snap | 4 ++-- packages/excalidraw/tests/cropElement.test.tsx | 6 +++--- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/excalidraw/renderer/staticSvgScene.ts b/packages/excalidraw/renderer/staticSvgScene.ts index f4781c0ce..676f11e6b 100644 --- a/packages/excalidraw/renderer/staticSvgScene.ts +++ b/packages/excalidraw/renderer/staticSvgScene.ts @@ -7,7 +7,7 @@ import { SVG_NS, } from "../constants"; import { normalizeLink, toValidURL } from "../data/url"; -import { getElementAbsoluteCoords } from "../element"; +import { getElementAbsoluteCoords, hashString } from "../element"; import { createPlaceholderEmbeddableLabel, getEmbedLink, @@ -411,7 +411,8 @@ const renderElementToSvg = ( const fileData = isInitializedImageElement(element) && files[element.fileId]; if (fileData) { - const symbolId = `image-${fileData.id}`; + const cropHash = hashString(JSON.stringify(element.crop)); + const symbolId = `image-${fileData.id}-${cropHash}`; let symbol = svgRoot.querySelector(`#${symbolId}`); if (!symbol) { symbol = svgRoot.ownerDocument!.createElementNS(SVG_NS, "symbol"); diff --git a/packages/excalidraw/tests/__snapshots__/export.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/export.test.tsx.snap index fd4f902b2..ebc2821c6 100644 --- a/packages/excalidraw/tests/__snapshots__/export.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/export.test.tsx.snap @@ -1,7 +1,7 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`export > exporting svg containing transformed images > svg export output 1`] = ` -" +" @@ -10,5 +10,5 @@ exports[`export > exporting svg containing transformed images > svg export outpu - " + " `; diff --git a/packages/excalidraw/tests/cropElement.test.tsx b/packages/excalidraw/tests/cropElement.test.tsx index f2cb297f2..8a10432b0 100644 --- a/packages/excalidraw/tests/cropElement.test.tsx +++ b/packages/excalidraw/tests/cropElement.test.tsx @@ -186,14 +186,14 @@ describe("Crop an image", () => { // 50 x 50 square UI.crop(image, "nw", naturalWidth, naturalHeight, [150, 50]); UI.crop(image, "n", naturalWidth, naturalHeight, [0, -100], true); - expect(image.width).toEqual(image.height); + expect(image.width).toBeCloseTo(image.height); // image is at the corner, not space to its right to expand, should not be able to resize expect(image.height).toBeCloseTo(50); UI.crop(image, "nw", naturalWidth, naturalHeight, [-150, -100], true); - expect(image.width).toEqual(image.height); + expect(image.width).toBeCloseTo(image.height); // max height should be reached - expect(image.height).toEqual(initialHeight); + expect(image.height).toBeCloseTo(initialHeight); expect(image.width).toBe(initialHeight); }); });