@dwelle/excalidraw 0.5.0-bb58eff → 0.5.0-bcfbd91

package/dist/excalidraw/actions/actionNavigate.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getClientColor } from "../clients";
 import { Avatar } from "../components/Avatar";
-import { eyeIcon, microphoneIcon, microphoneMutedIcon, } from "../components/icons";
+import { eyeIcon } from "../components/icons";
 import { t } from "../i18n";
 import { register } from "./register";
-import clsx from "clsx";
 export const actionGoToCollaborator = register({
     name: "goToCollaborator",
     viewMode: true,
@@ -35,18 +34,10 @@ export const actionGoToCollaborator = register({
         };
     },
     PanelComponent: ({ updateData, data, appState }) => {
-        const { socketId, collaborator, withName, isBeingFollowed } = data;
-        const background = getClientColor(socketId, collaborator);
-        const statusClassNames = clsx({
-            "is-followed": isBeingFollowed,
-            "is-current-user": collaborator.isCurrentUser === true,
-            "is-speaking": collaborator.isSpeaking,
-            "is-in-call": collaborator.isInCall,
-            "is-muted": collaborator.isMuted,
-        });
-        const statusIconJSX = collaborator.isInCall ? (collaborator.isSpeaking ? (_jsxs("div", { className: "UserList__collaborator-status-icon-speaking-indicator", title: t("userList.hint.isSpeaking"), children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {})] })) : collaborator.isMuted ? (_jsx("div", { className: "UserList__collaborator-status-icon-microphone-muted", title: t("userList.hint.micMuted"), children: microphoneMutedIcon })) : (_jsx("div", { title: t("userList.hint.inCall"), children: microphoneIcon }))) : null;
-        return withName ? (_jsxs("div", { className: `dropdown-menu-item dropdown-menu-item-base UserList__collaborator ${statusClassNames}`, style: { [`--avatar-size`]: "1.5rem" }, onClick: () => updateData(collaborator), children: [_jsx(Avatar, { color: background, onClick: () => { }, name: collaborator.username || "", src: collaborator.avatarUrl, className: statusClassNames }), _jsx("div", { className: "UserList__collaborator-name", children: collaborator.username }), _jsxs("div", { className: "UserList__collaborator-status-icons", "aria-hidden": true, children: [isBeingFollowed && (_jsx("div", { className: "UserList__collaborator-status-icon-is-followed", title: t("userList.hint.followStatus"), children: eyeIcon })), statusIconJSX] })] })) : (_jsxs("div", { className: `UserList__collaborator UserList__collaborator--avatar-only ${statusClassNames}`, children: [_jsx(Avatar, { color: background, onClick: () => {
-                        updateData(collaborator);
-                    }, name: collaborator.username || "", src: collaborator.avatarUrl, className: statusClassNames }), statusIconJSX && (_jsx("div", { className: "UserList__collaborator-status-icon", children: statusIconJSX }))] }));
+        const { clientId, collaborator, withName, isBeingFollowed } = data;
+        const background = getClientColor(clientId);
+        return withName ? (_jsxs("div", { className: "dropdown-menu-item dropdown-menu-item-base UserList__collaborator", onClick: () => updateData(collaborator), children: [_jsx(Avatar, { color: background, onClick: () => { }, name: collaborator.username || "", src: collaborator.avatarUrl, isBeingFollowed: isBeingFollowed, isCurrentUser: collaborator.isCurrentUser === true }), _jsx("div", { className: "UserList__collaborator-name", children: collaborator.username }), _jsx("div", { className: "UserList__collaborator-follow-status-icon", style: { visibility: isBeingFollowed ? "visible" : "hidden" }, title: isBeingFollowed ? t("userList.hint.followStatus") : undefined, "aria-hidden": true, children: eyeIcon })] })) : (_jsx(Avatar, { color: background, onClick: () => {
+                updateData(collaborator);
+            }, name: collaborator.username || "", src: collaborator.avatarUrl, isBeingFollowed: isBeingFollowed, isCurrentUser: collaborator.isCurrentUser === true }));
     },
 });

package/dist/excalidraw/actions/actionProperties.d.ts

