support multiple filters

haxeui · Jun 26, 2023 · 1a26616 · 1a26616
1 parent 7f79c72
commit 1a26616
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 42 deletions.
diff --git a/haxe/ui/backend/ComponentImpl.hx b/haxe/ui/backend/ComponentImpl.hx
@@ -2,6 +2,7 @@ package haxe.ui.backend;
 
 import haxe.ui.Toolkit;
 import haxe.ui.backend.html5.EventMapper;
+import haxe.ui.backend.html5.FilterHelper;
 import haxe.ui.backend.html5.HtmlUtils;
 import haxe.ui.backend.html5.StyleHelper;
 import haxe.ui.backend.html5.UserAgent;
@@ -17,9 +18,6 @@ import haxe.ui.events.MouseEvent;
 import haxe.ui.events.ScrollEvent;
 import haxe.ui.events.UIEvent;
 import haxe.ui.filters.Blur;
-import haxe.ui.filters.BoxShadow;
-import haxe.ui.filters.DropShadow;
-import haxe.ui.filters.Grayscale;
 import haxe.ui.geom.Point;
 import haxe.ui.geom.Rectangle;
 import haxe.ui.styles.Style;
@@ -335,45 +333,7 @@ class ComponentImpl extends ComponentBase {
 
         setCursor(style.cursor);
 
-        if (style.filter != null) {
-            if ((style.filter[0] is DropShadow)) {
-                var dropShadow:DropShadow = cast style.filter[0];
-                if (dropShadow.inner == false) {
-                    element.style.boxShadow = '${dropShadow.distance}px ${dropShadow.distance + 2}px ${dropShadow.blurX - 1}px ${dropShadow.blurY - 1}px ${HtmlUtils.rgba(dropShadow.color, dropShadow.alpha)}';
-                } else {
-                    element.style.boxShadow = 'inset ${dropShadow.distance}px ${dropShadow.distance}px ${dropShadow.blurX}px 0px ${HtmlUtils.rgba(dropShadow.color, dropShadow.alpha)}';
-                }
-            } else if ((style.filter[0] is BoxShadow)) {
-                var boxShadow:BoxShadow = cast style.filter[0];
-                if (boxShadow.inset == false) {
-                    element.style.boxShadow = '${boxShadow.offsetX}px ${boxShadow.offsetY}px ${boxShadow.blurRadius}px ${boxShadow.spreadRadius}px ${HtmlUtils.rgba(boxShadow.color, boxShadow.alpha)}';
-                } else {
-                    element.style.boxShadow = 'inset ${boxShadow.offsetX}px ${boxShadow.offsetY}px ${boxShadow.blurRadius}px ${boxShadow.spreadRadius}px ${HtmlUtils.rgba(boxShadow.color, boxShadow.alpha)}';
-                }
-            } else if ((style.filter[0] is Blur)) {
-                var blur:Blur = cast style.filter[0];
-                element.style.setProperty("-webkit-filter", 'blur(${blur.amount}px)');
-                element.style.setProperty("-moz-filter", 'blur(${blur.amount}px)');
-                element.style.setProperty("-o-filter", 'blur(${blur.amount}px)');
-                //element.style.setProperty("-ms-filter", 'blur(${blur.amount}px)');
-                element.style.setProperty("filter", 'blur(${blur.amount}px)');
-            } else if ((style.filter[0] is Grayscale)) {
-                var grayscale:Grayscale = cast style.filter[0];
-                element.style.setProperty("-webkit-filter", 'grayscale(${grayscale.amount}%)');
-                element.style.setProperty("-moz-filter", 'grayscale(${grayscale.amount}%)');
-                element.style.setProperty("-o-filter", 'grayscale(${grayscale.amount}%)');
-                element.style.setProperty("filter", 'grayscale(${grayscale.amount}%)');
-            }
-        } else {
-            element.style.filter = null;
-            element.style.boxShadow = null;
-            element.style.removeProperty("box-shadow");
-            element.style.removeProperty("-webkit-filter");
-            element.style.removeProperty("-moz-filter");
-            element.style.removeProperty("-o-filter");
-            //element.style.removeProperty("-ms-filter");
-            element.style.removeProperty("filter");
-        }
+        FilterHelper.applyFilters(this.element, style.filter);
 
         if (style.backdropFilter != null) {
             if ((style.backdropFilter[0] is Blur)) {

diff --git a/haxe/ui/backend/html5/FilterHelper.hx b/haxe/ui/backend/html5/FilterHelper.hx
@@ -0,0 +1,67 @@
+package haxe.ui.backend.html5;
+
+import haxe.ui.filters.Blur;
+import haxe.ui.filters.BoxShadow;
+import haxe.ui.filters.DropShadow;
+import haxe.ui.filters.Filter;
+import haxe.ui.filters.Grayscale;
+import js.html.Element;
+
+class FilterHelper {
+    public static function applyFilters(element:Element, filters:Array<Filter>) {
+        if (filters != null && filters.length > 0) {
+            var cssProperties:Map<String, Array<String>> = new Map<String, Array<String>>();
+            for (filter in filters) {
+                if ((filter is DropShadow)) {
+                    var dropShadow:DropShadow = cast filter;
+                    if (dropShadow.inner == false) {
+                        addProp(cssProperties, '${dropShadow.distance}px ${dropShadow.distance + 2}px ${dropShadow.blurX - 1}px ${dropShadow.blurY - 1}px ${HtmlUtils.rgba(dropShadow.color, dropShadow.alpha)}', "box-shadow");
+                    } else {
+                        addProp(cssProperties, 'inset ${dropShadow.distance}px ${dropShadow.distance}px ${dropShadow.blurX}px 0px ${HtmlUtils.rgba(dropShadow.color, dropShadow.alpha)}', "box-shadow");
+                    }
+                } else if ((filter is BoxShadow)) {
+                    var boxShadow:BoxShadow = cast filter;
+                    if (boxShadow.inset == false) {
+                        addProp(cssProperties, '${boxShadow.offsetX}px ${boxShadow.offsetY}px ${boxShadow.blurRadius}px ${boxShadow.spreadRadius}px ${HtmlUtils.rgba(boxShadow.color, boxShadow.alpha)}', "box-shadow");
+                    } else {
+                        addProp(cssProperties, 'inset ${boxShadow.offsetX}px ${boxShadow.offsetY}px ${boxShadow.blurRadius}px ${boxShadow.spreadRadius}px ${HtmlUtils.rgba(boxShadow.color, boxShadow.alpha)}', "box-shadow");
+                    }
+                } else if ((filter is Blur)) {
+                    var blur:Blur = cast filter;
+                    addProps(cssProperties, 'blur(${blur.amount}px)', ["-webkit-filter", "-moz-filter", "-o-filter", "filter"]);
+                } else if ((filter is Grayscale)) {
+                    var grayscale:Grayscale = cast filter;
+                    addProps(cssProperties, 'grayscale(${grayscale.amount}%)', ["-webkit-filter", "-moz-filter", "-o-filter", "filter"]);
+                } else {
+                    trace("WARNING: unrecognized filter type: " + Type.getClassName(Type.getClass(filter)));
+                }
+            }
+
+            for (key in cssProperties.keys()) {
+                var values = cssProperties.get(key);
+                element.style.setProperty(key, values.join(", "));
+            }
+        } else {
+            element.style.filter = null;
+            element.style.boxShadow = null;
+            element.style.removeProperty("box-shadow");
+            element.style.removeProperty("-webkit-filter");
+            element.style.removeProperty("-moz-filter");
+            element.style.removeProperty("-o-filter");
+            element.style.removeProperty("filter");
+        }
+    }
+
+    private static inline function addProps(cssProperties:Map<String, Array<String>>, value:String, names:Array<String>) {
+        for (name in names) {
+            addProp(cssProperties, value, name);
+        }
+    }
+
+    private static inline function addProp(cssProperties:Map<String, Array<String>>, value:String, name:String) {
+        if (!cssProperties.exists(name)) {
+            cssProperties.set(name, []);
+        }
+        cssProperties.get(name).push(value);
+    }
+}