Add link to the public libraries (#2469)

src/actions/actionDuplicateSelection.tsx

@@ -18,6 +18,7 @@ import {
 import { AppState } from "../types";
 import { fixBindingsAfterDuplication } from "../element/binding";
 import { ActionResult } from "./types";
+import { GRID_SIZE } from "../constants";
 
 export const actionDuplicateSelection = register({
   name: "duplicateSelection",
@@ -93,8 +94,8 @@ const duplicateElements = (
       groupIdMap,
       element,
       {
-        x: element.x + 10,
-        y: element.y + 10,
+        x: element.x + GRID_SIZE / 2,
+        y: element.y + GRID_SIZE / 2,
       },
     );
     oldIdToDuplicatedId.set(element.id, newElement.id);

src/components/LayerUI.scss

@@ -6,6 +6,16 @@
     display: flex;
     align-items: center;
     justify-content: center;
+
+    .browse-libraries {
+      position: absolute;
+      right: 12px;
+      top: 16px;
+      white-space: nowrap;
+      max-width: 140px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
   }
 
   .layer-ui__library-message {

src/components/LayerUI.tsx

@@ -118,6 +118,18 @@ const LibraryMenuItems = ({
   let addedPendingElements = false;
 
   rows.push(
+    <>
+      <a
+        className="browse-libraries"
+        href="https://libraries.excalidraw.com"
+        target="_excalidraw_libraries"
+        onClick={() => {
+          trackEvent(EVENT_EXIT, "libraries");
+        }}
+      >
+        {t("labels.libraries")}
+      </a>
+
       <Stack.Row
         align="center"
         gap={1}
@@ -157,31 +169,32 @@ const LibraryMenuItems = ({
               });
           }}
         />
-    </Stack.Row>,
+      </Stack.Row>
+    </>,
   );
 
   for (let row = 0; row < numRows; row++) {
-    const i = CELLS_PER_ROW * row;
+    const y = CELLS_PER_ROW * row;
     const children = [];
-    for (let j = 0; j < CELLS_PER_ROW; j++) {
+    for (let x = 0; x < CELLS_PER_ROW; x++) {
       const shouldAddPendingElements: boolean =
         pendingElements.length > 0 &&
         !addedPendingElements &&
-        i + j >= library.length;
+        y + x >= library.length;
       addedPendingElements = addedPendingElements || shouldAddPendingElements;
 
       children.push(
-        <Stack.Col key={j}>
+        <Stack.Col key={x}>
           <LibraryUnit
-            elements={library[i + j]}
+            elements={library[y + x]}
             pendingElements={
               shouldAddPendingElements ? pendingElements : undefined
             }
-            onRemoveFromLibrary={onRemoveFromLibrary.bind(null, i + j)}
+            onRemoveFromLibrary={onRemoveFromLibrary.bind(null, y + x)}
             onClick={
               shouldAddPendingElements
                 ? onAddToLibrary.bind(null, pendingElements)
-                : onInsertShape.bind(null, library[i + j])
+                : onInsertShape.bind(null, library[y + x])
             }
           />
         </Stack.Col>,

src/locales/en.json

@@ -75,6 +75,7 @@
     "addToLibrary": "Add to library",
     "removeFromLibrary": "Remove from library",
     "libraryLoadingMessage": "Loading library...",
+    "libraries": "Browse libraries",
     "loadingScene": "Loading scene...",
     "align": "Align",
     "alignTop": "Align top",