[gradient] Fix gritche when multiple editors are open at the same time

bin/style.css

@@ -3014,9 +3014,6 @@ div.gradient-box {
   stroke: white;
   stroke-width: 1px;
 }
-.gradient-container svg .gradient-stop {
-  filter: url(#shadow);
-}
 .gradient-container svg .gradient-stop .outline {
   stroke-width: 0.015;
   stroke: white;
@@ -3034,9 +3031,6 @@ div.gradient-box {
   stroke: black;
   stroke-width: 0.005;
 }
-.gradient-container svg .gradient-stop .checkboard {
-  fill: url(#checkboard-bg);
-}
 .gradient-preview {
   width: 100%;
   height: 100%;

bin/style.less

@@ -3490,9 +3490,6 @@ div.gradient-box {
 		}
 
 		.gradient-stop {
-
-			filter: url(#shadow);
-
 			.outline {
 				stroke-width: 0.015;
 				stroke: white;
@@ -3520,10 +3517,6 @@ div.gradient-box {
 				stroke: black;
 				stroke-width: 0.005;
 			}
-
-			.checkboard {
-				fill: url(#checkboard-bg);
-			}
 		}
 		//pointer-events: none;
 	}

hide/comp/GradientEditor.hx

@@ -141,6 +141,9 @@ class GradientEditor extends Popup {
     var previewNeedRebuild : Bool = false;
     var previewCurrentPath: String = null; // The path that this gradient editor is currently updating
 
+    var checkboardId : String;
+    var shadowId : String;
+
 	public var keepPreviewAlive : Bool = false;
 
     var keys : hide.ui.Keys;
@@ -160,6 +163,8 @@ class GradientEditor extends Popup {
         return innerValue;
     }
 
+    static var uid = 0;
+
     public function new(?parent : Element, editGradientSettings: Bool = true) {
         super(parent);
 
@@ -215,15 +220,20 @@ class GradientEditor extends Popup {
         stopsSvg.element.attr({viewBox: '0.0 0.0 1.0 1.0'});
         stopsSvg.element.attr({preserveAspectRatio:"xMidYMid slice"});
 
+        checkboardId = 'gradientEditor-checkBoard-$uid';
+        shadowId = 'gradientEditor-shadow-$uid';
+
+        uid++;
+
         stopsSvg.element.html('
         <defs>
-        <pattern id="checkboard-bg" width="0.5" height="0.5" patternContentUnits="objectBoundingBox">
+        <pattern id="$checkboardId" width="0.5" height="0.5" patternContentUnits="objectBoundingBox">
         <rect x="0" y="0" width="1" height="1" fill="#777"/>
         <rect x="0" y="0" width=".25" height=".25" fill="#aaa"/>
         <rect x="0.25" y="0.25" width=".25" height=".25" fill="#aaa"/>
         </pattern>
 
-        <filter id="shadow" color-interpolation-filters="sRGB" y="-40%" x="-40%" height="180%" width="180%">
+        <filter id="$shadowId" color-interpolation-filters="sRGB" y="-40%" x="-40%" height="180%" width="180%">
         <feDropShadow dx="0.005" dy="0.005" stdDeviation="0.007" flood-opacity="0.5"/>
         </filter>
         </defs>');
@@ -370,9 +380,9 @@ class GradientEditor extends Popup {
         }
 
         for (i in stopMarquers.length...innerValue.stops.length) {
-            var group = stopsSvg.group(stopsSvg.element).addClass("gradient-stop");
+            var group = stopsSvg.group(stopsSvg.element).addClass("gradient-stop").css("filter", 'url(#$shadowId)');
             stopsSvg.circle(group, 0, 0, 0.05, {}).addClass("outline");
-            stopsSvg.circle(group, 0, 0, 0.05, {}).addClass("checkboard");
+            stopsSvg.circle(group, 0, 0, 0.05, {}).addClass("checkboard").css("fill", 'url(#$checkboardId)');
             stopsSvg.circle(group, 0, 0, 0.05, {}).addClass("fill");
 
             stopMarquers.push(group);