fix: Add multiElement-edit finalize action to Desktop (currently only visible in Mobile view) (#4764)

* add finalize action to Desktop UI * Update LayerUI.tsx * add size to panel component * finzalize button style * add finalize button * changed isMobile to DeviceInfo, added isTouchScreen * cleanup * rename deviceInfo to deviceType * rename deviceInfo to deviceType * added updateObject * Update App.tsx
3 years ago · 192debd829
parent 1cfb4dfd8b
commit 192debd829
17 changed files with 138 additions and 61 deletions
--- a/src/actions/actionExport.tsx
+++ b/src/actions/actionExport.tsx
@ -8,7 +8,7 @@ import { DarkModeToggle } from "../components/DarkModeToggle";
 import { loadFromJSON, saveAsJSON } from "../data";
 import { resaveAsImageWithScene } from "../data/resave";
 import { t } from "../i18n";
-import { useIsMobile } from "../components/App";
+import { useDeviceType } from "../components/App";
 import { KEYS } from "../keys";
 import { register } from "./register";
 import { CheckboxItem } from "../components/CheckboxItem";
@ -200,7 +200,7 @@ export const actionSaveFileToDisk = register({
      icon={saveAs}
      title={t("buttons.saveAs")}
      aria-label={t("buttons.saveAs")}
-      showAriaLabel={useIsMobile()}
+      showAriaLabel={useDeviceType().isMobile}
      hidden={!nativeFileSystemSupported}
      onClick={() => updateData(null)}
      data-testid="save-as-button"
@ -243,7 +243,7 @@ export const actionLoadScene = register({
      icon={load}
      title={t("buttons.load")}
      aria-label={t("buttons.load")}
-      showAriaLabel={useIsMobile()}
+      showAriaLabel={useDeviceType().isMobile}
      onClick={updateData}
      data-testid="load-button"
    />
--- a/src/actions/actionFinalize.tsx
+++ b/src/actions/actionFinalize.tsx
@ -165,7 +165,7 @@ export const actionFinalize = register({
        (!appState.draggingElement && appState.multiElement === null))) ||
    ((event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
      appState.multiElement !== null),
-  PanelComponent: ({ appState, updateData }) => (
+  PanelComponent: ({ appState, updateData, data }) => (
    <ToolButton
      type="button"
      icon={done}
@ -173,6 +173,7 @@ export const actionFinalize = register({
      aria-label={t("buttons.done")}
      onClick={updateData}
      visible={appState.multiElement != null}
+      size={data?.size || "medium"}
    />
  ),
 });
--- a/src/components/Actions.tsx
+++ b/src/components/Actions.tsx
@ -3,7 +3,7 @@ import { ActionManager } from "../actions/manager";
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement, PointerType } from "../element/types";
 import { t } from "../i18n";
-import { useIsMobile } from "../components/App";
+import { useDeviceType } from "../components/App";
 import {
  canChangeSharpness,
  canHaveArrowheads,
@ -46,7 +46,7 @@ export const SelectedShapeActions = ({
    isSingleElementBoundContainer = true;
  }
  const isEditing = Boolean(appState.editingElement);
-  const isMobile = useIsMobile();
+  const deviceType = useDeviceType();
  const isRTL = document.documentElement.getAttribute("dir") === "rtl";

  const showFillIcons =
@ -168,8 +168,8 @@ export const SelectedShapeActions = ({
        <fieldset>
          <legend>{t("labels.actions")}</legend>
          <div className="buttonList">
-            {!isMobile && renderAction("duplicateSelection")}
-            {!isMobile && renderAction("deleteSelectedElements")}
+            {!deviceType.isMobile && renderAction("duplicateSelection")}
+            {!deviceType.isMobile && renderAction("deleteSelectedElements")}
            {renderAction("group")}
            {renderAction("ungroup")}
            {targetElements.length === 1 && renderAction("hyperlink")}
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@ -195,6 +195,7 @@ import {
  LibraryItems,
  PointerDownState,
  SceneData,
+  DeviceType,
 } from "../types";
 import {
  debounce,
@ -214,6 +215,7 @@ import {
  withBatchedUpdates,
  wrapEvent,
  withBatchedUpdatesThrottled,
+  updateObject,
  setEraserCursor,
 } from "../utils";
 import ContextMenu, { ContextMenuOption } from "./ContextMenu";
@ -253,8 +255,12 @@ import {
  isLocalLink,
 } from "../element/Hyperlink";

-const IsMobileContext = React.createContext(false);
-export const useIsMobile = () => useContext(IsMobileContext);
+const defaultDeviceTypeContext: DeviceType = {
+  isMobile: false,
+  isTouchScreen: false,
+};
+const DeviceTypeContext = React.createContext(defaultDeviceTypeContext);
+export const useDeviceType = () => useContext(DeviceTypeContext);
 const ExcalidrawContainerContext = React.createContext<{
  container: HTMLDivElement | null;
  id: string | null;
@ -286,7 +292,10 @@ class App extends React.Component<AppProps, AppState> {
  rc: RoughCanvas | null = null;
  unmounted: boolean = false;
  actionManager: ActionManager;
-  isMobile = false;
+  deviceType: DeviceType = {
+    isMobile: false,
+    isTouchScreen: false,
+  };
  detachIsMobileMqHandler?: () => void;

  private excalidrawContainerRef = React.createRef<HTMLDivElement>();
@ -468,7 +477,7 @@ class App extends React.Component<AppProps, AppState> {
      <div
        className={clsx("excalidraw excalidraw-container", {
          "excalidraw--view-mode": viewModeEnabled,
-          "excalidraw--mobile": this.isMobile,
+          "excalidraw--mobile": this.deviceType.isMobile,
        })}
        ref={this.excalidrawContainerRef}
        onDrop={this.handleAppOnDrop}
@ -480,7 +489,7 @@ class App extends React.Component<AppProps, AppState> {
        <ExcalidrawContainerContext.Provider
          value={this.excalidrawContainerValue}
        >
-          <IsMobileContext.Provider value={this.isMobile}>
+          <DeviceTypeContext.Provider value={this.deviceType}>
            <LayerUI
              canvas={this.canvas}
              appState={this.state}
@ -547,7 +556,7 @@ class App extends React.Component<AppProps, AppState> {
              />
            )}
            <main>{this.renderCanvas()}</main>
-          </IsMobileContext.Provider>
+          </DeviceTypeContext.Provider>
        </ExcalidrawContainerContext.Provider>
      </div>
    );
@ -891,9 +900,12 @@ class App extends React.Component<AppProps, AppState> {
        // ---------------------------------------------------------------------
        const { width, height } =
          this.excalidrawContainerRef.current!.getBoundingClientRect();
-        this.isMobile =
-          width < MQ_MAX_WIDTH_PORTRAIT ||
-          (height < MQ_MAX_HEIGHT_LANDSCAPE && width < MQ_MAX_WIDTH_LANDSCAPE);
+        this.deviceType = updateObject(this.deviceType, {
+          isMobile:
+            width < MQ_MAX_WIDTH_PORTRAIT ||
+            (height < MQ_MAX_HEIGHT_LANDSCAPE &&
+              width < MQ_MAX_WIDTH_LANDSCAPE),
+        });
        // refresh offsets
        // ---------------------------------------------------------------------
        this.updateDOMRect();
@ -903,7 +915,11 @@ class App extends React.Component<AppProps, AppState> {
      const mediaQuery = window.matchMedia(
        `(max-width: ${MQ_MAX_WIDTH_PORTRAIT}px), (max-height: ${MQ_MAX_HEIGHT_LANDSCAPE}px) and (max-width: ${MQ_MAX_WIDTH_LANDSCAPE}px)`,
      );
-      const handler = () => (this.isMobile = mediaQuery.matches);
+      const handler = () => {
+        this.deviceType = updateObject(this.deviceType, {
+          isMobile: mediaQuery.matches,
+        });
+      };
      mediaQuery.addListener(handler);
      this.detachIsMobileMqHandler = () => mediaQuery.removeListener(handler);
    }
@ -1205,7 +1221,7 @@ class App extends React.Component<AppProps, AppState> {
        theme: this.state.theme,
        imageCache: this.imageCache,
        isExporting: false,
-        renderScrollbars: !this.isMobile,
+        renderScrollbars: !this.deviceType.isMobile,
      },
    );

@ -2391,7 +2407,7 @@ class App extends React.Component<AppProps, AppState> {
          element,
          this.state,
          [scenePointer.x, scenePointer.y],
-          this.isMobile,
+          this.deviceType.isMobile,
        ) &&
        index <= hitElementIndex
      );
@ -2424,7 +2440,7 @@ class App extends React.Component<AppProps, AppState> {
      this.hitLinkElement!,
      this.state,
      [lastPointerDownCoords.x, lastPointerDownCoords.y],
-      this.isMobile,
+      this.deviceType.isMobile,
    );
    const lastPointerUpCoords = viewportCoordsToSceneCoords(
      this.lastPointerUp!,
@ -2434,7 +2450,7 @@ class App extends React.Component<AppProps, AppState> {
      this.hitLinkElement!,
      this.state,
      [lastPointerUpCoords.x, lastPointerUpCoords.y],
-      this.isMobile,
+      this.deviceType.isMobile,
    );
    if (lastPointerDownHittingLinkIcon && lastPointerUpHittingLinkIcon) {
      const url = this.hitLinkElement.link;
@ -2856,6 +2872,13 @@ class App extends React.Component<AppProps, AppState> {
      });
    }

+    if (
+      !this.deviceType.isTouchScreen &&
+      ["pen", "touch"].includes(event.pointerType)
+    ) {
+      this.deviceType = updateObject(this.deviceType, { isTouchScreen: true });
+    }
+
    if (isPanning) {
      return;
    }
@ -2986,9 +3009,7 @@ class App extends React.Component<AppProps, AppState> {
    event: React.PointerEvent<HTMLCanvasElement>,
  ) => {
    this.lastPointerUp = event;
-    const isTouchScreen = ["pen", "touch"].includes(event.pointerType);
-
-    if (isTouchScreen) {
+    if (this.deviceType.isTouchScreen) {
      const scenePointer = viewportCoordsToSceneCoords(
        { clientX: event.clientX, clientY: event.clientY },
        this.state,
@ -3006,7 +3027,7 @@ class App extends React.Component<AppProps, AppState> {
      this.hitLinkElement &&
      !this.state.selectedElementIds[this.hitLinkElement.id]
    ) {
-      this.redirectToLink(event, isTouchScreen);
+      this.redirectToLink(event, this.deviceType.isTouchScreen);
    }

    this.removePointer(event);
@ -3376,7 +3397,7 @@ class App extends React.Component<AppProps, AppState> {
              pointerDownState.hit.element,
              this.state,
              [pointerDownState.origin.x, pointerDownState.origin.y],
-              this.isMobile,
+              this.deviceType.isMobile,
            )
          ) {
            return false;
@ -5407,7 +5428,7 @@ class App extends React.Component<AppProps, AppState> {
      } else {
        ContextMenu.push({
          options: [
-            this.isMobile &&
+            this.deviceType.isMobile &&
              navigator.clipboard && {
                name: "paste",
                perform: (elements, appStates) => {
@ -5418,7 +5439,7 @@ class App extends React.Component<AppProps, AppState> {
                },
                contextItemLabel: "labels.paste",
              },
-            this.isMobile && navigator.clipboard && separator,
+            this.deviceType.isMobile && navigator.clipboard && separator,
            probablySupportsClipboardBlob &&
              elements.length > 0 &&
              actionCopyAsPng,
@ -5464,9 +5485,9 @@ class App extends React.Component<AppProps, AppState> {
      } else {
        ContextMenu.push({
          options: [
-            this.isMobile && actionCut,
-            this.isMobile && navigator.clipboard && actionCopy,
-            this.isMobile &&
+            this.deviceType.isMobile && actionCut,
+            this.deviceType.isMobile && navigator.clipboard && actionCopy,
+            this.deviceType.isMobile &&
              navigator.clipboard && {
                name: "paste",
                perform: (elements, appStates) => {
@ -5477,7 +5498,7 @@ class App extends React.Component<AppProps, AppState> {
                },
                contextItemLabel: "labels.paste",
              },
-            this.isMobile && separator,
+            this.deviceType.isMobile && separator,
            ...options,
            separator,
            actionCopyStyles,
--- a/src/components/ClearCanvas.tsx
+++ b/src/components/ClearCanvas.tsx
@ -1,6 +1,6 @@
 import { useState } from "react";
 import { t } from "../i18n";
-import { useIsMobile } from "./App";
+import { useDeviceType } from "./App";
 import { trash } from "./icons";
 import { ToolButton } from "./ToolButton";

@ -19,7 +19,7 @@ const ClearCanvas = ({ onConfirm }: { onConfirm: () => void }) => {
        icon={trash}
        title={t("buttons.clearReset")}
        aria-label={t("buttons.clearReset")}
-        showAriaLabel={useIsMobile()}
+        showAriaLabel={useDeviceType().isMobile}
        onClick={toggleDialog}
        data-testid="clear-canvas-button"
      />
--- a/src/components/CollabButton.tsx
+++ b/src/components/CollabButton.tsx
@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { ToolButton } from "./ToolButton";
 import { t } from "../i18n";
-import { useIsMobile } from "../components/App";
+import { useDeviceType } from "../components/App";
 import { users } from "./icons";

 import "./CollabButton.scss";
@ -26,7 +26,7 @@ const CollabButton = ({
        type="button"
        title={t("labels.liveCollaboration")}
        aria-label={t("labels.liveCollaboration")}
-        showAriaLabel={useIsMobile()}
+        showAriaLabel={useDeviceType().isMobile}
      >
        {collaboratorCount > 0 && (
          <div className="CollabButton-collaborators">{collaboratorCount}</div>
--- a/src/components/Dialog.tsx
+++ b/src/components/Dialog.tsx
@ -2,7 +2,7 @@ import clsx from "clsx";
 import React, { useEffect, useState } from "react";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { t } from "../i18n";
-import { useExcalidrawContainer, useIsMobile } from "../components/App";
+import { useExcalidrawContainer, useDeviceType } from "../components/App";
 import { KEYS } from "../keys";
 import "./Dialog.scss";
 import { back, close } from "./icons";
@ -94,7 +94,7 @@ export const Dialog = (props: DialogProps) => {
            onClick={onClose}
            aria-label={t("buttons.close")}
          >
-            {useIsMobile() ? back : close}
+            {useDeviceType().isMobile ? back : close}
          </button>
        </h2>
        <div className="Dialog__content">{props.children}</div>
--- a/src/components/ImageExportDialog.tsx
+++ b/src/components/ImageExportDialog.tsx
@ -6,7 +6,7 @@ import { canvasToBlob } from "../data/blob";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { CanvasError } from "../errors";
 import { t } from "../i18n";
-import { useIsMobile } from "./App";
+import { useDeviceType } from "./App";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { exportToCanvas } from "../scene/export";
 import { AppState, BinaryFiles } from "../types";
@ -250,7 +250,7 @@ export const ImageExportDialog = ({
        icon={exportImage}
        type="button"
        aria-label={t("buttons.exportImage")}
-        showAriaLabel={useIsMobile()}
+        showAriaLabel={useDeviceType().isMobile}
        title={t("buttons.exportImage")}
      />
      {modalIsShown && (
--- a/src/components/JSONExportDialog.tsx
+++ b/src/components/JSONExportDialog.tsx
@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { ActionsManagerInterface } from "../actions/types";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import { useIsMobile } from "./App";
+import { useDeviceType } from "./App";
 import { AppState, ExportOpts, BinaryFiles } from "../types";
 import { Dialog } from "./Dialog";
 import { exportFile, exportToFileIcon, link } from "./icons";
@ -114,7 +114,7 @@ export const JSONExportDialog = ({
        icon={exportFile}
        type="button"
        aria-label={t("buttons.export")}
-        showAriaLabel={useIsMobile()}
+        showAriaLabel={useDeviceType().isMobile}
        title={t("buttons.export")}
      />
      {modalIsShown && (
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@ -6,7 +6,6 @@ import { exportCanvas } from "../data";
 import { isTextElement, showSelectedShapeActions } from "../element";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { Language, t } from "../i18n";
-import { useIsMobile } from "../components/App";
 import { calculateScrollCenter, getSelectedElements } from "../scene";
 import { ExportType } from "../scene/types";
 import { AppProps, AppState, ExcalidrawProps, BinaryFiles } from "../types";
@ -37,6 +36,7 @@ import { LibraryMenu } from "./LibraryMenu";
 import "./LayerUI.scss";
 import "./Toolbar.scss";
 import { PenModeButton } from "./PenModeButton";
+import { useDeviceType } from "../components/App";

 interface LayerUIProps {
  actionManager: ActionManager;
@ -95,7 +95,7 @@ const LayerUI = ({
  id,
  onImageAction,
 }: LayerUIProps) => {
-  const isMobile = useIsMobile();
+  const deviceType = useDeviceType();

  const renderJSONExportDialog = () => {
    if (!UIOptions.canvasActions.export) {
@ -338,7 +338,7 @@ const LayerUI = ({
                      <HintViewer
                        appState={appState}
                        elements={elements}
-                        isMobile={isMobile}
+                        isMobile={deviceType.isMobile}
                      />
                      {heading}
                      <Stack.Row gap={1}>
@ -389,7 +389,7 @@ const LayerUI = ({
                    </Tooltip>
                  ))}
            </UserList>
-            {renderTopRightUI?.(isMobile, appState)}
+            {renderTopRightUI?.(deviceType.isMobile, appState)}
          </div>
        </div>
      </FixedSideContainer>
@ -440,6 +440,18 @@ const LayerUI = ({
                  </div>
                </>
              )}
+              {!viewModeEnabled &&
+                appState.multiElement &&
+                deviceType.isTouchScreen && (
+                  <div
+                    className={clsx("finalize-button zen-mode-transition", {
+                      "layer-ui__wrapper__footer-left--transition-left":
+                        zenModeEnabled,
+                    })}
+                  >
+                    {actionManager.renderAction("finalize", { size: "small" })}
+                  </div>
+                )}
            </Section>
          </Stack.Col>
        </div>
@ -507,7 +519,7 @@ const LayerUI = ({
    </>
  );

-  return isMobile ? (
+  return deviceType.isMobile ? (
    <>
      {dialogs}
      <MobileMenu
--- a/src/components/LibraryMenuItems.tsx
+++ b/src/components/LibraryMenuItems.tsx
@ -12,7 +12,7 @@ import {
  LibraryItems,
 } from "../types";
 import { muteFSAbortError } from "../utils";
-import { useIsMobile } from "./App";
+import { useDeviceType } from "./App";
 import ConfirmDialog from "./ConfirmDialog";
 import { exportToFileIcon, load, publishIcon, trash } from "./icons";
 import { LibraryUnit } from "./LibraryUnit";
@ -85,7 +85,7 @@ const LibraryMenuItems = ({

  const [showRemoveLibAlert, setShowRemoveLibAlert] = useState(false);

-  const isMobile = useIsMobile();
+  const isMobile = useDeviceType().isMobile;

  const renderLibraryActions = () => {
    const itemsSelected = !!selectedItems.length;
--- a/src/components/LibraryUnit.tsx
+++ b/src/components/LibraryUnit.tsx
@ -2,7 +2,7 @@ import clsx from "clsx";
 import oc from "open-color";
 import { useEffect, useRef, useState } from "react";
 import { MIME_TYPES } from "../constants";
-import { useIsMobile } from "../components/App";
+import { useDeviceType } from "../components/App";
 import { exportToSvg } from "../scene/export";
 import { BinaryFiles, LibraryItem } from "../types";
 import "./LibraryUnit.scss";
@ -66,7 +66,7 @@ export const LibraryUnit = ({
  }, [elements, files]);

  const [isHovered, setIsHovered] = useState(false);
-  const isMobile = useIsMobile();
+  const isMobile = useDeviceType().isMobile;
  const adder = isPending && (
    <div className="library-unit__adder">{PLUS_ICON}</div>
  );
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@ -4,7 +4,7 @@ import React, { useState, useLayoutEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import clsx from "clsx";
 import { KEYS } from "../keys";
-import { useExcalidrawContainer, useIsMobile } from "./App";
+import { useExcalidrawContainer, useDeviceType } from "./App";
 import { AppState } from "../types";
 import { THEME } from "../constants";

@ -59,17 +59,17 @@ export const Modal = (props: {
 const useBodyRoot = (theme: AppState["theme"]) => {
  const [div, setDiv] = useState<HTMLDivElement | null>(null);

-  const isMobile = useIsMobile();
-  const isMobileRef = useRef(isMobile);
-  isMobileRef.current = isMobile;
+  const deviceType = useDeviceType();
+  const isMobileRef = useRef(deviceType.isMobile);
+  isMobileRef.current = deviceType.isMobile;

  const { container: excalidrawContainer } = useExcalidrawContainer();

  useLayoutEffect(() => {
    if (div) {
-      div.classList.toggle("excalidraw--mobile", isMobile);
+      div.classList.toggle("excalidraw--mobile", deviceType.isMobile);
    }
-  }, [div, isMobile]);
+  }, [div, deviceType.isMobile]);

  useLayoutEffect(() => {
    const isDarkTheme =
--- a/src/components/Stats.tsx
+++ b/src/components/Stats.tsx
@ -2,7 +2,7 @@ import React from "react";
 import { getCommonBounds } from "../element/bounds";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import { useIsMobile } from "../components/App";
+import { useDeviceType } from "../components/App";
 import { getTargetElements } from "../scene";
 import { AppState, ExcalidrawProps } from "../types";
 import { close } from "./icons";
@ -16,13 +16,13 @@ export const Stats = (props: {
  onClose: () => void;
  renderCustomStats: ExcalidrawProps["renderCustomStats"];
 }) => {
-  const isMobile = useIsMobile();
+  const deviceType = useDeviceType();

  const boundingBox = getCommonBounds(props.elements);
  const selectedElements = getTargetElements(props.elements, props.appState);
  const selectedBoundingBox = getCommonBounds(selectedElements);

-  if (isMobile && props.appState.openMenu) {
+  if (deviceType.isMobile && props.appState.openMenu) {
    return null;
  }

--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@ -477,6 +477,15 @@
    font-family: var(--ui-font);
  }

+  .finalize-button {
+    display: grid;
+    grid-auto-flow: column;
+    gap: 0.4em;
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-inline-start: 0.6em;
+  }
+
  .undo-redo-buttons,
  .eraser-buttons {
    display: grid;
--- a/src/types.ts
+++ b/src/types.ts
@ -408,3 +408,8 @@ export type ExcalidrawImperativeAPI = {
  ready: true;
  id: string;
 };
+
+export type DeviceType = {
+  isMobile: boolean;
+  isTouchScreen: boolean;
+};
--- a/src/utils.ts
+++ b/src/utils.ts
@ -583,3 +583,32 @@ export const wrapEvent = <T extends Event>(name: EVENT, nativeEvent: T) => {
    cancelable: true,
  });
 };
+
+export const updateObject = <T extends Record<string, any>>(
+  obj: T,
+  updates: Partial<T>,
+): T => {
+  let didChange = false;
+  for (const key in updates) {
+    const value = (updates as any)[key];
+    if (typeof value !== "undefined") {
+      if (
+        (obj as any)[key] === value &&
+        // if object, always update because its attrs could have changed
+        (typeof value !== "object" || value === null)
+      ) {
+        continue;
+      }
+      didChange = true;
+    }
+  }
+
+  if (!didChange) {
+    return obj;
+  }
+
+  return {
+    ...obj,
+    ...updates,
+  };
+};