cleanup code + format

pull/5899/head
sawhney17 2022-07-03 16:42:47 +04:00
parent 126129fc71
commit d78356c8c6
2 changed files with 40 additions and 19 deletions

View File

@ -8,9 +8,8 @@ import { Minimap } from '~components/Minimap'
import { RedoIcon, UndoIcon } from '~components/icons'
import { ZoomMenu } from '~components/ZoomMenu'
export const ActionBar = observer(function ToolBar(): JSX.Element {
export const ActionBar = observer(function ActionBar(): JSX.Element {
const app = useApp<Shape>()
//Use state isOpen
const undo = React.useCallback(() => {
app.api.undo()
}, [app])
@ -21,7 +20,6 @@ export const ActionBar = observer(function ToolBar(): JSX.Element {
return (
<div className="action-bar">
{/* <button>minimap</button> */}
<Minimap></Minimap>
<button onClick={undo}>
<UndoIcon></UndoIcon>

View File

@ -1,9 +1,9 @@
import React from 'react';
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
import { useApp } from '@tldraw/react';
import React from 'react'
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
import { useApp } from '@tldraw/react'
export const ZoomMenu = () => {
const app = useApp();
const app = useApp()
const preventEvent = (e: Event) => {
e.preventDefault()
}
@ -11,30 +11,53 @@ export const ZoomMenu = () => {
<div>
<DropdownMenuPrimitive.Root>
<DropdownMenuPrimitive.Trigger>
<label>{(app.viewport.camera.zoom * 100).toFixed(0) + "%"} </label>
<button>{(app.viewport.camera.zoom * 100).toFixed(0) + '%'} </button>
</DropdownMenuPrimitive.Trigger>
<DropdownMenuPrimitive.Content className='dropdown-menu-button' id="zoomPopup" sideOffset={12} >
<DropdownMenuPrimitive.Arrow style={{ fill: "white" }}></DropdownMenuPrimitive.Arrow>
<DropdownMenuPrimitive.Item className="dropdown-item" onSelect={preventEvent} onClick={app.api.zoomToFit}>
<DropdownMenuPrimitive.Content
className="dropdown-menu-button"
id="zoomPopup"
sideOffset={12}
>
<DropdownMenuPrimitive.Arrow style={{ fill: 'white' }}></DropdownMenuPrimitive.Arrow>
<DropdownMenuPrimitive.Item
className="dropdown-item"
onSelect={preventEvent}
onClick={app.api.zoomToFit}
>
Zoom to Fit <div className="right-slot"></div>
</DropdownMenuPrimitive.Item>
<DropdownMenuPrimitive.Item className="dropdown-item" onSelect={preventEvent} onClick={app.api.zoomToSelection}>
<DropdownMenuPrimitive.Item
className="dropdown-item"
onSelect={preventEvent}
onClick={app.api.zoomToSelection}
>
Zoom to Selection <div className="right-slot">+Minus</div>
</DropdownMenuPrimitive.Item>
<DropdownMenuPrimitive.Item className="dropdown-item" onSelect={preventEvent} onClick={app.api.zoomIn}>
<DropdownMenuPrimitive.Item
className="dropdown-item"
onSelect={preventEvent}
onClick={app.api.zoomIn}
>
Zoom In <div className="right-slot">+Plus</div>
</DropdownMenuPrimitive.Item>
<DropdownMenuPrimitive.Item className="dropdown-item" onSelect={preventEvent} onClick={app.api.zoomOut}>
<DropdownMenuPrimitive.Item
className="dropdown-item"
onSelect={preventEvent}
onClick={app.api.zoomOut}
>
Zoom Out <div className="right-slot">+Minus</div>
</DropdownMenuPrimitive.Item>
<DropdownMenuPrimitive.Item className="dropdown-item" onSelect={preventEvent} onClick={app.api.resetZoom}>
<DropdownMenuPrimitive.Item
className="dropdown-item"
onSelect={preventEvent}
onClick={app.api.resetZoom}
>
Reset Zoom <div className="right-slot">+0</div>
</DropdownMenuPrimitive.Item>
</DropdownMenuPrimitive.Content>
</DropdownMenuPrimitive.Root>
</div>
);
};
export default ZoomMenu;
)
}
export default ZoomMenu