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

 

ImageEn Forum
Profile    Join    Active Topics    Forum FAQ    Search this forumSearch
 All Forums
 ImageEn Library for Delphi, C++ and .Net
 ImageEn and IEvolution Support Forum
 Moving an image in a two-dimensional grid

Note: You must be registered in order to post a reply.
To register, click here. Registration is FREE!

View 
UserName:
Password:
Format  Bold Italicized Underline  Align Left Centered Align Right  Horizontal Rule  Insert Hyperlink   Browse for an image to attach to your post Browse for a zip to attach to your post Insert Code  Insert Quote Insert List
   
Message 

 

Emoji
Smile [:)] Big Smile [:D] Cool [8D] Blush [:I]
Tongue [:P] Evil [):] Wink [;)] Black Eye [B)]
Frown [:(] Shocked [:0] Angry [:(!] Sleepy [|)]
Kisses [:X] Approve [^] Disapprove [V] Question [?]

 
Check here to subscribe to this topic.
   

T O P I C    R E V I E W
PeterPanino Posted - Jun 05 2021 : 07:37:38
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?
7   L A T E S T    R E P L I E S    (Newest First)
PeterPanino Posted - Jun 11 2021 : 05:34:34
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!
xequte Posted - Jun 11 2021 : 01:55:20
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
PeterPanino Posted - Jun 10 2021 : 07:37:34
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).
xequte Posted - Jun 09 2021 : 17:54:02
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
PeterPanino Posted - Jun 08 2021 : 06:00:51
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.
xequte Posted - Jun 07 2021 : 22:59:25
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
PeterPanino Posted - Jun 05 2021 : 12:28:11
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.