mirror of https://github.com/logseq/logseq
feat: add scale option to pencil and highlighter
parent
c33fc8a60e
commit
21ddb7e0d6
|
@ -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'],
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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} />
|
||||
|
|
Loading…
Reference in New Issue