Add hideLibraryButton to AppState and change lock button functionality

README.md

@@ -32,6 +32,18 @@ yarn build:umd
 yarn pack
 yarn publish
 ```
+# Alkemio fork of Excalidraw v0.17.0-alkemio-4
+- Added `hideLibraryButton` to the appState to be able to hide the button from outside.
+- Changed the toolbar Lock button behavior. Now it locks/unlocks elements instead of the tool in use
+
+# Alkemio fork of Excalidraw v0.17.0-alkemio-3-beta
+- Changed behavior. Pasting elements is better handled and now it doesn't end up as a big text node with JSON inside.
+
+
+# Alkemio fork of Excalidraw v0.17.0
+
+- Upgraded from Excalidraw v0.16.1 to v0.17.0
+
 
 # Alkemio fork of Excalidraw v0.16.1
 

package.json

@@ -100,7 +100,7 @@
   },
   "homepage": "https://github.com/alkem-io/excalidraw",
   "name": "@alkemio/excalidraw",
-  "version": "0.17.0-alkemio-3-beta",
+  "version": "0.17.0-alkemio-4",
   "prettier": "@excalidraw/prettier-config",
   "private": false,
   "scripts": {

src/appState.ts

@@ -96,6 +96,7 @@ export const getDefaultAppState = (): Omit<
       value: 1 as NormalizedZoomValue,
     },
     viewModeEnabled: false,
+    hideLibraryButton: false,
     pendingImageElementId: null,
     showHyperlinkPopup: false,
     selectedLinearElement: null,
@@ -209,6 +210,7 @@ const APP_STATE_STORAGE_CONF = (<
   zenModeEnabled: { browser: true, export: false, server: false },
   zoom: { browser: true, export: false, server: false },
   viewModeEnabled: { browser: false, export: false, server: false },
+  hideLibraryButton: { browser: true, export: false, server: false },
   pendingImageElementId: { browser: false, export: false, server: false },
   showHyperlinkPopup: { browser: false, export: false, server: false },
   selectedLinearElement: { browser: true, export: false, server: false },

src/components/LayerUI.tsx

@@ -22,7 +22,7 @@ import { FixedSideContainer } from "./FixedSideContainer";
 import { HintViewer } from "./HintViewer";
 import { Island } from "./Island";
 import { LoadingMessage } from "./LoadingMessage";
-import { LockButton } from "./LockButton";
+import { LockElementButton } from "./LockElementButton";
 import { MobileMenu } from "./MobileMenu";
 import { PasteChartDialog } from "./PasteChartDialog";
 import { Section } from "./Section";
@@ -56,6 +56,7 @@ import { mutateElement } from "../element/mutateElement";
 import { ShapeCache } from "../scene/ShapeCache";
 import Scene from "../scene/Scene";
 import { LaserPointerButton } from "./LaserTool/LaserPointerButton";
+import { actionToggleElementLock } from "../actions";
 
 interface LayerUIProps {
   actionManager: ActionManager;
@@ -214,6 +215,15 @@ const LayerUI = ({
     </Section>
   );
 
+  const allElementsLocked = (elementsIds: string[]) => {
+    if (elementsIds.length === 0) {
+      return false;
+    }
+    return elements
+      .filter((element) => elementsIds.includes(element.id))
+      .every((element) => element.locked);
+  };
+
   const renderFixedSideContainer = () => {
     const shouldRenderSelectedShapeActions = showSelectedShapeActions(
       appState,
@@ -262,11 +272,29 @@ const LayerUI = ({
                             title={t("toolBar.penMode")}
                             penDetected={appState.penDetected}
                           />
+                          {/*
+                            Removed:
                           <LockButton
                             checked={appState.activeTool.locked}
                             onChange={onLockToggle}
                             title={t("toolBar.lock")}
                           />
+                          */}
+                          <LockElementButton
+                            disabled={
+                              Object.keys(appState.selectedElementIds)
+                                .length === 0
+                            }
+                            checked={allElementsLocked(
+                              Object.keys(appState.selectedElementIds),
+                            )}
+                            onChange={() =>
+                              actionManager.executeAction(
+                                actionToggleElementLock,
+                              )
+                            }
+                            title={t("toolBar.lockElements")}
+                          />
 
                           <div className="App-toolbar__divider" />
 
@@ -320,6 +348,7 @@ const LayerUI = ({
             <UserList collaborators={appState.collaborators} />
             {renderTopRightUI?.(device.editor.isMobile, appState)}
             {!appState.viewModeEnabled &&
+              !appState.hideLibraryButton &&
               // hide button when sidebar docked
               (!isSidebarDocked ||
                 appState.openSidebar?.name !== DEFAULT_SIDEBAR.name) && (

src/components/LockElementButton.tsx

@@ -0,0 +1,53 @@
+import "./ToolIcon.scss";
+
+import clsx from "clsx";
+import { ToolButtonSize } from "./ToolButton";
+import { LockedIcon, UnlockedIcon } from "./icons";
+
+type LockElementIconProps = {
+  title?: string;
+  name?: string;
+  checked: boolean;
+  disabled?: boolean;
+  onChange?(): void;
+  isMobile?: boolean;
+};
+
+const DEFAULT_SIZE: ToolButtonSize = "medium";
+
+const ICONS = {
+  CHECKED: LockedIcon,
+  UNCHECKED: UnlockedIcon,
+};
+
+export const LockElementButton = (props: LockElementIconProps) => {
+  return (
+    <label
+      className={clsx(
+        "ToolIcon ToolIcon__lock",
+        `ToolIcon_size_${DEFAULT_SIZE}`,
+        {
+          "is-mobile": props.isMobile,
+        },
+        {
+          disabled: props.disabled,
+        },
+      )}
+      title={`${props.title} — Ctrl + Shift + L`}
+    >
+      <input
+        className="ToolIcon_type_checkbox"
+        type="checkbox"
+        name={props.name}
+        onChange={props.onChange}
+        checked={props.checked}
+        disabled={props.disabled}
+        aria-label={props.title}
+        data-testid="toolbar-lock"
+      />
+      <div className="ToolIcon__icon">
+        {props.checked ? ICONS.CHECKED : ICONS.UNCHECKED}
+      </div>
+    </label>
+  );
+};

src/components/ToolIcon.scss

@@ -17,6 +17,10 @@
 
     @include toolbarButtonColorStates;
   }
+    .ToolIcon.disabled {
+      cursor: default;
+      opacity: 0.5;
+    }
 
   .ToolIcon--plain {
     background-color: transparent;

src/data/types.ts

@@ -43,6 +43,7 @@ export interface ImportedDataState {
   > | null;
   scrollToContent?: boolean;
   zoomToFit?: boolean;
+  hideLibraryButton?: boolean;
   libraryItems?: LibraryItems_anyVersion;
   files?: BinaryFiles;
 }

src/locales/en.json

@@ -236,6 +236,7 @@
     "text": "Text",
     "library": "Library",
     "lock": "Keep selected tool active after drawing",
+    "lockElements": "Toggle Lock for selected elements",
     "penMode": "Pen mode - prevent touch",
     "link": "Add/ Update link for a selected shape",
     "eraser": "Eraser",

src/packages/excalidraw/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alkemio/excalidraw",
-  "version": "0.17.0-alkemio-3-beta",
+  "version": "0.17.0-alkemio-4",
   "main": "main.js",
   "types": "types/packages/excalidraw/index.d.ts",
   "files": [

src/types.ts

@@ -261,6 +261,7 @@ export type AppState = {
   theme: Theme;
   gridSize: number | null;
   viewModeEnabled: boolean;
+  hideLibraryButton: boolean;
 
   /** top-most selected groups (i.e. does not include nested groups) */
   selectedGroupIds: { [groupId: string]: boolean };