Adds copy / paste / save / load buttons to menu

components/shared.tsx

@@ -92,7 +92,7 @@ export const RowButton = styled('button', {
   fontWeight: 400,
   fontSize: '$1',
   justifyContent: 'space-between',
-  padding: '4px 6px 4px 12px',
+  padding: '4px 8px 4px 12px',
   borderRadius: 4,
 
   '& label': {

components/style-panel/style-panel.tsx

@@ -2,7 +2,12 @@ import styled from 'styles'
 import state, { useSelector } from 'state'
 import * as Panel from 'components/panel'
 import { useRef } from 'react'
-import { IconButton, ButtonsRow } from 'components/shared'
+import {
+  IconButton,
+  IconWrapper,
+  ButtonsRow,
+  RowButton,
+} from 'components/shared'
 import { ChevronDown, X } from 'react-feather'
 import ShapesFunctions from './shapes-functions'
 import AlignDistribute from './align-distribute'
@@ -12,6 +17,11 @@ import QuickDashSelect from './quick-dash-select'
 import QuickFillSelect from './quick-fill-select'
 import Tooltip from 'components/tooltip'
 import { motion } from 'framer-motion'
+import {
+  ClipboardCopyIcon,
+  ClipboardIcon,
+  Share2Icon,
+} from '@radix-ui/react-icons'
 
 const breakpoints = { '@initial': 'mobile', '@sm': 'small' } as any
 
@@ -54,6 +64,47 @@ function SelectedShapeContent(): JSX.Element {
         hasTwoOrMore={selectedShapesCount > 1}
         hasThreeOrMore={selectedShapesCount > 2}
       />
+      <RowButton
+        bp={breakpoints}
+        disabled={selectedShapesCount === 0}
+        onClick={() => state.send('COPIED')}
+      >
+        <span>Copy</span>
+        <IconWrapper size="small">
+          <ClipboardCopyIcon />
+        </IconWrapper>
+      </RowButton>
+      <RowButton bp={breakpoints} onClick={() => state.send('PASTED')}>
+        <span>Paste</span>
+        <IconWrapper size="small">
+          <ClipboardIcon />
+        </IconWrapper>
+      </RowButton>
+      <RowButton
+        bp={breakpoints}
+        disabled={selectedShapesCount === 0}
+        onClick={() => state.send('COPIED_TO_SVG')}
+      >
+        <span>Copy to SVG</span>
+        <IconWrapper size="small">
+          <Share2Icon />
+        </IconWrapper>
+      </RowButton>
+      <hr />
+      <RowButton
+        bp={breakpoints}
+        disabled={selectedShapesCount === 0}
+        onClick={() => state.send('SAVED')}
+      >
+        <span>Save</span>
+      </RowButton>
+      <RowButton
+        bp={breakpoints}
+        disabled={selectedShapesCount === 0}
+        onClick={() => state.send('LOADED_FROM_FILE_STSTEM')}
+      >
+        <span>Load</span>
+      </RowButton>
     </>
   )
 }

hooks/useCanvasEvents.ts

@@ -57,7 +57,6 @@ export default function useCanvasEvents(
 
   const handlePointerUp = useCallback((e: React.PointerEvent) => {
     if (!inputs.canAccept(e.pointerId)) return
-    e.stopPropagation()
 
     rCanvas.current.releasePointerCapture(e.pointerId)
 

package.json

@@ -34,7 +34,7 @@
     "@liveblocks/react": "^0.8.0",
     "@monaco-editor/react": "^4.2.1",
     "@radix-ui/react-checkbox": "^0.0.16",
-    "@radix-ui/react-context-menu": "^0.0.22",
+    "@radix-ui/react-context-menu": "^0.0.23",
     "@radix-ui/react-dialog": "^0.0.18",
     "@radix-ui/react-dropdown-menu": "^0.0.21",
     "@radix-ui/react-hover-card": "^0.0.3",

state/shape-utils/text.tsx

@@ -34,6 +34,7 @@ Object.assign(mdiv.style, {
   left: '0px',
   zIndex: '9999',
   pointerEvents: 'none',
+  userSelect: 'none',
   alignmentBaseline: 'mathematical',
   dominantBaseline: 'mathematical',
 })

yarn.lock

@@ -1375,6 +1375,15 @@
     "@radix-ui/react-compose-refs" "0.0.5"
     "@radix-ui/react-slot" "0.0.11"
 
+"@radix-ui/react-collection@0.0.14":
+  version "0.0.14"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-0.0.14.tgz#c51c790100407e8eb38be2b67538a5ff7c52915e"
+  integrity sha512-IM3ttcjArKWItPY7vaCHyqWFSGK+k4Lb0V7RC8vCgB0LXEep5YQ1d30o4TNAqiRX3+Mz7T0zg+gDCwK86visdg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "0.0.5"
+    "@radix-ui/react-slot" "0.0.12"
+
 "@radix-ui/react-compose-refs@0.0.5":
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-0.0.5.tgz#0f71f0de1dec341f30cebd420b6bc3d12a3037dd"
@@ -1382,15 +1391,15 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
-"@radix-ui/react-context-menu@^0.0.22":
+"@radix-ui/react-context-menu@^0.0.23":
-  version "0.0.22"
+  version "0.0.23"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-context-menu/-/react-context-menu-0.0.22.tgz#1cd09008ec25c07e268822fd2686d9dbb6dd97eb"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context-menu/-/react-context-menu-0.0.23.tgz#715cf6e68e03b4ed32d13c1e50c98d255a8d664c"
-  integrity sha512-saX/fAsvZL5GMBrSwxipBUjGZzPVS838BWFoWaN9LsOE/Cs/YDaItphKWolys0qxGop0YA8RDwArKbibKetaTg==
+  integrity sha512-TB8Hhn977j1OtNR3Ckcqq0BOwEffPw722kUEQIecmo/zzMJ2cn08GWM3PIiJaR9aqzVZnT1r3f69fjF9/KGLqg==
   dependencies:
     "@babel/runtime" "^7.13.10"
     "@radix-ui/primitive" "0.0.5"
     "@radix-ui/react-context" "0.0.5"
-    "@radix-ui/react-menu" "0.0.20"
+    "@radix-ui/react-menu" "0.0.21"
     "@radix-ui/react-polymorphic" "0.0.12"
     "@radix-ui/react-primitive" "0.0.14"
     "@radix-ui/react-use-callback-ref" "0.0.5"
@@ -1534,6 +1543,32 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "^2.4.0"
 
+"@radix-ui/react-menu@0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-0.0.21.tgz#a0a2402e1bd11537af5a43f82a7a6f113abf00c6"
+  integrity sha512-zUhG4pFcHhvsCTHTqGfrury9FQTSbvkclxVIfZ0I6pkCA5wEXJNMmkztCQe1QZT6lZlTuQRPybbbLrt8j3DVAA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "0.0.5"
+    "@radix-ui/react-collection" "0.0.14"
+    "@radix-ui/react-compose-refs" "0.0.5"
+    "@radix-ui/react-context" "0.0.5"
+    "@radix-ui/react-dismissable-layer" "0.0.14"
+    "@radix-ui/react-focus-guards" "0.0.7"
+    "@radix-ui/react-focus-scope" "0.0.14"
+    "@radix-ui/react-id" "0.0.6"
+    "@radix-ui/react-polymorphic" "0.0.12"
+    "@radix-ui/react-popper" "0.0.17"
+    "@radix-ui/react-portal" "0.0.14"
+    "@radix-ui/react-presence" "0.0.14"
+    "@radix-ui/react-primitive" "0.0.14"
+    "@radix-ui/react-roving-focus" "0.0.15"
+    "@radix-ui/react-slot" "0.0.12"
+    "@radix-ui/react-use-callback-ref" "0.0.5"
+    "@radix-ui/react-use-direction" "0.0.1"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "^2.4.0"
+
 "@radix-ui/react-polymorphic@0.0.12":
   version "0.0.12"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.12.tgz#bf4ae516669b68e059549538104d97322f7c876b"
@@ -1617,6 +1652,22 @@
     "@radix-ui/react-use-callback-ref" "0.0.5"
     "@radix-ui/react-use-controllable-state" "0.0.6"
 
+"@radix-ui/react-roving-focus@0.0.15":
+  version "0.0.15"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-0.0.15.tgz#9bc238ba705fbeed74ef04ebdbb77b35e5faca06"
+  integrity sha512-KtbWAqqxJRSxVKM+dhOc1rrq6eNWLqjmp7LVj3eKhw62nyV/z5G1lzzT54Zr5GD7+SH/QDyDvBFmPzRomXf1bQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "0.0.5"
+    "@radix-ui/react-collection" "0.0.14"
+    "@radix-ui/react-compose-refs" "0.0.5"
+    "@radix-ui/react-context" "0.0.5"
+    "@radix-ui/react-id" "0.0.6"
+    "@radix-ui/react-polymorphic" "0.0.12"
+    "@radix-ui/react-primitive" "0.0.14"
+    "@radix-ui/react-use-callback-ref" "0.0.5"
+    "@radix-ui/react-use-controllable-state" "0.0.6"
+
 "@radix-ui/react-slot@0.0.11":
   version "0.0.11"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-0.0.11.tgz#d0121018ae20d86683d527b7011b7f21465dffbd"
@@ -1625,6 +1676,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "0.0.5"
 
+"@radix-ui/react-slot@0.0.12":
+  version "0.0.12"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-0.0.12.tgz#c4d8a75fffca561aeeca2ed9603384d86757f60a"
+  integrity sha512-Em8P/xYyh3O/32IhrmARJNH+J/XCAVnw6h2zGu6oeReliIX7ktU67pMSeyyIZiU2hNXzaXYB/xDdixizQe/DGA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "0.0.5"
+
 "@radix-ui/react-tooltip@^0.0.19":
   version "0.0.19"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-0.0.19.tgz#2ee843c7c5612708b31ad52adbefc580b213a421"