Merge 0a377fde85 into 01304aac49

feat: Keep text label horizontal (#9364 )
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
2025-04-14 16:40:58 -04:00 · 2025-04-14 17:12:31 +10:00 · 2025-04-13 21:21:49 +02:00 · 2025-04-09 17:04:51 +02:00 · 2025-04-08 00:50:52 +10:00 · 2025-03-30 23:42:24 +06:00
18 changed files with 359 additions and 190 deletions
--- a/README.md
+++ b/README.md
@ -5,37 +5,36 @@
  </picture>
 </a>

+<h2 align="center">
+  ✨ Excalidraw - Collaborative Whiteboarding Made Easy ✨
+</h2>
+
+<p align="center">
+  <b>Excalidraw is a virtual collaborative whiteboard that lets you easily sketch diagrams that have a hand-drawn feel to them.</b>
+</p>
+
 <h4 align="center">
-  <a href="https://excalidraw.com">Excalidraw Editor</a> |
-  <a href="https://plus.excalidraw.com/blog">Blog</a> |
-  <a href="https://docs.excalidraw.com">Documentation</a> |
-  <a href="https://plus.excalidraw.com">Excalidraw+</a>
+  <a href="https://excalidraw.com">🎨 Excalidraw Editor</a> |
+  <a href="https://plus.excalidraw.com/blog">📝 Blog</a> |
+  <a href="https://docs.excalidraw.com">📚 Documentation</a> |
+  <a href="https://plus.excalidraw.com">➕ Excalidraw+</a>
 </h4>

-<div align="center">
-  <h2>
-    An open source virtual hand-drawn style whiteboard. </br>
-    Collaborative and end-to-end encrypted. </br>
-  <br />
-  </h2>
-</div>
-
-<br />
 <p align="center">
  <a href="https://github.com/excalidraw/excalidraw/blob/master/LICENSE">
-    <img alt="Excalidraw is released under the MIT license." src="https://img.shields.io/badge/license-MIT-blue.svg"  />
+    <img alt="MIT License" src="https://img.shields.io/badge/license-MIT-blue.svg"  />
  </a>
  <a href="https://www.npmjs.com/package/@excalidraw/excalidraw">
-    <img alt="npm downloads/month" src="https://img.shields.io/npm/dm/@excalidraw/excalidraw"  />
+    <img alt="npm" src="https://img.shields.io/npm/dm/@excalidraw/excalidraw"  />
  </a>
  <a href="https://docs.excalidraw.com/docs/introduction/contributing">
-    <img alt="PRs welcome!" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat"  />
+    <img alt="PRs Welcome" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat"  />
  </a>
  <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"/>
+    <img alt="Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widge=false"/>
  </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"/>
+    <img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/excalidraw.svg?label=follow+@excalidraw&style=social&logo=twitter"/>
  </a>
 </p>

@ -52,76 +51,128 @@
  </figure>
 </div>

-## Features
+## 📝 Table of Contents

-The Excalidraw editor (npm package) supports:
+- [🌟 Key Features](#-key-features)
+- [🚀 Getting Started](#-getting-started)
+  - [🌐 Excalidraw.com](#-excalidrawcom)
+  - [📦 NPM Package](#-npm-package)
+- [🤝 Contributing](#-contributing)
+- [👥 Who's Using Excalidraw?](#-whos-using-excalidraw)
+- [💖 Sponsors & Support](#-sponsors--support)
+- [🙌 Acknowledgements](#-acknowledgements)
+- [📜 License](#-license)

- 💯&nbsp;Free & open-source.
- 🎨&nbsp;Infinite, canvas-based whiteboard.
- ✍️&nbsp;Hand-drawn like style.
- 🌓&nbsp;Dark mode.
- 🏗️&nbsp;Customizable.
- 📷&nbsp;Image support.
- 😀&nbsp;Shape libraries support.
- 👅&nbsp;Localization (i18n) support.
- 🖼️&nbsp;Export to PNG, SVG & clipboard.
- 💾&nbsp;Open format - export drawings as an `.excalidraw` json file.
- ⚒️&nbsp;Wide range of tools - rectangle, circle, diamond, arrow, line, free-draw, eraser...
- ➡️&nbsp;Arrow-binding & labeled arrows.
- 🔙&nbsp;Undo / Redo.
- 🔍&nbsp;Zoom and panning support.
+## 🌟 Key Features

-## Excalidraw.com
+- 💯 **Free & Open-Source:** Excalidraw is completely free and open-source, giving you the freedom to use and customize it as per your needs.

-The app hosted at [excalidraw.com](https://excalidraw.com) is a minimal showcase of what you can build with Excalidraw. Its [source code](https://github.com/excalidraw/excalidraw/tree/master/excalidraw-app) is part of this repository as well, and the app features:
+- 🎨 **Infinite Canvas:** Unleash your creativity with an infinite canvas that allows you to expand your drawings in any direction.

- 📡&nbsp;PWA support (works offline).
- 🤼&nbsp;Real-time collaboration.
- 🔒&nbsp;End-to-end encryption.
- 💾&nbsp;Local-first support (autosaves to the browser).
- 🔗&nbsp;Shareable links (export to a readonly link you can share with others).
+- ✍️ **Hand-Drawn Style:** Give your diagrams and sketches a unique hand-drawn appearance with Excalidraw's distinctive visual style.

-We'll be adding these features as drop-in plugins for the npm package in the future.
+- 🌓 **Dark Mode:** Switch to dark mode for a more comfortable and visually appealing drawing experience, especially in low-light environments.

-## Quick start
+- 🌈 **Customizable:** Tailor Excalidraw to your preferences with customizable colors, fonts, and stroke styles.

-**Note:** following instructions are for installing the Excalidraw [npm package](https://www.npmjs.com/package/@excalidraw/excalidraw) when integrating Excalidraw into your own app. To run the repository locally for development, please refer to our [Development Guide](https://docs.excalidraw.com/docs/introduction/development).
+- 📷 **Image Support:** Easily add images to your drawings and resize, rotate, or crop them as needed.

-Use `npm` or `yarn` to install the package.
+- 🖼️ **Export Options:** Export your drawings in various formats, including PNG, SVG, and JSON, for easy sharing and integration with other tools.
+
+- ⚒️ **Powerful Drawing Tools:** Access a wide range of drawing tools, including rectangles, circles, diamonds, arrows, lines, and free-form paths.
+
+- 🔗 **Arrow Binding:** Connect shapes with arrows that automatically adjust when the shapes are moved, making it easy to create flowcharts and diagrams.
+
+- 🔍 **Zoom & Pan:** Navigate large drawings effortlessly with smooth zooming and panning capabilities.
+
+- 🔙 **Undo/Redo:** Easily undo or redo actions, giving you the freedom to experiment and make changes without worry.
+
+- 💬 **Localization:** Excalidraw supports multiple languages, making it accessible to users worldwide.
+
+- 🖥️ **Excalidraw+:** Upgrade to Excalidraw+ for additional features like real-time collaboration, version history, and more.
+
+## 🚀 Getting Started
+
+### 🌐 Excalidraw.com
+
+The quickest way to start using Excalidraw is to visit [excalidraw.com](https://excalidraw.com). It's a fully-featured Progressive Web App (PWA) that works offline and supports real-time collaboration.
+
+### 📦 NPM Package
+
+To embed Excalidraw into your own application, you can install it via npm:

 ```bash
 npm install react react-dom @excalidraw/excalidraw
-# or
-yarn add react react-dom @excalidraw/excalidraw
 ```

-Check out our [documentation](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/installation) for more details!
+Then, import and use the Excalidraw component in your code:

-## Contributing
+```jsx
+import React from 'react';
+import Excalidraw from '@excalidraw/excalidraw';

- Missing something or found a bug? [Report here](https://github.com/excalidraw/excalidraw/issues).
- Want to contribute? Check out our [contribution guide](https://docs.excalidraw.com/docs/introduction/contributing) or let us know on [Discord](https://discord.gg/UexuTaE).
- Want to help with translations? See the [translation guide](https://docs.excalidraw.com/docs/introduction/contributing#translating).
+const App = () => {
+  return <Excalidraw />;
+};
+```

-## Integrations
+For more detailed instructions and advanced usage, refer to our [documentation](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/installation).

- [VScode extension](https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor)
- [npm package](https://www.npmjs.com/package/@excalidraw/excalidraw)
+## 🤝 Contributing

-## Who's integrating Excalidraw
+We welcome contributions from the community! Whether you have ideas, bug reports, or code improvements, we appreciate your help in making Excalidraw better. To get started, please follow our [contributing guidelines](https://docs.excalidraw.com/docs/introduction/contributing).

-[Google Cloud](https://googlecloudcheatsheet.withgoogle.com/architecture) • [Meta](https://meta.com/) • [CodeSandbox](https://codesandbox.io/) • [Obsidian Excalidraw](https://github.com/zsviczian/obsidian-excalidraw-plugin) • [Replit](https://replit.com/) • [Slite](https://slite.com/) • [Notion](https://notion.so/) • [HackerRank](https://www.hackerrank.com/) • and many others
+Some key areas where we'd love your assistance include:

-## Sponsors & support
+- 🌍 [Translating](https://docs.excalidraw.com/docs/introduction/contributing#translating) Excalidraw into different languages.
+- 🐛 [Reporting bugs](https://github.com/excalidraw/excalidraw/issues) and helping us identify and fix issues.
+- 🛠️ [Contributing code](https://github.com/excalidraw/excalidraw/blob/master/CONTRIBUTING.md) to add new features, improve performance, or enhance the user experience.

-If you like the project, you can become a sponsor at [Open Collective](https://opencollective.com/excalidraw) or use [Excalidraw+](https://plus.excalidraw.com/).
+Don't forget to join our [Discord community](https://discord.gg/UexuTaE) to connect with other contributors and stay updated on the latest developments!

-## Thank you for supporting Excalidraw
+## 👥 Who's Using Excalidraw?

-[<img src="https://opencollective.com/excalidraw/tiers/sponsors/0/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/0/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/1/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/1/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/2/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/2/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/3/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/3/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/4/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/4/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/5/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/5/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/6/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/6/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/7/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/7/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/8/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/8/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/9/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/9/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/10/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/10/website)
+Excalidraw is trusted by companies and projects of all sizes. Here are a few notable examples:

-<a href="https://opencollective.com/excalidraw#category-CONTRIBUTE" target="_blank"><img src="https://opencollective.com/excalidraw/tiers/backers.svg?avatarHeight=32"/></a>
+- [Google Cloud](https://googlecloudcheatsheet.withgoogle.com/architecture) uses Excalidraw for creating cloud architecture diagrams.
+- [Meta](https://meta.com/) utilizes Excalidraw for brainstorming and visualizing ideas.
+- [CodeSandbox](https://codesandbox.io/) integrates Excalidraw for sketching and planning within their online code editor.
+- [Obsidian](https://github.com/zsviczian/obsidian-excalidraw-plugin) has an Excalidraw plugin for taking notes and making sketches.
+- [Replit](https://replit.com/) incorporates Excalidraw for collaborative whiteboarding in their online coding environment.
+- [Slite](https://slite.com/) uses Excalidraw for team collaboration and visual communication.
+- [Notion](https://notion.so/) integrates Excalidraw for creating diagrams and sketches within their platform.
+- [HackerRank](https://www.hackerrank.com/) employs Excalidraw for creating coding challenge explanations and visualizations.

-Last but not least, we're thankful to these companies for offering their services for free:
+## 💖 Sponsors & Support
+
+If you find Excalidraw valuable and would like to contribute to its development and sustainability, please consider [sponsoring us on Open Collective](https://opencollective.com/excalidraw) or upgrading to [Excalidraw+](https://plus.excalidraw.com/). Your support helps us maintain and improve the project for the benefit of the entire community.
+
+We extend our heartfelt gratitude to our sponsors and supporters:
+
+[<img src="https://opencollective.com/excalidraw/tiers/sponsors.svg?avatarHeight=36"/>](https://opencollective.com/excalidraw#support)
+
+We also appreciate the companies providing free infrastructure and services:

 [![Vercel](./.github/assets/vercel.svg)](https://vercel.com) [![Sentry](./.github/assets/sentry.svg)](https://sentry.io) [![Crowdin](./.github/assets/crowdin.svg)](https://crowdin.com)
+
+## 🙌 Acknowledgements
+
+Excalidraw is made possible by the dedication and passion of our incredible [team](https://github.com/excalidraw/excalidraw/graphs/contributors) of contributors from around the world. We extend our sincere thanks to everyone who has contributed code, reported issues, provided feedback, and supported the project in any way.
+
+Special thanks to our core team members for their significant contributions and leadership:
+
+- [Lipis](https://github.com/lipis) - Project Lead
+- [Vjeux](https://github.com/vjeux) - Core Contributor
+- [Thibaut](https://github.com/thibautjombart) - Core Contributor
+- [Kiran](https://github.com/kiran-kumar-m) - Core Contributor
+- [Suchandra](https://github.com/suchandra) - Core Contributor
+
+## 📜 License
+
+Excalidraw is distributed under the [MIT License](https://github.com/excalidraw/excalidraw/blob/master/LICENSE). You are free to use, modify, and distribute the software as per the terms of this license.
+
+For more details, please refer to the [LICENSE](https://github.com/excalidraw/excalidraw/blob/master/LICENSE) file.
+
+---
+
+We hope this enhanced README provides a more comprehensive and informative overview of Excalidraw. Feel free to further customize it to highlight the unique aspects and strengths of your project. If you have any more questions or need further assistance, please let me know!
--- a/packages/common/src/constants.ts
+++ b/packages/common/src/constants.ts
@ -112,6 +112,7 @@ export const YOUTUBE_STATES = {
 export const ENV = {
  TEST: "test",
  DEVELOPMENT: "development",
+  PRODUCTION: "production",
 };

 export const CLASSES = {
--- a/packages/common/src/utils.ts
+++ b/packages/common/src/utils.ts
@ -1,9 +1,10 @@
-import { average } from "@excalidraw/math";
+import { average, pointFrom, type GlobalPoint } from "@excalidraw/math";

 import type {
  ExcalidrawBindableElement,
  FontFamilyValues,
  FontString,
+  ExcalidrawElement,
 } from "@excalidraw/element/types";

 import type {
@ -738,6 +739,8 @@ export const isTestEnv = () => import.meta.env.MODE === ENV.TEST;

 export const isDevEnv = () => import.meta.env.MODE === ENV.DEVELOPMENT;

+export const isProdEnv = () => import.meta.env.MODE === ENV.PRODUCTION;
+
 export const isServerEnv = () =>
  typeof process !== "undefined" && !!process?.env?.NODE_ENV;

@ -1201,3 +1204,17 @@ export const escapeDoubleQuotes = (str: string) => {

 export const castArray = <T>(value: T | T[]): T[] =>
  Array.isArray(value) ? value : [value];
+
+export const elementCenterPoint = (
+  element: ExcalidrawElement,
+  xOffset: number = 0,
+  yOffset: number = 0,
+) => {
+  const { x, y, width, height } = element;
+
+  const centerXPoint = x + width / 2 + xOffset;
+
+  const centerYPoint = y + height / 2 + yOffset;
+
+  return pointFrom<GlobalPoint>(centerXPoint, centerYPoint);
+};
--- a/packages/element/src/binding.ts
+++ b/packages/element/src/binding.ts
@ -6,6 +6,7 @@ import {
  invariant,
  isDevEnv,
  isTestEnv,
+  elementCenterPoint,
 } from "@excalidraw/common";

 import {
@ -904,13 +905,7 @@ export const getHeadingForElbowArrowSnap = (

  if (!distance) {
    return vectorToHeading(
-      vectorFromPoint(
-        p,
-        pointFrom<GlobalPoint>(
-          bindableElement.x + bindableElement.width / 2,
-          bindableElement.y + bindableElement.height / 2,
-        ),
-      ),
+      vectorFromPoint(p, elementCenterPoint(bindableElement)),
    );
  }

@ -1040,10 +1035,7 @@ export const avoidRectangularCorner = (
  element: ExcalidrawBindableElement,
  p: GlobalPoint,
 ): GlobalPoint => {
-  const center = pointFrom<GlobalPoint>(
-    element.x + element.width / 2,
-    element.y + element.height / 2,
-  );
+  const center = elementCenterPoint(element);
  const nonRotatedPoint = pointRotateRads(p, center, -element.angle as Radians);

  if (nonRotatedPoint[0] < element.x && nonRotatedPoint[1] < element.y) {
@ -1140,10 +1132,9 @@ export const snapToMid = (
  tolerance: number = 0.05,
 ): GlobalPoint => {
  const { x, y, width, height, angle } = element;
-  const center = pointFrom<GlobalPoint>(
-    x + width / 2 - 0.1,
-    y + height / 2 - 0.1,
-  );
+
+  const center = elementCenterPoint(element, -0.1, -0.1);
+
  const nonRotated = pointRotateRads(p, center, -angle as Radians);

  // snap-to-center point is adaptive to element size, but we don't want to go
@ -1228,10 +1219,7 @@ const updateBoundPoint = (
        startOrEnd === "startBinding" ? "start" : "end",
        elementsMap,
      ).fixedPoint;
-    const globalMidPoint = pointFrom<GlobalPoint>(
-      bindableElement.x + bindableElement.width / 2,
-      bindableElement.y + bindableElement.height / 2,
-    );
+    const globalMidPoint = elementCenterPoint(bindableElement);
    const global = pointFrom<GlobalPoint>(
      bindableElement.x + fixedPoint[0] * bindableElement.width,
      bindableElement.y + fixedPoint[1] * bindableElement.height,
@ -1275,10 +1263,7 @@ const updateBoundPoint = (
        elementsMap,
      );

-    const center = pointFrom<GlobalPoint>(
-      bindableElement.x + bindableElement.width / 2,
-      bindableElement.y + bindableElement.height / 2,
-    );
+    const center = elementCenterPoint(bindableElement);
    const interceptorLength =
      pointDistance(adjacentPoint, edgePointAbsolute) +
      pointDistance(adjacentPoint, center) +
@ -1771,10 +1756,7 @@ const determineFocusDistance = (
  // Another point on the line, in absolute coordinates (closer to element)
  b: GlobalPoint,
 ): number => {
-  const center = pointFrom<GlobalPoint>(
-    element.x + element.width / 2,
-    element.y + element.height / 2,
-  );
+  const center = elementCenterPoint(element);

  if (pointsEqual(a, b)) {
    return 0;
@ -1904,10 +1886,7 @@ const determineFocusPoint = (
  focus: number,
  adjacentPoint: GlobalPoint,
 ): GlobalPoint => {
-  const center = pointFrom<GlobalPoint>(
-    element.x + element.width / 2,
-    element.y + element.height / 2,
-  );
+  const center = elementCenterPoint(element);

  if (focus === 0) {
    return center;
@ -2338,10 +2317,7 @@ export const getGlobalFixedPointForBindableElement = (
      element.x + element.width * fixedX,
      element.y + element.height * fixedY,
    ),
-    pointFrom<GlobalPoint>(
-      element.x + element.width / 2,
-      element.y + element.height / 2,
-    ),
+    elementCenterPoint(element),
    element.angle,
  );
 };
--- a/packages/element/src/collision.ts
+++ b/packages/element/src/collision.ts
@ -1,4 +1,4 @@
-import { isTransparent } from "@excalidraw/common";
+import { isTransparent, elementCenterPoint } from "@excalidraw/common";
 import {
  curveIntersectLineSegment,
  isPointWithinBounds,
@ -16,7 +16,7 @@ import {
 } from "@excalidraw/math/ellipse";

 import { isPointInShape, isPointOnShape } from "@excalidraw/utils/collision";
-import { getPolygonShape } from "@excalidraw/utils/shape";
+import { type GeometricShape, getPolygonShape } from "@excalidraw/utils/shape";

 import type {
  GlobalPoint,
@ -26,8 +26,6 @@ import type {
  Radians,
 } from "@excalidraw/math";

-import type { GeometricShape } from "@excalidraw/utils/shape";
-
 import type { FrameNameBounds } from "@excalidraw/excalidraw/types";

 import { getBoundTextShape, isPathALoop } from "./shapes";
@ -191,10 +189,7 @@ const intersectRectanguloidWithLineSegment = (
  l: LineSegment<GlobalPoint>,
  offset: number = 0,
 ): GlobalPoint[] => {
-  const center = pointFrom<GlobalPoint>(
-    element.x + element.width / 2,
-    element.y + element.height / 2,
-  );
+  const center = elementCenterPoint(element);
  // To emulate a rotated rectangle we rotate the point in the inverse angle
  // instead. It's all the same distance-wise.
  const rotatedA = pointRotateRads<GlobalPoint>(
@ -253,10 +248,7 @@ const intersectDiamondWithLineSegment = (
  l: LineSegment<GlobalPoint>,
  offset: number = 0,
 ): GlobalPoint[] => {
-  const center = pointFrom<GlobalPoint>(
-    element.x + element.width / 2,
-    element.y + element.height / 2,
-  );
+  const center = elementCenterPoint(element);

  // Rotate the point to the inverse direction to simulate the rotated diamond
  // points. It's all the same distance-wise.
@ -304,10 +296,7 @@ const intersectEllipseWithLineSegment = (
  l: LineSegment<GlobalPoint>,
  offset: number = 0,
 ): GlobalPoint[] => {
-  const center = pointFrom<GlobalPoint>(
-    element.x + element.width / 2,
-    element.y + element.height / 2,
-  );
+  const center = elementCenterPoint(element);

  const rotatedA = pointRotateRads(l[0], center, -element.angle as Radians);
  const rotatedB = pointRotateRads(l[1], center, -element.angle as Radians);
--- a/packages/element/src/cropElement.ts
+++ b/packages/element/src/cropElement.ts
@ -14,6 +14,8 @@ import {
 } from "@excalidraw/math";
 import { type Point } from "points-on-curve";

+import { elementCenterPoint } from "@excalidraw/common";
+
 import {
  getElementAbsoluteCoords,
  getResizedElementAbsoluteCoords,
@ -61,7 +63,7 @@ export const cropElement = (

  const rotatedPointer = pointRotateRads(
    pointFrom(pointerX, pointerY),
-    pointFrom(element.x + element.width / 2, element.y + element.height / 2),
+    elementCenterPoint(element),
    -element.angle as Radians,
  );

--- a/packages/element/src/distance.ts
+++ b/packages/element/src/distance.ts
@ -1,12 +1,13 @@
 import {
  curvePointDistance,
  distanceToLineSegment,
-  pointFrom,
  pointRotateRads,
 } from "@excalidraw/math";

 import { ellipse, ellipseDistanceFromPoint } from "@excalidraw/math/ellipse";

+import { elementCenterPoint } from "@excalidraw/common";
+
 import type { GlobalPoint, Radians } from "@excalidraw/math";

 import {
@ -53,10 +54,7 @@ const distanceToRectanguloidElement = (
  element: ExcalidrawRectanguloidElement,
  p: GlobalPoint,
 ) => {
-  const center = pointFrom<GlobalPoint>(
-    element.x + element.width / 2,
-    element.y + element.height / 2,
-  );
+  const center = elementCenterPoint(element);
  // To emulate a rotated rectangle we rotate the point in the inverse angle
  // instead. It's all the same distance-wise.
  const rotatedPoint = pointRotateRads(p, center, -element.angle as Radians);
@ -84,10 +82,7 @@ const distanceToDiamondElement = (
  element: ExcalidrawDiamondElement,
  p: GlobalPoint,
 ): number => {
-  const center = pointFrom<GlobalPoint>(
-    element.x + element.width / 2,
-    element.y + element.height / 2,
-  );
+  const center = elementCenterPoint(element);

  // Rotate the point to the inverse direction to simulate the rotated diamond
  // points. It's all the same distance-wise.
@ -115,10 +110,7 @@ const distanceToEllipseElement = (
  element: ExcalidrawEllipseElement,
  p: GlobalPoint,
 ): number => {
-  const center = pointFrom(
-    element.x + element.width / 2,
-    element.y + element.height / 2,
-  );
+  const center = elementCenterPoint(element);
  return ellipseDistanceFromPoint(
    // Instead of rotating the ellipse, rotate the point to the inverse angle
    pointRotateRads(p, center, -element.angle as Radians),
--- a/packages/element/src/shapes.ts
+++ b/packages/element/src/shapes.ts
@ -4,6 +4,7 @@ import {
  LINE_CONFIRM_THRESHOLD,
  ROUNDNESS,
  invariant,
+  elementCenterPoint,
 } from "@excalidraw/common";
 import {
  isPoint,
@ -297,7 +298,7 @@ export const aabbForElement = (
    midY: element.y + element.height / 2,
  };

-  const center = pointFrom(bbox.midX, bbox.midY);
+  const center = elementCenterPoint(element);
  const [topLeftX, topLeftY] = pointRotateRads(
    pointFrom(bbox.minX, bbox.minY),
    center,
--- a/packages/element/src/textElement.ts
+++ b/packages/element/src/textElement.ts
@ -6,6 +6,8 @@ import {
  TEXT_ALIGN,
  VERTICAL_ALIGN,
  getFontString,
+  isProdEnv,
+  invariant,
 } from "@excalidraw/common";

 import type { AppState } from "@excalidraw/excalidraw/types";
@ -26,6 +28,8 @@ import {
  isTextElement,
 } from "./typeChecks";

+import type { Radians } from "../../math/src";
+
 import type { MaybeTransformHandleType } from "./transformHandles";
 import type {
  ElementsMap,
@ -44,13 +48,25 @@ export const redrawTextBoundingBox = (
  informMutation = true,
 ) => {
  let maxWidth = undefined;
+
+  if (!isProdEnv()) {
+    invariant(
+      !container || !isArrowElement(container) || textElement.angle === 0,
+      "text element angle must be 0 if bound to arrow container",
+    );
+  }
+
  const boundTextUpdates = {
    x: textElement.x,
    y: textElement.y,
    text: textElement.text,
    width: textElement.width,
    height: textElement.height,
-    angle: container?.angle ?? textElement.angle,
+    angle: (container
+      ? isArrowElement(container)
+        ? 0
+        : container.angle
+      : textElement.angle) as Radians,
  };

  boundTextUpdates.text = textElement.text;
@ -335,7 +351,10 @@ export const getTextElementAngle = (
  textElement: ExcalidrawTextElement,
  container: ExcalidrawTextContainer | null,
 ) => {
-  if (!container || isArrowElement(container)) {
+  if (isArrowElement(container)) {
+    return 0;
+  }
+  if (!container) {
    return textElement.angle;
  }
  return container.angle;
--- a/packages/element/src/utils.ts
+++ b/packages/element/src/utils.ts
@ -10,6 +10,8 @@ import {
  type GlobalPoint,
 } from "@excalidraw/math";

+import { elementCenterPoint } from "@excalidraw/common";
+
 import type { Curve, LineSegment } from "@excalidraw/math";

 import { getCornerRadius } from "./shapes";
@ -68,10 +70,7 @@ export function deconstructRectanguloidElement(
    return [sides, []];
  }

-  const center = pointFrom<GlobalPoint>(
-    element.x + element.width / 2,
-    element.y + element.height / 2,
-  );
+  const center = elementCenterPoint(element);

  const r = rectangle(
    pointFrom(element.x, element.y),
@ -254,10 +253,7 @@ export function deconstructDiamondElement(
    return [[topRight, bottomRight, bottomLeft, topLeft], []];
  }

-  const center = pointFrom<GlobalPoint>(
-    element.x + element.width / 2,
-    element.y + element.height / 2,
-  );
+  const center = elementCenterPoint(element);

  const [top, right, bottom, left]: GlobalPoint[] = [
    pointFrom(element.x + topX, element.y + topY),
--- a/packages/excalidraw/actions/actionBoundText.tsx
+++ b/packages/excalidraw/actions/actionBoundText.tsx
@ -21,6 +21,7 @@ import {

 import {
  hasBoundTextElement,
+  isArrowElement,
  isTextBindableContainer,
  isTextElement,
  isUsingAdaptiveRadius,
@ -46,6 +47,8 @@ import { CaptureUpdateAction } from "../store";

 import { register } from "./register";

+import type { Radians } from "../../math/src";
+
 import type { AppState } from "../types";

 export const actionUnbindText = register({
@ -155,6 +158,7 @@ export const actionBindText = register({
      verticalAlign: VERTICAL_ALIGN.MIDDLE,
      textAlign: TEXT_ALIGN.CENTER,
      autoResize: true,
+      angle: (isArrowElement(container) ? 0 : container?.angle ?? 0) as Radians,
    });
    mutateElement(container, {
      boundElements: (container.boundElements || []).concat({
--- a/packages/excalidraw/animated-trail.ts
+++ b/packages/excalidraw/animated-trail.ts
@ -191,11 +191,7 @@ export class AnimatedTrail implements Trail {
      });

    const stroke = this.trailAnimation
-      ? _stroke.slice(
-          // slicing from 6th point to get rid of the initial notch type of thing
-          Math.min(_stroke.length, 6),
-          _stroke.length / 2,
-        )
+      ? _stroke.slice(0, _stroke.length / 2)
      : _stroke;

    return getSvgPathFromStroke(stroke, true);
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@ -5352,37 +5352,37 @@ class App extends React.Component<AppProps, AppState> {
      y: sceneY,
    });

-    const element = existingTextElement
-      ? existingTextElement
-      : newTextElement({
-          x: parentCenterPosition
-            ? parentCenterPosition.elementCenterX
-            : sceneX,
-          y: parentCenterPosition
-            ? parentCenterPosition.elementCenterY
-            : sceneY,
-          strokeColor: this.state.currentItemStrokeColor,
-          backgroundColor: this.state.currentItemBackgroundColor,
-          fillStyle: this.state.currentItemFillStyle,
-          strokeWidth: this.state.currentItemStrokeWidth,
-          strokeStyle: this.state.currentItemStrokeStyle,
-          roughness: this.state.currentItemRoughness,
-          opacity: this.state.currentItemOpacity,
-          text: "",
-          fontSize,
-          fontFamily,
-          textAlign: parentCenterPosition
-            ? "center"
-            : this.state.currentItemTextAlign,
-          verticalAlign: parentCenterPosition
-            ? VERTICAL_ALIGN.MIDDLE
-            : DEFAULT_VERTICAL_ALIGN,
-          containerId: shouldBindToContainer ? container?.id : undefined,
-          groupIds: container?.groupIds ?? [],
-          lineHeight,
-          angle: container?.angle ?? (0 as Radians),
-          frameId: topLayerFrame ? topLayerFrame.id : null,
-        });
+    const element =
+      existingTextElement ||
+      newTextElement({
+        x: parentCenterPosition ? parentCenterPosition.elementCenterX : sceneX,
+        y: parentCenterPosition ? parentCenterPosition.elementCenterY : sceneY,
+        strokeColor: this.state.currentItemStrokeColor,
+        backgroundColor: this.state.currentItemBackgroundColor,
+        fillStyle: this.state.currentItemFillStyle,
+        strokeWidth: this.state.currentItemStrokeWidth,
+        strokeStyle: this.state.currentItemStrokeStyle,
+        roughness: this.state.currentItemRoughness,
+        opacity: this.state.currentItemOpacity,
+        text: "",
+        fontSize,
+        fontFamily,
+        textAlign: parentCenterPosition
+          ? "center"
+          : this.state.currentItemTextAlign,
+        verticalAlign: parentCenterPosition
+          ? VERTICAL_ALIGN.MIDDLE
+          : DEFAULT_VERTICAL_ALIGN,
+        containerId: shouldBindToContainer ? container?.id : undefined,
+        groupIds: container?.groupIds ?? [],
+        lineHeight,
+        angle: container
+          ? isArrowElement(container)
+            ? (0 as Radians)
+            : container.angle
+          : (0 as Radians),
+        frameId: topLayerFrame ? topLayerFrame.id : null,
+      });

    if (!existingTextElement && shouldBindToContainer && container) {
      mutateElement(container, {
--- a/packages/excalidraw/data/restore.ts
+++ b/packages/excalidraw/data/restore.ts
@ -439,7 +439,7 @@ const repairContainerElement = (
            // if defined, lest boundElements is stale
            !boundElement.containerId
          ) {
-            (boundElement as Mutable<ExcalidrawTextElement>).containerId =
+            (boundElement as Mutable<typeof boundElement>).containerId =
              container.id;
          }
        }
@ -464,6 +464,10 @@ const repairBoundElement = (
    ? elementsMap.get(boundElement.containerId)
    : null;

+  (boundElement as Mutable<typeof boundElement>).angle = (
+    isArrowElement(container) ? 0 : container?.angle ?? 0
+  ) as Radians;
+
  if (!container) {
    boundElement.containerId = null;
    return;
--- a/packages/excalidraw/lasso/utils.ts
+++ b/packages/excalidraw/lasso/utils.ts
@ -2,9 +2,9 @@ import { simplify } from "points-on-curve";

 import {
  polygonFromPoints,
-  polygonIncludesPoint,
  lineSegment,
  lineSegmentIntersectionPoints,
+  polygonIncludesPointNonZero,
 } from "@excalidraw/math";

 import type { GlobalPoint, LineSegment } from "@excalidraw/math/types";
@ -35,8 +35,6 @@ export const getLassoSelectedElementIds = (input: {
  if (simplifyDistance) {
    path = simplify(lassoPath, simplifyDistance) as GlobalPoint[];
  }
-  // close the path to form a polygon for enclosure check
-  const closedPath = polygonFromPoints(path);
  // as the path might not enclose a shape anymore, clear before checking
  enclosedElements.clear();
  for (const element of elements) {
@ -44,15 +42,11 @@ export const getLassoSelectedElementIds = (input: {
      !intersectedElements.has(element.id) &&
      !enclosedElements.has(element.id)
    ) {
-      const enclosed = enclosureTest(closedPath, element, elementsSegments);
+      const enclosed = enclosureTest(path, element, elementsSegments);
      if (enclosed) {
        enclosedElements.add(element.id);
      } else {
-        const intersects = intersectionTest(
-          closedPath,
-          element,
-          elementsSegments,
-        );
+        const intersects = intersectionTest(path, element, elementsSegments);
        if (intersects) {
          intersectedElements.add(element.id);
        }
@ -79,7 +73,9 @@ const enclosureTest = (
  }

  return segments.some((segment) => {
-    return segment.some((point) => polygonIncludesPoint(point, lassoPolygon));
+    return segment.some((point) =>
+      polygonIncludesPointNonZero(point, lassoPolygon),
+    );
  });
 };

--- a/packages/excalidraw/tests/helpers/ui.ts
+++ b/packages/excalidraw/tests/helpers/ui.ts
@ -20,7 +20,7 @@ import {
  isTextElement,
  isFrameLikeElement,
 } from "@excalidraw/element/typeChecks";
-import { KEYS, arrayToMap } from "@excalidraw/common";
+import { KEYS, arrayToMap, elementCenterPoint } from "@excalidraw/common";

 import type { GlobalPoint, LocalPoint, Radians } from "@excalidraw/math";

@ -151,7 +151,7 @@ export class Keyboard {
 const getElementPointForSelection = (
  element: ExcalidrawElement,
 ): GlobalPoint => {
-  const { x, y, width, height, angle } = element;
+  const { x, y, width, angle } = element;
  const target = pointFrom<GlobalPoint>(
    x +
      (isLinearElement(element) || isFreeDrawElement(element) ? 0 : width / 2),
@ -166,7 +166,7 @@ const getElementPointForSelection = (
      (bounds[1] + bounds[3]) / 2,
    );
  } else {
-    center = pointFrom(x + width / 2, y + height / 2);
+    center = elementCenterPoint(element);
  }

  if (isTextElement(element)) {
--- a/packages/excalidraw/wysiwyg/textWysiwyg.test.tsx
+++ b/packages/excalidraw/wysiwyg/textWysiwyg.test.tsx
@ -31,6 +31,7 @@ import {
  mockBoundingClientRect,
  restoreOriginalGetBoundingClientRect,
 } from "../tests/test-utils";
+import { actionBindText } from "../actions";

 unmountComponent();

@ -1568,5 +1569,101 @@ describe("textWysiwyg", () => {
      expect(text.containerId).toBe(null);
      expect(text.text).toBe("Excalidraw");
    });
+
+    it("should reset the text element angle to the container's when binding to rotated non-arrow container", async () => {
+      const text = API.createElement({
+        type: "text",
+        text: "Hello World!",
+        angle: 45,
+      });
+      const rectangle = API.createElement({
+        type: "rectangle",
+        width: 90,
+        height: 75,
+        angle: 30,
+      });
+
+      API.setElements([rectangle, text]);
+
+      API.setSelectedElements([rectangle, text]);
+
+      h.app.actionManager.executeAction(actionBindText);
+
+      expect(text.angle).toBe(30);
+      expect(rectangle.angle).toBe(30);
+    });
+
+    it("should reset the text element angle to 0 when binding to rotated arrow container", async () => {
+      const text = API.createElement({
+        type: "text",
+        text: "Hello World!",
+        angle: 45,
+      });
+      const arrow = API.createElement({
+        type: "arrow",
+        width: 90,
+        height: 75,
+        angle: 30,
+      });
+
+      API.setElements([arrow, text]);
+
+      API.setSelectedElements([arrow, text]);
+
+      h.app.actionManager.executeAction(actionBindText);
+
+      expect(text.angle).toBe(0);
+      expect(arrow.angle).toBe(30);
+    });
+
+    it("should keep the text label at 0 degrees when used as an arrow label", async () => {
+      const arrow = API.createElement({
+        type: "arrow",
+        width: 90,
+        height: 75,
+        angle: 30,
+      });
+
+      API.setElements([arrow]);
+      API.setSelectedElements([arrow]);
+
+      mouse.doubleClickAt(
+        arrow.x + arrow.width / 2,
+        arrow.y + arrow.height / 2,
+      );
+
+      const editor = await getTextEditor(textEditorSelector, true);
+
+      updateTextEditor(editor, "Hello World!");
+
+      Keyboard.exitTextEditor(editor);
+
+      expect(h.elements[1].angle).toBe(0);
+    });
+
+    it("should keep the text label at the same degrees when used as a non-arrow label", async () => {
+      const rectangle = API.createElement({
+        type: "rectangle",
+        width: 90,
+        height: 75,
+        angle: 30,
+      });
+
+      API.setElements([rectangle]);
+      API.setSelectedElements([rectangle]);
+
+      mouse.doubleClickAt(
+        rectangle.x + rectangle.width / 2,
+        rectangle.y + rectangle.height / 2,
+      );
+
+      const editor = await getTextEditor(textEditorSelector, true);
+
+      updateTextEditor(editor, "Hello World!");
+
+      Keyboard.exitTextEditor(editor);
+
+      expect(h.elements[1].angle).toBe(30);
+    });
  });
 });
--- a/packages/math/src/polygon.ts
+++ b/packages/math/src/polygon.ts
@ -41,6 +41,34 @@ export const polygonIncludesPoint = <Point extends LocalPoint | GlobalPoint>(
  return inside;
 };

+export const polygonIncludesPointNonZero = <Point extends [number, number]>(
+  point: Point,
+  polygon: Point[],
+): boolean => {
+  const [x, y] = point;
+  let windingNumber = 0;
+
+  for (let i = 0; i < polygon.length; i++) {
+    const j = (i + 1) % polygon.length;
+    const [xi, yi] = polygon[i];
+    const [xj, yj] = polygon[j];
+
+    if (yi <= y) {
+      if (yj > y) {
+        if ((xj - xi) * (y - yi) - (x - xi) * (yj - yi) > 0) {
+          windingNumber++;
+        }
+      }
+    } else if (yj <= y) {
+      if ((xj - xi) * (y - yi) - (x - xi) * (yj - yi) < 0) {
+        windingNumber--;
+      }
+    }
+  }
+
+  return windingNumber !== 0;
+};
+
 export const pointOnPolygon = <Point extends LocalPoint | GlobalPoint>(
  p: Point,
  poly: Polygon<Point>,
Author	SHA1	Message	Date
Lewis Allegedly	a9c081343f	Merge `0a377fde85` into `01304aac49`	2025-04-14 17:12:31 +10:00
Márk Tolmács	01304aac49	feat: Keep text label horizontal (#9364 ) All checks were successful Tests / test (push) Successful in 5m5s Details Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>	2025-04-13 21:21:49 +02:00
jhanma17dev	dff69e9191	chore: Element center point util (#9298 ) All checks were successful Tests / test (push) Successful in 5m4s Details	2025-04-09 17:04:51 +02:00
Ryan Di	6fc85022ae	fix: lasso selection issues (#9353 ) Some checks failed Tests / test (push) Successful in 7m13s Details Auto release excalidraw next / Auto-release-excalidraw-next (push) Failing after 1m45s Details Build Docker image / build-docker (push) Failing after 6s Details Cancel previous runs / cancel (push) Failing after 1s Details Publish Docker / publish-docker (push) Failing after 20s Details New Sentry production release / sentry (push) Failing after 2m5s Details * revert stroke slicing hack for knot * fix incorrect closing of path * nonzero enclosure * lint	2025-04-08 00:50:52 +10:00
Lewis Allegedly	0a377fde85	Merge branch 'excalidraw:master' into master	2025-03-30 23:42:24 +06:00
Lewis Allegedly	723ed4f8e8	Update README.md	2025-03-25 23:57:23 +06:00