Merge branch 'ryan-di/new-element-perf' of https://github.com/excalid…

…raw/excalidraw
dwelle · Aug 23, 2024 · 6f0d9b8 · 6f0d9b8
2 parents cc62eca + 3712e4d
commit 6f0d9b8
Show file tree

Hide file tree

Showing 35 changed files with 831 additions and 562 deletions.
diff --git a/excalidraw-app/collab/Portal.tsx b/excalidraw-app/collab/Portal.tsx
@@ -116,20 +116,26 @@ class Portal {
  }
  }
 
- this.collab.excalidrawAPI.updateScene({
- elements: this.collab.excalidrawAPI
- .getSceneElementsIncludingDeleted()
- .map((element) => {
- if (this.collab.fileManager.shouldUpdateImageElementStatus(element)) {
- // this will signal collaborators to pull image data from server
- // (using mutation instead of newElementWith otherwise it'd break
- // in-progress dragging)
- return newElementWith(element, { status: "saved" });
- }
- return element;
- }),
- storeAction: StoreAction.UPDATE,
- });
+ let isChanged = false;
+ const newElements = this.collab.excalidrawAPI
+ .getSceneElementsIncludingDeleted()
+ .map((element) => {
+ if (this.collab.fileManager.shouldUpdateImageElementStatus(element)) {
+ isChanged = true;
+ // this will signal collaborators to pull image data from server
+ // (using mutation instead of newElementWith otherwise it'd break
+ // in-progress dragging)
+ return newElementWith(element, { status: "saved" });
+ }
+ return element;
+ });
+
+ if (isChanged) {
+ this.collab.excalidrawAPI.updateScene({
+ elements: newElements,
+ storeAction: StoreAction.UPDATE,
+ });
+ }
  }, FILE_UPLOAD_TIMEOUT);
 
  broadcastScene = async (

diff --git a/packages/excalidraw/actions/actionFinalize.tsx b/packages/excalidraw/actions/actionFinalize.tsx
@@ -50,7 +50,6 @@ export const actionFinalize = register({
  ...appState,
  cursorButton: "up",
  editingLinearElement: null,
- selectedLinearElement: null,
  },
  storeAction: StoreAction.CAPTURE,
  };
@@ -179,7 +178,7 @@ export const actionFinalize = register({
  newElement: null,
  selectionElement: null,
  multiElement: null,
- editingElement: null,
+ editingTextElement: null,
  startBoundElement: null,
  suggestedBindings: [],
  selectedElementIds:

diff --git a/packages/excalidraw/actions/actionHistory.tsx b/packages/excalidraw/actions/actionHistory.tsx
@@ -21,7 +21,7 @@ const executeHistoryAction = (
  if (
  !appState.multiElement &&
  !appState.resizingElement &&
- !appState.editingElement &&
+ !appState.editingTextElement &&
  !appState.newElement &&
  !appState.selectedElementsAreBeingDragged &&
  !appState.selectionElement &&

diff --git a/packages/excalidraw/actions/actionProperties.tsx b/packages/excalidraw/actions/actionProperties.tsx
@@ -133,7 +133,7 @@ export const changeProperty = (
  return elements.map((element) => {
  if (
  selectedElementIds.get(element.id) ||
- element.id === appState.editingElement?.id
+ element.id === appState.editingTextElement?.id
  ) {
  return callback(element);
  }
@@ -148,13 +148,13 @@ export const getFormValue = function <T extends Primitive>(
  isRelevantElement: true | ((element: ExcalidrawElement) => boolean),
  defaultValue: T | ((isSomeElementSelected: boolean) => T),
 ): T {
- const editingElement = appState.editingElement;
+ const editingTextElement = appState.editingTextElement;
  const nonDeletedElements = getNonDeletedElements(elements);
 
  let ret: T | null = null;
 
- if (editingElement) {
- ret = getAttribute(editingElement);
+ if (editingTextElement) {
+ ret = getAttribute(editingTextElement);
  }
 
  if (!ret) {
@@ -1076,19 +1076,20 @@ export const actionChangeFontFamily = register({
  // open, populate the cache from scratch
  cachedElementsRef.current.clear();
 
- const { editingElement } = appState;
+ const { editingTextElement } = appState;
 
- if (editingElement?.type === "text") {
- // retrieve the latest version from the scene, as `editingElement` isn't mutated
- const latestEditingElement = app.scene.getElement(
- editingElement.id,
+ // still check type to be safe
+ if (editingTextElement?.type === "text") {
+ // retrieve the latest version from the scene, as `editingTextElement` isn't mutated
+ const latesteditingTextElement = app.scene.getElement(
+ editingTextElement.id,
  );
 
  // inside the wysiwyg editor
  cachedElementsRef.current.set(
- editingElement.id,
+ editingTextElement.id,
  newElementWith(
- latestEditingElement || editingElement,
+ latesteditingTextElement || editingTextElement,
  {},
  true,
  ),

diff --git a/packages/excalidraw/appState.ts b/packages/excalidraw/appState.ts
@@ -45,7 +45,7 @@ export const getDefaultAppState = (): Omit<
  cursorButton: "up",
  activeEmbeddable: null,
  newElement: null,
- editingElement: null,
+ editingTextElement: null,
  editingGroupId: null,
  editingLinearElement: null,
  activeTool: {
@@ -166,7 +166,7 @@ const APP_STATE_STORAGE_CONF = (<
  cursorButton: { browser: true, export: false, server: false },
  activeEmbeddable: { browser: false, export: false, server: false },
  newElement: { browser: false, export: false, server: false },
- editingElement: { browser: false, export: false, server: false },
+ editingTextElement: { browser: false, export: false, server: false },
  editingGroupId: { browser: true, export: false, server: false },
  editingLinearElement: { browser: false, export: false, server: false },
  activeTool: { browser: true, export: false, server: false },

diff --git a/packages/excalidraw/components/Actions.tsx b/packages/excalidraw/components/Actions.tsx
@@ -103,7 +103,9 @@ export const SelectedShapeActions = ({
  ) {
  isSingleElementBoundContainer = true;
  }
- const isEditing = Boolean(appState.editingElement);
+ const isEditingTextOrNewElement = Boolean(
+ appState.editingTextElement || appState.newElement,
+ );
  const device = useDevice();
  const isRTL = document.documentElement.getAttribute("dir") === "rtl";
 
@@ -233,7 +235,7 @@ export const SelectedShapeActions = ({
  </div>
  </fieldset>
  )}
- {!isEditing && targetElements.length > 0 && (
+ {!isEditingTextOrNewElement && targetElements.length > 0 && (
  <fieldset>
  <legend>{t("labels.actions")}</legend>
  <div className="buttonList">