florian03-1 / blazorsvgeditor Goto Github PK

I'm current search solution to export the configuration of shapes in order to inject the configuration into any data source ( database / form /etc.. )

if you have a simple solution I'll take it!

I write following line do add this feature.

SvgEditor.PublicMethods.cs

public async Task DuplicateSelectedShape()
    {
        if (SelectedShape != null)
        {
            int deletedShapeId = SelectedShape.CustomId;
            Shape ? shape = Shapes.FirstOrDefault(s => s.CustomId == deletedShapeId);

            if (shape != null)
            {
                var newShape = shape.Clone();
                if (Shapes.Count > 0) newShape.CustomId = Math.Min(Enumerable.Min<Shape>(Shapes, x => x.CustomId) - 1, newShape.CustomId);

                Shapes.Add(newShape);
                await OnShapeChanged.InvokeAsync(ShapeChangedEventArgs.ShapeAdded(newShape));
            }
        }
        else
        {
            if (ShowDiagnosticInformation) Console.WriteLine("No shape selected - so nothing to duplicate");
        }
    }

preview.razor

<div class="inline-flex mt-2" role="group">
  <button @onclick="DuplicateShape" type="button" class="shadow-sm flex-grow focus:outline-none text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2 mr-2">Duplicate Shape</button>
  <button @onclick="DeleteShape" type="button" class="shadow-sm flex-grow focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2">Delete Shape</button>
</div>

preview.razor.cs

private void DuplicateShape()
{
    svgEditor?.DuplicateSelectedShape();
}

shape.cs

public Shape Clone()
{
    Shape temp = (Shape)this.MemberwiseClone();
    return temp;
}

Why use int for shape identification, when Guid is simpler?

Possibility to receive the SelectedShapeIdChanged event when the readonly property is true.

Or have an event that indicates that a shape has been clicked regardless of the value of the ReadOnly property

This is useful for once the shapes have been defined in an editor, to show a viewer to the user so that they can select one of the shapes.

Modifying the SelectAsync method of the ShapeEditor class as follows also raises the event when the property ReadOnly=true

 protected async Task SelectAsync(PointerEventArgs eventArgs)
 {
     if(eventArgs.PointerType == "touch") return; //Touch events are handled separately

     if (SvgElement.SvgEditor.EditMode == EditMode.Add) return;
     if (SvgElement.SvgEditor.ReadOnly)
     {
         await SvgElement.SvgEditor.SelectedShapeIdChanged.InvokeAsync(SvgElement.CustomId);
         return;
     }
    
     SvgElement.SelectShape();
     SvgElement.SvgEditor.SelectShape(SvgElement, eventArgs);
 }

New shape should be selected...

As you can see in the demo site, the image is not automatically centred in first render. With "centred" I mean is just like what "Reset Transformation" button does.
I tried to use the method ResetTransform() in OnAfterRenderAsync, after the ReloadImage(), and it does not do the same transformation as if i click the "Reset Transformation" button.

Hello!
I am wondering if it's possible somehow to get the position and size of each shape in the SvgEditor?
For example X, Y, Width and Height of a Rectangle.