LineTool

[Anders Lind]

Hey,

I am trying to make a custom LineTool but i am having some trouble changing the geometry for the inserted shape. Do you guys have some examples of making custom tools, feels like i am missing something, but haven't been able to find any resources on this area.

On MouseMove is create a new GeometryShape and set the geometry data to a line. But it still show a arc geomtry even thoug active shape holds a LineGeometry. Seem like DrawingService.InitializeDraw(shape, "PencilTool"); is wrong but use "LineTool" as paramter will result in no geometry at all.

Also a other issue is that i need the manipulation adorner to only show resize handles in the end of the line. I can override the style for the ManipulationAdorner, but the issues is i will also have other shapes that need all four resize handles?

This is my custom tool:

    public class LineTool : DrawingToolBase
    {
        private readonly RadDiagram _diagram;

        public const string ToolName = "LineTool";

        public LineTool(RadDiagram diagram)
            : base("LineTool")
        {
            _diagram = diagram;
            Cursor = Cursors.Cross;
        }

      
        public override bool MouseDown(PointerArgs e)
        {
            if (!IsActive)
                return false;

            DrawingService.StartDraw();
            DrawingService.DrawPoints(e.TransformedPoint, e.TransformedPoint);

            return base.MouseDown(e);
        }

        public override bool MouseMove(PointerArgs e)
        {
            if (!IsActive || !ToolService.IsMouseDown || (ToolService.IsControlDown || !DrawingService.IsDrawing))
                return false;
            
            if (DrawingService.ActiveShape == null)
            {
                var shape = CreateShape();
                shape.IsSelected = true;
                shape.Geometry = new LineGeometry(e.TransformedPoint, e.TransformedPoint);

                DrawingService.InitializeDraw(shape, "PencilTool"); //LineTool does not show anything
                //SelectionService.ClearSelection();
                
                return base.MouseMove(e);
            }


            if (DrawingService.AnchorPoints.Count() > 1)
                DrawingService.RemoveLastAnchorPoint();
                
            DrawingService.DrawPoints(e.TransformedPoint, e.TransformedPoint);
            return true;
        }

        public override bool MouseUp(PointerArgs e)
        {
            if (!IsActive || !DrawingService.IsDrawing)
                return base.MouseUp(e);
            CompleteTool();
            _diagram.ActiveTool = MouseTool.PointerTool;
            return true;
        }
    }

[Petar Mladenov]

Hello Anders,

Your solution couples with DrawingService and PencilTool. You have partially hit a known issue when customizing PathTool or PencilTool - you need to use custom tool with exactly "PathTool" or "PencilTool" name. However, we think that there is no need to use either Pencil or Path Tool for your requirement.
I created a sample to draw Line shapes with custom LineTool following our SDK (Dagram - Custom Tools) and the way ShapeTool in it works. We hope it can be a good starting point for you.

As for the handles , you need to edit the default ManipulationAdornerStyle and remove the handle -rectangles you wish from there.

<Style TargetType="primitives:ManipulationAdorner" x:Key="ManipulationAdornerStyle">
        <Setter Property="RenderTransformOrigin" Value="0.5 0.5" />
        <Setter Property="Width" Value="36"/>
        <Setter Property="Height" Value="36"/>
        <Setter Property="Background" Value="{StaticResource DiagramControl_ManipulationAdorner_Background}" />
        <Setter Property="BorderBrush" Value="{StaticResource DiagramControl_ManipulationAdorner_BorderBrush}" />
        <Setter Property="ResizeActivationRadius" Value="{StaticResource ManipulationAdornerResizeActivationRadius}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="primitives:ManipulationAdorner">
                    <Grid>
                        <Rectangle Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}"
                                   StrokeDashArray="3 3" StrokeThickness="1" IsHitTestVisible="False" />

                        <Rectangle x:Name="TopLeftResizeHandle" Style="{StaticResource ResizingRectangleStyle}"
                                   Margin="{StaticResource ManipulationAdornerThicknessL}"
                                   VerticalAlignment="Top" HorizontalAlignment="Left">
                            <ToolTipService.ToolTip>
                                <ToolTip Content="{telerik:LocalizableResource Key=Diagram_Resize}" />
                            </ToolTipService.ToolTip>
                        </Rectangle>

                        <Rectangle x:Name="TopRightResizeHandle" Style="{StaticResource ResizingRectangleStyle}"
                                   Margin="{StaticResource ManipulationAdornerThicknessT}"
                                   VerticalAlignment="Top" HorizontalAlignment="Right">
                            <ToolTipService.ToolTip>
                                <ToolTip Content="{telerik:LocalizableResource Key=Diagram_Resize}" />
                            </ToolTipService.ToolTip>
                        </Rectangle>

                        <Rectangle x:Name="BottomLeftResizeHandle" Style="{StaticResource ResizingRectangleStyle}"
                                   Margin="{StaticResource ManipulationAdornerThicknessR}"
                                   VerticalAlignment="Bottom" HorizontalAlignment="Left">
                            <ToolTipService.ToolTip>
                                <ToolTip Content="{telerik:LocalizableResource Key=Diagram_Resize}" />
                            </ToolTipService.ToolTip>
                        </Rectangle>

                        <Rectangle x:Name="BottomRightResizeHandle" Style="{StaticResource ResizingRectangleStyle}"
                                   Margin="{StaticResource ManipulationAdornerThicknessB}"
                                   VerticalAlignment="Bottom" HorizontalAlignment="Right">
                            <ToolTipService.ToolTip>
                                <ToolTip Content="{telerik:LocalizableResource Key=Diagram_Resize}" />
                            </ToolTipService.ToolTip>
                        </Rectangle>

                        <Path x:Name="RotationPart" Margin="0, -30, 0, 0"
                              Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsRotationEnabled, Converter={StaticResource converter}}"
                              Data="M13,0L13,7.5L5.8,5.6L8.3,3.7C7.8,3.2 7,3 6.5,3C4.6,3 3,4.7 3,6.6C3,8.6 4.6,10 6.5,10C7.9,9.9 8.8,9.5 9.4,8.6L12.3,9.6C11,11.7 9,13 6.5,13C3,13 0,10 0,6.6C0,3 3,0 6.5,0C8.4375,0 9.7,0.8 10.8,1.7z"
                              HorizontalAlignment="Center" VerticalAlignment="Top"
                              Stroke="{StaticResource DiagramControl_RotationPath_Stroke}"
                              Height="{StaticResource ManipulationAdornerHeight}"
                              Stretch="Fill" Width="{StaticResource ManipulationAdornerWidth}"
                              Fill="{StaticResource DiagramControl_RotationPath_Fill}">
                            <ToolTipService.ToolTip>
                                <ToolTip Content="{telerik:LocalizableResource Key=Diagram_Rotate}" />
                            </ToolTipService.ToolTip>
                        </Path>

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Regards,
Petar Mladenov
Telerik