Updates to point to excalidraw-storage-backend

.env.development

@@ -1,5 +1,3 @@
-MODE="development"
-
 VITE_APP_BACKEND_V2_GET_URL=https://json-dev.excalidraw.com/api/v2/
 VITE_APP_BACKEND_V2_POST_URL=https://json-dev.excalidraw.com/api/v2/post/
 

.env.production

@@ -1,7 +1,5 @@
-MODE="production"
-
-VITE_APP_BACKEND_V2_GET_URL=https://json.excalidraw.com/api/v2/
-VITE_APP_BACKEND_V2_POST_URL=https://json.excalidraw.com/api/v2/post/
+VITE_APP_BACKEND_V2_GET_URL=https://ex.dylanbanta.com/api/v2/scenes/
+VITE_APP_BACKEND_V2_POST_URL=https://ex.dylanbanta.com/api/v2/scenes/
 
 VITE_APP_LIBRARY_URL=https://libraries.excalidraw.com
 VITE_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries

.github/copilot-instructions.md

@@ -1,45 +0,0 @@
-# Project coding standards
-
-## Generic Communication Guidelines
-
-- Be succint and be aware that expansive generative AI answers are costly and slow
-- Avoid providing explanations, trying to teach unless asked for, your chat partner is an expert
-- Stop apologising if corrected, just provide the correct information or code
-- Prefer code unless asked for explanation
-- Stop summarizing what you've changed after modifications unless asked for
-
-## TypeScript Guidelines
-
-- Use TypeScript for all new code
-- Where possible, prefer implementations without allocation
-- When there is an option, opt for more performant solutions and trade RAM usage for less CPU cycles
-- Prefer immutable data (const, readonly)
-- Use optional chaining (?.) and nullish coalescing (??) operators
-
-## React Guidelines
-
-- Use functional components with hooks
-- Follow the React hooks rules (no conditional hooks)
-- Keep components small and focused
-- Use CSS modules for component styling
-
-## Naming Conventions
-
-- Use PascalCase for component names, interfaces, and type aliases
-- Use camelCase for variables, functions, and methods
-- Use ALL_CAPS for constants
-
-## Error Handling
-
-- Use try/catch blocks for async operations
-- Implement proper error boundaries in React components
-- Always log errors with contextual information
-
-## Testing
-
-- Always attempt to fix #problems
-- Always offer to run `yarn test:app` in the project root after modifications are complete and attempt fixing the issues reported
-
-## Types
-
-- Always include `packages/math/src/types.ts` in the context when your write math related code and always use the Point type instead of { x, y}

.gitignore

@@ -25,5 +25,4 @@ packages/excalidraw/types
 coverage
 dev-dist
 html
-meta*.json
-.claude
+meta*.json

CLAUDE.md

@@ -1,34 +0,0 @@
-# CLAUDE.md
-
-## Project Structure
-
-Excalidraw is a **monorepo** with a clear separation between the core library and the application:
-
-- **`packages/excalidraw/`** - Main React component library published to npm as `@excalidraw/excalidraw`
-- **`excalidraw-app/`** - Full-featured web application (excalidraw.com) that uses the library
-- **`packages/`** - Core packages: `@excalidraw/common`, `@excalidraw/element`, `@excalidraw/math`, `@excalidraw/utils`
-- **`examples/`** - Integration examples (NextJS, browser script)
-
-## Development Workflow
-
-1. **Package Development**: Work in `packages/*` for editor features
-2. **App Development**: Work in `excalidraw-app/` for app-specific features
-3. **Testing**: Always run `yarn test:update` before committing
-4. **Type Safety**: Use `yarn test:typecheck` to verify TypeScript
-
-## Development Commands
-
-```bash
-yarn test:typecheck  # TypeScript type checking
-yarn test:update     # Run all tests (with snapshot updates)
-yarn fix             # Auto-fix formatting and linting issues
-```
-
-## Architecture Notes
-
-### Package System
-
-- Uses Yarn workspaces for monorepo management
-- Internal packages use path aliases (see `vitest.config.mts`)
-- Build system uses esbuild for packages, Vite for the app
-- TypeScript throughout with strict configuration

README.md

@@ -34,9 +34,6 @@
   <a href="https://discord.gg/UexuTaE">
     <img alt="Chat on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widge=false"/>
   </a>
-  <a href="https://deepwiki.com/excalidraw/excalidraw">
-    <img alt="Ask DeepWiki" src="https://deepwiki.com/badge.svg" />
-  </a>
   <a href="https://twitter.com/excalidraw">
     <img alt="Follow Excalidraw on Twitter" src="https://img.shields.io/twitter/follow/excalidraw.svg?label=follow+@excalidraw&style=social&logo=twitter"/>
   </a>

docker-compose.yml

@@ -19,7 +19,7 @@ services:
       - ./:/opt/node_app/app:delegated
       - ./package.json:/opt/node_app/package.json
       - ./yarn.lock:/opt/node_app/yarn.lock
-      - notused:/opt/node_app/app/node_modules
+#       - notused:/opt/node_app/app/node_modules
 
-volumes:
-  notused:
+# volumes:
+#   notused:

excalidraw-app/App.tsx

