Merge branch 'master' into improve_copy_styles

# Conflicts:
#	src/tests/regressionTests.test.tsx

.github/workflows/changelog-check.yml

@@ -1,26 +0,0 @@
-name: Changelog in sync for packages
-
-on:
-  push:
-    branches:
-      - master
-  pull_request:
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v1
-
-      - name: Setup Node.js 12.x
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
-
-      - name: Install and run changelog check
-        run: |
-          npm ci
-          npm run changelog:check
-        env:
-          CI: true

package.json

@@ -100,7 +100,6 @@
     "test:other": "npm run prettier -- --list-different",
     "test:typecheck": "tsc",
     "test:update": "npm run test:app -- --updateSnapshot --watchAll=false",
-    "test": "npm run test:app",
-    "changelog:check": "node ./scripts/changelog-check.js"
+    "test": "npm run test:app"
   }
 }

scripts/changelog-check.js

@@ -1,34 +0,0 @@
-const { exec } = require("child_process");
-
-const changeLogCheck = () => {
-  exec(
-    "git diff origin/master --cached --name-only",
-    (error, stdout, stderr) => {
-      if (error || stderr) {
-        process.exit(1);
-      }
-
-      if (!stdout || stdout.includes("packages/excalidraw/CHANGELOG.MD")) {
-        process.exit(0);
-      }
-
-      const onlyNonSrcFilesUpdated = stdout.indexOf("src") < 0;
-      if (onlyNonSrcFilesUpdated) {
-        process.exit(0);
-      }
-
-      const changedFiles = stdout.trim().split("\n");
-      const filesToIgnoreRegex = /src\/excalidraw-app|packages\/utils/;
-
-      const excalidrawPackageFiles = changedFiles.filter((file) => {
-        return file.indexOf("src") >= 0 && !filesToIgnoreRegex.test(file);
-      });
-
-      if (excalidrawPackageFiles.length) {
-        process.exit(1);
-      }
-      process.exit(0);
-    },
-  );
-};
-changeLogCheck();

src/actions/actionStyles.ts

@@ -1,28 +1,110 @@
 import {
   isTextElement,
-  isExcalidrawElement,
   redrawTextBoundingBox,
+  getNonDeletedElements,
 } from "../element";
 import { CODES, KEYS } from "../keys";
 import { register } from "./register";
-import { mutateElement, newElementWith } from "../element/mutateElement";
+import { newElementWith } from "../element/mutateElement";
 import {
-  DEFAULT_FONT_SIZE,
-  DEFAULT_FONT_FAMILY,
-  DEFAULT_TEXT_ALIGN,
-} from "../constants";
+  ExcalidrawElement,
+  ExcalidrawElementPossibleProps,
+} from "../element/types";
+import { AppState } from "../types";
+import {
+  canChangeSharpness,
+  getSelectedElements,
+  hasBackground,
+  hasStroke,
+  hasText,
+} from "../scene";
+import { isLinearElement, isLinearElementType } from "../element/typeChecks";
+
+type AppStateStyles = {
+  [K in AssertSubset<
+    keyof AppState,
+    typeof copyableStyles[number][0]
+  >]: AppState[K];
+};
+
+type ElementStyles = {
+  [K in AssertSubset<
+    keyof ExcalidrawElementPossibleProps,
+    typeof copyableStyles[number][1]
+  >]: ExcalidrawElementPossibleProps[K];
+};
+
+type ElemelementStylesByType = Record<ExcalidrawElement["type"], ElementStyles>;
 
 // `copiedStyles` is exported only for tests.
