Merge pull request #7358 from logseq/feat/color-panel

Feat (Whiteboards): Add main color panel and rearrange tools

e2e-tests/whiteboards.spec.ts

@@ -40,11 +40,11 @@ test('can right click title to show context menu', async ({ page }) => {
     await page.click('.whiteboard-page-title', {
         button: 'right',
     })
-  
+
     await expect(page.locator('#custom-context-menu')).toBeVisible()
-  
+
     await page.keyboard.press('Escape')
-  
+
     await expect(page.locator('#custom-context-menu')).toHaveCount(0)
 })
 
@@ -69,7 +69,7 @@ test('set whiteboard title', async ({ page }) => {
 })
 
 test('select rectangle tool', async ({ page }) => {
-    await page.keyboard.press('8')
+    await page.keyboard.press('7')
     await expect(page.locator('.tl-geometry-tools-pane-anchor [title*="Rectangle"]')).toHaveAttribute('data-selected', 'true')
 })
 
@@ -77,7 +77,7 @@ test('draw a rectangle', async ({ page }) => {
     const canvas = await page.waitForSelector('.logseq-tldraw');
     const bounds = (await canvas.boundingBox())!;
 
-    await page.keyboard.press('8')
+    await page.keyboard.press('7')
 
     await page.mouse.move(bounds.x + 5, bounds.y + 5);
     await page.mouse.down();
@@ -112,11 +112,11 @@ test('quick add another whiteboard', async ({ page }) => {
     // create a new board first
     await page.click('.nav-header .whiteboard')
     await page.click('#tl-create-whiteboard')
-    
+
     await page.click('.whiteboard-page-title')
     await page.fill('.whiteboard-page-title input', "my-whiteboard-3")
     await page.keyboard.press('Enter')
-    
+
     const canvas = await page.waitForSelector('.logseq-tldraw');
     await canvas.dblclick({
         position: {
@@ -138,7 +138,7 @@ test('quick add another whiteboard', async ({ page }) => {
 test('go to another board and check reference', async ({ page }) => {
     await page.locator('.tl-logseq-portal-container >> text=my-whiteboard-2').click()
     await expect(page.locator('.whiteboard-page-title .title')).toContainText("my-whiteboard-2");
-  
+
     const pageRefCount$ = page.locator('.whiteboard-page-refs-count')
     await expect(pageRefCount$.locator('.open-page-ref-link')).toContainText('1')
 

resources/css/common.css

@@ -144,6 +144,7 @@ html[data-theme='light'] {
   --ls-block-bullet-color: rgba(67, 63, 56, 0.25);
   --ls-block-highlight-color: #c0e6fd;
   --ls-selection-background-color: #e4f2ff;
+  --ls-selection-text-color: var(--ls-secondary-text-color);
   --ls-page-checkbox-color: #9dbbd8;
   --ls-page-checkbox-border-color: var(--ls-page-checkbox-color);
   --ls-page-blockquote-color: var(--ls-primary-text-color);

tldraw/apps/tldraw-logseq/src/components/ActionBar/ActionBar.tsx

@@ -6,6 +6,7 @@ import * as React from 'react'
 import type { Shape } from '../../lib'
 import { TablerIcon } from '../icons'
 import { Button } from '../Button'
+import { ToolButton } from '../ToolButton'
 import { ZoomMenu } from '../ZoomMenu'
 import * as Separator from '@radix-ui/react-separator'
 
@@ -30,6 +31,13 @@ export const ActionBar = observer(function ActionBar(): JSX.Element {
   return (
     <div className="tl-action-bar">
       <div className="tl-toolbar tl-history-bar">
+        <ToolButton title="Select" id="select" icon="select-cursor" />
+        <ToolButton
+          title="Move"
+          id="move"
+          icon={app.isIn('move.panning') ? 'hand-grab' : 'hand-stop'}
+        />
+        <Separator.Root className="tl-toolbar-separator" orientation="vertical" />
         <Button title="Undo" onClick={undo}>
           <TablerIcon name="arrow-back-up" />
         </Button>

tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx

@@ -356,6 +356,7 @@ const SwatchAction = observer(() => {
   return (
     <ColorInput
       title="Color Picker"
+      popoverSide="top"
       color={color}
       opacity={shapes[0].props.opacity}
       collisionRef={document.getElementById('main-content-container')}

tldraw/apps/tldraw-logseq/src/components/GeometryTools/GeometryTools.tsx

@@ -0,0 +1,56 @@
+import { useApp } from '@tldraw/react'
+import { observer } from 'mobx-react-lite'
+import * as React from 'react'
+import { ToolButton } from '../ToolButton'
+import * as Popover from '@radix-ui/react-popover'
+import { TablerIcon } from '../icons'
+
+export const GeometryTools = observer(function GeometryTools() {
+  const geometries = [
+    {
+      id: 'box',
+      icon: 'square',
+      title: 'Rectangle',
+    },
+    {
+      id: 'ellipse',
+      icon: 'circle',
+      title: 'Circle',
+    },
+    {
+      id: 'polygon',
+      icon: 'triangle',
+      title: 'Triangle',
+    },
+  ]
+
+  const app = useApp()
+  const [activeGeomId, setActiveGeomId] = React.useState(
+    () => (geometries.find(geo => geo.id === app.selectedTool.id) ?? geometries[0]).id
+  )
+
+  React.useEffect(() => {
+    setActiveGeomId(prevId => {
+      return geometries.find(geo => geo.id === app.selectedTool.id)?.id ?? prevId
+    })
+  }, [app.selectedTool.id])
+
+  return (
+    <Popover.Root>
+      <Popover.Trigger className="tl-geometry-tools-pane-anchor">
+        <ToolButton {...geometries.find(geo => geo.id === activeGeomId)!} />
+        <TablerIcon className="tl-popover-indicator" name="chevron-down-left" />
+      </Popover.Trigger>
+
+      <Popover.Content className="tl-popover-content" side="left" sideOffset={15}>
+        <div className="tl-toolbar tl-geometry-toolbar">
+          {geometries.map(props => (
+            <ToolButton key={props.id} {...props} />
+          ))}
+        </div>
+
+        <Popover.Arrow className="tl-popover-arrow" />
+      </Popover.Content>
+    </Popover.Root>
+  )
+})

tldraw/apps/tldraw-logseq/src/components/GeometryTools/index.ts

@@ -0,0 +1 @@
+export * from './GeometryTools'

tldraw/apps/tldraw-logseq/src/components/PrimaryTools/PrimaryTools.tsx

@@ -1,114 +1,41 @@
-import { TLMoveTool, TLSelectTool } from '@tldraw/core'
 import { useApp } from '@tldraw/react'
 import { observer } from 'mobx-react-lite'
 import * as React from 'react'
-import { Button } from '../Button'
-import { TablerIcon, LogseqIcon } from '../icons'
-
-interface ToolButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  id: string
-  icon: string | React.ReactNode
-}
-
-const ToolButton = observer(({ id, icon, title, ...props }: ToolButtonProps) => {
-  const app = useApp()
-
-  const handleToolClick = React.useCallback(
-    (e: React.MouseEvent<HTMLButtonElement>) => {
-      const tool = e.currentTarget.dataset.tool
-      if (tool) app.selectTool(tool)
-    },
-    [app]
-  )
-
-  // Tool must exist
-  const Tool = [...app.Tools, TLSelectTool, TLMoveTool]?.find(T => T.id === id)
-
-  const shortcut = ((Tool as any)['shortcut'] as string[])?.[0]
-
-  const titleWithShortcut = shortcut ? `${title} (${shortcut})` : title
-  return (
-    <Button
-      {...props}
-      title={titleWithShortcut}
-      data-tool={id}
-      data-selected={id === app.selectedTool.id}
-      onClick={handleToolClick}
-    >
-      {typeof icon === 'string' ? <TablerIcon name={icon} /> : icon}
-    </Button>
-  )
-})
-
-const GeometryToolButtons = observer(() => {
-  const geometries = [
-    {
-      id: 'box',
-      icon: 'square',
-      title: 'Rectangle',
-    },
-    {
-      id: 'ellipse',
-      icon: 'circle',
-      title: 'Circle',
-    },
-    {
-      id: 'polygon',
-      icon: 'triangle',
-      title: 'Triangle',
-    },
-  ]
-
-  const app = useApp()
-  const [activeGeomId, setActiveGeomId] = React.useState(
-    () => (geometries.find(geo => geo.id === app.selectedTool.id) ?? geometries[0]).id
-  )
-
-  const [paneActive, setPaneActive] = React.useState(false)
-
-  React.useEffect(() => {
-    setActiveGeomId(prevId => {
-      return geometries.find(geo => geo.id === app.selectedTool.id)?.id ?? prevId
-    })
-  }, [app.selectedTool.id])
-
-  return (
-    <div
-      className="tl-geometry-tools-pane-anchor"
-      onMouseEnter={() => setPaneActive(true)}
-      onMouseLeave={() => setPaneActive(false)}
-    >
-      {<ToolButton {...geometries.find(geo => geo.id === activeGeomId)!} />}
-      {paneActive && (
-        <div className="tl-geometry-tools-pane">
-          {geometries.map(props => (
-            <ToolButton key={props.id} {...props} />
-          ))}
-        </div>
-      )}
-    </div>
-  )
-})
+import { ToolButton } from '../ToolButton'
+import { GeometryTools } from '../GeometryTools'
+import { ColorInput } from '../inputs/ColorInput'
+import * as Separator from '@radix-ui/react-separator'
 
 export const PrimaryTools = observer(function PrimaryTools() {
   const app = useApp()
 
+  const handleSetColor = React.useCallback((color: string) => {
+    app.api.setColor(color)
+  }, [])
+
   return (
     <div className="tl-primary-tools">
       <div className="tl-toolbar tl-tools-floating-panel">
-        <ToolButton title="Select" id="select" icon="select-cursor" />
-        <ToolButton
-          title="Move"
-          id="move"
-          icon={app.isIn('move.panning') ? 'hand-grab' : 'hand-stop'}
-        />
+        <ToolButton title="Add block or page" id="logseq-portal" icon="circle-plus" />
+        <Separator.Root className="tl-toolbar-separator" orientation="horizontal" />
         <ToolButton title="Draw" id="pencil" icon="ballpen" />
         <ToolButton title="Highlight" id="highlighter" icon="highlight" />
         <ToolButton title="Eraser" id="erase" icon="eraser" />
         <ToolButton title="Connector" id="line" icon="connector" />
         <ToolButton title="Text" id="text" icon="text" />
-        <GeometryToolButtons />
-        <ToolButton title="Logseq Portal" id="logseq-portal" icon={<LogseqIcon />} />
+        <GeometryTools />
+        <Separator.Root
+          className="tl-toolbar-separator"
+          orientation="horizontal"
+          style={{ margin: '0 -4px' }}
+        />
+        <ColorInput
+          title="Color Picker"
+          popoverSide="left"
+          color={app.settings.color}
+          collisionRef={document.getElementById('main-content-container')}
+          setColor={handleSetColor}
+        />
       </div>
     </div>
   )

tldraw/apps/tldraw-logseq/src/components/ToolButton/ToolButton.tsx

@@ -0,0 +1,41 @@
+import { TLMoveTool, TLSelectTool } from '@tldraw/core'
+import { useApp } from '@tldraw/react'
+import { observer } from 'mobx-react-lite'
+import * as React from 'react'
+import { Button } from '../Button'
+import { TablerIcon } from '../icons'
+
+export interface ToolButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  id: string
+  icon: string | React.ReactNode
+}
+
+export const ToolButton = observer(({ id, icon, title, ...props }: ToolButtonProps) => {
+  const app = useApp()
+
+  const handleToolClick = React.useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      const tool = e.currentTarget.dataset.tool
+      if (tool) app.selectTool(tool)
+    },
+    [app]
+  )
+
+  // Tool must exist
+  const Tool = [...app.Tools, TLSelectTool, TLMoveTool]?.find(T => T.id === id)
+
+  const shortcut = ((Tool as any)['shortcut'] as string[])?.[0]
+
+  const titleWithShortcut = shortcut ? `${title} (${shortcut})` : title
+  return (
+    <Button
+      {...props}
+      title={titleWithShortcut}
+      data-tool={id}
+      data-selected={id === app.selectedTool.id}
+      onClick={handleToolClick}
+    >
+      {typeof icon === 'string' ? <TablerIcon name={icon} /> : icon}
+    </Button>
+  )
+})

tldraw/apps/tldraw-logseq/src/components/ToolButton/index.ts

@@ -0,0 +1 @@
+export * from './ToolButton'

tldraw/apps/tldraw-logseq/src/components/icons/index.ts

@@ -1,2 +1 @@
-export * from './LogseqIcon'
 export * from './TablerIcon'

tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx

@@ -1,20 +1,24 @@
 import * as React from 'react'
 import * as Popover from '@radix-ui/react-popover'
+import type { Side } from '@radix-ui/react-popper'
 import * as Slider from '@radix-ui/react-slider'
 import { TablerIcon } from '../icons'
 import { Color } from '@tldraw/core'
+
 interface ColorInputProps extends React.InputHTMLAttributes<HTMLButtonElement> {
-  color: string
-  opacity: number
+  color?: string
+  opacity?: number
   collisionRef: HTMLElement | null
+  popoverSide: Side
   setColor: (value: string) => void
-  setOpacity: (value: number) => void
+  setOpacity?: (value: number) => void
 }
 
 export function ColorInput({
   color,
   opacity,
   collisionRef,
+  popoverSide,
   setColor,
   setOpacity,
   ...rest
@@ -35,11 +39,11 @@ export function ColorInput({
 
   return (
     <Popover.Root>
-      <Popover.Trigger className="tl-color-drip mx-1">{renderColor(color)}</Popover.Trigger>
+      <Popover.Trigger className="tl-color-drip">{renderColor(color)}</Popover.Trigger>
 
       <Popover.Content
-        className="tl-popover-content"
-        side="top"
+        className="tl-popover-content p-1"
+        side={popoverSide}
         sideOffset={15}
         collisionBoundary={collisionRef}
       >
@@ -55,21 +59,23 @@ export function ColorInput({
           ))}
         </div>
 
-        <div className="mx-1 my-2">
-          <Slider.Root
-            defaultValue={[opacity]}
-            onValueCommit={value => setOpacity(value[0])}
-            max={1}
-            step={0.1}
-            aria-label="Opacity"
-            className="tl-slider-root"
-          >
-            <Slider.Track className="tl-slider-track">
-              <Slider.Range className="tl-slider-range" />
-            </Slider.Track>
-            <Slider.Thumb className="tl-slider-thumb" />
-          </Slider.Root>
-        </div>
+        {setOpacity && (
+          <div className="mx-1 my-2">
+            <Slider.Root
+              defaultValue={[opacity]}
+              onValueCommit={value => setOpacity(value[0])}
+              max={1}
+              step={0.1}
+              aria-label="Opacity"
+              className="tl-slider-root"
+            >
+              <Slider.Track className="tl-slider-track">
+                <Slider.Range className="tl-slider-range" />
+              </Slider.Track>
+              <Slider.Thumb className="tl-slider-thumb" />
+            </Slider.Root>
+          </div>
+        )}
 
         <Popover.Arrow className="tl-popover-arrow" />
       </Popover.Content>

tldraw/apps/tldraw-logseq/src/hooks/usePaste.ts

@@ -310,6 +310,8 @@ export function usePaste() {
                 point: [point[0], point[1]],
                 size: [400, 0], // use 0 here to enable auto-resize
                 pageId: blockRef,
+                fill: app.settings.color,
+                stroke: app.settings.color,
                 blockType: 'B' as 'B',
               },
             ]
@@ -324,6 +326,8 @@ export function usePaste() {
               point: [point[0], point[1]],
               size: [400, 0], // use 0 here to enable auto-resize
               pageId: pageName,
+              fill: app.settings.color,
+              stroke: app.settings.color,
               blockType: 'P' as 'P',
             },
           ]
@@ -339,6 +343,8 @@ export function usePaste() {
               size: [400, 0], // use 0 here to enable auto-resize
               point: [point[0], point[1]],
               pageId: uuid,
+              fill: app.settings.color,
+              stroke: app.settings.color,
               blockType: 'B' as 'B',
               compact: true,
             },

tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { SVGContainer, TLComponentProps } from '@tldraw/react'
+import { SVGContainer, TLComponentProps, useApp } from '@tldraw/react'
 import { TLBoxShape, TLBoxShapeProps, getComputedColor } from '@tldraw/core'
 import { observer } from 'mobx-react-lite'
 import { CustomStyleProps, withClampedStyles } from './style-props'

tldraw/apps/tldraw-logseq/src/lib/shapes/style-props.tsx

@@ -1,8 +1,6 @@
 import type { Shape } from '.'
 
 export interface CustomStyleProps {
-  stroke: string
-  fill: string
   noFill: boolean
   strokeWidth: number
   strokeType: 'dashed' | 'line'

tldraw/apps/tldraw-logseq/src/lib/tools/BoxTool.tsx

@@ -4,6 +4,6 @@ import { BoxShape, type Shape } from '../shapes'
 
 export class BoxTool extends TLBoxTool<BoxShape, Shape, TLReactEventMap> {
   static id = 'box'
-  static shortcut = ['8']
+  static shortcut = ['7']
   Shape = BoxShape
 }

tldraw/apps/tldraw-logseq/src/lib/tools/EraseTool.tsx

@@ -4,5 +4,5 @@ import type { Shape } from '../shapes'
 
 export class NuEraseTool extends TLEraseTool<Shape, TLReactEventMap> {
   static id = 'erase'
-  static shortcut = ['5']
+  static shortcut = ['4']
 }

tldraw/apps/tldraw-logseq/src/lib/tools/HighlighterTool.tsx

@@ -4,7 +4,7 @@ import { HighlighterShape, type Shape } from '../shapes'
 
 export class HighlighterTool extends TLDrawTool<HighlighterShape, Shape, TLReactEventMap> {
   static id = 'highlighter'
-  static shortcut = ['4']
+  static shortcut = ['3']
   Shape = HighlighterShape
   simplify = true
   simplifyTolerance = 0.618

tldraw/apps/tldraw-logseq/src/lib/tools/LineTool.tsx

@@ -6,6 +6,6 @@ import { LineShape, type Shape } from '../shapes'
 export class LineTool extends TLLineTool<LineShape, Shape, TLReactEventMap> {
   static id = 'line'
   // not sure why "c" is not working in Logseq?
-  static shortcut = ['6']
+  static shortcut = ['5']
   Shape = LineShape
 }

tldraw/apps/tldraw-logseq/src/lib/tools/LogseqPortalTool/LogseqPortalTool.tsx

@@ -9,7 +9,7 @@ export class LogseqPortalTool extends TLTool<
   TLApp<Shape, TLReactEventMap>
 > {
   static id = 'logseq-portal'
-  static shortcut = ['9']
+  static shortcut = ['1']
   static states = [IdleState, CreatingState]
   static initial = 'idle'
 

tldraw/apps/tldraw-logseq/src/lib/tools/LogseqPortalTool/states/CreatingState.tsx

@@ -25,6 +25,8 @@ export class CreatingState extends TLToolState<
         parentId: this.app.currentPage.id,
         point: Vec.sub(this.app.inputs.originPoint, this.offset),
         size: LogseqPortalShape.defaultProps.size,
+        fill: this.app.settings.color,
+        stroke: this.app.settings.color,
       } as any)
       this.creatingShape = shape
       this.app.currentPage.addShapes(shape)

tldraw/apps/tldraw-logseq/src/lib/tools/PencilTool.tsx

@@ -4,7 +4,7 @@ import { PencilShape, type Shape } from '../shapes'
 
 export class PencilTool extends TLDrawTool<PencilShape, Shape, TLReactEventMap> {
   static id = 'pencil'
-  static shortcut = ['3']
+  static shortcut = ['2']
   Shape = PencilShape
   simplify = false
 }

tldraw/apps/tldraw-logseq/src/lib/tools/TextTool.tsx

@@ -4,6 +4,6 @@ import { TextShape, type Shape } from '../shapes'
 
 export class TextTool extends TLTextTool<TextShape, Shape, TLReactEventMap> {
   static id = 'text'
-  static shortcut = ['7']
+  static shortcut = ['6']
   Shape = TextShape
 }

tldraw/apps/tldraw-logseq/src/styles.css

@@ -17,8 +17,8 @@
   --color-text: var(--ls-primary-text-color);
   --color-text-inverted: var(--ls-tertiary-background-color);
   --color-hover: var(--ls-secondary-background-color);
-  --color-selectedStroke: rgb(42, 123, 253);
-  --color-selectedFill: #4285f4;
+  --color-selectedStroke: var(--color-indigo-900);
+  --color-selectedFill: var(--color-indigo-500);
   --color-selectedContrast: #fff;
   --shadow-small: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-medium: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
@@ -331,20 +331,22 @@ button.tl-select-input-trigger {
 
 .tl-geometry-tools-pane-anchor {
   @apply relative;
+
+  &[aria-expanded='true'] {
+    .tl-popover-indicator {
+      transform: rotate(180deg);
+      color: #000;
+    }
+  }
 }
 
-.tl-geometry-tools-pane {
-  @apply absolute rounded-lg flex flex-col items-center justify-center;
-  right: 100%;
-  top: calc(50% - 54px);
-  background-color: var(--ls-secondary-background-color);
-  padding: 4px;
-  gap: 8px;
-  box-shadow: var(--shadow-small);
+.tl-popover-indicator {
+  @apply absolute text-2xs;
 
-  .tl-button:not([data-selected='true']):hover {
-    background-color: var(--ls-tertiary-background-color);
-  }
+  opacity: 0.8;
+  pointer-events: none;
+  left: 0;
+  bottom: -3px;
 }
 
 .floating-panel[data-tool-locked='true'] > .tl-button[data-selected='true']::after {
@@ -873,6 +875,11 @@ html[data-theme='dark'] {
   background-color: var(--ls-border-color);
   width: 1px;
   opacity: 0.5;
+
+  &[data-orientation='horizontal'] {
+    height: 1px;
+    width: auto;
+  }
 }
 
 .tl-youtube-link,
@@ -899,25 +906,28 @@ html[data-theme='dark'] {
 .tl-popover-content {
   @apply rounded-sm drop-shadow-md;
 
-  padding: 4px;
-  width: 160px;
   background-color: var(--ls-secondary-background-color);
   z-index: 100000;
 }
 
+.tl-geometry-toolbar {
+  box-shadow: none;
+  flex-flow: column;
+}
+
 .tl-popover-arrow {
   fill: var(--ls-secondary-background-color);
 }
 
 .tl-color-palette {
-  @apply flex flex-wrap;
+  @apply grid grid-cols-4;
 }
 
 .tl-color-drip {
   @apply rounded text-sm;
 
-  width: 30px;
-  height: 30px;
+  width: 32px;
+  height: 32px;
   padding: 3px;
   border: 1px solid var(--ls-secondary-border-color);
   color: var(--ls-secondary-text-color);

tldraw/packages/core/src/lib/TLApi/TLApi.ts

@@ -166,6 +166,19 @@ export class TLApi<S extends TLShape = TLShape, K extends TLEventMap = TLEventMa
     return this
   }
 
+  setColor = (color: string): this => {
+    const { settings } = this.app
+
+    settings.update({ color: color })
+
+    this.app.selectedShapesArray.forEach(s => {
+      s.update({ fill: color, stroke: color })
+    })
+    this.app.persist()
+
+    return this
+  }
+
   save = () => {
     this.app.save()
     return this

tldraw/packages/core/src/lib/TLSettings.ts

@@ -4,6 +4,7 @@ import { observable, makeObservable, action } from 'mobx'
 export interface TLSettingsProps {
   mode: 'light' | 'dark'
   showGrid: boolean
+  color: string
 }
 
 export class TLSettings implements TLSettingsProps {
@@ -13,6 +14,7 @@ export class TLSettings implements TLSettingsProps {
 
   @observable mode: 'dark' | 'light' = 'light'
   @observable showGrid = true
+  @observable color = ''
 
   @action update(props: Partial<TLSettingsProps>): void {
     Object.assign(this, props)

tldraw/packages/core/src/lib/shapes/TLShape/TLShape.tsx

@@ -28,6 +28,8 @@ export interface TLShapeProps {
   type: any
   parentId: string
   name?: string
+  fill?: string
+  stroke?: string
   point: number[]
   size?: number[]
   scale?: number[]

tldraw/packages/core/src/lib/tools/TLBoxTool/states/CreatingState.tsx

@@ -32,6 +32,8 @@ export class CreatingState<
       type: Shape.id,
       parentId: currentPage.id,
       point: [...originPoint],
+      fill: this.app.settings.color,
+      stroke: this.app.settings.color,
       size: Vec.abs(Vec.sub(currentPoint, originPoint)),
     })
     this.initialBounds = {

tldraw/packages/core/src/lib/tools/TLDrawTool/states/CreatingState.tsx

@@ -71,6 +71,8 @@ export class CreatingState<
         point: originPoint.slice(0, 2),
         points: this.points,
         isComplete: false,
+        fill: this.app.settings.color,
+        stroke: this.app.settings.color,
       })
       this.app.currentPage.addShapes(this.shape)
     }

tldraw/packages/core/src/lib/tools/TLLineTool/states/CreatingState.tsx

@@ -32,6 +32,8 @@ export class CreatingState<
       type: Shape.id,
       parentId: this.app.currentPage.id,
       point: originPoint,
+      fill: this.app.settings.color,
+      stroke: this.app.settings.color,
     })
     this.initialShape = toJS(shape.props)
     this.currentShape = shape

tldraw/packages/core/src/lib/tools/TLMoveTool/TLMoveTool.ts

@@ -10,7 +10,7 @@ export class TLMoveTool<
   R extends TLApp<S, K> = TLApp<S, K>
 > extends TLTool<S, K, R> {
   static id = 'move'
-  static shortcut = ['2']
+  static shortcut = ['9']
 
   static states = [IdleState, IdleHoldState, PanningState, PinchingState]
 

tldraw/packages/core/src/lib/tools/TLSelectTool/TLSelectTool.tsx

@@ -33,7 +33,7 @@ export class TLSelectTool<
 
   static initial = 'idle'
 
-  static shortcut = ['1']
+  static shortcut = ['8']
 
   static states = [
     IdleState,

tldraw/packages/core/src/lib/tools/TLTextTool/states/CreatingState.tsx

@@ -36,6 +36,8 @@ export class CreatingState<
       text: '',
       size: [16, 32],
       isSizeLocked: true,
+      fill: this.app.settings.color,
+      stroke: this.app.settings.color,
     })
     this.creatingShape = shape
     transaction(() => {