ImageEn for Delphi and C++ Builder ImageEn for Delphi and C++ Builder

 

ImageEn Forum
Profile    Join    Active Topics    Forum FAQ    Search this forumSearch
Forum membership is Free!  Click Join to sign-up
Username:
Password:
Save Password
Forgot your Password?

 All Forums
 ImageEn Library for Delphi, C++ and .Net
 ImageEn and IEvolution Support Forum
 Moving an image in a two-dimensional grid
 New Topic  Reply to Topic
Author Previous Topic Topic Next Topic  

PeterPanino

860 Posts

Posted - Jun 05 2021 :  07:37:38  Show Profile  Reply
I have modified this demo project:

\ImageEn\Demos\Multi\DragDrop_MultiView2

This demo project originally uses a one-dimensional grid, i.e., a TImageEnMView with one column. In this original demo project, you can move a frame image to another position in the grid, and the insertion point is shown as a line BETWEEN two frame images. While the term "BETWEEN" is a valid topological concept in a one-dimensional grid, it has no sense in a TWO-DIMENSIONAL grid:

After changing the grid to two dimensions by setting ImageEnMView1.GridWidth = -1, I had to change the concept and visual appearance of the insertion point from a line BETWEEN two images to a CROSS on the target image, which appears more natural and logical in a two-dimensional grid:



Here is my modification of the demo project:

attach/PeterPanino/2021657365_Multiview2Modified.zip
388.85 KB

Is this correct? Any suggestions?

PeterPanino

860 Posts

Posted - Jun 05 2021 :  12:28:11  Show Profile  Reply
Additional hints: When using this Drag&Drop method in another project, I had to make the following changes to make it work as desired:

1. The original demo code started the Drag with:
ImageEnMView1.IEBeginDrag(True, -1);
I had to set the parameter Immediate to False to avoid starting an unintentional DD move by just clicking an image:
ImageEnMView1.IEBeginDrag(False, -1);

Not sure why this works differently as in the original demo project.

2. In my modification of the original demo project I had to use this workaround to insert the dragged image on the correct target position:
procedure TformImagesFromUrl.ImageEnMView1DragDrop(Sender, Source: TObject; X, Y: Integer);
var
  im: integer;
begin
  im := ImageEnMView1.InsertingPoint(X, Y);
  if im < ImageEnMView1.SelectedImage then
    ImageEnMView1.MoveSelectedImagesTo(im)
  else
    ImageEnMView1.MoveSelectedImagesTo(im + 1);
end;

However, this does not work in another project. In another project I have to use this code to make it work correctly:
procedure TformImagesFromUrl.ImageEnMView1DragDrop(Sender, Source: TObject; X, Y: Integer);
var
  im: integer;
begin
  im := ImageEnMView1.InsertingPoint(X, Y);
  if im >= ImageEnMView1.ImageCount then EXIT; // !!
  ImageEnMView1.MoveSelectedImagesTo(im);
end;

Also note the line
if im >= ImageEnMView1.ImageCount then EXIT;
that is needed to interrupt the dragging move when the image is dragged to an empty space after the last image. Not sure why this works differently in another project.

3. I am also not sure why you use
ImageEnMView1.MouseInteract := [];
in the original demo project at drag start. In another project, there are no problems when I don't deactivate MouseInteract at drag start.
Go to Top of Page

xequte

38180 Posts

Posted - Jun 07 2021 :  22:59:25  Show Profile  Reply
Hi Peter

Thank you for your feedback. I have updated the demo to support multiple columns.

Note: I prefer a divider to a cross, because when you drag "onto" a frame it is not clear if that means going before or after that frame.

Here is the updated demo:

attach/xequte/202167225918_DragDrop_MultiView2.zip
13.75 KB

Nigel
Xequte Software
www.imageen.com
Go to Top of Page

PeterPanino

860 Posts

Posted - Jun 08 2021 :  06:00:51  Show Profile  Reply
Hi Nigel,

Maybe there was an error? The grid in the attached demo still has one column. When I make it multi-column with GridWidth = -1, the "after-before" concept from the user's perspective IMO is unlogical: When dragging the first image to another image, the divider line appears ABOVE the other image:



However, after the dragging, the first image is not being inserted ABOVE the target position. That's because the concept of "before-after" in a multi-column grid IMO exists only in the developer's mind. IMO it has no representation in the user's view.

However, there are different ways to present the dragging UI to the user. I don't claim that my concept is the ultimate one.
Go to Top of Page

xequte

38180 Posts

Posted - Jun 09 2021 :  17:54:02  Show Profile  Reply
Hi

Are you using my new demo linked above?

If you check the "Grid View" checkbox, then the insertion line appears on between the images (right/left gap) showing the position the image will be inserted.

Nigel
Xequte Software
www.imageen.com
Go to Top of Page

PeterPanino

860 Posts

Posted - Jun 10 2021 :  07:37:34  Show Profile  Reply
Hi Nigel,

the "between" logic still doesn't convince me:

• For the user, it is unlogical that he has to drag a shape ONTO another shape to insert it "before" that shape.

• Or when he drags the first shape onto the second shape and then sees the insertion line "between" the first and the second shape, and nothing happens when he releases the mouse button.

• The user doesn't know what the "second shape" is. It could as well be the shape below the shape in the top left corner. Only you (and I) who know the internal order of the shapes know what that means. (That's probably because in our Western culture we write from left to right, but that is not a universal law of physics).
Go to Top of Page

xequte

38180 Posts

Posted - Jun 11 2021 :  01:55:20  Show Profile  Reply
Hi Peter

It's an example, so developers can choose the model they think most logical. I've merely used the model that seems logical to me.

In the example you can drag a file to the space between frames (where the red line shows) and that is where it will be inserted. That is the most logical usage IMO.

Dropping a file onto another file is something that has no clear outcome. Should the new file go before the one we dropped or after. I don't think there is a real world model to dictate the answer to that (In the real world, if you drop something onto something else it would be stacked).

(The issue of Left-to-right bias is handled by the fact that in right-to-left Windows setup the TImageEnMView content is reversed).





Nigel
Xequte Software
www.imageen.com
Go to Top of Page

PeterPanino

860 Posts

Posted - Jun 11 2021 :  05:34:34  Show Profile  Reply
Hi Nigel,

I didn't doubt the validity of your demo. It's a matter of personal choice. The fact that you provide so many demos to allow the user to learn from them cannot be praised enough. Thanks again for the demos!
Go to Top of Page
  Previous Topic Topic Next Topic  
 New Topic  Reply to Topic
Jump To: