fix: improve line creation ux on touch screens (#9740)

* fix: awkward point adding and removing on touch device

* feat: move finalize to next to last point

* feat: on touch screen, click would create a default line/arrow

* fix: make default adaptive to zoom

* fix: increase padding to avoid cutoffs

* refactor: simplify

* fix: only use bigger padding when needed

* center arrow horizontally on pointer

* increase min drag distance before we start 2-point-arrow-drag-creating

* do not render 0-width arrow while creating

* dead code

* fix tests

* fix: remove redundant code

* do not enter line editor on creation

---------

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>

packages/excalidraw/renderer/renderNewElementScene.ts

@@ -1,6 +1,6 @@
 import { throttleRAF } from "@excalidraw/common";
 
-import { renderElement } from "@excalidraw/element";
+import { isInvisiblySmallElement, renderElement } from "@excalidraw/element";
 
 import { bootstrapCanvas, getNormalizedCanvasDimensions } from "./helpers";
 
@@ -34,6 +34,14 @@ const _renderNewElementScene = ({
     context.scale(appState.zoom.value, appState.zoom.value);
 
     if (newElement && newElement.type !== "selection") {
+      // e.g. when creating arrows and we're still below the arrow drag distance
+      // threshold
+      // (for now we skip render only with elements while we're creating to be
+      // safe)
+      if (isInvisiblySmallElement(newElement)) {
+        return;
+      }
+
       renderElement(
         newElement,
         elementsMap,