feat: sync backgroud color in collab mode

Add guidelines for changelog and group the commits
update the changelog with the latest commits since the last release
Co-authored-by: Lipis <lipiridis@gmail.com>

.github/workflows/changelog-check.yml

@@ -0,0 +1,26 @@
+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,6 +100,7 @@
     "test:other": "npm run prettier -- --list-different",
     "test:typecheck": "tsc",
     "test:update": "npm run test:app -- --updateSnapshot --watchAll=false",
-    "test": "npm run test:app"
+    "test": "npm run test:app",
+    "changelog:check": "node ./scripts/changelog-check.js"
   }
 }

scripts/changelog-check.js

@@ -0,0 +1,34 @@
+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/components/App.tsx

@@ -351,6 +351,9 @@ 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"
@@ -371,7 +374,11 @@ class App extends React.Component<ExcalidrawProps, AppState> {
           onCollabButtonClick={onCollabButtonClick}
           onLockToggle={this.toggleLock}
           onInsertShape={(elements) =>
-            this.addElementsFromPasteOrLibrary(elements)
+            this.addElementsFromPasteOrLibrary(
+              elements,
+              DEFAULT_PASTE_X,
+              DEFAULT_PASTE_Y,
+            )
           }
           zenModeEnabled={zenModeEnabled}
           toggleZenMode={this.toggleZenMode}

src/components/Stats.scss

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

src/excalidraw-app/collab/CollabWrapper.tsx

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

src/excalidraw-app/collab/Portal.tsx

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

src/excalidraw-app/data/index.ts

@@ -40,12 +40,14 @@ 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.broadcastElements(elements, appState);
+      collab.broadcastScene(elements, appState);
     }
   };
 

src/packages/excalidraw/CHANGELOG.MD

@@ -1,10 +1,41 @@
 # 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.
+-->
 
-## 0.1.0
+## [Unreleased]
 
-First release of `@excalidraw/excalidraw`
+### 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)
 
 ## 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`