Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 7e84a931e1 | |||
| 3b6de119b3 |
@@ -872,6 +872,19 @@ export const shouldApplyFrameClip = (
|
||||
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
|
||||
// "in" the frame, we should clip the element
|
||||
if (
|
||||
|
||||
@@ -2,6 +2,7 @@ import {
|
||||
convertToExcalidrawElements,
|
||||
Excalidraw,
|
||||
} from "@excalidraw/excalidraw";
|
||||
import { arrayToMap } from "@excalidraw/common";
|
||||
|
||||
import { API } from "@excalidraw/excalidraw/tests/helpers/api";
|
||||
import { Keyboard, Pointer } from "@excalidraw/excalidraw/tests/helpers/ui";
|
||||
@@ -10,6 +11,8 @@ import {
|
||||
render,
|
||||
} from "@excalidraw/excalidraw/tests/test-utils";
|
||||
|
||||
import { shouldApplyFrameClip } from "../src/frame";
|
||||
|
||||
import type { ExcalidrawElement } from "../src/types";
|
||||
|
||||
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