Fix toggle prop

packages/tldraw/src/components/ToolButton/ToolButton.tsx

@@ -117,6 +117,11 @@ export const StyledToolButton = styled('button', {
   border: 'none',
   height: '40px',
   width: '40px',
+
+  [`&:disabled ${StyledToolButtonInner}`]: {
+    opacity: 0.618,
+  },
+
   variants: {
     variant: {
       primary: {

packages/tldraw/src/components/ToolsPanel/ActionButton.tsx

@@ -26,12 +26,12 @@ import {
   SpaceEvenlyVerticallyIcon,
   StretchHorizontallyIcon,
   StretchVerticallyIcon,
+  BoxIcon,
 } from '@radix-ui/react-icons'
 import { DMContent } from '~components/DropdownMenu'
 import { Divider } from '~components/Divider'
 import { TrashIcon } from '~components/icons'
 import { ToolButton } from '~components/ToolButton'
-import { GHOSTED_OPACITY } from '~constants'
 
 const selectedShapesCountSelector = (s: TDSnapshot) =>
   s.document.pageStates[s.appState.currentPageId].selectedIds.length
@@ -85,6 +85,12 @@ export function ActionButton(): JSX.Element {
 
   const hasMultipleSelection = app.useStore(hasMultipleSelectionClickor)
 
+  const selectedShapesCount = app.useStore(selectedShapesCountSelector)
+
+  const hasTwoOrMore = selectedShapesCount > 1
+
+  const hasThreeOrMore = selectedShapesCount > 2
+
   const handleRotate = React.useCallback(() => {
     app.rotate()
   }, [app])
@@ -165,16 +171,11 @@ export function ActionButton(): JSX.Element {
     app.distribute(DistributeType.Horizontal)
   }, [app])
 
-  const selectedShapesCount = app.useStore(selectedShapesCountSelector)
-
-  const hasTwoOrMore = selectedShapesCount > 1
-  const hasThreeOrMore = selectedShapesCount > 2
-
   return (
     <DropdownMenu.Root dir="ltr">
-      <DropdownMenu.Trigger dir="ltr" asChild>
+      <DropdownMenu.Trigger disabled={!hasSelection} dir="ltr" asChild>
         <ToolButton disabled={!hasSelection} variant="circle">
-          <DotsHorizontalIcon opacity={hasSelection ? 1 : 0.618} />
+          <DotsHorizontalIcon />
         </ToolButton>
       </DropdownMenu.Trigger>
       <DMContent sideOffset={16}>
@@ -192,12 +193,12 @@ export function ActionButton(): JSX.Element {
             </ToolButton>
             <ToolButton disabled={!hasSelection} onClick={handleToggleLocked}>
               <Tooltip label="Toogle Locked" kbd={`#L`}>
-                {isAllLocked ? <LockClosedIcon /> : <LockOpen1Icon opacity={0.4} />}
+                {isAllLocked ? <LockClosedIcon /> : <LockOpen1Icon />}
               </Tooltip>
             </ToolButton>
             <ToolButton disabled={!hasSelection} onClick={handleToggleAspectRatio}>
               <Tooltip label="Toogle Aspect Ratio Lock">
-                <AspectRatioIcon opacity={isAllAspectLocked ? 1 : 0.4} />
+                {isAllAspectLocked ? <AspectRatioIcon /> : <BoxIcon />}
               </Tooltip>
             </ToolButton>
             <ToolButton
@@ -205,7 +206,7 @@ export function ActionButton(): JSX.Element {
               onClick={handleGroup}
             >
               <Tooltip label="Group" kbd={`#G`}>
-                <GroupIcon opacity={isAllGrouped ? 1 : 0.4} />
+                <GroupIcon />
               </Tooltip>
             </ToolButton>
           </ButtonsRow>

packages/tldraw/src/state/commands/toggleShapesProp/toggleShapesProp.ts

@@ -1,22 +1,22 @@
 import type { TDShape, TldrawCommand } from '~types'
-import { TLDR } from '~state/TLDR'
 import type { TldrawApp } from '~state'
 
 export function toggleShapeProp(app: TldrawApp, ids: string[], prop: keyof TDShape): TldrawCommand {
   const { currentPageId } = app
 
-  const initialShapes = ids.map((id) => app.getShape(id))
+  const initialShapes = ids
+    .map((id) => app.getShape(id))
+    .filter((shape) => (prop === 'isLocked' ? true : !shape.isLocked))
 
   const isAllToggled = initialShapes.every((shape) => shape[prop])
 
-  const { before, after } = TLDR.mutateShapes(
+  const before: Record<string, Partial<TDShape>> = {}
-    app.state,
+  const after: Record<string, Partial<TDShape>> = {}
-    ids.filter((id) => (prop === 'isLocked' ? true : !app.getShape(id).isLocked)),
+
-    () => ({
+  initialShapes.forEach((shape) => {
-      [prop]: !isAllToggled,
+    before[shape.id] = { [prop]: shape[prop] }
-    }),
+    after[shape.id] = { [prop]: !isAllToggled }
-    currentPageId
+  })
-  )
 
   return {
     id: 'toggle',