@@ -149,9 +149,6 @@ export declare const actionChangeFillStyle: {
                 id?: string | undefined;
                 socketId?: import("../types").SocketId | undefined;
                 isCurrentUser?: boolean | undefined;
-                isInCall?: boolean | undefined;
-                isSpeaking?: boolean | undefined;
-                isMuted?: boolean | undefined;
             }>>;
             showStats: boolean;
             currentChartType: import("../element/types").ChartType;
@@ -310,9 +307,6 @@ export declare const actionChangeStrokeWidth: {
                 id?: string | undefined;
                 socketId?: import("../types").SocketId | undefined;
                 isCurrentUser?: boolean | undefined;
-                isInCall?: boolean | undefined;
-                isSpeaking?: boolean | undefined;
-                isMuted?: boolean | undefined;
             }>>;
             showStats: boolean;
             currentChartType: import("../element/types").ChartType;
@@ -471,9 +465,6 @@ export declare const actionChangeSloppiness: {
                 id?: string | undefined;
                 socketId?: import("../types").SocketId | undefined;
                 isCurrentUser?: boolean | undefined;
-                isInCall?: boolean | undefined;
-                isSpeaking?: boolean | undefined;
-                isMuted?: boolean | undefined;
             }>>;
             showStats: boolean;
             currentChartType: import("../element/types").ChartType;
@@ -632,9 +623,6 @@ export declare const actionChangeStrokeStyle: {
                 id?: string | undefined;
                 socketId?: import("../types").SocketId | undefined;
                 isCurrentUser?: boolean | undefined;
-                isInCall?: boolean | undefined;
-                isSpeaking?: boolean | undefined;
-                isMuted?: boolean | undefined;
             }>>;
             showStats: boolean;
             currentChartType: import("../element/types").ChartType;
@@ -793,9 +781,6 @@ export declare const actionChangeOpacity: {
                 id?: string | undefined;
                 socketId?: import("../types").SocketId | undefined;
                 isCurrentUser?: boolean | undefined;
-                isInCall?: boolean | undefined;
-                isSpeaking?: boolean | undefined;
-                isMuted?: boolean | undefined;
             }>>;
             showStats: boolean;
             currentChartType: import("../element/types").ChartType;
@@ -954,9 +939,6 @@ export declare const actionChangeFontSize: {
                 id?: string | undefined;
                 socketId?: import("../types").SocketId | undefined;
                 isCurrentUser?: boolean | undefined;
-                isInCall?: boolean | undefined;
-                isSpeaking?: boolean | undefined;
-                isMuted?: boolean | undefined;
             }>>;
             showStats: boolean;
             currentChartType: import("../element/types").ChartType;
@@ -1115,9 +1097,6 @@ export declare const actionDecreaseFontSize: {
                 id?: string | undefined;
                 socketId?: import("../types").SocketId | undefined;
                 isCurrentUser?: boolean | undefined;
-                isInCall?: boolean | undefined;
-                isSpeaking?: boolean | undefined;
-                isMuted?: boolean | undefined;
             }>>;
             showStats: boolean;
             currentChartType: import("../element/types").ChartType;
@@ -1276,9 +1255,6 @@ export declare const actionIncreaseFontSize: {
                 id?: string | undefined;
                 socketId?: import("../types").SocketId | undefined;
                 isCurrentUser?: boolean | undefined;
-                isInCall?: boolean | undefined;
-                isSpeaking?: boolean | undefined;
-                isMuted?: boolean | undefined;
             }>>;
             showStats: boolean;
             currentChartType: import("../element/types").ChartType;
@@ -1437,9 +1413,6 @@ export declare const actionChangeFontFamily: {
                 id?: string | undefined;
                 socketId?: import("../types").SocketId | undefined;
                 isCurrentUser?: boolean | undefined;
-                isInCall?: boolean | undefined;
-                isSpeaking?: boolean | undefined;
-                isMuted?: boolean | undefined;
             }>>;
             showStats: boolean;
             currentChartType: import("../element/types").ChartType;
@@ -1598,9 +1571,6 @@ export declare const actionChangeTextAlign: {
                 id?: string | undefined;
                 socketId?: import("../types").SocketId | undefined;
                 isCurrentUser?: boolean | undefined;
-                isInCall?: boolean | undefined;
-                isSpeaking?: boolean | undefined;
-                isMuted?: boolean | undefined;
             }>>;
             showStats: boolean;
             currentChartType: import("../element/types").ChartType;
