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'],
|
ellipse: ['Edit', 'TextStyle', 'Swatch', 'ScaleLevel', 'NoFill', 'StrokeType', 'Links'],
|
||||||
polygon: ['Edit', 'TextStyle', 'Swatch', 'ScaleLevel', 'NoFill', 'StrokeType', 'Links'],
|
polygon: ['Edit', 'TextStyle', 'Swatch', 'ScaleLevel', 'NoFill', 'StrokeType', 'Links'],
|
||||||
line: ['Edit', 'TextStyle', 'Swatch', 'ScaleLevel', 'ArrowMode', 'Links'],
|
line: ['Edit', 'TextStyle', 'Swatch', 'ScaleLevel', 'ArrowMode', 'Links'],
|
||||||
pencil: ['Swatch', 'Links'],
|
pencil: ['Swatch', 'Links', 'ScaleLevel'],
|
||||||
highlighter: ['Swatch', 'Links'],
|
highlighter: ['Swatch', 'Links', 'ScaleLevel'],
|
||||||
text: ['Edit', 'TextStyle', 'Swatch', 'ScaleLevel', 'AutoResizing', 'Links'],
|
text: ['Edit', 'TextStyle', 'Swatch', 'ScaleLevel', 'AutoResizing', 'Links'],
|
||||||
html: ['ScaleLevel', 'AutoResizing', 'Links'],
|
html: ['ScaleLevel', 'AutoResizing', 'Links'],
|
||||||
image: ['Links'],
|
image: ['Links'],
|
||||||
|
|
|
@ -2,11 +2,22 @@
|
||||||
import { SvgPathUtils, TLDrawShape, TLDrawShapeProps, getComputedColor } from '@tldraw/core'
|
import { SvgPathUtils, TLDrawShape, TLDrawShapeProps, getComputedColor } from '@tldraw/core'
|
||||||
import { SVGContainer, TLComponentProps } from '@tldraw/react'
|
import { SVGContainer, TLComponentProps } from '@tldraw/react'
|
||||||
import { observer } from 'mobx-react-lite'
|
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'
|
import { CustomStyleProps, withClampedStyles } from './style-props'
|
||||||
|
|
||||||
export interface HighlighterShapeProps extends TLDrawShapeProps, CustomStyleProps {
|
export interface HighlighterShapeProps extends TLDrawShapeProps, CustomStyleProps {
|
||||||
type: 'highlighter'
|
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> {
|
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(() => {
|
ReactIndicator = observer(() => {
|
||||||
const { pointsPath } = this
|
const { pointsPath } = this
|
||||||
return <path d={pointsPath} fill="none" />
|
return <path d={pointsPath} fill="none" />
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
import { SvgPathUtils, TLDrawShape, TLDrawShapeProps, getComputedColor } from '@tldraw/core'
|
import { SvgPathUtils, TLDrawShape, TLDrawShapeProps, getComputedColor } from '@tldraw/core'
|
||||||
import { SVGContainer, TLComponentProps } from '@tldraw/react'
|
import { SVGContainer, TLComponentProps } from '@tldraw/react'
|
||||||
import Vec from '@tldraw/vec'
|
import Vec from '@tldraw/vec'
|
||||||
import { computed, makeObservable } from 'mobx'
|
import { action, computed, makeObservable } from 'mobx'
|
||||||
import { observer } from 'mobx-react-lite'
|
import { observer } from 'mobx-react-lite'
|
||||||
import {
|
import {
|
||||||
getStrokeOutlinePoints,
|
getStrokeOutlinePoints,
|
||||||
|
@ -10,10 +10,21 @@ import {
|
||||||
StrokeOptions,
|
StrokeOptions,
|
||||||
StrokePoint,
|
StrokePoint,
|
||||||
} from 'perfect-freehand'
|
} from 'perfect-freehand'
|
||||||
|
import type { SizeLevel } from '.'
|
||||||
import { CustomStyleProps, withClampedStyles } from './style-props'
|
import { CustomStyleProps, withClampedStyles } from './style-props'
|
||||||
|
|
||||||
export interface PencilShapeProps extends TLDrawShapeProps, CustomStyleProps {
|
export interface PencilShapeProps extends TLDrawShapeProps, CustomStyleProps {
|
||||||
type: 'pencil'
|
type: 'pencil'
|
||||||
|
scaleLevel?: SizeLevel
|
||||||
|
}
|
||||||
|
|
||||||
|
const levelToScale = {
|
||||||
|
xs: 1,
|
||||||
|
sm: 1.6,
|
||||||
|
md: 2,
|
||||||
|
lg: 3.2,
|
||||||
|
xl: 4.8,
|
||||||
|
xxl: 6,
|
||||||
}
|
}
|
||||||
|
|
||||||
const simulatePressureSettings: StrokeOptions = {
|
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(() => {
|
ReactIndicator = observer(() => {
|
||||||
const { pointsPath } = this
|
const { pointsPath } = this
|
||||||
return <path d={pointsPath} />
|
return <path d={pointsPath} />
|
||||||
|
|
Loading…
Reference in New Issue