foss/excalidraw
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update visible point indexes when zooming

Browse Source
This commit is contained in:
Aakansha Doshi 2022-08-26 20:49:50 +05:30
parent bff2f9178d
commit 189a557ed6
4 changed files with 56 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/actions/actionFinalize.tsx
View File

@ -34,7 +34,7 @@ export const actionFinalize = register({
);
}
const selectedLinearElement = appState.selectedLinearElement
? new LinearElementEditor(element, scene)
? new LinearElementEditor(element, scene, appState)
: null;
return {
elements:
@ -188,7 +188,7 @@ export const actionFinalize = register({
// To select the linear element when user has finished mutipoint editing
selectedLinearElement:
multiPointElement && isLinearElement(multiPointElement)
? new LinearElementEditor(multiPointElement, scene)
? new LinearElementEditor(multiPointElement, scene, appState)
: appState.selectedLinearElement,
pendingImageElementId: null,
},

2
src/actions/actionSelectAll.ts
View File

@ -35,7 +35,7 @@ export const actionSelectAll = register({
// single linear element selected
Object.keys(selectedElementIds).length === 1 &&
isLinearElement(elements[0])
? new LinearElementEditor(elements[0], app.scene)
? new LinearElementEditor(elements[0], app.scene, appState)
: null,
editingGroupId: null,
selectedElementIds,

28
src/components/App.tsx
View File

@ -1083,6 +1083,20 @@ class App extends React.Component<AppProps, AppState> {
this.refreshDeviceState(this.excalidrawContainerRef.current);
}
if (
this.state.selectedLinearElement &&
prevState.zoom !== this.state.zoom
) {
const selectedLinearElement =
LinearElementEditor.updateVisiblePointIndexes(
this.state.selectedLinearElement,
this.state,
);
this.setState({
selectedLinearElement,
});
}
if (
prevState.scrollX !== this.state.scrollX ||
prevState.scrollY !== this.state.scrollY
@ -1907,6 +1921,7 @@ class App extends React.Component<AppProps, AppState> {
editingLinearElement: new LinearElementEditor(
selectedElements[0],
this.scene,
this.state,
true,
),
});
@ -2486,6 +2501,7 @@ class App extends React.Component<AppProps, AppState> {
editingLinearElement: new LinearElementEditor(
selectedElements[0],
this.scene,
this.state,
true,
),
});
@ -4481,6 +4497,7 @@ class App extends React.Component<AppProps, AppState> {
? new LinearElementEditor(
elementsWithinSelection[0],
this.scene,
this.state,
)
: null,
},
@ -4745,6 +4762,7 @@ class App extends React.Component<AppProps, AppState> {
selectedLinearElement: new LinearElementEditor(
draggingElement,
this.scene,
this.state,
),
}));
} else {
@ -4812,6 +4830,7 @@ class App extends React.Component<AppProps, AppState> {
selectedLinearElement: new LinearElementEditor(
hitElement,
this.scene,
this.state,
),
});
}
@ -4914,6 +4933,7 @@ class App extends React.Component<AppProps, AppState> {
? new LinearElementEditor(
newSelectedElements[0],
this.scene,
this.state,
)
: prevState.selectedLinearElement,
},
@ -4942,7 +4962,11 @@ class App extends React.Component<AppProps, AppState> {
// Don't set `selectedLinearElement` if its same as the hitElement, this is mainly to prevent resetting the `hoverPointIndex` to -1.
// Future we should update the API to take care of setting the correct `hoverPointIndex` when initialized
prevState.selectedLinearElement?.elementId !== hitElement.id
? new LinearElementEditor(hitElement, this.scene)
? new LinearElementEditor(
hitElement,
this.scene,
this.state,
)
: prevState.selectedLinearElement,
},
this.scene.getNonDeletedElements(),
@ -5702,7 +5726,7 @@ class App extends React.Component<AppProps, AppState> {
...this.state,
selectedElementIds: { [element.id]: true },
selectedLinearElement: isLinearElement(element)
? new LinearElementEditor(element, this.scene)
? new LinearElementEditor(element, this.scene, this.state)
: null,
},
this.scene.getNonDeletedElements(),

33
src/element/linearElementEditor.ts
View File

@ -57,6 +57,7 @@ export class LinearElementEditor {
constructor(
element: NonDeleted<ExcalidrawLinearElement>,
scene: Scene,
appState: AppState,
editingLinearElement = false,
) {
this.elementId = element.id as string & {
@ -79,6 +80,7 @@ export class LinearElementEditor {
this.midPointHovered = false;
this.visiblePointIndexes = LinearElementEditor.getVisiblePointIndexes(
element,
appState,
editingLinearElement,
);
}
@ -419,6 +421,7 @@ export class LinearElementEditor {
static getVisiblePointIndexes(
element: NonDeleted<ExcalidrawLinearElement>,
appState: AppState,
editingLinearElement: boolean,
) {
if (!element) {
@ -429,12 +432,9 @@ export class LinearElementEditor {
element.points.forEach((point, index) => {
let distance = Infinity;
if (previousPoint) {
distance = distance2d(
point[0],
point[1],
previousPoint[0],
previousPoint[1],
);
distance =
distance2d(point[0], point[1], previousPoint[0], previousPoint[1]) *
appState.zoom.value;
}
const isExtremePoint = index === 0 || index === element.points.length - 1;
if (
@ -448,6 +448,25 @@ export class LinearElementEditor {
});
return visiblePointIndexes;
}
static updateVisiblePointIndexes(
linearElementEditor: LinearElementEditor,
appState: AppState,
) {
const { elementId } = linearElementEditor;
const element = LinearElementEditor.getElement(elementId);
if (!element) {
return linearElementEditor;
}
return {
...linearElementEditor,
visiblePointIndexes: LinearElementEditor.getVisiblePointIndexes(
element,
appState,
false,
),
};
}
static handlePointerDown(
event: React.PointerEvent<HTMLCanvasElement>,
appState: AppState,
@ -537,6 +556,7 @@ export class LinearElementEditor {
),
visiblePointIndexes: LinearElementEditor.getVisiblePointIndexes(
element,
appState,
true,
),
};
@ -612,6 +632,7 @@ export class LinearElementEditor {
if (ret.didAddPoint) {
const visiblePointIndexes = LinearElementEditor.getVisiblePointIndexes(
element,
appState,
!!appState.editingLinearElement,
);
ret.linearElementEditor = {