Merge branch 'master' into mtolmacs/fix/z-ordering

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

packages/common/src/colors.ts

@@ -80,7 +80,11 @@ const cssInvert = (
   return { r: invertedR, g: invertedG, b: invertedB };
 };
 
-export const applyDarkModeFilter = (color: string): string => {
+export const applyDarkModeFilter = (color: string, enable = true): string => {
+  if (!enable) {
+    return color;
+  }
+
   const cached = DARK_MODE_COLORS_CACHE?.get(color);
   if (cached) {
     return cached;

packages/element/src/arrows/focus.ts

@@ -125,7 +125,7 @@ const focusPointUpdate = (
     if (switchToInsideBinding || boundToSameElement) {
       currentBinding = {
         ...currentBinding,
-        mode: "fixed",
+        mode: "inside",
       };
     } else {
       currentBinding = {
@@ -166,7 +166,7 @@ const focusPointUpdate = (
       if (switchToInsideBinding || boundToSameElementAfterUpdate) {
         adjacentBinding = {
           ...adjacentBinding,
-          mode: "fixed",
+          mode: "inside",
         };
       } else {
         adjacentBinding = {
@@ -256,8 +256,8 @@ export const handleFocusPointDrag = (
     // Handle binding mode switch
     const newMode =
       switchToInsideBinding && arrow[bindingField]?.mode === "orbit"
-        ? "fixed"
-        : !switchToInsideBinding && arrow[bindingField]?.mode === "fixed"
+        ? "inside"
+        : !switchToInsideBinding && arrow[bindingField]?.mode === "inside"
         ? "orbit"
         : null;
 

packages/element/src/binding.ts

@@ -328,7 +328,7 @@ const bindingStrategyForNewSimpleArrowEndpointDragging = (
     if (hit) {
       start = {
         element: hit,
-        mode: "fixed",
+        mode: "inside",
         focusPoint: point,
       };
     } else {
@@ -353,13 +353,13 @@ const bindingStrategyForNewSimpleArrowEndpointDragging = (
         start: isMultiPoint
           ? { mode: undefined }
           : {
-              mode: "fixed",
+              mode: "inside",
               element: hit,
               focusPoint: origin ?? center,
             },
         end: isMultiPoint
           ? { mode: "orbit", element: hit, focusPoint: point }
-          : { mode: "fixed", element: hit, focusPoint: point },
+          : { mode: "inside", element: hit, focusPoint: point },
       };
     }
 
@@ -379,7 +379,7 @@ const bindingStrategyForNewSimpleArrowEndpointDragging = (
           start: isMultiPoint
             ? { mode: undefined }
             : {
-                mode: otherElement.id !== hit.id ? "orbit" : "fixed",
+                mode: otherElement.id !== hit.id ? "orbit" : "inside",
                 element: otherElement,
                 focusPoint: origin ?? pointFrom<GlobalPoint>(arrow.x, arrow.y),
               },
@@ -402,7 +402,7 @@ const bindingStrategyForNewSimpleArrowEndpointDragging = (
       const otherIsInsideBinding =
         !!appState.selectedLinearElement?.initialState.arrowStartIsInside;
       const other: BindingStrategy = {
-        mode: otherIsInsideBinding ? "fixed" : "orbit",
+        mode: otherIsInsideBinding ? "inside" : "orbit",
         element: otherElement,
         focusPoint: shiftKey
           ? elementCenterPoint(otherElement, elementsMap)
@@ -416,9 +416,9 @@ const bindingStrategyForNewSimpleArrowEndpointDragging = (
       let current: BindingStrategy;
       if (hit) {
         const isInsideBinding =
-          globalBindMode === "fixed" || globalBindMode === "skip";
+          globalBindMode === "inside" || globalBindMode === "skip";
         current = {
-          mode: isInsideBinding && !isNested ? "fixed" : "orbit",
+          mode: isInsideBinding && !isNested ? "inside" : "orbit",
           element: hit,
           focusPoint: isInsideBinding || isNested ? point : point,
         };
@@ -436,10 +436,10 @@ const bindingStrategyForNewSimpleArrowEndpointDragging = (
     if (!arrow.startBinding) {
       if (hit) {
         const isInsideBinding =
-          globalBindMode === "fixed" || globalBindMode === "skip";
+          globalBindMode === "inside" || globalBindMode === "skip";
 
         end = {
-          mode: isInsideBinding ? "fixed" : "orbit",
+          mode: isInsideBinding ? "inside" : "orbit",
           element: hit,
           focusPoint: point,
         };
@@ -488,7 +488,7 @@ const bindingStrategyForSimpleArrowEndpointDragging_complex = (
 
   // If the global bind mode is in free binding mode, just bind
   // where the pointer is and keep the other end intact
-  if (globalBindMode === "fixed" || globalBindMode === "skip") {
+  if (globalBindMode === "inside" || globalBindMode === "skip") {
     current = hit
       ? {
           element:
@@ -496,7 +496,7 @@ const bindingStrategyForSimpleArrowEndpointDragging_complex = (
               ? hit
               : oppositeElement,
           focusPoint: point,
-          mode: "fixed",
+          mode: "inside",
         }
       : { mode: null };
     other =
@@ -514,9 +514,12 @@ const bindingStrategyForSimpleArrowEndpointDragging_complex = (
   }
 
   // Already inside binding over the same hit element should remain inside bound
-  if (hit.id === currentBinding?.elementId && currentBinding.mode === "fixed") {
+  if (
+    hit.id === currentBinding?.elementId &&
+    currentBinding.mode === "inside"
+  ) {
     return {
-      current: { mode: "fixed", focusPoint: point, element: hit },
+      current: { mode: "inside", focusPoint: point, element: hit },
       other,
     };
   }
@@ -535,7 +538,7 @@ const bindingStrategyForSimpleArrowEndpointDragging_complex = (
       // The opposite binding is inside the same element
       // eslint-disable-next-line no-else-return
       else {
-        current = { element: hit, mode: "fixed", focusPoint: point };
+        current = { element: hit, mode: "inside", focusPoint: point };
 
         return { current, other: isMultiPoint ? { mode: undefined } : other };
       }
@@ -547,7 +550,7 @@ const bindingStrategyForSimpleArrowEndpointDragging_complex = (
       if (isOverlapping && oppositeElement && !otherIsTransparent) {
         current = {
           element: oppositeElement,
-          mode: "fixed",
+          mode: "inside",
           focusPoint: point,
         };
       } else {
@@ -738,7 +741,7 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
   ) {
     return {
       start: {
-        mode: "fixed",
+        mode: "inside",
         element: hit,
         focusPoint: startDragged
           ? globalPoint
@@ -752,7 +755,7 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
             ), // startFixedPoint,
       },
       end: {
-        mode: "fixed",
+        mode: "inside",
         element: hit,
         focusPoint: endDragged
           ? globalPoint
@@ -771,7 +774,7 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
       start: startDragged
         ? hit
           ? {
-              mode: "fixed",
+              mode: "inside",
               element: hit,
               focusPoint: globalPoint,
             }
@@ -780,7 +783,7 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
       end: endDragged
         ? hit
           ? {
-              mode: "fixed",
+              mode: "inside",
               element: hit,
               focusPoint: globalPoint,
             }
@@ -793,7 +796,7 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
   const current: BindingStrategy = hit
     ? pointInElement
       ? {
-          mode: "fixed",
+          mode: "inside",
           element: hit,
           focusPoint: globalPoint,
         }
@@ -830,7 +833,7 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
     });
   const otherNeverOverride = opts?.newArrow
     ? appState.selectedLinearElement?.initialState.arrowStartIsInside
-    : otherBinding?.mode === "fixed";
+    : otherBinding?.mode === "inside";
   const other: BindingStrategy = !otherNeverOverride
     ? otherBindableElement &&
       !otherFocusPointIsInElement &&
@@ -1769,7 +1772,7 @@ export const updateBoundPoint = (
 
   // 0. Short-circuit for inside binding as it doesn't require any
   // calculations and is not affected by other bindings
-  if (binding.mode === "fixed") {
+  if (binding.mode === "inside") {
     return LinearElementEditor.createPointAt(
       arrow,
       elementsMap,

packages/element/src/collision.ts

@@ -762,7 +762,7 @@ export const isPointInElement = (
     (isLinearElement(element) || isFreeDrawElement(element)) &&
     !isPathALoop(element.points)
   ) {
-    // There isn't any "fixed" for a non-looping path
+    // There isn't any "inside" for a non-looping path
     return false;
   }
 

packages/element/src/linearElementEditor.ts

@@ -1083,7 +1083,7 @@ export class LinearElementEditor {
           },
           arrowStartIsInside:
             !!app.state.newElement &&
-            (app.state.bindMode === "fixed" || app.state.bindMode === "skip"),
+            (app.state.bindMode === "inside" || app.state.bindMode === "skip"),
           altFocusPoint: null,
         },
         selectedPointsIndices: [element.points.length - 1],
@@ -1145,7 +1145,7 @@ export class LinearElementEditor {
         },
         arrowStartIsInside:
           !!app.state.newElement &&
-          (app.state.bindMode === "fixed" || app.state.bindMode === "skip"),
+          (app.state.bindMode === "inside" || app.state.bindMode === "skip"),
         altFocusPoint: null,
       },
       selectedPointsIndices: nextSelectedPointsIndices,
@@ -2412,7 +2412,7 @@ const pointDraggingUpdates = (
   const endLocalPoint = startIsDraggingOverEndElement
     ? nextArrow.points[nextArrow.points.length - 1]
     : endIsDraggingOverStartElement &&
-      app.state.bindMode !== "fixed" &&
+      app.state.bindMode !== "inside" &&
       getFeatureFlag("COMPLEX_BINDINGS")
     ? nextArrow.points[0]
     : endBindable
@@ -2443,7 +2443,7 @@ const pointDraggingUpdates = (
     endIsDraggingOverStartElement && getFeatureFlag("COMPLEX_BINDINGS")
       ? nextArrow.points[0]
       : startIsDraggingOverEndElement &&
-        app.state.bindMode !== "fixed" &&
+        app.state.bindMode !== "inside" &&
         getFeatureFlag("COMPLEX_BINDINGS")
       ? endLocalPoint
       : startBindable
@@ -2461,7 +2461,7 @@ const pointDraggingUpdates = (
     !startIsDraggingOverEndElement &&
     !(
       endIsDraggingOverStartElement &&
-      app.state.bindMode !== "fixed" &&
+      app.state.bindMode !== "inside" &&
       getFeatureFlag("COMPLEX_BINDINGS")
     ) &&
     !!endBindable;

packages/element/src/renderElement.ts

@@ -422,10 +422,10 @@ const drawElementOnCanvas = (
 
       for (const shape of shapes) {
         if (typeof shape === "string") {
-          context.fillStyle =
-            renderConfig.theme === THEME.DARK
-              ? applyDarkModeFilter(element.strokeColor)
-              : element.strokeColor;
+          context.fillStyle = applyDarkModeFilter(
+            element.strokeColor,
+            renderConfig.theme === THEME.DARK,
+          );
           context.fill(new Path2D(shape));
         } else {
           rc.draw(shape);
@@ -555,10 +555,10 @@ const drawElementOnCanvas = (
         context.canvas.setAttribute("dir", rtl ? "rtl" : "ltr");
         context.save();
         context.font = getFontString(element);
-        context.fillStyle =
-          renderConfig.theme === THEME.DARK
-            ? applyDarkModeFilter(element.strokeColor)
-            : element.strokeColor;
+        context.fillStyle = applyDarkModeFilter(
+          element.strokeColor,
+          renderConfig.theme === THEME.DARK,
+        );
         context.textAlign = element.textAlign as CanvasTextAlign;
 
         // Canvas does not support multiline text by default
@@ -811,10 +811,10 @@ export const renderElement = (
         context.fillStyle = "rgba(0, 0, 200, 0.04)";
 
         context.lineWidth = FRAME_STYLE.strokeWidth / appState.zoom.value;
-        context.strokeStyle =
-          appState.theme === THEME.DARK
-            ? applyDarkModeFilter(FRAME_STYLE.strokeColor)
-            : FRAME_STYLE.strokeColor;
+        context.strokeStyle = applyDarkModeFilter(
+          FRAME_STYLE.strokeColor,
+          appState.theme === THEME.DARK,
+        );
 
         // TODO change later to only affect AI frames
         if (isMagicFrameElement(element)) {

packages/element/src/shape.ts

@@ -218,9 +218,7 @@ export const generateRoughOptions = (
     fillWeight: element.strokeWidth / 2,
     hachureGap: element.strokeWidth * 4,
     roughness: adjustRoughness(element),
-    stroke: isDarkMode
-      ? applyDarkModeFilter(element.strokeColor)
-      : element.strokeColor,
+    stroke: applyDarkModeFilter(element.strokeColor, isDarkMode),
     preserveVertices:
       continuousPath || element.roughness < ROUGHNESS.cartoonist,
   };
@@ -234,9 +232,7 @@ export const generateRoughOptions = (
       options.fillStyle = element.fillStyle;
       options.fill = isTransparent(element.backgroundColor)
         ? undefined
-        : isDarkMode
-        ? applyDarkModeFilter(element.backgroundColor)
-        : element.backgroundColor;
+        : applyDarkModeFilter(element.backgroundColor, isDarkMode);
       if (element.type === "ellipse") {
         options.curveFitting = 1;
       }
@@ -249,9 +245,7 @@ export const generateRoughOptions = (
         options.fill =
           element.backgroundColor === "transparent"
             ? undefined
-            : isDarkMode
-            ? applyDarkModeFilter(element.backgroundColor)
-            : element.backgroundColor;
+            : applyDarkModeFilter(element.backgroundColor, isDarkMode);
       }
       return options;
     }
@@ -386,12 +380,11 @@ const getArrowheadShapes = (
     return [];
   }
 
-  const strokeColor = isDarkMode
-    ? applyDarkModeFilter(element.strokeColor)
-    : element.strokeColor;
-  const backgroundFillColor = isDarkMode
-    ? applyDarkModeFilter(canvasBackgroundColor)
-    : canvasBackgroundColor;
+  const strokeColor = applyDarkModeFilter(element.strokeColor, isDarkMode);
+  const backgroundFillColor = applyDarkModeFilter(
+    canvasBackgroundColor,
+    isDarkMode,
+  );
   const cardinalityOneOrManyOffset = -0.25;
   const cardinalityZeroCircleScale = 0.8;
 

packages/element/src/types.ts

@@ -279,7 +279,7 @@ export type ExcalidrawTextElementWithContainer = {
 
 export type FixedPoint = [number, number];
 
-export type BindMode = "fixed" | "orbit" | "skip";
+export type BindMode = "inside" | "orbit" | "skip";
 
 export type FixedPointBinding = {
   elementId: ExcalidrawBindableElement["id"];

packages/element/src/zindex.ts

@@ -409,8 +409,10 @@ const shiftElementsToEnd = (
   let trailingIndex: number;
   if (direction === "left") {
     if (containingFrame) {
-      leadingIndex = findIndex(elements, (el) =>
-        isOfTargetFrame(el, containingFrame),
+      leadingIndex = findIndex(
+        elements,
+        (el) =>
+          el.id !== containingFrame && isOfTargetFrame(el, containingFrame),
       );
     } else if (appState.editingGroupId) {
       const groupElements = getElementsInGroup(
@@ -428,8 +430,10 @@ const shiftElementsToEnd = (
     trailingIndex = indicesToMove[indicesToMove.length - 1];
   } else {
     if (containingFrame) {
-      trailingIndex = findLastIndex(elements, (el) =>
-        isOfTargetFrame(el, containingFrame),
+      trailingIndex = findLastIndex(
+        elements,
+        (el) =>
+          el.id !== containingFrame && isOfTargetFrame(el, containingFrame),
       );
     } else if (appState.editingGroupId) {
       const groupElements = getElementsInGroup(
@@ -499,10 +503,7 @@ function shiftElementsAccountingForFrames(
     }),
   );
 
-  const frameAwareContiguousElementsToMove: {
-    regularElements: ExcalidrawElement[];
-    frameChildren: Map<ExcalidrawFrameLikeElement["id"], ExcalidrawElement[]>;
-  } = { regularElements: [], frameChildren: new Map() };
+  const regularElements: ExcalidrawElement[] = [];
 
   const fullySelectedFrames = new Set<ExcalidrawFrameLikeElement["id"]>();
 
@@ -512,51 +513,33 @@ function shiftElementsAccountingForFrames(
     }
   }
 
+  const selectedFrameIds = new Set<ExcalidrawFrameLikeElement["id"]>();
+
   for (const element of allElements) {
     if (elementsToMove.has(element.id)) {
       if (
         isFrameLikeElement(element) ||
         (element.frameId && fullySelectedFrames.has(element.frameId))
       ) {
-        frameAwareContiguousElementsToMove.regularElements.push(element);
+        regularElements.push(element);
       } else if (!element.frameId) {
-        frameAwareContiguousElementsToMove.regularElements.push(element);
-      } else {
-        const frameChildren =
-          frameAwareContiguousElementsToMove.frameChildren.get(
-            element.frameId,
-          ) || [];
-        frameChildren.push(element);
-        frameAwareContiguousElementsToMove.frameChildren.set(
-          element.frameId,
-          frameChildren,
-        );
+        regularElements.push(element);
+      } else if (!selectedFrameIds.has(element.frameId)) {
+        selectedFrameIds.add(element.frameId);
+        regularElements.push(element);
       }
     }
   }
 
-  let nextElements = allElements;
-
-  const frameChildrenSets = Array.from(
-    frameAwareContiguousElementsToMove.frameChildren.entries(),
-  );
-
-  for (const [frameId, children] of frameChildrenSets) {
-    nextElements = shiftFunction(
-      allElements,
-      appState,
-      direction,
-      frameId,
-      children,
-    );
-  }
+  const containingFrame =
+    selectedFrameIds.size > 0 ? [...selectedFrameIds][0] : null;
 
   return shiftFunction(
-    nextElements,
+    allElements,
     appState,
     direction,
-    null,
-    frameAwareContiguousElementsToMove.regularElements,
+    containingFrame,
+    regularElements,
   );
 }
 

packages/element/tests/binding.test.tsx

@@ -72,14 +72,14 @@ describe("binding for simple arrows", () => {
       expect(startBinding.fixedPoint[0]).toBeLessThanOrEqual(1);
       expect(startBinding.fixedPoint[1]).toBeGreaterThanOrEqual(0);
       expect(startBinding.fixedPoint[1]).toBeLessThanOrEqual(1);
-      expect(startBinding.mode).toBe("fixed");
+      expect(startBinding.mode).toBe("inside");
 
       const endBinding = arrow.endBinding as FixedPointBinding;
       expect(endBinding.fixedPoint[0]).toBeGreaterThanOrEqual(0);
       expect(endBinding.fixedPoint[0]).toBeLessThanOrEqual(1);
       expect(endBinding.fixedPoint[1]).toBeGreaterThanOrEqual(0);
       expect(endBinding.fixedPoint[1]).toBeLessThanOrEqual(1);
-      expect(endBinding.mode).toBe("fixed");
+      expect(endBinding.mode).toBe("inside");
 
       // Move the bindable
       mouse.downAt(100, 150);

packages/excalidraw/actions/actionProperties.tsx

@@ -1940,7 +1940,7 @@ export const actionChangeArrowType = register<keyof typeof ARROW_TYPE>({
             bindBindingElement(
               newElement,
               startElement,
-              appState.bindMode === "fixed" ? "fixed" : "orbit",
+              appState.bindMode === "inside" ? "inside" : "orbit",
               "start",
               app.scene,
             );
@@ -1954,7 +1954,7 @@ export const actionChangeArrowType = register<keyof typeof ARROW_TYPE>({
             bindBindingElement(
               newElement,
               endElement,
-              appState.bindMode === "fixed" ? "fixed" : "orbit",
+              appState.bindMode === "inside" ? "inside" : "orbit",
               "end",
               app.scene,
             );

packages/excalidraw/components/App.tsx

@@ -1095,7 +1095,7 @@ class App extends React.Component<AppProps, AppState> {
           );
 
           this.setState({
-            bindMode: "fixed",
+            bindMode: "inside",
             selectedLinearElement: {
               ...this.state.selectedLinearElement,
               initialState: {
@@ -1176,16 +1176,16 @@ class App extends React.Component<AppProps, AppState> {
       : null;
     const isAlreadyInsideBindingToSameElement =
       (otherBinding &&
-        arrow[otherBinding]?.mode === "fixed" &&
+        arrow[otherBinding]?.mode === "inside" &&
         arrow[otherBinding]?.elementId === hoveredElement?.id) ||
       (currentBinding &&
-        arrow[currentBinding]?.mode === "fixed" &&
+        arrow[currentBinding]?.mode === "inside" &&
         hoveredElement?.id === arrow[currentBinding]?.elementId);
 
     if (
       currentBinding &&
       otherBinding &&
-      arrow[currentBinding]?.mode === "fixed" &&
+      arrow[currentBinding]?.mode === "inside" &&
       hoveredElement?.id !== arrow[currentBinding]?.elementId &&
       arrow[otherBinding]?.elementId !== arrow[currentBinding]?.elementId
     ) {
@@ -1217,7 +1217,7 @@ class App extends React.Component<AppProps, AppState> {
       }
 
       // Clear the inside binding mode too
-      if (this.state.bindMode === "fixed") {
+      if (this.state.bindMode === "inside") {
         flushSync(() => {
           this.setState({
             bindMode: "orbit",
@@ -1995,9 +1995,10 @@ class App extends React.Component<AppProps, AppState> {
               }
             }}
             style={{
-              background: isDarkTheme
-                ? applyDarkModeFilter(this.state.viewBackgroundColor)
-                : this.state.viewBackgroundColor,
+              background: applyDarkModeFilter(
+                this.state.viewBackgroundColor,
+                isDarkTheme,
+              ),
               zIndex: 2,
               border: "none",
               display: "block",

packages/excalidraw/data/restore.ts

@@ -239,8 +239,8 @@ const repairBinding = <T extends ExcalidrawArrowElement>(
       if (binding.elementId) {
         return {
           elementId: binding.elementId,
-          mode: (binding.mode as string) === "inside" ? "fixed" : binding.mode,
-          fixedPoint: normalizeFixedPoint(binding.fixedPoint || [0.5, 0.5]),
+          mode: binding.mode,
+          fixedPoint: normalizeFixedPoint(binding.fixedPoint),
         } as FixedPointBinding | null;
       }
       return null;
@@ -269,7 +269,7 @@ const repairBinding = <T extends ExcalidrawArrowElement>(
         elementsMap,
       );
       const mode = isPointInElement(p, boundElement, elementsMap)
-        ? "fixed"
+        ? "inside"
         : "orbit";
       const safeElement = {
         ...element,
@@ -289,7 +289,7 @@ const repairBinding = <T extends ExcalidrawArrowElement>(
           : null,
       };
       const focusPoint =
-        mode === "fixed"
+        mode === "inside"
           ? p
           : projectFixedPointOntoDiagonal(
               safeElement,

packages/excalidraw/index.tsx

@@ -7,6 +7,7 @@ import React, {
 } from "react";
 
 import {
+  applyDarkModeFilter,
   DEFAULT_IMAGE_OPTIONS,
   DEFAULT_UI_OPTIONS,
   isShallowEqual,
@@ -450,3 +451,5 @@ export function useExcalidrawStateValue(
 // -----------------------------------------------------------------------------
 
 export { _useOnAppStateChange as useOnExcalidrawStateChange };
+
+export { applyDarkModeFilter };

packages/excalidraw/renderer/helpers.ts

@@ -62,10 +62,10 @@ export const bootstrapCanvas = ({
       context.clearRect(0, 0, normalizedWidth, normalizedHeight);
     }
     context.save();
-    context.fillStyle =
-      theme === THEME.DARK
-        ? applyDarkModeFilter(viewBackgroundColor)
-        : viewBackgroundColor;
+    context.fillStyle = applyDarkModeFilter(
+      viewBackgroundColor,
+      theme === THEME.DARK,
+    );
     context.fillRect(0, 0, normalizedWidth, normalizedHeight);
     context.restore();
   } else {

packages/excalidraw/renderer/staticSvgScene.ts

@@ -386,9 +386,10 @@ const renderElementToSvg = (
           const path = svgRoot.ownerDocument.createElementNS(SVG_NS, "path");
           path.setAttribute(
             "fill",
-            renderConfig.theme === THEME.DARK
-              ? applyDarkModeFilter(element.strokeColor)
-              : element.strokeColor,
+            applyDarkModeFilter(
+              element.strokeColor,
+              renderConfig.theme === THEME.DARK,
+            ),
           );
           path.setAttribute("d", shape);
           wrapper.appendChild(path);
@@ -621,9 +622,10 @@ const renderElementToSvg = (
         rect.setAttribute("fill", "none");
         rect.setAttribute(
           "stroke",
-          renderConfig.theme === THEME.DARK
-            ? applyDarkModeFilter(FRAME_STYLE.strokeColor)
-            : FRAME_STYLE.strokeColor,
+          applyDarkModeFilter(
+            FRAME_STYLE.strokeColor,
+            renderConfig.theme === THEME.DARK,
+          ),
         );
         rect.setAttribute("stroke-width", FRAME_STYLE.strokeWidth.toString());
 
@@ -677,9 +679,10 @@ const renderElementToSvg = (
           text.setAttribute("font-size", `${element.fontSize}px`);
           text.setAttribute(
             "fill",
-            renderConfig.theme === THEME.DARK
-              ? applyDarkModeFilter(element.strokeColor)
-              : element.strokeColor,
+            applyDarkModeFilter(
+              element.strokeColor,
+              renderConfig.theme === THEME.DARK,
+            ),
           );
           text.setAttribute("text-anchor", textAnchor);
           text.setAttribute("style", "white-space: pre;");

packages/excalidraw/scene/export.ts

@@ -459,9 +459,7 @@ export const exportToSvg = async (
     rect.setAttribute("height", `${height}`);
     rect.setAttribute(
       "fill",
-      exportWithDarkMode
-        ? applyDarkModeFilter(viewBackgroundColor)
-        : viewBackgroundColor,
+      applyDarkModeFilter(viewBackgroundColor, exportWithDarkMode),
     );
     svgRoot.appendChild(rect);
   }

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

@@ -857,7 +857,7 @@ describe("repairing bindings", () => {
       endBinding: {
         elementId: container.id,
         fixedPoint: [0.5, 0.5],
-        mode: "fixed",
+        mode: "inside",
       },
     });
 

packages/excalidraw/wysiwyg/textWysiwyg.tsx

@@ -392,10 +392,10 @@ export const textWysiwyg = ({
         ),
         textAlign,
         verticalAlign,
-        color:
-          appState.theme === THEME.DARK
-            ? applyDarkModeFilter(updatedTextElement.strokeColor)
-            : updatedTextElement.strokeColor,
+        color: applyDarkModeFilter(
+          updatedTextElement.strokeColor,
+          appState.theme === THEME.DARK,
+        ),
         opacity: updatedTextElement.opacity / 100,
         maxHeight: `${editorMaxHeight}px`,
       });