Dylan/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: hide points outside linear element editor when close enough

Browse Source
This commit is contained in:
Aakansha Doshi 2022-08-24 15:49:04 +05:30
parent 33300d19f6
commit bcb45f7cf6
2 changed files with 53 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/element/linearElementEditor.ts
View File

@ -409,6 +409,38 @@ export class LinearElementEditor {
return centerPoint(points[0], points.at(-1)!);
}
static getVisiblePointIndexes(
linearElementEditor: LinearElementEditor,
appState: AppState,
) {
const { elementId } = linearElementEditor;
const element = LinearElementEditor.getElement(elementId);
if (!element) {
return [];
}
const visiblePointIndexes: number[] = [];
let previousPoint: Point | null = null;
element.points.forEach((point, index) => {
let distance = Infinity;
if (previousPoint) {
distance = distance2d(
point[0],
point[1],
previousPoint[0],
previousPoint[1],
);
}
if (
(!appState.editingLinearElement &&
distance >= 2 * LinearElementEditor.POINT_HANDLE_SIZE) ||
appState.editingLinearElement
) {
visiblePointIndexes.push(index);
previousPoint = point;
}
});
return visiblePointIndexes;
}
static handlePointerDown(
event: React.PointerEvent<HTMLCanvasElement>,
appState: AppState,

31
src/renderer/renderScene.ts
View File

@ -159,7 +159,6 @@ const strokeGrid = (
const renderSingleLinearPoint = (
context: CanvasRenderingContext2D,
appState: AppState,
renderConfig: RenderConfig,
point: Point,
radius: number,
@ -207,18 +206,16 @@ const renderLinearPointHandles = (
const radius = appState.editingLinearElement
? POINT_HANDLE_SIZE
: POINT_HANDLE_SIZE / 2;
points.forEach((point, idx) => {
const isSelected =
!!appState.editingLinearElement?.selectedPointsIndices?.includes(idx);
renderSingleLinearPoint(
context,
const visiblePointIndexes = LinearElementEditor.getVisiblePointIndexes(
appState.selectedLinearElement,
appState,
renderConfig,
point,
radius,
isSelected,
);
visiblePointIndexes.forEach((index) => {
const isSelected =
!!appState.editingLinearElement?.selectedPointsIndices?.includes(index);
const point = points[index];
renderSingleLinearPoint(context, renderConfig, point, radius, isSelected);
});
if (points.length < 3) {
@ -233,7 +230,6 @@ const renderLinearPointHandles = (
if (appState.editingLinearElement) {
renderSingleLinearPoint(
context,
appState,
renderConfig,
centerPoint,
radius,
@ -244,7 +240,7 @@ const renderLinearPointHandles = (
highlightPoint(centerPoint, context, renderConfig);
renderSingleLinearPoint(
context,
appState,
renderConfig,
centerPoint,
radius,
@ -254,7 +250,6 @@ const renderLinearPointHandles = (
} else {
renderSingleLinearPoint(
context,
appState,
renderConfig,
centerPoint,
POINT_HANDLE_SIZE / 2,
@ -440,9 +435,19 @@ export const _renderScene = ({
if (
appState.selectedLinearElement &&
appState.selectedLinearElement.hoverPointIndex >= 0
) {
const visiblePointIndexes = LinearElementEditor.getVisiblePointIndexes(
appState.selectedLinearElement,
appState,
);
if (
visiblePointIndexes.includes(
appState.selectedLinearElement.hoverPointIndex,
)
) {
renderLinearElementPointHighlight(context, appState, renderConfig);
}
}
// Paint selected elements
if (
renderSelection &&