feat: introduce global scale level option

samsabra · Apr 14, 2023 · e5ea451 · e5ea451
1 parent a7fe7fa
commit e5ea451
Show file tree

Hide file tree

Showing 18 changed files with 208 additions and 57 deletions.
diff --git a/tldraw/apps/tldraw-logseq/package.json b/tldraw/apps/tldraw-logseq/package.json
@@ -13,7 +13,7 @@
     "@radix-ui/react-context-menu": "^2.1.0",
     "@radix-ui/react-dropdown-menu": "^2.0.1",
     "@radix-ui/react-popover": "^1.0.0",
-    "@radix-ui/react-select": "^1.1.2",
+    "@radix-ui/react-select": "^1.2.1",
     "@radix-ui/react-separator": "^1.0.1",
     "@radix-ui/react-slider": "^1.1.0",
     "@radix-ui/react-switch": "^1.0.1",

diff --git a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx b/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
@@ -19,7 +19,7 @@ import type {
 import { Button } from '../Button'
 import { TablerIcon } from '../icons'
 import { ColorInput } from '../inputs/ColorInput'
-import { SelectInput, type SelectOption } from '../inputs/SelectInput'
+import { ScaleInput } from '../inputs/ScaleInput'
 import { ShapeLinksInput } from '../inputs/ShapeLinksInput'
 import { TextInput } from '../inputs/TextInput'
 import {
@@ -211,44 +211,9 @@ const ScaleLevelAction = observer(() => {
   const app = useApp<Shape>()
   const shapes = filterShapeByAction<LogseqPortalShape>(app.selectedShapesArray, 'ScaleLevel')
   const scaleLevel = new Set(shapes.map(s => s.scaleLevel)).size > 1 ? '' : shapes[0].scaleLevel
-  const sizeOptions: SelectOption[] = [
-    {
-      label: isMobile() ? 'XS' : 'Extra Small',
-      value: 'xs',
-    },
-    {
-      label: isMobile() ? 'SM' : 'Small',
-      value: 'sm',
-    },
-    {
-      label: isMobile() ? 'MD' : 'Medium',
-      value: 'md',
-    },
-    {
-      label: isMobile() ? 'LG' : 'Large',
-      value: 'lg',
-    },
-    {
-      label: isMobile() ? 'XL' : 'Extra Large',
-      value: 'xl',
-    },
-    {
-      label: isMobile() ? 'XXL' : 'Huge',
-      value: 'xxl',
-    },
-  ]
+
   return (
-    <SelectInput
-      tooltip="Scale level"
-      options={sizeOptions}
-      value={scaleLevel}
-      onValueChange={v => {
-        shapes.forEach(shape => {
-          shape.setScaleLevel(v as LogseqPortalShape['props']['scaleLevel'])
-        })
-        app.persist()
-      }}
-    />
+    <ScaleInput scaleLevel={scaleLevel} compact={isMobile()} />
   )
 })
 

diff --git a/tldraw/apps/tldraw-logseq/src/components/PrimaryTools/PrimaryTools.tsx b/tldraw/apps/tldraw-logseq/src/components/PrimaryTools/PrimaryTools.tsx
@@ -4,6 +4,7 @@ import * as React from 'react'
 import { ToolButton } from '../ToolButton'
 import { GeometryTools } from '../GeometryTools'
 import { ColorInput } from '../inputs/ColorInput'
+import { ScaleInput } from '../inputs/ScaleInput'
 import * as Separator from '@radix-ui/react-separator'
 
 export const PrimaryTools = observer(function PrimaryTools() {
@@ -36,6 +37,7 @@ export const PrimaryTools = observer(function PrimaryTools() {
           style={{ margin: '0 -4px' }}
         />
         <ColorInput popoverSide="left" color={app.settings.color} setColor={handleSetColor} />
+        <ScaleInput scaleLevel={app.settings.scaleLevel} popoverSide="left" compact={true} />
       </div>
     </div>
   )

diff --git a/tldraw/apps/tldraw-logseq/src/components/inputs/ScaleInput.tsx b/tldraw/apps/tldraw-logseq/src/components/inputs/ScaleInput.tsx
@@ -0,0 +1,59 @@
+import { SelectInput, type SelectOption } from '../inputs/SelectInput'
+import type { Side } from '@radix-ui/react-popper'
+import type { SizeLevel } from '../../lib'
+import { useApp } from '@tldraw/react'
+
+interface ScaleInputProps extends React.HTMLAttributes<HTMLButtonElement> {
+  scaleLevel?: SizeLevel,
+  compact?: boolean,
+  popoverSide?: Side
+}
+
+export function ScaleInput({
+  scaleLevel,
+  compact,
+  popoverSide,
+  ...rest
+}: ScaleInputProps) {
+  const app = useApp<Shape>()
+
+  const sizeOptions: SelectOption[] = [
+    {
+      label: compact ? 'XS' : 'Extra Small',
+      value: 'xs',
+    },
+    {
+      label: compact ? 'SM' : 'Small',
+      value: 'sm',
+    },
+    {
+      label: compact ? 'MD' : 'Medium',
+      value: 'md',
+    },
+    {
+      label: compact ? 'LG' : 'Large',
+      value: 'lg',
+    },
+    {
+      label: compact ? 'XL' : 'Extra Large',
+      value: 'xl',
+    },
+    {
+      label: compact ? 'XXL' : 'Huge',
+      value: 'xxl',
+    },
+  ]
+
+  return (
+    <SelectInput
+      tooltip="Scale level"
+      options={sizeOptions}
+      value={scaleLevel}
+      popoverSide={popoverSide}
+      chevron={!compact}
+      onValueChange={v => {
+        app.api.setScaleLevel(v)
+      }}
+    />
+  )
+}
diff --git a/tldraw/apps/tldraw-logseq/src/components/inputs/SelectInput.tsx b/tldraw/apps/tldraw-logseq/src/components/inputs/SelectInput.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 import * as Select from '@radix-ui/react-select'
 import { TablerIcon } from '../icons'
 import { Tooltip } from '../Tooltip'
+import type { Side } from '@radix-ui/react-popper'
 
 export interface SelectOption {
   value: string
@@ -11,11 +12,13 @@ export interface SelectOption {
 interface SelectInputProps extends React.HTMLAttributes<HTMLElement> {
   options: SelectOption[]
   value: string
-  tooltip?: React.ReactNode
+  tooltip?: React.ReactNode,
+  popoverSide?: Side,
+  chevron?: boolean,
   onValueChange: (value: string) => void
 }
 
-export function SelectInput({ options, tooltip, value, onValueChange, ...rest }: SelectInputProps) {
+export function SelectInput({ options, tooltip, popoverSide, chevron = true, value, onValueChange, ...rest }: SelectInputProps) {
   const [isOpen, setIsOpen] = React.useState(false)
   return (
     <div {...rest} className="tl-select-input">
@@ -25,19 +28,21 @@ export function SelectInput({ options, tooltip, value, onValueChange, ...rest }:
         value={value}
         onValueChange={onValueChange}
       >
-        <Tooltip content={tooltip}>
+        <Tooltip content={tooltip} side={popoverSide}>
           <Select.Trigger className="tl-select-input-trigger">
             <div className="tl-select-input-trigger-value">
               <Select.Value />
             </div>
-            <Select.Icon style={{ lineHeight: 1 }}>
-              <TablerIcon name={isOpen ? 'chevron-up' : 'chevron-down'} />
-            </Select.Icon>
+            {chevron &&
+              <Select.Icon style={{ lineHeight: 1 }} className="ml-1 md:ml-3">
+                <TablerIcon name={isOpen ? 'chevron-up' : 'chevron-down'} />
+              </Select.Icon>
+            }
           </Select.Trigger>
         </Tooltip>
 
         <Select.Portal className="tl-select-input-portal">
-          <Select.Content className="tl-select-input-content">
+          <Select.Content className="tl-select-input-content" align="center">
             <Select.ScrollUpButton />
             <Select.Viewport className="tl-select-input-viewport">
               {options.map(option => {

diff --git a/tldraw/apps/tldraw-logseq/src/hooks/usePaste.ts b/tldraw/apps/tldraw-logseq/src/hooks/usePaste.ts
@@ -330,6 +330,7 @@ const handleCreatingShapes = async (
             pageId: blockRef,
             fill: app.settings.color,
             stroke: app.settings.color,
+            scaleLevel: app.settings.scaleLevel,
             blockType: 'B' as 'B',
           },
         ]
@@ -346,6 +347,7 @@ const handleCreatingShapes = async (
           pageId: pageName,
           fill: app.settings.color,
           stroke: app.settings.color,
+          scaleLevel: app.settings.scaleLevel,
           blockType: 'P' as 'P',
         },
       ]
@@ -370,6 +372,7 @@ const handleCreatingShapes = async (
             pageId: uuid,
             fill: app.settings.color,
             stroke: app.settings.color,
+            scaleLevel: app.settings.scaleLevel,
             blockType: 'B' as 'B',
             compact: true,
           },

diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx
@@ -152,6 +152,7 @@ export class BoxShape extends TLBoxShape<BoxShapeProps> {
     this.update({
       scaleLevel: v,
       fontSize: levelToScale[v ?? 'md'],
+      strokeWidth: levelToScale[v ?? 'md'] / 10,
     })
     this.onResetBounds()
   }

diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/EllipseShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/EllipseShape.tsx
@@ -146,6 +146,7 @@ export class EllipseShape extends TLEllipseShape<EllipseShapeProps> {
     this.update({
       scaleLevel: v,
       fontSize: levelToScale[v ?? 'md'],
+      strokeWidth: levelToScale[v ?? 'md'] / 10,
     })
     this.onResetBounds()
   }

diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/PolygonShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/PolygonShape.tsx
@@ -160,6 +160,7 @@ export class PolygonShape extends TLPolygonShape<PolygonShapeProps> {
     this.update({
       scaleLevel: v,
       fontSize: levelToScale[v ?? 'md'],
+      strokeWidth: levelToScale[v ?? 'md'] / 10,
     })
     this.onResetBounds()
   }

diff --git a/tldraw/apps/tldraw-logseq/src/styles.css b/tldraw/apps/tldraw-logseq/src/styles.css
@@ -301,6 +301,17 @@ html[data-theme='light'] {
 
 .tl-tools-floating-panel {
   flex-flow: column;
+
+  .tl-select-input-trigger {
+    @apply p-0 text-xs;
+
+    height: 32px;
+    min-width: 32px;
+  }
+
+  .tl-select-input-trigger-value {
+    @apply font-semibold justify-center;
+  }
 }
 
 button.tl-select-input-trigger {
@@ -314,7 +325,7 @@ button.tl-select-input-trigger {
 }
 
 .tl-select-input-trigger-value {
-  @apply flex items-center justify-start flex-1 mr-1 md:mr-3;
+  @apply flex items-center justify-start flex-1;
 }
 
 .tl-select-input-viewport {

diff --git a/tldraw/packages/core/src/lib/TLApi/TLApi.ts b/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

diff --git a/tldraw/packages/core/src/lib/TLSettings.ts b/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 {

diff --git a/tldraw/packages/core/src/lib/shapes/TLShape/TLShape.tsx b/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[]

diff --git a/tldraw/packages/core/src/lib/tools/TLBoxTool/states/CreatingState.tsx b/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])
   }

diff --git a/tldraw/packages/core/src/lib/tools/TLDrawTool/states/CreatingState.tsx b/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)
     }
   }

diff --git a/tldraw/packages/core/src/lib/tools/TLLineTool/states/CreatingState.tsx b/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

diff --git a/tldraw/packages/core/src/lib/tools/TLTextTool/states/CreatingState.tsx b/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