feat: lasso selection (#9169)

* lasso without 'real' shape detection * select a single linear el * improve ux * feed segments to worker * simplify path threshold adaptive to zoom * add a tiny threshold for checks * refactor code * lasso tests * fix: ts * do not capture lasso tool * try worker-loader in next config * update config * refactor * lint * feat: show active tool when using "more tools" * keep lasso if selected from toolbar * fix incorrect checks for resetting to selection * shift for additive selection * bound text related fixes * lint * keep alt toggled lasso selection if shift pressed * fix regression * fix 'dead' lassos * lint * use workerpool and polyfill * fix worker bundled with window related code * refactor * add file extension for worker constructor error * another attempt at constructor error * attempt at build issue * attempt with dynamic import * test not importing from math * narrow down imports * Reusing existing workers infrastructure (fallback to the main thread, type-safety) * Points on curve inside the shared chunk * Give up on experimental code splitting * Remove potentially unnecessary optimisation * Removing workers as the complexit is much worse, while perf. does not seem to be much better * fix selecting text containers and containing frames together * render fill directly from animated trail * do not re-render static when setting selected element ids in lasso * remove unnecessary property * tweak trail animation * slice points to remove notch * always start alt-lasso from initial point * revert build & worker changes (unused) * remove `lasso` from `hasStrokeColor` * label change * remove unused props * remove unsafe optimization * snaps --------- Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com> Co-authored-by: Marcel Mraz <marcel@excalidraw.com>
2025-04-07 16:44:25 +10:00
parent 6e47fadb59
commit ce267aa0d3
33 changed files with 2709 additions and 146 deletions
@@ -87,34 +87,36 @@ const StaticCanvas = (props: StaticCanvasProps) => {
  return <div className="excalidraw__canvas-wrapper" ref={wrapperRef} />;
 };

-const getRelevantAppStateProps = (
-  appState: AppState,
-): StaticCanvasAppState => ({
-  zoom: appState.zoom,
-  scrollX: appState.scrollX,
-  scrollY: appState.scrollY,
-  width: appState.width,
-  height: appState.height,
-  viewModeEnabled: appState.viewModeEnabled,
-  openDialog: appState.openDialog,
-  hoveredElementIds: appState.hoveredElementIds,
-  offsetLeft: appState.offsetLeft,
-  offsetTop: appState.offsetTop,
-  theme: appState.theme,
-  pendingImageElementId: appState.pendingImageElementId,
-  shouldCacheIgnoreZoom: appState.shouldCacheIgnoreZoom,
-  viewBackgroundColor: appState.viewBackgroundColor,
-  exportScale: appState.exportScale,
-  selectedElementsAreBeingDragged: appState.selectedElementsAreBeingDragged,
-  gridSize: appState.gridSize,
-  gridStep: appState.gridStep,
-  frameRendering: appState.frameRendering,
-  selectedElementIds: appState.selectedElementIds,
-  frameToHighlight: appState.frameToHighlight,
-  editingGroupId: appState.editingGroupId,
-  currentHoveredFontFamily: appState.currentHoveredFontFamily,
-  croppingElementId: appState.croppingElementId,
-});
+const getRelevantAppStateProps = (appState: AppState): StaticCanvasAppState => {
+  const relevantAppStateProps = {
+    zoom: appState.zoom,
+    scrollX: appState.scrollX,
+    scrollY: appState.scrollY,
+    width: appState.width,
+    height: appState.height,
+    viewModeEnabled: appState.viewModeEnabled,
+    openDialog: appState.openDialog,
+    hoveredElementIds: appState.hoveredElementIds,
+    offsetLeft: appState.offsetLeft,
+    offsetTop: appState.offsetTop,
+    theme: appState.theme,
+    pendingImageElementId: appState.pendingImageElementId,
+    shouldCacheIgnoreZoom: appState.shouldCacheIgnoreZoom,
+    viewBackgroundColor: appState.viewBackgroundColor,
+    exportScale: appState.exportScale,
+    selectedElementsAreBeingDragged: appState.selectedElementsAreBeingDragged,
+    gridSize: appState.gridSize,
+    gridStep: appState.gridStep,
+    frameRendering: appState.frameRendering,
+    selectedElementIds: appState.selectedElementIds,
+    frameToHighlight: appState.frameToHighlight,
+    editingGroupId: appState.editingGroupId,
+    currentHoveredFontFamily: appState.currentHoveredFontFamily,
+    croppingElementId: appState.croppingElementId,
+  };
+
+  return relevantAppStateProps;
+};

 const areEqual = (
  prevProps: StaticCanvasProps,