Compare commits
No commits in common. "mtolmacs/feat/fixed-point-simple-arrow-binding" and "master" have entirely different histories.
mtolmacs/f
...
master
@ -514,5 +514,3 @@ export enum UserIdleState {
|
||||
* the start and end points)
|
||||
*/
|
||||
export const LINE_POLYGON_POINT_MERGE_DISTANCE = 20;
|
||||
|
||||
export const BIND_MODE_TIMEOUT = 1000; // ms
|
||||
|
||||
@ -3,6 +3,9 @@ import {
|
||||
arrayToMap,
|
||||
isBindingFallthroughEnabled,
|
||||
tupleToCoors,
|
||||
invariant,
|
||||
isDevEnv,
|
||||
isTestEnv,
|
||||
} from "@excalidraw/common";
|
||||
|
||||
import {
|
||||
@ -34,7 +37,7 @@ import {
|
||||
getCenterForBounds,
|
||||
getElementBounds,
|
||||
} from "./bounds";
|
||||
import { hitElementItself, intersectElementWithLineSegment } from "./collision";
|
||||
import { intersectElementWithLineSegment } from "./collision";
|
||||
import { distanceToElement } from "./distance";
|
||||
import {
|
||||
headingForPointFromElement,
|
||||
@ -124,9 +127,6 @@ export const bindOrUnbindLinearElement = (
|
||||
endBindingElement: ExcalidrawBindableElement | null | "keep",
|
||||
scene: Scene,
|
||||
): void => {
|
||||
const bothEndBoundToTheSameElement =
|
||||
linearElement.startBinding?.elementId ===
|
||||
linearElement.endBinding?.elementId && !!linearElement.startBinding;
|
||||
const elementsMap = scene.getNonDeletedElementsMap();
|
||||
const boundToElementIds: Set<ExcalidrawBindableElement["id"]> = new Set();
|
||||
const unboundFromElementIds: Set<ExcalidrawBindableElement["id"]> = new Set();
|
||||
@ -151,20 +151,18 @@ export const bindOrUnbindLinearElement = (
|
||||
elementsMap,
|
||||
);
|
||||
|
||||
if (!bothEndBoundToTheSameElement) {
|
||||
const onlyUnbound = Array.from(unboundFromElementIds).filter(
|
||||
(id) => !boundToElementIds.has(id),
|
||||
);
|
||||
const onlyUnbound = Array.from(unboundFromElementIds).filter(
|
||||
(id) => !boundToElementIds.has(id),
|
||||
);
|
||||
|
||||
getNonDeletedElements(scene, onlyUnbound).forEach((element) => {
|
||||
scene.mutateElement(element, {
|
||||
boundElements: element.boundElements?.filter(
|
||||
(element) =>
|
||||
element.type !== "arrow" || element.id !== linearElement.id,
|
||||
),
|
||||
});
|
||||
getNonDeletedElements(scene, onlyUnbound).forEach((element) => {
|
||||
scene.mutateElement(element, {
|
||||
boundElements: element.boundElements?.filter(
|
||||
(element) =>
|
||||
element.type !== "arrow" || element.id !== linearElement.id,
|
||||
),
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const bindOrUnbindLinearElementEdge = (
|
||||
@ -205,7 +203,6 @@ const bindOrUnbindLinearElementEdge = (
|
||||
linearElement,
|
||||
bindableElement,
|
||||
startOrEnd,
|
||||
elementsMap,
|
||||
)
|
||||
: startOrEnd === "start" ||
|
||||
otherEdgeBindableElement.id !== bindableElement.id)
|
||||
@ -396,7 +393,6 @@ export const maybeSuggestBindingsForLinearElementAtCoords = (
|
||||
}[],
|
||||
scene: Scene,
|
||||
zoom: AppState["zoom"],
|
||||
elementsMap: ElementsMap,
|
||||
// During line creation the start binding hasn't been written yet
|
||||
// into `linearElement`
|
||||
oppositeBindingBoundElement?: ExcalidrawBindableElement | null,
|
||||
@ -415,12 +411,11 @@ export const maybeSuggestBindingsForLinearElementAtCoords = (
|
||||
|
||||
if (
|
||||
hoveredBindableElement != null &&
|
||||
(oppositeBindingBoundElement?.id === hoveredBindableElement.id ||
|
||||
!isLinearElementSimpleAndAlreadyBound(
|
||||
linearElement,
|
||||
oppositeBindingBoundElement?.id,
|
||||
hoveredBindableElement,
|
||||
))
|
||||
!isLinearElementSimpleAndAlreadyBound(
|
||||
linearElement,
|
||||
oppositeBindingBoundElement?.id,
|
||||
hoveredBindableElement,
|
||||
)
|
||||
) {
|
||||
acc.add(hoveredBindableElement);
|
||||
}
|
||||
@ -464,7 +459,6 @@ export const maybeBindLinearElement = (
|
||||
linearElement,
|
||||
hoveredElement,
|
||||
"end",
|
||||
elementsMap,
|
||||
)
|
||||
) {
|
||||
bindLinearElement(linearElement, hoveredElement, "end", scene);
|
||||
@ -493,120 +487,29 @@ export const bindLinearElement = (
|
||||
return;
|
||||
}
|
||||
|
||||
const elementsMap = scene.getNonDeletedElementsMap();
|
||||
const edgePoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
|
||||
linearElement,
|
||||
startOrEnd === "start" ? 0 : -1,
|
||||
elementsMap,
|
||||
);
|
||||
let binding: PointBinding | FixedPointBinding;
|
||||
let binding: PointBinding | FixedPointBinding = {
|
||||
elementId: hoveredElement.id,
|
||||
...normalizePointBinding(
|
||||
calculateFocusAndGap(
|
||||
linearElement,
|
||||
hoveredElement,
|
||||
startOrEnd,
|
||||
scene.getNonDeletedElementsMap(),
|
||||
),
|
||||
hoveredElement,
|
||||
),
|
||||
};
|
||||
|
||||
if (isElbowArrow(linearElement)) {
|
||||
binding = {
|
||||
elementId: hoveredElement.id,
|
||||
...normalizePointBinding(
|
||||
calculateFocusAndGap(
|
||||
linearElement,
|
||||
hoveredElement,
|
||||
startOrEnd,
|
||||
elementsMap,
|
||||
),
|
||||
hoveredElement,
|
||||
),
|
||||
...binding,
|
||||
...calculateFixedPointForElbowArrowBinding(
|
||||
linearElement,
|
||||
hoveredElement,
|
||||
startOrEnd,
|
||||
elementsMap,
|
||||
scene.getNonDeletedElementsMap(),
|
||||
),
|
||||
};
|
||||
} else if (
|
||||
hitElementItself({
|
||||
point: edgePoint,
|
||||
element: hoveredElement,
|
||||
elementsMap,
|
||||
threshold: 0, // TODO: Not ideal, should be calculated from the same source
|
||||
})
|
||||
) {
|
||||
// Use FixedPoint binding when the arrow endpoint is inside the shape
|
||||
binding = {
|
||||
elementId: hoveredElement.id,
|
||||
focus: 0,
|
||||
gap: 0,
|
||||
...calculateFixedPointForNonElbowArrowBinding(
|
||||
linearElement,
|
||||
hoveredElement,
|
||||
startOrEnd,
|
||||
elementsMap,
|
||||
),
|
||||
};
|
||||
} else {
|
||||
// For non-elbow arrows, extend the last segment and check intersection
|
||||
const adjacentPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
|
||||
linearElement,
|
||||
startOrEnd === "start" ? 1 : -2,
|
||||
elementsMap,
|
||||
);
|
||||
const extendedDirection = vectorScale(
|
||||
vectorNormalize(
|
||||
vectorFromPoint(
|
||||
pointFrom(
|
||||
edgePoint[0] - adjacentPoint[0],
|
||||
edgePoint[1] - adjacentPoint[1],
|
||||
),
|
||||
),
|
||||
),
|
||||
Math.max(hoveredElement.width, hoveredElement.height) * 2,
|
||||
);
|
||||
const intersector = lineSegment(
|
||||
edgePoint,
|
||||
pointFromVector(
|
||||
vectorFromPoint(
|
||||
pointFrom(
|
||||
edgePoint[0] + extendedDirection[0],
|
||||
edgePoint[1] + extendedDirection[1],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
// Check if this extended segment intersects the bindable element
|
||||
const intersections = intersectElementWithLineSegment(
|
||||
hoveredElement,
|
||||
elementsMap,
|
||||
intersector,
|
||||
);
|
||||
|
||||
const intersectsElement = intersections.length > 0;
|
||||
|
||||
if (intersectsElement) {
|
||||
// Use traditional focus/gap binding when the extended segment intersects
|
||||
binding = {
|
||||
elementId: hoveredElement.id,
|
||||
...normalizePointBinding(
|
||||
calculateFocusAndGap(
|
||||
linearElement,
|
||||
hoveredElement,
|
||||
startOrEnd,
|
||||
elementsMap,
|
||||
),
|
||||
hoveredElement,
|
||||
),
|
||||
};
|
||||
} else {
|
||||
// Use FixedPoint binding when the extended segment doesn't intersect
|
||||
binding = {
|
||||
elementId: hoveredElement.id,
|
||||
focus: 0,
|
||||
gap: 0,
|
||||
...calculateFixedPointForNonElbowArrowBinding(
|
||||
linearElement,
|
||||
hoveredElement,
|
||||
startOrEnd,
|
||||
elementsMap,
|
||||
),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
scene.mutateElement(linearElement, {
|
||||
@ -629,43 +532,14 @@ const isLinearElementSimpleAndAlreadyBoundOnOppositeEdge = (
|
||||
linearElement: NonDeleted<ExcalidrawLinearElement>,
|
||||
bindableElement: ExcalidrawBindableElement,
|
||||
startOrEnd: "start" | "end",
|
||||
elementsMap: ElementsMap,
|
||||
): boolean => {
|
||||
const otherBinding =
|
||||
linearElement[startOrEnd === "start" ? "endBinding" : "startBinding"];
|
||||
|
||||
// Only prevent binding if opposite end is bound to the same element
|
||||
if (
|
||||
otherBinding?.elementId !== bindableElement.id ||
|
||||
!isLinearElementSimple(linearElement)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// For non-elbow arrows, allow FixedPoint binding even when both ends bind to the same element
|
||||
if (!isElbowArrow(linearElement)) {
|
||||
const currentEndPoint =
|
||||
LinearElementEditor.getPointAtIndexGlobalCoordinates(
|
||||
linearElement,
|
||||
startOrEnd === "start" ? 0 : -1,
|
||||
elementsMap,
|
||||
);
|
||||
|
||||
// If current end would use FixedPoint binding, allow it
|
||||
if (
|
||||
hitElementItself({
|
||||
point: currentEndPoint,
|
||||
element: bindableElement,
|
||||
elementsMap,
|
||||
threshold: 0, // TODO: Not ideal, should be calculated from the same source
|
||||
})
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Prevent traditional focus/gap binding when both ends would bind to the same element
|
||||
return true;
|
||||
return isLinearElementSimpleAndAlreadyBound(
|
||||
linearElement,
|
||||
otherBinding?.elementId,
|
||||
bindableElement,
|
||||
);
|
||||
};
|
||||
|
||||
export const isLinearElementSimpleAndAlreadyBound = (
|
||||
@ -902,10 +776,7 @@ export const updateBoundElements = (
|
||||
? elementsMap.get(element.startBinding.elementId)
|
||||
: null;
|
||||
const endBindingElement = element.endBinding
|
||||
? // PERF: If the arrow is bound to the same element on both ends.
|
||||
startBindingElement?.id === element.endBinding.elementId
|
||||
? startBindingElement
|
||||
: elementsMap.get(element.endBinding.elementId)
|
||||
? elementsMap.get(element.endBinding.elementId)
|
||||
: null;
|
||||
|
||||
let startBounds: Bounds | null = null;
|
||||
@ -978,9 +849,6 @@ export const updateBoundElements = (
|
||||
...(changedElement.id === element.endBinding?.elementId
|
||||
? { endBinding: bindings.endBinding }
|
||||
: {}),
|
||||
moveMidPointsWithElement:
|
||||
!!startBindingElement &&
|
||||
startBindingElement?.id === endBindingElement?.id,
|
||||
});
|
||||
|
||||
const boundText = getBoundTextElement(element, elementsMap);
|
||||
@ -1074,40 +942,35 @@ const getDistanceForBinding = (
|
||||
};
|
||||
|
||||
export const bindPointToSnapToElementOutline = (
|
||||
linearElement: ExcalidrawLinearElement,
|
||||
arrow: ExcalidrawElbowArrowElement,
|
||||
bindableElement: ExcalidrawBindableElement,
|
||||
startOrEnd: "start" | "end",
|
||||
elementsMap: ElementsMap,
|
||||
): GlobalPoint => {
|
||||
const aabb = aabbForElement(bindableElement, elementsMap);
|
||||
const localP =
|
||||
linearElement.points[
|
||||
startOrEnd === "start" ? 0 : linearElement.points.length - 1
|
||||
];
|
||||
const globalP = pointFrom<GlobalPoint>(
|
||||
linearElement.x + localP[0],
|
||||
linearElement.y + localP[1],
|
||||
);
|
||||
|
||||
if (linearElement.points.length < 2) {
|
||||
// New arrow creation, so no snapping
|
||||
return globalP;
|
||||
if (isDevEnv() || isTestEnv()) {
|
||||
invariant(arrow.points.length > 1, "Arrow should have at least 2 points");
|
||||
}
|
||||
|
||||
const aabb = aabbForElement(bindableElement, elementsMap);
|
||||
const localP =
|
||||
arrow.points[startOrEnd === "start" ? 0 : arrow.points.length - 1];
|
||||
const globalP = pointFrom<GlobalPoint>(
|
||||
arrow.x + localP[0],
|
||||
arrow.y + localP[1],
|
||||
);
|
||||
const edgePoint = isRectanguloidElement(bindableElement)
|
||||
? avoidRectangularCorner(bindableElement, elementsMap, globalP)
|
||||
: globalP;
|
||||
const elbowed = isElbowArrow(linearElement);
|
||||
const elbowed = isElbowArrow(arrow);
|
||||
const center = getCenterForBounds(aabb);
|
||||
const adjacentPointIdx =
|
||||
startOrEnd === "start" ? 1 : linearElement.points.length - 2;
|
||||
const adjacentPointIdx = startOrEnd === "start" ? 1 : arrow.points.length - 2;
|
||||
const adjacentPoint = pointRotateRads(
|
||||
pointFrom<GlobalPoint>(
|
||||
linearElement.x + linearElement.points[adjacentPointIdx][0],
|
||||
linearElement.y + linearElement.points[adjacentPointIdx][1],
|
||||
arrow.x + arrow.points[adjacentPointIdx][0],
|
||||
arrow.y + arrow.points[adjacentPointIdx][1],
|
||||
),
|
||||
center,
|
||||
linearElement.angle ?? 0,
|
||||
arrow.angle ?? 0,
|
||||
);
|
||||
|
||||
let intersection: GlobalPoint | null = null;
|
||||
@ -1166,35 +1029,7 @@ export const bindPointToSnapToElementOutline = (
|
||||
return edgePoint;
|
||||
}
|
||||
|
||||
return intersection;
|
||||
};
|
||||
|
||||
export const getOutlineAvoidingPoint = (
|
||||
element: NonDeleted<ExcalidrawLinearElement>,
|
||||
hoveredElement: ExcalidrawBindableElement | null,
|
||||
coords: GlobalPoint,
|
||||
pointIndex: number,
|
||||
elementsMap: ElementsMap,
|
||||
): GlobalPoint => {
|
||||
if (hoveredElement) {
|
||||
const newPoints = Array.from(element.points);
|
||||
newPoints[pointIndex] = pointFrom<LocalPoint>(
|
||||
coords[0] - element.x,
|
||||
coords[1] - element.y,
|
||||
);
|
||||
|
||||
return bindPointToSnapToElementOutline(
|
||||
{
|
||||
...element,
|
||||
points: newPoints,
|
||||
},
|
||||
hoveredElement,
|
||||
pointIndex === 0 ? "start" : "end",
|
||||
elementsMap,
|
||||
);
|
||||
}
|
||||
|
||||
return coords;
|
||||
return elbowed ? intersection : edgePoint;
|
||||
};
|
||||
|
||||
export const avoidRectangularCorner = (
|
||||
@ -1419,22 +1254,15 @@ const updateBoundPoint = (
|
||||
const direction = startOrEnd === "startBinding" ? -1 : 1;
|
||||
const edgePointIndex = direction === -1 ? 0 : linearElement.points.length - 1;
|
||||
|
||||
if (isFixedPointBinding(binding)) {
|
||||
if (isElbowArrow(linearElement) && isFixedPointBinding(binding)) {
|
||||
const fixedPoint =
|
||||
normalizeFixedPoint(binding.fixedPoint) ??
|
||||
(isElbowArrow(linearElement)
|
||||
? calculateFixedPointForElbowArrowBinding(
|
||||
linearElement,
|
||||
bindableElement,
|
||||
startOrEnd === "startBinding" ? "start" : "end",
|
||||
elementsMap,
|
||||
).fixedPoint
|
||||
: calculateFixedPointForNonElbowArrowBinding(
|
||||
linearElement,
|
||||
bindableElement,
|
||||
startOrEnd === "startBinding" ? "start" : "end",
|
||||
elementsMap,
|
||||
).fixedPoint);
|
||||
calculateFixedPointForElbowArrowBinding(
|
||||
linearElement,
|
||||
bindableElement,
|
||||
startOrEnd === "startBinding" ? "start" : "end",
|
||||
elementsMap,
|
||||
).fixedPoint;
|
||||
const globalMidPoint = elementCenterPoint(bindableElement, elementsMap);
|
||||
const global = pointFrom<GlobalPoint>(
|
||||
bindableElement.x + fixedPoint[0] * bindableElement.width,
|
||||
@ -1573,42 +1401,6 @@ export const calculateFixedPointForElbowArrowBinding = (
|
||||
};
|
||||
};
|
||||
|
||||
export const calculateFixedPointForNonElbowArrowBinding = (
|
||||
linearElement: NonDeleted<ExcalidrawLinearElement>,
|
||||
hoveredElement: ExcalidrawBindableElement,
|
||||
startOrEnd: "start" | "end",
|
||||
elementsMap: ElementsMap,
|
||||
): { fixedPoint: FixedPoint } => {
|
||||
const edgePoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
|
||||
linearElement,
|
||||
startOrEnd === "start" ? 0 : -1,
|
||||
elementsMap,
|
||||
);
|
||||
|
||||
// Convert the global point to element-local coordinates
|
||||
const elementCenter = pointFrom(
|
||||
hoveredElement.x + hoveredElement.width / 2,
|
||||
hoveredElement.y + hoveredElement.height / 2,
|
||||
);
|
||||
|
||||
// Rotate the point to account for element rotation
|
||||
const nonRotatedPoint = pointRotateRads(
|
||||
edgePoint,
|
||||
elementCenter,
|
||||
-hoveredElement.angle as Radians,
|
||||
);
|
||||
|
||||
// Calculate the ratio relative to the element's bounds
|
||||
const fixedPointX =
|
||||
(nonRotatedPoint[0] - hoveredElement.x) / hoveredElement.width;
|
||||
const fixedPointY =
|
||||
(nonRotatedPoint[1] - hoveredElement.y) / hoveredElement.height;
|
||||
|
||||
return {
|
||||
fixedPoint: normalizeFixedPoint([fixedPointX, fixedPointY]),
|
||||
};
|
||||
};
|
||||
|
||||
const maybeCalculateNewGapWhenScaling = (
|
||||
changedElement: ExcalidrawBindableElement,
|
||||
currentBinding: PointBinding | null | undefined,
|
||||
@ -2420,18 +2212,16 @@ export const getGlobalFixedPointForBindableElement = (
|
||||
};
|
||||
|
||||
export const getGlobalFixedPoints = (
|
||||
arrow: ExcalidrawArrowElement,
|
||||
arrow: ExcalidrawElbowArrowElement,
|
||||
elementsMap: ElementsMap,
|
||||
): [GlobalPoint, GlobalPoint] => {
|
||||
const startElement =
|
||||
arrow.startBinding &&
|
||||
isFixedPointBinding(arrow.startBinding) &&
|
||||
(elementsMap.get(arrow.startBinding.elementId) as
|
||||
| ExcalidrawBindableElement
|
||||
| undefined);
|
||||
const endElement =
|
||||
arrow.endBinding &&
|
||||
isFixedPointBinding(arrow.endBinding) &&
|
||||
(elementsMap.get(arrow.endBinding.elementId) as
|
||||
| ExcalidrawBindableElement
|
||||
| undefined);
|
||||
|
||||
@ -13,7 +13,7 @@ import type {
|
||||
|
||||
import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
|
||||
|
||||
import { bindOrUnbindLinearElement, updateBoundElements } from "./binding";
|
||||
import { updateBoundElements } from "./binding";
|
||||
import { getCommonBounds } from "./bounds";
|
||||
import { getPerfectElementSize } from "./sizeHelpers";
|
||||
import { getBoundTextElement } from "./textElement";
|
||||
@ -102,26 +102,9 @@ export const dragSelectedElements = (
|
||||
gridSize,
|
||||
);
|
||||
|
||||
const elementsToUpdateIds = new Set(
|
||||
Array.from(elementsToUpdate, (el) => el.id),
|
||||
);
|
||||
|
||||
elementsToUpdate.forEach((element) => {
|
||||
const isArrow = !isArrowElement(element);
|
||||
const isStartBoundElementSelected =
|
||||
isArrow ||
|
||||
(element.startBinding
|
||||
? elementsToUpdateIds.has(element.startBinding.elementId)
|
||||
: false);
|
||||
const isEndBoundElementSelected =
|
||||
isArrow ||
|
||||
(element.endBinding
|
||||
? elementsToUpdateIds.has(element.endBinding.elementId)
|
||||
: false);
|
||||
|
||||
updateElementCoords(pointerDownState, element, scene, adjustedOffset);
|
||||
if (!isArrowElement(element)) {
|
||||
updateElementCoords(pointerDownState, element, scene, adjustedOffset);
|
||||
|
||||
// skip arrow labels since we calculate its position during render
|
||||
const textElement = getBoundTextElement(
|
||||
element,
|
||||
@ -135,33 +118,9 @@ export const dragSelectedElements = (
|
||||
adjustedOffset,
|
||||
);
|
||||
}
|
||||
|
||||
updateBoundElements(element, scene, {
|
||||
simultaneouslyUpdated: Array.from(elementsToUpdate),
|
||||
});
|
||||
} else if (
|
||||
// NOTE: Add a little initial drag to the arrow dragging to avoid
|
||||
// accidentally unbinding the arrow when the user just wants to select it.
|
||||
Math.max(Math.abs(adjustedOffset.x), Math.abs(adjustedOffset.y)) > 1
|
||||
) {
|
||||
updateElementCoords(pointerDownState, element, scene, adjustedOffset);
|
||||
|
||||
const shouldUnbindStart =
|
||||
element.startBinding && !isStartBoundElementSelected;
|
||||
const shouldUnbindEnd = element.endBinding && !isEndBoundElementSelected;
|
||||
|
||||
if (shouldUnbindStart || shouldUnbindEnd) {
|
||||
// NOTE: Moving the bound arrow should unbind it, otherwise we would
|
||||
// have weird situations, like 0 lenght arrow when the user moves
|
||||
// the arrow outside a filled shape suddenly forcing the arrow start
|
||||
// and end point to jump "outside" the shape.
|
||||
bindOrUnbindLinearElement(
|
||||
element,
|
||||
shouldUnbindStart ? null : "keep",
|
||||
shouldUnbindEnd ? null : "keep",
|
||||
scene,
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@ -25,9 +25,7 @@ import {
|
||||
|
||||
import {
|
||||
deconstructLinearOrFreeDrawElement,
|
||||
hitElementItself,
|
||||
isPathALoop,
|
||||
shouldTestInside,
|
||||
type Store,
|
||||
} from "@excalidraw/element";
|
||||
|
||||
@ -45,10 +43,8 @@ import type {
|
||||
import type { Mutable } from "@excalidraw/common/utility-types";
|
||||
|
||||
import {
|
||||
bindLinearElement,
|
||||
bindOrUnbindLinearElement,
|
||||
getHoveredElementForBinding,
|
||||
getOutlineAvoidingPoint,
|
||||
isBindingEnabled,
|
||||
maybeSuggestBindingsForLinearElementAtCoords,
|
||||
} from "./binding";
|
||||
@ -62,8 +58,6 @@ import { headingIsHorizontal, vectorToHeading } from "./heading";
|
||||
import { mutateElement } from "./mutateElement";
|
||||
import { getBoundTextElement, handleBindTextResize } from "./textElement";
|
||||
import {
|
||||
isArrowElement,
|
||||
isBindableElement,
|
||||
isBindingElement,
|
||||
isElbowArrow,
|
||||
isFixedPointBinding,
|
||||
@ -91,8 +85,6 @@ import type {
|
||||
FixedSegment,
|
||||
ExcalidrawElbowArrowElement,
|
||||
PointsPositionUpdates,
|
||||
NonDeletedExcalidrawElement,
|
||||
Ordered,
|
||||
} from "./types";
|
||||
|
||||
/**
|
||||
@ -142,7 +134,6 @@ export class LinearElementEditor {
|
||||
index: number | null;
|
||||
added: boolean;
|
||||
};
|
||||
arrowOtherPoint?: GlobalPoint;
|
||||
}>;
|
||||
|
||||
/** whether you're dragging a point */
|
||||
@ -287,7 +278,6 @@ export class LinearElementEditor {
|
||||
scenePointerX: number,
|
||||
scenePointerY: number,
|
||||
linearElementEditor: LinearElementEditor,
|
||||
thresholdCallback: (element: ExcalidrawElement) => number,
|
||||
): Pick<AppState, keyof AppState> | null {
|
||||
if (!linearElementEditor) {
|
||||
return null;
|
||||
@ -296,23 +286,19 @@ export class LinearElementEditor {
|
||||
const elementsMap = app.scene.getNonDeletedElementsMap();
|
||||
const element = LinearElementEditor.getElement(elementId, elementsMap);
|
||||
let customLineAngle = linearElementEditor.customLineAngle;
|
||||
let arrowOtherPoint: GlobalPoint | undefined =
|
||||
linearElementEditor.pointerDownState.arrowOtherPoint;
|
||||
if (!element) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const elbowed = isElbowArrow(element);
|
||||
|
||||
if (
|
||||
elbowed &&
|
||||
isElbowArrow(element) &&
|
||||
!linearElementEditor.pointerDownState.lastClickedIsEndPoint &&
|
||||
linearElementEditor.pointerDownState.lastClickedPoint !== 0
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const selectedPointsIndices = elbowed
|
||||
const selectedPointsIndices = isElbowArrow(element)
|
||||
? [
|
||||
!!linearElementEditor.selectedPointsIndices?.includes(0)
|
||||
? 0
|
||||
@ -322,7 +308,7 @@ export class LinearElementEditor {
|
||||
: undefined,
|
||||
].filter((idx): idx is number => idx !== undefined)
|
||||
: linearElementEditor.selectedPointsIndices;
|
||||
const lastClickedPoint = elbowed
|
||||
const lastClickedPoint = isElbowArrow(element)
|
||||
? linearElementEditor.pointerDownState.lastClickedPoint > 0
|
||||
? element.points.length - 1
|
||||
: 0
|
||||
@ -380,38 +366,38 @@ export class LinearElementEditor {
|
||||
scenePointerY - linearElementEditor.pointerOffset.y,
|
||||
event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
|
||||
);
|
||||
|
||||
const deltaX = newDraggingPointPosition[0] - draggingPoint[0];
|
||||
const deltaY = newDraggingPointPosition[1] - draggingPoint[1];
|
||||
const elements = app.scene.getNonDeletedElements();
|
||||
|
||||
arrowOtherPoint = pointDraggingOtherEndpoint(
|
||||
element,
|
||||
elementsMap,
|
||||
selectedPointsIndices,
|
||||
scenePointerX,
|
||||
scenePointerY,
|
||||
linearElementEditor,
|
||||
app.scene,
|
||||
thresholdCallback,
|
||||
);
|
||||
|
||||
LinearElementEditor.movePoints(
|
||||
element,
|
||||
app.scene,
|
||||
pointDraggingUpdates(
|
||||
selectedPointsIndices,
|
||||
deltaX,
|
||||
deltaY,
|
||||
elementsMap,
|
||||
lastClickedPoint,
|
||||
element,
|
||||
scenePointerX,
|
||||
scenePointerY,
|
||||
linearElementEditor,
|
||||
event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
|
||||
elements,
|
||||
app.state.zoom,
|
||||
app.state.bindMode,
|
||||
new Map(
|
||||
selectedPointsIndices.map((pointIndex) => {
|
||||
const newPointPosition: LocalPoint =
|
||||
pointIndex === lastClickedPoint
|
||||
? LinearElementEditor.createPointAt(
|
||||
element,
|
||||
elementsMap,
|
||||
scenePointerX - linearElementEditor.pointerOffset.x,
|
||||
scenePointerY - linearElementEditor.pointerOffset.y,
|
||||
event[KEYS.CTRL_OR_CMD]
|
||||
? null
|
||||
: app.getEffectiveGridSize(),
|
||||
)
|
||||
: pointFrom(
|
||||
element.points[pointIndex][0] + deltaX,
|
||||
element.points[pointIndex][1] + deltaY,
|
||||
);
|
||||
return [
|
||||
pointIndex,
|
||||
{
|
||||
point: newPointPosition,
|
||||
isDragging: pointIndex === lastClickedPoint,
|
||||
},
|
||||
];
|
||||
}),
|
||||
),
|
||||
);
|
||||
}
|
||||
@ -424,14 +410,16 @@ export class LinearElementEditor {
|
||||
// suggest bindings for first and last point if selected
|
||||
let suggestedBindings: ExcalidrawBindableElement[] = [];
|
||||
if (isBindingElement(element, false)) {
|
||||
const firstIndexIsSelected = selectedPointsIndices[0] === 0;
|
||||
const lastIndexIsSelected =
|
||||
const firstSelectedIndex = selectedPointsIndices[0] === 0;
|
||||
const lastSelectedIndex =
|
||||
selectedPointsIndices[selectedPointsIndices.length - 1] ===
|
||||
element.points.length - 1;
|
||||
const coords: { x: number; y: number }[] = [];
|
||||
|
||||
if (firstIndexIsSelected !== lastIndexIsSelected) {
|
||||
if (firstIndexIsSelected) {
|
||||
if (!firstSelectedIndex !== !lastSelectedIndex) {
|
||||
coords.push({ x: scenePointerX, y: scenePointerY });
|
||||
} else {
|
||||
if (firstSelectedIndex) {
|
||||
coords.push(
|
||||
tupleToCoors(
|
||||
LinearElementEditor.getPointGlobalCoordinates(
|
||||
@ -443,7 +431,7 @@ export class LinearElementEditor {
|
||||
);
|
||||
}
|
||||
|
||||
if (lastIndexIsSelected) {
|
||||
if (lastSelectedIndex) {
|
||||
coords.push(
|
||||
tupleToCoors(
|
||||
LinearElementEditor.getPointGlobalCoordinates(
|
||||
@ -464,7 +452,6 @@ export class LinearElementEditor {
|
||||
coords,
|
||||
app.scene,
|
||||
app.state.zoom,
|
||||
elementsMap,
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -488,10 +475,6 @@ export class LinearElementEditor {
|
||||
: -1,
|
||||
isDragging: true,
|
||||
customLineAngle,
|
||||
pointerDownState: {
|
||||
...linearElementEditor.pointerDownState,
|
||||
arrowOtherPoint,
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
@ -622,10 +605,6 @@ export class LinearElementEditor {
|
||||
isDragging: false,
|
||||
pointerOffset: { x: 0, y: 0 },
|
||||
customLineAngle: null,
|
||||
pointerDownState: {
|
||||
...editingLinearElement.pointerDownState,
|
||||
arrowOtherPoint: undefined,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@ -964,15 +943,8 @@ export class LinearElementEditor {
|
||||
// from the end points of the `linearElement` - this is to allow disabling
|
||||
// binding (which needs to happen at the point the user finishes moving
|
||||
// the point).
|
||||
const allPointSelected =
|
||||
linearElementEditor.pointerDownState.prevSelectedPointsIndices
|
||||
?.length === element.points.length;
|
||||
const { startBindingElement, endBindingElement } = linearElementEditor;
|
||||
if (
|
||||
!allPointSelected &&
|
||||
isBindingEnabled(appState) &&
|
||||
isBindingElement(element)
|
||||
) {
|
||||
if (isBindingEnabled(appState) && isBindingElement(element)) {
|
||||
bindOrUnbindLinearElement(
|
||||
element,
|
||||
startBindingElement,
|
||||
@ -1432,7 +1404,6 @@ export class LinearElementEditor {
|
||||
otherUpdates?: {
|
||||
startBinding?: PointBinding | null;
|
||||
endBinding?: PointBinding | null;
|
||||
moveMidPointsWithElement?: boolean | null;
|
||||
},
|
||||
) {
|
||||
const { points } = element;
|
||||
@ -1478,15 +1449,6 @@ export class LinearElementEditor {
|
||||
: points.map((p, idx) => {
|
||||
const current = pointUpdates.get(idx)?.point ?? p;
|
||||
|
||||
if (
|
||||
otherUpdates?.moveMidPointsWithElement &&
|
||||
idx !== 0 &&
|
||||
idx !== points.length - 1 &&
|
||||
!pointUpdates.has(idx)
|
||||
) {
|
||||
return pointFrom<LocalPoint>(current[0], current[1]);
|
||||
}
|
||||
|
||||
return pointFrom<LocalPoint>(
|
||||
current[0] - offsetX,
|
||||
current[1] - offsetY,
|
||||
@ -2015,242 +1977,3 @@ const normalizeSelectedPoints = (
|
||||
nextPoints = nextPoints.sort((a, b) => a - b);
|
||||
return nextPoints.length ? nextPoints : null;
|
||||
};
|
||||
|
||||
const pointDraggingUpdates = (
|
||||
selectedPointsIndices: readonly number[],
|
||||
deltaX: number,
|
||||
deltaY: number,
|
||||
elementsMap: NonDeletedSceneElementsMap,
|
||||
lastClickedPoint: number,
|
||||
element: NonDeleted<ExcalidrawLinearElement>,
|
||||
scenePointerX: number,
|
||||
scenePointerY: number,
|
||||
linearElementEditor: LinearElementEditor,
|
||||
gridSize: NullableGridSize,
|
||||
elements: readonly Ordered<NonDeletedExcalidrawElement>[],
|
||||
zoom: AppState["zoom"],
|
||||
bindMode: AppState["bindMode"],
|
||||
): PointsPositionUpdates => {
|
||||
const hasMidPoints =
|
||||
selectedPointsIndices.filter(
|
||||
(_, idx) => idx > 0 && idx < element.points.length - 1,
|
||||
).length > 0;
|
||||
|
||||
return new Map(
|
||||
selectedPointsIndices.map((pointIndex) => {
|
||||
let newPointPosition: LocalPoint =
|
||||
pointIndex === lastClickedPoint
|
||||
? LinearElementEditor.createPointAt(
|
||||
element,
|
||||
elementsMap,
|
||||
scenePointerX - linearElementEditor.pointerOffset.x,
|
||||
scenePointerY - linearElementEditor.pointerOffset.y,
|
||||
gridSize,
|
||||
)
|
||||
: pointFrom(
|
||||
element.points[pointIndex][0] + deltaX,
|
||||
element.points[pointIndex][1] + deltaY,
|
||||
);
|
||||
|
||||
if (
|
||||
!hasMidPoints &&
|
||||
(pointIndex === 0 || pointIndex === element.points.length - 1)
|
||||
) {
|
||||
const [, , , , cx, cy] = getElementAbsoluteCoords(
|
||||
element,
|
||||
elementsMap,
|
||||
true,
|
||||
);
|
||||
let newGlobalPointPosition = pointRotateRads(
|
||||
pointFrom<GlobalPoint>(
|
||||
element.x + newPointPosition[0],
|
||||
element.y + newPointPosition[1],
|
||||
),
|
||||
pointFrom<GlobalPoint>(cx, cy),
|
||||
element.angle,
|
||||
);
|
||||
const hoveredElement = getHoveredElementForBinding(
|
||||
{
|
||||
x: newGlobalPointPosition[0],
|
||||
y: newGlobalPointPosition[1],
|
||||
},
|
||||
elements,
|
||||
elementsMap,
|
||||
zoom,
|
||||
shouldTestInside(element),
|
||||
isElbowArrow(element),
|
||||
);
|
||||
|
||||
const otherGlobalPoint =
|
||||
LinearElementEditor.getPointAtIndexGlobalCoordinates(
|
||||
element,
|
||||
pointIndex === 0 ? element.points.length - 1 : 0,
|
||||
elementsMap,
|
||||
);
|
||||
const otherHoveredElement = getHoveredElementForBinding(
|
||||
{
|
||||
x: otherGlobalPoint[0],
|
||||
y: otherGlobalPoint[1],
|
||||
},
|
||||
elements,
|
||||
elementsMap,
|
||||
zoom,
|
||||
shouldTestInside(element),
|
||||
isElbowArrow(element),
|
||||
);
|
||||
|
||||
// Allow binding inside the element if both ends are inside
|
||||
if (
|
||||
isArrowElement(element) &&
|
||||
!(
|
||||
hoveredElement?.id === otherHoveredElement?.id &&
|
||||
hoveredElement != null
|
||||
) &&
|
||||
bindMode === "focus"
|
||||
) {
|
||||
newGlobalPointPosition = getOutlineAvoidingPoint(
|
||||
element,
|
||||
hoveredElement,
|
||||
newGlobalPointPosition,
|
||||
pointIndex,
|
||||
elementsMap,
|
||||
);
|
||||
}
|
||||
|
||||
newPointPosition = LinearElementEditor.createPointAt(
|
||||
element,
|
||||
elementsMap,
|
||||
newGlobalPointPosition[0] - linearElementEditor.pointerOffset.x,
|
||||
newGlobalPointPosition[1] - linearElementEditor.pointerOffset.y,
|
||||
null,
|
||||
);
|
||||
}
|
||||
|
||||
return [
|
||||
pointIndex,
|
||||
{
|
||||
point: newPointPosition,
|
||||
isDragging: pointIndex === lastClickedPoint,
|
||||
},
|
||||
];
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
const pointDraggingOtherEndpoint = (
|
||||
element: NonDeleted<ExcalidrawLinearElement>,
|
||||
elementsMap: NonDeletedSceneElementsMap,
|
||||
selectedPointsIndices: readonly number[],
|
||||
scenePointerX: number,
|
||||
scenePointerY: number,
|
||||
linearElementEditor: LinearElementEditor,
|
||||
scene: Scene,
|
||||
thresholdCallback: (element: ExcalidrawElement) => number,
|
||||
) => {
|
||||
let arrowOtherPoint = linearElementEditor.pointerDownState.arrowOtherPoint;
|
||||
|
||||
if (isArrowElement(element) && !isElbowArrow(element)) {
|
||||
const startPointIsIncluded = selectedPointsIndices.includes(0);
|
||||
const endPointIsIncluded = selectedPointsIndices.includes(
|
||||
element.points.length - 1,
|
||||
);
|
||||
if (
|
||||
// Make sure that not both of the endpoints are selected
|
||||
(startPointIsIncluded || endPointIsIncluded) &&
|
||||
startPointIsIncluded !== endPointIsIncluded
|
||||
) {
|
||||
const otherBinding =
|
||||
element[startPointIsIncluded ? "endBinding" : "startBinding"];
|
||||
if (
|
||||
// The other end is bound
|
||||
otherBinding
|
||||
) {
|
||||
const otherElement = elementsMap.get(otherBinding.elementId);
|
||||
|
||||
invariant(
|
||||
isBindableElement(otherElement),
|
||||
"Other element should exist in elementsMap at all times and be a bindable element",
|
||||
);
|
||||
|
||||
let newOtherPointPosition;
|
||||
|
||||
// Only avoid shape if the start and end point is not inside
|
||||
// the same element
|
||||
if (
|
||||
!hitElementItself({
|
||||
point: pointFrom(scenePointerX, scenePointerY),
|
||||
element: otherElement,
|
||||
elementsMap,
|
||||
threshold: thresholdCallback(otherElement),
|
||||
})
|
||||
) {
|
||||
// If we don't have a restore point, that means we need to jump out
|
||||
// of the element but first, create the restore point
|
||||
if (!arrowOtherPoint) {
|
||||
arrowOtherPoint = LinearElementEditor.getPointGlobalCoordinates(
|
||||
element,
|
||||
element.points[
|
||||
startPointIsIncluded ? element.points.length - 1 : 0
|
||||
],
|
||||
elementsMap,
|
||||
);
|
||||
}
|
||||
|
||||
// Find a snap point outside the element
|
||||
const newOtherGlobalPoint = getOutlineAvoidingPoint(
|
||||
element,
|
||||
otherElement,
|
||||
arrowOtherPoint,
|
||||
startPointIsIncluded ? element.points.length - 1 : 0,
|
||||
elementsMap,
|
||||
);
|
||||
|
||||
newOtherPointPosition = LinearElementEditor.createPointAt(
|
||||
element,
|
||||
elementsMap,
|
||||
newOtherGlobalPoint[0] - linearElementEditor.pointerOffset.x,
|
||||
newOtherGlobalPoint[1] - linearElementEditor.pointerOffset.y,
|
||||
null,
|
||||
);
|
||||
}
|
||||
// Restore the saved point if we are back inside the element
|
||||
else if (arrowOtherPoint) {
|
||||
newOtherPointPosition = LinearElementEditor.createPointAt(
|
||||
element,
|
||||
elementsMap,
|
||||
arrowOtherPoint[0] - linearElementEditor.pointerOffset.x,
|
||||
arrowOtherPoint[1] - linearElementEditor.pointerOffset.y,
|
||||
null,
|
||||
);
|
||||
|
||||
arrowOtherPoint = undefined;
|
||||
}
|
||||
|
||||
// Finally, move the other endpoint if needed
|
||||
if (newOtherPointPosition) {
|
||||
LinearElementEditor.movePoints(
|
||||
element,
|
||||
scene,
|
||||
new Map([
|
||||
[
|
||||
startPointIsIncluded ? element.points.length - 1 : 0,
|
||||
{
|
||||
point: newOtherPointPosition,
|
||||
},
|
||||
],
|
||||
]),
|
||||
);
|
||||
|
||||
bindLinearElement(
|
||||
element,
|
||||
otherElement,
|
||||
startPointIsIncluded ? "end" : "start",
|
||||
scene,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return arrowOtherPoint;
|
||||
};
|
||||
|
||||
@ -12,7 +12,7 @@ import { ShapeCache } from "./shape";
|
||||
|
||||
import { updateElbowArrowPoints } from "./elbowArrow";
|
||||
|
||||
import { isElbowArrow, isFixedPointBinding } from "./typeChecks";
|
||||
import { isElbowArrow } from "./typeChecks";
|
||||
|
||||
import type {
|
||||
ElementsMap,
|
||||
@ -54,8 +54,8 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
|
||||
(Object.keys(updates).length === 0 || // normalization case
|
||||
typeof points !== "undefined" || // repositioning
|
||||
typeof fixedSegments !== "undefined" || // segment fixing
|
||||
isFixedPointBinding(startBinding) ||
|
||||
isFixedPointBinding(endBinding)) // manual binding to element
|
||||
typeof startBinding !== "undefined" ||
|
||||
typeof endBinding !== "undefined") // manual binding to element
|
||||
) {
|
||||
updates = {
|
||||
...updates,
|
||||
|
||||
@ -362,7 +362,6 @@ export const isFixedPointBinding = (
|
||||
binding: PointBinding | FixedPointBinding,
|
||||
): binding is FixedPointBinding => {
|
||||
return (
|
||||
binding != null &&
|
||||
Object.hasOwn(binding, "fixedPoint") &&
|
||||
(binding as FixedPointBinding).fixedPoint != null
|
||||
);
|
||||
|
||||
@ -323,8 +323,8 @@ export type ExcalidrawLinearElement = _ExcalidrawElementBase &
|
||||
type: "line" | "arrow";
|
||||
points: readonly LocalPoint[];
|
||||
lastCommittedPoint: LocalPoint | null;
|
||||
startBinding: FixedPointBinding | PointBinding | null;
|
||||
endBinding: FixedPointBinding | PointBinding | null;
|
||||
startBinding: PointBinding | null;
|
||||
endBinding: PointBinding | null;
|
||||
startArrowhead: Arrowhead | null;
|
||||
endArrowhead: Arrowhead | null;
|
||||
}>;
|
||||
@ -351,9 +351,9 @@ export type ExcalidrawElbowArrowElement = Merge<
|
||||
ExcalidrawArrowElement,
|
||||
{
|
||||
elbowed: true;
|
||||
fixedSegments: readonly FixedSegment[] | null;
|
||||
startBinding: FixedPointBinding | null;
|
||||
endBinding: FixedPointBinding | null;
|
||||
fixedSegments: readonly FixedSegment[] | null;
|
||||
/**
|
||||
* Marks that the 3rd point should be used as the 2nd point of the arrow in
|
||||
* order to temporarily hide the first segment of the arrow without losing
|
||||
|
||||
@ -8,13 +8,7 @@ import { Excalidraw, isLinearElement } from "@excalidraw/excalidraw";
|
||||
|
||||
import { API } from "@excalidraw/excalidraw/tests/helpers/api";
|
||||
import { UI, Pointer, Keyboard } from "@excalidraw/excalidraw/tests/helpers/ui";
|
||||
import {
|
||||
act,
|
||||
fireEvent,
|
||||
render,
|
||||
} from "@excalidraw/excalidraw/tests/test-utils";
|
||||
|
||||
import { defaultLang, setLanguage } from "@excalidraw/excalidraw/i18n";
|
||||
import { fireEvent, render } from "@excalidraw/excalidraw/tests/test-utils";
|
||||
|
||||
import { getTransformHandles } from "../src/transformHandles";
|
||||
import {
|
||||
@ -22,8 +16,6 @@ import {
|
||||
TEXT_EDITOR_SELECTOR,
|
||||
} from "../../excalidraw/tests/queries/dom";
|
||||
|
||||
import type { ExcalidrawLinearElement, FixedPointBinding } from "../src/types";
|
||||
|
||||
const { h } = window;
|
||||
|
||||
const mouse = new Pointer("mouse");
|
||||
@ -79,9 +71,8 @@ describe("element binding", () => {
|
||||
|
||||
expect(arrow.startBinding).toEqual({
|
||||
elementId: rect.id,
|
||||
focus: 0,
|
||||
gap: 0,
|
||||
fixedPoint: expect.arrayContaining([1.1, 0]),
|
||||
focus: expect.toBeNonNaNNumber(),
|
||||
gap: expect.toBeNonNaNNumber(),
|
||||
});
|
||||
|
||||
// Move the end point to the overlapping binding position
|
||||
@ -92,15 +83,13 @@ describe("element binding", () => {
|
||||
// Both the start and the end points should be bound
|
||||
expect(arrow.startBinding).toEqual({
|
||||
elementId: rect.id,
|
||||
focus: 0,
|
||||
gap: 0,
|
||||
fixedPoint: expect.arrayContaining([1.1, 0]),
|
||||
focus: expect.toBeNonNaNNumber(),
|
||||
gap: expect.toBeNonNaNNumber(),
|
||||
});
|
||||
expect(arrow.endBinding).toEqual({
|
||||
elementId: rect.id,
|
||||
focus: 0,
|
||||
gap: 0,
|
||||
fixedPoint: expect.arrayContaining([1.1, 0]),
|
||||
focus: expect.toBeNonNaNNumber(),
|
||||
gap: expect.toBeNonNaNNumber(),
|
||||
});
|
||||
});
|
||||
|
||||
@ -199,9 +188,9 @@ describe("element binding", () => {
|
||||
// Test sticky connection
|
||||
expect(API.getSelectedElement().type).toBe("arrow");
|
||||
Keyboard.keyPress(KEYS.ARROW_RIGHT);
|
||||
expect(arrow.endBinding?.elementId).not.toBe(rectangle.id);
|
||||
expect(arrow.endBinding?.elementId).toBe(rectangle.id);
|
||||
Keyboard.keyPress(KEYS.ARROW_LEFT);
|
||||
expect(arrow.endBinding?.elementId).not.toBe(rectangle.id);
|
||||
expect(arrow.endBinding?.elementId).toBe(rectangle.id);
|
||||
|
||||
// Sever connection
|
||||
expect(API.getSelectedElement().type).toBe("arrow");
|
||||
@ -487,354 +476,3 @@ describe("element binding", () => {
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("Fixed-point arrow binding", () => {
|
||||
beforeEach(async () => {
|
||||
await render(<Excalidraw handleKeyboardGlobally={true} />);
|
||||
});
|
||||
|
||||
it("should create fixed-point binding when both arrow endpoint is inside rectangle", () => {
|
||||
// Create a filled solid rectangle
|
||||
UI.clickTool("rectangle");
|
||||
mouse.downAt(100, 100);
|
||||
mouse.moveTo(200, 200);
|
||||
mouse.up();
|
||||
|
||||
const rect = API.getSelectedElement();
|
||||
API.updateElement(rect, { fillStyle: "solid", backgroundColor: "#a5d8ff" });
|
||||
|
||||
// Draw arrow with endpoint inside the filled rectangle, since only
|
||||
// filled bindables bind inside the shape
|
||||
UI.clickTool("arrow");
|
||||
mouse.downAt(110, 110);
|
||||
mouse.moveTo(160, 160);
|
||||
mouse.up();
|
||||
|
||||
const arrow = API.getSelectedElement() as ExcalidrawLinearElement;
|
||||
expect(arrow.x).toBe(110);
|
||||
expect(arrow.y).toBe(110);
|
||||
|
||||
// Should bind to the rectangle since endpoint is inside
|
||||
expect(arrow.startBinding?.elementId).toBe(rect.id);
|
||||
expect(arrow.endBinding?.elementId).toBe(rect.id);
|
||||
|
||||
const startBinding = arrow.startBinding as FixedPointBinding;
|
||||
expect(startBinding.fixedPoint[0]).toBeGreaterThanOrEqual(0);
|
||||
expect(startBinding.fixedPoint[0]).toBeLessThanOrEqual(1);
|
||||
expect(startBinding.fixedPoint[1]).toBeGreaterThanOrEqual(0);
|
||||
expect(startBinding.fixedPoint[1]).toBeLessThanOrEqual(1);
|
||||
|
||||
const endBinding = arrow.endBinding as FixedPointBinding;
|
||||
expect(endBinding.fixedPoint[0]).toBeGreaterThanOrEqual(0);
|
||||
expect(endBinding.fixedPoint[0]).toBeLessThanOrEqual(1);
|
||||
expect(endBinding.fixedPoint[1]).toBeGreaterThanOrEqual(0);
|
||||
expect(endBinding.fixedPoint[1]).toBeLessThanOrEqual(1);
|
||||
|
||||
mouse.reset();
|
||||
|
||||
// Move the bindable
|
||||
mouse.downAt(130, 110);
|
||||
mouse.moveTo(280, 110);
|
||||
mouse.up();
|
||||
|
||||
// Check if the arrow moved
|
||||
expect(arrow.x).toBe(260);
|
||||
expect(arrow.y).toBe(110);
|
||||
});
|
||||
|
||||
it("should create fixed-point binding when one of the arrow endpoint is inside rectangle", () => {
|
||||
// Create a filled solid rectangle
|
||||
UI.clickTool("rectangle");
|
||||
mouse.downAt(100, 100);
|
||||
mouse.moveTo(200, 200);
|
||||
mouse.up();
|
||||
|
||||
const rect = API.getSelectedElement();
|
||||
API.updateElement(rect, { fillStyle: "solid", backgroundColor: "#a5d8ff" });
|
||||
|
||||
// Draw arrow with endpoint inside the filled rectangle, since only
|
||||
// filled bindables bind inside the shape
|
||||
UI.clickTool("arrow");
|
||||
mouse.downAt(10, 10);
|
||||
mouse.moveTo(160, 160);
|
||||
mouse.up();
|
||||
|
||||
const arrow = API.getSelectedElement() as ExcalidrawLinearElement;
|
||||
expect(arrow.x).toBe(10);
|
||||
expect(arrow.y).toBe(10);
|
||||
expect(arrow.width).toBe(150);
|
||||
expect(arrow.height).toBe(150);
|
||||
|
||||
// Should bind to the rectangle since endpoint is inside
|
||||
expect(arrow.startBinding).toBe(null);
|
||||
expect(arrow.endBinding?.elementId).toBe(rect.id);
|
||||
|
||||
const endBinding = arrow.endBinding as FixedPointBinding;
|
||||
expect(endBinding.fixedPoint[0]).toBeGreaterThanOrEqual(0);
|
||||
expect(endBinding.fixedPoint[0]).toBeLessThanOrEqual(1);
|
||||
expect(endBinding.fixedPoint[1]).toBeGreaterThanOrEqual(0);
|
||||
expect(endBinding.fixedPoint[1]).toBeLessThanOrEqual(1);
|
||||
|
||||
mouse.reset();
|
||||
|
||||
// Move the bindable
|
||||
mouse.downAt(130, 110);
|
||||
mouse.moveTo(280, 110);
|
||||
mouse.up();
|
||||
|
||||
// Check if the arrow moved
|
||||
expect(arrow.x).toBe(10);
|
||||
expect(arrow.y).toBe(10);
|
||||
expect(arrow.width).toBe(300);
|
||||
expect(arrow.height).toBe(150);
|
||||
});
|
||||
|
||||
it("should maintain relative position when arrow start point is dragged outside and rectangle is moved", () => {
|
||||
// Create a filled solid rectangle
|
||||
UI.clickTool("rectangle");
|
||||
mouse.downAt(100, 100);
|
||||
mouse.moveTo(200, 200);
|
||||
mouse.up();
|
||||
|
||||
const rect = API.getSelectedElement();
|
||||
API.updateElement(rect, { fillStyle: "solid", backgroundColor: "#a5d8ff" });
|
||||
|
||||
// Draw arrow with both endpoints inside the filled rectangle, creating same-element binding
|
||||
UI.clickTool("arrow");
|
||||
mouse.downAt(120, 120);
|
||||
mouse.moveTo(180, 180);
|
||||
mouse.up();
|
||||
|
||||
const arrow = API.getSelectedElement() as ExcalidrawLinearElement;
|
||||
|
||||
// Both ends should be bound to the same rectangle
|
||||
expect(arrow.startBinding?.elementId).toBe(rect.id);
|
||||
expect(arrow.endBinding?.elementId).toBe(rect.id);
|
||||
|
||||
mouse.reset();
|
||||
|
||||
// Select the arrow and drag the start point outside the rectangle
|
||||
mouse.downAt(120, 120);
|
||||
mouse.moveTo(50, 50); // Move start point outside rectangle
|
||||
mouse.up();
|
||||
|
||||
mouse.reset();
|
||||
|
||||
// Move the rectangle by dragging it
|
||||
mouse.downAt(150, 110);
|
||||
mouse.moveTo(300, 300);
|
||||
mouse.up();
|
||||
|
||||
// The end point should be a normal point binding
|
||||
const endBinding = arrow.endBinding as FixedPointBinding;
|
||||
expect(endBinding.focus).toBeCloseTo(0);
|
||||
expect(endBinding.gap).toBeCloseTo(0);
|
||||
|
||||
expect(arrow.x).toBe(50);
|
||||
expect(arrow.y).toBe(50);
|
||||
expect(arrow.width).toBeCloseTo(304, 0);
|
||||
expect(arrow.height).toBeCloseTo(344, 0);
|
||||
});
|
||||
|
||||
it("should move inner points when arrow is bound to same element on both ends", () => {
|
||||
// Create one rectangle as binding target
|
||||
const rect = API.createElement({
|
||||
type: "rectangle",
|
||||
x: 50,
|
||||
y: 50,
|
||||
width: 200,
|
||||
height: 100,
|
||||
fillStyle: "solid",
|
||||
backgroundColor: "#a5d8ff",
|
||||
});
|
||||
|
||||
// Create a non-elbowed arrow with inner points bound to the same element on both ends
|
||||
const arrow = API.createElement({
|
||||
type: "arrow",
|
||||
x: 100,
|
||||
y: 75,
|
||||
width: 100,
|
||||
height: 50,
|
||||
points: [
|
||||
pointFrom(0, 0), // start point
|
||||
pointFrom(25, -25), // first inner point
|
||||
pointFrom(75, 25), // second inner point
|
||||
pointFrom(100, 0), // end point
|
||||
],
|
||||
startBinding: {
|
||||
elementId: rect.id,
|
||||
focus: 0,
|
||||
gap: 0,
|
||||
fixedPoint: [0.25, 0.5],
|
||||
},
|
||||
endBinding: {
|
||||
elementId: rect.id,
|
||||
focus: 0,
|
||||
gap: 0,
|
||||
fixedPoint: [0.75, 0.5],
|
||||
},
|
||||
});
|
||||
|
||||
API.setElements([rect, arrow]);
|
||||
|
||||
// Store original inner point positions (local coordinates)
|
||||
const originalInnerPoint1 = [...arrow.points[1]];
|
||||
const originalInnerPoint2 = [...arrow.points[2]];
|
||||
|
||||
// Move the rectangle
|
||||
mouse.reset();
|
||||
mouse.downAt(150, 100); // Click on the rectangle
|
||||
mouse.moveTo(300, 200); // Move it down and to the right
|
||||
mouse.up();
|
||||
|
||||
// Verify that inner points moved with the arrow (same local coordinates)
|
||||
// When both ends are bound to the same element, inner points should maintain
|
||||
// their local coordinates relative to the arrow's origin
|
||||
expect(arrow.points[1][0]).toBe(originalInnerPoint1[0]);
|
||||
expect(arrow.points[1][1]).toBe(originalInnerPoint1[1]);
|
||||
expect(arrow.points[2][0]).toBe(originalInnerPoint2[0]);
|
||||
expect(arrow.points[2][1]).toBe(originalInnerPoint2[1]);
|
||||
});
|
||||
|
||||
it("should NOT move inner points when arrow is bound to different elements", () => {
|
||||
// Create two rectangles as binding targets
|
||||
const rectLeft = API.createElement({
|
||||
type: "rectangle",
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 100,
|
||||
height: 100,
|
||||
});
|
||||
|
||||
const rectRight = API.createElement({
|
||||
type: "rectangle",
|
||||
x: 300,
|
||||
y: 0,
|
||||
width: 100,
|
||||
height: 100,
|
||||
});
|
||||
|
||||
// Create a non-elbowed arrow with inner points bound to different elements
|
||||
const arrow = API.createElement({
|
||||
type: "arrow",
|
||||
x: 100,
|
||||
y: 50,
|
||||
width: 200,
|
||||
height: 0,
|
||||
points: [
|
||||
pointFrom(0, 0), // start point
|
||||
pointFrom(50, -20), // first inner point
|
||||
pointFrom(150, 20), // second inner point
|
||||
pointFrom(200, 0), // end point
|
||||
],
|
||||
startBinding: {
|
||||
elementId: rectLeft.id,
|
||||
focus: 0.5,
|
||||
gap: 5,
|
||||
},
|
||||
endBinding: {
|
||||
elementId: rectRight.id,
|
||||
focus: 0.5,
|
||||
gap: 5,
|
||||
},
|
||||
});
|
||||
|
||||
API.setElements([rectLeft, rectRight, arrow]);
|
||||
|
||||
// Store original inner point positions
|
||||
const originalInnerPoint1 = [...arrow.points[1]];
|
||||
const originalInnerPoint2 = [...arrow.points[2]];
|
||||
|
||||
// Move the right rectangle down by 50 pixels
|
||||
mouse.reset();
|
||||
mouse.downAt(350, 50); // Click on the right rectangle
|
||||
mouse.moveTo(350, 100); // Move it down
|
||||
mouse.up();
|
||||
|
||||
// Verify that inner points did NOT move when bound to different elements
|
||||
// The arrow should NOT translate inner points proportionally when only one end moves
|
||||
expect(arrow.points[1][0]).toBe(originalInnerPoint1[0]);
|
||||
expect(arrow.points[1][1]).toBe(originalInnerPoint1[1]);
|
||||
expect(arrow.points[2][0]).toBe(originalInnerPoint2[0]);
|
||||
expect(arrow.points[2][1]).toBe(originalInnerPoint2[1]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("line segment extension binding", () => {
|
||||
beforeEach(async () => {
|
||||
mouse.reset();
|
||||
|
||||
await act(() => {
|
||||
return setLanguage(defaultLang);
|
||||
});
|
||||
await render(<Excalidraw handleKeyboardGlobally={true} />);
|
||||
});
|
||||
|
||||
it("should use point binding when extended segment intersects element", () => {
|
||||
// Create a rectangle that will be intersected by the extended arrow segment
|
||||
const rect = API.createElement({
|
||||
type: "rectangle",
|
||||
x: 100,
|
||||
y: 100,
|
||||
width: 100,
|
||||
height: 100,
|
||||
});
|
||||
|
||||
API.setElements([rect]);
|
||||
|
||||
// Draw an arrow that points at the rectangle (extended segment will intersect)
|
||||
UI.clickTool("arrow");
|
||||
mouse.downAt(0, 0); // Start point
|
||||
mouse.moveTo(120, 95); // End point - arrow direction points toward rectangle
|
||||
mouse.up();
|
||||
|
||||
const arrow = API.getSelectedElement() as ExcalidrawLinearElement;
|
||||
|
||||
// Should create a normal point binding since the extended line segment
|
||||
// from the last arrow segment intersects the rectangle
|
||||
expect(arrow.endBinding?.elementId).toBe(rect.id);
|
||||
expect(arrow.endBinding).toHaveProperty("focus");
|
||||
expect(arrow.endBinding).toHaveProperty("gap");
|
||||
expect(arrow.endBinding).not.toHaveProperty("fixedPoint");
|
||||
});
|
||||
|
||||
it("should use fixed point binding when extended segment misses element", () => {
|
||||
// Create a rectangle positioned so the extended arrow segment will miss it
|
||||
const rect = API.createElement({
|
||||
type: "rectangle",
|
||||
x: 100,
|
||||
y: 100,
|
||||
width: 100,
|
||||
height: 100,
|
||||
});
|
||||
|
||||
API.setElements([rect]);
|
||||
|
||||
// Draw an arrow that doesn't point at the rectangle (extended segment will miss)
|
||||
UI.clickTool("arrow");
|
||||
mouse.reset();
|
||||
mouse.downAt(125, 93); // Start point
|
||||
mouse.moveTo(175, 93); // End point - arrow direction is horizontal, misses rectangle
|
||||
mouse.up();
|
||||
|
||||
const arrow = API.getSelectedElement() as ExcalidrawLinearElement;
|
||||
|
||||
// Should create a fixed point binding since the extended line segment
|
||||
// from the last arrow segment misses the rectangle
|
||||
expect(arrow.startBinding?.elementId).toBe(rect.id);
|
||||
expect(arrow.startBinding).toHaveProperty("fixedPoint");
|
||||
expect(
|
||||
(arrow.startBinding as FixedPointBinding).fixedPoint[0],
|
||||
).toBeGreaterThanOrEqual(0);
|
||||
expect(
|
||||
(arrow.startBinding as FixedPointBinding).fixedPoint[0],
|
||||
).toBeLessThanOrEqual(1);
|
||||
expect(
|
||||
(arrow.startBinding as FixedPointBinding).fixedPoint[1],
|
||||
).toBeLessThanOrEqual(0);
|
||||
expect(
|
||||
(arrow.startBinding as FixedPointBinding).fixedPoint[1],
|
||||
).toBeLessThanOrEqual(1);
|
||||
expect(arrow.endBinding).toBe(null);
|
||||
});
|
||||
});
|
||||
|
||||
@ -27,7 +27,6 @@ import type {
|
||||
ExcalidrawElbowArrowElement,
|
||||
ExcalidrawFreeDrawElement,
|
||||
ExcalidrawLinearElement,
|
||||
PointBinding,
|
||||
} from "../src/types";
|
||||
|
||||
unmountComponent();
|
||||
@ -1024,20 +1023,8 @@ describe("multiple selection", () => {
|
||||
1 - move[0] / selectionWidth,
|
||||
1 - move[1] / selectionHeight,
|
||||
);
|
||||
const leftArrowBinding: {
|
||||
elementId: string;
|
||||
gap?: number;
|
||||
focus?: number;
|
||||
} = {
|
||||
...leftBoundArrow.endBinding,
|
||||
} as PointBinding;
|
||||
const rightArrowBinding: {
|
||||
elementId: string;
|
||||
gap?: number;
|
||||
focus?: number;
|
||||
} = {
|
||||
...rightBoundArrow.endBinding,
|
||||
} as PointBinding;
|
||||
const leftArrowBinding = { ...leftBoundArrow.endBinding };
|
||||
const rightArrowBinding = { ...rightBoundArrow.endBinding };
|
||||
delete rightArrowBinding.gap;
|
||||
|
||||
UI.resize([rectangle, rightBoundArrow], "nw", move, {
|
||||
|
||||
@ -4,14 +4,8 @@ import {
|
||||
maybeBindLinearElement,
|
||||
bindOrUnbindLinearElement,
|
||||
isBindingEnabled,
|
||||
getHoveredElementForBinding,
|
||||
} from "@excalidraw/element/binding";
|
||||
import {
|
||||
isElbowArrow,
|
||||
isValidPolygon,
|
||||
LinearElementEditor,
|
||||
shouldTestInside,
|
||||
} from "@excalidraw/element";
|
||||
import { isValidPolygon, LinearElementEditor } from "@excalidraw/element";
|
||||
|
||||
import {
|
||||
isBindingElement,
|
||||
@ -32,7 +26,7 @@ import { isInvisiblySmallElement } from "@excalidraw/element";
|
||||
|
||||
import { CaptureUpdateAction } from "@excalidraw/element";
|
||||
|
||||
import type { GlobalPoint, LocalPoint } from "@excalidraw/math";
|
||||
import type { LocalPoint } from "@excalidraw/math";
|
||||
import type {
|
||||
ExcalidrawElement,
|
||||
ExcalidrawLinearElement,
|
||||
@ -100,22 +94,13 @@ export const actionFinalize = register({
|
||||
}
|
||||
}
|
||||
|
||||
if (appState.editingLinearElement && !appState.newElement) {
|
||||
if (appState.editingLinearElement) {
|
||||
const { elementId, startBindingElement, endBindingElement } =
|
||||
appState.editingLinearElement;
|
||||
const element = LinearElementEditor.getElement(elementId, elementsMap);
|
||||
|
||||
if (element) {
|
||||
// NOTE: Dragging the entire arrow doesn't allow binding.
|
||||
const allPointsSelected =
|
||||
appState.editingLinearElement?.pointerDownState
|
||||
.prevSelectedPointsIndices?.length === element.points.length;
|
||||
|
||||
if (
|
||||
!allPointsSelected &&
|
||||
isBindingEnabled(appState) &&
|
||||
isBindingElement(element)
|
||||
) {
|
||||
if (isBindingElement(element)) {
|
||||
bindOrUnbindLinearElement(
|
||||
element,
|
||||
startBindingElement,
|
||||
@ -123,7 +108,6 @@ export const actionFinalize = register({
|
||||
scene,
|
||||
);
|
||||
}
|
||||
|
||||
if (isLineElement(element) && !isValidPolygon(element.points)) {
|
||||
scene.mutateElement(element, {
|
||||
polygon: false,
|
||||
@ -175,26 +159,10 @@ export const actionFinalize = register({
|
||||
element.type !== "freedraw" &&
|
||||
appState.lastPointerDownWith !== "touch"
|
||||
) {
|
||||
const { x: rx, y: ry, points, lastCommittedPoint } = element;
|
||||
const lastGlobalPoint = pointFrom<GlobalPoint>(
|
||||
rx + points[points.length - 1][0],
|
||||
ry + points[points.length - 1][1],
|
||||
);
|
||||
const hoveredElementForBinding = getHoveredElementForBinding(
|
||||
{
|
||||
x: lastGlobalPoint[0],
|
||||
y: lastGlobalPoint[1],
|
||||
},
|
||||
elements,
|
||||
elementsMap,
|
||||
app.state.zoom,
|
||||
shouldTestInside(element),
|
||||
isElbowArrow(element),
|
||||
);
|
||||
const { points, lastCommittedPoint } = element;
|
||||
if (
|
||||
!hoveredElementForBinding &&
|
||||
(!lastCommittedPoint ||
|
||||
points[points.length - 1] !== lastCommittedPoint)
|
||||
!lastCommittedPoint ||
|
||||
points[points.length - 1] !== lastCommittedPoint
|
||||
) {
|
||||
scene.mutateElement(element, {
|
||||
points: element.points.slice(0, -1),
|
||||
@ -314,17 +282,6 @@ export const actionFinalize = register({
|
||||
element && isLinearElement(element)
|
||||
? new LinearElementEditor(element, arrayToMap(newElements))
|
||||
: appState.selectedLinearElement,
|
||||
editingLinearElement: appState.newElement
|
||||
? null
|
||||
: appState.editingLinearElement
|
||||
? {
|
||||
...appState.editingLinearElement,
|
||||
pointerDownState: {
|
||||
...appState.editingLinearElement.pointerDownState,
|
||||
arrowOtherPoint: undefined,
|
||||
},
|
||||
}
|
||||
: null,
|
||||
},
|
||||
// TODO: #7348 we should not capture everything, but if we don't, it leads to incosistencies -> revisit
|
||||
captureUpdate: CaptureUpdateAction.IMMEDIATELY,
|
||||
|
||||
@ -124,7 +124,6 @@ export const getDefaultAppState = (): Omit<
|
||||
searchMatches: null,
|
||||
lockedMultiSelections: {},
|
||||
activeLockedId: null,
|
||||
bindMode: "focus",
|
||||
};
|
||||
};
|
||||
|
||||
@ -250,7 +249,6 @@ const APP_STATE_STORAGE_CONF = (<
|
||||
searchMatches: { browser: false, export: false, server: false },
|
||||
lockedMultiSelections: { browser: true, export: true, server: true },
|
||||
activeLockedId: { browser: false, export: false, server: false },
|
||||
bindMode: { browser: true, export: false, server: false },
|
||||
});
|
||||
|
||||
const _clearAppStateForStorage = <
|
||||
|
||||
@ -100,7 +100,6 @@ import {
|
||||
randomInteger,
|
||||
CLASSES,
|
||||
Emitter,
|
||||
BIND_MODE_TIMEOUT,
|
||||
} from "@excalidraw/common";
|
||||
|
||||
import {
|
||||
@ -233,11 +232,9 @@ import {
|
||||
hitElementBoundingBox,
|
||||
isLineElement,
|
||||
isSimpleArrow,
|
||||
getOutlineAvoidingPoint,
|
||||
bindOrUnbindLinearElement,
|
||||
} from "@excalidraw/element";
|
||||
|
||||
import type { GlobalPoint, LocalPoint, Radians } from "@excalidraw/math";
|
||||
import type { LocalPoint, Radians } from "@excalidraw/math";
|
||||
|
||||
import type {
|
||||
ExcalidrawElement,
|
||||
@ -571,6 +568,7 @@ class App extends React.Component<AppProps, AppState> {
|
||||
public renderer: Renderer;
|
||||
public visibleElements: readonly NonDeletedExcalidrawElement[];
|
||||
private resizeObserver: ResizeObserver | undefined;
|
||||
private nearestScrollableContainer: HTMLElement | Document | undefined;
|
||||
public library: AppClassProperties["library"];
|
||||
public libraryItemsFromStorage: LibraryItems | undefined;
|
||||
public id: string;
|
||||
@ -600,8 +598,6 @@ class App extends React.Component<AppProps, AppState> {
|
||||
public flowChartCreator: FlowChartCreator = new FlowChartCreator();
|
||||
private flowChartNavigator: FlowChartNavigator = new FlowChartNavigator();
|
||||
|
||||
private bindModeHandler: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
hitLinkElement?: NonDeletedExcalidrawElement;
|
||||
lastPointerDownEvent: React.PointerEvent<HTMLElement> | null = null;
|
||||
lastPointerUpEvent: React.PointerEvent<HTMLElement> | PointerEvent | null =
|
||||
@ -4391,14 +4387,6 @@ class App extends React.Component<AppProps, AppState> {
|
||||
{ informMutation: false, isDragging: false },
|
||||
);
|
||||
|
||||
if (isSimpleArrow(element)) {
|
||||
// NOTE: Moving the bound arrow should unbind it, otherwise we would
|
||||
// have weird situations, like 0 lenght arrow when the user moves
|
||||
// the arrow outside a filled shape suddenly forcing the arrow start
|
||||
// and end point to jump "outside" the shape.
|
||||
bindOrUnbindLinearElement(element, null, null, this.scene);
|
||||
}
|
||||
|
||||
updateBoundElements(element, this.scene, {
|
||||
simultaneouslyUpdated: selectedElements,
|
||||
});
|
||||
@ -5876,13 +5864,10 @@ class App extends React.Component<AppProps, AppState> {
|
||||
});
|
||||
});
|
||||
}
|
||||
if (
|
||||
editingLinearElement?.lastUncommittedPoint != null ||
|
||||
this.state.newElement
|
||||
) {
|
||||
if (editingLinearElement?.lastUncommittedPoint != null) {
|
||||
this.maybeSuggestBindingAtCursor(
|
||||
scenePointer,
|
||||
editingLinearElement?.elbowed || false,
|
||||
editingLinearElement.elbowed,
|
||||
);
|
||||
} else {
|
||||
// causes stack overflow if not sync
|
||||
@ -5903,7 +5888,7 @@ class App extends React.Component<AppProps, AppState> {
|
||||
[scenePointer],
|
||||
this.scene,
|
||||
this.state.zoom,
|
||||
this.scene.getNonDeletedElementsMap(),
|
||||
this.state.startBoundElement,
|
||||
),
|
||||
});
|
||||
} else {
|
||||
@ -5913,7 +5898,9 @@ class App extends React.Component<AppProps, AppState> {
|
||||
|
||||
if (this.state.multiElement) {
|
||||
const { multiElement } = this.state;
|
||||
const { x: rx, y: ry, points, lastCommittedPoint } = multiElement;
|
||||
const { x: rx, y: ry } = multiElement;
|
||||
|
||||
const { points, lastCommittedPoint } = multiElement;
|
||||
const lastPoint = points[points.length - 1];
|
||||
|
||||
setCursorForShape(this.interactiveCanvas, this.state);
|
||||
@ -5959,42 +5946,19 @@ class App extends React.Component<AppProps, AppState> {
|
||||
{ informMutation: false, isDragging: false },
|
||||
);
|
||||
} else {
|
||||
const hoveredElement = getHoveredElementForBinding(
|
||||
{
|
||||
x: scenePointerX,
|
||||
y: scenePointerY,
|
||||
},
|
||||
this.scene.getNonDeletedElements(),
|
||||
this.scene.getNonDeletedElementsMap(),
|
||||
this.state.zoom,
|
||||
false,
|
||||
false,
|
||||
);
|
||||
const [gridX, gridY] = getGridPoint(
|
||||
scenePointerX,
|
||||
scenePointerY,
|
||||
event[KEYS.CTRL_OR_CMD] || hoveredElement
|
||||
event[KEYS.CTRL_OR_CMD] || isElbowArrow(multiElement)
|
||||
? null
|
||||
: this.getEffectiveGridSize(),
|
||||
);
|
||||
|
||||
const avoidancePoint =
|
||||
hoveredElement &&
|
||||
getOutlineAvoidingPoint(
|
||||
multiElement,
|
||||
hoveredElement,
|
||||
pointFrom<GlobalPoint>(scenePointerX, scenePointerY),
|
||||
multiElement.points.length - 1,
|
||||
this.scene.getNonDeletedElementsMap(),
|
||||
);
|
||||
|
||||
const [lastCommittedX, lastCommittedY] =
|
||||
multiElement?.lastCommittedPoint ?? [0, 0];
|
||||
|
||||
let dxFromLastCommitted =
|
||||
(avoidancePoint ? avoidancePoint[0] : gridX) - rx - lastCommittedX;
|
||||
let dyFromLastCommitted =
|
||||
(avoidancePoint ? avoidancePoint[1] : gridY) - ry - lastCommittedY;
|
||||
let dxFromLastCommitted = gridX - rx - lastCommittedX;
|
||||
let dyFromLastCommitted = gridY - ry - lastCommittedY;
|
||||
|
||||
if (shouldRotateWithDiscreteAngle(event)) {
|
||||
({ width: dxFromLastCommitted, height: dyFromLastCommitted } =
|
||||
@ -7740,34 +7704,18 @@ class App extends React.Component<AppProps, AppState> {
|
||||
}
|
||||
|
||||
const { x: rx, y: ry, lastCommittedPoint } = multiElement;
|
||||
const lastGlobalPoint = pointFrom<GlobalPoint>(
|
||||
rx + multiElement.points[multiElement.points.length - 1][0],
|
||||
ry + multiElement.points[multiElement.points.length - 1][1],
|
||||
);
|
||||
const hoveredElementForBinding = getHoveredElementForBinding(
|
||||
{
|
||||
x: lastGlobalPoint[0],
|
||||
y: lastGlobalPoint[1],
|
||||
},
|
||||
this.scene.getNonDeletedElements(),
|
||||
this.scene.getNonDeletedElementsMap(),
|
||||
this.state.zoom,
|
||||
true,
|
||||
isElbowArrow(multiElement),
|
||||
);
|
||||
|
||||
// clicking inside commit zone → finalize arrow
|
||||
if (
|
||||
hoveredElementForBinding ||
|
||||
(multiElement.points.length > 1 &&
|
||||
lastCommittedPoint &&
|
||||
pointDistance(
|
||||
pointFrom(
|
||||
pointerDownState.origin.x - rx,
|
||||
pointerDownState.origin.y - ry,
|
||||
),
|
||||
lastCommittedPoint,
|
||||
) < LINE_CONFIRM_THRESHOLD)
|
||||
multiElement.points.length > 1 &&
|
||||
lastCommittedPoint &&
|
||||
pointDistance(
|
||||
pointFrom(
|
||||
pointerDownState.origin.x - rx,
|
||||
pointerDownState.origin.y - ry,
|
||||
),
|
||||
lastCommittedPoint,
|
||||
) < LINE_CONFIRM_THRESHOLD
|
||||
) {
|
||||
this.actionManager.executeAction(actionFinalize);
|
||||
return;
|
||||
@ -7810,6 +7758,7 @@ class App extends React.Component<AppProps, AppState> {
|
||||
elementType === "arrow"
|
||||
? [currentItemStartArrowhead, currentItemEndArrowhead]
|
||||
: [null, null];
|
||||
|
||||
const element =
|
||||
elementType === "arrow"
|
||||
? newArrowElement({
|
||||
@ -7857,7 +7806,21 @@ class App extends React.Component<AppProps, AppState> {
|
||||
locked: false,
|
||||
frameId: topLayerFrame ? topLayerFrame.id : null,
|
||||
});
|
||||
|
||||
this.setState((prevState) => {
|
||||
const nextSelectedElementIds = {
|
||||
...prevState.selectedElementIds,
|
||||
};
|
||||
delete nextSelectedElementIds[element.id];
|
||||
return {
|
||||
selectedElementIds: makeNextSelectedElementIds(
|
||||
nextSelectedElementIds,
|
||||
prevState,
|
||||
),
|
||||
};
|
||||
});
|
||||
this.scene.mutateElement(element, {
|
||||
points: [...element.points, pointFrom<LocalPoint>(0, 0)],
|
||||
});
|
||||
const boundElement = getHoveredElementForBinding(
|
||||
pointerDownState.origin,
|
||||
this.scene.getNonDeletedElements(),
|
||||
@ -7867,72 +7830,11 @@ class App extends React.Component<AppProps, AppState> {
|
||||
isElbowArrow(element),
|
||||
);
|
||||
|
||||
if (isSimpleArrow(element)) {
|
||||
this.setState((prevState) => {
|
||||
const linearElement = new LinearElementEditor(
|
||||
element,
|
||||
this.scene.getNonDeletedElementsMap(),
|
||||
);
|
||||
const linearElementEditor = {
|
||||
...linearElement,
|
||||
startBindingElement: boundElement,
|
||||
pointerDownState: {
|
||||
...linearElement.pointerDownState,
|
||||
arrowOtherPoint: pointFrom<GlobalPoint>(
|
||||
pointerDownState.origin.x,
|
||||
pointerDownState.origin.y,
|
||||
),
|
||||
},
|
||||
};
|
||||
const nextSelectedElementIds = makeNextSelectedElementIds(
|
||||
{ [element.id]: true },
|
||||
prevState,
|
||||
);
|
||||
|
||||
return {
|
||||
selectedElementIds: nextSelectedElementIds,
|
||||
editingLinearElement: linearElementEditor,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
this.scene.mutateElement(element, {
|
||||
points: [...element.points, pointFrom<LocalPoint>(0, 0)],
|
||||
});
|
||||
this.scene.insertElement(element);
|
||||
this.setState((prevState) => {
|
||||
let linearElementEditor = null;
|
||||
let nextSelectedElementIds = prevState.selectedElementIds;
|
||||
if (isSimpleArrow(element)) {
|
||||
const linearElement = new LinearElementEditor(
|
||||
element,
|
||||
this.scene.getNonDeletedElementsMap(),
|
||||
);
|
||||
linearElementEditor = {
|
||||
...linearElement,
|
||||
startBindingElement: boundElement,
|
||||
pointerDownState: {
|
||||
...linearElement.pointerDownState,
|
||||
arrowOtherPoint: pointFrom<GlobalPoint>(
|
||||
pointerDownState.origin.x,
|
||||
pointerDownState.origin.y,
|
||||
),
|
||||
},
|
||||
};
|
||||
nextSelectedElementIds = makeNextSelectedElementIds(
|
||||
{ [element.id]: true },
|
||||
prevState,
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
...prevState,
|
||||
newElement: element,
|
||||
startBoundElement: boundElement,
|
||||
suggestedBindings: [],
|
||||
selectedElementIds: nextSelectedElementIds,
|
||||
editingLinearElement: linearElementEditor,
|
||||
};
|
||||
this.setState({
|
||||
newElement: element,
|
||||
startBoundElement: boundElement,
|
||||
suggestedBindings: [],
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -8318,39 +8220,12 @@ class App extends React.Component<AppProps, AppState> {
|
||||
return;
|
||||
}
|
||||
|
||||
// Timed bind mode handler for arrow elements
|
||||
if (this.state.bindMode === "focus") {
|
||||
const pointerMovementDistance = Math.hypot(
|
||||
(this.lastPointerMoveCoords?.x ?? Infinity) - pointerCoords.x,
|
||||
);
|
||||
if (this.bindModeHandler && pointerMovementDistance < 1) {
|
||||
clearTimeout(this.bindModeHandler);
|
||||
}
|
||||
this.bindModeHandler = setTimeout(() => {
|
||||
const hoveredElement = getHoveredElementForBinding(
|
||||
pointerCoords,
|
||||
this.scene.getNonDeletedElements(),
|
||||
elementsMap,
|
||||
this.state.zoom,
|
||||
);
|
||||
|
||||
if (hoveredElement) {
|
||||
this.setState({
|
||||
bindMode: "fixed",
|
||||
});
|
||||
} else {
|
||||
this.bindModeHandler = null;
|
||||
}
|
||||
}, BIND_MODE_TIMEOUT);
|
||||
}
|
||||
|
||||
const newState = LinearElementEditor.handlePointDragging(
|
||||
event,
|
||||
this,
|
||||
pointerCoords.x,
|
||||
pointerCoords.y,
|
||||
linearElementEditor,
|
||||
(element) => this.getElementHitThreshold(element),
|
||||
);
|
||||
if (newState) {
|
||||
pointerDownState.lastCoords.x = pointerCoords.x;
|
||||
@ -8797,76 +8672,9 @@ class App extends React.Component<AppProps, AppState> {
|
||||
} else if (isLinearElement(newElement)) {
|
||||
pointerDownState.drag.hasOccurred = true;
|
||||
const points = newElement.points;
|
||||
const startBindingElement =
|
||||
this.state.editingLinearElement?.startBindingElement;
|
||||
let [firstPointX, firstPointY] =
|
||||
LinearElementEditor.getPointGlobalCoordinates(
|
||||
newElement,
|
||||
newElement.points[0],
|
||||
elementsMap,
|
||||
);
|
||||
let dx = gridX - newElement.x;
|
||||
let dy = gridY - newElement.y;
|
||||
|
||||
if (
|
||||
!isElbowArrow(newElement) &&
|
||||
this.state.editingLinearElement &&
|
||||
isBindingElement(newElement, false)
|
||||
) {
|
||||
// Handles the case where we need to "jump out" the simple arrow
|
||||
// start point as we drag-create it.
|
||||
const hoveredElement = getHoveredElementForBinding(
|
||||
{ x: gridX, y: gridY },
|
||||
this.scene.getNonDeletedElements(),
|
||||
this.scene.getNonDeletedElementsMap(),
|
||||
this.state.zoom,
|
||||
isElbowArrow(newElement),
|
||||
isElbowArrow(newElement),
|
||||
);
|
||||
const arrowIsInsideTheSameElement =
|
||||
startBindingElement &&
|
||||
startBindingElement !== "keep" &&
|
||||
hoveredElement?.id === startBindingElement.id;
|
||||
|
||||
if (!arrowIsInsideTheSameElement) {
|
||||
const [outlinePointX, outlinePointY] = getOutlineAvoidingPoint(
|
||||
newElement,
|
||||
hoveredElement,
|
||||
hoveredElement
|
||||
? pointFrom(pointerCoords.x, pointerCoords.y)
|
||||
: pointFrom(gridX, gridY),
|
||||
newElement.points.length - 1,
|
||||
elementsMap,
|
||||
);
|
||||
|
||||
const otherHoveredElement = getHoveredElementForBinding(
|
||||
{ x: firstPointX, y: firstPointY },
|
||||
this.scene.getNonDeletedElements(),
|
||||
this.scene.getNonDeletedElementsMap(),
|
||||
this.state.zoom,
|
||||
isElbowArrow(newElement),
|
||||
isElbowArrow(newElement),
|
||||
);
|
||||
[firstPointX, firstPointY] = getOutlineAvoidingPoint(
|
||||
newElement,
|
||||
otherHoveredElement,
|
||||
pointFrom(firstPointX, firstPointY),
|
||||
0,
|
||||
elementsMap,
|
||||
);
|
||||
|
||||
dx = outlinePointX - firstPointX;
|
||||
dy = outlinePointY - firstPointY;
|
||||
} else {
|
||||
firstPointX =
|
||||
this.state.editingLinearElement?.pointerDownState
|
||||
.arrowOtherPoint?.[0] ?? firstPointX;
|
||||
firstPointY =
|
||||
this.state.editingLinearElement?.pointerDownState
|
||||
.arrowOtherPoint?.[1] ?? firstPointY;
|
||||
}
|
||||
}
|
||||
|
||||
if (shouldRotateWithDiscreteAngle(event) && points.length === 2) {
|
||||
({ width: dx, height: dy } = getLockedLinearCursorAlignSize(
|
||||
newElement.x,
|
||||
@ -8880,8 +8688,6 @@ class App extends React.Component<AppProps, AppState> {
|
||||
this.scene.mutateElement(
|
||||
newElement,
|
||||
{
|
||||
x: firstPointX,
|
||||
y: firstPointY,
|
||||
points: [...points, pointFrom<LocalPoint>(dx, dy)],
|
||||
},
|
||||
{ informMutation: false, isDragging: false },
|
||||
@ -8893,8 +8699,6 @@ class App extends React.Component<AppProps, AppState> {
|
||||
this.scene.mutateElement(
|
||||
newElement,
|
||||
{
|
||||
x: firstPointX,
|
||||
y: firstPointY,
|
||||
points: [...points.slice(0, -1), pointFrom<LocalPoint>(dx, dy)],
|
||||
},
|
||||
{ isDragging: true, informMutation: false },
|
||||
@ -8913,7 +8717,6 @@ class App extends React.Component<AppProps, AppState> {
|
||||
[pointerCoords],
|
||||
this.scene,
|
||||
this.state.zoom,
|
||||
elementsMap,
|
||||
this.state.startBoundElement,
|
||||
),
|
||||
});
|
||||
@ -9150,14 +8953,8 @@ class App extends React.Component<AppProps, AppState> {
|
||||
});
|
||||
}
|
||||
|
||||
if (this.bindModeHandler) {
|
||||
clearTimeout(this.bindModeHandler);
|
||||
this.bindModeHandler = null;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
selectedElementsAreBeingDragged: false,
|
||||
bindMode: "focus",
|
||||
});
|
||||
const elementsMap = this.scene.getNonDeletedElementsMap();
|
||||
|
||||
@ -9180,7 +8977,7 @@ class App extends React.Component<AppProps, AppState> {
|
||||
|
||||
// Handle end of dragging a point of a linear element, might close a loop
|
||||
// and sets binding element
|
||||
if (this.state.editingLinearElement && !this.state.newElement) {
|
||||
if (this.state.editingLinearElement) {
|
||||
if (
|
||||
!pointerDownState.boxSelection.hasOccurred &&
|
||||
pointerDownState.hit?.element?.id !==
|
||||
@ -9319,7 +9116,10 @@ class App extends React.Component<AppProps, AppState> {
|
||||
newElement,
|
||||
});
|
||||
} else if (pointerDownState.drag.hasOccurred && !multiElement) {
|
||||
if (isBindingElement(newElement, false)) {
|
||||
if (
|
||||
isBindingEnabled(this.state) &&
|
||||
isBindingElement(newElement, false)
|
||||
) {
|
||||
this.actionManager.executeAction(actionFinalize, "ui", {
|
||||
event: childEvent,
|
||||
sceneCoords,
|
||||
|
||||
@ -88,12 +88,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
|
||||
"endArrowhead": "arrow",
|
||||
"endBinding": {
|
||||
"elementId": "ellipse-1",
|
||||
"fixedPoint": [
|
||||
0.04,
|
||||
0.4633333333333333,
|
||||
],
|
||||
"focus": 0,
|
||||
"gap": 0,
|
||||
"focus": -0.007519379844961235,
|
||||
"gap": 11.562288374879595,
|
||||
},
|
||||
"fillStyle": "solid",
|
||||
"frameId": null,
|
||||
@ -122,12 +118,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
|
||||
"startArrowhead": null,
|
||||
"startBinding": {
|
||||
"elementId": "id49",
|
||||
"fixedPoint": [
|
||||
1,
|
||||
0.5001,
|
||||
],
|
||||
"focus": 0,
|
||||
"gap": 0,
|
||||
"focus": -0.0813953488372095,
|
||||
"gap": 1,
|
||||
},
|
||||
"strokeColor": "#1864ab",
|
||||
"strokeStyle": "solid",
|
||||
@ -342,12 +334,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
|
||||
"endArrowhead": "arrow",
|
||||
"endBinding": {
|
||||
"elementId": "text-2",
|
||||
"fixedPoint": [
|
||||
-2.05,
|
||||
0.5001,
|
||||
],
|
||||
"focus": 0,
|
||||
"gap": 0,
|
||||
"gap": 16,
|
||||
},
|
||||
"fillStyle": "solid",
|
||||
"frameId": null,
|
||||
@ -376,12 +364,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
|
||||
"startArrowhead": null,
|
||||
"startBinding": {
|
||||
"elementId": "text-1",
|
||||
"fixedPoint": [
|
||||
1,
|
||||
0.5001,
|
||||
],
|
||||
"focus": 0,
|
||||
"gap": 0,
|
||||
"gap": 1,
|
||||
},
|
||||
"strokeColor": "#1e1e1e",
|
||||
"strokeStyle": "solid",
|
||||
@ -452,12 +436,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
|
||||
"endArrowhead": "arrow",
|
||||
"endBinding": {
|
||||
"elementId": "id42",
|
||||
"fixedPoint": [
|
||||
0,
|
||||
0.5001,
|
||||
],
|
||||
"focus": 0,
|
||||
"gap": 0,
|
||||
"focus": -0,
|
||||
"gap": 1,
|
||||
},
|
||||
"fillStyle": "solid",
|
||||
"frameId": null,
|
||||
@ -486,12 +466,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
|
||||
"startArrowhead": null,
|
||||
"startBinding": {
|
||||
"elementId": "id41",
|
||||
"fixedPoint": [
|
||||
1,
|
||||
0.5001,
|
||||
],
|
||||
"focus": 0,
|
||||
"gap": 0,
|
||||
"gap": 1,
|
||||
},
|
||||
"strokeColor": "#1e1e1e",
|
||||
"strokeStyle": "solid",
|
||||
@ -636,12 +612,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
|
||||
"endArrowhead": "arrow",
|
||||
"endBinding": {
|
||||
"elementId": "id46",
|
||||
"fixedPoint": [
|
||||
0,
|
||||
0.5001,
|
||||
],
|
||||
"focus": 0,
|
||||
"gap": 0,
|
||||
"focus": -0,
|
||||
"gap": 1,
|
||||
},
|
||||
"fillStyle": "solid",
|
||||
"frameId": null,
|
||||
@ -670,12 +642,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
|
||||
"startArrowhead": null,
|
||||
"startBinding": {
|
||||
"elementId": "id45",
|
||||
"fixedPoint": [
|
||||
1,
|
||||
0.5001,
|
||||
],
|
||||
"focus": 0,
|
||||
"gap": 0,
|
||||
"gap": 1,
|
||||
},
|
||||
"strokeColor": "#1e1e1e",
|
||||
"strokeStyle": "solid",
|
||||
@ -1571,12 +1539,8 @@ exports[`Test Transform > should transform the elements correctly when linear el
|
||||
"endArrowhead": "arrow",
|
||||
"endBinding": {
|
||||
"elementId": "B",
|
||||
"fixedPoint": [
|
||||
0.46387050630528887,
|
||||
0.48466257668711654,
|
||||
],
|
||||
"focus": 0,
|
||||
"gap": 0,
|
||||
"gap": 32,
|
||||
},
|
||||
"fillStyle": "solid",
|
||||
"frameId": null,
|
||||
@ -1603,12 +1567,8 @@ exports[`Test Transform > should transform the elements correctly when linear el
|
||||
"startArrowhead": null,
|
||||
"startBinding": {
|
||||
"elementId": "Bob",
|
||||
"fixedPoint": [
|
||||
0.39381496335223337,
|
||||
1,
|
||||
],
|
||||
"focus": 0,
|
||||
"gap": 0,
|
||||
"gap": 1,
|
||||
},
|
||||
"strokeColor": "#1e1e1e",
|
||||
"strokeStyle": "solid",
|
||||
|
||||
@ -433,11 +433,11 @@ describe("Test Transform", () => {
|
||||
startBinding: {
|
||||
elementId: rectangle.id,
|
||||
focus: 0,
|
||||
gap: 0,
|
||||
gap: 1,
|
||||
},
|
||||
endBinding: {
|
||||
elementId: ellipse.id,
|
||||
focus: 0,
|
||||
focus: -0,
|
||||
},
|
||||
});
|
||||
|
||||
@ -518,11 +518,11 @@ describe("Test Transform", () => {
|
||||
startBinding: {
|
||||
elementId: text2.id,
|
||||
focus: 0,
|
||||
gap: 0,
|
||||
gap: 1,
|
||||
},
|
||||
endBinding: {
|
||||
elementId: text3.id,
|
||||
focus: 0,
|
||||
focus: -0,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@ -11,7 +11,6 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": {
|
||||
"items": [
|
||||
@ -1084,7 +1083,6 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -1298,7 +1296,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -1629,7 +1626,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -1960,7 +1956,6 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -2174,7 +2169,6 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -2415,7 +2409,6 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -2713,7 +2706,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -3085,7 +3077,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -3578,7 +3569,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -3901,7 +3891,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -4224,7 +4213,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -4635,7 +4623,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": {
|
||||
"items": [
|
||||
@ -5852,7 +5839,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": {
|
||||
"items": [
|
||||
@ -7120,7 +7106,6 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": {
|
||||
"items": [
|
||||
@ -7787,7 +7772,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": {
|
||||
"items": [
|
||||
@ -8778,7 +8762,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": {
|
||||
"items": [
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -193,7 +193,6 @@ exports[`move element > rectangles with binding arrow 7`] = `
|
||||
"lastCommittedPoint": null,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"moveMidPointsWithElement": false,
|
||||
"opacity": 100,
|
||||
"points": [
|
||||
[
|
||||
|
||||
@ -11,7 +11,6 @@ exports[`given element A and group of elements B and given both are selected whe
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -437,7 +436,6 @@ exports[`given element A and group of elements B and given both are selected whe
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -853,7 +851,6 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -1419,7 +1416,6 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -1626,7 +1622,6 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -2010,7 +2005,6 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -2255,7 +2249,6 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -2435,7 +2428,6 @@ exports[`regression tests > can drag element that covers another element, while
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -2760,7 +2752,6 @@ exports[`regression tests > change the properties of a shape > [end of test] app
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -3015,7 +3006,6 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -3256,7 +3246,6 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -3492,7 +3481,6 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -3750,7 +3738,6 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -4064,7 +4051,6 @@ exports[`regression tests > deleting last but one element in editing group shoul
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -4500,7 +4486,6 @@ exports[`regression tests > deselects group of selected elements on pointer down
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -4783,7 +4768,6 @@ exports[`regression tests > deselects group of selected elements on pointer up w
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -5059,7 +5043,6 @@ exports[`regression tests > deselects selected element on pointer down when poin
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -5267,7 +5250,6 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -5467,7 +5449,6 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -5860,7 +5841,6 @@ exports[`regression tests > drags selected elements from point inside common bou
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -6157,7 +6137,6 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1`
|
||||
"locked": false,
|
||||
"type": "freedraw",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -6579,14 +6558,12 @@ exports[`regression tests > draw every type of shape > [end of test] undo stack
|
||||
"appState": AppStateDelta {
|
||||
"delta": Delta {
|
||||
"deleted": {
|
||||
"editingLinearElementId": "id15",
|
||||
"selectedElementIds": {
|
||||
"id15": true,
|
||||
},
|
||||
"selectedLinearElementId": null,
|
||||
},
|
||||
"inserted": {
|
||||
"editingLinearElementId": null,
|
||||
"selectedElementIds": {
|
||||
"id12": true,
|
||||
},
|
||||
@ -6717,11 +6694,9 @@ exports[`regression tests > draw every type of shape > [end of test] undo stack
|
||||
"appState": AppStateDelta {
|
||||
"delta": Delta {
|
||||
"deleted": {
|
||||
"editingLinearElementId": null,
|
||||
"selectedLinearElementId": "id15",
|
||||
},
|
||||
"inserted": {
|
||||
"editingLinearElementId": "id15",
|
||||
"selectedLinearElementId": null,
|
||||
},
|
||||
},
|
||||
@ -6993,7 +6968,6 @@ exports[`regression tests > given a group of selected elements with an element t
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -7327,7 +7301,6 @@ exports[`regression tests > given a selected element A and a not selected elemen
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -7606,7 +7579,6 @@ exports[`regression tests > given selected element A with lower z-index than uns
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -7841,7 +7813,6 @@ exports[`regression tests > given selected element A with lower z-index than uns
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -8081,7 +8052,6 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -8261,7 +8231,6 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -8441,7 +8410,6 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -8621,7 +8589,6 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -8847,7 +8814,6 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -9071,7 +9037,6 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
|
||||
"locked": false,
|
||||
"type": "freedraw",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -9267,7 +9232,6 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -9493,7 +9457,6 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -9673,7 +9636,6 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -9897,7 +9859,6 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -10077,7 +10038,6 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
|
||||
"locked": false,
|
||||
"type": "freedraw",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -10273,7 +10233,6 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -10453,7 +10412,6 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -10984,7 +10942,6 @@ exports[`regression tests > noop interaction after undo shouldn't create history
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -11264,7 +11221,6 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -11387,7 +11343,6 @@ exports[`regression tests > shift click on selected element should deselect it o
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -11587,7 +11542,6 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -11906,7 +11860,6 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -12335,7 +12288,6 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -12975,7 +12927,6 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -13101,7 +13052,6 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -13732,7 +13682,6 @@ exports[`regression tests > switches from group of selected elements to another
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -14071,7 +14020,6 @@ exports[`regression tests > switches selected element on pointer down > [end of
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -14335,7 +14283,6 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -14458,7 +14405,6 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -14574,11 +14520,9 @@ exports[`regression tests > undo/redo drawing an element > [end of test] redo st
|
||||
"appState": AppStateDelta {
|
||||
"delta": Delta {
|
||||
"deleted": {
|
||||
"editingLinearElementId": "id6",
|
||||
"selectedLinearElementId": null,
|
||||
},
|
||||
"inserted": {
|
||||
"editingLinearElementId": null,
|
||||
"selectedLinearElementId": "id6",
|
||||
},
|
||||
},
|
||||
@ -14653,13 +14597,11 @@ exports[`regression tests > undo/redo drawing an element > [end of test] redo st
|
||||
"appState": AppStateDelta {
|
||||
"delta": Delta {
|
||||
"deleted": {
|
||||
"editingLinearElementId": null,
|
||||
"selectedElementIds": {
|
||||
"id3": true,
|
||||
},
|
||||
},
|
||||
"inserted": {
|
||||
"editingLinearElementId": "id6",
|
||||
"selectedElementIds": {
|
||||
"id6": true,
|
||||
},
|
||||
@ -14851,7 +14793,6 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
|
||||
"locked": false,
|
||||
"type": "text",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@ -14974,7 +14915,6 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
|
||||
@ -157,7 +157,7 @@ describe("Test dragCreate", () => {
|
||||
fireEvent.pointerUp(canvas);
|
||||
|
||||
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
|
||||
`6`,
|
||||
`5`,
|
||||
);
|
||||
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`5`);
|
||||
expect(h.state.selectionElement).toBeNull();
|
||||
|
||||
@ -1148,7 +1148,7 @@ describe("history", () => {
|
||||
expect(API.getUndoStack().length).toBe(2);
|
||||
expect(API.getRedoStack().length).toBe(4);
|
||||
expect(assertSelectedElements(h.elements[0]));
|
||||
expect(h.state.editingLinearElement).not.toBeNull();
|
||||
expect(h.state.editingLinearElement).toBeNull();
|
||||
expect(h.state.selectedLinearElement).toBeNull(); // undo `actionFinalize`
|
||||
expect(h.elements).toEqual([
|
||||
expect.objectContaining({
|
||||
@ -1165,7 +1165,7 @@ describe("history", () => {
|
||||
expect(API.getUndoStack().length).toBe(1);
|
||||
expect(API.getRedoStack().length).toBe(5);
|
||||
expect(assertSelectedElements(h.elements[0]));
|
||||
expect(h.state.editingLinearElement).not.toBeNull();
|
||||
expect(h.state.editingLinearElement).toBeNull();
|
||||
expect(h.state.selectedLinearElement).toBeNull();
|
||||
expect(h.elements).toEqual([
|
||||
expect.objectContaining({
|
||||
@ -1197,7 +1197,7 @@ describe("history", () => {
|
||||
expect(API.getUndoStack().length).toBe(1);
|
||||
expect(API.getRedoStack().length).toBe(5);
|
||||
expect(assertSelectedElements(h.elements[0]));
|
||||
expect(h.state.editingLinearElement).not.toBeNull();
|
||||
expect(h.state.editingLinearElement).toBeNull();
|
||||
expect(h.state.selectedLinearElement).toBeNull();
|
||||
expect(h.elements).toEqual([
|
||||
expect.objectContaining({
|
||||
@ -1213,7 +1213,7 @@ describe("history", () => {
|
||||
expect(API.getUndoStack().length).toBe(2);
|
||||
expect(API.getRedoStack().length).toBe(4);
|
||||
expect(assertSelectedElements(h.elements[0]));
|
||||
expect(h.state.editingLinearElement).not.toBeNull();
|
||||
expect(h.state.editingLinearElement).toBeNull();
|
||||
expect(h.state.selectedLinearElement).toBeNull(); // undo `actionFinalize`
|
||||
expect(h.elements).toEqual([
|
||||
expect.objectContaining({
|
||||
@ -1638,15 +1638,13 @@ describe("history", () => {
|
||||
expect(API.getUndoStack().length).toBe(5);
|
||||
expect(arrow.startBinding).toEqual({
|
||||
elementId: rect1.id,
|
||||
fixedPoint: expect.arrayContaining([1, 0.5001]),
|
||||
focus: 0,
|
||||
gap: 0,
|
||||
focus: expect.toBeNonNaNNumber(),
|
||||
gap: expect.toBeNonNaNNumber(),
|
||||
});
|
||||
expect(arrow.endBinding).toEqual({
|
||||
elementId: rect2.id,
|
||||
fixedPoint: expect.arrayContaining([0, 0.5001]),
|
||||
focus: 0,
|
||||
gap: 0,
|
||||
focus: expect.toBeNonNaNNumber(),
|
||||
gap: expect.toBeNonNaNNumber(),
|
||||
});
|
||||
expect(rect1.boundElements).toStrictEqual([
|
||||
{ id: text.id, type: "text" },
|
||||
@ -1663,15 +1661,13 @@ describe("history", () => {
|
||||
expect(API.getRedoStack().length).toBe(1);
|
||||
expect(arrow.startBinding).toEqual({
|
||||
elementId: rect1.id,
|
||||
fixedPoint: expect.arrayContaining([1, 0.5001]),
|
||||
focus: 0,
|
||||
gap: 0,
|
||||
focus: expect.toBeNonNaNNumber(),
|
||||
gap: expect.toBeNonNaNNumber(),
|
||||
});
|
||||
expect(arrow.endBinding).toEqual({
|
||||
elementId: rect2.id,
|
||||
fixedPoint: expect.arrayContaining([0, 0.5001]),
|
||||
focus: 0,
|
||||
gap: 0,
|
||||
focus: expect.toBeNonNaNNumber(),
|
||||
gap: expect.toBeNonNaNNumber(),
|
||||
});
|
||||
expect(h.elements).toEqual([
|
||||
expect.objectContaining({
|
||||
@ -1688,15 +1684,13 @@ describe("history", () => {
|
||||
expect(API.getRedoStack().length).toBe(0);
|
||||
expect(arrow.startBinding).toEqual({
|
||||
elementId: rect1.id,
|
||||
fixedPoint: expect.arrayContaining([1, 0.5001]),
|
||||
focus: 0,
|
||||
gap: 0,
|
||||
focus: expect.toBeNonNaNNumber(),
|
||||
gap: expect.toBeNonNaNNumber(),
|
||||
});
|
||||
expect(arrow.endBinding).toEqual({
|
||||
elementId: rect2.id,
|
||||
fixedPoint: expect.arrayContaining([0, 0.5001]),
|
||||
focus: 0,
|
||||
gap: 0,
|
||||
focus: expect.toBeNonNaNNumber(),
|
||||
gap: expect.toBeNonNaNNumber(),
|
||||
});
|
||||
expect(h.elements).toEqual([
|
||||
expect.objectContaining({
|
||||
@ -1721,15 +1715,13 @@ describe("history", () => {
|
||||
expect(API.getRedoStack().length).toBe(0);
|
||||
expect(arrow.startBinding).toEqual({
|
||||
elementId: rect1.id,
|
||||
fixedPoint: expect.arrayContaining([1, 0.5001]),
|
||||
focus: 0,
|
||||
gap: 0,
|
||||
focus: expect.toBeNonNaNNumber(),
|
||||
gap: expect.toBeNonNaNNumber(),
|
||||
});
|
||||
expect(arrow.endBinding).toEqual({
|
||||
elementId: rect2.id,
|
||||
fixedPoint: expect.arrayContaining([0, 0.5001]),
|
||||
focus: 0,
|
||||
gap: 0,
|
||||
focus: expect.toBeNonNaNNumber(),
|
||||
gap: expect.toBeNonNaNNumber(),
|
||||
});
|
||||
expect(h.elements).toEqual([
|
||||
expect.objectContaining({
|
||||
@ -1746,15 +1738,13 @@ describe("history", () => {
|
||||
expect(API.getRedoStack().length).toBe(1);
|
||||
expect(arrow.startBinding).toEqual({
|
||||
elementId: rect1.id,
|
||||
fixedPoint: expect.arrayContaining([1, 0.5001]),
|
||||
focus: 0,
|
||||
gap: 0,
|
||||
focus: expect.toBeNonNaNNumber(),
|
||||
gap: expect.toBeNonNaNNumber(),
|
||||
});
|
||||
expect(arrow.endBinding).toEqual({
|
||||
elementId: rect2.id,
|
||||
fixedPoint: expect.arrayContaining([0, 0.5001]),
|
||||
focus: 0,
|
||||
gap: 0,
|
||||
focus: expect.toBeNonNaNNumber(),
|
||||
gap: expect.toBeNonNaNNumber(),
|
||||
});
|
||||
expect(h.elements).toEqual([
|
||||
expect.objectContaining({
|
||||
@ -5089,11 +5079,13 @@ describe("history", () => {
|
||||
id: arrowId,
|
||||
startBinding: expect.objectContaining({
|
||||
elementId: rect1.id,
|
||||
fixedPoint: expect.arrayContaining([1, 0.5001]),
|
||||
focus: 0,
|
||||
gap: 1,
|
||||
}),
|
||||
endBinding: expect.objectContaining({
|
||||
elementId: rect2.id,
|
||||
fixedPoint: expect.arrayContaining([0, 0.5001]),
|
||||
focus: -0,
|
||||
gap: 1,
|
||||
}),
|
||||
isDeleted: true,
|
||||
}),
|
||||
|
||||
@ -97,7 +97,7 @@ describe("move element", () => {
|
||||
new Pointer("mouse").clickOn(rectB);
|
||||
|
||||
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
|
||||
`18`,
|
||||
`17`,
|
||||
);
|
||||
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`13`);
|
||||
expect(h.state.selectionElement).toBeNull();
|
||||
|
||||
@ -118,7 +118,7 @@ describe("multi point mode in linear elements", () => {
|
||||
key: KEYS.ENTER,
|
||||
});
|
||||
|
||||
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(`9`);
|
||||
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(`7`);
|
||||
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
|
||||
expect(h.elements.length).toEqual(1);
|
||||
|
||||
|
||||
@ -425,7 +425,7 @@ describe("select single element on the scene", () => {
|
||||
fireEvent.pointerDown(canvas, { clientX: 40, clientY: 40 });
|
||||
fireEvent.pointerUp(canvas);
|
||||
|
||||
expect(renderInteractiveScene).toHaveBeenCalledTimes(9);
|
||||
expect(renderInteractiveScene).toHaveBeenCalledTimes(8);
|
||||
expect(renderStaticScene).toHaveBeenCalledTimes(6);
|
||||
expect(h.state.selectionElement).toBeNull();
|
||||
expect(h.elements.length).toEqual(1);
|
||||
@ -487,12 +487,7 @@ describe("tool locking & selection", () => {
|
||||
expect(h.state.activeTool.locked).toBe(true);
|
||||
|
||||
for (const { value } of Object.values(SHAPES)) {
|
||||
if (
|
||||
value !== "image" &&
|
||||
value !== "selection" &&
|
||||
value !== "eraser" &&
|
||||
value !== "arrow"
|
||||
) {
|
||||
if (value !== "image" && value !== "selection" && value !== "eraser") {
|
||||
const element = UI.createElement(value);
|
||||
expect(h.state.selectedElementIds[element.id]).not.toBe(true);
|
||||
}
|
||||
|
||||
@ -444,7 +444,6 @@ export interface AppState {
|
||||
// as elements are unlocked, we remove the groupId from the elements
|
||||
// and also remove groupId from this map
|
||||
lockedMultiSelections: { [groupId: string]: true };
|
||||
bindMode: "focus" | "fixed";
|
||||
}
|
||||
|
||||
export type SearchMatch = {
|
||||
|
||||
@ -2,4 +2,3 @@ export * from "./export";
|
||||
export * from "./withinBounds";
|
||||
export * from "./bbox";
|
||||
export { getCommonBounds } from "@excalidraw/element";
|
||||
export * from "./visualdebug";
|
||||
|
||||
@ -11,7 +11,6 @@ exports[`exportToSvg > with default arguments 1`] = `
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "focus",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user