Show a Clone button instead of Pan on Mobile

Show clone button on desktop when space permits
raimohanska · Sep 18, 2023 · 34f71ec · 34f71ec
1 parent 4c2892f
commit 34f71ec
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 27 deletions.
diff --git a/frontend/src/board/item-duplicate.ts b/frontend/src/board/item-duplicate.ts
@@ -8,10 +8,13 @@ import { controlKey, installKeyboardShortcut } from "./keyboard-shortcuts"
 
 export function itemDuplicateHandler(board: L.Property<Board>, dispatch: Dispatch, focus: L.Atom<BoardFocus>) {
     installKeyboardShortcut(controlKey("d"), () => {
-        const currentBoard = board.get()
-        const itemsAndConnections = findSelectedItemsAndConnections(focus.get(), currentBoard)
-        const { toCreate, toSelect, connections } = makeCopies(itemsAndConnections, 1, 1)
-        dispatch({ action: "item.add", boardId: currentBoard.id, items: toCreate, connections })
-        focus.set({ status: "selected", itemIds: new Set(toSelect.map((it) => it.id)), connectionIds: emptySet() })
+        dispatchDuplication(focus, board.get(), dispatch)
     })
 }
+
+export function dispatchDuplication(focus: L.Atom<BoardFocus>, currentBoard: Board, dispatch: Dispatch) {
+    const itemsAndConnections = findSelectedItemsAndConnections(focus.get(), currentBoard)
+    const { toCreate, toSelect, connections } = makeCopies(itemsAndConnections, 1, 1)
+    dispatch({ action: "item.add", boardId: currentBoard.id, items: toCreate, connections })
+    focus.set({ status: "selected", itemIds: new Set(toSelect.map((it) => it.id)), connectionIds: emptySet() })
+}
diff --git a/frontend/src/board/toolbars/MainToolBar.tsx b/frontend/src/board/toolbars/MainToolBar.tsx
@@ -14,6 +14,7 @@ import { ToolController } from "../tool-selection"
 import { IS_TOUCHSCREEN } from "../touchScreen"
 import { PaletteView } from "./PaletteView"
 import { ToolSelector } from "./ToolSelector"
+import { dispatchDuplication } from "../item-duplicate"
 
 export const MainToolBar = ({
     coordinateHelper,
@@ -111,9 +112,10 @@ export const MainToolBar = ({
         >
             <PaletteView {...{ latestNote, addItem: onAdd, focus, tool: toolController.tool }} />
             <ToolSelector {...{ toolController }} />
-            {<DeleteIcon {...{ focus, dispatch, board }} />}
-            {<UndoToolIcon {...{ boardStore, dispatch }} />}
-            {<RedoToolIcon {...{ boardStore, dispatch }} />}
+            <DeleteIcon {...{ focus, dispatch, board }} />
+            <DuplicateIcon {...{ focus, dispatch, board }} />
+            <UndoToolIcon {...{ boardStore, dispatch }} />
+            <RedoToolIcon {...{ boardStore, dispatch }} />
         </div>
     )
 }
@@ -169,3 +171,40 @@ const DeleteIcon = ({ focus, board, dispatch }: DeleteProps) => {
         </span>
     )
 }
+
+const DuplicateIcon = ({ focus, board, dispatch }: DeleteProps) => {
+    const enabled = L.view(focus, (f) => getSelectedConnectionIds(f).size > 0 || getSelectedItemIds(f).size > 0)
+    const duplicateItems = () => dispatchDuplication(focus, board.get(), dispatch)
+    return (
+        <span
+            className="tool duplicate"
+            title="Clone selected item(s)"
+            onMouseDown={duplicateItems}
+            onTouchStart={duplicateItems}
+        >
+            <span className={L.view(enabled, (e) => (e ? "icon" : "icon disabled"))}>
+                <svg viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <title>Make a copy</title>
+                    <rect
+                        x="6.56582"
+                        y="5.86245"
+                        width="14.0013"
+                        height="14.0013"
+                        rx="1.4"
+                        fill="currentColor"
+                        fill-opacity="0.1"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                    />
+                    <path
+                        d="M3.6805 15.7398H3.18848C2.08391 15.7398 1.18848 14.8444 1.18848 13.7398V3.18433C1.18848 2.07976 2.08391 1.18433 3.18848 1.18433H13.8317C14.9363 1.18433 15.8317 2.07976 15.8317 3.18433V3.76324"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                        stroke-linecap="round"
+                    />
+                </svg>
+            </span>
+            <span className="text">Clone</span>
+        </span>
+    )
+}
diff --git a/frontend/src/board/toolbars/ToolSelector.tsx b/frontend/src/board/toolbars/ToolSelector.tsx
@@ -24,25 +24,27 @@ export const ToolSelector = ({ toolController }: { toolController: ToolControlle
                     }}
                 />
             )}