@@ -1761,9 +1731,6 @@ export declare const actionChangeVerticalAlign: {
                 id?: string | undefined;
                 socketId?: import("../types").SocketId | undefined;
                 isCurrentUser?: boolean | undefined;
-                isInCall?: boolean | undefined;
-                isSpeaking?: boolean | undefined;
-                isMuted?: boolean | undefined;
             }>>;
             showStats: boolean;
             currentChartType: import("../element/types").ChartType;
@@ -1922,9 +1889,6 @@ export declare const actionChangeRoundness: {
                 id?: string | undefined;
                 socketId?: import("../types").SocketId | undefined;
                 isCurrentUser?: boolean | undefined;
-                isInCall?: boolean | undefined;
-                isSpeaking?: boolean | undefined;
-                isMuted?: boolean | undefined;
             }>>;
             showStats: boolean;
             currentChartType: import("../element/types").ChartType;
@@ -2086,9 +2050,6 @@ export declare const actionChangeArrowhead: {
                 id?: string | undefined;
                 socketId?: import("../types").SocketId | undefined;
                 isCurrentUser?: boolean | undefined;
-                isInCall?: boolean | undefined;
-                isSpeaking?: boolean | undefined;
-                isMuted?: boolean | undefined;
             }>>;
             showStats: boolean;
             currentChartType: import("../element/types").ChartType;

package/dist/excalidraw/actions/actionSelectAll.d.ts

@@ -133,9 +133,6 @@ export declare const actionSelectAll: {
                 id?: string | undefined;
                 socketId?: import("../types").SocketId | undefined;
                 isCurrentUser?: boolean | undefined;
-                isInCall?: boolean | undefined;
-                isSpeaking?: boolean | undefined;
-                isMuted?: boolean | undefined;
             }>>;
             showStats: boolean;
             currentChartType: import("../element/types").ChartType;

package/dist/excalidraw/actions/actionStyles.d.ts

@@ -129,9 +129,6 @@ export declare const actionCopyStyles: {
                 id?: string | undefined;
                 socketId?: import("../types").SocketId | undefined;
                 isCurrentUser?: boolean | undefined;
-                isInCall?: boolean | undefined;
-                isSpeaking?: boolean | undefined;
-                isMuted?: boolean | undefined;
             }>>;
             showStats: boolean;
             currentChartType: import("../element/types").ChartType;

package/dist/excalidraw/actions/actionToggleGridMode.d.ts

@@ -134,9 +134,6 @@ export declare const actionToggleGridMode: {
                 id?: string | undefined;
                 socketId?: import("../types").SocketId | undefined;
                 isCurrentUser?: boolean | undefined;
-                isInCall?: boolean | undefined;
-                isSpeaking?: boolean | undefined;
-                isMuted?: boolean | undefined;
             }>>;
             showStats: boolean;
             currentChartType: import("../element/types").ChartType;

package/dist/excalidraw/actions/actionToggleObjectsSnapMode.d.ts

@@ -133,9 +133,6 @@ export declare const actionToggleObjectsSnapMode: {
                 id?: string | undefined;
                 socketId?: import("../types").SocketId | undefined;
                 isCurrentUser?: boolean | undefined;
-                isInCall?: boolean | undefined;
-                isSpeaking?: boolean | undefined;
-                isMuted?: boolean | undefined;
             }>>;
             showStats: boolean;
             currentChartType: import("../element/types").ChartType;

package/dist/excalidraw/actions/actionToggleStats.d.ts

