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

[improvement] Add multiplayer menu, view to menu (#575)

Browse source 
* add multiplayer menu, view to menu

* update icon
This commit is contained in:
Steve Ruiz 2022-02-13 14:59:33 +00:00 committed by GitHub
parent 7df566ad0f
commit 8ab16f1362
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 104 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
packages/curve/tsconfig.dev.json Normal file
View file

@ -0,0 +1,20 @@
{
"extends": "./tsconfig.json",
"exclude": [
"node_modules",
"**/*.test.tsx",
"**/*.test.ts",
"**/*.spec.tsx",
"**/*.spec.ts",
"src/test",
"dist",
"docs"
],
"compilerOptions": {
"composite": false,
"incremental": false,
"declaration": true,
"declarationMap": true,
"sourceMap": true
}
}

1
packages/curve/tsconfig.tsbuildinfo
View file

File diff suppressed because one or more lines are too long

21
packages/intersect/tsconfig.dev.json Normal file
View file

@ -0,0 +1,21 @@
{
"extends": "./tsconfig.json",
"exclude": [
"node_modules",
"**/*.test.tsx",
"**/*.test.ts",
"**/*.spec.tsx",
"**/*.spec.ts",
"src/test",
"dist",
"docs"
],
"compilerOptions": {
"composite": false,
"incremental": false,
"declaration": true,
"declarationMap": true,
"sourceMap": true
},
"references": [{ "path": "../vec" }]
}

1
packages/intersect/tsconfig.tsbuildinfo
View file

File diff suppressed because one or more lines are too long

8
packages/tldraw/src/components/Primitives/icons/MultiplayerIcon.tsx
View file

@ -4,10 +4,10 @@ export function MultiplayerIcon(): JSX.Element {
return (
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M6.20634 0.691501C6.38439 0.610179 6.59352 0.640235 6.74146 0.768408L14.4999 7.49004C14.6546 7.62409 14.712 7.83893 14.6447 8.03228C14.5774 8.22564 14.399 8.35843 14.1945 8.36745L11.4343 8.48919L13.0504 12.04C13.1647 12.2913 13.0538 12.5877 12.8026 12.7022L10.9536 13.5444C10.7023 13.6589 10.4059 13.5481 10.2913 13.2968L8.67272 9.74659L6.83997 11.679L7.40596 12.9226C7.52032 13.1739 7.40939 13.4703 7.15815 13.5848L5.56925 14.3086C5.31801 14.423 5.02156 14.3122 4.90703 14.061L3.55936 11.105L2.00195 12.7471C1.86112 12.8956 1.64403 12.9433 1.45395 12.8675C1.26386 12.7917 1.13916 12.6077 1.13916 12.4031V3.59046C1.13916 3.39472 1.25338 3.21698 1.43143 3.13565C1.60949 3.05433 1.81862 3.08439 1.96656 3.21256L5.91406 6.63254V1.14631C5.91406 0.950565 6.02829 0.772823 6.20634 0.691501ZM7.13109 9.91888L6.91406 10.1477V9.92845V8.92747V8.82201V7.49891V2.24104L12.8962 7.42374L10.6504 7.52279C10.4845 7.53011 10.333 7.61939 10.2462 7.76104C10.2353 7.77874 10.2256 7.79698 10.2172 7.81563C10.1579 7.94618 10.1572 8.0971 10.2174 8.2294C10.2174 8.22941 10.2174 8.22941 10.2174 8.22942L11.9332 11.9993L10.9939 12.4272L9.27506 8.65717C9.2061 8.50591 9.06648 8.39882 8.90252 8.37142C8.73857 8.34402 8.57171 8.3999 8.45732 8.52051L8.2931 8.69366L7.1311 9.91887L7.13109 9.91888ZM5.91406 8.97158V7.95564L2.13916 4.68519V11.1493L3.34396 9.87894C3.45835 9.75833 3.62521 9.70245 3.78916 9.72985C3.95312 9.75725 4.09274 9.86434 4.1617 10.0156L5.60957 13.1913L6.28874 12.8819L4.84345 9.70633C4.77463 9.55512 4.78541 9.3796 4.87222 9.23795C4.95903 9.0963 5.11053 9.00702 5.2765 8.9997L5.91406 8.97158Z"
fill="black"
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.73545 0.0494623C5.93029 -0.0395285 6.15915 -0.00663838 6.32104 0.133622L14.8111 7.48911C14.9804 7.63581 15.0432 7.87091 14.9696 8.08249C14.8959 8.29408 14.7007 8.4394 14.4769 8.44927L11.4564 8.58248L13.2249 12.4682C13.35 12.7431 13.2286 13.0675 12.9537 13.1927L10.9304 14.1145C10.6554 14.2397 10.331 14.1184 10.2057 13.8435L8.43441 9.95846L6.42883 12.0731L7.0482 13.434C7.17335 13.709 7.05195 14.0333 6.77702 14.1586L5.03829 14.9506C4.76335 15.0759 4.43894 14.9546 4.31361 14.6797L2.83886 11.445L1.13458 13.242C0.980476 13.4045 0.742914 13.4566 0.534904 13.3737C0.326893 13.2907 0.19043 13.0894 0.19043 12.8654V3.2218C0.19043 3.0076 0.315424 2.81309 0.510266 2.7241C0.705108 2.63511 0.933961 2.668 1.09586 2.80826L5.41561 6.55076V0.547159C5.41561 0.332956 5.54061 0.138453 5.73545 0.0494623ZM6.74741 10.147L6.50992 10.3974V10.1575V9.0621V8.94669V7.49882V1.74513L13.0561 7.41656L10.5986 7.52495C10.417 7.53296 10.2512 7.63066 10.1562 7.78567C10.1444 7.80505 10.1338 7.825 10.1245 7.84541C10.0596 7.98828 10.0589 8.15342 10.1247 8.2982V8.2982L12.0023 12.4236L10.9745 12.8919L9.09356 8.7663C9.0181 8.60079 8.86531 8.4836 8.68589 8.45361C8.50647 8.42363 8.32389 8.48478 8.19871 8.61676L8.019 8.80624L6.74741 10.147ZM5.41561 9.11037V7.99863L1.28473 4.41977V11.4934L2.60315 10.1033C2.72833 9.97131 2.91091 9.91016 3.09033 9.94014C3.26975 9.97013 3.42254 10.0873 3.498 10.2528L5.08241 13.728L5.82563 13.3895L4.24404 9.91441C4.16873 9.74894 4.18053 9.55687 4.27553 9.40186C4.37052 9.24685 4.53631 9.14915 4.71793 9.14114L5.41561 9.11037Z"
fill="currentColor"
/>
</svg>
)

49
packages/tldraw/src/components/TopPanel/Menu/Menu.tsx
View file

@ -108,6 +108,10 @@ export const Menu = React.memo(function Menu({ showSponsorLink, readOnly }: Menu
app.openAsset()
}, [app])
const handleZoomTo100 = React.useCallback(() => {
app.zoomTo(1)
}, [app])
const showFileMenu =
app.callbacks.onNewProject ||
app.callbacks.onOpenProject ||
@ -262,9 +266,48 @@ export const Menu = React.memo(function Menu({ showSponsorLink, readOnly }: Menu
</DMSubMenu>
</>
)}
<a href="https://tldraw.com/r">
<DMItem id="TD-MenuItem-Create_a_Multiplayer_Room">Create a Multiplayer Room</DMItem>
</a>
<DMSubMenu label="View" id="TD-MenuItem-Edit">
<DMItem
onSelect={preventEvent}
onClick={app.zoomIn}
kbd="#+"
id="TD-MenuItem-View-ZoomIn"
>
Zoom In
</DMItem>
<DMItem
onSelect={preventEvent}
onClick={app.zoomOut}
kbd="#-"
id="TD-MenuItem-View-ZoomOut"
>
Zoom Out
</DMItem>
<DMItem
onSelect={preventEvent}
onClick={handleZoomTo100}
kbd="⇧+0"
id="TD-MenuItem-View-ZoomTo100"
>
Zoom to 100%
</DMItem>
<DMItem
onSelect={preventEvent}
onClick={app.zoomToFit}
kbd="⇧+1"
id="TD-MenuItem-View-ZoomToFit"
>
Zoom to Fit
</DMItem>
<DMItem
onSelect={preventEvent}
onClick={app.zoomToSelection}
kbd="⇧+2"
id="TD-MenuItem-View-ZoomToSelection"
>
Zoom to Selection
</DMItem>
</DMSubMenu>
<DMDivider dir="ltr" />
<PreferencesMenu />
<DMDivider dir="ltr" />

22
packages/tldraw/src/components/TopPanel/MultiplayerMenu/MultiplayerMenu.tsx
View file

@ -1,5 +1,5 @@
import * as React from 'react'
import { CheckIcon, ClipboardIcon } from '@radix-ui/react-icons'
import { CheckIcon, ClipboardIcon, CursorArrowIcon } from '@radix-ui/react-icons'
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
import { useTldrawApp } from '~hooks'
import { DMItem, DMContent, DMDivider, DMTriggerIcon } from '~components/Primitives/DropdownMenu'
@ -60,22 +60,16 @@ export const MultiplayerMenu = React.memo(function MultiplayerMenu() {
return (
<DropdownMenu.Root dir="ltr">
<DMTriggerIcon>
<MultiplayerIcon />
</DMTriggerIcon>
<DMTriggerIcon>{room ? <MultiplayerIcon /> : <CursorArrowIcon />}</DMTriggerIcon>
<DMContent variant="menu" align="start">
<DMItem onClick={handleCreateMultiplayerRoom}>
<a href="https://tldraw.com/r">Create a Multiplayer Room</a>
</DMItem>
<DMItem onClick={handleCopyToMultiplayerRoom}>Copy to Multiplayer Room</DMItem>
{room && (
<>
<DMDivider />
<DMItem onClick={handleCopySelect}>
<DMItem onClick={handleCopySelect} disabled={!room}>
Copy Invite Link<SmallIcon>{copied ? <CheckIcon /> : <ClipboardIcon />}</SmallIcon>
</DMItem>
</>
)}
<DMDivider />
<DMItem onClick={handleCreateMultiplayerRoom}>
<a href="https://tldraw.com/r">Create a Multiplayer Project</a>
</DMItem>
{/* <DMItem onClick={handleCopyToMultiplayerRoom}>Copy to Multiplayer Room</DMItem> */}
</DMContent>
</DropdownMenu.Root>
)

5
packages/tldraw/src/components/TopPanel/TopPanel.tsx
View file

@ -6,9 +6,11 @@ import { ZoomMenu } from './ZoomMenu'
import { StyleMenu } from './StyleMenu'
import { Panel } from '~components/Primitives/Panel'
import { ToolButton } from '~components/Primitives/ToolButton'
import { RedoIcon, UndoIcon } from '~components/Primitives/icons'
import { MultiplayerIcon, RedoIcon, UndoIcon } from '~components/Primitives/icons'
import { breakpoints } from '~components/breakpoints'
import { useTldrawApp } from '~hooks'
import { CursorArrowIcon } from '@radix-ui/react-icons'
import { MultiplayerMenu } from './MultiplayerMenu'
interface TopPanelProps {
readOnly: boolean
@ -34,6 +36,7 @@ export function TopPanel({
{(showMenu || showPages) && (
<Panel side="left" id="TD-MenuPanel">
{showMenu && <Menu showSponsorLink={showSponsorLink} readOnly={readOnly} />}
{showMenu && <MultiplayerMenu />}
{showPages && <PageMenu />}
</Panel>
)}