How to prevent View which to exit specific bounds ?

Image customImage = new Image() { HeightRequest = 200, WidthRequest = 200 };

Assembly assembly = Assembly.GetAssembly(typeof(GettingStarted));

customImage.Source = ImageSource.FromResource("IESample.ITypogy1.png", assembly);

editor.AddCustomView(customImage, new CustomViewSettings());


I wish customImage to be prevented when moved to exit specific boundaries inside the editor.

How to do that ?


16 Replies 1 reply marked as answer

ET Eswaran Thirugnanasambandam Syncfusion Team December 13, 2021 04:52 PM UTC

Hi Yordan Yanakiev, 
 
Greetings from Syncfusion. 
 
We have checked your requirement and would like to inform you that, we can get the bounds of a custom view from the ItemSelected/ItemUnselected events only and currently don't have the ability to retrieve custom view bounds while dragging it. So, as of now, we don’t have a possibility to achieve your requirement in SfImageEditor. 
 
Regards, 
Eswaran. 



YO Yordan December 13, 2021 07:49 PM UTC

That's render the whole idea just into a drawbox without much of a serious applications usage.
Please change it by exposing the elements as a list or something.

even if it had to be with a big warning that some thing in this way may or may not work properly.



ET Eswaran Thirugnanasambandam Syncfusion Team December 14, 2021 12:21 PM UTC

Hi Yordan Yanakiev, 
 
Thanks for the update.   
 
We have analysed your query, but we could not be able to understand it clearly. Could you please confirm whether your requirement is to move the custom view within the image bounds or to limit the custom view dragging for the particular bounds? 
 
Regards, 
Eswaran. 



YO Yordan December 14, 2021 04:55 PM UTC

SfImageEditor designerEditor;

...

object view = null;

Image image = new Image();

image.HeightRequest = 150;

image.WidthRequest = 150;

image.Aspect = Aspect.AspectFill;

image.PropertyChanging += onSVGImagePropertyChanged;


string filePath = samplePath + name + ".png";

image.Source = ImageSource.FromResource( filePath, assembly );

view = image;

CustomViewSettings settings = new CustomViewSettings();

designerEditor.AddCustomView( view, settings );

I need to have control over these " image" objects which I am creating.

When I drag them and move around inside SfImageEditor I must prevent them to exit specific bounds inside the SfImageEditor.
This should be easily achieved if they are exposed after adding.
Aside of the - having control over the elements inside  SfImageEditor is the thing which is giving it more than just a drawbox features, so the developers can really use it for different more professional things.



ET Eswaran Thirugnanasambandam Syncfusion Team December 15, 2021 12:50 PM UTC

Hi Yordan Yanakiev, 
 
Thanks for the update.   
 
Currently, SfImageEditor control doesn’t have the support to limit the custom view dragging to the specified bounds. We will further analyse this support feasibility and consider this support  in our feature request queues. 
 
Regards, 
Eswaran 



MD Molier de Ritoi December 20, 2021 07:42 AM UTC

Hmm.. I wasn't playing with that one until I saw this post.


To not have access to the important for a developer properties of the participating objects really render the whole idea to not very useful, but just a pile of pictures.

I am double voting to review the whole idea and expose the important properties of the participating into the collage objects, since they are the important things for the developers here.



ET Eswaran Thirugnanasambandam Syncfusion Team December 21, 2021 01:04 PM UTC

Hi Yordan Yanakiev,  
 
Thanks for the update. 
 
We would like to inform that the corresponding PenSettings/CustomviewSettings/TextSettings of the Shape/CustomView/Text can be obtained from the ItemSelected and ItemUnselected events of the SfImageEditor when select or unselect it. Also, the shapes, custom views, and texts are added dynamically and each shapes having different settings. So, we didn’t maintain the PenSettings/CustomviewSettings/TextSettings object in common. Please refer the below user guide documentation link for more information. 
 
  
Regards, 
Eswaran. 



YO Yordan December 21, 2021 01:42 PM UTC

They always return -1 or 0 for the bounds.
Please do a small example project which is showing the bounds of the selected or unselected item (CustomviewSettings), since maybe I am missing something else.



VR Vignesh Ramesh Syncfusion Team December 22, 2021 01:45 PM UTC

Hi Yordan Yanakiev, 

We have prepared a simple sample to show how to get the Bounds of the added Shapes/Text/CustomView’s from the ItemSelected event. Please find the snippet below 

[XAML]: 
<xforms:SfImageEditor x:Name="editor" 
                      Source="{Binding Image}" 
                      ItemSelected="editor_ItemSelected" /> 

