feat: add scale option to shapes and arrows

logseq · Dec 28, 2022 · 5b1a323 · 5b1a323
1 parent 2010ccf
commit 5b1a323
Show file tree

Hide file tree

Showing 7 changed files with 164 additions and 16 deletions.
diff --git a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx b/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
@@ -63,10 +63,10 @@ export const shapeMapping: Record<ShapeType, ContextBarActionType[]> = {
   ],
   youtube: ['YoutubeLink', 'Links'],
   iframe: ['IFrameSource', 'Links'],
-  box: ['Edit', 'TextStyle', 'Swatch', 'NoFill', 'StrokeType', 'Links'],
-  ellipse: ['Edit', 'TextStyle', 'Swatch', 'NoFill', 'StrokeType', 'Links'],
-  polygon: ['Edit', 'TextStyle', 'Swatch', 'NoFill', 'StrokeType', 'Links'],
-  line: ['Edit', 'TextStyle', 'Swatch', 'ArrowMode', 'Links'],
+  box: ['Edit', 'TextStyle', 'Swatch', 'ScaleLevel', 'NoFill', 'StrokeType', 'Links'],
+  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'],
   text: ['Edit', 'TextStyle', 'Swatch', 'ScaleLevel', 'AutoResizing', 'Links'],

diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx
@@ -7,15 +7,29 @@ import { observer } from 'mobx-react-lite'
 import { CustomStyleProps, withClampedStyles } from './style-props'
 import { BindingIndicator } from './BindingIndicator'
 import { TextLabel } from './text/TextLabel'
+import type { SizeLevel } from '.'
+import { action, computed } from 'mobx'
+
 export interface BoxShapeProps extends TLBoxShapeProps, CustomStyleProps {
   borderRadius: number
   type: 'box'
   label: string
+  fontSize: number
   fontWeight: number
   italic: boolean
+  scaleLevel?: SizeLevel
 }
 