@@ -132,9 +132,6 @@ export declare const actionToggleStats: {
                 id?: string | undefined;
                 socketId?: import("../types").SocketId | undefined;
                 isCurrentUser?: boolean | undefined;
-                isInCall?: boolean | undefined;
-                isSpeaking?: boolean | undefined;
-                isMuted?: boolean | undefined;
             }>>;
             currentChartType: import("../element/types").ChartType;
             pasteDialog: {

package/dist/excalidraw/actions/actionToggleViewMode.d.ts

@@ -132,9 +132,6 @@ export declare const actionToggleViewMode: {
                 id?: string | undefined;
                 socketId?: import("../types").SocketId | undefined;
                 isCurrentUser?: boolean | undefined;
-                isInCall?: boolean | undefined;
-                isSpeaking?: boolean | undefined;
-                isMuted?: boolean | undefined;
             }>>;
             showStats: boolean;
             currentChartType: import("../element/types").ChartType;

package/dist/excalidraw/actions/actionToggleZenMode.d.ts

@@ -132,9 +132,6 @@ export declare const actionToggleZenMode: {
                 id?: string | undefined;
                 socketId?: import("../types").SocketId | undefined;
                 isCurrentUser?: boolean | undefined;
-                isInCall?: boolean | undefined;
-                isSpeaking?: boolean | undefined;
-                isMuted?: boolean | undefined;
             }>>;
             showStats: boolean;
             currentChartType: import("../element/types").ChartType;

package/dist/excalidraw/actions/actionZindex.d.ts

@@ -1,20 +1,20 @@
-/// <reference types="react" />
+import React from "react";
 export declare const actionSendBackward: {
     name: "sendBackward";
     trackEvent: {
         category: "element";
     };
     perform: (elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>) => {
-        elements: readonly import("../element/types").ExcalidrawElement[];
+        elements: import("../element/types").ExcalidrawElement[];
         appState: Readonly<import("../types").AppState>;
         commitToHistory: true;
     };
     contextItemLabel: string;
     keyPriority: number;
-    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
+    keyTest: (event: React.KeyboardEvent<Element> | KeyboardEvent) => boolean;
     PanelComponent: ({ updateData, appState }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
-    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
+    keyTest?: ((event: React.KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
 };
 export declare const actionBringForward: {
     name: "bringForward";
@@ -22,16 +22,16 @@ export declare const actionBringForward: {
         category: "element";
     };
     perform: (elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>) => {
-        elements: readonly import("../element/types").ExcalidrawElement[];
+        elements: import("../element/types").ExcalidrawElement[];
         appState: Readonly<import("../types").AppState>;
         commitToHistory: true;
     };
     contextItemLabel: string;
     keyPriority: number;
-    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
+    keyTest: (event: React.KeyboardEvent<Element> | KeyboardEvent) => boolean;
     PanelComponent: ({ updateData, appState }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
-    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
+    keyTest?: ((event: React.KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
 };
 export declare const actionSendToBack: {
     name: "sendToBack";
@@ -44,10 +44,10 @@ export declare const actionSendToBack: {
         commitToHistory: true;
     };
     contextItemLabel: string;
-    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
+    keyTest: (event: React.KeyboardEvent<Element> | KeyboardEvent) => boolean;
     PanelComponent: ({ updateData, appState }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
-    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
+    keyTest?: ((event: React.KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
 };
 export declare const actionBringToFront: {
     name: "bringToFront";
@@ -60,8 +60,8 @@ export declare const actionBringToFront: {
         commitToHistory: true;
     };
     contextItemLabel: string;
-    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
+    keyTest: (event: React.KeyboardEvent<Element> | KeyboardEvent) => boolean;
     PanelComponent: ({ updateData, appState }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
-    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
+    keyTest?: ((event: React.KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
 };

package/dist/excalidraw/clients.d.ts

@@ -1,14 +1,5 @@
-import { InteractiveCanvasRenderConfig } from "./scene/types";
-import { Collaborator, InteractiveCanvasAppState, SocketId } from "./types";
-export declare const getClientColor: (socketId: SocketId, collaborator: Collaborator | undefined) => string;
+export declare const getClientColor: (id: string) => string;
 /**
  * returns first char, capitalized
  */
 export declare const getNameInitial: (name?: string | null) => string;
-export declare const renderRemoteCursors: ({ context, renderConfig, appState, normalizedWidth, normalizedHeight, }: {
-    context: CanvasRenderingContext2D;
-    renderConfig: InteractiveCanvasRenderConfig;
-    appState: InteractiveCanvasAppState;
-    normalizedWidth: number;
-    normalizedHeight: number;
-}) => void;

package/dist/excalidraw/clients.js

@@ -1,6 +1,3 @@
-import { COLOR_CHARCOAL_BLACK, COLOR_VOICE_CALL, COLOR_WHITE, THEME, } from "./constants";
-import { roundRect } from "./renderer/roundRect";
-import { UserIdleState, } from "./types";
 function hashToInteger(id) {
     let hash = 0;
     if (id.length === 0) {
@@ -12,10 +9,14 @@ function hashToInteger(id) {
     }
     return hash;
 }
-export const getClientColor = (socketId, collaborator) => {
+export const getClientColor = (
+/**
+ * any uniquely identifying key, such as user id or socket id
+ */
+id) => {
     // to get more even distribution in case `id` is not uniformly distributed to
     // begin with, we hash it
-    const hash = Math.abs(hashToInteger(collaborator?.id || socketId));
+    const hash = Math.abs(hashToInteger(id));
     // we want to get a multiple of 10 number in the range of 0-360 (in other
     // words a hue value of step size 10). There are 37 such values including 0.
     const hue = (hash % 37) * 10;
@@ -31,151 +32,3 @@ export const getNameInitial = (name) => {
     const firstCodePoint = name?.trim()?.codePointAt(0);
     return (firstCodePoint ? String.fromCodePoint(firstCodePoint) : "?").toUpperCase();
 };
-export const renderRemoteCursors = ({ context, renderConfig, appState, normalizedWidth, normalizedHeight, }) => {
-    // Paint remote pointers
-    for (const [socketId, pointer] of renderConfig.remotePointerViewportCoords) {
-        let { x, y } = pointer;
-        const collaborator = appState.collaborators.get(socketId);
-        x -= appState.offsetLeft;
-        y -= appState.offsetTop;
-        const width = 11;
-        const height = 14;
-        const isOutOfBounds = x < 0 ||
-            x > normalizedWidth - width ||
-            y < 0 ||
-            y > normalizedHeight - height;
-        x = Math.max(x, 0);
-        x = Math.min(x, normalizedWidth - width);
-        y = Math.max(y, 0);
-        y = Math.min(y, normalizedHeight - height);
-        const background = getClientColor(socketId, collaborator);
-        context.save();
-        context.strokeStyle = background;
-        context.fillStyle = background;
-        const userState = renderConfig.remotePointerUserStates.get(socketId);
-        const isInactive = isOutOfBounds ||
-            userState === UserIdleState.IDLE ||
-            userState === UserIdleState.AWAY;
-        if (isInactive) {
-            context.globalAlpha = 0.3;
-        }
-        if (renderConfig.remotePointerButton.get(socketId) === "down") {
-            context.beginPath();
-            context.arc(x, y, 15, 0, 2 * Math.PI, false);
-            context.lineWidth = 3;
-            context.strokeStyle = "#ffffff88";
-            context.stroke();
-            context.closePath();
-            context.beginPath();
-            context.arc(x, y, 15, 0, 2 * Math.PI, false);
-            context.lineWidth = 1;
-            context.strokeStyle = background;
-            context.stroke();
-            context.closePath();
-        }
-        // TODO remove the dark theme color after we stop inverting canvas colors
-        const IS_SPEAKING_COLOR = appState.theme === THEME.DARK ? "#2f6330" : COLOR_VOICE_CALL;
-        const isSpeaking = collaborator?.isSpeaking;
-        if (isSpeaking) {
-            // cursor outline for currently speaking user
-            context.fillStyle = IS_SPEAKING_COLOR;
-            context.strokeStyle = IS_SPEAKING_COLOR;
-            context.lineWidth = 10;
-            context.lineJoin = "round";
-            context.beginPath();
-            context.moveTo(x, y);
-            context.lineTo(x + 0, y + 14);
-            context.lineTo(x + 4, y + 9);
-            context.lineTo(x + 11, y + 8);
-            context.closePath();
-            context.stroke();
-            context.fill();
-        }
-        // Background (white outline) for arrow
-        context.fillStyle = COLOR_WHITE;
-        context.strokeStyle = COLOR_WHITE;
-        context.lineWidth = 6;
-        context.lineJoin = "round";
-        context.beginPath();
-        context.moveTo(x, y);
-        context.lineTo(x + 0, y + 14);
-        context.lineTo(x + 4, y + 9);
-        context.lineTo(x + 11, y + 8);
-        context.closePath();
-        context.stroke();
-        context.fill();
-        // Arrow
-        context.fillStyle = background;
-        context.strokeStyle = background;
-        context.lineWidth = 2;
-        context.lineJoin = "round";
-        context.beginPath();
-        if (isInactive) {
-            context.moveTo(x - 1, y - 1);
-            context.lineTo(x - 1, y + 15);
-            context.lineTo(x + 5, y + 10);
-            context.lineTo(x + 12, y + 9);
-            context.closePath();
-            context.fill();
-        }
-        else {
-            context.moveTo(x, y);
-            context.lineTo(x + 0, y + 14);
-            context.lineTo(x + 4, y + 9);
-            context.lineTo(x + 11, y + 8);
-            context.closePath();
-            context.fill();
-            context.stroke();
-        }
-        const username = renderConfig.remotePointerUsernames.get(socketId) || "";
-        if (!isOutOfBounds && username) {
-            context.font = "600 12px sans-serif"; // font has to be set before context.measureText()
-            const offsetX = (isSpeaking ? x + 0 : x) + width / 2;
-            const offsetY = (isSpeaking ? y + 0 : y) + height + 2;
-            const paddingHorizontal = 5;
-            const paddingVertical = 3;
-            const measure = context.measureText(username);
-            const measureHeight = measure.actualBoundingBoxDescent + measure.actualBoundingBoxAscent;
-            const finalHeight = Math.max(measureHeight, 12);
-            const boxX = offsetX - 1;
-            const boxY = offsetY - 1;
-            const boxWidth = measure.width + 2 + paddingHorizontal * 2 + 2;
-            const boxHeight = finalHeight + 2 + paddingVertical * 2 + 2;
-            if (context.roundRect) {
-                context.beginPath();
-                context.roundRect(boxX, boxY, boxWidth, boxHeight, 8);
-                context.fillStyle = background;
-                context.fill();
-                context.strokeStyle = COLOR_WHITE;
-                context.stroke();
-                if (isSpeaking) {
-                    context.beginPath();
-                    context.roundRect(boxX - 2, boxY - 2, boxWidth + 4, boxHeight + 4, 8);
-                    context.strokeStyle = IS_SPEAKING_COLOR;
-                    context.stroke();
-                }
-            }
-            else {
-                roundRect(context, boxX, boxY, boxWidth, boxHeight, 8, COLOR_WHITE);
-            }
-            context.fillStyle = COLOR_CHARCOAL_BLACK;
-            context.fillText(username, offsetX + paddingHorizontal + 1, offsetY +
-                paddingVertical +
-                measure.actualBoundingBoxAscent +
-                Math.floor((finalHeight - measureHeight) / 2) +
-                2);
-            // draw three vertical bars signalling someone is speaking
-            if (isSpeaking) {
-                context.fillStyle = IS_SPEAKING_COLOR;
-                const barheight = 8;
-                const margin = 8;
-                const gap = 5;
-                context.fillRect(boxX + boxWidth + margin, boxY + (boxHeight / 2 - barheight / 2), 2, barheight);
-                context.fillRect(boxX + boxWidth + margin + gap, boxY + (boxHeight / 2 - (barheight * 2) / 2), 2, barheight * 2);
-                context.fillRect(boxX + boxWidth + margin + gap * 2, boxY + (boxHeight / 2 - barheight / 2), 2, barheight);
-            }
-        }
-        context.restore();
-        context.closePath();
-    }
-};

package/dist/excalidraw/components/App.d.ts

@@ -4,7 +4,7 @@ import { ActionManager } from "../actions/manager";
 import { EXPORT_IMAGE_TYPES } from "../constants";
 import { ExportedElements } from "../data";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement, Ordered } from "../element/types";
+import { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement } from "../element/types";
 import History from "../history";
 import Scene from "../scene/Scene";
 import { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device, FrameNameBoundsCache, SidebarName, SidebarTabName, ToolType, OnUserFollowedPayload } from "../types";
@@ -232,8 +232,8 @@ declare class App extends React.Component<AppProps, AppState> {
     private toggleOverscrollBehavior;
     render(): JSX.Element;
     focusContainer: AppClassProperties["focusContainer"];
-    getSceneElementsIncludingDeleted: () => readonly import("../element/types").OrderedExcalidrawElement[];
-    getSceneElements: () => readonly Ordered<NonDeletedExcalidrawElement>[];
+    getSceneElementsIncludingDeleted: () => readonly ExcalidrawElement[];
+    getSceneElements: () => readonly NonDeletedExcalidrawElement[];
     onInsertElements: (elements: readonly ExcalidrawElement[]) => void;
     onExportImage: (type: keyof typeof EXPORT_IMAGE_TYPES, elements: ExportedElements, opts: {
         exportingFrame: ExcalidrawFrameLikeElement | null;