smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Allow binding linear elements to other elements (#1899)

Browse source 
* Refactor: simplify linear element type

* Refactor: dedupe scrollbar handling

* First step towards binding - establish relationship and basic test for dragged lines

* Refactor: use zoom from appstate

* Refactor: generalize getElementAtPosition

* Only consider bindable elements in hit test

* Refactor: pull out pieces of hit test for reuse later

* Refactor: pull out diamond from hit test for reuse later

* Refactor: pull out text from hit test for reuse later

* Suggest binding when hovering

* Give shapes in regression test real size

* Give shapes in undo/redo test real size

* Keep bound element highlighted

* Show binding suggestion for multi-point elements

* Move binding to its on module with functions so that I can use it from actions, add support for binding end of multi-point elements

* Use Id instead of ID

* Improve boundary offset for non-squarish elements

* Fix localStorage for binding on linear elements

* Simplify dragging code and fix elements bound twice to the same shape

* Fix binding for rectangles

* Bind both ends at the end of the linear element creation, needed for focus points

* wip

* Refactor: Renames and reshapes for next commit

* Calculate and store focus points and gaps, but dont use them yet

* Focus points for rectangles

* Dont blow up when canceling linear element

* Stop suggesting binding when a non-compatible tool is selected

* Clean up collision code

* Using Geometric Algebra for hit tests

* Correct binding for all shapes

* Constant gap around polygon corners

* Fix rotation handling

* Generalize update and fix hit test for rotated elements

* Handle rotation realtime

* Handle scaling

* Remove vibration when moving bound and binding element together

* Handle simultenous scaling

* Allow binding and unbinding when editing linear elements

* Dont delete binding when the end point wasnt touched

* Bind on enter/escape when editing

* Support multiple suggested bindable elements in preparation for supporting linear elements dragging

* Update binding when moving linear elements

* Update binding when resizing linear elements

* Dont re-render UI on binding hints

* Update both ends when one is moved

* Use distance instead of focus point for binding

* Complicated approach for posterity, ignore this commit

* Revert the complicated approach

* Better focus point strategy, working for all shapes

* Update snapshots

* Dont break binding gap when mirroring shape

* Dont break binding gap when grid mode pushes it inside

* Dont bind draw elements

* Support alt duplication

* Fix alt duplication to

* Support cmd+D duplication

* All copy mechanisms are supported

* Allow binding shapes to arrows, having arrows created first

* Prevent arrows from disappearing for ellipses

* Better binding suggestion highlight for shapes

* Dont suggest second binding for simple elements when editing or moving them

* Dont steal already bound linear elements when moving shapes

* Fix highlighting diamonds and more precisely highlight other shapes

* Highlight linear element edges for binding

* Highlight text binding too

* Handle deletion

* Dont suggest second binding for simple linear elements when creating them

* Dont highlight bound element during creation

* Fix binding for rotated linear elements

* Fix collision check for ellipses

* Dont show suggested bindings for selected pairs

* Bind multi-point linear elements when the tool is switched - important for mobile

* Handle unbinding one of two bound edges correctly

* Rename boundElement in state to startBoundElement

* Dont double account for zoom when rendering binding highlight

* Fix rendering of edited linear element point handles

* Suggest binding when adding new point to a linear element

* Bind when adding a new point to a linear element and dont unbind when moving middle elements

* Handle deleting points

* Add cmd modifier key to disable binding

* Use state for enabling binding, fix not binding for linear elements during creation

* Drop support for binding lines, only arrows are bindable

* Reset binding mode on blur

* Fix not binding lines
This commit is contained in:
Michal Srb 2020-08-08 21:04:15 -07:00 • committed by GitHub
parent 5f195694ee
commit 26f67d27ec
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 3879 additions and 830 deletions
Download patch file Download diff file Expand all files Collapse all files

392
src/renderer/renderScene.ts
View file

@ -9,6 +9,7 @@ import {
ExcalidrawLinearElement,
NonDeleted,
GroupId,
ExcalidrawBindableElement,
} from "../element/types";
import {
getElementAbsoluteCoords,
@ -36,6 +37,13 @@ import {
getSelectedGroupIds,
getElementsInGroup,
} from "../groups";
import { maxBindingGap } from "../element/collision";
import {
SuggestedBinding,
SuggestedPointBinding,
isBindingEnabled,
} from "../element/binding";
import { Handlers } from "../element/handlerRectangles";
type HandlerRectanglesRet = keyof ReturnType<typeof handlerRectangles>;
@ -48,7 +56,7 @@ const strokeRectWithRotation = (
cx: number,
cy: number,
angle: number,
fill?: boolean,
fill: boolean = false,
) => {
context.translate(cx, cy);
context.rotate(angle);
@ -60,15 +68,48 @@ const strokeRectWithRotation = (
context.translate(-cx, -cy);
};
const strokeCircle = (
const strokeDiamondWithRotation = (
context: CanvasRenderingContext2D,
x: number,
y: number,
width: number,
height: number,
cx: number,
cy: number,
angle: number,
) => {
context.translate(cx, cy);
context.rotate(angle);
context.beginPath();
context.moveTo(0, height / 2);
context.lineTo(width / 2, 0);
context.lineTo(0, -height / 2);
context.lineTo(-width / 2, 0);
context.closePath();
context.stroke();
context.rotate(-angle);
context.translate(-cx, -cy);
};
const strokeEllipseWithRotation = (
context: CanvasRenderingContext2D,
width: number,
height: number,
cx: number,
cy: number,
angle: number,
) => {
context.beginPath();
context.arc(x + width / 2, y + height / 2, width / 2, 0, Math.PI * 2);
context.ellipse(cx, cy, width / 2, height / 2, angle, 0, Math.PI * 2);
context.stroke();
};
const fillCircle = (
context: CanvasRenderingContext2D,
cx: number,
cy: number,
radius: number,
) => {
context.beginPath();
context.arc(cx, cy, radius, 0, Math.PI * 2);
context.fill();
context.stroke();
};
@ -116,12 +157,11 @@ const renderLinearPointHandles = (
? "rgba(255, 127, 127, 0.9)"
: "rgba(255, 255, 255, 0.9)";
const { POINT_HANDLE_SIZE } = LinearElementEditor;
strokeCircle(
fillCircle(
context,
point[0] - POINT_HANDLE_SIZE / 2 / sceneState.zoom,
point[1] - POINT_HANDLE_SIZE / 2 / sceneState.zoom,
POINT_HANDLE_SIZE / sceneState.zoom,
POINT_HANDLE_SIZE / sceneState.zoom,
point[0],
point[1],
POINT_HANDLE_SIZE / 2 / sceneState.zoom,
);
},
);
@ -241,14 +281,20 @@ export const renderScene = (
);
}
if (isBindingEnabled(appState)) {
appState.suggestedBindings
.filter((binding) => binding != null)
.forEach((suggestedBinding) => {
renderBindingHighlight(context, sceneState, suggestedBinding!);
});
}
// Paint selected elements
if (
renderSelection &&
!appState.multiElement &&
!appState.editingLinearElement
) {
context.translate(sceneState.scrollX, sceneState.scrollY);
const selections = elements.reduce((acc, element) => {
const selectionColors = [];
// local user
@ -310,99 +356,28 @@ export const renderScene = (
addSelectionForGroupId(appState.editingGroupId);
}
selections.forEach(
({
angle,
elementX1,
elementY1,
elementX2,
elementY2,
selectionColors,
}) => {
const elementWidth = elementX2 - elementX1;
const elementHeight = elementY2 - elementY1;
const initialLineDash = context.getLineDash();
const lineWidth = context.lineWidth;
const lineDashOffset = context.lineDashOffset;
const strokeStyle = context.strokeStyle;
const dashedLinePadding = 4 / sceneState.zoom;
const dashWidth = 8 / sceneState.zoom;
const spaceWidth = 4 / sceneState.zoom;
context.lineWidth = 1 / sceneState.zoom;
const count = selectionColors.length;
for (var i = 0; i < count; ++i) {
context.strokeStyle = selectionColors[i];
context.setLineDash([
dashWidth,
spaceWidth + (dashWidth + spaceWidth) * (count - 1),
]);
context.lineDashOffset = (dashWidth + spaceWidth) * i;
strokeRectWithRotation(
context,
elementX1 - dashedLinePadding,
elementY1 - dashedLinePadding,
elementWidth + dashedLinePadding * 2,
elementHeight + dashedLinePadding * 2,
elementX1 + elementWidth / 2,
elementY1 + elementHeight / 2,
angle,
);
}
context.lineDashOffset = lineDashOffset;
context.strokeStyle = strokeStyle;
context.lineWidth = lineWidth;
context.setLineDash(initialLineDash);
},
selections.forEach((selection) =>
renderSelectionBorder(context, sceneState, selection),
);
context.translate(-sceneState.scrollX, -sceneState.scrollY);
const locallySelectedElements = getSelectedElements(elements, appState);
// Paint resize handlers
context.translate(sceneState.scrollX, sceneState.scrollY);
if (locallySelectedElements.length === 1) {
context.translate(sceneState.scrollX, sceneState.scrollY);
context.fillStyle = oc.white;
const handlers = handlerRectangles(
locallySelectedElements[0],
sceneState.zoom,
);
Object.keys(handlers).forEach((key) => {
const handler = handlers[key as HandlerRectanglesRet];
if (handler !== undefined) {
const lineWidth = context.lineWidth;
context.lineWidth = 1 / sceneState.zoom;
if (key === "rotation") {
strokeCircle(
context,
handler[0],
handler[1],
handler[2],
handler[3],
);
} else {
strokeRectWithRotation(
context,
handler[0],
handler[1],
handler[2],
handler[3],
handler[0] + handler[2] / 2,
handler[1] + handler[3] / 2,
locallySelectedElements[0].angle,
true, // fill before stroke
);
}
context.lineWidth = lineWidth;
}
});
context.translate(-sceneState.scrollX, -sceneState.scrollY);
renderHandlers(
context,
sceneState,
handlers,
locallySelectedElements[0].angle,
);
} else if (locallySelectedElements.length > 1 && !appState.isRotating) {
const dashedLinePadding = 4 / sceneState.zoom;
context.translate(sceneState.scrollX, sceneState.scrollY);
context.fillStyle = oc.white;
const [x1, y1, x2, y2] = getCommonBounds(locallySelectedElements);
const initialLineDash = context.getLineDash();
@ -428,37 +403,9 @@ export const renderScene = (
undefined,
OMIT_SIDES_FOR_MULTIPLE_ELEMENTS,
);
Object.keys(handlers).forEach((key) => {
const handler = handlers[key as HandlerRectanglesRet];
if (handler !== undefined) {
const lineWidth = context.lineWidth;
context.lineWidth = 1 / sceneState.zoom;
if (key === "rotation") {
strokeCircle(
context,
handler[0],
handler[1],
handler[2],
handler[3],
);
} else {
strokeRectWithRotation(
context,
handler[0],
handler[1],
handler[2],
handler[3],
handler[0] + handler[2] / 2,
handler[1] + handler[3] / 2,
0,
true, // fill before stroke
);
}
context.lineWidth = lineWidth;
}
});
context.translate(-sceneState.scrollX, -sceneState.scrollY);
renderHandlers(context, sceneState, handlers, 0);
}
context.translate(-sceneState.scrollX, -sceneState.scrollY);
}
// Reset zoom
@ -598,6 +545,207 @@ export const renderScene = (
return { atLeastOneVisibleElement: visibleElements.length > 0, scrollBars };
};
const renderHandlers = (
context: CanvasRenderingContext2D,
sceneState: SceneState,
handlers: Handlers,
angle: number,
): void => {
Object.keys(handlers).forEach((key) => {
const handler = handlers[key as HandlerRectanglesRet];
if (handler !== undefined) {
const lineWidth = context.lineWidth;
context.lineWidth = 1 / sceneState.zoom;
if (key === "rotation") {
fillCircle(
context,
handler[0] + handler[2] / 2,
handler[1] + handler[3] / 2,
handler[2] / 2,
);
} else {
strokeRectWithRotation(
context,
handler[0],
handler[1],
handler[2],
handler[3],
handler[0] + handler[2] / 2,
handler[1] + handler[3] / 2,
angle,
true, // fill before stroke
);
}
context.lineWidth = lineWidth;
}
});
};
const renderSelectionBorder = (
context: CanvasRenderingContext2D,
sceneState: SceneState,
elementProperties: {
angle: number;
elementX1: number;
elementY1: number;
elementX2: number;
elementY2: number;
selectionColors: string[];
},
) => {
const {
angle,
elementX1,
elementY1,
elementX2,
elementY2,
selectionColors,
} = elementProperties;
const elementWidth = elementX2 - elementX1;
const elementHeight = elementY2 - elementY1;
const initialLineDash = context.getLineDash();
const lineWidth = context.lineWidth;
const lineDashOffset = context.lineDashOffset;
const strokeStyle = context.strokeStyle;
const dashedLinePadding = 4 / sceneState.zoom;
const dashWidth = 8 / sceneState.zoom;
const spaceWidth = 4 / sceneState.zoom;
context.lineWidth = 1 / sceneState.zoom;
context.translate(sceneState.scrollX, sceneState.scrollY);
const count = selectionColors.length;
for (var i = 0; i < count; ++i) {
context.strokeStyle = selectionColors[i];
context.setLineDash([
dashWidth,
spaceWidth + (dashWidth + spaceWidth) * (count - 1),
]);
context.lineDashOffset = (dashWidth + spaceWidth) * i;
strokeRectWithRotation(
context,
elementX1 - dashedLinePadding,
elementY1 - dashedLinePadding,
elementWidth + dashedLinePadding * 2,
elementHeight + dashedLinePadding * 2,
elementX1 + elementWidth / 2,
elementY1 + elementHeight / 2,
angle,
);
}
context.lineDashOffset = lineDashOffset;
context.strokeStyle = strokeStyle;
context.lineWidth = lineWidth;
context.setLineDash(initialLineDash);
context.translate(-sceneState.scrollX, -sceneState.scrollY);
};
const renderBindingHighlight = (
context: CanvasRenderingContext2D,
sceneState: SceneState,
suggestedBinding: SuggestedBinding,
) => {
// preserve context settings to restore later
const originalStrokeStyle = context.strokeStyle;
const originalLineWidth = context.lineWidth;
const renderHighlight = Array.isArray(suggestedBinding)
? renderBindingHighlightForSuggestedPointBinding
: renderBindingHighlightForBindableElement;
context.translate(sceneState.scrollX, sceneState.scrollY);
renderHighlight(context, suggestedBinding as any);
// restore context settings
context.strokeStyle = originalStrokeStyle;
context.lineWidth = originalLineWidth;
context.translate(-sceneState.scrollX, -sceneState.scrollY);
};
const renderBindingHighlightForBindableElement = (
context: CanvasRenderingContext2D,
element: ExcalidrawBindableElement,
) => {
const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
const width = x2 - x1;
const height = y2 - y1;
const threshold = maxBindingGap(element, width, height);
// So that we don't overlap the element itself
const strokeOffset = 4;
context.strokeStyle = "rgba(0,0,0,.05)";
context.lineWidth = threshold - strokeOffset;
const padding = strokeOffset + threshold / 2;
switch (element.type) {
case "rectangle":
case "text":
strokeRectWithRotation(
context,
x1 - padding,
y1 - padding,
width + padding * 2,
height + padding * 2,
x1 + width / 2,
y1 + height / 2,
element.angle,
);
break;
case "diamond":
const side = Math.hypot(width, height);
const wPadding = (padding * side) / height;
const hPadding = (padding * side) / width;
strokeDiamondWithRotation(
context,
width + wPadding * 2,
height + hPadding * 2,
x1 + width / 2,
y1 + height / 2,
element.angle,
);
break;
case "ellipse":
strokeEllipseWithRotation(
context,
width + padding * 2,
height + padding * 2,
x1 + width / 2,
y1 + height / 2,
element.angle,
);
break;
}
};
const renderBindingHighlightForSuggestedPointBinding = (
context: CanvasRenderingContext2D,
suggestedBinding: SuggestedPointBinding,
) => {
const [element, startOrEnd, bindableElement] = suggestedBinding;
const threshold = maxBindingGap(
bindableElement,
bindableElement.width,
bindableElement.height,
);
context.strokeStyle = "rgba(0,0,0,0)";
context.fillStyle = "rgba(0,0,0,.05)";
const pointIndices =
startOrEnd === "both" ? [0, -1] : startOrEnd === "start" ? [0] : [-1];
pointIndices.forEach((index) => {
const [x, y] = LinearElementEditor.getPointAtIndexGlobalCoordinates(
element,
index,
);
fillCircle(context, x, y, threshold);
});
};
const isVisibleElement = (
element: ExcalidrawElement,
viewportWidth: number,