fix: context bar action factory

This commit is contained in:
Konstantinos Kaloutas
2023-04-18 17:11:40 +03:00
committed by Tienson Qin
parent 5539bb8351
commit f5673da476

View File

@@ -90,8 +90,10 @@ export const withFillShapes = Object.entries(shapeMapping)
})
.map(([key]) => key) as ShapeType[]
function filterShapeByAction<S extends Shape>(shapes: Shape[], type: ContextBarActionType): S[] {
return shapes.filter(shape => shapeMapping[shape.props.type]?.includes(type)) as S[]
function filterShapeByAction<S extends Shape>(type: ContextBarActionType) {
const app = useApp<Shape>()
const unlockedSelectedShapes = app.selectedShapesArray.filter(s => !s.props.isLocked)
return unlockedSelectedShapes.filter(shape => shapeMapping[shape.props.type]?.includes(type))
}
const EditAction = observer(() => {
@@ -100,7 +102,7 @@ const EditAction = observer(() => {
} = React.useContext(LogseqContext)
const app = useApp<Shape>()
const shape = filterShapeByAction(app.selectedShapesArray, 'Edit')[0]
const shape = filterShapeByAction('Edit')[0]
const iconName =
('label' in shape.props && shape.props.label) || ('text' in shape.props && shape.props.text)
@@ -144,10 +146,7 @@ const EditAction = observer(() => {
const AutoResizingAction = observer(() => {
const app = useApp<Shape>()
const shapes = filterShapeByAction<LogseqPortalShape | TextShape | HTMLShape>(
app.selectedShapesArray,
'AutoResizing'
)
const shapes = filterShapeByAction<LogseqPortalShape | TextShape | HTMLShape>('AutoResizing')
const pressed = shapes.every(s => s.props.isAutoResizing)
@@ -177,10 +176,7 @@ const AutoResizingAction = observer(() => {
const LogseqPortalViewModeAction = observer(() => {
const app = useApp<Shape>()
const shapes = filterShapeByAction<LogseqPortalShape>(
app.selectedShapesArray,
'LogseqPortalViewMode'
)
const shapes = filterShapeByAction<LogseqPortalShape>('LogseqPortalViewMode')
const collapsed = shapes.every(s => s.collapsed)
const ViewModeOptions: ToggleGroupInputOption[] = [
@@ -215,8 +211,7 @@ const ScaleLevelAction = observer(() => {
handlers: { isMobile },
} = React.useContext(LogseqContext)
const app = useApp<Shape>()
const shapes = filterShapeByAction<LogseqPortalShape>(app.selectedShapesArray, 'ScaleLevel')
const shapes = filterShapeByAction<LogseqPortalShape>('ScaleLevel')
const scaleLevel = new Set(shapes.map(s => s.scaleLevel)).size > 1 ? '' : shapes[0].scaleLevel
return <ScaleInput scaleLevel={scaleLevel} compact={isMobile()} />
@@ -224,7 +219,7 @@ const ScaleLevelAction = observer(() => {
const IFrameSourceAction = observer(() => {
const app = useApp<Shape>()
const shape = filterShapeByAction<IFrameShape>(app.selectedShapesArray, 'IFrameSource')[0]
const shape = filterShapeByAction<IFrameShape>('IFrameSource')[0]
const handleChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
shape.onIFrameSourceChange(e.target.value.trim().toLowerCase())
@@ -255,7 +250,7 @@ const IFrameSourceAction = observer(() => {
const YoutubeLinkAction = observer(() => {
const app = useApp<Shape>()
const shape = filterShapeByAction<YouTubeShape>(app.selectedShapesArray, 'YoutubeLink')[0]
const shape = filterShapeByAction<YouTubeShape>('YoutubeLink')[0]
const handleChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
shape.onYoutubeLinkChange(e.target.value)
app.persist()
@@ -282,7 +277,7 @@ const YoutubeLinkAction = observer(() => {
const TwitterLinkAction = observer(() => {
const app = useApp<Shape>()
const shape = filterShapeByAction<TweetShape>(app.selectedShapesArray, 'TwitterLink')[0]
const shape = filterShapeByAction<TweetShape>('TwitterLink')[0]
const handleChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
shape.onTwitterLinkChange(e.target.value)
app.persist()
@@ -309,10 +304,7 @@ const TwitterLinkAction = observer(() => {
const NoFillAction = observer(() => {
const app = useApp<Shape>()
const shapes = filterShapeByAction<BoxShape | PolygonShape | EllipseShape>(
app.selectedShapesArray,
'NoFill'
)
const shapes = filterShapeByAction<BoxShape | PolygonShape | EllipseShape>('NoFill')
const handleChange = React.useCallback((v: boolean) => {
shapes.forEach(s => s.update({ noFill: v }))
app.persist()
@@ -337,7 +329,7 @@ const SwatchAction = observer(() => {
// Placeholder
const shapes = filterShapeByAction<
BoxShape | PolygonShape | EllipseShape | LineShape | PencilShape | TextShape
>(app.selectedShapesArray, 'Swatch')
>('Swatch')
const handleSetColor = React.useCallback((color: string) => {
shapes.forEach(s => {
@@ -369,7 +361,7 @@ const StrokeTypeAction = observer(() => {
const app = useApp<Shape>()
const shapes = filterShapeByAction<
BoxShape | PolygonShape | EllipseShape | LineShape | PencilShape
>(app.selectedShapesArray, 'StrokeType')
>('StrokeType')
const StrokeTypeOptions: ToggleGroupInputOption[] = [
{
@@ -409,7 +401,7 @@ const StrokeTypeAction = observer(() => {
const ArrowModeAction = observer(() => {
const app = useApp<Shape>()
const shapes = filterShapeByAction<LineShape>(app.selectedShapesArray, 'ArrowMode')
const shapes = filterShapeByAction<LineShape>('ArrowMode')
const StrokeTypeOptions: ToggleGroupInputOption[] = [
{
@@ -453,7 +445,7 @@ const ArrowModeAction = observer(() => {
const TextStyleAction = observer(() => {
const app = useApp<Shape>()
const shapes = filterShapeByAction<TextShape>(app.selectedShapesArray, 'TextStyle')
const shapes = filterShapeByAction<TextShape>('TextStyle')
const bold = shapes.every(s => s.props.fontWeight > 500)
const italic = shapes.every(s => s.props.italic)