Merge remote-tracking branch 'origin/master' into zsviczian-stickynote

packages/element/src/binding.ts

@@ -999,6 +999,29 @@ export const bindPointToSnapToElementOutline = (
       intersector,
       FIXED_BINDING_DISTANCE,
     ).sort(pointDistanceSq)[0];
+
+    if (!intersection) {
+      const anotherPoint = pointFrom<GlobalPoint>(
+        !isHorizontal ? center[0] : snapPoint[0],
+        isHorizontal ? center[1] : snapPoint[1],
+      );
+      const anotherIntersector = lineSegment(
+        anotherPoint,
+        pointFromVector(
+          vectorScale(
+            vectorNormalize(vectorFromPoint(snapPoint, anotherPoint)),
+            Math.max(bindableElement.width, bindableElement.height) * 2,
+          ),
+          anotherPoint,
+        ),
+      );
+      intersection = intersectElementWithLineSegment(
+        bindableElement,
+        elementsMap,
+        anotherIntersector,
+        FIXED_BINDING_DISTANCE,
+      ).sort(pointDistanceSq)[0];
+    }
   } else {
     intersection = intersectElementWithLineSegment(
       bindableElement,

packages/element/src/bounds.ts

@@ -42,6 +42,7 @@ import {
   isBoundToContainer,
   isFreeDrawElement,
   isLinearElement,
+  isLineElement,
   isTextElement,
 } from "./typeChecks";
 
@@ -321,19 +322,42 @@ export const getElementLineSegments = (
 
   if (shape.type === "polycurve") {
     const curves = shape.data;
-    const points = curves
-      .map((curve) => pointsOnBezierCurves(curve, 10))
-      .flat();
-    let i = 0;
+    const pointsOnCurves = curves.map((curve) =>
+      pointsOnBezierCurves(curve, 10),
+    );
+
     const segments: LineSegment<GlobalPoint>[] = [];
-    while (i < points.length - 1) {
-      segments.push(
-        lineSegment(
-          pointFrom(points[i][0], points[i][1]),
-          pointFrom(points[i + 1][0], points[i + 1][1]),
-        ),
-      );
-      i++;
+
+    if (
+      (isLineElement(element) && !element.polygon) ||
+      isArrowElement(element)
+    ) {
+      for (const points of pointsOnCurves) {
+        let i = 0;
+
+        while (i < points.length - 1) {
+          segments.push(
+            lineSegment(
+              pointFrom(points[i][0], points[i][1]),
+              pointFrom(points[i + 1][0], points[i + 1][1]),
+            ),
+          );
+          i++;
+        }
+      }
+    } else {
+      const points = pointsOnCurves.flat();
+      let i = 0;
+
+      while (i < points.length - 1) {
+        segments.push(
+          lineSegment(
+            pointFrom(points[i][0], points[i][1]),
+            pointFrom(points[i + 1][0], points[i + 1][1]),
+          ),
+        );
+        i++;
+      }
     }
 
     return segments;

packages/element/src/comparisons.ts

@@ -10,7 +10,13 @@ export const hasBackground = (type: ElementOrToolType) =>
   type === "freedraw";
 
 export const hasStrokeColor = (type: ElementOrToolType) =>
-  type !== "image" && type !== "frame" && type !== "magicframe";
+  type === "rectangle" ||
+  type === "ellipse" ||
+  type === "diamond" ||
+  type === "freedraw" ||
+  type === "arrow" ||
+  type === "line" ||
+  type === "text";
 
 export const hasStrokeWidth = (type: ElementOrToolType) =>
   type === "rectangle" ||

packages/element/src/index.ts

@@ -29,6 +29,9 @@ export const hashElementsVersion = (elements: ElementsMapOrArray): number => {
 
 // string hash function (using djb2). Not cryptographically secure, use only
 // for versioning and such.
+// note: hashes individual code units (not code points),
+// but for hashing purposes this is fine as it iterates through every code unit
+// (as such, no need to encode to byte string first)
 export const hashString = (s: string): number => {
   let hash: number = 5381;
   for (let i = 0; i < s.length; i++) {

packages/element/src/transformHandles.ts

@@ -2,6 +2,7 @@ import {
   DEFAULT_TRANSFORM_HANDLE_SPACING,
   isAndroid,
   isIOS,
+  isMobileOrTablet,
 } from "@excalidraw/common";
 
 import { pointFrom, pointRotateRads } from "@excalidraw/math";
@@ -326,7 +327,7 @@ export const getTransformHandles = (
   );
 };
 
-export const shouldShowBoundingBox = (
+export const hasBoundingBox = (
   elements: readonly NonDeletedExcalidrawElement[],
   appState: InteractiveCanvasAppState,
 ) => {
@@ -345,5 +346,7 @@ export const shouldShowBoundingBox = (
     return true;
   }
 
-  return element.points.length > 2;
+  // on mobile/tablet we currently don't show bbox because of resize issues
+  // (also prob best for simplicity's sake)
+  return element.points.length > 2 && !isMobileOrTablet();
 };

packages/element/tests/binding.test.tsx

@@ -10,6 +10,8 @@ import { API } from "@excalidraw/excalidraw/tests/helpers/api";
 import { UI, Pointer, Keyboard } from "@excalidraw/excalidraw/tests/helpers/ui";
 import { fireEvent, render } from "@excalidraw/excalidraw/tests/test-utils";
 
+import { LinearElementEditor } from "@excalidraw/element";
+
 import { getTransformHandles } from "../src/transformHandles";
 import {
   getTextEditor,
@@ -413,16 +415,12 @@ describe("element binding", () => {
     expect(arrow.endBinding?.elementId).toBe(rectRight.id);
 
     // Drag arrow off of bound rectangle range
-    const handles = getTransformHandles(
+    const [elX, elY] = LinearElementEditor.getPointAtIndexGlobalCoordinates(
       arrow,
-      h.state.zoom,
-      arrayToMap(h.elements),
-      "mouse",
-    ).se!;
-
+      -1,
+      h.scene.getNonDeletedElementsMap(),
+    );
     Keyboard.keyDown(KEYS.CTRL_OR_CMD);
-    const elX = handles[0] + handles[2] / 2;
-    const elY = handles[1] + handles[3] / 2;
     mouse.downAt(elX, elY);
     mouse.moveTo(300, 400);
     mouse.up();