[BUGFIX] Page tree: Hide delete drop zone when not dragging

Once a page is selected in the page tree,
a drag action is initiated and a drop zone created
for a delete action on the current page.

But since the drag is immediately stopped,
without a dragging action, it is necessary
to always delete this created dropzone,
to avoid that it is created multiple times.

To avoid additional flickering of the focus
indicator, when selecting a page, the drop zone
is hidden by CSS until the page is actually
dragged on itself and the dropzone is shown.

Releases: master, 10.4, 9.5
Resolves: #92067

Change-Id: I39210d1bcf2ba87370ecc913af382fe50450d742
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/65406


Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Daniel Goerz <daniel.goerz@posteo.de>
Tested-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: Jörg Bösche <typo3@joergboesche.de>
Reviewed-by: Daniel Goerz <daniel.goerz@posteo.de>
Reviewed-by: Andreas Fernandez <a.fernandez@scripting-base.de>

Build/Sources/Sass/component/_svgtree.scss

@@ -266,6 +266,10 @@ $svgColors: (
 }
 
 .nodes-drop-zone {
+    &[data-open='false'] {
+        display: none;
+    }
+
     rect {
         fill: map_get($svgColors, dragAlertBorder);
         cursor: -webkit-grabbing;

typo3/sysext/backend/Resources/Public/JavaScript/PageTree/PageTreeDragDrop.js

@@ -128,6 +128,7 @@ define([
             .attr('dy', 15);
 
           _this.dropZoneDelete
+            .attr('data-open', 'false')
             .attr('transform', self.getDropZoneCloseTransform(node));
         }
 
@@ -225,15 +226,16 @@ define([
       self.dragEnd = function(node) {
         _this.setDragEnd();
 
-        if (!self.startDrag || tree.settings.isDragAnDrop !== true || node.depth === 0) {
-          return false;
-        }
-
         if (_this.dropZoneDelete) {
           _this.dropZoneDelete
             .transition(300)
             .attr('transform', self.getDropZoneCloseTransform(node))
             .remove();
+          _this.dropZoneDelete = null;
+        }
+
+        if (!self.startDrag || tree.settings.isDragAnDrop !== true || node.depth === 0) {
+          return false;
         }
 
         var $svg = $(this).closest('svg');