From 21ddb7e0d65feb1b102c49324e34360bcbf58523 Mon Sep 17 00:00:00 2001
From: Konstantinos Kaloutas <konstantinos@logseq.com>
Date: Mon, 2 Jan 2023 18:56:53 +0200
Subject: [PATCH] feat: add scale option to pencil and highlighter

---
 .../ContextBar/contextBarActionFactory.tsx    |  4 +--
 .../src/lib/shapes/HighlighterShape.tsx       | 25 +++++++++++++++++-
 .../src/lib/shapes/PencilShape.tsx            | 26 ++++++++++++++++++-
 3 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx b/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
index fd0d1fa1e..29b451ceb 100644
--- a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
+++ b/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'],
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/HighlighterShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/HighlighterShape.tsx
index 71fe54457..a428be44e 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/HighlighterShape.tsx
+++ b/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" />
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/PencilShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/PencilShape.tsx
index 82f40a009..9d775824e 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/PencilShape.tsx
+++ b/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} />