Web-stories-wp: Allow dragging a shape onto page

[o-fernandez]

Feature Description

Media allows you to drag a media element onto the page. Shapes doesn't. We should also allow/enable users to drag a shape onto the page.

---

_Do not alter or remove anything below. The following sections will be managed by moderators only._

Acceptance Criteria

1. User can drag any basic shape onto the Page and drop it where they want. (similar interaction to dragging an image)
2. Alternatively, user can still just click on a shape to have it show on the page.

QA Instructions

1. Drag a shape onto a page
2. Observe the shape appear on the page "approximately" where dropped.

Note that this is a rather crude implementation and there's room for improvement left for future implementation.

Known bugs:

1. The shape has gray background surrounding the white actual shape (#1930)
2. The dropped shape has a different size than the dragged shape (#2326)
3. The dropped shape is not placed relative to the drag point on the dragged shape (#2605)

[jhtin]

So I've started to run into an issue related to dragging. I can't actually seem to set the path as the drag ghost image without also including part of the background. You can see this here:

Potential solutions: 1) create transparent png files for each svg path to use as drag ghost images. (Tested with transparent pngs, this should work)
2) Create a fake canvas to draw the svg images and then turn the drawing into a base64 image (I saw some examples of this, but haven't tested this). Might not work on older browsers.
3) Creating a floating svg path element that follows the mouse pointer when drag is occuring.

I recommend option 1 due to it being quite simple and consistent. Does anyone have a different opinion?

Edit: see comment below for screenshot of the ghost image issue.

[jhtin]

I realised that if I wanted to add png images for each svg it would require quite a bit of set up to import everything properly, hence I think we should move that into a new issue.

[dvoytenko]

/cc @wassgha who would likely have opinions. I'd think dragging just div with an svg inside should also work? The draggable=true is not just for images. Not sure if there are any cross-browser consistency issues that might be here.

[jhtin]

Dragging the div with the svg inside will create the same issue as shown above about the ghost images. Hence unless we're okay with the opaque background around the svgs, we should find a way to make the ghost images have a transparent background

[jhtin]

Heres a screenshot of the "background" around the circle being dragged for clarification.

[jhtin]

I think I should just separate this drag image issue into a different issue and just fix it later after implementing the functionality.

[swissspidy]

I think I should just separate this drag image issue into a different issue and just fix it later after implementing the functionality.

I'd recommend so too 👍 The png approach looks interesting, but it might not work in the future when users are allowed to upload arbitrary svg files

[jhtin]

Alright then, I'll consider fixing the drag image out of scope for this issue.

[wassgha]

I don't think we need PNGs here. I ran into this before and even though the native DnD API calls it setDragImage, it does accept any element (reads The image will typically be an <image> element but it can also be a <canvas> or any other visible element.) so I'd just create a detached element and use the setDragImage API to have it be the ghost image.

[dvoytenko]

If we really have to, we can indeed create an <img> for this with data:svg src that can be generated from our path definition. But I'd first try other ways before resorting to this one.

[jhtin]

@wassgha The issue isn't that it doesn't accept any element, its that if you don't pass an "img" element through, the transparency isn't retained. So I passed in a "svg" element in the previous screenshot, but it includes the opaque grey background.

@dvoytenko data:svg might work. I'll look into that.

---

2nd question, do we need to show the blue borders around the frame that shows up when you drag the media elements? I thought we would have to, but @wassgha informed me that its only to indicate we can "merge" elements.

[dvoytenko]

2nd question, do we need to show the blue borders around the frame that shows up when you drag the media elements? I thought we would have to, but @wassgha informed me that its only to indicate we can "merge" elements.

Correct. I don't think we should be showing blue outlines for shapes. Only when "dropping into" is possible.

[csossi]

Verified in QA - PR#1856

[samitron7]

Verified in UAT