Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 7e84a931e1 | |||
| 3b6de119b3 |
@@ -872,6 +872,19 @@ export const shouldApplyFrameClip = (
|
|||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Elements that belong to a frame should still render through that frame's
|
||||||
|
// clip, even when fully outside the frame bounds (e.g. generated content).
|
||||||
|
if (
|
||||||
|
!appState.selectedElementsAreBeingDragged &&
|
||||||
|
element.frameId === frame.id
|
||||||
|
) {
|
||||||
|
for (const groupId of element.groupIds) {
|
||||||
|
checkedGroups?.set(groupId, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
// if an element is outside the frame, but is part of a group that has some elements
|
// if an element is outside the frame, but is part of a group that has some elements
|
||||||
// "in" the frame, we should clip the element
|
// "in" the frame, we should clip the element
|
||||||
if (
|
if (
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ import {
|
|||||||
convertToExcalidrawElements,
|
convertToExcalidrawElements,
|
||||||
Excalidraw,
|
Excalidraw,
|
||||||
} from "@excalidraw/excalidraw";
|
} from "@excalidraw/excalidraw";
|
||||||
|
import { arrayToMap } from "@excalidraw/common";
|
||||||
|
|
||||||
import { API } from "@excalidraw/excalidraw/tests/helpers/api";
|
import { API } from "@excalidraw/excalidraw/tests/helpers/api";
|
||||||
import { Keyboard, Pointer } from "@excalidraw/excalidraw/tests/helpers/ui";
|
import { Keyboard, Pointer } from "@excalidraw/excalidraw/tests/helpers/ui";
|
||||||
@@ -10,6 +11,8 @@ import {
|
|||||||
render,
|
render,
|
||||||
} from "@excalidraw/excalidraw/tests/test-utils";
|
} from "@excalidraw/excalidraw/tests/test-utils";
|
||||||
|
|
||||||
|
import { shouldApplyFrameClip } from "../src/frame";
|
||||||
|
|
||||||
import type { ExcalidrawElement } from "../src/types";
|
import type { ExcalidrawElement } from "../src/types";
|
||||||
|
|
||||||
const { h } = window;
|
const { h } = window;
|
||||||
@@ -561,3 +564,78 @@ describe("adding elements to frames", () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe("frame clipping", () => {
|
||||||
|
const getAppStateForFrameClip = () =>
|
||||||
|
({
|
||||||
|
frameRendering: {
|
||||||
|
enabled: true,
|
||||||
|
clip: true,
|
||||||
|
},
|
||||||
|
selectedElementsAreBeingDragged: false,
|
||||||
|
selectedElementIds: {},
|
||||||
|
frameToHighlight: null,
|
||||||
|
editingGroupId: null,
|
||||||
|
} as any);
|
||||||
|
|
||||||
|
it("clips a frame child even when fully outside the frame bounds", () => {
|
||||||
|
const frame = API.createElement({
|
||||||
|
type: "frame",
|
||||||
|
id: "frame",
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
});
|
||||||
|
const outsideChild = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
id: "outside-child",
|
||||||
|
x: 250,
|
||||||
|
y: 250,
|
||||||
|
width: 50,
|
||||||
|
height: 50,
|
||||||
|
frameId: frame.id,
|
||||||
|
});
|
||||||
|
|
||||||
|
const elementsMap = arrayToMap([outsideChild, frame]);
|
||||||
|
|
||||||
|
expect(
|
||||||
|
shouldApplyFrameClip(
|
||||||
|
outsideChild,
|
||||||
|
frame,
|
||||||
|
getAppStateForFrameClip(),
|
||||||
|
elementsMap,
|
||||||
|
),
|
||||||
|
).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("does not clip an outside element that does not belong to the frame", () => {
|
||||||
|
const frame = API.createElement({
|
||||||
|
type: "frame",
|
||||||
|
id: "frame",
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
});
|
||||||
|
const outsideElement = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
id: "outside",
|
||||||
|
x: 250,
|
||||||
|
y: 250,
|
||||||
|
width: 50,
|
||||||
|
height: 50,
|
||||||
|
});
|
||||||
|
|
||||||
|
const elementsMap = arrayToMap([outsideElement, frame]);
|
||||||
|
|
||||||
|
expect(
|
||||||
|
shouldApplyFrameClip(
|
||||||
|
outsideElement,
|
||||||
|
frame,
|
||||||
|
getAppStateForFrameClip(),
|
||||||
|
elementsMap,
|
||||||
|
),
|
||||||
|
).toBe(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user