-export let copiedStyles: string = "{}";
+let COPIED_STYLES: {
+  appStateStyles: Partial<AppStateStyles>;
+  elementStyles: Partial<ElementStyles>;
+  elementStylesByType: Partial<ElemelementStylesByType>;
+} | null = null;
+
+/* [AppState prop, ExcalidrawElement prop, predicate] */
+const copyableStyles = [
+  ["currentItemOpacity", "opacity", () => true],
+  ["currentItemStrokeColor", "strokeColor", () => true],
+  ["currentItemStrokeStyle", "strokeStyle", hasStroke],
+  ["currentItemStrokeWidth", "strokeWidth", hasStroke],
+  ["currentItemRoughness", "roughness", hasStroke],
+  ["currentItemBackgroundColor", "backgroundColor", hasBackground],
+  ["currentItemFillStyle", "fillStyle", hasBackground],
+  ["currentItemStrokeSharpness", "strokeSharpness", canChangeSharpness],
+  ["currentItemLinearStrokeSharpness", "strokeSharpness", isLinearElementType],
+  ["currentItemStartArrowhead", "startArrowhead", isLinearElementType],
+  ["currentItemEndArrowhead", "endArrowhead", isLinearElementType],
+  ["currentItemFontFamily", "fontFamily", hasText],
+  ["currentItemFontSize", "fontSize", hasText],
+  ["currentItemTextAlign", "textAlign", hasText],
+] as const;
+
+const getCommonStyleProps = (
+  elements: readonly ExcalidrawElement[],
+): Exclude<typeof COPIED_STYLES, null> => {
+  const appStateStyles = {} as AppStateStyles;
+  const elementStyles = {} as ElementStyles;
+
+  const elementStylesByType = elements.reduce((acc, element) => {
+    // only use the first element of given type
+    if (!acc[element.type]) {
+      acc[element.type] = {} as ElementStyles;
+      copyableStyles.forEach(([appStateProp, prop, predicate]) => {
+        const value = (element as any)[prop];
+        if (value !== undefined && predicate(element.type)) {
+          if (appStateStyles[appStateProp] === undefined) {
+            (appStateStyles as any)[appStateProp] = value;
+          }
+          if (elementStyles[prop] === undefined) {
+            (elementStyles as any)[prop] = value;
+          }
+          (acc as any)[element.type][prop] = value;
+        }
+      });
+    }
+    return acc;
+  }, {} as ElemelementStylesByType);
+
+  // clone in case we ever make some of the props into non-primitives
+  return JSON.parse(
+    JSON.stringify({ appStateStyles, elementStyles, elementStylesByType }),
+  );
+};
 
 export const actionCopyStyles = register({
   name: "copyStyles",
   perform: (elements, appState) => {
-    const element = elements.find((el) => appState.selectedElementIds[el.id]);
-    if (element) {
-      copiedStyles = JSON.stringify(element);
-    }
+    COPIED_STYLES = getCommonStyleProps(
+      getSelectedElements(getNonDeletedElements(elements), appState),
+    );
+
     return {
+      appState: {
+        ...appState,
+        ...COPIED_STYLES.appStateStyles,
+      },
       commitToHistory: false,
     };
   },
@@ -35,31 +117,49 @@ export const actionCopyStyles = register({
 export const actionPasteStyles = register({
   name: "pasteStyles",
   perform: (elements, appState) => {
-    const pastedElement = JSON.parse(copiedStyles);
-    if (!isExcalidrawElement(pastedElement)) {
+    if (!COPIED_STYLES) {
       return { elements, commitToHistory: false };
     }
+    const getStyle = <T extends ExcalidrawElement, K extends keyof T>(
+      element: T,
+      prop: K,
+    ) => {
+      return (COPIED_STYLES?.elementStylesByType[element.type]?.[
+        prop as keyof ElementStyles
+      ] ??
+        COPIED_STYLES?.elementStyles[prop as keyof ElementStyles] ??
+        element[prop]) as T[K];
+    };
     return {
       elements: elements.map((element) => {
         if (appState.selectedElementIds[element.id]) {
-          const newElement = newElementWith(element, {
-            backgroundColor: pastedElement?.backgroundColor,
-            strokeWidth: pastedElement?.strokeWidth,
-            strokeColor: pastedElement?.strokeColor,
-            strokeStyle: pastedElement?.strokeStyle,
-            fillStyle: pastedElement?.fillStyle,
-            opacity: pastedElement?.opacity,
-            roughness: pastedElement?.roughness,
-          });
-          if (isTextElement(newElement)) {
-            mutateElement(newElement, {
-              fontSize: pastedElement?.fontSize || DEFAULT_FONT_SIZE,
-              fontFamily: pastedElement?.fontFamily || DEFAULT_FONT_FAMILY,
-              textAlign: pastedElement?.textAlign || DEFAULT_TEXT_ALIGN,
+          const commonProps = {
+            backgroundColor: getStyle(element, "backgroundColor"),
+            strokeWidth: getStyle(element, "strokeWidth"),
+            strokeColor: getStyle(element, "strokeColor"),
+            strokeStyle: getStyle(element, "strokeStyle"),
+            fillStyle: getStyle(element, "fillStyle"),
+            opacity: getStyle(element, "opacity"),
+            roughness: getStyle(element, "roughness"),
+            strokeSharpness: getStyle(element, "strokeSharpness"),
+          };
+          if (isTextElement(element)) {
+            const newElement = newElementWith(element, {
+              ...commonProps,
+              fontSize: getStyle(element, "fontSize"),
+              fontFamily: getStyle(element, "fontFamily"),
+              textAlign: getStyle(element, "textAlign"),
             });
             redrawTextBoundingBox(newElement);
+            return newElement;
+          } else if (isLinearElement(element)) {
+            return newElementWith(element, {
+              ...commonProps,
+              startArrowhead: getStyle(element, "startArrowhead"),
+              endArrowhead: getStyle(element, "endArrowhead"),
+            });
           }
-          return newElement;
+          return newElementWith(element, commonProps);
         }
         return element;
       }),

src/components/App.tsx

@@ -351,9 +351,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     const canvasWidth = canvasDOMWidth * canvasScale;
     const canvasHeight = canvasDOMHeight * canvasScale;
 
-    const DEFAULT_PASTE_X = canvasDOMWidth / 2;
-    const DEFAULT_PASTE_Y = canvasDOMHeight / 2;
-
     return (
       <div
         className="excalidraw"
@@ -374,11 +371,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
           onCollabButtonClick={onCollabButtonClick}
           onLockToggle={this.toggleLock}
           onInsertShape={(elements) =>
-            this.addElementsFromPasteOrLibrary(
-              elements,
-              DEFAULT_PASTE_X,
-              DEFAULT_PASTE_Y,
-            )
+            this.addElementsFromPasteOrLibrary(elements)
           }
           zenModeEnabled={zenModeEnabled}
           toggleZenMode={this.toggleZenMode}

src/components/Stats.scss

@@ -6,10 +6,8 @@
   right: 12px;
   font-size: 12px;
   z-index: 999;
-
   h3 {
     margin: 0 24px 8px 0;
-    white-space: nowrap;
   }
 
   .close {
@@ -31,21 +29,9 @@
     }
     tr {
       td:nth-child(2) {
-        min-width: 24px;
+        min-width: 48px;
         text-align: right;
       }
     }
   }
-
-  :root[dir="rtl"] & {
-    left: 12px;
-    right: initial;
-
-    h3 {
-      margin: 0 0 8px 24px;
-    }
-    .close {
-      float: left;
-    }
-  }
 }

src/element/mutateElement.ts

@@ -24,13 +24,13 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
   // (see https://github.com/microsoft/TypeScript/issues/21732)
   const { points } = updates as any;
 
-  if (typeof points !== "undefined") {
+  if (points !== undefined) {
     updates = { ...getSizeFromPoints(points), ...updates };
   }
 
   for (const key in updates) {
     const value = (updates as any)[key];
-    if (typeof value !== "undefined") {
+    if (value !== undefined) {
       if (
         (element as any)[key] === value &&
         // if object, always update in case its deep prop was mutated
@@ -72,9 +72,9 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
   }
 
   if (
-    typeof updates.height !== "undefined" ||
-    typeof updates.width !== "undefined" ||
-    typeof points !== "undefined"
+    updates.height !== undefined ||
+    updates.width !== undefined ||
+    points !== undefined
   ) {
     invalidateShapeForElement(element);
   }
@@ -84,9 +84,12 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
   Scene.getScene(element)?.informMutation();
 };
 
-export const newElementWith = <TElement extends ExcalidrawElement>(
+export const newElementWith = <
+  TElement extends ExcalidrawElement,
+  K extends keyof Omit<TElement, "id" | "version" | "versionNonce">
+>(
   element: TElement,
-  updates: ElementUpdate<TElement>,
+  updates: Pick<TElement, K>,
 ): TElement => ({
   ...element,
   ...updates,

src/element/types.ts

@@ -21,7 +21,7 @@ type _ExcalidrawElementBase = Readonly<{
   strokeWidth: number;
   strokeStyle: StrokeStyle;
   strokeSharpness: StrokeSharpness;
-  roughness: number;
+  roughness: 0 | 1 | 2;
   opacity: number;
   width: number;
   height: number;
@@ -110,3 +110,16 @@ export type ExcalidrawLinearElement = _ExcalidrawElementBase &
     startArrowhead: Arrowhead | null;
     endArrowhead: Arrowhead | null;
   }>;
+
+export type ExcalidrawElementTypes = Pick<ExcalidrawElement, "type">["type"];
+
+/** @private */
+type __ExcalidrawElementPossibleProps_withoutType<T> = T extends any
+  ? { [K in keyof Omit<T, "type">]: T[K] }
+  : never;
+
+/** Do not use for anything unless you really need it for some abstract
+    API types */
+export type ExcalidrawElementPossibleProps = UnionToIntersection<
+  __ExcalidrawElementPossibleProps_withoutType<ExcalidrawElement>
+> & { type: ExcalidrawElementTypes };

src/excalidraw-app/collab/CollabWrapper.tsx

@@ -52,7 +52,7 @@ export interface CollabAPI {
   onPointerUpdate: CollabInstance["onPointerUpdate"];
   initializeSocketClient: CollabInstance["initializeSocketClient"];
   onCollabButtonClick: CollabInstance["onCollabButtonClick"];
-  broadcastScene: CollabInstance["broadcastScene"];
+  broadcastElements: CollabInstance["broadcastElements"];
 }
 
 type ReconciledElements = readonly ExcalidrawElement[] & {
@@ -239,9 +239,11 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
               return;
             case SCENE.INIT: {
               if (!this.portal.socketInitialized) {
-                const { elements, appState } = decryptedData.payload;
-                const reconciledElements = this.reconcileElements(elements);
-                this.handleRemoteSceneUpdate(reconciledElements, appState, {
+                const remoteElements = decryptedData.payload.elements;
+                const reconciledElements = this.reconcileElements(
+                  remoteElements,
+                );
+                this.handleRemoteSceneUpdate(reconciledElements, {
                   init: true,
                 });
                 this.initializeSocket();
@@ -252,7 +254,6 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
             case SCENE.UPDATE:
               this.handleRemoteSceneUpdate(
                 this.reconcileElements(decryptedData.payload.elements),
-                decryptedData.payload.appState,
               );
               break;
             case "MOUSE_LOCATION": {
@@ -322,7 +323,6 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
 
   private handleRemoteSceneUpdate = (
     elements: ReconciledElements,
-    appState: AppState,
     {
       init = false,
       initFromSnapshot = false,
@@ -334,7 +334,6 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
 
     this.excalidrawRef.current!.updateScene({
       elements,
-      appState,
       commitToHistory: !!init,
     });
 
@@ -384,28 +383,22 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
       this.portal.broadcastMouseLocation(payload);
   };
 
-  broadcastScene = (
+  broadcastElements = (
     elements: readonly ExcalidrawElement[],
     state: AppState,
   ) => {
-    const didBackgroundUpdate =
-      this.excalidrawAppState?.viewBackgroundColor !==
-      state.viewBackgroundColor;
     this.excalidrawAppState = state;
     if (
       getSceneVersion(elements) >
-        this.getLastBroadcastedOrReceivedSceneVersion() ||
-      didBackgroundUpdate
+      this.getLastBroadcastedOrReceivedSceneVersion()
     ) {
       this.portal.broadcastScene(
         SCENE.UPDATE,
         getSyncableElements(elements),
         false,
       );
-      if (!didBackgroundUpdate) {
-        this.lastBroadcastedOrReceivedSceneVersion = getSceneVersion(elements);
-        this.queueBroadcastAllElements();
-      }
+      this.lastBroadcastedOrReceivedSceneVersion = getSceneVersion(elements);
+      this.queueBroadcastAllElements();
     }
   };
 
@@ -473,7 +466,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
           onPointerUpdate: this.onPointerUpdate,
           initializeSocketClient: this.initializeSocketClient,
           onCollabButtonClick: this.onCollabButtonClick,
-          broadcastScene: this.broadcastScene,
+          broadcastElements: this.broadcastElements,
         })}
       </>
     );

src/excalidraw-app/collab/Portal.tsx

@@ -111,7 +111,6 @@ class Portal {
       type: sceneType,
       payload: {
         elements: syncableElements,
-        appState: this.app.excalidrawAppState!,
       },
     };
 

src/excalidraw-app/data/index.ts

@@ -40,14 +40,12 @@ export type SocketUpdateDataSource = {
     type: "SCENE_INIT";
     payload: {
       elements: readonly ExcalidrawElement[];
-      appState: AppState;
     };
   };
   SCENE_UPDATE: {
     type: "SCENE_UPDATE";
     payload: {
       elements: readonly ExcalidrawElement[];
-      appState: AppState;
     };
   };
   MOUSE_LOCATION: {

src/excalidraw-app/index.tsx

@@ -256,7 +256,7 @@ function ExcalidrawWrapper(props: { collab: CollabAPI }) {
   ) => {
     saveDebounced(elements, appState);
     if (collab.isCollaborating) {
-      collab.broadcastScene(elements, appState);
+      collab.broadcastElements(elements, appState);
     }
   };
 

src/global.d.ts

@@ -46,6 +46,15 @@ type MarkOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 type MarkRequired<T, RK extends keyof T> = Exclude<T, RK> &
   Required<Pick<T, RK>>;
 
+type UnionToIntersection<T> = (T extends any ? (x: T) => any : never) extends (
+  x: infer R,
+) => any
+  ? R
+  : never;
+
+/** Assert K is a subset of T, and returns K */
+type AssertSubset<T, K extends T> = K;
+
 // PNG encoding/decoding
 // -----------------------------------------------------------------------------
 type TEXtChunk = { name: "tEXt"; data: Uint8Array };

src/packages/excalidraw/CHANGELOG.MD

@@ -1,41 +1,10 @@
 # Changelog
-<!--
-Guidelines for changelog:
-The change should be grouped under one of the below section and must contain PR link.
-- Features: For new features.
-- Fixes: For bug fixes.
-- Chore: Changes for non src files example package.json.
-- Improvements: For any improvements.
-- Refactor: For any refactoring.
--->
 
-## [Unreleased]
+## 0.1.0
 
-### Features
-- Insert Library items in the middle of the screen [#2527](https://github.com/excalidraw/excalidraw/pull/2527)
-- Show shortcut context menu [#2501](https://github.com/excalidraw/excalidraw/pull/2501)
-- Aligns arrowhead schemas [#2517](https://github.com/excalidraw/excalidraw/pull/2517)
-- Add Cut to menus [#2511](https://github.com/excalidraw/excalidraw/pull/2511)
-- More Arrowheads: dot, bar [#2486](https://github.com/excalidraw/excalidraw/pull/2486)
-- Support CSV graphs and improve the look and feel [#2495](https://github.com/excalidraw/excalidraw/pull/2495)
-
-### Fixes
-- Fix Library Menu Layout [#2502](https://github.com/excalidraw/excalidraw/pull/2502)
-
-### Improvements
-- RTL support for the stats dialog [#2530](https://github.com/excalidraw/excalidraw/pull/2530)
-- Expand canvas padding based on zoom. [#2515](https://github.com/excalidraw/excalidraw/pull/2515)
-- Hide shortcuts on pickers for mobile [#2508](https://github.com/excalidraw/excalidraw/pull/2508)
-- Hide stats and scrollToContent-button when mobile menus open [#2509](https://github.com/excalidraw/excalidraw/pull/2509)
-
-### Chore
-- Bump ini from 1.3.5 to 1.3.7 in /src/packages/excalidraw [#2500](https://github.com/excalidraw/excalidraw/pull/2500)
+First release of `@excalidraw/excalidraw`
 
 ## 0.1.1
 
 #### Fix
 - Update the homepage URL so it redirects to correct readme [#2498](https://github.com/excalidraw/excalidraw/pull/2498)
-
-## 0.1.0
-
-First release of `@excalidraw/excalidraw`

src/tests/helpers/api.ts

@@ -81,6 +81,12 @@ export class API {
     verticalAlign?: T extends "text"
       ? ExcalidrawTextElement["verticalAlign"]
       : never;
+    startArrowhead?: T extends "arrow" | "line" | "draw"
+      ? ExcalidrawLinearElement["startArrowhead"]
+      : never;
+    endArrowhead?: T extends "arrow" | "line" | "draw"
+      ? ExcalidrawLinearElement["endArrowhead"]
+      : never;
   }): T extends "arrow" | "line" | "draw"
     ? ExcalidrawLinearElement
     : T extends "text"
@@ -130,8 +136,8 @@ export class API {
       case "draw":
         element = newLinearElement({
           type: type as "arrow" | "line" | "draw",
-          startArrowhead: null,
-          endArrowhead: null,
+          startArrowhead: rest.startArrowhead ?? null,
+          endArrowhead: rest.endArrowhead ?? null,
           ...base,
         });
         break;

src/tests/regressionTests.test.tsx

@@ -1,7 +1,7 @@
 import { queryByText } from "@testing-library/react";
 import React from "react";
 import ReactDOM from "react-dom";
-import { copiedStyles } from "../actions/actionStyles";
+import { getDefaultAppState } from "../appState";
 import { ShortcutName } from "../actions/shortcuts";
 import { ExcalidrawElement } from "../element/types";
 import { setLanguage } from "../i18n";
@@ -775,82 +775,224 @@ describe("regression tests", () => {
     });
   });
 
-  it("selecting 'Copy styles' in context menu copies styles", () => {
-    UI.clickTool("rectangle");
-    mouse.down(10, 10);
-    mouse.up(20, 20);
+  it("copy-styles updates appState defaults", () => {
+    h.app.updateScene({
+      elements: [
+        API.createElement({
+          type: "rectangle",
+          id: "A",
+          x: 0,
+          y: 0,
+          opacity: 90,
+          strokeColor: "#FF0000",
+          strokeStyle: "solid",
+          strokeWidth: 10,
+          roughness: 2,
+          backgroundColor: "#00FF00",
+          fillStyle: "solid",
+          strokeSharpness: "sharp",
+        }),
+        API.createElement({
+          type: "arrow",
+          id: "B",
+          x: 200,
+          y: 200,
+          startArrowhead: "bar",
+          endArrowhead: "bar",
+        }),
+        API.createElement({
+          type: "text",
+          id: "C",
+          x: 200,
+          y: 200,
+          fontFamily: 3,
+          fontSize: 200,
+          textAlign: "center",
+        }),
+      ],
+    });
+
+    h.app.setState({
+      selectedElementIds: { A: true, B: true, C: true },
+    });
+
+    const defaultAppState = getDefaultAppState();
+
+    expect(h.state).toEqual(
+      expect.objectContaining({
+        currentItemOpacity: defaultAppState.currentItemOpacity,
+        currentItemStrokeColor: defaultAppState.currentItemStrokeColor,
+        currentItemStrokeStyle: defaultAppState.currentItemStrokeStyle,
+        currentItemStrokeWidth: defaultAppState.currentItemStrokeWidth,
+        currentItemRoughness: defaultAppState.currentItemRoughness,
+        currentItemBackgroundColor: defaultAppState.currentItemBackgroundColor,
+        currentItemFillStyle: defaultAppState.currentItemFillStyle,
+        currentItemStrokeSharpness: defaultAppState.currentItemStrokeSharpness,
+        currentItemStartArrowhead: defaultAppState.currentItemStartArrowhead,
+        currentItemEndArrowhead: defaultAppState.currentItemEndArrowhead,
+        currentItemFontFamily: defaultAppState.currentItemFontFamily,
+        currentItemFontSize: defaultAppState.currentItemFontSize,
+        currentItemTextAlign: defaultAppState.currentItemTextAlign,
+      }),
+    );
 
     fireEvent.contextMenu(GlobalTestState.canvas, {
       button: 2,
       clientX: 1,
       clientY: 1,
     });
+
     const contextMenu = document.querySelector(".context-menu");
-    expect(copiedStyles).toBe("{}");
     fireEvent.click(queryByText(contextMenu as HTMLElement, "Copy styles")!);
-    expect(copiedStyles).not.toBe("{}");
-    const element = JSON.parse(copiedStyles);
-    expect(element).toEqual(API.getSelectedElement());
+
+    expect(h.state).toEqual(
+      expect.objectContaining({
+        currentItemOpacity: 90,
+        currentItemStrokeColor: "#FF0000",
+        currentItemStrokeStyle: "solid",
+        currentItemStrokeWidth: 10,
+        currentItemRoughness: 2,
+        currentItemBackgroundColor: "#00FF00",
+        currentItemFillStyle: "solid",
+        currentItemStrokeSharpness: "sharp",
+        currentItemStartArrowhead: "bar",
+        currentItemEndArrowhead: "bar",
+        currentItemFontFamily: 3,
+        currentItemFontSize: 200,
+        currentItemTextAlign: "center",
+      }),
+    );
   });
 
-  it("selecting 'Paste styles' in context menu pastes styles", () => {
-    UI.clickTool("rectangle");
-    mouse.down(10, 10);
-    mouse.up(20, 20);
-
-    UI.clickTool("rectangle");
-    mouse.down(10, 10);
-    mouse.up(20, 20);
-
-    // Change some styles of second rectangle
-    clickLabeledElement("Stroke");
-    clickLabeledElement("#c92a2a");
-    clickLabeledElement("Background");
-    clickLabeledElement("#e64980");
-    // Fill style
-    fireEvent.click(screen.getByTitle("Cross-hatch"));
-    // Stroke width
-    fireEvent.click(screen.getByTitle("Bold"));
-    // Stroke style
-    fireEvent.click(screen.getByTitle("Dotted"));
-    // Roughness
-    fireEvent.click(screen.getByTitle("Cartoonist"));
-    // Opacity
-    fireEvent.change(screen.getByLabelText("Opacity"), {
-      target: { value: "60" },
+  it("paste-styles action", () => {
+    h.app.updateScene({
+      elements: [
+        API.createElement({
+          type: "rectangle",
+          id: "A",
+          x: 0,
+          y: 0,
+          opacity: 90,
+          strokeColor: "#FF0000",
+          strokeStyle: "solid",
+          strokeWidth: 10,
+          roughness: 2,
+          backgroundColor: "#00FF00",
+          fillStyle: "solid",
+          strokeSharpness: "sharp",
+        }),
+        API.createElement({
+          type: "arrow",
+          id: "B",
+          x: 0,
+          y: 0,
+          startArrowhead: "bar",
+          endArrowhead: "bar",
+        }),
+        API.createElement({
+          type: "text",
+          id: "C",
+          x: 0,
+          y: 0,
+          fontFamily: 3,
+          fontSize: 200,
+          textAlign: "center",
+        }),
+        API.createElement({
+          type: "rectangle",
+          id: "D",
+          x: 200,
+          y: 200,
+        }),
+        API.createElement({
+          type: "arrow",
+          id: "E",
+          x: 200,
+          y: 200,
+        }),
+        API.createElement({
+          type: "text",
+          id: "F",
+          x: 200,
+          y: 200,
+        }),
+      ],
+    });
+
+    h.app.setState({
+      selectedElementIds: { A: true, B: true, C: true },
     });
 
-    mouse.reset();
-    // Copy styles of second rectangle
     fireEvent.contextMenu(GlobalTestState.canvas, {
       button: 2,
-      clientX: 40,
-      clientY: 40,
+      clientX: 1,
+      clientY: 1,
     });
-    let contextMenu = document.querySelector(".context-menu");
-    fireEvent.click(queryByText(contextMenu as HTMLElement, "Copy styles")!);
-    const secondRect = JSON.parse(copiedStyles);
-    expect(secondRect.id).toBe(h.elements[1].id);
+    fireEvent.click(
+      queryByText(
+        document.querySelector(".context-menu") as HTMLElement,
+        "Copy styles",
+      )!,
+    );
 
-    mouse.reset();
-    // Paste styles to first rectangle
+    h.app.setState({
+      selectedElementIds: { D: true, E: true, F: true },
+    });
     fireEvent.contextMenu(GlobalTestState.canvas, {
       button: 2,
-      clientX: 10,
-      clientY: 10,
+      clientX: 201,
+      clientY: 201,
     });
-    contextMenu = document.querySelector(".context-menu");
-    fireEvent.click(queryByText(contextMenu as HTMLElement, "Paste styles")!);
+    fireEvent.click(
+      queryByText(
+        document.querySelector(".context-menu") as HTMLElement,
+        "Paste styles",
+      )!,
+    );
 
-    const firstRect = API.getSelectedElement();
-    expect(firstRect.id).toBe(h.elements[0].id);
-    expect(firstRect.strokeColor).toBe("#c92a2a");
-    expect(firstRect.backgroundColor).toBe("#e64980");
-    expect(firstRect.fillStyle).toBe("cross-hatch");
-    expect(firstRect.strokeWidth).toBe(2); // Bold: 2
-    expect(firstRect.strokeStyle).toBe("dotted");
-    expect(firstRect.roughness).toBe(2); // Cartoonist: 2
-    expect(firstRect.opacity).toBe(60);
+    const defaultAppState = getDefaultAppState();
+
+    expect(h.elements.find((element) => element.id === "D")).toEqual(
+      expect.objectContaining({
+        opacity: 90,
+        strokeColor: "#FF0000",
+        strokeStyle: "solid",
+        strokeWidth: 10,
+        roughness: 2,
+        backgroundColor: "#00FF00",
+        fillStyle: "solid",
+        strokeSharpness: "sharp",
+      }),
+    );
+    expect(h.elements.find((element) => element.id === "E")).toEqual(
+      expect.objectContaining({
+        opacity: defaultAppState.currentItemOpacity,
+        strokeColor: defaultAppState.currentItemStrokeColor,
+        strokeStyle: defaultAppState.currentItemStrokeStyle,
+        strokeWidth: defaultAppState.currentItemStrokeWidth,
+        roughness: defaultAppState.currentItemRoughness,
+        backgroundColor: "#00FF00",
+        fillStyle: "solid",
+        strokeSharpness: "sharp",
+        startArrowhead: "bar",
+        endArrowhead: "bar",
+      }),
+    );
+    expect(h.elements.find((element) => element.id === "F")).toEqual(
+      expect.objectContaining({
+        opacity: defaultAppState.currentItemOpacity,
+        strokeColor: defaultAppState.currentItemStrokeColor,
+        strokeStyle: defaultAppState.currentItemStrokeStyle,
+        strokeWidth: 10,
+        roughness: 2,
+        backgroundColor: "#00FF00",
+        fillStyle: "solid",
+        strokeSharpness: "sharp",
+        fontFamily: 3,
+        fontSize: 200,
+        textAlign: "center",
+      }),
+    );
   });
 
   it("selecting 'Delete' in context menu deletes element", () => {

src/types.ts

@@ -55,7 +55,7 @@ export type AppState = {
   currentItemFillStyle: ExcalidrawElement["fillStyle"];
   currentItemStrokeWidth: number;
   currentItemStrokeStyle: ExcalidrawElement["strokeStyle"];
-  currentItemRoughness: number;
+  currentItemRoughness: ExcalidrawElement["roughness"];
   currentItemOpacity: number;
   currentItemFontFamily: FontFamily;
   currentItemFontSize: number;