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

* add multiplayer menu, view to menu * update icon
2022-02-13 14:59:33 +00:00 · 2022-02-13 14:59:33 +00:00 · 8ab16f1362
commit 8ab16f1362
parent 7df566ad0f
8 changed files with 104 additions and 25 deletions
--- a/packages/curve/tsconfig.dev.json
+++ b/packages/curve/tsconfig.dev.json
@ -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
+  }
+}
--- a/packages/curve/tsconfig.tsbuildinfo
+++ b/packages/curve/tsconfig.tsbuildinfo
--- a/packages/intersect/tsconfig.dev.json
+++ b/packages/intersect/tsconfig.dev.json
@ -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" }]
+}
--- a/packages/intersect/tsconfig.tsbuildinfo
+++ b/packages/intersect/tsconfig.tsbuildinfo
--- a/packages/tldraw/src/components/Primitives/icons/MultiplayerIcon.tsx
+++ b/packages/tldraw/src/components/Primitives/icons/MultiplayerIcon.tsx
@ -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>
  )
--- a/packages/tldraw/src/components/TopPanel/Menu/Menu.tsx
+++ b/packages/tldraw/src/components/TopPanel/Menu/Menu.tsx
@ -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" />
--- a/packages/tldraw/src/components/TopPanel/MultiplayerMenu/MultiplayerMenu.tsx
+++ b/packages/tldraw/src/components/TopPanel/MultiplayerMenu/MultiplayerMenu.tsx
@ -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 onClick={handleCopySelect} disabled={!room}>
+          Copy Invite Link<SmallIcon>{copied ? <CheckIcon /> : <ClipboardIcon />}</SmallIcon>
        </DMItem>
-        <DMItem onClick={handleCopyToMultiplayerRoom}>Copy to Multiplayer Room</DMItem>
-        {room && (
-          <>
-            <DMDivider />
-            <DMItem onClick={handleCopySelect}>
-              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>
  )
--- a/packages/tldraw/src/components/TopPanel/TopPanel.tsx
+++ b/packages/tldraw/src/components/TopPanel/TopPanel.tsx
@ -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>
      )}