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

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

examples/with-nextjs/src/excalidrawWrapper.tsx

@@ -1,5 +1,4 @@
 "use client";
-
 import * as excalidrawLib from "@excalidraw/excalidraw";
 import { Excalidraw } from "@excalidraw/excalidraw";
 
@@ -14,7 +13,6 @@ const ExcalidrawWrapper: React.FC = () => {
         appTitle={"Excalidraw with Nextjs Example"}
         useCustom={(api: any, args?: any[]) => {}}
         excalidrawLib={excalidrawLib}
-        showFadeDemo={true}
       >
         <Excalidraw />
       </App>

examples/with-script-in-browser/components/ExampleApp.tsx

@@ -70,7 +70,6 @@ export interface AppProps {
   customArgs?: any[];
   children: React.ReactNode;
   excalidrawLib: typeof TExcalidraw;
-  showFadeDemo?: boolean;
 }
 
 export default function ExampleApp({
@@ -79,7 +78,6 @@ export default function ExampleApp({
   customArgs,
   children,
   excalidrawLib,
-  showFadeDemo = false,
 }: AppProps) {
   const {
     exportToCanvas,
@@ -118,19 +116,6 @@ export default function ExampleApp({
     {},
   );
   const [comment, setComment] = useState<Comment | null>(null);
-  const [hideAllForFadeDemo, setHideAllForFadeDemo] = useState(false);
-  const [fadeDemoNextIndex, setFadeDemoNextIndex] = useState(0);
-  const [fadeDemoElementIds, setFadeDemoElementIds] = useState<string[]>([]);
-  const [demoAnimationType, setDemoAnimationType] = useState<"fade" | "fly">(
-    "fade",
-  );
-  const [demoAnimationDuration, setDemoAnimationDuration] = useState(500);
-  const [demoFlyFrom, setDemoFlyFrom] = useState<
-    "left" | "right" | "top" | "bottom"
-  >("left");
-  const [demoAnimationEasing, setDemoAnimationEasing] = useState<
-    "linear" | "easeOut" | "easeInOut"
-  >("easeOut");
 
   const initialStatePromiseRef = useRef<{
     promise: ResolvablePromise<ExcalidrawInitialDataState | null>;
@@ -193,8 +178,7 @@ export default function ExampleApp({
     const newElement = cloneElement(
       Excalidraw,
       {
-        onExcalidrawAPI: (api: ExcalidrawImperativeAPI | null) =>
+        excalidrawAPI: (api: ExcalidrawImperativeAPI) => setExcalidrawAPI(api),
-          setExcalidrawAPI(api),
         initialData: initialStatePromiseRef.current.promise,
         onChange: (
           elements: NonDeletedExcalidrawElement[],
@@ -224,10 +208,6 @@ export default function ExampleApp({
         onPointerDown,
         onScrollChange: rerenderCommentIcons,
         validateEmbeddable: true,
-        resolveRenderOpacity: hideAllForFadeDemo
-          ? (element: NonDeletedExcalidrawElement) =>
-              fadeDemoElementIds.includes(element.id) ? 0 : undefined
-          : undefined,
       },
       <>
         {excalidrawAPI && (
@@ -684,229 +664,6 @@ export default function ExampleApp({
           >
             Reset Scene
           </button>
-          {showFadeDemo && (
-            <>
-              <label>
-                Animation type
-                <select
-                  value={demoAnimationType}
-                  onChange={(event) =>
-                    setDemoAnimationType(
-                      event.target.value as "fade" | "fly",
-                    )
-                  }
-                >
-                  <option value="fade">fade</option>
-                  <option value="fly">fly</option>
-                </select>
-              </label>
-              <label>
-                Duration
-                <input
-                  type="number"
-                  value={demoAnimationDuration}
-                  onChange={(event) =>
-                    setDemoAnimationDuration(Number(event.target.value) || 0)
-                  }
-                />
-              </label>
-              <label>
-                Easing
-                <select
-                  value={demoAnimationEasing}
-                  onChange={(event) =>
-                    setDemoAnimationEasing(
-                      event.target.value as "linear" | "easeOut" | "easeInOut",
-                    )
-                  }
-                >
-                  <option value="linear">linear</option>
-                  <option value="easeOut">easeOut</option>
-                  <option value="easeInOut">easeInOut</option>
-                </select>
-              </label>
-              {demoAnimationType === "fly" && (
-                <label>
-                  Fly from
-                  <select
-                    value={demoFlyFrom}
-                    onChange={(event) =>
-                      setDemoFlyFrom(
-                        event.target.value as
-                          | "left"
-                          | "right"
-                          | "top"
-                          | "bottom",
-                      )
-                    }
-                  >
-                    <option value="left">left</option>
-                    <option value="right">right</option>
-                    <option value="top">top</option>
-                    <option value="bottom">bottom</option>
-                  </select>
-                </label>
-              )}
-              <button
-                onClick={() => {
-                  if (!excalidrawAPI) {
-                    return;
-                  }
-
-                  setFadeDemoElementIds(
-                    excalidrawAPI
-                      .getSceneElements()
-                      .map((element) => element.id),
-                  );
-                  excalidrawAPI.clearElementAnimationOverrides();
-                  setHideAllForFadeDemo(true);
-                  setFadeDemoNextIndex(0);
-                }}
-              >
-                Hide every element
-              </button>
-              <button
-                onClick={() => {
-                  if (!excalidrawAPI || !hideAllForFadeDemo) {
-                    return;
-                  }
-
-                  const elements = excalidrawAPI
-                    .getSceneElements()
-                    .filter((element) =>
-                      fadeDemoElementIds.includes(element.id),
-                    );
-
-                  if (!elements.length) {
-                    return;
-                  }
-
-                  const nextIndex =
-                    fadeDemoNextIndex >= elements.length
-                      ? 0
-                      : fadeDemoNextIndex;
-
-                  if (nextIndex === 0) {
-                    excalidrawAPI.clearElementAnimationOverrides();
-                  }
-
-                  if (demoAnimationType === "fly") {
-                    excalidrawAPI.animateElements({
-                      elements: [elements[nextIndex].id],
-                      type: "fly",
-                      from: demoFlyFrom,
-                      duration: demoAnimationDuration,
-                      phase: "in",
-                      easing: demoAnimationEasing,
-                    });
-                  } else {
-                    excalidrawAPI.animateElements({
-                      elements: [elements[nextIndex].id],
-                      type: "fade",
-                      duration: demoAnimationDuration,
-                      phase: "in",
-                      easing: demoAnimationEasing,
-                    });
-                  }
-
-                  setFadeDemoNextIndex(nextIndex + 1);
-                }}
-              >
-                Animate in next element
-              </button>
-              <button
-                onClick={() => {
-                  if (!excalidrawAPI || !hideAllForFadeDemo) {
-                    return;
-                  }
-
-                  const elements = excalidrawAPI
-                    .getSceneElements()
-                    .filter((element) =>
-                      fadeDemoElementIds.includes(element.id),
-                    );
-
-                  if (!elements.length) {
-                    return;
-                  }
-
-                  if (demoAnimationType === "fly") {
-                    excalidrawAPI.animateElements({
-                      elements,
-                      type: "fly",
-                      from: demoFlyFrom,
-                      duration: demoAnimationDuration,
-                      stagger: 120,
-                      phase: "in",
-                      easing: demoAnimationEasing,
-                    });
-                  } else {
-                    excalidrawAPI.animateElements({
-                      elements,
-                      type: "fade",
-                      duration: demoAnimationDuration,
-                      stagger: 120,
-                      phase: "in",
-                      easing: demoAnimationEasing,
-                    });
-                  }
-
-                  setFadeDemoNextIndex(elements.length);
-                }}
-              >
-                Animate in all
-              </button>
-              <button
-                onClick={() => {
-                  if (!excalidrawAPI || !hideAllForFadeDemo) {
-                    return;
-                  }
-
-                  const elements = excalidrawAPI
-                    .getSceneElements()
-                    .filter((element) =>
-                      fadeDemoElementIds.includes(element.id),
-                    );
-
-                  if (!elements.length) {
-                    return;
-                  }
-
-                  const prevIndex = Math.min(
-                    fadeDemoNextIndex - 1,
-                    elements.length - 1,
-                  );
-
-                  if (prevIndex < 0) {
-                    return;
-                  }
-
-                  if (demoAnimationType === "fly") {
-                    excalidrawAPI.animateElements({
-                      elements: [elements[prevIndex].id],
-                      type: "fly",
-                      from: demoFlyFrom,
-                      duration: demoAnimationDuration,
-                      phase: "out",
-                      easing: demoAnimationEasing,
-                    });
-                  } else {
-                    excalidrawAPI.animateElements({
-                      elements: [elements[prevIndex].id],
-                      type: "fade",
-                      duration: demoAnimationDuration,
-                      phase: "out",
-                      easing: demoAnimationEasing,
-                    });
-                  }
-
-                  setFadeDemoNextIndex(prevIndex);
-                }}
-              >
-                Animate out prev element
-              </button>
-            </>
-          )}
           <button
             onClick={() => {
               const libraryItems: LibraryItems = [

examples/with-script-in-browser/initialData.tsx

@@ -2,28 +2,6 @@ import type { ExcalidrawElementSkeleton } from "@excalidraw/excalidraw/element/t
 import type { FileId } from "@excalidraw/excalidraw/element/types";
 
 const elements: ExcalidrawElementSkeleton[] = [
-  // {
-  //   type: "arrow",
-  //   x: 100,
-  //   y: 500,
-  // },
-  // {
-  //   type: "arrow",
-  //   x: 250,
-  //   y: 250,
-  //   label: {
-  //     text: "HELLO WORLD!!",
-  //   },
-  //   start: {
-  //     type: "rectangle",
-  //     // x: -100,
-  //   },
-  //   end: {
-  //     type: "ellipse",
-  //     // x: 300,
-  //   },
-  // },
-
   {
     type: "rectangle",
     x: 10,
@@ -44,14 +22,14 @@ const elements: ExcalidrawElementSkeleton[] = [
     },
     id: "2",
   },
-  // {
+  {
-  //   type: "arrow",
+    type: "arrow",
-  //   x: 100,
+    x: 100,
-  //   y: 200,
+    y: 200,
-  //   label: { text: "HELLO WORLD!!" },
+    label: { text: "HELLO WORLD!!" },
-  //   start: { type: "rectangle" },
+    start: { type: "rectangle" },
-  //   end: { type: "ellipse" },
+    end: { type: "ellipse" },
-  // },
+  },
   {
     type: "image",
     x: 606.1042326312408,
@@ -60,11 +38,11 @@ const elements: ExcalidrawElementSkeleton[] = [
     height: 230,
     fileId: "rocket" as FileId,
   },
-  // {
+  {
-  //   type: "frame",
+    type: "frame",
-  //   children: ["1", "2"],
+    children: ["1", "2"],
-  //   name: "My frame",
+    name: "My frame",
-  // },
+  },
 ];
 export default {
   elements,

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/renderElement.ts

@@ -1,7 +1,6 @@
 import rough from "roughjs/bin/rough";
 
 import {
-  clamp,
   type GlobalPoint,
   isRightAngleRads,
   lineSegment,
@@ -106,62 +105,8 @@ const getCanvasPadding = (element: ExcalidrawElement) => {
   }
 };
 
-export const resolveRenderOpacity = (
-  element: ExcalidrawElement,
-  renderConfig: Pick<
-    StaticCanvasRenderConfig,
-    "elementOpacityOverrides" | "resolveRenderOpacity"
-  >,
-) => {
-  const override = renderConfig.elementOpacityOverrides?.get(element.id);
-
-  if (override !== undefined) {
-    return clamp(override, 0, 100);
-  }
-
-  const resolvedOpacity = renderConfig.resolveRenderOpacity?.(
-    element as NonDeletedExcalidrawElement,
-  );
-
-  if (resolvedOpacity !== undefined) {
-    return clamp(resolvedOpacity, 0, 100);
-  }
-
-  return element.opacity;
-};
-
-export const resolveRenderPositionOffset = (
-  element: ExcalidrawElement,
-  renderConfig: Pick<StaticCanvasRenderConfig, "elementPositionOverrides">,
-) => {
-  return renderConfig.elementPositionOverrides?.get(element.id) ?? { x: 0, y: 0 };
-};
-
-export const getRenderElementWithPositionOverride = <
-  TElement extends NonDeletedExcalidrawElement,
->(
-  element: TElement,
-  renderConfig: Pick<StaticCanvasRenderConfig, "elementPositionOverrides">,
-): TElement => {
-  const positionOffset = resolveRenderPositionOffset(element, renderConfig);
-
-  if (positionOffset.x === 0 && positionOffset.y === 0) {
-    return element;
-  }
-
-  return {
-    ...element,
-    x: element.x + positionOffset.x,
-    y: element.y + positionOffset.y,
-  } as TElement;
-};
-
 export const getRenderOpacity = (
   element: ExcalidrawElement,
-  renderConfig: Pick<
-    StaticCanvasRenderConfig,
-    "elementOpacityOverrides" | "resolveRenderOpacity"
-  >,
   containingFrame: ExcalidrawFrameLikeElement | null,
   elementsPendingErasure: ElementsPendingErasure,
   pendingNodes: Readonly<PendingExcalidrawElements> | null,
@@ -170,8 +115,7 @@ export const getRenderOpacity = (
   // multiplying frame opacity with element opacity to combine them
   // (e.g. frame 50% and element 50% opacity should result in 25% opacity)
   let opacity =
-    (((containingFrame?.opacity ?? 100) * resolveRenderOpacity(element, renderConfig)) /
+    (((containingFrame?.opacity ?? 100) * element.opacity) / 10000) *
-      10000) *
     globalAlpha;
 
   // if pending erasure, multiply again to combine further
@@ -478,10 +422,10 @@ const drawElementOnCanvas = (
 
       for (const shape of shapes) {
         if (typeof shape === "string") {
-          context.fillStyle =
+          context.fillStyle = applyDarkModeFilter(
-            renderConfig.theme === THEME.DARK
+            element.strokeColor,
-              ? applyDarkModeFilter(element.strokeColor)
+            renderConfig.theme === THEME.DARK,
-              : element.strokeColor;
+          );
           context.fill(new Path2D(shape));
         } else {
           rc.draw(shape);
@@ -611,10 +555,10 @@ const drawElementOnCanvas = (
         context.canvas.setAttribute("dir", rtl ? "rtl" : "ltr");
         context.save();
         context.font = getFontString(element);
-        context.fillStyle =
+        context.fillStyle = applyDarkModeFilter(
-          renderConfig.theme === THEME.DARK
+          element.strokeColor,
-            ? applyDarkModeFilter(element.strokeColor)
+          renderConfig.theme === THEME.DARK,
-            : element.strokeColor;
+        );
         context.textAlign = element.textAlign as CanvasTextAlign;
 
         // Canvas does not support multiline text by default
@@ -847,11 +791,8 @@ export const renderElement = (
     !appState.selectedElementIds[element.id] &&
     !appState.hoveredElementIds[element.id];
 
-  element = getRenderElementWithPositionOverride(element, renderConfig);
-
   context.globalAlpha = getRenderOpacity(
     element,
-    renderConfig,
     getContainingFrame(element, elementsMap),
     renderConfig.elementsPendingErasure,
     renderConfig.pendingFlowchartNodes,
@@ -870,10 +811,10 @@ export const renderElement = (
         context.fillStyle = "rgba(0, 0, 200, 0.04)";
 
         context.lineWidth = FRAME_STYLE.strokeWidth / appState.zoom.value;
-        context.strokeStyle =
+        context.strokeStyle = applyDarkModeFilter(
-          appState.theme === THEME.DARK
+          FRAME_STYLE.strokeColor,
-            ? applyDarkModeFilter(FRAME_STYLE.strokeColor)
+          appState.theme === THEME.DARK,
-            : FRAME_STYLE.strokeColor;
+        );
 
         // 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
+    stroke: applyDarkModeFilter(element.strokeColor, isDarkMode),
-      ? applyDarkModeFilter(element.strokeColor)
-      : element.strokeColor,
     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, isDarkMode);
-        ? applyDarkModeFilter(element.backgroundColor)
-        : element.backgroundColor;
       if (element.type === "ellipse") {
         options.curveFitting = 1;
       }
@@ -249,9 +245,7 @@ export const generateRoughOptions = (
         options.fill =
           element.backgroundColor === "transparent"
             ? undefined
-            : isDarkMode
+            : applyDarkModeFilter(element.backgroundColor, isDarkMode);
-            ? applyDarkModeFilter(element.backgroundColor)
-            : element.backgroundColor;
       }
       return options;
     }
@@ -386,12 +380,11 @@ const getArrowheadShapes = (
     return [];
   }
 
-  const strokeColor = isDarkMode
+  const strokeColor = applyDarkModeFilter(element.strokeColor, isDarkMode);
-    ? applyDarkModeFilter(element.strokeColor)
+  const backgroundFillColor = applyDarkModeFilter(
-    : element.strokeColor;
+    canvasBackgroundColor,
-  const backgroundFillColor = isDarkMode
+    isDarkMode,
-    ? applyDarkModeFilter(canvasBackgroundColor)
+  );
-    : canvasBackgroundColor;
   const cardinalityOneOrManyOffset = -0.25;
   const cardinalityZeroCircleScale = 0.8;
 

packages/element/src/zindex.ts

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

packages/excalidraw/components/App.tsx

@@ -207,12 +207,10 @@ import {
   getLineHeightInPx,
   getApproxMinLineWidth,
   getApproxMinLineHeight,
-   getMinTextElementWidth,
+  getMinTextElementWidth,
-   ShapeCache,
+  ShapeCache,
-   getRenderOpacity,
+  getRenderOpacity,
-   resolveRenderPositionOffset,
+  editGroupForSelectedElement,
-   resolveRenderOpacity,
-   editGroupForSelectedElement,
   getElementsInGroup,
   getSelectedGroupIdForElement,
   getSelectedGroupIds,
@@ -452,7 +450,6 @@ import { searchItemInFocusAtom } from "./SearchMenu";
 import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
 import { StaticCanvas, InteractiveCanvas } from "./canvases";
 import NewElementCanvas from "./canvases/NewElementCanvas";
-import { AnimationController } from "../renderer/animation";
 import { isPointHittingLink } from "./hyperlink/helpers";
 import { MagicIcon, copyIcon, fullscreenIcon } from "./icons";
 import { AppStateObserver, type OnStateChange } from "./AppStateObserver";
@@ -743,235 +740,6 @@ class App extends React.Component<AppProps, AppState> {
   onRemoveEventListenersEmitter = new Emitter<[]>();
 
   api: ExcalidrawImperativeAPI;
-  private renderAnimationVersion = 0;
-  private elementOpacityOverrides = new Map<string, number>();
-  private elementPositionOverrides = new Map<string, { x: number; y: number }>();
-  private elementAnimationStates = new Map<
-    string,
-    {
-      opacityFrom: number;
-      opacityTo: number;
-      positionFrom: { x: number; y: number };
-      positionTo: { x: number; y: number };
-      easing: "linear" | "easeOut" | "easeInOut";
-      duration: number;
-      delay: number;
-      elapsed: number;
-    }
-  >();
-
-  private getElementAnimationKey = () => `${this.id}:animate-element`;
-
-  private bumpRenderAnimationVersion = () => {
-    this.renderAnimationVersion++;
-    this.setState({});
-  };
-
-  private getRenderOpacityConfig = () => ({
-    elementOpacityOverrides: this.elementOpacityOverrides,
-    elementPositionOverrides: this.elementPositionOverrides,
-    resolveRenderOpacity: this.props.resolveRenderOpacity,
-  });
-
-  private getResolvedElementOpacity = (element: NonDeletedExcalidrawElement) => {
-    return resolveRenderOpacity(element, this.getRenderOpacityConfig());
-  };
-
-  private getElementVisibleOpacity = (element: NonDeletedExcalidrawElement) => {
-    return clamp(element.opacity, 0, 100);
-  };
-
-  private applyAnimationEasing = (
-    progress: number,
-    easing: "linear" | "easeOut" | "easeInOut",
-  ) => {
-    switch (easing) {
-      case "linear":
-        return progress;
-      case "easeOut":
-        return easeOut(progress);
-      case "easeInOut":
-        return progress < 0.5
-          ? 4 * progress * progress * progress
-          : 1 - Math.pow(-2 * progress + 2, 3) / 2;
-    }
-  };
-
-  private getFlyPositionOffset = (
-    element: NonDeletedExcalidrawElement,
-    from: "left" | "right" | "top" | "bottom",
-  ) => {
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(
-      element,
-      this.scene.getNonDeletedElementsMap(),
-    );
-    const viewportWidth = this.state.width / this.state.zoom.value;
-    const viewportHeight = this.state.height / this.state.zoom.value;
-    const elementWidth = x2 - x1;
-    const elementHeight = y2 - y1;
-
-    switch (from) {
-      case "left":
-        return { x: -(Math.max(viewportWidth, elementWidth) + 64), y: 0 };
-      case "right":
-        return { x: Math.max(viewportWidth, elementWidth) + 64, y: 0 };
-      case "top":
-        return { x: 0, y: -(Math.max(viewportHeight, elementHeight) + 64) };
-      case "bottom":
-        return { x: 0, y: Math.max(viewportHeight, elementHeight) + 64 };
-    }
-  };
-
-  private animateElement = ({
-    id,
-    opacityFrom,
-    opacityTo,
-    positionFrom = { x: 0, y: 0 },
-    positionTo = { x: 0, y: 0 },
-    easing,
-    duration,
-    delay,
-  }: {
-    id: string;
-    opacityFrom: number;
-    opacityTo: number;
-    positionFrom?: { x: number; y: number };
-    positionTo?: { x: number; y: number };
-    easing: "linear" | "easeOut" | "easeInOut";
-    duration: number;
-    delay: number;
-  }) => {
-    const normalizedOpacityFrom = clamp(opacityFrom, 0, 100);
-    const normalizedOpacityTo = clamp(opacityTo, 0, 100);
-    const normalizedDuration = Math.max(duration, 0);
-    const normalizedDelay = Math.max(delay, 0);
-
-    this.elementOpacityOverrides.set(id, normalizedOpacityFrom);
-
-    if (positionFrom.x !== 0 || positionFrom.y !== 0) {
-      this.elementPositionOverrides.set(id, positionFrom);
-    } else {
-      this.elementPositionOverrides.delete(id);
-    }
-
-    if (normalizedDuration === 0 && normalizedDelay === 0) {
-      this.elementAnimationStates.delete(id);
-      this.elementOpacityOverrides.set(id, normalizedOpacityTo);
-
-      if (positionTo.x !== 0 || positionTo.y !== 0) {
-        this.elementPositionOverrides.set(id, positionTo);
-      } else {
-        this.elementPositionOverrides.delete(id);
-      }
-
-      this.bumpRenderAnimationVersion();
-      return;
-    }
-
-    this.elementAnimationStates.set(id, {
-      opacityFrom: normalizedOpacityFrom,
-      opacityTo: normalizedOpacityTo,
-      positionFrom,
-      positionTo,
-      easing,
-      duration: normalizedDuration,
-      delay: normalizedDelay,
-      elapsed: 0,
-    });
-
-    this.bumpRenderAnimationVersion();
-    this.syncElementAnimations();
-  };
-
-  private syncElementAnimations = () => {
-    const animationKey = this.getElementAnimationKey();
-
-    if (this.elementAnimationStates.size === 0) {
-      AnimationController.cancel(animationKey);
-      return;
-    }
-
-    if (AnimationController.running(animationKey)) {
-      return;
-    }
-
-    AnimationController.start(animationKey, ({ deltaTime }) => {
-      let shouldRerender = false;
-
-      for (const [id, animation] of this.elementAnimationStates) {
-        const element = this.scene.getNonDeletedElement(id);
-
-        if (!element) {
-          this.elementAnimationStates.delete(id);
-          shouldRerender =
-            this.elementOpacityOverrides.delete(id) || shouldRerender;
-          shouldRerender =
-            this.elementPositionOverrides.delete(id) || shouldRerender;
-          continue;
-        }
-
-        animation.elapsed += deltaTime;
-
-        const progress =
-          animation.elapsed <= animation.delay
-            ? 0
-            : animation.duration === 0
-              ? 1
-              : Math.min(
-                  (animation.elapsed - animation.delay) / animation.duration,
-                  1,
-                );
-        const easedProgress = this.applyAnimationEasing(
-          progress,
-          animation.easing,
-        );
-
-        const nextOpacity =
-          animation.opacityFrom +
-          (animation.opacityTo - animation.opacityFrom) * easedProgress;
-        const nextPosition = {
-          x:
-            animation.positionFrom.x +
-            (animation.positionTo.x - animation.positionFrom.x) * easedProgress,
-          y:
-            animation.positionFrom.y +
-            (animation.positionTo.y - animation.positionFrom.y) * easedProgress,
-        };
-
-        const clampedOpacity = clamp(nextOpacity, 0, 100);
-
-        if (this.elementOpacityOverrides.get(id) !== clampedOpacity) {
-          this.elementOpacityOverrides.set(id, clampedOpacity);
-          shouldRerender = true;
-        }
-
-        const currentPositionOverride =
-          this.elementPositionOverrides.get(id) ?? ({ x: 0, y: 0 } as const);
-
-        if (
-          currentPositionOverride.x !== nextPosition.x ||
-          currentPositionOverride.y !== nextPosition.y
-        ) {
-          if (nextPosition.x === 0 && nextPosition.y === 0) {
-            this.elementPositionOverrides.delete(id);
-          } else {
-            this.elementPositionOverrides.set(id, nextPosition);
-          }
-          shouldRerender = true;
-        }
-
-        if (animation.elapsed >= animation.delay + animation.duration) {
-          this.elementAnimationStates.delete(id);
-        }
-      }
-
-      if (shouldRerender) {
-        this.bumpRenderAnimationVersion();
-      }
-
-      return this.elementAnimationStates.size > 0 ? {} : undefined;
-    });
-  };
 
   private createExcalidrawAPI(): ExcalidrawImperativeAPI {
     const api: ExcalidrawImperativeAPI = {
@@ -989,9 +757,6 @@ class App extends React.Component<AppProps, AppState> {
         clear: this.resetHistory,
       },
       scrollToContent: this.scrollToContent,
-      animateElements: this.animateElements,
-      cancelElementAnimation: this.cancelElementAnimation,
-      clearElementAnimationOverrides: this.clearElementAnimationOverrides,
       getSceneElements: this.getSceneElements,
       getAppState: () => this.state,
       getFiles: () => this.files,
@@ -1969,10 +1734,6 @@ class App extends React.Component<AppProps, AppState> {
           const isHovered =
             this.state.activeEmbeddable?.element === el &&
             this.state.activeEmbeddable?.state === "hover";
-          const renderPositionOffset = resolveRenderPositionOffset(
-            el,
-            this.getRenderOpacityConfig(),
-          );
 
           // scale video embeds based on zoom (capped) so that smaller embeds
           // on canvas when zoomed are still of legible quality
@@ -1994,14 +1755,13 @@ class App extends React.Component<AppProps, AppState> {
               })}
               style={{
                 transform: isVisible
-                  ? `translate(${x + renderPositionOffset.x * this.state.zoom.value - this.state.offsetLeft}px, ${
+                  ? `translate(${x - this.state.offsetLeft}px, ${
-                      y + renderPositionOffset.y * this.state.zoom.value - this.state.offsetTop
+                      y - this.state.offsetTop
                     }px) scale(${scale})`
                   : "none",
                 display: isVisible ? "block" : "none",
                 opacity: getRenderOpacity(
                   el,
-                  this.getRenderOpacityConfig(),
                   getContainingFrame(el, this.scene.getNonDeletedElementsMap()),
                   this.elementsPendingErasure,
                   null,
@@ -2235,9 +1995,10 @@ class App extends React.Component<AppProps, AppState> {
               }
             }}
             style={{
-              background: isDarkTheme
+              background: applyDarkModeFilter(
-                ? applyDarkModeFilter(this.state.viewBackgroundColor)
+                this.state.viewBackgroundColor,
-                : this.state.viewBackgroundColor,
+                isDarkTheme,
+              ),
               zIndex: 2,
               border: "none",
               display: "block",
@@ -2591,9 +2352,6 @@ class App extends React.Component<AppProps, AppState> {
                               pendingFlowchartNodes:
                                 this.flowChartCreator.pendingNodes,
                               theme: this.state.theme,
-                              ...this.getRenderOpacityConfig(),
-                              renderAnimationVersion:
-                                this.renderAnimationVersion,
                             }}
                           />
                           {newElementCanvasElement && (
@@ -2616,9 +2374,6 @@ class App extends React.Component<AppProps, AppState> {
                                   this.elementsPendingErasure,
                                 pendingFlowchartNodes: null,
                                 theme: this.state.theme,
-                                ...this.getRenderOpacityConfig(),
-                                renderAnimationVersion:
-                                  this.renderAnimationVersion,
                               }}
                             />
                           )}
@@ -3452,7 +3207,6 @@ class App extends React.Component<AppProps, AppState> {
     this.editorLifecycleEvents.emit("editor:unmount");
     this.props.onUnmount?.();
     this.props.onExcalidrawAPI?.(null);
-    AnimationController.cancel(this.getElementAnimationKey());
 
     (window as any).launchQueue?.setConsumer(() => {});
 
@@ -4865,98 +4619,6 @@ class App extends React.Component<AppProps, AppState> {
     },
   );
 
-  public animateElements = ({
-    elements,
-    duration = 250,
-    delay = 0,
-    stagger = 0,
-    phase = "in",
-    easing,
-    ...animation
-  }:
-    | {
-        elements: readonly (ExcalidrawElement | ExcalidrawElement["id"])[];
-        type: "fade";
-        duration?: number;
-        delay?: number;
-        stagger?: number;
-        phase?: "in" | "out";
-        easing?: "linear" | "easeOut" | "easeInOut";
-      }
-    | {
-        elements: readonly (ExcalidrawElement | ExcalidrawElement["id"])[];
-        type: "fly";
-        from: "left" | "right" | "top" | "bottom";
-        duration?: number;
-        delay?: number;
-        stagger?: number;
-        phase?: "in" | "out";
-        easing?: "linear" | "easeOut" | "easeInOut";
-      }) => {
-    const normalizedDelay = Math.max(delay, 0);
-    const normalizedStagger = Math.max(stagger, 0);
-
-    elements.forEach((elementOrId, index) => {
-      const id = typeof elementOrId === "string" ? elementOrId : elementOrId.id;
-      const element = this.scene.getNonDeletedElement(id);
-
-      if (!element) {
-        return;
-      }
-
-      if (animation.type === "fade") {
-        this.animateElement({
-          id,
-          opacityFrom:
-            phase === "in" ? 0 : this.getElementVisibleOpacity(element),
-          opacityTo:
-            phase === "in" ? this.getElementVisibleOpacity(element) : 0,
-          easing: easing ?? "easeInOut",
-          duration,
-          delay: normalizedDelay + index * normalizedStagger,
-        });
-        return;
-      }
-
-      const flyOffset = this.getFlyPositionOffset(element, animation.from);
-
-      this.animateElement({
-        id,
-        opacityFrom: phase === "in" ? 0 : this.getElementVisibleOpacity(element),
-        opacityTo: phase === "in" ? this.getElementVisibleOpacity(element) : 0,
-        positionFrom: phase === "in" ? flyOffset : { x: 0, y: 0 },
-        positionTo: phase === "in" ? { x: 0, y: 0 } : flyOffset,
-        easing: easing ?? "easeOut",
-        duration,
-        delay: normalizedDelay + index * normalizedStagger,
-      });
-    });
-  };
-
-  public cancelElementAnimation = (id: string) => {
-    if (!this.elementAnimationStates.delete(id)) {
-      return;
-    }
-
-    this.syncElementAnimations();
-  };
-
-  public clearElementAnimationOverrides = () => {
-    if (
-      this.elementOpacityOverrides.size === 0 &&
-      this.elementPositionOverrides.size === 0 &&
-      this.elementAnimationStates.size === 0
-    ) {
-      return;
-    }
-
-    this.elementAnimationStates.clear();
-    this.elementOpacityOverrides.clear();
-    this.elementPositionOverrides.clear();
-    this.syncElementAnimations();
-    this.bumpRenderAnimationVersion();
-  };
-
   public applyDeltas = (
     deltas: StoreDelta[],
     options?: ApplyToOptions,

packages/excalidraw/index.tsx

@@ -7,6 +7,7 @@ import React, {
 } from "react";
 
 import {
+  applyDarkModeFilter,
   DEFAULT_IMAGE_OPTIONS,
   DEFAULT_UI_OPTIONS,
   isShallowEqual,
@@ -99,7 +100,6 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     children,
     validateEmbeddable,
     renderEmbeddable,
-    resolveRenderOpacity,
     aiEnabled,
     showDeprecatedFonts,
     renderScrollbars,
@@ -218,7 +218,6 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           onDuplicate={onDuplicate}
           validateEmbeddable={validateEmbeddable}
           renderEmbeddable={renderEmbeddable}
-          resolveRenderOpacity={resolveRenderOpacity}
           aiEnabled={aiEnabled !== false}
           showDeprecatedFonts={showDeprecatedFonts}
           renderScrollbars={renderScrollbars}
@@ -452,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 =
+    context.fillStyle = applyDarkModeFilter(
-      theme === THEME.DARK
+      viewBackgroundColor,
-        ? applyDarkModeFilter(viewBackgroundColor)
+      theme === THEME.DARK,
-        : viewBackgroundColor;
+    );
     context.fillRect(0, 0, normalizedWidth, normalizedHeight);
     context.restore();
   } else {

packages/excalidraw/renderer/staticScene.ts

@@ -14,16 +14,11 @@ import {
 } from "@excalidraw/element";
 import {
   elementOverlapsWithFrame,
-  getContainingFrame,
   getTargetFrame,
   shouldApplyFrameClip,
 } from "@excalidraw/element";
 
-import {
+import { renderElement } from "@excalidraw/element";
-  getRenderElementWithPositionOverride,
-  getRenderOpacity,
-  renderElement,
-} from "@excalidraw/element";
 
 import { getElementAbsoluteCoords } from "@excalidraw/element";
 
@@ -175,10 +170,7 @@ const renderLinkIcon = (
   context: CanvasRenderingContext2D,
   appState: StaticCanvasAppState,
   elementsMap: ElementsMap,
-  renderConfig: StaticCanvasRenderConfig,
 ) => {
-  element = getRenderElementWithPositionOverride(element, renderConfig);
-
   if (element.link && !appState.selectedElementIds[element.id]) {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
     const [x, y, width, height] = getLinkHandleFromCoords(
@@ -229,13 +221,7 @@ const renderLinkIcon = (
 
       linkCanvasCacheContext.restore();
     }
-    context.globalAlpha = getRenderOpacity(
+    context.globalAlpha = element.opacity / 100;
-      element,
-      renderConfig,
-      getContainingFrame(element, elementsMap),
-      renderConfig.elementsPendingErasure,
-      renderConfig.pendingFlowchartNodes,
-    );
     context.drawImage(linkCanvas, x - centerX, y - centerY, width, height);
     context.restore();
   }
@@ -384,7 +370,7 @@ const _renderStaticScene = ({
         context.restore();
 
         if (!isExporting) {
-          renderLinkIcon(element, context, appState, elementsMap, renderConfig);
+          renderLinkIcon(element, context, appState, elementsMap);
         }
       } catch (error: any) {
         console.error(
@@ -435,7 +421,7 @@ const _renderStaticScene = ({
             );
           }
           if (!isExporting) {
-            renderLinkIcon(element, context, appState, elementsMap, renderConfig);
+            renderLinkIcon(element, context, appState, elementsMap);
           }
         };
         // - when exporting the whole canvas, we DO NOT apply clipping

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(
-              ? applyDarkModeFilter(element.strokeColor)
+              element.strokeColor,
-              : 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(
-            ? applyDarkModeFilter(FRAME_STYLE.strokeColor)
+            FRAME_STYLE.strokeColor,
-            : 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(
-              ? applyDarkModeFilter(element.strokeColor)
+              element.strokeColor,
-              : 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, exportWithDarkMode),
-        ? applyDarkModeFilter(viewBackgroundColor)
-        : viewBackgroundColor,
     );
     svgRoot.appendChild(rect);
   }

packages/excalidraw/scene/types.ts

@@ -12,7 +12,6 @@ import type {
   AppClassProperties,
   AppState,
   EmbedsValidationStatus,
-  RenderOpacityResolver,
   ElementsPendingErasure,
   InteractiveCanvasAppState,
   StaticCanvasAppState,
@@ -38,13 +37,6 @@ export type StaticCanvasRenderConfig = {
   elementsPendingErasure: ElementsPendingErasure;
   pendingFlowchartNodes: PendingExcalidrawElements | null;
   theme: AppState["theme"];
-  resolveRenderOpacity?: RenderOpacityResolver;
-  elementOpacityOverrides?: ReadonlyMap<ExcalidrawElement["id"], number>;
-  elementPositionOverrides?: ReadonlyMap<
-    ExcalidrawElement["id"],
-    { x: number; y: number }
-  >;
-  renderAnimationVersion?: number;
 };
 
 export type SVGRenderConfig = {

packages/excalidraw/types.ts

@@ -567,10 +567,6 @@ export type OnExportProgress = {
   progress?: number;
 };
 
-export type RenderOpacityResolver = (
-  element: NonDeletedExcalidrawElement,
-) => ExcalidrawElement["opacity"] | undefined;
-
 export interface ExcalidrawProps {
   onChange?: (
     elements: readonly OrderedExcalidrawElement[],
@@ -686,7 +682,6 @@ export interface ExcalidrawProps {
     element: NonDeleted<ExcalidrawEmbeddableElement>,
     appState: AppState,
   ) => JSX.Element | null;
-  resolveRenderOpacity?: RenderOpacityResolver;
   aiEnabled?: boolean;
   showDeprecatedFonts?: boolean;
   renderScrollbars?: boolean;
@@ -967,11 +962,6 @@ export interface ExcalidrawImperativeAPI {
   getFiles: () => InstanceType<typeof App>["files"];
   getName: InstanceType<typeof App>["getName"];
   scrollToContent: InstanceType<typeof App>["scrollToContent"];
-  animateElements: InstanceType<typeof App>["animateElements"];
-  cancelElementAnimation: InstanceType<typeof App>["cancelElementAnimation"];
-  clearElementAnimationOverrides: InstanceType<
-    typeof App
-  >["clearElementAnimationOverrides"];
   registerAction: (action: Action) => void;
   refresh: InstanceType<typeof App>["refresh"];
   setToast: InstanceType<typeof App>["setToast"];

packages/excalidraw/wysiwyg/textWysiwyg.tsx

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