@@ -926,16 +926,21 @@ const ExcalidrawWrapper = () => {
         <ShareDialog
           collabAPI={collabAPI}
           onExportToBackend={async () => {
-            if (excalidrawAPI) {
-              try {
-                await onExportToBackend(
-                  excalidrawAPI.getSceneElements(),
-                  excalidrawAPI.getAppState(),
-                  excalidrawAPI.getFiles(),
-                );
-              } catch (error: any) {
-                setErrorMessage(error.message);
+            if (!excalidrawAPI) {
+              return;
+            }
+            try {
+              const { url, errorMessage } = await exportToBackend(
+                excalidrawAPI.getSceneElements(),
+                excalidrawAPI.getAppState(),
+                excalidrawAPI.getFiles(),
+              );
+              if (errorMessage) {
+                throw new Error(errorMessage);
               }
+              setLatestShareableLink(url);
+            } catch (error: any) {
+              setErrorMessage(error.message);
             }
           }}
         />

excalidraw-app/package.json

@@ -41,8 +41,8 @@
   "prettier": "@excalidraw/prettier-config",
   "scripts": {
     "build-node": "node ./scripts/build-node.js",
-    "build:app:docker": "cross-env VITE_APP_DISABLE_SENTRY=true vite build",
-    "build:app": "cross-env VITE_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA cross-env VITE_APP_ENABLE_TRACKING=true vite build",
+    "build:app:docker": "vite build",
+    "build:app": "vite build",
     "build:version": "node ../scripts/build-version.js",
     "build": "yarn build:app && yarn build:version",
     "start": "yarn && vite",

packages/common/src/constants.ts

@@ -477,10 +477,3 @@ export enum UserIdleState {
   AWAY = "away",
   IDLE = "idle",
 }
-
-/**
- * distance at which we merge points instead of adding a new merge-point
- * when converting a line to a polygon (merge currently means overlaping
- * the start and end points)
- */
-export const LINE_POLYGON_POINT_MERGE_DISTANCE = 20;

packages/element/src/elbowArrow.ts

@@ -974,25 +974,6 @@ export const updateElbowArrowPoints = (
         ),
       "Elbow arrow segments must be either horizontal or vertical",
     );
-
-    invariant(
-      updates.fixedSegments?.find(
-        (segment) =>
-          segment.index === 1 &&
-          pointsEqual(segment.start, (updates.points ?? arrow.points)[0]),
-      ) == null &&
-        updates.fixedSegments?.find(
-          (segment) =>
-            segment.index === (updates.points ?? arrow.points).length - 1 &&
-            pointsEqual(
-              segment.end,
-              (updates.points ?? arrow.points)[
-                (updates.points ?? arrow.points).length - 1
-              ],
-            ),
-        ) == null,
-      "The first and last segments cannot be fixed",
-    );
   }
 
   const fixedSegments = updates.fixedSegments ?? arrow.fixedSegments ?? [];

packages/element/src/linearElementEditor.ts

@@ -63,13 +63,10 @@ import {
   getControlPointsForBezierCurve,
   mapIntervalToBezierT,
   getBezierXY,
-  toggleLinePolygonState,
 } from "./shapes";
 
 import { getLockedLinearCursorAlignSize } from "./sizeHelpers";
 
-import { isLineElement } from "./typeChecks";
-
 import type { Scene } from "./Scene";
 
 import type { Bounds } from "./bounds";
@@ -88,35 +85,6 @@ import type {
   PointsPositionUpdates,
 } from "./types";
 
-/**
- * Normalizes line points so that the start point is at [0,0]. This is
- * expected in various parts of the codebase.
- *
- * Also returns the offsets - [0,0] if no normalization needed.
- *
- * @private
- */
-const getNormalizedPoints = ({
-  points,
-}: {
-  points: ExcalidrawLinearElement["points"];
-}): {
-  points: LocalPoint[];
-  offsetX: number;
-  offsetY: number;
-} => {
-  const offsetX = points[0][0];
-  const offsetY = points[0][1];
-
-  return {
-    points: points.map((p) => {
-      return pointFrom(p[0] - offsetX, p[1] - offsetY);
-    }),
-    offsetX,
-    offsetY,
-  };
-};
-
 export class LinearElementEditor {
   public readonly elementId: ExcalidrawElement["id"] & {
     _brand: "excalidrawLinearElementId";
@@ -159,11 +127,7 @@ export class LinearElementEditor {
     };
     if (!pointsEqual(element.points[0], pointFrom(0, 0))) {
       console.error("Linear element is not normalized", Error().stack);
-      mutateElement(
-        element,
-        elementsMap,
-        LinearElementEditor.getNormalizeElementPointsAndCoords(element),
-      );
+      LinearElementEditor.normalizePoints(element, elementsMap);
     }
     this.selectedPointsIndices = null;
     this.lastUncommittedPoint = null;
@@ -495,18 +459,6 @@ export class LinearElementEditor {
           selectedPoint === element.points.length - 1
         ) {
           if (isPathALoop(element.points, appState.zoom.value)) {
-            if (isLineElement(element)) {
-              scene.mutateElement(
-                element,
-                {
-                  ...toggleLinePolygonState(element, true),
-                },
-                {
-                  informMutation: false,
-                  isDragging: false,
-                },
-              );
-            }
             LinearElementEditor.movePoints(
               element,
               scene,
@@ -994,7 +946,9 @@ export class LinearElementEditor {
 
     if (!event.altKey) {
       if (lastPoint === lastUncommittedPoint) {
-        LinearElementEditor.deletePoints(element, app, [points.length - 1]);
+        LinearElementEditor.deletePoints(element, app.scene, [
+          points.length - 1,
+        ]);
       }
       return {
         ...appState.editingLinearElement,
@@ -1045,7 +999,7 @@ export class LinearElementEditor {
         ]),
       );
     } else {
-      LinearElementEditor.addPoints(element, app.scene, [newPoint]);
+      LinearElementEditor.addPoints(element, app.scene, [{ point: newPoint }]);
     }
     return {
       ...appState.editingLinearElement,
@@ -1188,23 +1142,40 @@ export class LinearElementEditor {
 
   /**
    * Normalizes line points so that the start point is at [0,0]. This is
-   * expected in various parts of the codebase.
-   *
-   * Also returns normalized x and y coords to account for the normalization
-   * of the points.
+   * expected in various parts of the codebase. Also returns new x/y to account
+   * for the potential normalization.
    */
-  static getNormalizeElementPointsAndCoords(element: ExcalidrawLinearElement) {
-    const { points, offsetX, offsetY } = getNormalizedPoints(element);
+  static getNormalizedPoints(element: ExcalidrawLinearElement): {
+    points: LocalPoint[];
+    x: number;
+    y: number;
+  } {
+    const { points } = element;
+
+    const offsetX = points[0][0];
+    const offsetY = points[0][1];
 
     return {
-      points,
+      points: points.map((p) => {
+        return pointFrom(p[0] - offsetX, p[1] - offsetY);
+      }),
       x: element.x + offsetX,
       y: element.y + offsetY,
     };
   }
-
   // element-mutating methods
   // ---------------------------------------------------------------------------
+  static normalizePoints(
+    element: NonDeleted<ExcalidrawLinearElement>,
+    elementsMap: ElementsMap,
+  ) {
+    mutateElement(
+      element,
+      elementsMap,
+      LinearElementEditor.getNormalizedPoints(element),
+    );
+  }
+
   static duplicateSelectedPoints(appState: AppState, scene: Scene): AppState {
     invariant(
       appState.editingLinearElement,
@@ -1283,47 +1254,41 @@ export class LinearElementEditor {
 
   static deletePoints(
     element: NonDeleted<ExcalidrawLinearElement>,
-    app: AppClassProperties,
+    scene: Scene,
     pointIndices: readonly number[],
   ) {
-    const isUncommittedPoint =
-      app.state.editingLinearElement?.lastUncommittedPoint ===
-      element.points[element.points.length - 1];
+    let offsetX = 0;
+    let offsetY = 0;
 
-    const isPolygon = isLineElement(element) && element.polygon;
+    const isDeletingOriginPoint = pointIndices.includes(0);
 
-    // break polygon if deleting start/end point
-    if (
-      isPolygon &&
-      // don't disable polygon if cleaning up uncommitted point
-      !isUncommittedPoint &&
-      (pointIndices.includes(0) ||
-        pointIndices.includes(element.points.length - 1))
-    ) {
-      app.scene.mutateElement(element, { polygon: false });
+    // if deleting first point, make the next to be [0,0] and recalculate
+    // positions of the rest with respect to it
+    if (isDeletingOriginPoint) {
+      const firstNonDeletedPoint = element.points.find((point, idx) => {
+        return !pointIndices.includes(idx);
+      });
+      if (firstNonDeletedPoint) {
+        offsetX = firstNonDeletedPoint[0];
+        offsetY = firstNonDeletedPoint[1];
+      }
     }
 
-    const nextPoints = element.points.filter((_, idx) => {
-      return !pointIndices.includes(idx);
-    });
-
-    if (isUncommittedPoint && isLineElement(element) && element.polygon) {
-      nextPoints[0] = pointFrom(
-        nextPoints[nextPoints.length - 1][0],
-        nextPoints[nextPoints.length - 1][1],
-      );
-    }
-
-    const {
-      points: normalizedPoints,
-      offsetX,
-      offsetY,
-    } = getNormalizedPoints({ points: nextPoints });
+    const nextPoints = element.points.reduce((acc: LocalPoint[], p, idx) => {
+      if (!pointIndices.includes(idx)) {
+        acc.push(
+          !acc.length
+            ? pointFrom(0, 0)
+            : pointFrom(p[0] - offsetX, p[1] - offsetY),
+        );
+      }
+      return acc;
+    }, []);
 
     LinearElementEditor._updatePoints(
       element,
-      app.scene,
-      normalizedPoints,
+      scene,
+      nextPoints,
       offsetX,
       offsetY,
     );
@@ -1332,27 +1297,16 @@ export class LinearElementEditor {
   static addPoints(
     element: NonDeleted<ExcalidrawLinearElement>,
     scene: Scene,
-    addedPoints: LocalPoint[],
+    targetPoints: { point: LocalPoint }[],
   ) {
-    const nextPoints = [...element.points, ...addedPoints];
-
-    if (isLineElement(element) && element.polygon) {
-      nextPoints[0] = pointFrom(
-        nextPoints[nextPoints.length - 1][0],
-        nextPoints[nextPoints.length - 1][1],
-      );
-    }
-
-    const {
-      points: normalizedPoints,
-      offsetX,
-      offsetY,
-    } = getNormalizedPoints({ points: nextPoints });
+    const offsetX = 0;
+    const offsetY = 0;
 
+    const nextPoints = [...element.points, ...targetPoints.map((x) => x.point)];
     LinearElementEditor._updatePoints(
       element,
       scene,
-      normalizedPoints,
+      nextPoints,
       offsetX,
       offsetY,
     );
@@ -1369,37 +1323,17 @@ export class LinearElementEditor {
   ) {
     const { points } = element;
 
-    // if polygon, move start and end points together
-    if (isLineElement(element) && element.polygon) {
-      const firstPointUpdate = pointUpdates.get(0);
-      const lastPointUpdate = pointUpdates.get(points.length - 1);
-
-      if (firstPointUpdate) {
-        pointUpdates.set(points.length - 1, {
-          point: pointFrom(
-            firstPointUpdate.point[0],
-            firstPointUpdate.point[1],
-          ),
-          isDragging: firstPointUpdate.isDragging,
-        });
-      } else if (lastPointUpdate) {
-        pointUpdates.set(0, {
-          point: pointFrom(lastPointUpdate.point[0], lastPointUpdate.point[1]),
-          isDragging: lastPointUpdate.isDragging,
-        });
-      }
-    }
-
     // in case we're moving start point, instead of modifying its position
     // which would break the invariant of it being at [0,0], we move
     // all the other points in the opposite direction by delta to
     // offset it. We do the same with actual element.x/y position, so
     // this hacks are completely transparent to the user.
-
-    const updatedOriginPoint =
+    const [deltaX, deltaY] =
       pointUpdates.get(0)?.point ?? pointFrom<LocalPoint>(0, 0);
-
-    const [offsetX, offsetY] = updatedOriginPoint;
+    const [offsetX, offsetY] = pointFrom<LocalPoint>(
+      deltaX - points[0][0],
+      deltaY - points[0][1],
+    );
 
     const nextPoints = isElbowArrow(element)
       ? [
@@ -1569,7 +1503,6 @@ export class LinearElementEditor {
         isDragging: options?.isDragging ?? false,
       });
     } else {
-      // TODO do we need to get precise coords here just to calc centers?
       const nextCoords = getElementPointsCoords(element, nextPoints);
       const prevCoords = getElementPointsCoords(element, element.points);
       const nextCenterX = (nextCoords[0] + nextCoords[2]) / 2;
@@ -1578,7 +1511,7 @@ export class LinearElementEditor {
       const prevCenterY = (prevCoords[1] + prevCoords[3]) / 2;
       const dX = prevCenterX - nextCenterX;
       const dY = prevCenterY - nextCenterY;
-      const rotatedOffset = pointRotateRads(
+      const rotated = pointRotateRads(
         pointFrom(offsetX, offsetY),
         pointFrom(dX, dY),
         element.angle,
@@ -1586,8 +1519,8 @@ export class LinearElementEditor {
       scene.mutateElement(element, {
         ...otherUpdates,
         points: nextPoints,
-        x: element.x + rotatedOffset[0],
-        y: element.y + rotatedOffset[1],
+        x: element.x + rotated[0],
+        y: element.y + rotated[1],
       });
     }
   }

packages/element/src/newElement.ts

@@ -25,8 +25,6 @@ import { getBoundTextMaxWidth } from "./textElement";
 import { normalizeText, measureText } from "./textMeasurements";
 import { wrapText } from "./textWrapping";
 
-import { isLineElement } from "./typeChecks";
-
 import type {
   ExcalidrawElement,
   ExcalidrawImageElement,
@@ -47,7 +45,6 @@ import type {
   ElementsMap,
   ExcalidrawArrowElement,
   ExcalidrawElbowArrowElement,
-  ExcalidrawLineElement,
 } from "./types";
 
 export type ElementConstructorOpts = MarkOptional<
@@ -460,10 +457,9 @@ export const newLinearElement = (
   opts: {
     type: ExcalidrawLinearElement["type"];
     points?: ExcalidrawLinearElement["points"];
-    polygon?: ExcalidrawLineElement["polygon"];
   } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawLinearElement> => {
-  const element = {
+  return {
     ..._newElementBase<ExcalidrawLinearElement>(opts.type, opts),
     points: opts.points || [],
     lastCommittedPoint: null,
@@ -472,17 +468,6 @@ export const newLinearElement = (
     startArrowhead: null,
     endArrowhead: null,
   };
-
-  if (isLineElement(element)) {
-    const lineElement: NonDeleted<ExcalidrawLineElement> = {
-      ...element,
-      polygon: opts.polygon ?? false,
-    };
-
-    return lineElement;
-  }
-
-  return element;
 };
 
 export const newArrowElement = <T extends boolean>(

packages/element/src/shapes.ts

@@ -5,7 +5,6 @@ import {
   ROUNDNESS,
   invariant,
   elementCenterPoint,
-  LINE_POLYGON_POINT_MERGE_DISTANCE,
 } from "@excalidraw/common";
 import {
   isPoint,
@@ -36,13 +35,10 @@ import { ShapeCache } from "./ShapeCache";
 
 import { getElementAbsoluteCoords, type Bounds } from "./bounds";
 
-import { canBecomePolygon } from "./typeChecks";
-
 import type {
   ElementsMap,
   ExcalidrawElement,
   ExcalidrawLinearElement,
-  ExcalidrawLineElement,
   NonDeleted,
 } from "./types";
 
@@ -400,44 +396,3 @@ export const isPathALoop = (
   }
   return false;
 };
-
-export const toggleLinePolygonState = (
-  element: ExcalidrawLineElement,
-  nextPolygonState: boolean,
-): {
-  polygon: ExcalidrawLineElement["polygon"];
-  points: ExcalidrawLineElement["points"];
-} | null => {
-  const updatedPoints = [...element.points];
-
-  if (nextPolygonState) {
-    if (!canBecomePolygon(element.points)) {
-      return null;
-    }
-
-    const firstPoint = updatedPoints[0];
-    const lastPoint = updatedPoints[updatedPoints.length - 1];
-
-    const distance = Math.hypot(
-      firstPoint[0] - lastPoint[0],
-      firstPoint[1] - lastPoint[1],
-    );
-
-    if (distance > LINE_POLYGON_POINT_MERGE_DISTANCE) {
-      updatedPoints.push(pointFrom(firstPoint[0], firstPoint[1]));
-    } else {
-      updatedPoints[updatedPoints.length - 1] = pointFrom(
-        firstPoint[0],
-        firstPoint[1],
-      );
-    }
-  }
-
-  // TODO: satisfies ElementUpdate<ExcalidrawLineElement>
-  const ret = {
-    polygon: nextPolygonState,
-    points: updatedPoints,
-  };
-
-  return ret;
-};

packages/element/src/sizeHelpers.ts

@@ -3,21 +3,13 @@ import {
   viewportCoordsToSceneCoords,
 } from "@excalidraw/common";
 
-import { pointsEqual } from "@excalidraw/math";
-
 import type { AppState, Offsets, Zoom } from "@excalidraw/excalidraw/types";
 
 import { getCommonBounds, getElementBounds } from "./bounds";
-import {
-  isArrowElement,
-  isFreeDrawElement,
-  isLinearElement,
-} from "./typeChecks";
+import { isFreeDrawElement, isLinearElement } from "./typeChecks";
 
 import type { ElementsMap, ExcalidrawElement } from "./types";
 
-export const INVISIBLY_SMALL_ELEMENT_SIZE = 0.1;
-
 // TODO:  remove invisible elements consistently actions, so that invisible elements are not recorded by the store, exported, broadcasted or persisted
 //        - perhaps could be as part of a standalone 'cleanup' action, in addition to 'finalize'
 //        - could also be part of `_clearElements`
@@ -25,18 +17,8 @@ export const isInvisiblySmallElement = (
   element: ExcalidrawElement,
 ): boolean => {
   if (isLinearElement(element) || isFreeDrawElement(element)) {
-    return (
-      element.points.length < 2 ||
-      (element.points.length === 2 &&
-        isArrowElement(element) &&
-        pointsEqual(
-          element.points[0],
-          element.points[element.points.length - 1],
-          INVISIBLY_SMALL_ELEMENT_SIZE,
-        ))
-    );
+    return element.points.length < 2;
   }
-
   return element.width === 0 && element.height === 0;
 };
 

packages/element/src/typeChecks.ts

@@ -1,7 +1,5 @@
 import { ROUNDNESS, assertNever } from "@excalidraw/common";
 
-import { pointsEqual } from "@excalidraw/math";
-
 import type { ElementOrToolType } from "@excalidraw/excalidraw/types";
 
 import type { MarkNonNullable } from "@excalidraw/common/utility-types";
@@ -27,7 +25,6 @@ import type {
   ExcalidrawMagicFrameElement,
   ExcalidrawArrowElement,
   ExcalidrawElbowArrowElement,
-  ExcalidrawLineElement,
   PointBinding,
   FixedPointBinding,
   ExcalidrawFlowchartNodeElement,
@@ -111,12 +108,6 @@ export const isLinearElement = (
   return element != null && isLinearElementType(element.type);
 };
 
-export const isLineElement = (
-  element?: ExcalidrawElement | null,
-): element is ExcalidrawLineElement => {
-  return element != null && element.type === "line";
-};
-
 export const isArrowElement = (
   element?: ExcalidrawElement | null,
 ): element is ExcalidrawArrowElement => {
@@ -381,26 +372,3 @@ export const getLinearElementSubType = (
   }
   return "line";
 };
-
-/**
- * Checks if current element points meet all the conditions for polygon=true
- * (this isn't a element type check, for that use isLineElement).
- *
- * If you want to check if points *can* be turned into a polygon, use
- *  canBecomePolygon(points).
- */
-export const isValidPolygon = (
-  points: ExcalidrawLineElement["points"],
-): boolean => {
-  return points.length > 3 && pointsEqual(points[0], points[points.length - 1]);
-};
-
-export const canBecomePolygon = (
-  points: ExcalidrawLineElement["points"],
-): boolean => {
-  return (
-    points.length > 3 ||
-    // 3-point polygons can't have all points in a single line
-    (points.length === 3 && !pointsEqual(points[0], points[points.length - 1]))
-  );
-};

packages/element/src/types.ts

@@ -296,10 +296,8 @@ export type FixedPointBinding = Merge<
   }
 >;
 
-type Index = number;
-
 export type PointsPositionUpdates = Map<
-  Index,
+  number,
   { point: LocalPoint; isDragging?: boolean }
 >;
 
@@ -328,16 +326,10 @@ export type ExcalidrawLinearElement = _ExcalidrawElementBase &
     endArrowhead: Arrowhead | null;
   }>;
 
-export type ExcalidrawLineElement = ExcalidrawLinearElement &
-  Readonly<{
-    type: "line";
-    polygon: boolean;
-  }>;
-
 export type FixedSegment = {
   start: LocalPoint;
   end: LocalPoint;
-  index: Index;
+  index: number;
 };
 
 export type ExcalidrawArrowElement = ExcalidrawLinearElement &

packages/element/tests/linearElementEditor.test.tsx

@@ -292,7 +292,7 @@ describe("Test Linear Elements", () => {
       expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
         `12`,
       );
-      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
+      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
 
       expect(line.points.length).toEqual(3);
       expect(line.points).toMatchInlineSnapshot(`
@@ -333,7 +333,7 @@ describe("Test Linear Elements", () => {
       expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
         `9`,
       );
-      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
+      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
 
       const midPointsWithRoundEdge = LinearElementEditor.getEditorMidPoints(
         h.elements[0] as ExcalidrawLinearElement,
@@ -394,7 +394,7 @@ describe("Test Linear Elements", () => {
       expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
         `12`,
       );
-      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`8`);
+      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
 
       expect([line.x, line.y]).toEqual([
         points[0][0] + deltaX,
@@ -462,7 +462,7 @@ describe("Test Linear Elements", () => {
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `16`,
         );
-        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`8`);
+        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
 
         expect(line.points.length).toEqual(5);
 
@@ -513,7 +513,7 @@ describe("Test Linear Elements", () => {
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `12`,
         );
-        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
+        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
 
         const newPoints = LinearElementEditor.getPointsGlobalCoordinates(
           line,
@@ -554,7 +554,7 @@ describe("Test Linear Elements", () => {
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `12`,
         );
-        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
+        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
 
         const newPoints = LinearElementEditor.getPointsGlobalCoordinates(
           line,
@@ -602,7 +602,7 @@ describe("Test Linear Elements", () => {
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `18`,
         );
-        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`8`);
+        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
 
         const newMidPoints = LinearElementEditor.getEditorMidPoints(
           line,
@@ -660,7 +660,7 @@ describe("Test Linear Elements", () => {
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `16`,
         );
-        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`8`);
+        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
         expect(line.points.length).toEqual(5);
 
         expect((h.elements[0] as ExcalidrawLinearElement).points)
@@ -758,7 +758,7 @@ describe("Test Linear Elements", () => {
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `12`,
         );
-        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
+        expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
 
         const newPoints = LinearElementEditor.getPointsGlobalCoordinates(
           line,

packages/excalidraw/actions/actionDeleteSelected.tsx

@@ -258,7 +258,11 @@ export const actionDeleteSelected = register({
           : endBindingElement,
       };
 
-      LinearElementEditor.deletePoints(element, app, selectedPointsIndices);
+      LinearElementEditor.deletePoints(
+        element,
+        app.scene,
+        selectedPointsIndices,
+      );
 
       return {
         elements,

packages/excalidraw/actions/actionFinalize.tsx

@@ -3,16 +3,10 @@ import { pointFrom } from "@excalidraw/math";
 import {
   maybeBindLinearElement,
   bindOrUnbindLinearElement,
-  isBindingEnabled,
-} from "@excalidraw/element/binding";
-import { isValidPolygon, LinearElementEditor } from "@excalidraw/element";
-
-import {
-  isBindingElement,
-  isFreeDrawElement,
-  isLinearElement,
-  isLineElement,
 } from "@excalidraw/element";
+import { LinearElementEditor } from "@excalidraw/element";
+
+import { isBindingElement, isLinearElement } from "@excalidraw/element";
 
 import { KEYS, arrayToMap, updateActiveTool } from "@excalidraw/common";
 import { isPathALoop } from "@excalidraw/element";
@@ -21,13 +15,6 @@ import { isInvisiblySmallElement } from "@excalidraw/element";
 
 import { CaptureUpdateAction } from "@excalidraw/element";
 
-import type { LocalPoint } from "@excalidraw/math";
-import type {
-  ExcalidrawElement,
-  ExcalidrawLinearElement,
-  NonDeleted,
-} from "@excalidraw/element/types";
-
 import { t } from "../i18n";
 import { resetCursor } from "../cursor";
 import { done } from "../components/icons";
@@ -41,50 +28,11 @@ export const actionFinalize = register({
   name: "finalize",
   label: "",
   trackEvent: false,
-  perform: (elements, appState, data, app) => {
+  perform: (elements, appState, _, app) => {
     const { interactiveCanvas, focusContainer, scene } = app;
 
     const elementsMap = scene.getNonDeletedElementsMap();
 
-    if (data?.event && appState.selectedLinearElement) {
-      const linearElementEditor = LinearElementEditor.handlePointerUp(
-        data.event,
-        appState.selectedLinearElement,
-        appState,
-        app.scene,
-      );
-
-      const { startBindingElement, endBindingElement } = linearElementEditor;
-      const element = app.scene.getElement(linearElementEditor.elementId);
-      if (isBindingElement(element)) {
-        bindOrUnbindLinearElement(
-          element,
-          startBindingElement,
-          endBindingElement,
-          app.scene,
-        );
-      }
-
-      if (linearElementEditor !== appState.selectedLinearElement) {
-        let newElements = elements;
-        if (element && isInvisiblySmallElement(element)) {
-          // TODO: #7348 in theory this gets recorded by the store, so the invisible elements could be restored by the undo/redo, which might be not what we would want
-          newElements = newElements.filter((el) => el.id !== element!.id);
-        }
-        return {
-          elements: newElements,
-          appState: {
-            selectedLinearElement: {
-              ...linearElementEditor,
-              selectedPointsIndices: null,
-            },
-            suggestedBindings: [],
-          },
-          captureUpdate: CaptureUpdateAction.IMMEDIATELY,
-        };
-      }
-    }
-
     if (appState.editingLinearElement) {
       const { elementId, startBindingElement, endBindingElement } =
         appState.editingLinearElement;
@@ -99,12 +47,6 @@ export const actionFinalize = register({
             scene,
           );
         }
-        if (isLineElement(element) && !isValidPolygon(element.points)) {
-          scene.mutateElement(element, {
-            polygon: false,
-          });
-        }
-
         return {
           elements:
             element.points.length < 2 || isInvisiblySmallElement(element)
@@ -138,98 +80,75 @@ export const actionFinalize = register({
       focusContainer();
     }
 
-    let element: NonDeleted<ExcalidrawElement> | null = null;
-    if (appState.multiElement) {
-      element = appState.multiElement;
-    } else if (
-      appState.newElement?.type === "freedraw" ||
-      isBindingElement(appState.newElement)
-    ) {
-      element = appState.newElement;
-    } else if (Object.keys(appState.selectedElementIds).length === 1) {
-      const candidate = elementsMap.get(
-        Object.keys(appState.selectedElementIds)[0],
-      ) as NonDeleted<ExcalidrawLinearElement> | undefined;
-      if (candidate) {
-        element = candidate;
-      }
-    }
+    const multiPointElement = appState.multiElement
+      ? appState.multiElement
+      : appState.newElement?.type === "freedraw"
+      ? appState.newElement
+      : null;
 
-    if (element) {
+    if (multiPointElement) {
       // pen and mouse have hover
       if (
-        appState.multiElement &&
-        element.type !== "freedraw" &&
+        multiPointElement.type !== "freedraw" &&
         appState.lastPointerDownWith !== "touch"
       ) {
-        const { points, lastCommittedPoint } = element;
+        const { points, lastCommittedPoint } = multiPointElement;
         if (
           !lastCommittedPoint ||
           points[points.length - 1] !== lastCommittedPoint
         ) {
-          scene.mutateElement(element, {
-            points: element.points.slice(0, -1),
+          scene.mutateElement(multiPointElement, {
+            points: multiPointElement.points.slice(0, -1),
           });
         }
       }
 
-      if (element && isInvisiblySmallElement(element)) {
+      if (isInvisiblySmallElement(multiPointElement)) {
         // TODO: #7348 in theory this gets recorded by the store, so the invisible elements could be restored by the undo/redo, which might be not what we would want
-        newElements = newElements.filter((el) => el.id !== element!.id);
+        newElements = newElements.filter(
+          (el) => el.id !== multiPointElement.id,
+        );
       }
 
-      if (isLinearElement(element) || isFreeDrawElement(element)) {
-        // If the multi point line closes the loop,
-        // set the last point to first point.
-        // This ensures that loop remains closed at different scales.
-        const isLoop = isPathALoop(element.points, appState.zoom.value);
-
-        if (isLoop && (isLineElement(element) || isFreeDrawElement(element))) {
-          const linePoints = element.points;
+      // If the multi point line closes the loop,
+      // set the last point to first point.
+      // This ensures that loop remains closed at different scales.
+      const isLoop = isPathALoop(multiPointElement.points, appState.zoom.value);
+      if (
+        multiPointElement.type === "line" ||
+        multiPointElement.type === "freedraw"
+      ) {
+        if (isLoop) {
+          const linePoints = multiPointElement.points;
           const firstPoint = linePoints[0];
-          const points: LocalPoint[] = linePoints.map((p, index) =>
-            index === linePoints.length - 1
-              ? pointFrom(firstPoint[0], firstPoint[1])
-              : p,
-          );
-          if (isLineElement(element)) {
-            scene.mutateElement(element, {
-              points,
-              polygon: true,
-            });
-          } else {
-            scene.mutateElement(element, {
-              points,
-            });
-          }
-        }
-
-        if (isLineElement(element) && !isValidPolygon(element.points)) {
-          scene.mutateElement(element, {
-            polygon: false,
+          scene.mutateElement(multiPointElement, {
+            points: linePoints.map((p, index) =>
+              index === linePoints.length - 1
+                ? pointFrom(firstPoint[0], firstPoint[1])
+                : p,
+            ),
           });
         }
+      }
 
-        if (
-          isBindingElement(element) &&
-          !isLoop &&
-          element.points.length > 1 &&
-          isBindingEnabled(appState)
-        ) {
-          const [x, y] = LinearElementEditor.getPointAtIndexGlobalCoordinates(
-            element,
-            -1,
-            arrayToMap(elements),
-          );
-          maybeBindLinearElement(element, appState, { x, y }, scene);
-        }
+      if (
+        isBindingElement(multiPointElement) &&
+        !isLoop &&
+        multiPointElement.points.length > 1
+      ) {
+        const [x, y] = LinearElementEditor.getPointAtIndexGlobalCoordinates(
+          multiPointElement,
+          -1,
+          arrayToMap(elements),
+        );
+        maybeBindLinearElement(multiPointElement, appState, { x, y }, scene);
       }
     }
 
     if (
       (!appState.activeTool.locked &&
         appState.activeTool.type !== "freedraw") ||
-      !element
+      !multiPointElement
     ) {
       resetCursor(interactiveCanvas);
     }
@@ -256,7 +175,7 @@ export const actionFinalize = register({
         activeTool:
           (appState.activeTool.locked ||
             appState.activeTool.type === "freedraw") &&
-          element
+          multiPointElement
             ? appState.activeTool
             : activeTool,
         activeEmbeddable: null,
@@ -267,18 +186,21 @@ export const actionFinalize = register({
         startBoundElement: null,
         suggestedBindings: [],
         selectedElementIds:
-          element &&
+          multiPointElement &&
           !appState.activeTool.locked &&
           appState.activeTool.type !== "freedraw"
             ? {
                 ...appState.selectedElementIds,
-                [element.id]: true,
+                [multiPointElement.id]: true,
               }
             : appState.selectedElementIds,
         // To select the linear element when user has finished mutipoint editing
         selectedLinearElement:
-          element && isLinearElement(element)
-            ? new LinearElementEditor(element, arrayToMap(newElements))
+          multiPointElement && isLinearElement(multiPointElement)
+            ? new LinearElementEditor(
+                multiPointElement,
+                arrayToMap(newElements),
+              )
             : appState.selectedLinearElement,
         pendingImageElementId: null,
       },

packages/excalidraw/actions/actionLinearEditor.tsx

@@ -1,29 +1,19 @@
 import { LinearElementEditor } from "@excalidraw/element";
-import {
-  isElbowArrow,
-  isLinearElement,
-  isLineElement,
-} from "@excalidraw/element";
+
+import { isElbowArrow, isLinearElement } from "@excalidraw/element";
+
 import { arrayToMap } from "@excalidraw/common";
 
 import { CaptureUpdateAction } from "@excalidraw/element";
 
-import type {
-  ExcalidrawLinearElement,
-  ExcalidrawLineElement,
-} from "@excalidraw/element/types";
+import type { ExcalidrawLinearElement } from "@excalidraw/element/types";
 
 import { DEFAULT_CATEGORIES } from "../components/CommandPalette/CommandPalette";
 import { ToolButton } from "../components/ToolButton";
-import { lineEditorIcon, polygonIcon } from "../components/icons";
+import { lineEditorIcon } from "../components/icons";
+
 import { t } from "../i18n";
 
-import { ButtonIcon } from "../components/ButtonIcon";
-
-import { newElementWith } from "../../element/src/mutateElement";
-
-import { toggleLinePolygonState } from "../../element/src/shapes";
-
 import { register } from "./register";
 
 export const actionToggleLinearEditor = register({
@@ -93,110 +83,3 @@ export const actionToggleLinearEditor = register({
     );
   },
 });
-
-export const actionTogglePolygon = register({
-  name: "togglePolygon",
-  category: DEFAULT_CATEGORIES.elements,
-  icon: polygonIcon,
-  keywords: ["loop"],
-  label: (elements, appState, app) => {
-    const selectedElements = app.scene.getSelectedElements({
-      selectedElementIds: appState.selectedElementIds,
-    });
-
-    const allPolygons = !selectedElements.some(
-      (element) => !isLineElement(element) || !element.polygon,
-    );
-
-    return allPolygons
-      ? "labels.polygon.breakPolygon"
-      : "labels.polygon.convertToPolygon";
-  },
-  trackEvent: {
-    category: "element",
-  },
-  predicate: (elements, appState, _, app) => {
-    const selectedElements = app.scene.getSelectedElements({
-      selectedElementIds: appState.selectedElementIds,
-    });
-
-    return (
-      selectedElements.length > 0 &&
-      selectedElements.every(
-        (element) => isLineElement(element) && element.points.length >= 4,
-      )
-    );
-  },
-  perform(elements, appState, _, app) {
-    const selectedElements = app.scene.getSelectedElements(appState);
-
-    if (selectedElements.some((element) => !isLineElement(element))) {
-      return false;
-    }
-
-    const targetElements = selectedElements as ExcalidrawLineElement[];
-
-    // if one element not a polygon, convert all to polygon
-    const nextPolygonState = targetElements.some((element) => !element.polygon);
-
-    const targetElementsMap = arrayToMap(targetElements);
-
-    return {
-      elements: elements.map((element) => {
-        if (!targetElementsMap.has(element.id) || !isLineElement(element)) {
-          return element;
-        }
-
-        return newElementWith(element, {
-          backgroundColor: nextPolygonState
-            ? element.backgroundColor
-            : "transparent",
-          ...toggleLinePolygonState(element, nextPolygonState),
-        });
-      }),
-      appState,
-      captureUpdate: CaptureUpdateAction.IMMEDIATELY,
-    };
-  },
-  PanelComponent: ({ appState, updateData, app }) => {
-    const selectedElements = app.scene.getSelectedElements({
-      selectedElementIds: appState.selectedElementIds,
-    });
-
-    if (
-      selectedElements.length === 0 ||
-      selectedElements.some(
-        (element) =>
-          !isLineElement(element) ||
-          // only show polygon button if every selected element is already
-          // a polygon, effectively showing this button only to allow for
-          // disabling the polygon state
-          !element.polygon ||
-          element.points.length < 3,
-      )
-    ) {
-      return null;
-    }
-
-    const allPolygon = selectedElements.every(
-      (element) => isLineElement(element) && element.polygon,
-    );
-
-    const label = t(
-      allPolygon
-        ? "labels.polygon.breakPolygon"
-        : "labels.polygon.convertToPolygon",
-    );
-
-    return (
-      <ButtonIcon
-        icon={polygonIcon}
-        title={label}
-        aria-label={label}
-        active={allPolygon}
-        onClick={() => updateData(null)}
-        style={{ marginLeft: "auto" }}
-      />
-    );
-  },
-});

packages/excalidraw/actions/actionProperties.tsx

@@ -20,11 +20,10 @@ import {
   getShortcutKey,
   tupleToCoors,
   getLineHeight,
-  isTransparent,
   reduceToCommonValue,
 } from "@excalidraw/common";
 
-import { canBecomePolygon, getNonDeletedElements } from "@excalidraw/element";
+import { getNonDeletedElements } from "@excalidraw/element";
 
 import {
   bindLinearElement,
@@ -48,7 +47,6 @@ import {
   isBoundToContainer,
   isElbowArrow,
   isLinearElement,
-  isLineElement,
   isTextElement,
   isUsingAdaptiveRadius,
 } from "@excalidraw/element";
@@ -138,8 +136,6 @@ import {
   isSomeElementSelected,
 } from "../scene";
 
-import { toggleLinePolygonState } from "../../element/src/shapes";
-
 import { register } from "./register";
 
 import type { AppClassProperties, AppState, Primitive } from "../types";
@@ -353,52 +349,22 @@ export const actionChangeBackgroundColor = register({
   name: "changeBackgroundColor",
   label: "labels.changeBackground",
   trackEvent: false,
-  perform: (elements, appState, value, app) => {
-    if (!value.currentItemBackgroundColor) {
-      return {
-        appState: {
-          ...appState,
-          ...value,
-        },
-        captureUpdate: CaptureUpdateAction.EVENTUALLY,
-      };
-    }
-
-    let nextElements;
-
-    const selectedElements = app.scene.getSelectedElements(appState);
-    const shouldEnablePolygon =
-      !isTransparent(value.currentItemBackgroundColor) &&
-      selectedElements.every(
-        (el) => isLineElement(el) && canBecomePolygon(el.points),
-      );
-
-    if (shouldEnablePolygon) {
-      const selectedElementsMap = arrayToMap(selectedElements);
-      nextElements = elements.map((el) => {
-        if (selectedElementsMap.has(el.id) && isLineElement(el)) {
-          return newElementWith(el, {
-            backgroundColor: value.currentItemBackgroundColor,
-            ...toggleLinePolygonState(el, true),
-          });
-        }
-        return el;
-      });
-    } else {
-      nextElements = changeProperty(elements, appState, (el) =>
-        newElementWith(el, {
-          backgroundColor: value.currentItemBackgroundColor,
-        }),
-      );
-    }
-
+  perform: (elements, appState, value) => {
     return {
-      elements: nextElements,
+      ...(value.currentItemBackgroundColor && {
+        elements: changeProperty(elements, appState, (el) =>
+          newElementWith(el, {
+            backgroundColor: value.currentItemBackgroundColor,
+          }),
+        ),
+      }),
       appState: {
         ...appState,
         ...value,
       },
-      captureUpdate: CaptureUpdateAction.IMMEDIATELY,
+      captureUpdate: !!value.currentItemBackgroundColor
+        ? CaptureUpdateAction.IMMEDIATELY
+        : CaptureUpdateAction.EVENTUALLY,
     };
   },
   PanelComponent: ({ elements, appState, updateData, app }) => (
@@ -1407,7 +1373,7 @@ export const actionChangeRoundness = register({
       captureUpdate: CaptureUpdateAction.IMMEDIATELY,
     };
   },
-  PanelComponent: ({ elements, appState, updateData, app, renderAction }) => {
+  PanelComponent: ({ elements, appState, updateData, app }) => {
     const targetElements = getTargetElements(
       getNonDeletedElements(elements),
       appState,
@@ -1451,7 +1417,6 @@ export const actionChangeRoundness = register({
             )}
             onChange={(value) => updateData(value)}
           />
-          {renderAction("togglePolygon")}
         </div>
       </fieldset>
     );
@@ -1518,13 +1483,13 @@ const getArrowheadOptions = (flip: boolean) => {
       value: "crowfoot_one",
       text: t("labels.arrowhead_crowfoot_one"),
       icon: <ArrowheadCrowfootOneIcon flip={flip} />,
-      keyBinding: "x",
+      keyBinding: "c",
     },
     {
       value: "crowfoot_many",
       text: t("labels.arrowhead_crowfoot_many"),
       icon: <ArrowheadCrowfootIcon flip={flip} />,
-      keyBinding: "c",
+      keyBinding: "x",
     },
     {
       value: "crowfoot_one_or_many",

packages/excalidraw/actions/manager.tsx

@@ -179,7 +179,6 @@ export class ActionManager {
           appProps={this.app.props}
           app={this.app}
           data={data}
-          renderAction={this.renderAction}
         />
       );
     }

packages/excalidraw/actions/types.ts

@@ -142,8 +142,7 @@ export type ActionName =
   | "cropEditor"
   | "wrapSelectionInFrame"
   | "toggleLassoTool"
-  | "toggleShapeSwitch"
-  | "togglePolygon";
+  | "toggleShapeSwitch";
 
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];
@@ -152,10 +151,6 @@ export type PanelComponentProps = {
   appProps: ExcalidrawProps;
   data?: Record<string, any>;
   app: AppClassProperties;
-  renderAction: (
-    name: ActionName,
-    data?: PanelComponentProps["data"],
-  ) => React.JSX.Element | null;
 };
 
 export interface Action {

packages/excalidraw/components/App.tsx

@@ -107,11 +107,13 @@ import {
 import { getCommonBounds, getElementAbsoluteCoords } from "@excalidraw/element";
 
 import {
+  bindOrUnbindLinearElement,
   bindOrUnbindLinearElements,
   fixBindingsAfterDeletion,
   getHoveredElementForBinding,
   isBindingEnabled,
   isLinearElementSimpleAndAlreadyBound,
+  maybeBindLinearElement,
   shouldEnableBindingForPointerEvent,
   updateBoundElements,
   getSuggestedBindingsForArrows,
@@ -2795,6 +2797,7 @@ class App extends React.Component<AppProps, AppState> {
     this.updateEmbeddables();
     const elements = this.scene.getElementsIncludingDeleted();
     const elementsMap = this.scene.getElementsMapIncludingDeleted();
+    const nonDeletedElementsMap = this.scene.getNonDeletedElementsMap();
 
     if (!this.state.showWelcomeScreen && !elements.length) {
       this.setState({ showWelcomeScreen: true });
@@ -2941,6 +2944,27 @@ class App extends React.Component<AppProps, AppState> {
       this.setState({ selectedLinearElement: null });
     }
 
+    const { multiElement } = prevState;
+    if (
+      prevState.activeTool !== this.state.activeTool &&
+      multiElement != null &&
+      isBindingEnabled(this.state) &&
+      isBindingElement(multiElement, false)
+    ) {
+      maybeBindLinearElement(
+        multiElement,
+        this.state,
+        tupleToCoors(
+          LinearElementEditor.getPointAtIndexGlobalCoordinates(
+            multiElement,
+            -1,
+            nonDeletedElementsMap,
+          ),
+        ),
+        this.scene,
+      );
+    }
+
     this.store.commit(elementsMap, this.state);
 
     // Do not notify consumers if we're still loading the scene. Among other
@@ -9119,9 +9143,34 @@ class App extends React.Component<AppProps, AppState> {
             this.setState({ selectedLinearElement: null });
           }
         } else {
-          this.actionManager.executeAction(actionFinalize, "ui", {
-            event: childEvent,
-          });
+          const linearElementEditor = LinearElementEditor.handlePointerUp(
+            childEvent,
+            this.state.selectedLinearElement,
+            this.state,
+            this.scene,
+          );
+
+          const { startBindingElement, endBindingElement } =
+            linearElementEditor;
+          const element = this.scene.getElement(linearElementEditor.elementId);
+          if (isBindingElement(element)) {
+            bindOrUnbindLinearElement(
+              element,
+              startBindingElement,
+              endBindingElement,
+              this.scene,
+            );
+          }
+
+          if (linearElementEditor !== this.state.selectedLinearElement) {
+            this.setState({
+              selectedLinearElement: {
+                ...linearElementEditor,
+                selectedPointsIndices: null,
+              },
+              suggestedBindings: [],
+            });
+          }
         }
       }
 
@@ -9245,7 +9294,12 @@ class App extends React.Component<AppProps, AppState> {
             isBindingEnabled(this.state) &&
             isBindingElement(newElement, false)
           ) {
-            this.actionManager.executeAction(actionFinalize);
+            maybeBindLinearElement(
+              newElement,
+              this.state,
+              pointerCoords,
+              this.scene,
+            );
           }
           this.setState({ suggestedBindings: [], startBoundElement: null });
           if (!activeTool.locked) {

packages/excalidraw/components/ButtonIcon.tsx

@@ -15,7 +15,6 @@ interface ButtonIconProps {
   /** include standalone style (could interfere with parent styles) */
   standalone?: boolean;
   onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  style?: React.CSSProperties;
 }
 
 export const ButtonIcon = forwardRef<HTMLButtonElement, ButtonIconProps>(
@@ -31,7 +30,6 @@ export const ButtonIcon = forwardRef<HTMLButtonElement, ButtonIconProps>(
         data-testid={testId}
         className={clsx(className, { standalone, active })}
         onClick={onClick}
-        style={props.style}
       >
         {icon}
       </button>

packages/excalidraw/components/CommandPalette/CommandPalette.tsx

@@ -293,7 +293,6 @@ function CommandPaletteInner({
         actionManager.actions.decreaseFontSize,
         actionManager.actions.toggleLinearEditor,
         actionManager.actions.cropEditor,
-        actionManager.actions.togglePolygon,
         actionLink,
         actionCopyElementLink,
         actionLinkToElement,

packages/excalidraw/components/ConvertElementTypePopup.tsx

@@ -564,7 +564,7 @@ export const convertElementTypes = (
               continue;
             }
             const fixedSegments: FixedSegment[] = [];
-            for (let i = 1; i < nextPoints.length - 2; i++) {
+            for (let i = 0; i < nextPoints.length - 1; i++) {
               fixedSegments.push({
                 start: nextPoints[i],
                 end: nextPoints[i + 1],
@@ -581,7 +581,6 @@ export const convertElementTypes = (
             );
             mutateElement(element, app.scene.getNonDeletedElementsMap(), {
               ...updates,
-              endArrowhead: "arrow",
             });
           } else {
             // if we're converting to non-elbow linear element, check if

packages/excalidraw/components/icons.tsx

@@ -129,21 +129,6 @@ export const PinIcon = createIcon(
   tablerIconProps,
 );
 
-export const polygonIcon = createIcon(
-  <g strokeWidth={1.25}>
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M12 5m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
-    <path d="M19 8m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
-    <path d="M5 11m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
-    <path d="M15 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
-    <path d="M6.5 9.5l3.5 -3" />
-    <path d="M14 5.5l3 1.5" />
-    <path d="M18.5 10l-2.5 7" />
-    <path d="M13.5 17.5l-7 -5" />
-  </g>,
-  tablerIconProps,
-);
-
 // tabler-icons: lock-open (via Figma)
 export const UnlockedIcon = createIcon(
   <g>

packages/excalidraw/data/__snapshots__/transform.test.ts.snap

@@ -948,7 +948,6 @@ exports[`Test Transform > should transform linear elements 3`] = `
       0,
     ],
   ],
-  "polygon": false,
   "roughness": 1,
   "roundness": null,
   "seed": Any<Number>,
@@ -996,7 +995,6 @@ exports[`Test Transform > should transform linear elements 4`] = `
       0,
     ],
   ],
-  "polygon": false,
   "roughness": 1,
   "roundness": null,
   "seed": Any<Number>,

packages/excalidraw/data/restore.ts

@@ -18,7 +18,7 @@ import {
   normalizeLink,
   getLineHeight,
 } from "@excalidraw/common";
-import { getNonDeletedElements, isValidPolygon } from "@excalidraw/element";
+import { getNonDeletedElements } from "@excalidraw/element";
 import { normalizeFixedPoint } from "@excalidraw/element";
 import {
   updateElbowArrowPoints,
@@ -34,7 +34,6 @@ import {
   isElbowArrow,
   isFixedPointBinding,
   isLinearElement,
-  isLineElement,
   isTextElement,
   isUsingAdaptiveRadius,
 } from "@excalidraw/element";
@@ -324,8 +323,7 @@ const restoreElement = (
           : element.points;
 
       if (points[0][0] !== 0 || points[0][1] !== 0) {
-        ({ points, x, y } =
-          LinearElementEditor.getNormalizeElementPointsAndCoords(element));
+        ({ points, x, y } = LinearElementEditor.getNormalizedPoints(element));
       }
 
       return restoreElementWithProperties(element, {
@@ -341,13 +339,6 @@ const restoreElement = (
         points,
         x,
         y,
-        ...(isLineElement(element)
-          ? {
-              polygon: isValidPolygon(element.points)
-                ? element.polygon ?? false
-                : false,
-            }
-          : {}),
         ...getSizeFromPoints(points),
       });
     case "arrow": {
@@ -360,8 +351,7 @@ const restoreElement = (
           : element.points;
 
       if (points[0][0] !== 0 || points[0][1] !== 0) {
-        ({ points, x, y } =
-          LinearElementEditor.getNormalizeElementPointsAndCoords(element));
+        ({ points, x, y } = LinearElementEditor.getNormalizedPoints(element));
       }
 
       const base = {

packages/excalidraw/data/transform.ts

@@ -466,7 +466,7 @@ const bindLinearElementToElement = (
 
   Object.assign(
     linearElement,
-    LinearElementEditor.getNormalizeElementPointsAndCoords({
+    LinearElementEditor.getNormalizedPoints({
       ...linearElement,
       points: newPoints,
     }),

packages/excalidraw/locales/en.json

@@ -141,10 +141,6 @@
       "edit": "Edit line",
       "editArrow": "Edit arrow"
     },
-    "polygon": {
-      "breakPolygon": "Break polygon",
-      "convertToPolygon": "Convert to polygon"
-    },
     "elementLock": {
       "lock": "Lock",
       "unlock": "Unlock",

packages/excalidraw/renderer/helpers.ts

@@ -31,14 +31,11 @@ export const fillCircle = (
   cx: number,
   cy: number,
   radius: number,
-  stroke: boolean,
-  fill = true,
+  stroke = true,
 ) => {
   context.beginPath();
   context.arc(cx, cy, radius, 0, Math.PI * 2);
-  if (fill) {
-    context.fill();
-  }
+  context.fill();
   if (stroke) {
     context.stroke();
   }

packages/excalidraw/renderer/interactiveScene.ts

@@ -1,6 +1,5 @@
 import {
   pointFrom,
-  pointsEqual,
   type GlobalPoint,
   type LocalPoint,
   type Radians,
@@ -29,7 +28,6 @@ import {
   isFrameLikeElement,
   isImageElement,
   isLinearElement,
-  isLineElement,
   isTextElement,
 } from "@excalidraw/element";
 
@@ -163,8 +161,7 @@ const renderSingleLinearPoint = <Point extends GlobalPoint | LocalPoint>(
   point: Point,
   radius: number,
   isSelected: boolean,
-  isPhantomPoint: boolean,
-  isOverlappingPoint: boolean,
+  isPhantomPoint = false,
 ) => {
   context.strokeStyle = "#5e5ad8";
   context.setLineDash([]);
@@ -179,11 +176,8 @@ const renderSingleLinearPoint = <Point extends GlobalPoint | LocalPoint>(
     context,
     point[0],
     point[1],
-    (isOverlappingPoint
-      ? radius * (appState.editingLinearElement ? 1.5 : 2)
-      : radius) / appState.zoom.value,
+    radius / appState.zoom.value,
     !isPhantomPoint,
-    !isOverlappingPoint || isSelected,
   );
 };
 
@@ -259,7 +253,7 @@ const renderBindingHighlightForSuggestedPointBinding = (
       index,
       elementsMap,
     );
-    fillCircle(context, x, y, threshold, true);
+    fillCircle(context, x, y, threshold);
   });
 };
 
@@ -448,39 +442,15 @@ const renderLinearPointHandles = (
   const radius = appState.editingLinearElement
     ? POINT_HANDLE_SIZE
     : POINT_HANDLE_SIZE / 2;
-
-  const _isElbowArrow = isElbowArrow(element);
-  const _isLineElement = isLineElement(element);
-
   points.forEach((point, idx) => {
-    if (_isElbowArrow && idx !== 0 && idx !== points.length - 1) {
+    if (isElbowArrow(element) && idx !== 0 && idx !== points.length - 1) {
       return;
     }
 
-    const isOverlappingPoint =
-      idx > 0 &&
-      (idx !== points.length - 1 ||
-        appState.editingLinearElement ||
-        !_isLineElement ||
-        !element.polygon) &&
-      pointsEqual(
-        point,
-        idx === points.length - 1 ? points[0] : points[idx - 1],
-        2 / appState.zoom.value,
-      );
-
     const isSelected =
       !!appState.editingLinearElement?.selectedPointsIndices?.includes(idx);
 
-    renderSingleLinearPoint(
-      context,
-      appState,
-      point,
-      radius,
-      isSelected,
-      false,
-      isOverlappingPoint,
-    );
+    renderSingleLinearPoint(context, appState, point, radius, isSelected);
   });
 
   // Rendering segment mid points
@@ -507,7 +477,6 @@ const renderLinearPointHandles = (
           POINT_HANDLE_SIZE / 2,
           false,
           !fixedSegments.includes(idx + 1),
-          false,
         );
       }
     });
@@ -531,7 +500,6 @@ const renderLinearPointHandles = (
           POINT_HANDLE_SIZE / 2,
           false,
           true,
-          false,
         );
       }
     });
@@ -558,7 +526,7 @@ const renderTransformHandles = (
         context.strokeStyle = renderConfig.selectionColor;
       }
       if (key === "rotation") {
-        fillCircle(context, x + width / 2, y + height / 2, width / 2, true);
+        fillCircle(context, x + width / 2, y + height / 2, width / 2);
         // prefer round corners if roundRect API is available
       } else if (context.roundRect) {
         context.beginPath();

packages/excalidraw/tests/__snapshots__/dragCreate.test.tsx.snap

@@ -153,7 +153,6 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
       50,
     ],
   ],
-  "polygon": false,
   "roughness": 1,
   "roundness": {
     "type": 2,

packages/excalidraw/tests/__snapshots__/move.test.tsx.snap

@@ -173,7 +173,7 @@ exports[`move element > rectangles with binding arrow 6`] = `
   "type": "rectangle",
   "updated": 1,
   "version": 7,
-  "versionNonce": 1051383431,
+  "versionNonce": 745419401,
   "width": 300,
   "x": 201,
   "y": 2,
@@ -231,7 +231,7 @@ exports[`move element > rectangles with binding arrow 7`] = `
   "type": "arrow",
   "updated": 1,
   "version": 11,
-  "versionNonce": 1996028265,
+  "versionNonce": 1051383431,
   "width": "86.85786",
   "x": "107.07107",
   "y": "47.07107",

packages/excalidraw/tests/__snapshots__/multiPointCreate.test.tsx.snap

@@ -93,7 +93,6 @@ exports[`multi point mode in linear elements > line 3`] = `
       110,
     ],
   ],
-  "polygon": false,
   "roughness": 1,
   "roundness": {
     "type": 2,

packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -6492,7 +6492,6 @@ exports[`regression tests > draw every type of shape > [end of test] undo stack
                 10,
               ],
             ],
-            "polygon": false,
             "roughness": 1,
             "roundness": {
               "type": 2,
@@ -6717,7 +6716,6 @@ exports[`regression tests > draw every type of shape > [end of test] undo stack
                 10,
               ],
             ],
-            "polygon": false,
             "roughness": 1,
             "roundness": {
               "type": 2,
@@ -8956,7 +8954,6 @@ exports[`regression tests > key 6 selects line tool > [end of test] undo stack 1
                 10,
               ],
             ],
-            "polygon": false,
             "roughness": 1,
             "roundness": {
               "type": 2,
@@ -9776,7 +9773,6 @@ exports[`regression tests > key l selects line tool > [end of test] undo stack 1
                 10,
               ],
             ],
-            "polygon": false,
             "roughness": 1,
             "roundness": {
               "type": 2,

packages/excalidraw/tests/__snapshots__/selection.test.tsx.snap

@@ -79,7 +79,6 @@ exports[`select single element on the scene > arrow escape 1`] = `
       50,
     ],
   ],
-  "polygon": false,
   "roughness": 1,
   "roundness": {
     "type": 2,

packages/excalidraw/tests/data/__snapshots__/restore.test.ts.snap

@@ -240,7 +240,6 @@ exports[`restoreElements > should restore line and draw elements correctly 1`] =
       100,
     ],
   ],
-  "polygon": false,
   "roughness": 1,
   "roundness": {
     "type": 2,
@@ -290,7 +289,6 @@ exports[`restoreElements > should restore line and draw elements correctly 2`] =
       100,
     ],
   ],
-  "polygon": false,
   "roughness": 1,
   "roundness": {
     "type": 2,

packages/excalidraw/tests/data/restore.test.ts

@@ -6,10 +6,7 @@ import { DEFAULT_SIDEBAR, FONT_FAMILY, ROUNDNESS } from "@excalidraw/common";
 import { newElementWith } from "@excalidraw/element";
 import * as sizeHelpers from "@excalidraw/element";
 
-import type { LocalPoint } from "@excalidraw/math";
-
 import type {
-  ExcalidrawArrowElement,
   ExcalidrawElement,
   ExcalidrawFreeDrawElement,
   ExcalidrawLinearElement,
@@ -166,109 +163,6 @@ describe("restoreElements", () => {
     });
   });
 
-  it("should remove imperceptibly small elements", () => {
-    const arrowElement = API.createElement({
-      type: "arrow",
-      points: [
-        [0, 0],
-        [0.02, 0.05],
-      ] as LocalPoint[],
-      x: 0,
-      y: 0,
-    });
-
-    const restoredElements = restore.restoreElements([arrowElement], null);
-
-    const restoredArrow = restoredElements[0] as
-      | ExcalidrawArrowElement
-      | undefined;
-
-    expect(restoredArrow).toBeUndefined();
-  });
-
-  it("should keep 'imperceptibly' small freedraw/line elements", () => {
-    const freedrawElement = API.createElement({
-      type: "freedraw",
-      points: [
-        [0, 0],
-        [0.0001, 0.0001],
-      ] as LocalPoint[],
-      x: 0,
-      y: 0,
-    });
-    const lineElement = API.createElement({
-      type: "line",
-      points: [
-        [0, 0],
-        [0.0001, 0.0001],
-      ] as LocalPoint[],
-      x: 0,
-      y: 0,
-    });
-
-    const restoredElements = restore.restoreElements(
-      [freedrawElement, lineElement],
-      null,
-    );
-
-    expect(restoredElements).toEqual([
-      expect.objectContaining({ id: freedrawElement.id }),
-      expect.objectContaining({ id: lineElement.id }),
-    ]);
-  });
-
-  it("should restore loop linears correctly", () => {
-    const linearElement = API.createElement({
-      type: "line",
-      points: [
-        [0, 0],
-        [100, 100],
-        [100, 200],
-        [0, 0],
-      ] as LocalPoint[],
-      x: 0,
-      y: 0,
-    });
-    const arrowElement = API.createElement({
-      type: "arrow",
-      points: [
-        [0, 0],
-        [100, 100],
-        [100, 200],
-        [0, 0],
-      ] as LocalPoint[],
-      x: 500,
-      y: 500,
-    });
-
-    const restoredElements = restore.restoreElements(
-      [linearElement, arrowElement],
-      null,
-    );
-
-    const restoredLinear = restoredElements[0] as
-      | ExcalidrawLinearElement
-      | undefined;
-    const restoredArrow = restoredElements[1] as
-      | ExcalidrawArrowElement
-      | undefined;
-
-    expect(restoredLinear?.type).toBe("line");
-    expect(restoredLinear?.points).toEqual([
-      [0, 0],
-      [100, 100],
-      [100, 200],
-      [0, 0],
-    ] as LocalPoint[]);
-    expect(restoredArrow?.type).toBe("arrow");
-    expect(restoredArrow?.points).toEqual([
-      [0, 0],
-      [100, 100],
-      [100, 200],
-      [0, 0],
-    ] as LocalPoint[]);
-  });
-
   it('should set arrow element endArrowHead as "arrow" when arrow element endArrowHead is null', () => {
     const arrowElement = API.createElement({ type: "arrow" });
     const restoredElements = restore.restoreElements([arrowElement], null);

packages/excalidraw/tests/selection.test.tsx

@@ -426,7 +426,7 @@ describe("select single element on the scene", () => {
     fireEvent.pointerUp(canvas);
 
     expect(renderInteractiveScene).toHaveBeenCalledTimes(8);
-    expect(renderStaticScene).toHaveBeenCalledTimes(7);
+    expect(renderStaticScene).toHaveBeenCalledTimes(6);
     expect(h.state.selectionElement).toBeNull();
     expect(h.elements.length).toEqual(1);
     expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -470,7 +470,7 @@ describe("select single element on the scene", () => {
     fireEvent.pointerUp(canvas);
 
     expect(renderInteractiveScene).toHaveBeenCalledTimes(8);
-    expect(renderStaticScene).toHaveBeenCalledTimes(7);
+    expect(renderStaticScene).toHaveBeenCalledTimes(6);
     expect(h.state.selectionElement).toBeNull();
     expect(h.elements.length).toEqual(1);
     expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();

packages/math/src/point.ts

@@ -91,10 +91,9 @@ export function isPoint(p: unknown): p is LocalPoint | GlobalPoint {
 export function pointsEqual<Point extends GlobalPoint | LocalPoint>(
   a: Point,
   b: Point,
-  tolerance: number = PRECISION,
 ): boolean {
   const abs = Math.abs;
-  return abs(a[0] - b[0]) < tolerance && abs(a[1] - b[1]) < tolerance;
+  return abs(a[0] - b[0]) < PRECISION && abs(a[1] - b[1]) < PRECISION;
 }
 
 /**