marcel/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-10-31 10:54:33 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: enable midpoint inside linear element editor (#5564)

Browse Source 
* feat: enable midpoint inside linear element editor

* fix

* fix

* hack to set pointerDownState.hit.hasHitElementInside when mid point added

* remove hacks as not needed :)

* remove newline

* fix

* add doc
This commit is contained in:
Aakansha Doshi
2022-08-18 19:56:26 +05:30
committed by GitHub
parent f4b1a30bef
commit 46a61ad4df
2 changed files with 43 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/element/linearElementEditor.ts
View File

@@ -364,9 +364,6 @@ export class LinearElementEditor {
scenePointer: { x: number; y: number },
appState: AppState,
) => {
if (appState.editingLinearElement) {
return false;
}
const { elementId } = linearElementEditor;
const element = LinearElementEditor.getElement(elementId);
if (!element) {

60
src/renderer/renderScene.ts
View File

@@ -162,6 +162,7 @@ const renderSingleLinearPoint = (
appState: AppState,
renderConfig: RenderConfig,
point: Point,
radius: number,
isSelected: boolean,
isPhantomPoint = false,
) => {
@@ -173,10 +174,7 @@ const renderSingleLinearPoint = (
} else if (isPhantomPoint) {
context.fillStyle = "rgba(177, 151, 252, 0.7)";
}
const { POINT_HANDLE_SIZE } = LinearElementEditor;
const radius = appState.editingLinearElement
? POINT_HANDLE_SIZE
: POINT_HANDLE_SIZE / 2;
fillCircle(
context,
point[0],
@@ -205,32 +203,61 @@ const renderLinearPointHandles = (
if (!centerPoint) {
return;
}
const { POINT_HANDLE_SIZE } = LinearElementEditor;
const radius = appState.editingLinearElement
? POINT_HANDLE_SIZE
: POINT_HANDLE_SIZE / 2;
points.forEach((point, idx) => {
const isSelected =
!!appState.editingLinearElement?.selectedPointsIndices?.includes(idx);
renderSingleLinearPoint(context, appState, renderConfig, point, isSelected);
renderSingleLinearPoint(
context,
appState,
renderConfig,
point,
radius,
isSelected,
);
});
if (!appState.editingLinearElement && points.length < 3) {
if (points.length < 3) {
if (appState.selectedLinearElement.midPointHovered) {
const centerPoint = LinearElementEditor.getMidPoint(
appState.selectedLinearElement,
)!;
highlightPoint(centerPoint, context, appState, renderConfig);
renderSingleLinearPoint(
context,
appState,
renderConfig,
centerPoint,
false,
);
// The order of renderingSingleLinearPoint and highLight points is different
// inside vs outside editor as hover states are different,
// in editor when hovered the original point is not visible as hover state fully covers it whereas outside the
// editor original point is visible and hover state is just an outer circle.
if (appState.editingLinearElement) {
renderSingleLinearPoint(
context,
appState,
renderConfig,
centerPoint,
radius,
false,
);
highlightPoint(centerPoint, context, renderConfig);
} else {
highlightPoint(centerPoint, context, renderConfig);
renderSingleLinearPoint(
context,
appState,
renderConfig,
centerPoint,
radius,
false,
);
}
} else {
renderSingleLinearPoint(
context,
appState,
renderConfig,
centerPoint,
POINT_HANDLE_SIZE / 2,
false,
true,
);
@@ -243,7 +270,6 @@ const renderLinearPointHandles = (
const highlightPoint = (
point: Point,
context: CanvasRenderingContext2D,
appState: AppState,
renderConfig: RenderConfig,
) => {
context.fillStyle = "rgba(105, 101, 219, 0.4)";
@@ -280,7 +306,7 @@ const renderLinearElementPointHighlight = (
context.save();
context.translate(renderConfig.scrollX, renderConfig.scrollY);
highlightPoint(point, context, appState, renderConfig);
highlightPoint(point, context, renderConfig);
context.restore();
};