Introduce Shapelock (#480)

* Introduce shape lock

* Format code with prettier

* Do not reset elementLocked on selection change

* Don't set isSelected to true if element is locked

* Don't reset the cursor

* Move reset cursor call to better spot

* Run prettier + lint

src/appState.ts

@@ -9,6 +9,7 @@ export function getDefaultAppState(): AppState {
     resizingElement: null,
     editingElement: null,
     elementType: "selection",
+    elementLocked: false,
     exportBackground: true,
     currentItemStrokeColor: "#000000",
     currentItemBackgroundColor: "transparent",

src/components/LockIcon.tsx

@@ -0,0 +1,59 @@
+import "./ToolIcon.scss";
+
+import React from "react";
+
+type LockIconSize = "s" | "m";
+
+type LockIconProps = {
+  title?: string;
+  name?: string;
+  id?: string;
+  checked: boolean;
+  onChange?(): void;
+  size?: LockIconSize;
+};
+
+const DEFAULT_SIZE: LockIconSize = "m";
+
+const ICONS = {
+  CHECKED: (
+    <svg
+      width="1792"
+      height="1792"
+      viewBox="0 0 1792 1792"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M640 768h512v-192q0-106-75-181t-181-75-181 75-75 181v192zm832 96v576q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-576q0-40 28-68t68-28h32v-192q0-184 132-316t316-132 316 132 132 316v192h32q40 0 68 28t28 68z" />
+    </svg>
+  ),
+  UNCHECKED: (
+    <svg
+      width="1792"
+      height="1792"
+      viewBox="0 0 1792 1792"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M1728 576v256q0 26-19 45t-45 19h-64q-26 0-45-19t-19-45v-256q0-106-75-181t-181-75-181 75-75 181v192h96q40 0 68 28t28 68v576q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-576q0-40 28-68t68-28h672v-192q0-185 131.5-316.5t316.5-131.5 316.5 131.5 131.5 316.5z" />
+    </svg>
+  )
+};
+
+export function LockIcon(props: LockIconProps) {
+  const sizeCn = `ToolIcon_size_${props.size || DEFAULT_SIZE}`;
+
+  return (
+    <label className={`ToolIcon ${sizeCn}`} title={props.title}>
+      <input
+        className="ToolIcon_type_checkbox"
+        type="checkbox"
+        name={props.name}
+        id={props.id}
+        onChange={props.onChange}
+        checked={props.checked}
+      />
+      <div className="ToolIcon__icon">
+        {props.checked ? ICONS.CHECKED : ICONS.UNCHECKED}
+      </div>
+    </label>
+  );
+}

src/components/ToolIcon.scss

@@ -43,7 +43,8 @@
   }
 }
 
-.ToolIcon_type_radio {
+.ToolIcon_type_radio,
+.ToolIcon_type_checkbox {
   position: absolute;
   opacity: 0;
 

src/index.tsx

@@ -77,6 +77,7 @@ import { Island } from "./components/Island";
 import Stack from "./components/Stack";
 import { FixedSideContainer } from "./components/FixedSideContainer";
 import { ToolIcon } from "./components/ToolIcon";
+import { LockIcon } from "./components/LockIcon";
 import { ExportDialog } from "./components/ExportDialog";
 import { withTranslation } from "react-i18next";
 import "./i18n";
@@ -451,6 +452,16 @@ export class App extends React.Component<any, AppState> {
     );
   }
 
+  private renderShapeLock() {
+    const { elementLocked } = this.state;
+    return (
+      <LockIcon
+        checked={elementLocked}
+        onChange={() => this.setState({ elementLocked: !elementLocked })}
+      />
+    );
+  }
+
   private renderShapesSwitcher() {
     const { t } = this.props;
 
@@ -478,6 +489,7 @@ export class App extends React.Component<any, AppState> {
             ></ToolIcon>
           );
         })}
+        {this.renderShapeLock()}
       </>
     );
   }
@@ -1043,7 +1055,8 @@ export class App extends React.Component<any, AppState> {
               const {
                 draggingElement,
                 resizingElement,
-                elementType
+                elementType,
+                elementLocked
               } = this.state;
 
               lastMouseUp = null;
@@ -1068,8 +1081,6 @@ export class App extends React.Component<any, AppState> {
                 elements = elements.filter(el => el.id !== resizingElement.id);
               }
 
-              resetCursor();
-
               // If click occured on already selected element
               // it is needed to remove selection from other elements
               // or if SHIFT or META key pressed remove selection
@@ -1100,14 +1111,18 @@ export class App extends React.Component<any, AppState> {
 
               if (elementType === "selection") {
                 elements = elements.slice(0, -1);
-              } else {
+              } else if (!elementLocked) {
                 draggingElement.isSelected = true;
               }
 
-              this.setState({
-                draggingElement: null,
-                elementType: "selection"
-              });
+              if (!elementLocked) {
+                resetCursor();
+
+                this.setState({
+                  draggingElement: null,
+                  elementType: "selection"
+                });
+              }
 
               history.resumeRecording();
               this.forceUpdate();

src/types.ts

@@ -7,6 +7,7 @@ export type AppState = {
   //  (e.g. text element when typing into the input)
   editingElement: ExcalidrawElement | null;
   elementType: string;
+  elementLocked: boolean;
   exportBackground: boolean;
   currentItemStrokeColor: string;
   currentItemBackgroundColor: string;