fix(whiteboard): making tool locked by default

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

@@ -95,10 +95,7 @@ export const PrimaryTools = observer(function PrimaryTools() {
 
   return (
     <div className="tl-primary-tools">
-      <div
-        className="tl-toolbar tl-tools-floating-panel"
-        data-tool-locked={app.settings.isToolLocked}
-      >
+      <div className="tl-toolbar tl-tools-floating-panel">
         <ToolButton title="Select" id="select" icon="select-cursor" />
         <ToolButton
           title="Move"

tldraw/demo/src/App.jsx

@@ -48,11 +48,13 @@ const Page = props => {
   const [value, setValue] = React.useState(JSON.stringify(props, null, 2))
   return (
     <div className="w-full font-mono page">
-      The Circle components are a collection of standardized UI elements and patterns for building
-      products. These pages provide more information and best practices on how to use the
-      components.The Circle components are a collection of standardized UI elements and patterns for
-      building products. These pages provide more information and best practices on how to use the
-      components.
+      <div className="min-w-[240px]">
+        The Circle components are a collection of standardized UI elements and patterns for building
+        products. These pages provide more information and best practices on how to use the
+        components.The Circle components are a collection of standardized UI elements and patterns
+        for building products. These pages provide more information and best practices on how to use
+        the components.
+      </div>
     </div>
   )
 }
@@ -60,11 +62,13 @@ const Page = props => {
 const Block = props => {
   return (
     <div className="w-full font-mono single-block">
-      The Circle components are a collection of standardized UI elements and patterns for building
-      products. These pages provide more information and best practices on how to use the
-      components.The Circle components are a collection of standardized UI elements and patterns for
-      building products. These pages provide more information and best practices on how to use the
-      components.
+      <div className="min-w-[240px]">
+        The Circle components are a collection of standardized UI elements and patterns for building
+        products. These pages provide more information and best practices on how to use the
+        components.The Circle components are a collection of standardized UI elements and patterns
+        for building products. These pages provide more information and best practices on how to use
+        the components.
+      </div>
     </div>
   )
 }

tldraw/demo/vite.config.js

@@ -20,12 +20,12 @@ export default defineConfig({
         plugins: [[require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }]],
       },
     }),
-    basicSsl(),
+    // basicSsl(),
   ],
   server: {
     port: '3031',
     fs: { strict: false },
-    https: true,
+    // https: true,
   },
   resolve: {
     alias: [

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

@@ -166,12 +166,6 @@ export class TLApi<S extends TLShape = TLShape, K extends TLEventMap = TLEventMa
     return this
   }
 
-  toggleToolLock = (): this => {
-    const { settings } = this.app
-    settings.update({ showGrid: !settings.isToolLocked })
-    return this
-  }
-
   save = () => {
     this.app.save()
     return this

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

@@ -925,9 +925,7 @@ export class TLApp<
     this.selectedTool.transition('idleHold')
   }
 
-  readonly onTransition: TLStateEvents<S, K>['onTransition'] = () => {
-    this.settings.update({ isToolLocked: false })
-  }
+  readonly onTransition: TLStateEvents<S, K>['onTransition'] = () => {}
 
   readonly onWheel: TLEvents<S, K>['wheel'] = (info, e) => {
     if (e.ctrlKey || e.metaKey || this.isIn('select.contextMenu')) {

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

@@ -216,9 +216,6 @@ export class TLBaseLineBindingState<
     if (this.currentShape) {
       this.app.setSelectedShapes([this.currentShape])
     }
-    if (!this.app.settings.isToolLocked) {
-      this.app.transition('select')
-    }
     this.app.persist()
   }
 

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

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

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

@@ -86,9 +86,6 @@ export class CreatingState<
     if (this.creatingShape) {
       this.app.setSelectedShapes([this.creatingShape as unknown as S])
     }
-    if (!this.app.settings.isToolLocked) {
-      this.app.transition('select')
-    }
     this.app.persist()
   }
 

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

@@ -48,9 +48,6 @@ export class CreatingState<
         this.app.setSelectedShapes([shape])
       })
     }
-    if (!this.app.settings.isToolLocked) {
-      this.app.transition('select')
-    }
     this.app.persist()
   }
 

tldraw/packages/react/src/hooks/useDebounced.ts

@@ -5,11 +5,9 @@ export function useDebouncedValue<T>(value: T, ms = 0) {
   useEffect(() => {
     let canceled = false
     const handler = setTimeout(() => {
-      requestIdleCallback(() => {
-        if (!canceled) {
-          setDebouncedValue(value)
-        }
-      })
+      if (!canceled) {
+        setDebouncedValue(value)
+      }
     }, ms)
     return () => {
       canceled = true