feat: add scale option to pencil and highlighter

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

@@ -67,8 +67,8 @@ export const shapeMapping: Record<ShapeType, ContextBarActionType[]> = {
   ellipse: ['Edit', 'TextStyle', 'Swatch', 'ScaleLevel', 'NoFill', 'StrokeType', 'Links'],
   polygon: ['Edit', 'TextStyle', 'Swatch', 'ScaleLevel', 'NoFill', 'StrokeType', 'Links'],
   line: ['Edit', 'TextStyle', 'Swatch', 'ScaleLevel', 'ArrowMode', 'Links'],
-  pencil: ['Swatch', 'Links'],
-  highlighter: ['Swatch', 'Links'],
+  pencil: ['Swatch', 'Links', 'ScaleLevel'],
+  highlighter: ['Swatch', 'Links', 'ScaleLevel'],
   text: ['Edit', 'TextStyle', 'Swatch', 'ScaleLevel', 'AutoResizing', 'Links'],
   html: ['ScaleLevel', 'AutoResizing', 'Links'],
   image: ['Links'],

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

@@ -2,11 +2,22 @@
 import { SvgPathUtils, TLDrawShape, TLDrawShapeProps, getComputedColor } from '@tldraw/core'
 import { SVGContainer, TLComponentProps } from '@tldraw/react'
 import { observer } from 'mobx-react-lite'
-import { computed, makeObservable } from 'mobx'
+import { action, computed, makeObservable } from 'mobx'
+import type { SizeLevel } from '.'
 import { CustomStyleProps, withClampedStyles } from './style-props'
 
 export interface HighlighterShapeProps extends TLDrawShapeProps, CustomStyleProps {
   type: 'highlighter'
+  scaleLevel?: SizeLevel
+}
+
+const levelToScale = {
+  xs: 1,
+  sm: 1.6,
+  md: 2,
+  lg: 3.2,
+  xl: 4.8,
+  xxl: 6,
 }
 
 export class HighlighterShape extends TLDrawShape<HighlighterShapeProps> {
@@ -59,6 +70,18 @@ export class HighlighterShape extends TLDrawShape<HighlighterShapeProps> {
     )
   })
 
+  @computed get scaleLevel() {
+    return this.props.scaleLevel ?? 'md'
+  }
+
+  @action setScaleLevel = async (v?: SizeLevel) => {
+    this.update({
+      scaleLevel: v,
+      strokeWidth: levelToScale[v ?? 'md'],
+    })
+    this.onResetBounds()
+  }
+
   ReactIndicator = observer(() => {
     const { pointsPath } = this
     return <path d={pointsPath} fill="none" />

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

@@ -2,7 +2,7 @@
 import { SvgPathUtils, TLDrawShape, TLDrawShapeProps, getComputedColor } from '@tldraw/core'
 import { SVGContainer, TLComponentProps } from '@tldraw/react'
 import Vec from '@tldraw/vec'
-import { computed, makeObservable } from 'mobx'
+import { action, computed, makeObservable } from 'mobx'
 import { observer } from 'mobx-react-lite'
 import {
   getStrokeOutlinePoints,
@@ -10,10 +10,21 @@ import {
   StrokeOptions,
   StrokePoint,
 } from 'perfect-freehand'
+import type { SizeLevel } from '.'
 import { CustomStyleProps, withClampedStyles } from './style-props'
 
 export interface PencilShapeProps extends TLDrawShapeProps, CustomStyleProps {
   type: 'pencil'
+  scaleLevel?: SizeLevel
+}
+
+const levelToScale = {
+  xs: 1,
+  sm: 1.6,
+  md: 2,
+  lg: 3.2,
+  xl: 4.8,
+  xxl: 6,
 }
 
 const simulatePressureSettings: StrokeOptions = {
@@ -108,6 +119,19 @@ export class PencilShape extends TLDrawShape<PencilShapeProps> {
     )
   })
 
+
+  @computed get scaleLevel() {
+    return this.props.scaleLevel ?? 'md'
+  }
+
+  @action setScaleLevel = async (v?: SizeLevel) => {
+    this.update({
+      scaleLevel: v,
+      strokeWidth: levelToScale[v ?? 'md'],
+    })
+    this.onResetBounds()
+  }
+
   ReactIndicator = observer(() => {
     const { pointsPath } = this
     return <path d={pointsPath} />