feat: introduce global scale level option

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

@@ -181,6 +181,19 @@ export class TLApi<S extends TLShape = TLShape, K extends TLEventMap = TLEventMa
     return this
   }
 
+  setScaleLevel = (scaleLevel: string): this => {
+    const { settings } = this.app
+
+    settings.update({ scaleLevel })
+
+    this.app.selectedShapes.forEach(shape => {
+      shape.setScaleLevel(scaleLevel)
+    })
+    this.app.persist()
+
+    return this
+  }
+
   save = () => {
     this.app.save()
     return this

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

@@ -5,6 +5,7 @@ export interface TLSettingsProps {
   mode: 'light' | 'dark'
   showGrid: boolean
   color: string
+  scaleLevel: string
 }
 
 export class TLSettings implements TLSettingsProps {
@@ -14,6 +15,7 @@ export class TLSettings implements TLSettingsProps {
 
   @observable mode: 'dark' | 'light' = 'light'
   @observable showGrid = true
+  @observable scaleLevel = 'md'
   @observable color = ''
 
   @action update(props: Partial<TLSettingsProps>): void {

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

@@ -30,6 +30,7 @@ export interface TLShapeProps {
   name?: string
   fill?: string
   stroke?: string
+  scaleLevel?: string
   refs?: string[] // block id or page name
   point: number[]
   size?: number[]

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

@@ -58,6 +58,7 @@ export class CreatingState<
       this.initialBounds.maxY = this.initialBounds.minY + this.initialBounds.height
     }
     this.creatingShape = shape
+    this.creatingShape.setScaleLevel(this.app.settings.scaleLevel)
     this.app.currentPage.addShapes(shape as unknown as S)
     this.app.setSelectedShapes([shape as unknown as S])
   }

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

@@ -77,6 +77,7 @@ export class CreatingState<
         fill: this.app.settings.color,
         stroke: this.app.settings.color,
       })
+      this.shape.setScaleLevel(this.app.settings.scaleLevel)
       this.app.currentPage.addShapes(this.shape)
     }
   }

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

@@ -34,6 +34,7 @@ export class CreatingState<
       point: originPoint,
       fill: this.app.settings.color,
       stroke: this.app.settings.color,
+      scaleLevel: this.app.settings.scaleLevel,
     })
     this.initialShape = toJS(shape.props)
     this.currentShape = shape

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

@@ -40,6 +40,7 @@ export class CreatingState<
       stroke: this.app.settings.color,
     })
     this.creatingShape = shape
+    this.creatingShape.setScaleLevel(this.app.settings.scaleLevel)
     transaction(() => {
       this.app.currentPage.addShapes(shape as unknown as S)
       const { bounds } = shape