PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Adds copy / paste / save / load buttons to menu

Browse source
This commit is contained in:
Steve Ruiz 2021-07-03 15:09:49 +01:00
parent 8a747fe82f
commit a454586237
6 changed files with 119 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/shared.tsx
View file

@ -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': {

53
components/style-panel/style-panel.tsx
View file

@ -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>
</>
)
}

1
hooks/useCanvasEvents.ts
View file

@ -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)

2
package.json
View file

@ -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",

1
state/shape-utils/text.tsx
View file

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

69
yarn.lock
View file

@ -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":
version "0.0.22"
resolved "https://registry.yarnpkg.com/@radix-ui/react-context-menu/-/react-context-menu-0.0.22.tgz#1cd09008ec25c07e268822fd2686d9dbb6dd97eb"
integrity sha512-saX/fAsvZL5GMBrSwxipBUjGZzPVS838BWFoWaN9LsOE/Cs/YDaItphKWolys0qxGop0YA8RDwArKbibKetaTg==
"@radix-ui/react-context-menu@^0.0.23":
version "0.0.23"
resolved "https://registry.yarnpkg.com/@radix-ui/react-context-menu/-/react-context-menu-0.0.23.tgz#715cf6e68e03b4ed32d13c1e50c98d255a8d664c"
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"