[C#]: 
private void editor_ItemSelected(object sender, ItemSelectedEventArgs args) 
{ 
    Rectangle bounds = GetBounds(args.Settings); 
} 
 
private Rectangle GetBounds(object settings) 
{ 
    Rectangle bounds; 
    PenSettings penSettings = settings as PenSettings; 
    TextSettings textSettings = settings as TextSettings; 
    CustomViewSettings customViewSettings = settings as CustomViewSettings; 
    if (penSettings != null) 
    { 
        bounds = penSettings.Bounds; 
    } 
    else if (textSettings != null) 
    { 
        bounds = textSettings.Bounds; 
    } 
    else 
    { 
        bounds = customViewSettings.Bounds; 
    } 
 
    return bounds; 
} 

Please get the sample from the below link. 

Please let us know if you need any further assistance. 

Regards, 
Vignesh Ramesh.

Marked as answer

YO Yordan replied to Vignesh Ramesh December 22, 2021 04:22 PM UTC

Hey  Vignesh Ramesh!

You are really a life saver. 

It's more complex than I expected, quite not intuitive, anyway You've did the job well done !

Thanks man !



YO Yordan December 22, 2021 04:28 PM UTC

As we get the bound - is there a way to set them as well ?



VR Vignesh Ramesh Syncfusion Team December 23, 2021 04:37 PM UTC

Hi Yordan Yanakiev,  

Thanks for your update. 

We have checked your query and would like to inform you that, we can set the Bounds only when we add the Shapes/Texts/CustomViews through the AddShape/AddText/AddCustomView methods of SfImageEditor. Also, we can only get the Bounds from the ItemsSelected/ItemUnSelected event. Please find the snippet below. 

public MainPage() 
{ 
    InitializeComponent(); 
    editor.ToolbarSettings.ToolbarItems.Add(new FooterToolbarItem() 
    { 
        Name = "AddViews", 
        Text = "Add Views" 
    }); 
    editor.ToolbarSettings.ToolbarItemSelected += this.ToolbarSettings_ToolbarItemSelected; 
} 
 
private void ToolbarSettings_ToolbarItemSelected(object sender, ToolbarItemSelectedEventArgs e) 
{ 
    if (e.ToolbarItem.Name == "AddViews") 
    { 
        Image customImage = new Image() { HeightRequest = 50, WidthRequest = 50 }; 
        Assembly assembly = Assembly.GetAssembly(typeof(MainPage)); 
        customImage.Source = ImageSource.FromResource("XFImageEditor.EditorPerson1.png", assembly); 
        editor.AddCustomView(customImage, new CustomViewSettings 
        { 
            Bounds = new Rectangle(0, 0, 50, 50) 
        }); 
        editor.AddShape(ShapeType.Circle, new PenSettings 
        { 
            Bounds = new Rectangle(50, 0, 20, 20) 
        }); 
        editor.AddText("Test", new TextSettings 
        { 
            Bounds = new Rectangle(0, 50, 20, 10) 
        }); 
    } 
} 

We have prepared the sample to show how to add the CustomView in specific bounds through the AddCustomView interface. Please get it from the below link 

Please refer the below user guide documentations for more information about methods in SfImageEditor 

Regards,  
Vignesh Ramesh.


YO Yordan December 23, 2021 04:46 PM UTC

I see, but why ?

Why something which is so trivial can not be done ?

What is the reason behind this weird limitation ?



VR Vignesh Ramesh Syncfusion Team December 27, 2021 01:00 PM UTC

Hi Yordan, 

Thanks for your update. 

We would like to inform you that, when providing bounds in AddText/AddShape/AddCustomView, then we will render the corresponding UI and its related items directly on the provided bounds. But the ItemSelected/ItemUnselected event will be fired when we select/unselect the already rendered UI. So, if we change the Bounds at this event, then we need to re-layout the rendered UI and its related items like selection rect, resizing thumbs, etc in our source-level based on the new bounds. Currently, we don’t have this support in SfImageEditor control. 

Regards, 
Vignesh Ramesh.


JC Jonah Coleman March 9, 2022 02:18 AM UTC

Maybe as a work-around we could get a function added?

.ResizeCustomView(int shapeId, Rectangle newBounds)


I currently do all my manipulating by using .SaveEdits/LoadEdits but as has been discussed, custom views are not present.


... actually I'd like a function to .ResizeEntity that would work with any type, honestly.  Save a .SaveEdits/.LoadEdits and all the serialization/de-serialization.



ET Eswaran Thirugnanasambandam Syncfusion Team March 9, 2022 04:40 PM UTC

Currently, SfImageEditor control doesn’t have the support to change the shape bounds programmatically. So, we have logged a feature request for this requirement, and it can be tracked through our feedback portal below. 
 
 
Please cast your vote to make it count. We will prioritize the features every release based on the demands, and since we don’t have an immediate plan to implement this feature and it will be included in any of our upcoming releases. 
 
If you have any more specifications/suggestions to the feature request, you can add them as a comment in the portal. 


Loader.
Up arrow icon