mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-09-24 01:40:41 +02:00
chore: More point dragging centralization
This commit is contained in:
Mark Tolmacs
@@ -43,6 +43,7 @@ import type {
|
||||
} from "@excalidraw/excalidraw/types";
|
||||
|
||||
import {
|
||||
calculateFixedPointForNonElbowArrowBinding,
|
||||
getBindingStrategyForDraggingBindingElementEndpoints,
|
||||
getStartGlobalEndLocalPointsForSimpleArrowBinding,
|
||||
maybeSuggestBindingsForBindingElementAtCoords,
|
||||
@@ -117,6 +118,12 @@ const getNormalizedPoints = ({
|
||||
};
|
||||
};
|
||||
|
||||
type PointMoveOtherUpdates = {
|
||||
startBinding?: FixedPointBinding | null;
|
||||
endBinding?: FixedPointBinding | null;
|
||||
moveMidPointsWithElement?: boolean | null;
|
||||
};
|
||||
|
||||
export class LinearElementEditor {
|
||||
public readonly elementId: ExcalidrawElement["id"] & {
|
||||
_brand: "excalidrawLinearElementId";
|
||||
@@ -282,7 +289,7 @@ export class LinearElementEditor {
|
||||
scenePointerX: number,
|
||||
scenePointerY: number,
|
||||
linearElementEditor: LinearElementEditor,
|
||||
): Pick<AppState, keyof AppState> | null {
|
||||
): Pick<AppState, "suggestedBinding" | "selectedLinearElement"> | null {
|
||||
if (!linearElementEditor) {
|
||||
return null;
|
||||
}
|
||||
@@ -356,94 +363,48 @@ export class LinearElementEditor {
|
||||
const deltaX = reference[0] - draggingPoint[0];
|
||||
const deltaY = reference[1] - draggingPoint[1];
|
||||
|
||||
LinearElementEditor.movePoints(
|
||||
const { positions, updates } = pointDraggingUpdates(
|
||||
selectedPointsIndices,
|
||||
deltaX,
|
||||
deltaY,
|
||||
elementsMap,
|
||||
element,
|
||||
app.scene,
|
||||
pointDraggingUpdates(
|
||||
selectedPointsIndices,
|
||||
deltaX,
|
||||
deltaY,
|
||||
elementsMap,
|
||||
element,
|
||||
elements,
|
||||
app,
|
||||
),
|
||||
elements,
|
||||
app,
|
||||
);
|
||||
} else {
|
||||
const scenePointer = pointFrom<GlobalPoint>(
|
||||
|
||||
LinearElementEditor.movePoints(element, app.scene, positions, updates);
|
||||
} else if (
|
||||
shouldAllowDraggingPoint(
|
||||
element,
|
||||
scenePointerX,
|
||||
scenePointerY,
|
||||
selectedPointsIndices,
|
||||
elementsMap,
|
||||
app,
|
||||
)
|
||||
) {
|
||||
const newDraggingPointPosition = LinearElementEditor.createPointAt(
|
||||
element,
|
||||
elementsMap,
|
||||
scenePointerX - linearElementEditor.pointerOffset.x,
|
||||
scenePointerY - linearElementEditor.pointerOffset.y,
|
||||
event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
|
||||
);
|
||||
// Do not allow dragging the bound arrow closer to the shape than
|
||||
// the dragging threshold
|
||||
let allowDrag = true;
|
||||
if (isSimpleArrow(element)) {
|
||||
if (selectedPointsIndices.includes(0) && element.startBinding) {
|
||||
const boundElement = elementsMap.get(
|
||||
element.startBinding.elementId,
|
||||
)!;
|
||||
const dist = distanceToElement(
|
||||
boundElement,
|
||||
elementsMap,
|
||||
scenePointer,
|
||||
);
|
||||
const inside = isPointInElement(
|
||||
scenePointer,
|
||||
boundElement,
|
||||
elementsMap,
|
||||
);
|
||||
allowDrag = allowDrag && (dist > DRAGGING_THRESHOLD || inside);
|
||||
if (allowDrag) {
|
||||
unbindBindingElement(element, "start", app.scene);
|
||||
}
|
||||
}
|
||||
if (
|
||||
selectedPointsIndices.includes(element.points.length - 1) &&
|
||||
element.endBinding
|
||||
) {
|
||||
const boundElement = elementsMap.get(element.endBinding.elementId)!;
|
||||
const dist = distanceToElement(
|
||||
boundElement,
|
||||
elementsMap,
|
||||
scenePointer,
|
||||
);
|
||||
const inside = isPointInElement(
|
||||
scenePointer,
|
||||
boundElement,
|
||||
elementsMap,
|
||||
);
|
||||
allowDrag = allowDrag && (dist > DRAGGING_THRESHOLD || inside);
|
||||
if (allowDrag) {
|
||||
unbindBindingElement(element, "end", app.scene);
|
||||
}
|
||||
}
|
||||
}
|
||||
const deltaX = newDraggingPointPosition[0] - draggingPoint[0];
|
||||
const deltaY = newDraggingPointPosition[1] - draggingPoint[1];
|
||||
|
||||
if (allowDrag) {
|
||||
const newDraggingPointPosition = LinearElementEditor.createPointAt(
|
||||
element,
|
||||
elementsMap,
|
||||
scenePointerX - linearElementEditor.pointerOffset.x,
|
||||
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 { positions, updates } = pointDraggingUpdates(
|
||||
selectedPointsIndices,
|
||||
deltaX,
|
||||
deltaY,
|
||||
elementsMap,
|
||||
element,
|
||||
elements,
|
||||
app,
|
||||
);
|
||||
|
||||
LinearElementEditor.movePoints(
|
||||
element,
|
||||
app.scene,
|
||||
pointDraggingUpdates(
|
||||
selectedPointsIndices,
|
||||
deltaX,
|
||||
deltaY,
|
||||
elementsMap,
|
||||
element,
|
||||
elements,
|
||||
app,
|
||||
),
|
||||
);
|
||||
}
|
||||
LinearElementEditor.movePoints(element, app.scene, positions, updates);
|
||||
}
|
||||
|
||||
const boundTextElement = getBoundTextElement(element, elementsMap);
|
||||
@@ -1987,7 +1948,10 @@ export const pointDraggingUpdates = (
|
||||
element: NonDeleted<ExcalidrawLinearElement>,
|
||||
elements: readonly Ordered<NonDeletedExcalidrawElement>[],
|
||||
app: AppClassProperties,
|
||||
): PointsPositionUpdates => {
|
||||
): {
|
||||
positions: PointsPositionUpdates;
|
||||
updates?: PointMoveOtherUpdates;
|
||||
} => {
|
||||
const naiveDraggingPoints = new Map(
|
||||
selectedPointsIndices.map((pointIndex) => {
|
||||
return [
|
||||
@@ -2005,7 +1969,9 @@ export const pointDraggingUpdates = (
|
||||
|
||||
// Linear elements have no special logic
|
||||
if (!isArrowElement(element) || isElbowArrow(element)) {
|
||||
return naiveDraggingPoints;
|
||||
return {
|
||||
positions: naiveDraggingPoints,
|
||||
};
|
||||
}
|
||||
|
||||
const startIsDragged = selectedPointsIndices.includes(0);
|
||||
@@ -2014,7 +1980,9 @@ export const pointDraggingUpdates = (
|
||||
);
|
||||
|
||||
if (startIsDragged === endIsDragged) {
|
||||
return naiveDraggingPoints;
|
||||
return {
|
||||
positions: naiveDraggingPoints,
|
||||
};
|
||||
}
|
||||
|
||||
const { start, end } = getBindingStrategyForDraggingBindingElementEndpoints(
|
||||
@@ -2090,16 +2058,75 @@ export const pointDraggingUpdates = (
|
||||
new Set([0, element.points.length - 1, ...selectedPointsIndices]),
|
||||
);
|
||||
|
||||
return new Map(
|
||||
indices.map((idx) => {
|
||||
return [
|
||||
idx,
|
||||
idx === 0
|
||||
? { point: startLocalPoint, isDragging: true }
|
||||
: idx === element.points.length - 1
|
||||
? { point: finalEndLocalPoint, isDragging: true }
|
||||
: naiveDraggingPoints.get(idx)!,
|
||||
];
|
||||
}),
|
||||
);
|
||||
return {
|
||||
updates: start.mode
|
||||
? {
|
||||
startBinding: {
|
||||
elementId: start.element.id,
|
||||
mode: start.mode,
|
||||
...calculateFixedPointForNonElbowArrowBinding(
|
||||
element,
|
||||
start.element,
|
||||
"start",
|
||||
elementsMap,
|
||||
),
|
||||
},
|
||||
}
|
||||
: undefined,
|
||||
positions: new Map(
|
||||
indices.map((idx) => {
|
||||
return [
|
||||
idx,
|
||||
idx === 0
|
||||
? { point: startLocalPoint, isDragging: true }
|
||||
: idx === element.points.length - 1
|
||||
? { point: finalEndLocalPoint, isDragging: true }
|
||||
: naiveDraggingPoints.get(idx)!,
|
||||
];
|
||||
}),
|
||||
),
|
||||
};
|
||||
};
|
||||
|
||||
const shouldAllowDraggingPoint = (
|
||||
element: ExcalidrawLinearElement,
|
||||
scenePointerX: number,
|
||||
scenePointerY: number,
|
||||
selectedPointsIndices: readonly number[],
|
||||
elementsMap: Readonly<NonDeletedSceneElementsMap>,
|
||||
app: AppClassProperties,
|
||||
) => {
|
||||
if (!isSimpleArrow(element)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const scenePointer = pointFrom<GlobalPoint>(scenePointerX, scenePointerY);
|
||||
// Do not allow dragging the bound arrow closer to the shape than
|
||||
// the dragging threshold
|
||||
let allowDrag = true;
|
||||
if (isSimpleArrow(element)) {
|
||||
if (selectedPointsIndices.includes(0) && element.startBinding) {
|
||||
const boundElement = elementsMap.get(element.startBinding.elementId)!;
|
||||
const dist = distanceToElement(boundElement, elementsMap, scenePointer);
|
||||
const inside = isPointInElement(scenePointer, boundElement, elementsMap);
|
||||
allowDrag = allowDrag && (dist > DRAGGING_THRESHOLD || inside);
|
||||
if (allowDrag) {
|
||||
unbindBindingElement(element, "start", app.scene);
|
||||
}
|
||||
}
|
||||
if (
|
||||
selectedPointsIndices.includes(element.points.length - 1) &&
|
||||
element.endBinding
|
||||
) {
|
||||
const boundElement = elementsMap.get(element.endBinding.elementId)!;
|
||||
const dist = distanceToElement(boundElement, elementsMap, scenePointer);
|
||||
const inside = isPointInElement(scenePointer, boundElement, elementsMap);
|
||||
allowDrag = allowDrag && (dist > DRAGGING_THRESHOLD || inside);
|
||||
if (allowDrag) {
|
||||
unbindBindingElement(element, "end", app.scene);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return allowDrag;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user