diff --git a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx b/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx index 326da7aeaa..a18dd065ee 100644 --- a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx +++ b/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx @@ -90,8 +90,10 @@ export const withFillShapes = Object.entries(shapeMapping) }) .map(([key]) => key) as ShapeType[] -function filterShapeByAction(shapes: Shape[], type: ContextBarActionType): S[] { - return shapes.filter(shape => shapeMapping[shape.props.type]?.includes(type)) as S[] +function filterShapeByAction(type: ContextBarActionType) { + const app = useApp() + 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() - 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() - const shapes = filterShapeByAction( - app.selectedShapesArray, - 'AutoResizing' - ) + const shapes = filterShapeByAction('AutoResizing') const pressed = shapes.every(s => s.props.isAutoResizing) @@ -177,10 +176,7 @@ const AutoResizingAction = observer(() => { const LogseqPortalViewModeAction = observer(() => { const app = useApp() - const shapes = filterShapeByAction( - app.selectedShapesArray, - 'LogseqPortalViewMode' - ) + const shapes = filterShapeByAction('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() - const shapes = filterShapeByAction(app.selectedShapesArray, 'ScaleLevel') + const shapes = filterShapeByAction('ScaleLevel') const scaleLevel = new Set(shapes.map(s => s.scaleLevel)).size > 1 ? '' : shapes[0].scaleLevel return @@ -224,7 +219,7 @@ const ScaleLevelAction = observer(() => { const IFrameSourceAction = observer(() => { const app = useApp() - const shape = filterShapeByAction(app.selectedShapesArray, 'IFrameSource')[0] + const shape = filterShapeByAction('IFrameSource')[0] const handleChange = React.useCallback((e: React.ChangeEvent) => { shape.onIFrameSourceChange(e.target.value.trim().toLowerCase()) @@ -255,7 +250,7 @@ const IFrameSourceAction = observer(() => { const YoutubeLinkAction = observer(() => { const app = useApp() - const shape = filterShapeByAction(app.selectedShapesArray, 'YoutubeLink')[0] + const shape = filterShapeByAction('YoutubeLink')[0] const handleChange = React.useCallback((e: React.ChangeEvent) => { shape.onYoutubeLinkChange(e.target.value) app.persist() @@ -282,7 +277,7 @@ const YoutubeLinkAction = observer(() => { const TwitterLinkAction = observer(() => { const app = useApp() - const shape = filterShapeByAction(app.selectedShapesArray, 'TwitterLink')[0] + const shape = filterShapeByAction('TwitterLink')[0] const handleChange = React.useCallback((e: React.ChangeEvent) => { shape.onTwitterLinkChange(e.target.value) app.persist() @@ -309,10 +304,7 @@ const TwitterLinkAction = observer(() => { const NoFillAction = observer(() => { const app = useApp() - const shapes = filterShapeByAction( - app.selectedShapesArray, - 'NoFill' - ) + const shapes = filterShapeByAction('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() 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() - const shapes = filterShapeByAction(app.selectedShapesArray, 'ArrowMode') + const shapes = filterShapeByAction('ArrowMode') const StrokeTypeOptions: ToggleGroupInputOption[] = [ { @@ -453,7 +445,7 @@ const ArrowModeAction = observer(() => { const TextStyleAction = observer(() => { const app = useApp() - const shapes = filterShapeByAction(app.selectedShapesArray, 'TextStyle') + const shapes = filterShapeByAction('TextStyle') const bold = shapes.every(s => s.props.fontWeight > 500) const italic = shapes.every(s => s.props.italic)