-const font = '18px / 1 var(--ls-font-family)'
+const font = '20px / 1 var(--ls-font-family)'
+
+const levelToScale = {
+  xs: 10,
+  sm: 16,
+  md: 20,
+  lg: 32,
+  xl: 48,
+  xxl: 60,
+}
 
 export class BoxShape extends TLBoxShape<BoxShapeProps> {
   static id = 'box'
@@ -31,6 +45,7 @@ export class BoxShape extends TLBoxShape<BoxShapeProps> {
     fill: '',
     noFill: false,
     fontWeight: 400,
+    fontSize: 20,
     italic: false,
     strokeType: 'line',
     strokeWidth: 2,
@@ -55,14 +70,15 @@ export class BoxShape extends TLBoxShape<BoxShapeProps> {
           label,
           italic,
           fontWeight,
+          fontSize,
         },
       } = this
 
       const labelSize =
         label || isEditing
           ? getTextLabelSize(
               label,
-              { fontFamily: 'var(--ls-font-family)', fontSize: 18, lineHeight: 1, fontWeight },
+              { fontFamily: 'var(--ls-font-family)', fontSize, lineHeight: 1, fontWeight },
               4
             )
           : [0, 0]
@@ -89,6 +105,7 @@ export class BoxShape extends TLBoxShape<BoxShapeProps> {
             color={getComputedColor(stroke, 'text')}
             offsetX={offset[0]}
             offsetY={offset[1]}
+            fontSize={fontSize}
             scale={scale}
             isEditing={isEditing}
             onChange={handleLabelChange}
@@ -127,6 +144,18 @@ export class BoxShape extends TLBoxShape<BoxShapeProps> {
     }
   )
 
+  @computed get scaleLevel() {
+    return this.props.scaleLevel ?? 'md'
+  }
+
+  @action setScaleLevel = async (v?: SizeLevel) => {
+    this.update({
+      scaleLevel: v,
+      fontSize: levelToScale[v ?? 'md'],
+    })
+    this.onResetBounds()
+  }
+
   ReactIndicator = observer(() => {
     const {
       props: {

diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/EllipseShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/EllipseShape.tsx
@@ -11,16 +11,30 @@ import * as React from 'react'
 import { observer } from 'mobx-react-lite'
 import { CustomStyleProps, withClampedStyles } from './style-props'
 import { TextLabel } from './text/TextLabel'
+import type { SizeLevel } from '.'
+import { action, computed } from 'mobx'
+
 export interface EllipseShapeProps extends TLEllipseShapeProps, CustomStyleProps {
   type: 'ellipse'
   size: number[]
   label: string
+  fontSize: number
   fontWeight: number
   italic: boolean
+  scaleLevel?: SizeLevel
 }
 
 const font = '18px / 1 var(--ls-font-family)'
 
+const levelToScale = {
+  xs: 10,
+  sm: 16,
+  md: 20,
+  lg: 32,
+  xl: 48,
+  xxl: 60,
+}
+
 export class EllipseShape extends TLEllipseShape<EllipseShapeProps> {
   static id = 'ellipse'
 
@@ -34,6 +48,7 @@ export class EllipseShape extends TLEllipseShape<EllipseShapeProps> {
     fill: '',
     noFill: false,
     fontWeight: 400,
+    fontSize: 20,
     italic: false,
     strokeType: 'line',
     strokeWidth: 2,
@@ -56,13 +71,14 @@ export class EllipseShape extends TLEllipseShape<EllipseShapeProps> {
         label,
         italic,
         fontWeight,
+        fontSize,
       } = this.props
 
       const labelSize =
         label || isEditing
           ? getTextLabelSize(
               label,
-              { fontFamily: 'var(--ls-font-family)', fontSize: 18, lineHeight: 1, fontWeight },
+              { fontFamily: 'var(--ls-font-family)', fontSize, lineHeight: 1, fontWeight },
               4
             )
           : [0, 0]
@@ -94,6 +110,7 @@ export class EllipseShape extends TLEllipseShape<EllipseShapeProps> {
             onChange={handleLabelChange}
             onBlur={onEditingEnd}
             fontStyle={italic ? 'italic' : 'normal'}
+            fontSize={fontSize}
             fontWeight={fontWeight}
             pointerEvents={!!label}
           />
@@ -121,6 +138,18 @@ export class EllipseShape extends TLEllipseShape<EllipseShapeProps> {
     }
   )
 
+  @computed get scaleLevel() {
+    return this.props.scaleLevel ?? 'md'
+  }
+
+  @action setScaleLevel = async (v?: SizeLevel) => {
+    this.update({
+      scaleLevel: v,
+      fontSize: levelToScale[v ?? 'md'],
+    })
+    this.onResetBounds()
+  }
+
   ReactIndicator = observer(() => {
     const {
       size: [w, h],

diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/LineShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/LineShape.tsx
@@ -10,15 +10,28 @@ import { CustomStyleProps, withClampedStyles } from './style-props'
 import { getTextLabelSize } from '@tldraw/core'
 import { LabelMask } from './text/LabelMask'
 import { TextLabel } from './text/TextLabel'
+import type { SizeLevel } from '.'
+import { action, computed } from 'mobx'
 
 interface LineShapeProps extends CustomStyleProps, TLLineShapeProps {
   type: 'line'
   label: string
+  fontSize: number
   fontWeight: number
   italic: boolean
+  scaleLevel?: SizeLevel
 }
 
-const font = '18px / 1 var(--ls-font-family)'
+const font = '20px / 1 var(--ls-font-family)'
+
+const levelToScale = {
+  xs: 10,
+  sm: 16,
+  md: 20,
+  lg: 32,
+  xl: 48,
+  xxl: 60,
+}
 
 export class LineShape extends TLLineShape<LineShapeProps> {
   static id = 'line'
@@ -36,6 +49,7 @@ export class LineShape extends TLLineShape<LineShapeProps> {
     fill: '',
     noFill: true,
     fontWeight: 400,
+    fontSize: 20,
     italic: false,
     strokeType: 'line',
     strokeWidth: 1,
@@ -57,9 +71,17 @@ export class LineShape extends TLLineShape<LineShapeProps> {
       label,
       italic,
       fontWeight,
+      fontSize,
       id,
     } = this.props
-    const labelSize = label || isEditing ? getTextLabelSize(label, font, 6) : [0, 0]
+    const labelSize =
+    label || isEditing
+      ? getTextLabelSize(
+          label,
+          { fontFamily: 'var(--ls-font-family)', fontSize, lineHeight: 1, fontWeight },
+          6
+        )
+      : [0, 0]
     const midPoint = Vec.med(start.point, end.point)
     const dist = Vec.dist(start.point, end.point)
     const scale = Math.max(
@@ -81,6 +103,7 @@ export class LineShape extends TLLineShape<LineShapeProps> {
         <TextLabel
           font={font}
           text={label}
+          fontSize={fontSize}
           color={getComputedColor(stroke, 'text')}
           offsetX={offset[0]}
           offsetY={offset[1]}
@@ -102,16 +125,37 @@ export class LineShape extends TLLineShape<LineShapeProps> {
     )
   })
 
+  @computed get scaleLevel() {
+    return this.props.scaleLevel ?? 'md'
+  }
+
+  @action setScaleLevel = async (v?: SizeLevel) => {
+    this.update({
+      scaleLevel: v,
+      fontSize: levelToScale[v ?? 'md'],
+    })
+    this.onResetBounds()
+  }
+
   ReactIndicator = observer(({ isEditing }: TLComponentProps) => {
     const {
       id,
       decorations,
       label,
       strokeWidth,
+      fontSize,
+      fontWeight,
       handles: { start, end },
     } = this.props
     const bounds = this.getBounds()
-    const labelSize = label ? getTextLabelSize(label, font, 6) : [0, 0]
+    const labelSize =
+    label || isEditing
+      ? getTextLabelSize(
+          label,
+          { fontFamily: 'var(--ls-font-family)', fontSize, lineHeight: 1, fontWeight },
+          6
+        )
+      : [0, 0]
     const midPoint = Vec.med(start.point, end.point)
     const dist = Vec.dist(start.point, end.point)
     const scale = Math.max(
@@ -160,6 +204,7 @@ export class LineShape extends TLLineShape<LineShapeProps> {
       strokeType,
       decorations,
       label,
+      scaleLevel,
       handles: { start, end },
     } = this.props
     const midPoint = Vec.med(start.point, end.point)
@@ -172,6 +217,7 @@ export class LineShape extends TLLineShape<LineShapeProps> {
             strokeWidth,
             strokeType,
           }}
+          scaleLevel={scaleLevel}
           start={start.point}
           end={end.point}
           decorationStart={decorations?.start}

diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/PolygonShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/PolygonShape.tsx
@@ -11,15 +11,28 @@ import * as React from 'react'
 import { observer } from 'mobx-react-lite'
 import { CustomStyleProps, withClampedStyles } from './style-props'
 import { TextLabel } from './text/TextLabel'
+import type { SizeLevel } from '.'
+import { action, computed } from 'mobx'
 
 interface PolygonShapeProps extends TLPolygonShapeProps, CustomStyleProps {
   type: 'polygon'
   label: string
+  fontSize: number
   fontWeight: number
   italic: boolean
+  scaleLevel?: SizeLevel
 }
 
-const font = '18px / 1 var(--ls-font-family)'
+const font = '20px / 1 var(--ls-font-family)'
+
+const levelToScale = {
+  xs: 10,
+  sm: 16,
+  md: 20,
+  lg: 32,
+  xl: 48,
+  xxl: 60,
+}
 
 export class PolygonShape extends TLPolygonShape<PolygonShapeProps> {
   static id = 'polygon'
@@ -36,6 +49,7 @@ export class PolygonShape extends TLPolygonShape<PolygonShapeProps> {
     stroke: '',
     fill: '',
     fontWeight: 400,
+    fontSize: 20,
     italic: false,
     noFill: false,
     strokeType: 'line',
@@ -60,6 +74,7 @@ export class PolygonShape extends TLPolygonShape<PolygonShapeProps> {
           label,
           italic,
           fontWeight,
+          fontSize,
         },
       } = this
 
@@ -69,7 +84,7 @@ export class PolygonShape extends TLPolygonShape<PolygonShapeProps> {
         label || isEditing
           ? getTextLabelSize(
               label,
-              { fontFamily: 'var(--ls-font-family)', fontSize: 18, lineHeight: 1, fontWeight },
+              { fontFamily: 'var(--ls-font-family)', fontSize, lineHeight: 1, fontWeight },
               4
             )
           : [0, 0]
@@ -102,6 +117,7 @@ export class PolygonShape extends TLPolygonShape<PolygonShapeProps> {
           <TextLabel
             font={font}
             text={label}
+            fontSize={fontSize}
             color={getComputedColor(stroke, 'text')}
             offsetX={offset[0]}
             offsetY={offset[1] / scale}
@@ -136,6 +152,18 @@ export class PolygonShape extends TLPolygonShape<PolygonShapeProps> {
     }
   )
 
+  @computed get scaleLevel() {
+    return this.props.scaleLevel ?? 'md'
+  }
+
+  @action setScaleLevel = async (v?: SizeLevel) => {
+    this.update({
+      scaleLevel: v,
+      fontSize: levelToScale[v ?? 'md'],
+    })
+    this.onResetBounds()
+  }
+
   ReactIndicator = observer(() => {
     const {
       offset: [x, y],