-            <ToolIcon
-                {...{
-                    name: "pan",
-                    tooltip: "Pan tool",
-                    currentTool: tool,
-                    svg: (c) => (
-                        <svg viewBox="0 0 34 35" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path
-                                d="M17.5657 0.934315C17.2533 0.621895 16.7467 0.621895 16.4343 0.934315L11.3431 6.02548C11.0307 6.3379 11.0307 6.84443 11.3431 7.15685C11.6556 7.46927 12.1621 7.46927 12.4745 7.15685L17 2.63137L21.5255 7.15685C21.8379 7.46927 22.3444 7.46927 22.6569 7.15685C22.9693 6.84443 22.9693 6.3379 22.6569 6.02548L17.5657 0.934315ZM16.4343 34.0657C16.7467 34.3781 17.2533 34.3781 17.5657 34.0657L22.6569 28.9745C22.9693 28.6621 22.9693 28.1556 22.6569 27.8431C22.3444 27.5307 21.8379 27.5307 21.5255 27.8431L17 32.3686L12.4745 27.8431C12.1621 27.5307 11.6556 27.5307 11.3431 27.8431C11.0307 28.1556 11.0307 28.6621 11.3431 28.9745L16.4343 34.0657ZM16.2 1.5V33.5H17.8V1.5H16.2Z"
-                                fill={c}
-                            />
-                            <path
-                                d="M33.5657 18.0657C33.8781 17.7533 33.8781 17.2467 33.5657 16.9343L28.4745 11.8431C28.1621 11.5307 27.6556 11.5307 27.3431 11.8431C27.0307 12.1556 27.0307 12.6621 27.3431 12.9745L31.8686 17.5L27.3431 22.0255C27.0307 22.3379 27.0307 22.8444 27.3431 23.1569C27.6556 23.4693 28.1621 23.4693 28.4745 23.1569L33.5657 18.0657ZM0.434315 16.9343C0.121895 17.2467 0.121895 17.7533 0.434315 18.0657L5.52548 23.1569C5.8379 23.4693 6.34443 23.4693 6.65685 23.1569C6.96927 22.8444 6.96927 22.3379 6.65685 22.0255L2.13137 17.5L6.65685 12.9745C6.96927 12.6621 6.96927 12.1556 6.65685 11.8431C6.34443 11.5307 5.8379 11.5307 5.52548 11.8431L0.434315 16.9343ZM33 16.7L1 16.7L1 18.3L33 18.3L33 16.7Z"
-                                fill={c}
-                            />
-                        </svg>
-                    ),
-                }}
-            />
+            {!IS_TOUCHSCREEN && (
+                <ToolIcon
+                    {...{
+                        name: "pan",
+                        tooltip: "Pan tool",
+                        currentTool: tool,
+                        svg: (c) => (
+                            <svg viewBox="0 0 34 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M17.5657 0.934315C17.2533 0.621895 16.7467 0.621895 16.4343 0.934315L11.3431 6.02548C11.0307 6.3379 11.0307 6.84443 11.3431 7.15685C11.6556 7.46927 12.1621 7.46927 12.4745 7.15685L17 2.63137L21.5255 7.15685C21.8379 7.46927 22.3444 7.46927 22.6569 7.15685C22.9693 6.84443 22.9693 6.3379 22.6569 6.02548L17.5657 0.934315ZM16.4343 34.0657C16.7467 34.3781 17.2533 34.3781 17.5657 34.0657L22.6569 28.9745C22.9693 28.6621 22.9693 28.1556 22.6569 27.8431C22.3444 27.5307 21.8379 27.5307 21.5255 27.8431L17 32.3686L12.4745 27.8431C12.1621 27.5307 11.6556 27.5307 11.3431 27.8431C11.0307 28.1556 11.0307 28.6621 11.3431 28.9745L16.4343 34.0657ZM16.2 1.5V33.5H17.8V1.5H16.2Z"
+                                    fill={c}
+                                />
+                                <path
+                                    d="M33.5657 18.0657C33.8781 17.7533 33.8781 17.2467 33.5657 16.9343L28.4745 11.8431C28.1621 11.5307 27.6556 11.5307 27.3431 11.8431C27.0307 12.1556 27.0307 12.6621 27.3431 12.9745L31.8686 17.5L27.3431 22.0255C27.0307 22.3379 27.0307 22.8444 27.3431 23.1569C27.6556 23.4693 28.1621 23.4693 28.4745 23.1569L33.5657 18.0657ZM0.434315 16.9343C0.121895 17.2467 0.121895 17.7533 0.434315 18.0657L5.52548 23.1569C5.8379 23.4693 6.34443 23.4693 6.65685 23.1569C6.96927 22.8444 6.96927 22.3379 6.65685 22.0255L2.13137 17.5L6.65685 12.9745C6.96927 12.6621 6.96927 12.1556 6.65685 11.8431C6.34443 11.5307 5.8379 11.5307 5.52548 11.8431L0.434315 16.9343ZM33 16.7L1 16.7L1 18.3L33 18.3L33 16.7Z"
+                                    fill={c}
+                                />
+                            </svg>
+                        ),
+                    }}
+                />
+            )}
             <ToolIcon
                 {...{
                     name: "connect",

diff --git a/frontend/src/style/tool-layer.scss b/frontend/src/style/tool-layer.scss
@@ -105,6 +105,14 @@
                 }
             }
 
+            .duplicate {
+                .notouch & {
+                    @media (max-width: $narrow-screen-breakpoint) {
+                        display: none;
+                    }
+                }
+            }
+
             .tool.undo,
             .tool.redo {
                 @media (min-width: $non-narrow-screen-breakpoint) {