fix: reenable shadows for blocks being dragged (#79)

* fix: reenable shadows for blocks being dragged

* fix: apply drop shadows to all dragging things via CSS

* chore: add a license to shadows.js

Author: gonfunko

core/colours.js

@@ -103,7 +103,7 @@
    "textFieldText": "#575E75",
    "insertionMarker": "#000000",
    "insertionMarkerOpacity": 0.2,
-   "dragShadowOpacity": 0.3,
+   "dragShadowOpacity": 0.6,
    "stackGlow": "#FFF200",
    "stackGlowSize": 4,
    "stackGlowOpacity": 1,

core/css.js

@@ -284,6 +284,12 @@ const styles = `
     cursor: -webkit-grabbing;
     cursor: -moz-grabbing;
   }
+
+  /* All the blocks being dragged get the blocklyDragging class, so match only the root one */
+  :not(.blocklyDragging) > .blocklyDragging {
+    filter: url(#blocklyDragShadowFilter);
+  }
+
   /* Changes cursor on mouse down. Not effective in Firefox because of
     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
   .blocklyDraggable:active {

src/index.js

@@ -31,9 +31,10 @@ import {
   ContinuousMetrics,
 } from '@blockly/continuous-toolbox';
 import {CheckableContinuousFlyout} from './checkable_continuous_flyout.js';
-import {ScratchContinuousToolbox} from './scratch_continuous_toolbox.js';
 import {buildGlowFilter, glowStack} from './glows.js';
+import {ScratchContinuousToolbox} from './scratch_continuous_toolbox.js';
 import './scratch_continuous_category.js';
+import {buildShadowFilter} from './shadows.js';
 
 export * from 'blockly';
 export * from './block_reporting.js';
@@ -66,6 +67,7 @@ export function inject(container, options) {
   }
 
   buildGlowFilter(workspace);
+  buildShadowFilter(workspace);
 
   Blockly.config.dragRadius = 3;
   Blockly.config.snapRadius = 48;

src/shadows.js

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Blockly from 'blockly/core';
+import {Colours} from '../core/colours.js';
+
+export function buildShadowFilter(workspace) {
+  const svg = workspace.getParentSvg();
+  const defs = Blockly.utils.dom.createSvgElement(Blockly.utils.Svg.DEFS, {}, svg);
+  // Adjust these width/height, x/y properties to stop the shadow from clipping
+  var dragShadowFilter = Blockly.utils.dom.createSvgElement('filter',
+      {
+        'id': 'blocklyDragShadowFilter',
+        'height': '140%',
+        'width': '140%',
+        'y': '-20%',
+        'x': '-20%'
+      },
+      defs);
+  Blockly.utils.dom.createSvgElement('feGaussianBlur',
+      {
+        'in': 'SourceAlpha',
+        'stdDeviation': '6'
+      },
+      dragShadowFilter);
+  var componentTransfer = Blockly.utils.dom.createSvgElement(
+      'feComponentTransfer', {'result': 'offsetBlur'}, dragShadowFilter);
+  // Shadow opacity is specified in the adjustable colour library,
+  // since the darkness of the shadow largely depends on the workspace colour.
+  Blockly.utils.dom.createSvgElement('feFuncA',
+      {
+        'type': 'linear',
+        'slope': Colours.dragShadowOpacity
+      },
+      componentTransfer);
+  Blockly.utils.dom.createSvgElement('feComposite',
+      {
+        'in': 'SourceGraphic',
+        'in2': 'offsetBlur',
+        'operator': 'over'
+      },
+      dragShadowFilter);
+}