Compare commits

..

1 Commits

Author SHA1 Message Date
Mark Tolmacs c7a829e22b fix: Arrow z-index whenunder bound element
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
2026-02-16 13:13:13 +00:00
15 changed files with 330 additions and 528 deletions
+1
View File
@@ -43,6 +43,7 @@ export const alignElements = (
// update bound elements
updateBoundElements(element, scene, {
simultaneouslyUpdated: group,
indirectArrowUpdate: true,
});
return updatedEle;
});
+7 -24
View File
@@ -42,7 +42,6 @@ export const isFocusPointVisible = (
isBindingEnabled: AppState["isBindingEnabled"];
zoom: AppState["zoom"];
},
startOrEnd: "start" | "end",
ignoreOverlap = false,
): boolean => {
// No focus point management for elbow arrows, because elbow arrows
@@ -77,25 +76,14 @@ export const isFocusPointVisible = (
}
}
const arrowPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
arrow,
startOrEnd === "end" ? arrow.points.length - 1 : 0,
elementsMap,
);
// Check if the focus point is within the element's shape bounds
// Endpoint dragging takes precedence
return (
pointDistance(focusPoint, arrowPoint) >=
(FOCUS_POINT_SIZE * 1.5) / appState.zoom.value &&
hitElementItself({
element: bindableElement,
elementsMap,
point: focusPoint,
threshold: getBindingGap(bindableElement, arrow),
overrideShouldTestInside: true,
})
);
return hitElementItself({
element: bindableElement,
elementsMap,
point: focusPoint,
threshold: getBindingGap(bindableElement, arrow),
overrideShouldTestInside: true,
});
};
// Updates the arrow endpoints in "orbit" configuration
@@ -141,7 +129,6 @@ const focusPointUpdate = (
currentBinding,
bindableElement,
elementsMap,
true,
);
if (newPoint) {
@@ -366,7 +353,6 @@ export const handleFocusPointPointerDown = (
bindableElement,
elementsMap,
appState,
"start",
) &&
pointDistance(pointerPos, focusPoint) <= hitThreshold
) {
@@ -401,7 +387,6 @@ export const handleFocusPointPointerDown = (
bindableElement,
elementsMap,
appState,
"end",
) &&
pointDistance(pointerPos, focusPoint) <= hitThreshold
) {
@@ -516,7 +501,6 @@ export const handleFocusPointHover = (
bindableElement,
elementsMap,
appState,
"start",
) &&
pointDistance(pointerPos, focusPoint) <= hitThreshold
) {
@@ -545,7 +529,6 @@ export const handleFocusPointHover = (
bindableElement,
elementsMap,
appState,
"end",
) &&
pointDistance(pointerPos, focusPoint) <= hitThreshold
) {
+164 -169
View File
@@ -27,7 +27,11 @@ import type { AppState } from "@excalidraw/excalidraw/types";
import type { MapEntry, Mutable } from "@excalidraw/common/utility-types";
import type { Bounds } from "@excalidraw/common";
import { getCenterForBounds } from "./bounds";
import {
doBoundsIntersect,
getCenterForBounds,
getElementBounds,
} from "./bounds";
import {
getAllHoveredElementAtPoint,
getHoveredElementForBinding,
@@ -63,6 +67,7 @@ import {
deconstructRectanguloidElement,
projectFixedPointOntoDiagonal,
} from "./utils";
import { moveArrowAboveBindable } from "./zindex";
import type { Scene } from "./Scene";
@@ -112,7 +117,6 @@ export type BindingStrategy =
*/
export const BASE_BINDING_GAP = 5;
export const BASE_BINDING_GAP_ELBOW = 5;
export const BASE_ARROW_MIN_LENGTH = 10;
export const FOCUS_POINT_SIZE = 10 / 1.5;
export const getBindingGap = (
@@ -807,23 +811,13 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
startDragged ? -1 : 0,
elementsMap,
);
const pointIsCloseToOtherElement =
otherFocusPoint &&
otherBindableElement &&
hitElementItself({
point: globalPoint,
element: otherBindableElement,
elementsMap,
threshold: maxBindingDistance_simple(appState.zoom),
overrideShouldTestInside: true,
});
const otherNeverOverride = opts?.newArrow
? appState.selectedLinearElement?.initialState.arrowStartIsInside
: otherBinding?.mode === "inside";
const other: BindingStrategy = !otherNeverOverride
? otherBindableElement &&
!otherFocusPointIsInElement &&
!pointIsCloseToOtherElement &&
appState.selectedLinearElement?.initialState.altFocusPoint
? {
mode: "orbit",
@@ -1090,6 +1084,8 @@ export const updateBoundElements = (
options?: {
simultaneouslyUpdated?: readonly ExcalidrawElement[];
changedElements?: Map<string, ExcalidrawElement>;
indirectArrowUpdate?: boolean;
skipArrowZindexUpdate?: boolean;
},
) => {
if (!isBindableElement(changedElement)) {
@@ -1158,6 +1154,21 @@ export const updateBoundElements = (
);
if (point) {
if (!options?.skipArrowZindexUpdate) {
moveArrowAboveBindable(
LinearElementEditor.getPointGlobalCoordinates(
element,
point,
elementsMap,
),
element,
scene.getNonDeletedElements(),
scene.getNonDeletedElementsMap(),
scene,
changedElement,
);
}
return [
bindingProp === "startBinding" ? 0 : element.points.length - 1,
{ point },
@@ -1184,6 +1195,11 @@ export const updateBoundElements = (
};
boundElementsVisitor(elementsMap, changedElement, visitor);
if (options?.indirectArrowUpdate) {
boundElementsVisitor(elementsMap, changedElement, visitor);
boundElementsVisitor(elementsMap, changedElement, visitor);
}
};
const updateArrowBindings = (
@@ -1693,41 +1709,10 @@ export const snapToMid = (
return undefined;
};
const extractBinding = (
arrow: ExcalidrawArrowElement,
startOrEnd: "startBinding" | "endBinding",
elementsMap: ElementsMap,
) => {
const binding = arrow[startOrEnd];
if (!binding) {
return {
element: null,
fixedPoint: null,
focusPoint: null,
binding,
mode: null,
};
}
const element = elementsMap.get(
binding.elementId,
) as ExcalidrawBindableElement;
return {
element,
fixedPoint: binding.fixedPoint,
focusPoint: getGlobalFixedPointForBindableElement(
normalizeFixedPoint(binding.fixedPoint),
element,
elementsMap,
),
binding,
mode: binding.mode,
};
};
const elementArea = (element: ExcalidrawBindableElement) =>
element.width * element.height;
const compareElementArea = (
a: ExcalidrawBindableElement,
b: ExcalidrawBindableElement,
) => b.width ** 2 + b.height ** 2 - (a.width ** 2 + a.height ** 2);
export const updateBoundPoint = (
arrow: NonDeleted<ExcalidrawArrowElement>,
@@ -1735,7 +1720,9 @@ export const updateBoundPoint = (
binding: FixedPointBinding | null | undefined,
bindableElement: ExcalidrawBindableElement,
elementsMap: ElementsMap,
dragging?: boolean,
opts?: {
customIntersector?: LineSegment<GlobalPoint>;
},
): LocalPoint | null => {
if (
binding == null ||
@@ -1750,142 +1737,150 @@ export const updateBoundPoint = (
return null;
}
const focusPoint = getGlobalFixedPointForBindableElement(
const global = getGlobalFixedPointForBindableElement(
normalizeFixedPoint(binding.fixedPoint),
bindableElement,
elementsMap,
);
const pointIndex =
startOrEnd === "startBinding" ? 0 : arrow.points.length - 1;
const elbowed = isElbowArrow(arrow);
const otherBinding =
startOrEnd === "startBinding" ? arrow.endBinding : arrow.startBinding;
const otherBindableElement =
otherBinding &&
(elementsMap.get(otherBinding.elementId)! as ExcalidrawBindableElement);
const bounds = getElementBounds(bindableElement, elementsMap);
const otherBounds =
otherBindableElement && getElementBounds(otherBindableElement, elementsMap);
const isLargerThanOther =
otherBindableElement &&
compareElementArea(bindableElement, otherBindableElement) <
// if both shapes the same size, pretend the other is larger
(startOrEnd === "endBinding" ? 1 : 0);
const isOverlapping = otherBounds && doBoundsIntersect(bounds, otherBounds);
// 0. Short-circuit for inside binding as it doesn't require any
// calculations and is not affected by other bindings
if (binding.mode === "inside") {
return LinearElementEditor.createPointAt(
arrow,
elementsMap,
focusPoint[0],
focusPoint[1],
null,
);
}
const { element: otherBindable, focusPoint: otherFocusPoint } =
extractBinding(
arrow,
startOrEnd === "startBinding" ? "endBinding" : "startBinding",
elementsMap,
);
const adjacentPointIndex =
startOrEnd === "startBinding" ? 1 : arrow.points.length - 2;
const otherArrowPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
arrow,
arrow.points.length > 2
? adjacentPointIndex
: startOrEnd === "startBinding"
? -1
: 0,
elementsMap,
);
const otherFocusPointOrArrowPoint = otherFocusPoint || otherArrowPoint;
const intersector =
otherFocusPointOrArrowPoint &&
lineSegment(focusPoint, otherFocusPointOrArrowPoint);
const otherOutlinePoint =
otherBindable &&
intersector &&
intersectElementWithLineSegment(
otherBindable,
elementsMap,
intersector,
getBindingGap(otherBindable, arrow),
).sort(
(a, b) => pointDistanceSq(a, focusPoint) - pointDistanceSq(b, focusPoint),
)[0];
const outlinePoint =
intersector &&
intersectElementWithLineSegment(
bindableElement,
elementsMap,
intersector,
getBindingGap(bindableElement, arrow),
).sort(
(a, b) =>
pointDistanceSq(a, otherFocusPointOrArrowPoint) -
pointDistanceSq(b, otherFocusPointOrArrowPoint),
)[0];
const startHasArrowhead = arrow.startArrowhead !== null;
const endHasArrowhead = arrow.endArrowhead !== null;
const resolvedTarget =
(!startHasArrowhead && !endHasArrowhead) ||
(startOrEnd === "startBinding" && startHasArrowhead) ||
(startOrEnd === "endBinding" && endHasArrowhead)
? focusPoint
: outlinePoint || focusPoint;
// 1. Handle case when the outline point (or focus point) is inside
// the other shape by short-circuiting to the focus point, otherwise
// the arrow would invert
// GOAL: If the arrow becomes too short, we want to jump the arrow endpoints
// to the exact focus points on the elements.
// INTUITION: We're not interested in the exacts length of the arrow (which
// will change if we change where we route it), we want to know the length of
// the part which lies outside of both shapes and consider that as a trigger
// to change where we point the arrow. Avoids jumping the arrow in and out
// at every frame.
let arrowTooShort = false;
if (
otherBindable &&
outlinePoint &&
!dragging &&
// Arbitrary threshold to handle wireframing use cases
elementArea(otherBindable) < elementArea(bindableElement) * 2 &&
hitElementItself({
element: otherBindable,
point: outlinePoint,
elementsMap,
threshold: getBindingGap(otherBindable, arrow),
overrideShouldTestInside: true,
})
!isOverlapping &&
!elbowed &&
arrow.startBinding &&
arrow.endBinding &&
otherBindableElement &&
arrow.points.length === 2
) {
return LinearElementEditor.createPointAt(
const startFocusPoint = getGlobalFixedPointForBindableElement(
arrow.startBinding.fixedPoint,
startOrEnd === "startBinding" ? bindableElement : otherBindableElement,
elementsMap,
);
const endFocusPoint = getGlobalFixedPointForBindableElement(
arrow.endBinding.fixedPoint,
startOrEnd === "endBinding" ? bindableElement : otherBindableElement,
elementsMap,
);
const segment = lineSegment(startFocusPoint, endFocusPoint);
const startIntersection = intersectElementWithLineSegment(
startOrEnd === "endBinding" ? bindableElement : otherBindableElement,
elementsMap,
segment,
0,
true,
);
const endIntersection = intersectElementWithLineSegment(
startOrEnd === "startBinding" ? bindableElement : otherBindableElement,
elementsMap,
segment,
0,
true,
);
if (startIntersection.length > 0 && endIntersection.length > 0) {
const len = pointDistance(startIntersection[0], endIntersection[0]);
arrowTooShort = len < 40;
}
}
const isNested = (arrowTooShort || isOverlapping) && isLargerThanOther;
let _customIntersector = opts?.customIntersector;
if (!elbowed && !_customIntersector) {
const [x1, y1, x2, y2] = LinearElementEditor.getElementAbsoluteCoords(
arrow,
elementsMap,
resolvedTarget[0],
resolvedTarget[1],
null,
);
const center = pointFrom<GlobalPoint>((x1 + x2) / 2, (y1 + y2) / 2);
const edgePoint = global;
const adjacentPoint = pointRotateRads(
pointFrom<GlobalPoint>(
arrow.x +
arrow.points[pointIndex === 0 ? 1 : arrow.points.length - 2][0],
arrow.y +
arrow.points[pointIndex === 0 ? 1 : arrow.points.length - 2][1],
),
center,
arrow.angle as Radians,
);
const bindingGap = getBindingGap(bindableElement, arrow);
const halfVector = vectorScale(
vectorNormalize(vectorFromPoint(edgePoint, adjacentPoint)),
pointDistance(edgePoint, adjacentPoint) +
Math.max(bindableElement.width, bindableElement.height) +
bindingGap * 2,
);
_customIntersector = lineSegment(
pointFromVector(halfVector, adjacentPoint),
pointFromVector(vectorScale(halfVector, -1), adjacentPoint),
);
}
const otherTargetPoint = otherBindable
? otherOutlinePoint || otherFocusPoint || otherArrowPoint
: otherArrowPoint;
const arrowTooShort =
pointDistance(otherTargetPoint, outlinePoint || focusPoint) <=
BASE_ARROW_MIN_LENGTH;
const maybeOutlineGlobal =
binding.mode === "orbit" && bindableElement
? isNested
? global
: bindPointToSnapToElementOutline(
{
...arrow,
points: [
pointIndex === 0
? LinearElementEditor.createPointAt(
arrow,
elementsMap,
global[0],
global[1],
null,
)
: arrow.points[0],
...arrow.points.slice(1, -1),
pointIndex === arrow.points.length - 1
? LinearElementEditor.createPointAt(
arrow,
elementsMap,
global[0],
global[1],
null,
)
: arrow.points[arrow.points.length - 1],
],
},
bindableElement,
pointIndex === 0 ? "start" : "end",
elementsMap,
_customIntersector,
)
: global;
// 2. If the arrow is unconnected at the other end, just check arrow size
// and short-circuit to the focus point if the arrow is too short to
// avoid inversion
if (!otherBindable) {
return LinearElementEditor.createPointAt(
arrow,
elementsMap,
arrowTooShort ? focusPoint[0] : outlinePoint?.[0] ?? focusPoint[0],
arrowTooShort ? focusPoint[1] : outlinePoint?.[1] ?? focusPoint[1],
null,
);
}
// 3. If the arrow is too short while connected on both ends and
// the other arrow endpoint will not be inside the bindable, just
// check the arrow size and make a decision based on that
if (arrowTooShort) {
return LinearElementEditor.createPointAt(
arrow,
elementsMap,
resolvedTarget?.[0] || focusPoint[0],
resolvedTarget?.[1] || focusPoint[1],
null,
);
}
// 4. In the general case, snap to the outline if possible
return LinearElementEditor.createPointAt(
arrow,
elementsMap,
outlinePoint?.[0] || focusPoint[0],
outlinePoint?.[1] || focusPoint[1],
maybeOutlineGlobal[0],
maybeOutlineGlobal[1],
null,
);
};
+1
View File
@@ -1970,6 +1970,7 @@ export class ElementsDelta implements DeltaContainer<SceneElementsMap> {
// TODO: with precise bindings this is quite expensive, so consider optimisation so it's only triggered when the arrow does not intersect (imprecise) element bounds
updateBoundElements(element, scene, {
changedElements: changed,
skipArrowZindexUpdate: true,
});
}
}
+2 -79
View File
@@ -56,7 +56,7 @@ const RE_REDDIT =
const RE_REDDIT_EMBED =
/^<blockquote[\s\S]*?\shref=["'](https?:\/\/(?:www\.)?reddit\.com\/[^"']*)/i;
const parseYouTubeLikeTimestamp = (url: string): number => {
const parseYouTubeTimestamp = (url: string): number => {
let timeParam: string | null | undefined;
try {
@@ -85,57 +85,11 @@ const parseYouTubeLikeTimestamp = (url: string): number => {
return parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(seconds);
};
const parseGoogleDriveVideoLink = (
url: string,
): { fileId: string; resourceKey?: string; timestamp?: number } | null => {
try {
const urlObj = new URL(url.startsWith("http") ? url : `https://${url}`);
const hostname = urlObj.hostname.replace(/^www\./, "");
if (hostname !== "drive.google.com") {
return null;
}
let fileId: string | null = null;
const pathMatch = urlObj.pathname.match(/^\/file\/d\/([^/]+)(?:\/|$)/);
if (pathMatch?.[1]) {
fileId = pathMatch[1];
} else if (urlObj.pathname === "/open" || urlObj.pathname === "/uc") {
// Shared Drive links can be emitted as:
// - /open?id=<fileId> (common "open in Drive" format)
// - /uc?...&id=<fileId> (download/export endpoint often seen in copied links)
fileId = urlObj.searchParams.get("id");
}
if (!fileId || !/^[a-zA-Z0-9_-]+$/.test(fileId)) {
return null;
}
// Some Drive share links include `resourcekey` for access to link-shared
// files; preserve it in the preview URL so embeds keep working.
const resourceKey = urlObj.searchParams.get("resourcekey");
const timestamp = parseYouTubeLikeTimestamp(urlObj.toString());
return {
fileId,
resourceKey:
resourceKey && /^[a-zA-Z0-9_-]+$/.test(resourceKey)
? resourceKey
: undefined,
// Drive accepts YouTube-like `t` formats (e.g. `t=90`, `t=1m30s`);
// normalize to seconds for a stable preview URL.
timestamp: timestamp > 0 ? timestamp : undefined,
};
} catch (error) {
return null;
}
};
const ALLOWED_DOMAINS = new Set([
"youtube.com",
"youtu.be",
"vimeo.com",
"player.vimeo.com",
"drive.google.com",
"figma.com",
"link.excalidraw.com",
"gist.github.com",
@@ -154,7 +108,6 @@ const ALLOW_SAME_ORIGIN = new Set([
"youtu.be",
"vimeo.com",
"player.vimeo.com",
"drive.google.com",
"figma.com",
"twitter.com",
"x.com",
@@ -189,7 +142,7 @@ export const getEmbedLink = (
let aspectRatio = { w: 560, h: 840 };
const ytLink = link.match(RE_YOUTUBE);
if (ytLink?.[2]) {
const startTime = parseYouTubeLikeTimestamp(originalLink);
const startTime = parseYouTubeTimestamp(originalLink);
const time = startTime > 0 ? `&start=${startTime}` : ``;
const isPortrait = link.includes("shorts");
type = "video";
@@ -248,36 +201,6 @@ export const getEmbedLink = (
};
}
const googleDriveVideo = parseGoogleDriveVideoLink(link);
if (googleDriveVideo) {
type = "video";
const searchParams = new URLSearchParams();
if (googleDriveVideo.resourceKey) {
searchParams.set("resourcekey", googleDriveVideo.resourceKey);
}
if (googleDriveVideo.timestamp) {
searchParams.set("t", `${googleDriveVideo.timestamp}`);
}
const search = searchParams.toString();
link = `https://drive.google.com/file/d/${googleDriveVideo.fileId}/preview${
search ? `?${search}` : ""
}`;
aspectRatio = { w: 560, h: 315 };
embeddedLinkCache.set(originalLink, {
link,
intrinsicSize: aspectRatio,
type,
sandbox: { allowSameOrigin },
});
return {
link,
intrinsicSize: aspectRatio,
type,
sandbox: { allowSameOrigin },
};
}
const figmaLink = link.match(RE_FIGMA);
if (figmaLink) {
type = "generic";
+18 -2
View File
@@ -9,6 +9,7 @@ import {
vectorFromPoint,
curveLength,
curvePointAtLength,
lineSegment,
} from "@excalidraw/math";
import { getCurvePathOps } from "@excalidraw/utils/shape";
@@ -2338,6 +2339,19 @@ const pointDraggingUpdates = (
: updates.endBinding,
};
// We need to use a custom intersector to ensure that if there is a big "jump"
// in the arrow's position, we can position it with outline avoidance
// pixel-perfectly and avoid "dancing" arrows.
// NOTE: Direction matters here, so we create two intersectors
const startCustomIntersector =
start.focusPoint && end.focusPoint
? lineSegment(start.focusPoint, end.focusPoint)
: undefined;
const endCustomIntersector =
start.focusPoint && end.focusPoint
? lineSegment(end.focusPoint, start.focusPoint)
: undefined;
// Needed to handle a special case where an existing arrow is dragged over
// the same element it is bound to on the other side
const startIsDraggingOverEndElement =
@@ -2373,7 +2387,9 @@ const pointDraggingUpdates = (
nextArrow.endBinding,
endBindable,
elementsMap,
endIsDragged,
{
customIntersector: endCustomIntersector,
},
) || nextArrow.points[nextArrow.points.length - 1]
: nextArrow.points[nextArrow.points.length - 1];
@@ -2404,7 +2420,7 @@ const pointDraggingUpdates = (
nextArrow.startBinding,
startBindable,
elementsMap,
startIsDragged,
{ customIntersector: startCustomIntersector },
) || nextArrow.points[0]
: nextArrow.points[0];
+1 -30
View File
@@ -43,11 +43,6 @@ import { LinearElementEditor } from "./linearElementEditor";
import { isRectangularElement } from "./typeChecks";
import { maxBindingDistance_simple } from "./binding";
import {
getGlobalFixedPointForBindableElement,
normalizeFixedPoint,
} from "./binding";
import type {
ElementsMap,
ExcalidrawArrowElement,
@@ -682,35 +677,11 @@ export const projectFixedPointOntoDiagonal = (
elementsMap,
);
// To avoid working with stale arrow state, we use the opposite focus point
// of the current endpoint, which will always be unchanged during moving of
// the endpoint. This is only needed when the arrow has only two points.
let a = LinearElementEditor.getPointAtIndexGlobalCoordinates(
const a = LinearElementEditor.getPointAtIndexGlobalCoordinates(
arrow,
startOrEnd === "start" ? 1 : arrow.points.length - 2,
elementsMap,
);
if (arrow.points.length === 2) {
const otherBinding =
startOrEnd === "start" ? arrow.endBinding : arrow.startBinding;
const otherBindable =
otherBinding &&
(elementsMap.get(otherBinding.elementId) as
| ExcalidrawBindableElement
| undefined);
const otherFocusPoint =
otherBinding &&
otherBindable &&
getGlobalFixedPointForBindableElement(
normalizeFixedPoint(otherBinding.fixedPoint),
otherBindable,
elementsMap,
);
if (otherFocusPoint) {
a = otherFocusPoint;
}
}
const b = pointFromVector<GlobalPoint>(
vectorScale(
vectorFromPoint(point, a),
+1 -2
View File
@@ -18,7 +18,6 @@ import type {
NonDeletedExcalidrawElement,
NonDeletedSceneElementsMap,
Ordered,
OrderedExcalidrawElement,
} from "./types";
const isOfTargetFrame = (element: ExcalidrawElement, frameId: string) => {
@@ -157,7 +156,7 @@ export const moveArrowAboveBindable = (
elementsMap: NonDeletedSceneElementsMap,
scene: Scene,
hit?: NonDeletedExcalidrawElement,
): readonly OrderedExcalidrawElement[] => {
) => {
const hoveredElement = hit
? hit
: getHoveredElementForBinding(point, elements, elementsMap);
+1 -81
View File
@@ -1,4 +1,4 @@
import { embeddableURLValidator, getEmbedLink } from "../src/embeddable";
import { getEmbedLink } from "../src/embeddable";
describe("YouTube timestamp parsing", () => {
it("should parse YouTube URLs with timestamp in seconds", () => {
@@ -151,83 +151,3 @@ describe("YouTube timestamp parsing", () => {
}
});
});
describe("Google Drive video embedding", () => {
it.each([
{
url: "https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/view?usp=sharing",
expectedLink:
"https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/preview",
},
{
url: "https://drive.google.com/open?id=1AbCdEfGhIjKlMnOpQrStUvWxYz123456",
expectedLink:
"https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/preview",
},
{
url: "https://drive.google.com/uc?export=download&id=1AbCdEfGhIjKlMnOpQrStUvWxYz123456",
expectedLink:
"https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/preview",
},
])("should normalize Google Drive link: $url", ({ url, expectedLink }) => {
const result = getEmbedLink(url);
expect(result).toBeTruthy();
expect(result?.type).toBe("video");
if (result?.type === "video" || result?.type === "generic") {
expect(result.link).toBe(expectedLink);
}
expect(result?.intrinsicSize).toEqual({ w: 560, h: 315 });
});
it("should preserve resourcekey when available", () => {
const url =
"https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/view?resourcekey=0-abcdef123456";
const result = getEmbedLink(url);
expect(result).toBeTruthy();
expect(result?.type).toBe("video");
if (result?.type === "video" || result?.type === "generic") {
expect(result.link).toBe(
"https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/preview?resourcekey=0-abcdef123456",
);
}
});
it("should preserve timestamp when available", () => {
const url =
"https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/view?t=9";
const result = getEmbedLink(url);
expect(result).toBeTruthy();
expect(result?.type).toBe("video");
if (result?.type === "video" || result?.type === "generic") {
expect(result.link).toBe(
"https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/preview?t=9",
);
}
});
it("should preserve resourcekey and timestamp together", () => {
const url =
"https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/view?resourcekey=0-abcdef123456&t=9";
const result = getEmbedLink(url);
expect(result).toBeTruthy();
expect(result?.type).toBe("video");
if (result?.type === "video" || result?.type === "generic") {
expect(result.link).toBe(
"https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/preview?resourcekey=0-abcdef123456&t=9",
);
}
});
it("should validate Google Drive domain by default", () => {
expect(
embeddableURLValidator(
"https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz123456/view",
undefined,
),
).toBe(true);
});
});
@@ -1555,7 +1555,7 @@ const getArrowheadOptions = (flip: boolean) => {
value: null,
text: t("labels.arrowhead_none"),
keyBinding: "q",
icon: <ArrowheadNoneIcon flip={flip} />,
icon: ArrowheadNoneIcon,
},
{
value: "arrow",
+3 -1
View File
@@ -9623,7 +9623,9 @@ class App extends React.Component<AppProps, AppState> {
isBindableElement(element) &&
element.boundElements?.some((other) => other.type === "arrow")
) {
updateBoundElements(element, this.scene);
updateBoundElements(element, this.scene, {
indirectArrowUpdate: true,
});
}
});
+7 -15
View File
@@ -1287,21 +1287,13 @@ export const EdgeRoundIcon = createIcon(
tablerIconProps,
);
export const ArrowheadNoneIcon = React.memo(
({ flip = false }: { flip?: boolean }) =>
createIcon(
<g
transform={flip ? "translate(24, 0) scale(-1, 1)" : ""}
stroke="currentColor"
opacity={0.3}
strokeWidth={2}
>
<path d="M12 12l-9 0" />
<path d="M21 9l-6 6" />
<path d="M21 15l-6 -6" />
</g>,
tablerIconProps,
),
export const ArrowheadNoneIcon = createIcon(
<g stroke="currentColor" opacity={0.3} strokeWidth={2}>
<path d="M12 12l9 0" />
<path d="M3 9l6 6" />
<path d="M3 15l6 -6" />
</g>,
tablerIconProps,
);
export const ArrowheadArrowIcon = React.memo(
@@ -1269,7 +1269,6 @@ const renderFocusPointIndicator = ({
bindableElement,
elementsMap,
appState,
type,
)
) {
return;
@@ -227,7 +227,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 29,
"version": 33,
"width": "94.00000",
"x": 0,
"y": 0,
@@ -334,15 +334,15 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
],
"mode": "orbit",
},
"height": "105.58874",
"height": "105.58873",
"points": [
[
0,
0,
],
[
"88.00000",
"105.58874",
88,
"105.58873",
],
],
"startBinding": {
@@ -353,8 +353,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
],
"mode": "orbit",
},
"version": 28,
"width": "88.00000",
"version": 32,
"width": 88,
},
"inserted": {
"endBinding": {
@@ -365,7 +365,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
],
"mode": "orbit",
},
"height": 0,
"height": "0.00000",
"points": [
[
0,
@@ -373,7 +373,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
],
[
"88.00000",
0,
"0.00000",
],
],
"startBinding": {
@@ -384,7 +384,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
],
"mode": "orbit",
},
"version": 25,
"version": 29,
"width": "88.00000",
},
},
@@ -440,21 +440,21 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
],
],
"startBinding": null,
"version": 29,
"version": 33,
"width": "94.00000",
"x": 0,
"y": 0,
},
"inserted": {
"height": "105.58874",
"height": "105.58873",
"points": [
[
0,
0,
],
[
"88.00000",
"105.58874",
88,
"105.58873",
],
],
"startBinding": {
@@ -465,10 +465,10 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
],
"mode": "orbit",
},
"version": 28,
"width": "88.00000",
"version": 32,
"width": 88,
"x": 6,
"y": "7.20923",
"y": "7.09000",
},
},
},
@@ -854,7 +854,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 25,
"version": 30,
"width": 100,
"x": 150,
"y": 0,
@@ -904,15 +904,15 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"id4": {
"deleted": {
"endBinding": null,
"height": "0.01000",
"height": "0.00293",
"points": [
[
0,
0,
],
[
-44,
"-0.01000",
"-44.00000",
"-0.00293",
],
],
"startBinding": {
@@ -923,9 +923,9 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
],
"mode": "orbit",
},
"version": 24,
"width": 44,
"y": "0.01000",
"version": 29,
"width": "44.00000",
"y": "0.00293",
},
"inserted": {
"endBinding": {
@@ -943,7 +943,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
0,
],
[
-100,
"6.00000",
0,
],
],
@@ -955,8 +955,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
],
"mode": "orbit",
},
"version": 23,
"width": 100,
"version": 27,
"width": "6.00000",
"y": "0.01000",
},
},
@@ -1004,21 +1004,21 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
],
],
"startBinding": null,
"version": 25,
"version": 30,
"width": 100,
"x": 150,
"y": 0,
},
"inserted": {
"height": "0.01000",
"height": "0.00293",
"points": [
[
0,
0,
],
[
-44,
"-0.01000",
"-44.00000",
"-0.00293",
],
],
"startBinding": {
@@ -1029,10 +1029,10 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
],
"mode": "orbit",
},
"version": 24,
"width": 44,
"x": 250,
"y": "0.01000",
"version": 29,
"width": "44.00000",
"x": 144,
"y": "0.00293",
},
},
},
@@ -1335,7 +1335,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": "29.32551",
"height": "29.36414",
"id": "id4",
"index": "Zz",
"isDeleted": false,
@@ -1350,7 +1350,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
],
[
88,
"29.32551",
"29.36414",
],
],
"roughness": 1,
@@ -1369,10 +1369,10 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 8,
"version": 10,
"width": 88,
"x": 6,
"y": "2.00947",
"y": "2.00946",
}
`;
@@ -1546,7 +1546,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
],
"mode": "orbit",
},
"version": 8,
"version": 10,
},
"inserted": {
"endBinding": null,
@@ -1698,7 +1698,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": "17.59718",
"height": "14.91372",
"id": "id5",
"index": "a0",
"isDeleted": false,
@@ -1712,8 +1712,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
0,
],
[
88,
"-17.59718",
"88.00000",
"-14.91372",
],
],
"roughness": 1,
@@ -1732,10 +1732,10 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 8,
"width": 88,
"version": 11,
"width": "88.00000",
"x": 6,
"y": "38.80379",
"y": "37.05219",
}
`;
@@ -1846,7 +1846,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": "17.59718",
"height": "14.91372",
"index": "a0",
"isDeleted": false,
"link": null,
@@ -1858,8 +1858,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
0,
],
[
88,
"-17.59718",
"88.00000",
"-14.91372",
],
],
"roughness": 1,
@@ -1877,14 +1877,14 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"version": 8,
"width": 88,
"version": 11,
"width": "88.00000",
"x": 6,
"y": "38.80379",
"y": "37.05219",
},
"inserted": {
"isDeleted": true,
"version": 7,
"version": 8,
},
},
},
@@ -2398,7 +2398,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": "439.20000",
"height": "439.13521",
"id": "id4",
"index": "a2",
"isDeleted": false,
@@ -2413,7 +2413,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
],
[
488,
"-439.20000",
"-439.13521",
],
],
"roughness": 1,
@@ -2434,10 +2434,10 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 12,
"version": 13,
"width": 488,
"x": 6,
"y": "-5.39000",
"y": "-5.38920",
}
`;
@@ -2566,7 +2566,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": "439.20000",
"height": "439.13521",
"index": "a2",
"isDeleted": false,
"link": null,
@@ -2579,7 +2579,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
],
[
488,
"-439.20000",
"-439.13521",
],
],
"roughness": 1,
@@ -2599,14 +2599,14 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"version": 12,
"version": 13,
"width": 488,
"x": 6,
"y": "-5.39000",
"y": "-5.38920",
},
"inserted": {
"isDeleted": true,
"version": 9,
"version": 10,
},
},
},
@@ -16383,7 +16383,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": 0,
"height": "0.00004",
"id": "id13",
"index": "a3",
"isDeleted": false,
@@ -16398,7 +16398,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
],
[
"88.00000",
0,
"0.00004",
],
],
"roughness": 1,
@@ -16419,10 +16419,10 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 10,
"version": 12,
"width": "88.00000",
"x": 6,
"y": "0.01000",
"y": "0.00996",
}
`;
@@ -16472,7 +16472,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
],
"mode": "orbit",
},
"version": 10,
"version": 12,
},
"inserted": {
"endBinding": {
@@ -16492,7 +16492,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
],
"mode": "orbit",
},
"version": 8,
"version": 9,
},
},
},
@@ -16801,7 +16801,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": "0.00120",
"height": "0.00936",
"index": "a3",
"isDeleted": false,
"link": null,
@@ -16813,8 +16813,8 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
0,
],
[
"88.00000",
"0.00120",
88,
"0.00936",
],
],
"roughness": 1,
@@ -16834,14 +16834,14 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"version": 7,
"width": "88.00000",
"version": 8,
"width": 88,
"x": 6,
"y": "0.00880",
"y": 0,
},
"inserted": {
"isDeleted": true,
"version": 6,
"version": 7,
},
},
},
@@ -17134,7 +17134,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": 0,
"height": "0.00004",
"id": "id13",
"index": "a3",
"isDeleted": false,
@@ -17149,7 +17149,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
],
[
"88.00000",
0,
"0.00004",
],
],
"roughness": 1,
@@ -17170,10 +17170,10 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 10,
"version": 12,
"width": "88.00000",
"x": 6,
"y": "0.01000",
"y": "0.00996",
}
`;
@@ -17442,7 +17442,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": 0,
"height": "0.00004",
"index": "a3",
"isDeleted": false,
"link": null,
@@ -17455,7 +17455,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
],
[
"88.00000",
0,
"0.00004",
],
],
"roughness": 1,
@@ -17475,14 +17475,14 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"version": 10,
"version": 12,
"width": "88.00000",
"x": 6,
"y": "0.01000",
"y": "0.00996",
},
"inserted": {
"isDeleted": true,
"version": 8,
"version": 9,
},
},
},
@@ -17783,7 +17783,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": 0,
"height": "0.00004",
"id": "id13",
"index": "a3",
"isDeleted": false,
@@ -17798,7 +17798,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
],
[
"88.00000",
0,
"0.00004",
],
],
"roughness": 1,
@@ -17819,10 +17819,10 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 10,
"version": 12,
"width": "88.00000",
"x": 6,
"y": "0.01000",
"y": "0.00996",
}
`;
@@ -18091,7 +18091,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": 0,
"height": "0.00004",
"index": "a3",
"isDeleted": false,
"link": null,
@@ -18104,7 +18104,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
],
[
"88.00000",
0,
"0.00004",
],
],
"roughness": 1,
@@ -18124,14 +18124,14 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"version": 10,
"version": 12,
"width": "88.00000",
"x": 6,
"y": "0.01000",
"y": "0.00996",
},
"inserted": {
"isDeleted": true,
"version": 8,
"version": 9,
},
},
},
@@ -18430,7 +18430,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": 0,
"height": "0.00004",
"id": "id13",
"index": "a3",
"isDeleted": false,
@@ -18445,7 +18445,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
],
[
"88.00000",
0,
"0.00004",
],
],
"roughness": 1,
@@ -18466,10 +18466,10 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 10,
"version": 12,
"width": "88.00000",
"x": 6,
"y": "0.01000",
"y": "0.00996",
}
`;
@@ -18535,7 +18535,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
],
"mode": "orbit",
},
"version": 10,
"version": 12,
},
"inserted": {
"endBinding": {
@@ -18547,7 +18547,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"mode": "orbit",
},
"startBinding": null,
"version": 8,
"version": 9,
},
},
"id2": {
@@ -18824,7 +18824,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": "0.00120",
"height": "0.00936",
"index": "a3",
"isDeleted": false,
"link": null,
@@ -18836,8 +18836,8 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
0,
],
[
"88.00000",
"0.00120",
88,
"0.00936",
],
],
"roughness": 1,
@@ -18857,14 +18857,14 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"version": 7,
"width": "88.00000",
"version": 8,
"width": 88,
"x": 6,
"y": "0.00880",
"y": 0,
},
"inserted": {
"isDeleted": true,
"version": 6,
"version": 7,
},
},
},
@@ -19185,7 +19185,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": 0,
"height": "0.00004",
"id": "id13",
"index": "a3",
"isDeleted": false,
@@ -19200,7 +19200,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
],
[
"88.00000",
0,
"0.00004",
],
],
"roughness": 1,
@@ -19221,10 +19221,10 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 11,
"version": 13,
"width": "88.00000",
"x": 6,
"y": "0.01000",
"y": "0.00996",
}
`;
@@ -19301,12 +19301,12 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
],
"mode": "orbit",
},
"version": 11,
"version": 13,
},
"inserted": {
"endBinding": null,
"startBinding": null,
"version": 9,
"version": 10,
},
},
},
@@ -19575,7 +19575,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": "0.00120",
"height": "0.00936",
"index": "a3",
"isDeleted": false,
"link": null,
@@ -19587,8 +19587,8 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
0,
],
[
"88.00000",
"0.00120",
88,
"0.00936",
],
],
"roughness": 1,
@@ -19608,14 +19608,14 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"version": 7,
"width": "88.00000",
"version": 8,
"width": 88,
"x": 6,
"y": "0.00880",
"y": 0,
},
"inserted": {
"isDeleted": true,
"version": 6,
"version": 7,
},
},
},
@@ -182,14 +182,14 @@ exports[`move element > rectangles with binding arrow 7`] = `
"elementId": "id3",
"fixedPoint": [
"-0.02000",
"0.48010",
"0.47904",
],
"mode": "orbit",
},
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": "90.01760",
"height": "90.02554",
"id": "id6",
"index": "a2",
"isDeleted": false,
@@ -204,7 +204,7 @@ exports[`move element > rectangles with binding arrow 7`] = `
],
[
89,
"90.01760",
"90.02554",
],
],
"roughness": 1,
@@ -217,7 +217,7 @@ exports[`move element > rectangles with binding arrow 7`] = `
"elementId": "id0",
"fixedPoint": [
"1.06000",
"0.56011",
"0.55687",
],
"mode": "orbit",
},
@@ -230,6 +230,6 @@ exports[`move element > rectangles with binding arrow 7`] = `
"versionNonce": 271613161,
"width": 89,
"x": 106,
"y": "56.01120",
"y": "55.68677",
}
`;