Selaa lähdekoodia

feat: adjust line-confirm-threshold based on zoom (#2884)

Co-authored-by: Lipis <lipiridis@gmail.com>
vanilla_orig
David Luzar 4 vuotta sitten
vanhempi
commit
e6cd97c4f2
No account linked to committer's email address

+ 1
- 1
src/actions/actionFinalize.tsx Näytä tiedosto

83
       // If the multi point line closes the loop,
83
       // If the multi point line closes the loop,
84
       // set the last point to first point.
84
       // set the last point to first point.
85
       // This ensures that loop remains closed at different scales.
85
       // This ensures that loop remains closed at different scales.
86
-      const isLoop = isPathALoop(multiPointElement.points);
86
+      const isLoop = isPathALoop(multiPointElement.points, appState.zoom.value);
87
       if (
87
       if (
88
         multiPointElement.type === "line" ||
88
         multiPointElement.type === "line" ||
89
         multiPointElement.type === "draw"
89
         multiPointElement.type === "draw"

+ 5
- 2
src/components/App.tsx Näytä tiedosto

1963
           points: points.slice(0, -1),
1963
           points: points.slice(0, -1),
1964
         });
1964
         });
1965
       } else {
1965
       } else {
1966
-        if (isPathALoop(points)) {
1966
+        if (isPathALoop(points, this.state.zoom.value)) {
1967
           document.documentElement.style.cursor = CURSOR_TYPE.POINTER;
1967
           document.documentElement.style.cursor = CURSOR_TYPE.POINTER;
1968
         }
1968
         }
1969
         // update last uncommitted point
1969
         // update last uncommitted point
2635
       const { multiElement } = this.state;
2635
       const { multiElement } = this.state;
2636
 
2636
 
2637
       // finalize if completing a loop
2637
       // finalize if completing a loop
2638
-      if (multiElement.type === "line" && isPathALoop(multiElement.points)) {
2638
+      if (
2639
+        multiElement.type === "line" &&
2640
+        isPathALoop(multiElement.points, this.state.zoom.value)
2641
+      ) {
2639
         mutateElement(multiElement, {
2642
         mutateElement(multiElement, {
2640
           lastCommittedPoint:
2643
           lastCommittedPoint:
2641
             multiElement.points[multiElement.points.length - 1],
2644
             multiElement.points[multiElement.points.length - 1],

+ 2
- 2
src/constants.ts Näytä tiedosto

2
 
2
 
3
 export const APP_NAME = "Excalidraw";
3
 export const APP_NAME = "Excalidraw";
4
 
4
 
5
-export const DRAGGING_THRESHOLD = 10; // 10px
6
-export const LINE_CONFIRM_THRESHOLD = 10; // 10px
5
+export const DRAGGING_THRESHOLD = 10; // px
6
+export const LINE_CONFIRM_THRESHOLD = 8; // px
7
 export const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
7
 export const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
8
 export const ELEMENT_TRANSLATE_AMOUNT = 1;
8
 export const ELEMENT_TRANSLATE_AMOUNT = 1;
9
 export const TEXT_TO_CENTER_SNAP_THRESHOLD = 30;
9
 export const TEXT_TO_CENTER_SNAP_THRESHOLD = 30;

+ 1
- 1
src/element/linearElementEditor.ts Näytä tiedosto

129
       isDragging &&
129
       isDragging &&
130
       (activePointIndex === 0 || activePointIndex === element.points.length - 1)
130
       (activePointIndex === 0 || activePointIndex === element.points.length - 1)
131
     ) {
131
     ) {
132
-      if (isPathALoop(element.points)) {
132
+      if (isPathALoop(element.points, appState.zoom.value)) {
133
         LinearElementEditor.movePoint(
133
         LinearElementEditor.movePoint(
134
           element,
134
           element,
135
           activePointIndex,
135
           activePointIndex,

+ 9
- 6
src/math.ts Näytä tiedosto

1
-import { Point } from "./types";
1
+import { NormalizedZoomValue, Point, Zoom } from "./types";
2
 import { LINE_CONFIRM_THRESHOLD } from "./constants";
2
 import { LINE_CONFIRM_THRESHOLD } from "./constants";
3
 import { ExcalidrawLinearElement } from "./element/types";
3
 import { ExcalidrawLinearElement } from "./element/types";
4
 
4
 
147
 // to be considered a loop
147
 // to be considered a loop
148
 export const isPathALoop = (
148
 export const isPathALoop = (
149
   points: ExcalidrawLinearElement["points"],
149
   points: ExcalidrawLinearElement["points"],
150
+  /** supply if you want the loop detection to account for current zoom */
151
+  zoomValue: Zoom["value"] = 1 as NormalizedZoomValue,
150
 ): boolean => {
152
 ): boolean => {
151
   if (points.length >= 3) {
153
   if (points.length >= 3) {
152
-    const [firstPoint, lastPoint] = [points[0], points[points.length - 1]];
153
-    return (
154
-      distance2d(firstPoint[0], firstPoint[1], lastPoint[0], lastPoint[1]) <=
155
-      LINE_CONFIRM_THRESHOLD
156
-    );
154
+    const [first, last] = [points[0], points[points.length - 1]];
155
+    const distance = distance2d(first[0], first[1], last[0], last[1]);
156
+
157
+    // Adjusting LINE_CONFIRM_THRESHOLD to current zoom so that when zoomed in
158
+    // really close we make the threshold smaller, and vice versa.
159
+    return distance <= LINE_CONFIRM_THRESHOLD / zoomValue;
157
   }
160
   }
158
   return false;
161
   return false;
159
 };
162
 };

Loading…
Peruuta
Tallenna