use crop hash in svg export to fix multi instance crop error

This commit is contained in:
Ryan Di 2024-10-22 17:16:19 +08:00
parent 0cc70d07c7
commit 9954e5f3c2
3 changed files with 8 additions and 7 deletions

View File

@ -7,7 +7,7 @@ import {
SVG_NS, SVG_NS,
} from "../constants"; } from "../constants";
import { normalizeLink, toValidURL } from "../data/url"; import { normalizeLink, toValidURL } from "../data/url";
import { getElementAbsoluteCoords } from "../element"; import { getElementAbsoluteCoords, hashString } from "../element";
import { import {
createPlaceholderEmbeddableLabel, createPlaceholderEmbeddableLabel,
getEmbedLink, getEmbedLink,
@ -411,7 +411,8 @@ const renderElementToSvg = (
const fileData = const fileData =
isInitializedImageElement(element) && files[element.fileId]; isInitializedImageElement(element) && files[element.fileId];
if (fileData) { 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}`); let symbol = svgRoot.querySelector(`#${symbolId}`);
if (!symbol) { if (!symbol) {
symbol = svgRoot.ownerDocument!.createElementNS(SVG_NS, "symbol"); symbol = svgRoot.ownerDocument!.createElementNS(SVG_NS, "symbol");

File diff suppressed because one or more lines are too long

View File

@ -186,14 +186,14 @@ describe("Crop an image", () => {
// 50 x 50 square // 50 x 50 square
UI.crop(image, "nw", naturalWidth, naturalHeight, [150, 50]); UI.crop(image, "nw", naturalWidth, naturalHeight, [150, 50]);
UI.crop(image, "n", naturalWidth, naturalHeight, [0, -100], true); 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 // image is at the corner, not space to its right to expand, should not be able to resize
expect(image.height).toBeCloseTo(50); expect(image.height).toBeCloseTo(50);
UI.crop(image, "nw", naturalWidth, naturalHeight, [-150, -100], true); 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 // max height should be reached
expect(image.height).toEqual(initialHeight); expect(image.height).toBeCloseTo(initialHeight);
expect(image.width).toBe(initialHeight); expect(image.width).toBe(initialHeight);
}); });
}); });