diff --git a/apps/toolbox/src/main-page.xml b/apps/toolbox/src/main-page.xml
index d8ef87cba3..9a486eaa6e 100644
--- a/apps/toolbox/src/main-page.xml
+++ b/apps/toolbox/src/main-page.xml
@@ -34,6 +34,7 @@
+
diff --git a/apps/toolbox/src/pages/filters.ts b/apps/toolbox/src/pages/filters.ts
new file mode 100644
index 0000000000..16810258ca
--- /dev/null
+++ b/apps/toolbox/src/pages/filters.ts
@@ -0,0 +1,256 @@
+import { Observable, EventData, Page, View, Screen } from '@nativescript/core';
+
+let page: Page;
+
+export function navigatingTo(args: EventData) {
+ page = args.object;
+ page.bindingContext = new FilterModel();
+}
+
+export class FilterModel extends Observable {
+ width = 0;
+ height = 0;
+ constructor() {
+ super();
+ this.width = Screen.mainScreen.widthPixels;
+ this.height = Screen.mainScreen.heightPixels;
+ }
+
+ get blurSrc() {
+ return `https://picsum.photos/seed/blur/${this.width}/${this.height}`;
+ }
+
+ get greySrc() {
+ return `https://picsum.photos/seed/grey/${this.width}/${this.height}`;
+ }
+
+ get sepiaSrc() {
+ return `https://picsum.photos/seed/sepia/${this.width}/${this.height}`;
+ }
+
+ get brightnessSrc() {
+ return `https://picsum.photos/seed/brightness/${this.width}/${this.height}`;
+ }
+
+ get contrastSrc() {
+ return `https://picsum.photos/seed/contrast/${this.width}/${this.height}`;
+ }
+
+ get saturateSrc() {
+ return `https://picsum.photos/seed/saturate/${this.width}/${this.height}`;
+ }
+
+ get hueSrc() {
+ return `https://picsum.photos/seed/hue/${this.width}/${this.height}`;
+ }
+
+ get invertSrc() {
+ return `https://picsum.photos/seed/invert/${this.width}/${this.height}`;
+ }
+
+ get sepiaBrightnessSrc() {
+ return `https://picsum.photos/seed/sepiaBrightness/${this.width}/${this.height}`;
+ }
+
+ get imageSrc() {
+ return `https://picsum.photos/${this.width}/${this.height}?random=${Math.floor(Math.random() * 1000)}`;
+ }
+}
+
+function animateFilter(view: View, duration: number, stepFn: (progress: number) => string): Promise {
+ return new Promise((resolve) => {
+ const frameTime = 16;
+ const steps = Math.ceil(duration / frameTime);
+ let step = 0;
+
+ let id;
+ const doFrame = () => {
+ step++;
+ const progress = step / steps;
+ view.style.filter = stepFn(Math.min(progress, 1));
+
+ if (step >= steps) {
+ cancelAnimationFrame(id);
+ resolve();
+ } else {
+ requestAnimationFrame(doFrame);
+ }
+ };
+ id = requestAnimationFrame(doFrame);
+ });
+}
+
+export async function onAnimateBlur(args: EventData) {
+ const label = page.getViewById('blurAnimLabel');
+ if (!label) return;
+
+ // blur in: 0 -> 15 over 600ms
+ await animateFilter(label, 600, (p) => `blur(${p * 15})`);
+ // blur out: 15 -> 0 over 600ms
+ await animateFilter(label, 600, (p) => `blur(${(1 - p) * 15})`);
+ label.style.filter = '';
+}
+
+export async function onPulseBlur(args: EventData) {
+ const image = page.getViewById('blurAnimImage');
+ if (!image) return;
+
+ for (let i = 0; i < 3; i++) {
+ await animateFilter(image, 300, (p) => `blur(${p * 10})`);
+ await animateFilter(image, 300, (p) => `blur(${(1 - p) * 10})`);
+ }
+ image.style.filter = '';
+}
+
+export async function onAnimateBlurGray(args: EventData) {
+ const container = page.getViewById('blurGrayContainer');
+ if (!container) return;
+
+ // animate blur 0->10 and grayscale 0%->100% together
+ await animateFilter(container, 800, (p) => `blur(${p * 10}) grayscale(${p * 100}%)`);
+ // animate back
+ await animateFilter(container, 800, (p) => `blur(${(1 - p) * 10}) grayscale(${(1 - p) * 100}%)`);
+ container.style.filter = '';
+}
+
+export async function onBreatheBrightness(args: EventData) {
+ const container = page.getViewById('brightnessContainer');
+ if (!container) return;
+
+ for (let i = 0; i < 3; i++) {
+ // dim down: 1.0 -> 0.3
+ await animateFilter(container, 500, (p) => `brightness(${1.0 - p * 0.7})`);
+ // brighten up: 0.3 -> 1.5
+ await animateFilter(container, 500, (p) => `brightness(${0.3 + p * 1.2})`);
+ // settle back: 1.5 -> 1.0
+ await animateFilter(container, 300, (p) => `brightness(${1.5 - p * 0.5})`);
+ }
+ container.style.filter = '';
+}
+
+export async function onSweepHue(args: EventData) {
+ const container = page.getViewById('hueContainer');
+ if (!container) return;
+
+ // sweep 0 -> 360 degrees
+ await animateFilter(container, 2000, (p) => `hue-rotate(${p * 360}deg)`);
+ container.style.filter = '';
+}
+
+export async function onFadeSepia(args: EventData) {
+ const view = page.getViewById('sepiaAnim');
+ if (!view) return;
+
+ // fade in: 0% -> 100%
+ await animateFilter(view, 800, (p) => `sepia(${p * 100}%)`);
+ // hold
+ await new Promise((r) => setTimeout(r, 400));
+ // fade out: 100% -> 0%
+ await animateFilter(view, 800, (p) => `sepia(${(1 - p) * 100}%)`);
+ view.style.filter = '';
+}
+
+export async function onFlashInvert(args: EventData) {
+ const label = page.getViewById('invertAnim');
+ if (!label) return;
+
+ for (let i = 0; i < 4; i++) {
+ await animateFilter(label, 150, (p) => `invert(${p * 100}%)`);
+ await animateFilter(label, 150, (p) => `invert(${(1 - p) * 100}%)`);
+ }
+ label.style.filter = '';
+}
+
+export async function onGrowShadow(args: EventData) {
+ const label = page.getViewById('shadowAnim');
+ if (!label) return;
+
+ // grow shadow: offset and blur increase
+ await animateFilter(label, 800, (p) => {
+ const offset = p * 15;
+ const blur = p * 20;
+ return `drop-shadow(${offset} ${offset} ${blur} rgba(0,0,0,0.6))`;
+ });
+ // shrink shadow back
+ await animateFilter(label, 800, (p) => {
+ const offset = (1 - p) * 15;
+ const blur = (1 - p) * 20;
+ return `drop-shadow(${offset} ${offset} ${blur} rgba(0,0,0,0.6))`;
+ });
+ label.style.filter = '';
+}
+
+export async function onCascade(args: EventData) {
+ const container = page.getViewById('cascadeContainer');
+ if (!container) return;
+
+ // phase 1: blur in
+ await animateFilter(container, 500, (p) => `blur(${p * 8})`);
+ // phase 2: add grayscale while blurred
+ await animateFilter(container, 500, (p) => `blur(8) grayscale(${p * 100}%)`);
+ // phase 3: add sepia while blurred + gray
+ await animateFilter(container, 500, (p) => `blur(8) grayscale(100%) sepia(${p * 100}%)`);
+ // phase 4: unwind everything together
+ await animateFilter(container, 1000, (p) => {
+ const inv = 1 - p;
+ return `blur(${inv * 8}) grayscale(${inv * 100}%) sepia(${inv * 100}%)`;
+ });
+ container.style.filter = '';
+}
+
+export async function onPulseContrast(args: EventData) {
+ const container = page.getViewById('contrastContainer');
+ if (!container) return;
+
+ for (let i = 0; i < 3; i++) {
+ // increase contrast: 100% -> 300%
+ await animateFilter(container, 400, (p) => `contrast(${100 + p * 200}%)`);
+ // decrease contrast: 300% -> 100%
+ await animateFilter(container, 400, (p) => `contrast(${300 - p * 200}%)`);
+ }
+ container.style.filter = '';
+}
+
+export async function onWaveSaturation(args: EventData) {
+ const container = page.getViewById('saturateContainer');
+ if (!container) return;
+
+ for (let i = 0; i < 2; i++) {
+ // desaturate: 100% -> 0%
+ await animateFilter(container, 500, (p) => `saturate(${100 - p * 100}%)`);
+ // oversaturate: 0% -> 400%
+ await animateFilter(container, 500, (p) => `saturate(${p * 400}%)`);
+ // settle back: 400% -> 100%
+ await animateFilter(container, 400, (p) => `saturate(${400 - p * 300}%)`);
+ }
+ container.style.filter = '';
+}
+
+export async function onFullSpectrum(args: EventData) {
+ const container = page.getViewById('spectrumContainer');
+ if (!container) return;
+
+ // 1. Blur in
+ await animateFilter(container, 400, (p) => `blur(${p * 5})`);
+
+ // 2. Add brightness while blurred
+ await animateFilter(container, 400, (p) => `blur(5) brightness(${1 + p * 0.5})`);
+
+ // 3. Add hue rotation
+ await animateFilter(container, 600, (p) => `blur(5) brightness(1.5) hue-rotate(${p * 180}deg)`);
+
+ // 4. Transition to sepia + drop shadow
+ await animateFilter(container, 500, (p) => `blur(${5 - p * 5}) sepia(${p * 100}%) drop-shadow(${p * 5}px ${p * 5}px ${p * 10}px rgba(0,0,0,0.5))`);
+
+ // 5. Flash invert
+ await animateFilter(container, 200, (p) => `sepia(100%) invert(${p * 100}%) drop-shadow(5px 5px 10px rgba(0,0,0,0.5))`);
+ await animateFilter(container, 200, (p) => `sepia(100%) invert(${(1 - p) * 100}%) drop-shadow(5px 5px 10px rgba(0,0,0,0.5))`);
+
+ // 6. Fade out all effects
+ await animateFilter(container, 800, (p) => {
+ const inv = 1 - p;
+ return `sepia(${inv * 100}%) drop-shadow(${inv * 5}px ${inv * 5}px ${inv * 10}px rgba(0,0,0,${inv * 0.5}))`;
+ });
+
+ container.style.filter = '';
+}
diff --git a/apps/toolbox/src/pages/filters.xml b/apps/toolbox/src/pages/filters.xml
new file mode 100644
index 0000000000..953822b95a
--- /dev/null
+++ b/apps/toolbox/src/pages/filters.xml
@@ -0,0 +1,266 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/core/platforms/ios/src/CSSFilters.swift b/packages/core/platforms/ios/src/CSSFilters.swift
new file mode 100644
index 0000000000..248113cd0e
--- /dev/null
+++ b/packages/core/platforms/ios/src/CSSFilters.swift
@@ -0,0 +1,877 @@
+//
+// CSSFilters.swift
+// NativeScript
+//
+// Created by Osei Fortune on 17/02/2026.
+//
+
+import UIKit
+import CoreImage
+import CoreImage.CIFilterBuiltins
+import MetalKit
+import MetalPerformanceShaders
+
+
+// MARK: - Color Map
+internal let colorMap: [String: UIColor] = [
+ "crimson": UIColor(red: 220/255, green: 20/255, blue: 60/255, alpha: 1),
+ "skyblue": UIColor(red: 135/255, green: 206/255, blue: 235/255, alpha: 1),
+ "black": .black,
+ "silver": UIColor(white: 0.75, alpha: 1),
+ "gray": .gray,
+ "grey": .gray,
+ "white": .white,
+ "maroon": UIColor(red: 0.5, green: 0, blue: 0, alpha: 1),
+ "red": .red,
+ "purple": UIColor(red: 0.5, green: 0, blue: 0.5, alpha: 1),
+ "fuchsia": .magenta,
+ "green": .green,
+ "lime": UIColor(red: 0, green: 1, blue: 0, alpha: 1),
+ "olive": UIColor(red: 0.5, green: 0.5, blue: 0, alpha: 1),
+ "yellow": .yellow,
+ "navy": UIColor(red: 0, green: 0, blue: 0.5, alpha: 1),
+ "blue": .blue,
+ "teal": UIColor(red: 0, green: 0.5, blue: 0.5, alpha: 1),
+ "aqua": .cyan,
+ "orange": .orange,
+ "brown": UIColor(red: 0.65, green: 0.16, blue: 0.16, alpha: 1),
+ "pink": UIColor.systemPink,
+ "transparent": .clear
+]
+
+
+public class CSSFilters: NSObject {
+
+ enum Filter {
+ case blur(radius: CGFloat)
+ case brightness(value: CGFloat)
+ case contrast(value: CGFloat)
+ case saturate(value: CGFloat)
+ case hueRotate(degrees: CGFloat)
+ case invert(amount: CGFloat)
+ case opacity(amount: CGFloat)
+ case sepia(amount: CGFloat)
+ case grayscale(amount: CGFloat)
+ case dropShadow(offsetX: CGFloat, offsetY: CGFloat, blur: CGFloat, color: UIColor)
+ }
+
+
+ private static var device: MTLDevice?
+ private static var commandQueue: MTLCommandQueue?
+ private static var ciContext: CIContext?
+
+
+ private static var textureLoader: MTKTextureLoader?
+
+ // MARK: - MPS Texture Helpers
+
+ private static func createTexture(from ciImage: CIImage, context: CIContext, device: MTLDevice, commandQueue: MTLCommandQueue) -> MTLTexture? {
+ let width = Int(ciImage.extent.width)
+ let height = Int(ciImage.extent.height)
+ guard width > 0 && height > 0 else { return nil }
+
+ let descriptor = MTLTextureDescriptor.texture2DDescriptor(
+ pixelFormat: .bgra8Unorm,
+ width: width,
+ height: height,
+ mipmapped: false
+ )
+ descriptor.usage = [.shaderRead, .shaderWrite]
+ descriptor.storageMode = .shared
+
+ guard let texture = device.makeTexture(descriptor: descriptor) else { return nil }
+
+ let normalizedImage = ciImage.transformed(by: CGAffineTransform(
+ translationX: -ciImage.extent.origin.x,
+ y: -ciImage.extent.origin.y
+ ))
+
+ let colorSpace = CGColorSpaceCreateDeviceRGB()
+ guard let commandBuffer = commandQueue.makeCommandBuffer() else { return nil }
+ context.render(
+ normalizedImage,
+ to: texture,
+ commandBuffer: commandBuffer,
+ bounds: CGRect(origin: .zero, size: ciImage.extent.size),
+ colorSpace: colorSpace
+ )
+ commandBuffer.commit()
+ commandBuffer.waitUntilCompleted()
+
+ return texture
+ }
+
+ private static func createCIImage(from texture: MTLTexture, extent: CGRect) -> CIImage? {
+ guard let image = CIImage(mtlTexture: texture, options: [.colorSpace: CGColorSpaceCreateDeviceRGB()]) else { return nil }
+
+ return image.transformed(by: CGAffineTransform(translationX: extent.origin.x, y: extent.origin.y))
+ }
+
+ private static func applyMPSBlur(
+ to sourceTexture: MTLTexture,
+ sigma: Float,
+ device: MTLDevice,
+ commandQueue: MTLCommandQueue
+ ) -> MTLTexture? {
+ let descriptor = MTLTextureDescriptor.texture2DDescriptor(
+ pixelFormat: sourceTexture.pixelFormat,
+ width: sourceTexture.width,
+ height: sourceTexture.height,
+ mipmapped: false
+ )
+ descriptor.usage = [.shaderRead, .shaderWrite]
+ descriptor.storageMode = .shared
+
+ guard let outputTexture = device.makeTexture(descriptor: descriptor) else { return nil }
+
+ let blur = MPSImageGaussianBlur(device: device, sigma: sigma)
+ blur.edgeMode = .clamp
+
+ guard let commandBuffer = commandQueue.makeCommandBuffer() else { return nil }
+ blur.encode(commandBuffer: commandBuffer, sourceTexture: sourceTexture, destinationTexture: outputTexture)
+ commandBuffer.commit()
+ commandBuffer.waitUntilCompleted()
+
+ return outputTexture
+ }
+
+ private static func createCIImageFromLayerContents(view: UIView, scale: CGFloat, excludeLayer: CALayer?) -> CIImage? {
+ // Only use fast path if:
+ // 1. Layer has direct contents (CGImage)
+ // 2. No sublayers (except our filter layer)
+ // 3. No transforms on the view
+ // 4. No corner radius or other layer effects
+ let sublayersExcludingFilter = view.layer.sublayers?.filter { $0 !== excludeLayer }
+ guard let contents = view.layer.contents,
+ sublayersExcludingFilter == nil || sublayersExcludingFilter?.isEmpty == true,
+ view.transform.isIdentity,
+ view.layer.cornerRadius == 0,
+ view.layer.borderWidth == 0,
+ CFGetTypeID(contents as CFTypeRef) == CGImage.typeID else {
+ return nil
+ }
+
+ let cgImage = contents as! CGImage
+ let imageWidth = CGFloat(cgImage.width)
+ let imageHeight = CGFloat(cgImage.height)
+
+ let targetWidth = view.bounds.width * scale
+ let targetHeight = view.bounds.height * scale
+
+ guard imageWidth > 0 && imageHeight > 0 && targetWidth > 0 && targetHeight > 0 else { return nil }
+
+ var ciImage = CIImage(cgImage: cgImage)
+
+ let contentMode = view.contentMode
+
+ let imageAspect = imageWidth / imageHeight
+ let targetAspect = targetWidth / targetHeight
+
+ var scaleX: CGFloat = 1
+ var scaleY: CGFloat = 1
+ var offsetX: CGFloat = 0
+ var offsetY: CGFloat = 0
+
+ switch contentMode {
+ case .scaleToFill:
+ scaleX = targetWidth / imageWidth
+ scaleY = targetHeight / imageHeight
+
+ case .scaleAspectFit:
+ let fitScale: CGFloat
+ if imageAspect > targetAspect {
+ fitScale = targetWidth / imageWidth
+ } else {
+ fitScale = targetHeight / imageHeight
+ }
+ scaleX = fitScale
+ scaleY = fitScale
+ let scaledWidth = imageWidth * fitScale
+ let scaledHeight = imageHeight * fitScale
+ offsetX = (targetWidth - scaledWidth) / 2
+ offsetY = (targetHeight - scaledHeight) / 2
+
+ case .scaleAspectFill:
+ let fillScale: CGFloat
+ if imageAspect > targetAspect {
+ fillScale = targetHeight / imageHeight
+ } else {
+ fillScale = targetWidth / imageWidth
+ }
+ scaleX = fillScale
+ scaleY = fillScale
+ let scaledWidth = imageWidth * fillScale
+ let scaledHeight = imageHeight * fillScale
+ offsetX = (targetWidth - scaledWidth) / 2
+ offsetY = (targetHeight - scaledHeight) / 2
+
+ case .center:
+ offsetX = (targetWidth - imageWidth) / 2
+ offsetY = (targetHeight - imageHeight) / 2
+
+ case .top:
+ offsetX = (targetWidth - imageWidth) / 2
+ offsetY = targetHeight - imageHeight
+
+ case .bottom:
+ offsetX = (targetWidth - imageWidth) / 2
+ offsetY = 0
+
+ case .left:
+ offsetX = 0
+ offsetY = (targetHeight - imageHeight) / 2
+
+ case .right:
+ offsetX = targetWidth - imageWidth
+ offsetY = (targetHeight - imageHeight) / 2
+
+ case .topLeft:
+ offsetX = 0
+ offsetY = targetHeight - imageHeight
+
+ case .topRight:
+ offsetX = targetWidth - imageWidth
+ offsetY = targetHeight - imageHeight
+
+ case .bottomLeft:
+ offsetX = 0
+ offsetY = 0
+
+ case .bottomRight:
+ offsetX = targetWidth - imageWidth
+ offsetY = 0
+
+ case .redraw:
+ return nil
+
+ @unknown default:
+ return nil
+ }
+
+ var transform = CGAffineTransform.identity
+ transform = transform.scaledBy(x: scaleX, y: scaleY)
+ transform = transform.translatedBy(x: offsetX / scaleX, y: offsetY / scaleY)
+
+ ciImage = ciImage.transformed(by: transform)
+
+ let targetRect = CGRect(x: 0, y: 0, width: targetWidth, height: targetHeight)
+ ciImage = ciImage.cropped(to: targetRect)
+
+ return ciImage
+ }
+
+ private static func captureViewToCIImage(view: UIView, scale: CGFloat, excludeLayer: CALayer?, device: MTLDevice, commandQueue: MTLCommandQueue) -> CIImage? {
+ guard view.bounds.width > 0 && view.bounds.height > 0 else { return nil }
+
+ if let fastImage = createCIImageFromLayerContents(view: view, scale: scale, excludeLayer: excludeLayer) {
+ return fastImage
+ }
+
+ let wasHidden = excludeLayer?.isHidden ?? true
+ excludeLayer?.isHidden = true
+
+ view.layoutIfNeeded()
+
+ let fmt = UIGraphicsImageRendererFormat()
+ fmt.scale = scale
+ fmt.opaque = false
+ let renderer = UIGraphicsImageRenderer(bounds: view.bounds, format: fmt)
+ let image = renderer.image { ctx in
+ view.layer.render(in: ctx.cgContext)
+ }
+
+ excludeLayer?.isHidden = wasHidden
+
+ if let cg = image.cgImage {
+ return CIImage(cgImage: cg)
+ }
+ return CIImage(image: image)
+ }
+
+ @objcMembers
+ @objc(NSCCSSFilter)
+ public class CSSFilter: NSObject {
+ let layer = CAMetalLayer()
+ var filters: [Filter]
+ private var ciFilters: [CIFilter] = []
+ private weak var view: UIView?
+ private var colorSpace = CGColorSpaceCreateDeviceRGB()
+
+ public override init() {
+ filters = []
+ layer.isOpaque = false
+ layer.masksToBounds = false
+ layer.pixelFormat = .bgra8Unorm
+ layer.framebufferOnly = false
+ super.init()
+ }
+
+ init(default filters: [Filter] = []) {
+ self.filters = filters
+ layer.isOpaque = false
+ layer.masksToBounds = false
+ layer.pixelFormat = .bgra8Unorm
+ layer.framebufferOnly = false
+ }
+
+ public func reset() {
+ filters = []
+ layer.removeFromSuperlayer()
+ boundsObservation = nil
+ contentsObservation = nil
+ sublayersObservation = nil
+ sublayerContentObservations.removeAll()
+ view = nil
+ }
+
+ public func parse(css: String) {
+ let isEmpty = filters.count == 0
+ filters = CSSFilters.parse(css)
+ if(!isEmpty && filters.count == 0){
+ reset()
+ }
+ }
+
+ func resizeLayerIfNeeded() {
+ guard let view = view else { return }
+ let scale = view.window?.screen.scale ?? UIScreen.main.scale
+
+ var padLeft: CGFloat = 0, padRight: CGFloat = 0
+ var padTop: CGFloat = 0, padBottom: CGFloat = 0
+
+ for filter in filters {
+ if case .dropShadow(let offsetX, let offsetY, let blur, _) = filter {
+ let spread = blur * 3
+ padLeft = max(padLeft, spread - offsetX)
+ padRight = max(padRight, spread + offsetX)
+ padTop = max(padTop, spread - offsetY)
+ padBottom = max(padBottom, spread + offsetY)
+ }
+ }
+
+ padLeft = max(0, padLeft)
+ padRight = max(0, padRight)
+ padTop = max(0, padTop)
+ padBottom = max(0, padBottom)
+
+ let hasShadowOverflow = padLeft > 0 || padRight > 0 || padTop > 0 || padBottom > 0
+
+ let targetFrame: CGRect
+ if hasShadowOverflow {
+ targetFrame = CGRect(
+ x: -padLeft,
+ y: -padTop,
+ width: view.bounds.width + padLeft + padRight,
+ height: view.bounds.height + padTop + padBottom
+ )
+ view.clipsToBounds = false
+ } else {
+ targetFrame = view.bounds
+ }
+
+ let pixelSize = CGSize(width: targetFrame.width * scale, height: targetFrame.height * scale)
+ if layer.frame != targetFrame || layer.drawableSize != pixelSize || layer.contentsScale != scale {
+ layer.frame = targetFrame
+ layer.contentsScale = scale
+ layer.drawableSize = pixelSize
+ }
+ }
+
+ private var pendingInvalidate = false
+
+ public func invalidate() {
+ guard view != nil else { return }
+
+ guard !pendingInvalidate else { return }
+ pendingInvalidate = true
+
+ // Defer to next run loop to ensure sublayers have finished rendering
+ DispatchQueue.main.async { [weak self] in
+ guard let self = self else { return }
+ self.pendingInvalidate = false
+ guard let view = self.view else { return }
+ self.apply(to: view)
+ }
+ }
+
+ private var boundsObservation: NSKeyValueObservation?
+ private var contentsObservation: NSKeyValueObservation?
+ private var sublayersObservation: NSKeyValueObservation?
+ private var sublayerContentObservations: [NSKeyValueObservation] = []
+ private var isApplying = false
+
+ private func observeSublayerContents(layer: CALayer) {
+ guard let sublayers = layer.sublayers else { return }
+ for sublayer in sublayers {
+ if sublayer === self.layer { continue }
+
+ let observation = sublayer.observe(\.contents, options: [.new]) { [weak self] _, _ in
+ guard let self = self, !self.isApplying else { return }
+ self.invalidate()
+ }
+ sublayerContentObservations.append(observation)
+
+ observeSublayerContents(layer: sublayer)
+ }
+ }
+
+ private func setupSublayerObservation(for view: UIView) {
+ sublayerContentObservations.removeAll()
+
+ sublayersObservation = view.layer.observe(\.sublayers, options: [.new]) { [weak self] layer, _ in
+ guard let self = self, !self.isApplying else { return }
+ self.sublayerContentObservations.removeAll()
+ self.observeSublayerContents(layer: layer)
+ self.invalidate()
+ }
+
+ observeSublayerContents(layer: view.layer)
+ }
+
+ public func apply(to view: UIView) {
+ isApplying = true
+ defer { isApplying = false }
+
+ if(device == nil){
+ device = MTLCreateSystemDefaultDevice()
+ guard let device = device else {return}
+ commandQueue = device.makeCommandQueue()
+ ciContext = CIContext(mtlDevice: device)
+ }
+ if(self.view != view){
+ layer.device = device
+ boundsObservation = view.observe(\.bounds) { [weak self] _, _ in
+ guard let self = self, !self.isApplying else { return }
+ self.invalidate()
+ }
+ contentsObservation = view.layer.observe(\.contents) { [weak self] _, _ in
+ guard let self = self, !self.isApplying else { return }
+ self.invalidate()
+ }
+ setupSublayerObservation(for: view)
+ self.view = view
+ }
+ let scale = view.window?.screen.scale ?? UIScreen.main.scale
+
+ var hasVisualFilters = false
+ for filter in filters {
+ switch filter {
+ case .opacity(_): break
+ default: hasVisualFilters = true
+ }
+ }
+
+ if !hasVisualFilters {
+ layer.removeFromSuperlayer()
+ }
+
+ guard hasVisualFilters else { return }
+
+ if view.layer.sublayers?.last != layer {
+ view.layer.addSublayer(layer)
+ }
+
+ resizeLayerIfNeeded()
+
+ guard let drawable = layer.nextDrawable() else { return }
+
+ guard let device = device, let queue = commandQueue else { return }
+ guard var output = CSSFilters.captureViewToCIImage(view: view, scale: scale, excludeLayer: layer, device: device, commandQueue: queue) else { return }
+
+ var padLeftPx: CGFloat = 0, padBottomPx: CGFloat = 0
+ for filter in filters {
+ if case .dropShadow(let offsetX, let offsetY, let blur, _) = filter {
+ let spread = blur * 3
+ padLeftPx = max(padLeftPx, max(0, spread - offsetX) * scale)
+ padBottomPx = max(padBottomPx, max(0, spread + offsetY) * scale)
+ }
+ }
+
+ if padLeftPx > 0 || padBottomPx > 0 {
+ output = output.transformed(by: .init(translationX: padLeftPx, y: padBottomPx))
+ }
+
+ let contentExtent = output.extent
+
+ for filter in filters {
+ switch filter {
+
+ case .dropShadow(let offsetX, let offsetY, let blur, let color):
+ guard let colorGen = CIFilter(name: "CIConstantColorGenerator") else { continue }
+ var cr: CGFloat = 0, cg: CGFloat = 0, cb: CGFloat = 0, ca: CGFloat = 0
+ color.getRed(&cr, green: &cg, blue: &cb, alpha: &ca)
+ colorGen.setValue(CIColor(red: cr, green: cg, blue: cb, alpha: ca), forKey: kCIInputColorKey)
+ guard let colorImage = colorGen.outputImage?.cropped(to: contentExtent) else { continue }
+
+ guard let sourceAtop = CIFilter(name: "CISourceAtopCompositing") else { continue }
+ sourceAtop.setValue(colorImage, forKey: kCIInputImageKey)
+ sourceAtop.setValue(output, forKey: kCIInputBackgroundImageKey)
+ guard var shadow = sourceAtop.outputImage else { continue }
+
+ let blurPx = blur * scale
+ if blurPx > 0.0001 {
+ let blurPadPx = blurPx * 3
+ let blurCropExtent = contentExtent.insetBy(dx: -blurPadPx, dy: -blurPadPx)
+
+ if let context = ciContext,
+ let sourceTexture = CSSFilters.createTexture(from: shadow, context: context, device: device, commandQueue: queue),
+ let blurredTexture = CSSFilters.applyMPSBlur(to: sourceTexture, sigma: Float(blurPx), device: device, commandQueue: queue),
+ let blurredCI = CSSFilters.createCIImage(from: blurredTexture, extent: shadow.extent) {
+ shadow = blurredCI.cropped(to: blurCropExtent)
+ } else {
+ let blurFilter = CIFilter.gaussianBlur()
+ blurFilter.radius = Float(blurPx)
+ if let clamp = CIFilter(name: "CIAffineClamp") {
+ clamp.setValue(shadow, forKey: kCIInputImageKey)
+ clamp.setValue(CGAffineTransform.identity, forKey: "inputTransform")
+ if let clamped = clamp.outputImage {
+ blurFilter.inputImage = clamped
+ if let blurred = blurFilter.outputImage {
+ shadow = blurred.cropped(to: blurCropExtent)
+ }
+ }
+ } else {
+ blurFilter.inputImage = shadow
+ if let blurred = blurFilter.outputImage {
+ shadow = blurred.cropped(to: blurCropExtent)
+ }
+ }
+ }
+ }
+
+ shadow = shadow.transformed(by: CGAffineTransform(
+ translationX: offsetX * scale,
+ y: -offsetY * scale
+ ))
+
+ guard let composite = CIFilter(name: "CISourceOverCompositing") else { continue }
+ composite.setValue(output, forKey: kCIInputImageKey)
+ composite.setValue(shadow, forKey: kCIInputBackgroundImageKey)
+ if let filtered = composite.outputImage {
+ output = filtered
+ }
+
+ case .blur(let radius):
+ let blurPx = Float(radius * scale)
+ guard blurPx > 0 else { continue }
+ let cropExtent = output.extent
+
+ let blurFilter = CIFilter.gaussianBlur()
+ blurFilter.radius = blurPx
+ if let clamp = CIFilter(name: "CIAffineClamp") {
+ clamp.setValue(output, forKey: kCIInputImageKey)
+ clamp.setValue(CGAffineTransform.identity, forKey: "inputTransform")
+ if let clamped = clamp.outputImage {
+ blurFilter.inputImage = clamped
+ if let result = blurFilter.outputImage {
+ output = result.cropped(to: cropExtent)
+ }
+ continue
+ }
+ }
+ blurFilter.inputImage = output
+ if let result = blurFilter.outputImage {
+ output = result.cropped(to: cropExtent)
+ }
+
+ case .brightness(let value):
+ let f = CIFilter.colorControls()
+ f.brightness = Float(value - 1)
+ f.setValue(output, forKey: kCIInputImageKey)
+ if let result = f.outputImage { output = result }
+
+ case .contrast(let value):
+ let f = CIFilter.colorControls()
+ f.contrast = Float(value)
+ f.setValue(output, forKey: kCIInputImageKey)
+ if let result = f.outputImage { output = result }
+
+ case .saturate(let value):
+ let f = CIFilter.colorControls()
+ f.saturation = Float(value)
+ f.setValue(output, forKey: kCIInputImageKey)
+ if let result = f.outputImage { output = result }
+
+ case .hueRotate(let degrees):
+ let f = CIFilter.hueAdjust()
+ f.angle = Float(degrees * .pi / 180)
+ f.setValue(output, forKey: kCIInputImageKey)
+ if let result = f.outputImage { output = result }
+
+ case .invert(let amount):
+ let t = CGFloat(1 - 2 * amount)
+ let o = CGFloat(amount)
+ let f = CIFilter.colorMatrix()
+ f.rVector = CIVector(x: t, y: 0, z: 0, w: 0)
+ f.gVector = CIVector(x: 0, y: t, z: 0, w: 0)
+ f.bVector = CIVector(x: 0, y: 0, z: t, w: 0)
+ f.aVector = CIVector(x: 0, y: 0, z: 0, w: 1)
+ f.biasVector = CIVector(x: o, y: o, z: o, w: 0)
+ let cropExtent = output.extent
+ if let clamp = CIFilter(name: "CIAffineClamp") {
+ clamp.setValue(output, forKey: kCIInputImageKey)
+ clamp.setValue(CGAffineTransform.identity, forKey: "inputTransform")
+ if let clamped = clamp.outputImage {
+ f.setValue(clamped, forKey: kCIInputImageKey)
+ if let result = f.outputImage {
+ output = result.cropped(to: cropExtent)
+ }
+ continue
+ }
+ }
+ f.setValue(output, forKey: kCIInputImageKey)
+ if let result = f.outputImage { output = result }
+
+ case .opacity(let amount):
+ view.alpha = amount
+
+ case .sepia(let amount):
+ let f = CIFilter.sepiaTone()
+ f.intensity = Float(amount)
+ f.setValue(output, forKey: kCIInputImageKey)
+ if let result = f.outputImage { output = result }
+
+ case .grayscale(let amount):
+ let f = CIFilter.colorControls()
+ f.saturation = Float(1 - amount)
+ f.setValue(output, forKey: kCIInputImageKey)
+ if let result = f.outputImage { output = result }
+ }
+ }
+
+ let drawableBounds = CGRect(
+ origin: .zero,
+ size: CGSize(width: CGFloat(drawable.texture.width), height: CGFloat(drawable.texture.height))
+ )
+ output = output.cropped(to: drawableBounds)
+
+ guard output.extent.width > 0 && output.extent.height > 0 else { return }
+
+ let cb = commandQueue?.makeCommandBuffer()
+ ciContext?.render(output,
+ to: drawable.texture,
+ commandBuffer: cb,
+ bounds: drawableBounds,
+ colorSpace: colorSpace)
+ if let cb = cb {
+ cb.present(drawable)
+ cb.commit()
+ } else {
+ drawable.present()
+ }
+ }
+ }
+
+ private static func splitCssArgs(_ input: String) -> [String] {
+ var result: [String] = []
+ var current = ""
+ var depth = 0
+
+ for ch in input {
+ if ch == "(" { depth += 1 }
+ if ch == ")" { depth -= 1 }
+
+ if ch.isWhitespace && depth == 0 {
+ if !current.isEmpty {
+ result.append(current)
+ current = ""
+ }
+ } else {
+ current.append(ch)
+ }
+ }
+
+ if !current.isEmpty {
+ result.append(current)
+ }
+
+ return result
+ }
+
+
+
+ static func parse(_ value: String) -> [Filter] {
+ var filters: [Filter] = []
+ var i = value.startIndex
+
+ func skipSpaces() {
+ while i < value.endIndex && value[i].isWhitespace {
+ i = value.index(after: i)
+ }
+ }
+
+ while i < value.endIndex {
+ skipSpaces()
+
+ let nameStart = i
+ while i < value.endIndex && (value[i].isLetter || value[i] == "-") {
+ i = value.index(after: i)
+ }
+
+ guard nameStart < i else { break }
+ let name = value[nameStart.. 0 {
+ if value[i] == "(" { depth += 1 }
+ if value[i] == ")" { depth -= 1 }
+ i = value.index(after: i)
+ }
+
+ let args = value[argsStart.. CGFloat {
+ let trimmed = value.trimmingCharacters(in: .whitespacesAndNewlines).lowercased()
+ if trimmed.hasSuffix("px") {
+ let px = CGFloat(Double(trimmed.dropLast(2)) ?? Double(defaultValue))
+ return px / CGFloat(UIScreen.main.scale)
+ } else if trimmed.hasSuffix("%") {
+ return CGFloat((Double(trimmed.dropLast()) ?? Double(defaultValue)) / 100.0)
+ } else {
+ return CGFloat(Double(trimmed) ?? Double(defaultValue))
+ }
+ }
+
+ // Parse CSS angle: "30deg", "0.5turn", "1.57rad"
+ private static func parseCssAngle(_ value: String) -> CGFloat {
+ let trimmed = value.trimmingCharacters(in: .whitespacesAndNewlines).lowercased()
+ if trimmed.hasSuffix("deg") {
+ return CGFloat(Double(trimmed.dropLast(3)) ?? 0)
+ } else if trimmed.hasSuffix("grad") {
+ return CGFloat(Double(trimmed.dropLast(4)) ?? 0) * 0.9
+ } else if trimmed.hasSuffix("rad") {
+ return CGFloat(Double(trimmed.dropLast(3)) ?? 0) * 180 / .pi
+ } else if trimmed.hasSuffix("turn") {
+ return CGFloat(Double(trimmed.dropLast(4)) ?? 0) * 360
+ } else {
+ return CGFloat(Double(trimmed) ?? 0)
+ }
+ }
+
+ // Parse drop-shadow: "5px 5px 10px #000"
+ private static func parseDropShadow(_ value: String) -> Filter? {
+ let parts = splitCssArgs(value.trimmingCharacters(in: .whitespacesAndNewlines))
+ guard parts.count >= 2 else { return nil }
+
+ var offsetX: CGFloat = 0
+ var offsetY: CGFloat = 0
+ var blur: CGFloat = 0
+ var color: UIColor = .black
+
+ var lengthValues: [CGFloat] = []
+ var colorParts: [String] = []
+
+ for part in parts {
+ let trimmed = part.trimmingCharacters(in: .whitespacesAndNewlines).lowercased()
+
+ if trimmed.hasPrefix("#")
+ || trimmed.hasPrefix("rgb(")
+ || trimmed.hasPrefix("rgba(")
+ || colorMap[trimmed] != nil {
+ colorParts.append(part)
+ } else {
+ lengthValues.append(parseCssFloat(part))
+ }
+ }
+
+ guard lengthValues.count >= 2 else { return nil }
+
+ offsetX = lengthValues[0]
+ offsetY = lengthValues[1]
+ blur = lengthValues.count >= 3 ? max(0, lengthValues[2]) : 0 // CSS clamps blur to >= 0
+
+ if !colorParts.isEmpty {
+ let colorString = colorParts.joined(separator: " ")
+ color = parseCssColor(colorString)
+ }
+
+ return .dropShadow(offsetX: offsetX, offsetY: offsetY, blur: blur, color: color)
+ }
+
+ // MARK: - Helpers
+
+ static func parseCssColor(_ value: String) -> UIColor {
+ let trimmed = value.trimmingCharacters(in: .whitespacesAndNewlines).lowercased()
+ if let color = colorMap[value] {
+ return color
+ }
+ if trimmed.hasPrefix("#") {
+ let hex = String(trimmed.dropFirst())
+ switch hex.count {
+ case 3:
+ let r = CGFloat(Int(String(repeating: hex[hex.startIndex], count: 2), radix: 16)!) / 255
+ let g = CGFloat(Int(String(repeating: hex[hex.index(hex.startIndex, offsetBy: 1)], count: 2), radix: 16)!) / 255
+ let b = CGFloat(Int(String(repeating: hex[hex.index(hex.startIndex, offsetBy: 2)], count: 2), radix: 16)!) / 255
+ return UIColor(red: r, green: g, blue: b, alpha: 1)
+ case 6:
+ let intVal = Int(hex, radix: 16)!
+ let r = CGFloat((intVal >> 16) & 0xFF)/255
+ let g = CGFloat((intVal >> 8) & 0xFF)/255
+ let b = CGFloat(intVal & 0xFF)/255
+ return UIColor(red: r, green: g, blue: b, alpha: 1)
+ case 8:
+ let intVal = Int(hex, radix: 16)!
+ let a = CGFloat((intVal >> 24) & 0xFF)/255
+ let r = CGFloat((intVal >> 16) & 0xFF)/255
+ let g = CGFloat((intVal >> 8) & 0xFF)/255
+ let b = CGFloat(intVal & 0xFF)/255
+ return UIColor(red: r, green: g, blue: b, alpha: a)
+ default:
+ return .black
+ }
+ } else if trimmed.hasPrefix("rgb(") {
+ let nums = trimmed.dropFirst(4).dropLast().split(separator: ",").map { CGFloat(Double($0.trimmingCharacters(in: .whitespaces)) ?? 0) }
+ return UIColor(red: nums[0]/255, green: nums[1]/255, blue: nums[2]/255, alpha: 1)
+ } else if trimmed.hasPrefix("rgba(") {
+ let nums = trimmed.dropFirst(5).dropLast().split(separator: ",").map { $0.trimmingCharacters(in: .whitespaces) }
+ let r = CGFloat(Double(nums[0]) ?? 0)/255
+ let g = CGFloat(Double(nums[1]) ?? 0)/255
+ let b = CGFloat(Double(nums[2]) ?? 0)/255
+ let a = CGFloat(Double(nums[3]) ?? 1)
+ return UIColor(red: r, green: g, blue: b, alpha: a)
+ }
+ return .black
+ }
+
+}
diff --git a/packages/core/ui/core/view/index.android.ts b/packages/core/ui/core/view/index.android.ts
index 2b2938a136..3cc4f3d842 100644
--- a/packages/core/ui/core/view/index.android.ts
+++ b/packages/core/ui/core/view/index.android.ts
@@ -2,7 +2,7 @@ import type { Point, Position } from './view-interfaces';
import type { GestureTypes, GestureEventData } from '../../gestures';
import { getNativeScriptGlobals } from '../../../globals/global-utils';
import { ViewCommon, isEnabledProperty, originXProperty, originYProperty, isUserInteractionEnabledProperty, testIDProperty, AndroidHelper, androidOverflowEdgeProperty, statusBarStyleProperty } from './view-common';
-import { paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, directionProperty } from '../../styling/style-properties';
+import { paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, directionProperty, filterProperty } from '../../styling/style-properties';
import { layout } from '../../../utils';
import { Trace } from '../../../trace';
import { ShowModalOptions, hiddenProperty } from '../view-base';
@@ -1605,6 +1605,19 @@ export class View extends ViewCommon {
}
}
+ [filterProperty.getDefault](): string {
+ return '';
+ }
+ [filterProperty.setNative](value: string) {
+ // LayoutBase, ImageView and StyleableTextView has the setFilter method implemented in the native view, so we need to check before call it.
+ const nativeView: globalAndroid.view.View & {
+ setFilter?: (value: string) => void;
+ } = this.nativeViewProtected;
+ if (typeof nativeView['setFilter'] === 'function') {
+ nativeView.setFilter(value);
+ }
+ }
+
public _applyBackground(background: Background, isBorderDrawable: boolean, onlyColor: boolean, backgroundDrawable: android.graphics.drawable.Drawable) {
const nativeView = this.nativeViewProtected;
diff --git a/packages/core/ui/core/view/index.ios.ts b/packages/core/ui/core/view/index.ios.ts
index a88ccaf8dc..d29a52eef5 100644
--- a/packages/core/ui/core/view/index.ios.ts
+++ b/packages/core/ui/core/view/index.ios.ts
@@ -8,7 +8,7 @@ import { layout, ios as iosUtils, getWindow } from '../../../utils';
import { SDK_VERSION, supportsGlass } from '../../../utils/constants';
import { IOSHelper } from './view-helper';
import { ios as iosBackground, Background } from '../../styling/background';
-import { perspectiveProperty, visibilityProperty, opacityProperty, rotateProperty, rotateXProperty, rotateYProperty, scaleXProperty, scaleYProperty, translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty, directionProperty } from '../../styling/style-properties';
+import { perspectiveProperty, visibilityProperty, opacityProperty, rotateProperty, rotateXProperty, rotateYProperty, scaleXProperty, scaleYProperty, translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty, directionProperty, filterProperty } from '../../styling/style-properties';
import { profile } from '../../../profiling';
import { accessibilityEnabledProperty, accessibilityHiddenProperty, accessibilityHintProperty, accessibilityIdentifierProperty, accessibilityLabelProperty, accessibilityLanguageProperty, accessibilityLiveRegionProperty, accessibilityMediaSessionProperty, accessibilityRoleProperty, accessibilityStateProperty, accessibilityValueProperty, accessibilityIgnoresInvertColorsProperty } from '../../../accessibility/accessibility-properties';
import { IOSPostAccessibilityNotificationType, AccessibilityEventOptions, AccessibilityRole, AccessibilityState } from '../../../accessibility';
@@ -71,6 +71,19 @@ export class View extends ViewCommon {
return (this._privateFlags & PFLAG_FORCE_LAYOUT) === PFLAG_FORCE_LAYOUT;
}
+ private _filter: NSCCSSFilter;
+
+ [filterProperty.setNative](value: string) {
+ if (!this._filter) {
+ this._filter = NSCCSSFilter.alloc().init();
+ }
+ this._filter.parseWithCss(value);
+
+ if (this.nativeViewProtected) {
+ this._filter.applyTo(this.nativeViewProtected);
+ }
+ }
+
disposeNativeView() {
super.disposeNativeView();
diff --git a/packages/core/ui/styling/style-properties.ts b/packages/core/ui/styling/style-properties.ts
index bb65f7f602..113dd79c85 100644
--- a/packages/core/ui/styling/style-properties.ts
+++ b/packages/core/ui/styling/style-properties.ts
@@ -1250,3 +1250,9 @@ export const androidDynamicElevationOffsetProperty = new CssProperty({
+ name: 'filter',
+ cssName: 'filter',
+});
+filterProperty.register(Style);
diff --git a/packages/core/ui/styling/style/index.ts b/packages/core/ui/styling/style/index.ts
index 2b9ae8b3d0..30328e1d3b 100644
--- a/packages/core/ui/styling/style/index.ts
+++ b/packages/core/ui/styling/style/index.ts
@@ -154,7 +154,7 @@ export class Style extends Observable {
public boxShadow: string | ShadowCSSValues[];
public direction: CoreTypes.LayoutDirectionType;
-
+ public filter: string;
public fontSize: number;
public fontFamily: string;
public fontStyle: FontStyleType;
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!nsswiftsupport.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!nsswiftsupport.d.ts
index 955eeb2529..921461cbaa 100644
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!nsswiftsupport.d.ts
+++ b/packages/types-ios/src/lib/ios/objc-x86_64/objc!nsswiftsupport.d.ts
@@ -42,3 +42,22 @@ declare class NativeScriptViewFactory extends NSObject implements NativeScriptEm
presentNativeScriptApp(vc: UIViewController): any;
}
+
+declare class NSCCSSFilter extends NSObject {
+
+ static alloc(): NSCCSSFilter; // inherited from NSObject
+
+ static new(): NSCCSSFilter; // inherited from NSObject
+
+ readonly layer: CAMetalLayer;
+
+ applyTo(view: UIView): void;
+
+ parseWithCss(css: string): void;
+
+ reset(): void;
+
+ resizeLayerIfNeeded(): void;
+
+ invalidate(): void;
+}
\ No newline at end of file
diff --git a/packages/ui-mobile-base/android/build.gradle b/packages/ui-mobile-base/android/build.gradle
index 6051f05dfc..0b80384bfc 100644
--- a/packages/ui-mobile-base/android/build.gradle
+++ b/packages/ui-mobile-base/android/build.gradle
@@ -7,7 +7,7 @@ buildscript {
}
dependencies {
classpath 'com.android.tools.build:gradle:8.11.1'
- classpath 'org.jetbrains.kotlin:kotlin-gradle-plugin:2.0.21'
+ classpath 'org.jetbrains.kotlin:kotlin-gradle-plugin:2.2.0'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
diff --git a/packages/ui-mobile-base/android/widgetdemo/src/main/AndroidManifest.xml b/packages/ui-mobile-base/android/widgetdemo/src/main/AndroidManifest.xml
index fd9c3be6e8..0606dc29d1 100644
--- a/packages/ui-mobile-base/android/widgetdemo/src/main/AndroidManifest.xml
+++ b/packages/ui-mobile-base/android/widgetdemo/src/main/AndroidManifest.xml
@@ -1,7 +1,10 @@
-
+
+
+ $name: paddingBottom=${page.paddingBottom}, edge=${page.edgeInsets.bottom}, ime=${page.imeInsets.bottom}")
}
@@ -287,6 +293,13 @@ class MainActivity : AppCompatActivity() {
Utils.enableEdgeToEdge(this)
val frame = ContentLayout(this)
+ //ete(frame)
+ frame.layoutParams = CommonLayoutParams(
+ ViewGroup.LayoutParams(
+ ViewGroup.LayoutParams.MATCH_PARENT,
+ ViewGroup.LayoutParams.MATCH_PARENT
+ )
+ )
frame.overflowEdge = LayoutBase.OverflowEdgeIgnore
@@ -391,4 +404,132 @@ class MainActivity : AppCompatActivity() {
frame.addView(page)
setContentView(frame)
}
+
+ fun growShadow(view: LayoutBase, onComplete: (() -> Unit)? = null) {
+ // Grow shadow: offset and blur increase
+ val growAnimator = ValueAnimator.ofFloat(0f, 1f).apply {
+ duration = 800
+ addUpdateListener { animation ->
+ val p = animation.animatedValue as Float
+ val offset = p * 15
+ val blur = p * 20
+ view.filter = "drop-shadow($offset $offset $blur rgba(0,0,0,0.6))"
+ }
+ }
+
+ // Shrink shadow back
+ val shrinkAnimator = ValueAnimator.ofFloat(0f, 1f).apply {
+ duration = 800
+ addUpdateListener { animation ->
+ val p = animation.animatedValue as Float
+ val offset = (1 - p) * 15
+ val blur = (1 - p) * 20
+ view.filter = "drop-shadow($offset $offset $blur rgba(0,0,0,0.6))"
+ }
+ }
+
+ growAnimator.addListener(object : android.animation.Animator.AnimatorListener {
+ override fun onAnimationStart(animation: android.animation.Animator) {}
+ override fun onAnimationCancel(animation: android.animation.Animator) {}
+ override fun onAnimationRepeat(animation: android.animation.Animator) {}
+ override fun onAnimationEnd(animation: android.animation.Animator) {
+ shrinkAnimator.start()
+ }
+ })
+
+ shrinkAnimator.addListener(object : android.animation.Animator.AnimatorListener {
+ override fun onAnimationStart(animation: android.animation.Animator) {}
+ override fun onAnimationCancel(animation: android.animation.Animator) {}
+ override fun onAnimationRepeat(animation: android.animation.Animator) {}
+ override fun onAnimationEnd(animation: android.animation.Animator) {
+ view.filter = ""
+ onComplete?.invoke()
+ }
+ })
+
+ growAnimator.start()
+ }
+
+ fun growShadow(view: StyleableTextView, onComplete: (() -> Unit)? = null) {
+ // Grow shadow: offset and blur increase
+ val growAnimator = ValueAnimator.ofFloat(0f, 1f).apply {
+ duration = 800
+ addUpdateListener { animation ->
+ val p = animation.animatedValue as Float
+ val offset = p * 15
+ val blur = p * 20
+ view.filter = "drop-shadow($offset $offset $blur rgba(0,0,0,0.6))"
+ }
+ }
+
+ // Shrink shadow back
+ val shrinkAnimator = ValueAnimator.ofFloat(0f, 1f).apply {
+ duration = 800
+ addUpdateListener { animation ->
+ val p = animation.animatedValue as Float
+ val offset = (1 - p) * 15
+ val blur = (1 - p) * 20
+ view.filter = "drop-shadow($offset $offset $blur rgba(0,0,0,0.6))"
+ }
+ }
+
+ growAnimator.addListener(object : android.animation.Animator.AnimatorListener {
+ override fun onAnimationStart(animation: android.animation.Animator) {}
+ override fun onAnimationCancel(animation: android.animation.Animator) {}
+ override fun onAnimationRepeat(animation: android.animation.Animator) {}
+ override fun onAnimationEnd(animation: android.animation.Animator) {
+ shrinkAnimator.start()
+ }
+ })
+
+ shrinkAnimator.addListener(object : android.animation.Animator.AnimatorListener {
+ override fun onAnimationStart(animation: android.animation.Animator) {}
+ override fun onAnimationCancel(animation: android.animation.Animator) {}
+ override fun onAnimationRepeat(animation: android.animation.Animator) {}
+ override fun onAnimationEnd(animation: android.animation.Animator) {
+ view.filter = ""
+ onComplete?.invoke()
+ }
+ })
+
+ growAnimator.start()
+ }
+
+ fun demoGrowShadow() {
+ val container = ContentLayout(this)
+ container.setBackgroundColor(Color.WHITE)
+ container.layoutParams = CommonLayoutParams(
+ ViewGroup.LayoutParams(
+ ViewGroup.LayoutParams.MATCH_PARENT,
+ ViewGroup.LayoutParams.MATCH_PARENT
+ )
+ )
+
+ val shadowLabel = StackLayout(this).apply {
+ setBackgroundColor(Color.parseColor("#3498db"))
+ layoutParams = CommonLayoutParams(
+ ViewGroup.LayoutParams(200, 200)
+ ).apply {
+ gravity = android.view.Gravity.CENTER
+ }
+ }
+
+ val labelText = StyleableTextView(this).apply {
+ text = "Shadow"
+ setTextColor(Color.WHITE)
+ textSize = 24f
+ }
+ shadowLabel.addView(labelText)
+
+ val btn = Button(this).apply {
+ text = "Grow Shadow"
+ setOnClickListener {
+ growShadow(shadowLabel)
+ }
+ }
+
+ container.addView(shadowLabel)
+ container.addView(btn)
+ setContentView(container)
+ }
}
diff --git a/packages/ui-mobile-base/android/widgets/build.gradle b/packages/ui-mobile-base/android/widgets/build.gradle
index b942f0634f..a477b7258f 100644
--- a/packages/ui-mobile-base/android/widgets/build.gradle
+++ b/packages/ui-mobile-base/android/widgets/build.gradle
@@ -3,6 +3,7 @@
def isWinOs = System.properties['os.name'].toLowerCase().contains('windows')
apply plugin: 'com.android.library'
+apply plugin: 'org.jetbrains.kotlin.android'
def computeCompileSdkVersion() {
if (project.hasProperty("compileSdk")) {
@@ -43,9 +44,17 @@ android {
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
+ compileOptions {
+ sourceCompatibility JavaVersion.VERSION_11
+ targetCompatibility JavaVersion.VERSION_11
+ }
+ kotlinOptions {
+ jvmTarget = '11'
+ }
}
dependencies {
+ implementation 'androidx.core:core-ktx:1.17.0'
def androidXViewPagerVersion = "1.1.0"
if (project.hasProperty("androidXViewPager")) {
androidXViewPagerVersion = androidXViewPager
diff --git a/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/CSSFilters.kt b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/CSSFilters.kt
new file mode 100644
index 0000000000..483ceb3442
--- /dev/null
+++ b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/CSSFilters.kt
@@ -0,0 +1,1176 @@
+package org.nativescript.widgets
+
+import android.app.ActivityManager
+import android.content.Context
+import android.content.res.Resources
+import android.graphics.Bitmap
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.ColorMatrix
+import android.graphics.ColorMatrixColorFilter
+import android.graphics.Paint
+import android.graphics.PorterDuff
+import android.graphics.PorterDuffColorFilter
+import android.graphics.RenderEffect
+import android.graphics.RenderNode
+import android.graphics.Shader
+import android.os.Build
+import android.renderscript.Allocation
+import android.renderscript.Element
+import android.renderscript.RenderScript
+import android.renderscript.ScriptIntrinsicBlur
+import android.view.View
+import androidx.annotation.RequiresApi
+import androidx.collection.LruCache
+import androidx.core.graphics.createBitmap
+import org.nativescript.widgets.CSSFilters.FilterHelper.Companion.createDropShadowBitmap
+import java.util.WeakHashMap
+import kotlin.math.ceil
+import kotlin.math.cos
+import kotlin.math.sin
+
+private val FILTER_REGEX = Regex("""(\w+(?:-\w+)?)\(([^()]*(?:\([^()]*\)[^()]*)*)\)""")
+private val SPLIT_REGEX = Regex("\\s+")
+private const val PI_FLOAT = Math.PI.toFloat()
+private const val RAD_TO_DEG = (180f / PI_FLOAT)
+
+
+class CSSFilters {
+
+ sealed class Filter {
+ data class Blur(val radiusPx: Float) : Filter()
+ data class Brightness(val value: Float) : Filter()
+ data class Contrast(val value: Float) : Filter()
+ data class Saturate(val value: Float) : Filter()
+ data class HueRotate(val degrees: Float) : Filter()
+ data class Invert(val amount: Float) : Filter() // 0..1
+ data class Opacity(val amount: Float) : Filter() // 0..1
+ data class Sepia(val amount: Float) : Filter() // 0..1
+ data class Grayscale(val amount: Float) : Filter() // 0..1
+ data class DropShadow(
+ val offsetX: Float,
+ val offsetY: Float,
+ val blur: Float,
+ val color: Int
+ ) : Filter()
+ }
+
+ internal class BitmapPool(context: Context) {
+ // How many bytes this pool is allowed to use
+ private val maxSizeBytes: Int
+
+ init {
+ val am = context.getSystemService(Context.ACTIVITY_SERVICE) as ActivityManager
+ val totalMem = am.memoryClass * 1024 * 1024
+ maxSizeBytes = totalMem / 4 // 1/4 of app’s heap
+ }
+
+ private fun bitmapByteSize(b: Bitmap): Int =
+ b.allocationByteCount // safest API; works pre/post 26
+
+ /** LRUCache over *bytes* */
+ private val pool = object : LruCache(maxSizeBytes) {
+ override fun sizeOf(key: String, value: Bitmap): Int {
+ return bitmapByteSize(value) // LRU will evict by total bytes
+ }
+
+ override fun entryRemoved(
+ evicted: Boolean,
+ key: String,
+ oldValue: Bitmap,
+ newValue: Bitmap?
+ ) {
+ if (!oldValue.isRecycled) oldValue.recycle()
+ }
+ }
+
+ private fun key(
+ width: Int,
+ height: Int,
+ config: Bitmap.Config
+ ) = "$width:$height:${config.name}"
+
+
+ fun getSourceBitmap(
+ width: Int,
+ height: Int,
+ config: Bitmap.Config = Bitmap.Config.ARGB_8888,
+ ): Bitmap {
+ val k = "${key(width, height, config)}:source"
+ val cached = pool[k]
+ return if (cached != null && !cached.isRecycled) {
+ cached.eraseColor(Color.TRANSPARENT) // clear previous content
+ cached
+ } else {
+ createBitmap(width, height, config)
+ }
+ }
+
+ fun getBitmap(
+ width: Int,
+ height: Int,
+ config: Bitmap.Config = Bitmap.Config.ARGB_8888,
+ ): Bitmap {
+ val k = key(width, height, config)
+ val cached = pool[k]
+ return if (cached != null && !cached.isRecycled) {
+ cached.eraseColor(Color.TRANSPARENT) // clear previous content
+ cached
+ } else {
+ createBitmap(width, height, config)
+ }
+ }
+
+ fun putBitmap(bitmap: Bitmap, source: Boolean? = null) {
+ if (bitmap.isRecycled) return
+ var k = key(bitmap.width, bitmap.height, bitmap.config ?: Bitmap.Config.ARGB_8888)
+ if (source == true) {
+ k = "$k:source"
+ }
+ if (pool[k] == null) {
+ pool.put(k, bitmap)
+ }
+ }
+
+ fun clear() {
+ pool.evictAll()
+ }
+ }
+
+ @Suppress("DEPRECATION")
+ internal class FilterHelper {
+ internal var source: Bitmap? = null
+ internal var shadowsOrBlurs: MutableList = mutableListOf()
+ internal var cssFilter: ColorMatrix? = null
+
+ internal var getOrInitCssFilter: ColorMatrix
+ get() {
+ if (cssFilter == null) cssFilter = ColorMatrix()
+ return cssFilter!!
+ }
+ set(value) {
+ cssFilter = value
+ }
+
+ companion object {
+ fun createBlurBitmap(
+ context: Context,
+ width: Int,
+ height: Int,
+ blurRadius: Float,
+ source: Bitmap,
+ rs: RenderScript?
+ ): Bitmap {
+ var destroyRS = false
+ var renderScript = rs
+
+ if (rs == null) {
+ renderScript = RenderScript.create(context)
+ destroyRS = true
+ }
+
+ val input = Allocation.createFromBitmap(rs, source)
+ val output = Allocation.createTyped(rs, input.type)
+ val script = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs))
+ script.setRadius(blurRadius.coerceIn(0f, 25f))
+ script.setInput(input)
+ script.forEach(output)
+
+ val blurred = createBitmap(width, height)
+ output.copyTo(blurred)
+
+ if (destroyRS) {
+ renderScript?.destroy()
+ }
+
+ return blurred
+ }
+
+ fun createDropShadowBitmap(
+ context: Context,
+ offsetX: Float,
+ offsetY: Float,
+ width: Int,
+ height: Int,
+ blurRadius: Float,
+ color: Int,
+ source: Bitmap,
+ rs: RenderScript? = null,
+ destination: Canvas? = null
+ ): Bitmap {
+ val pool = getPool(context)
+
+ // try cache first
+ val key = makeShadowCacheKey(source, offsetX, offsetY, blurRadius, color, width, height)
+ dropShadowCache[key]?.let { cached ->
+ // cached is immutable/shared — return directly
+ return cached
+ }
+
+ // compute padding to account for blur spread and support negative offsets
+ val pad = ceil(blurRadius * 3f).toInt().coerceAtLeast(0)
+ val offLeft = ceil(maxOf(0f, -offsetX)).toInt()
+ val offRight = ceil(maxOf(0f, offsetX)).toInt()
+ val offTop = ceil(maxOf(0f, -offsetY)).toInt()
+ val offBottom = ceil(maxOf(0f, offsetY)).toInt()
+
+ val leftPad = pad + offLeft
+ val rightPad = pad + offRight
+ val topPad = pad + offTop
+ val bottomPad = pad + offBottom
+
+ val outW = (width + leftPad + rightPad).coerceAtLeast(1)
+ val outH = (height + topPad + bottomPad).coerceAtLeast(1)
+
+ val shadowBmp = pool.getBitmap(outW, outH, source.config ?: Bitmap.Config.ARGB_8888)
+ // ensure transparent background
+ shadowBmp.eraseColor(Color.TRANSPARENT)
+ val canvas = destination ?: Canvas(shadowBmp)
+
+ var destroyRS = false
+ var renderScript = rs
+
+ if (rs == null) {
+ renderScript = RenderScript.create(context)
+ destroyRS = true
+ }
+
+ val paint = Paint().apply {
+ isAntiAlias = true
+ isFilterBitmap = true
+ colorFilter = PorterDuffColorFilter(color, PorterDuff.Mode.SRC_IN)
+ }
+
+ if (blurRadius > 0f) {
+ renderScript?.let { rsInner ->
+ // create a temp bitmap larger than source so blur doesn't get clipped
+ val tempW = source.width + pad * 2
+ val tempH = source.height + pad * 2
+ val tempBmp = pool.getBitmap(tempW, tempH, source.config ?: Bitmap.Config.ARGB_8888)
+
+ // draw source centered into tempBmp (pad margin)
+ val tempCanvas = Canvas(tempBmp)
+ tempCanvas.drawBitmap(source, pad.toFloat(), pad.toFloat(), null)
+
+ // run blur on tempBmp -> blurredBmp
+ val input = Allocation.createFromBitmap(rsInner, tempBmp)
+ val output = Allocation.createTyped(rsInner, input.type)
+ val script = ScriptIntrinsicBlur.create(rsInner, Element.U8_4(rsInner))
+ script.setRadius(blurRadius.coerceIn(0f, 25f))
+ script.setInput(input)
+ script.forEach(output)
+
+ val blurred = pool.getBitmap(tempW, tempH, tempBmp.config ?: Bitmap.Config.ARGB_8888)
+ output.copyTo(blurred)
+
+ val targetSourceX = leftPad.toFloat()
+ val targetSourceY = topPad.toFloat()
+
+ val drawX = targetSourceX - pad + offsetX
+ val drawY = targetSourceY - pad + offsetY
+
+ canvas.drawBitmap(blurred, drawX, drawY, paint)
+
+ // return temporary bitmaps to pool
+ pool.putBitmap(tempBmp)
+ pool.putBitmap(blurred)
+ }
+ } else {
+ // No blur — draw the tinted source directly at the offset
+ val targetSourceX = leftPad.toFloat()
+ val targetSourceY = topPad.toFloat()
+ canvas.drawBitmap(source, targetSourceX + offsetX, targetSourceY + offsetY, paint)
+ }
+
+ if (destroyRS) {
+ renderScript?.destroy()
+ }
+
+ // copy pooled shadow into an immutable cached bitmap and return pooled one to pool
+ val cachedCopy = shadowBmp.copy(Bitmap.Config.ARGB_8888, false)
+ // return the pooled shadow back to the pool, cachedCopy is the shared result
+ pool.putBitmap(shadowBmp)
+ dropShadowCache.put(key, cachedCopy)
+
+
+ return cachedCopy
+ }
+
+
+ fun build(view: View, filters: List, draw: (Canvas) -> Unit): FilterHelper {
+ val helper = FilterHelper()
+ val pool = getPool(view.context)
+ val source = pool.getBitmap(view.width, view.height, Bitmap.Config.ARGB_8888)
+ val canvas = Canvas(source)
+ draw(canvas)
+ helper.source = source
+ pool.putBitmap(source)
+ var rs: RenderScript? = null
+ for (filter in filters) {
+ when (filter) {
+ is Filter.Blur -> {
+ if (filter.radiusPx > 0f) {
+ if (rs == null) {
+ rs = RenderScript.create(view.context)
+ }
+ helper.shadowsOrBlurs.add(
+ createBlurBitmap(
+ view.context, view.width, view.height, filter.radiusPx, source, rs
+ )
+ )
+ }
+ }
+
+ is Filter.Brightness -> {
+ helper.getOrInitCssFilter.postConcat(
+ ColorMatrix(brightness(filter.value))
+ )
+ }
+
+ is Filter.Contrast -> {
+ helper.getOrInitCssFilter.postConcat(
+ ColorMatrix(contrast(filter.value))
+ )
+ }
+
+ is Filter.DropShadow -> {
+
+ val key = makeShadowCacheKey(
+ source,
+ filter.offsetX,
+ filter.offsetY,
+ filter.blur,
+ filter.color,
+ view.width,
+ view.height
+ )
+
+ keyToView[view]?.add(key) ?: run {
+ keyToView[view] = HashSet().apply {
+ add(key)
+ }
+ }
+
+ helper.shadowsOrBlurs.add(
+ createDropShadowBitmap(
+ view.context,
+ filter.offsetX,
+ filter.offsetY,
+ view.width,
+ view.height,
+ filter.blur,
+ filter.color,
+ source,
+ rs
+ )
+ )
+ }
+
+ is Filter.HueRotate -> {
+ helper.getOrInitCssFilter.postConcat(
+ ColorMatrix(hue(filter.degrees))
+ )
+ }
+
+ is Filter.Invert -> {
+ helper.getOrInitCssFilter.postConcat(
+ ColorMatrix(invert(filter.amount))
+ )
+ }
+
+ is Filter.Opacity -> {
+ helper.getOrInitCssFilter.postConcat(
+ ColorMatrix(opacity(filter.amount))
+ )
+ }
+
+ is Filter.Saturate -> {
+ helper.getOrInitCssFilter.postConcat(
+ ColorMatrix(saturate(filter.value))
+ )
+ }
+
+ is Filter.Sepia -> {
+ helper.getOrInitCssFilter.postConcat(
+ ColorMatrix(sepia(filter.amount))
+ )
+ }
+
+ is Filter.Grayscale -> {
+ helper.getOrInitCssFilter.postConcat(
+ ColorMatrix(grayscale(filter.amount))
+ )
+ }
+ }
+
+ }
+ rs?.destroy()
+ return helper
+ }
+ }
+ }
+
+ internal data class ShadowOrBlur(val shadow: RenderNode? = null, val blur: Bitmap? = null)
+
+ @Suppress("DEPRECATION")
+ @RequiresApi(Build.VERSION_CODES.Q)
+ internal class FilterHelperV2 {
+ internal var sourceFallback: Bitmap? = null
+ internal val sourceNode: RenderNode by lazy { RenderNode("source") }
+ internal var cssFilter: ColorMatrix? = null
+ internal val shadowsOrBlurs: MutableList = mutableListOf()
+
+ internal var getOrInitCssFilter: ColorMatrix
+ get() {
+ if (cssFilter == null) cssFilter = ColorMatrix()
+ return cssFilter!!
+ }
+ set(value) {
+ cssFilter = value
+ }
+
+ companion object {
+ fun build(view: View, filters: List, draw: (Canvas) -> Unit): FilterHelperV2 {
+ val helper = FilterHelperV2()
+ val pool = getPool(view.context)
+ var rs: RenderScript? = null
+ var needsBitmapFallback = false
+
+ // Try recording directly to RenderNode
+ try {
+ helper.sourceNode.setPosition(0, 0, view.width, view.height)
+ val canvas = helper.sourceNode.beginRecording()
+ draw(canvas)
+ helper.sourceNode.endRecording()
+ } catch (_: Exception) {
+ // Some devices forbid hardware-backed RenderNode drawing
+ needsBitmapFallback = true
+ }
+
+ // Fallback to bitmap if RenderNode recording fails
+ if (needsBitmapFallback) {
+ helper.sourceFallback = pool.getSourceBitmap(view.width, view.height)
+ val canvas = Canvas(helper.sourceFallback!!)
+ draw(canvas)
+ }
+
+
+ for (filter in filters) {
+ when (filter) {
+ is Filter.Blur -> {
+ if (filter.radiusPx > 0f) {
+ val source =
+ helper.sourceFallback ?: pool.getSourceBitmap(view.width, view.height).also {
+ val c = Canvas(it)
+ view.setTag(R.id.tag_suppress_ops, true)
+ view.draw(c)
+ view.setTag(R.id.tag_suppress_ops, false)
+ }
+
+ if (rs == null) rs = RenderScript.create(view.context)
+ val input = Allocation.createFromBitmap(rs, source)
+ val output = Allocation.createTyped(rs, input.type)
+ val script = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs))
+ script.setRadius(filter.radiusPx.coerceIn(0.0001f, 25f))
+ script.setInput(input)
+ script.forEach(output)
+
+ val blurBmp = pool.getBitmap(view.width, view.height)
+ output.copyTo(blurBmp)
+
+ if (!needsBitmapFallback) {
+ val blurNode = RenderNode("blurNode")
+ blurNode.setPosition(0, 0, view.width, view.height)
+ val blurCanvas = blurNode.beginRecording()
+ blurCanvas.drawBitmap(
+ blurBmp, 0F, 0F, null
+ )
+ blurNode.endRecording()
+ helper.shadowsOrBlurs.add(ShadowOrBlur(blurNode))
+ } else {
+ helper.shadowsOrBlurs.add(ShadowOrBlur(null, blurBmp))
+ }
+ }
+ }
+
+ is Filter.DropShadow -> {
+ val src = helper.sourceFallback
+ ?: pool.getBitmap(view.width, view.height).also {
+ val c = Canvas(it)
+ view.setTag(R.id.tag_suppress_ops, true)
+ view.draw(c)
+ view.setTag(R.id.tag_suppress_ops, false)
+ }
+
+ val shadowBmp = createDropShadowBitmap(
+ view.context,
+ filter.offsetX,
+ filter.offsetY,
+ view.width,
+ view.height,
+ filter.blur,
+ filter.color,
+ src,
+ rs
+ )
+
+ helper.shadowsOrBlurs.add(ShadowOrBlur(null, shadowBmp))
+
+ /*
+ if (!needsBitmapFallback) {
+ val shadowNode = RenderNode("shadow").apply {
+ setPosition(
+ 0,
+ 0,
+ view.width + filter.offsetX.toInt(),
+ view.height + filter.offsetY.toInt()
+ )
+ val shadowCanvas = beginRecording()
+ shadowCanvas.drawBitmap(shadowBmp, 0f, 0f, null)
+ endRecording()
+ }
+ helper.shadowsOrBlurs.add(ShadowOrBlur(shadowNode))
+ } else {
+ helper.shadowsOrBlurs.add(ShadowOrBlur(null, shadowBmp))
+ }
+ */
+ // shadowBmp will be recycled later when pool evicts
+ }
+
+ is Filter.Brightness -> helper.getOrInitCssFilter.postConcat(brightness(filter.value))
+ is Filter.Contrast -> helper.getOrInitCssFilter.postConcat(contrast(filter.value))
+ is Filter.Saturate -> helper.getOrInitCssFilter.postConcat(saturate(filter.value))
+ is Filter.HueRotate -> helper.getOrInitCssFilter.postConcat(hue(filter.degrees))
+ is Filter.Invert -> helper.getOrInitCssFilter.postConcat(invert(filter.amount))
+ is Filter.Opacity -> helper.getOrInitCssFilter.postConcat(opacity(filter.amount))
+ is Filter.Sepia -> helper.getOrInitCssFilter.postConcat(sepia(filter.amount))
+ is Filter.Grayscale -> helper.getOrInitCssFilter.postConcat(grayscale(filter.amount))
+ }
+ }
+
+ rs?.destroy()
+ return helper
+ }
+ }
+ }
+
+ @RequiresApi(Build.VERSION_CODES.S)
+ internal class FilterHelperV3 {
+ internal var filter: RenderEffect? = null
+
+ internal val sourceNode: RenderNode by lazy {
+ RenderNode("source")
+ }
+
+ internal var hasComposite = false
+ internal val compositeNode: RenderNode by lazy {
+ hasComposite = true
+ RenderNode("composite")
+ }
+
+ internal var shadowNodes: ArrayList = arrayListOf()
+
+ companion object {
+ fun build(view: View, filters: List, draw: (Canvas) -> Unit): FilterHelperV3 {
+ val helper = FilterHelperV3()
+ var sourceDrawn = false
+
+
+ val effects = mutableListOf()
+ for (filter in filters) {
+ when (filter) {
+ is Filter.Blur -> {
+ if (filter.radiusPx > 0) {
+ effects.add(
+ RenderEffect.createBlurEffect(
+ filter.radiusPx, filter.radiusPx, Shader.TileMode.CLAMP
+ )
+ )
+ }
+ }
+
+ is Filter.Brightness -> {
+ effects.add(
+ RenderEffect.createColorFilterEffect(ColorMatrixColorFilter(brightness(filter.value)))
+ )
+ }
+
+ is Filter.Contrast -> {
+ effects.add(
+ RenderEffect.createColorFilterEffect(ColorMatrixColorFilter(contrast(filter.value)))
+ )
+ }
+
+ is Filter.DropShadow -> {
+
+ if (!sourceDrawn) {
+ helper.sourceNode.setPosition(0, 0, view.width, view.height)
+ val sourceCanvas = helper.sourceNode.beginRecording()
+
+ view.setTag(R.id.tag_suppress_ops, true)
+ view.draw(sourceCanvas)
+ view.setTag(R.id.tag_suppress_ops, false)
+
+ helper.sourceNode.endRecording()
+ sourceDrawn = true
+ }
+
+ val colorFilter = ColorMatrixColorFilter(
+ ColorMatrix(
+ floatArrayOf(
+ 0f, 0f, 0f, 0f, Color.red(filter.color).toFloat(),
+ 0f, 0f, 0f, 0f, Color.green(filter.color).toFloat(),
+ 0f, 0f, 0f, 0f, Color.blue(filter.color).toFloat(),
+ 0f, 0f, 0f, Color.alpha(filter.color) / 255f, 0f
+ )
+ )
+ )
+
+ val colorEffect = RenderEffect.createColorFilterEffect(colorFilter)
+
+ val shadowEffect = if (filter.blur > 0f) {
+ val blurEffect = RenderEffect.createBlurEffect(
+ filter.blur, filter.blur, Shader.TileMode.CLAMP
+ )
+ RenderEffect.createChainEffect(colorEffect, blurEffect)
+ } else {
+ colorEffect
+ }
+
+ val offsetEffect = RenderEffect.createOffsetEffect(
+ filter.offsetX,
+ filter.offsetY,
+ shadowEffect
+ )
+
+ val shadowNode = RenderNode("shadow")
+ shadowNode.setRenderEffect(offsetEffect)
+ shadowNode.setPosition(
+ 0,
+ 0,
+ view.width + kotlin.math.abs(filter.offsetX).toInt() + filter.blur.toInt() * 3,
+ view.height + kotlin.math.abs(filter.offsetY).toInt() + filter.blur.toInt() * 3
+ )
+
+ val shadowCanvas = shadowNode.beginRecording()
+ shadowCanvas.drawRenderNode(helper.sourceNode)
+ shadowNode.endRecording()
+
+ helper.shadowNodes.add(shadowNode)
+ }
+
+ is Filter.HueRotate -> {
+ effects.add(
+ RenderEffect.createColorFilterEffect(ColorMatrixColorFilter(hue(filter.degrees)))
+ )
+ }
+
+ is Filter.Invert -> {
+ effects.add(
+ RenderEffect.createColorFilterEffect(ColorMatrixColorFilter(invert(filter.amount)))
+ )
+ }
+
+ is Filter.Opacity -> {
+ effects.add(
+ RenderEffect.createColorFilterEffect(ColorMatrixColorFilter(opacity(filter.amount)))
+ )
+ }
+
+ is Filter.Saturate -> {
+ effects.add(
+ RenderEffect.createColorFilterEffect(ColorMatrixColorFilter(saturate(filter.value)))
+ )
+ }
+
+ is Filter.Sepia -> {
+ effects.add(
+ RenderEffect.createColorFilterEffect(ColorMatrixColorFilter(sepia(filter.amount)))
+ )
+ }
+
+ is Filter.Grayscale -> {
+ effects.add(
+ RenderEffect.createColorFilterEffect(ColorMatrixColorFilter(grayscale(filter.amount)))
+ )
+ }
+ }
+
+ }
+ helper.filter = chain(*effects.toTypedArray())
+ helper.filter?.let {
+
+ if (helper.shadowNodes.isNotEmpty()) {
+ helper.compositeNode.setPosition(0, 0, view.width, view.height)
+
+ val compositeCanvas = helper.compositeNode.beginRecording()
+
+ for (node in helper.shadowNodes) {
+ compositeCanvas.drawRenderNode(node)
+ }
+
+ compositeCanvas.drawRenderNode(helper.sourceNode)
+
+ helper.compositeNode.endRecording()
+ helper.compositeNode.setRenderEffect(helper.filter)
+ }
+ }
+ return helper
+ }
+ }
+ }
+
+ class CSSFilter(css: String, val filters: List) {
+ internal var invalid = false
+
+ internal var css: String = ""
+
+ internal var v1: FilterHelper? = null
+
+ internal var v2: Any? = null
+
+ internal var v3: Any? = null
+
+ init {
+ this.css = css
+ }
+
+ fun renderFilters(view: View, canvas: Canvas, draw: (Canvas) -> Unit) {
+ val invalid = !(view.width > 0 && view.height > 0)
+
+ if (invalid) {
+ this.invalid = true
+ return
+ }
+ this.invalid = false
+
+ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+ val filter = FilterHelperV3.build(view, filters, draw)
+ v3 = filter
+ if (filter.shadowNodes.isEmpty()) {
+ view.setRenderEffect(filter.filter)
+ } else {
+ view.setRenderEffect(null)
+ if (filter.hasComposite) {
+ canvas.drawRenderNode(filter.compositeNode)
+ } else {
+ for (node in filter.shadowNodes) {
+ canvas.drawRenderNode(node)
+ }
+ filter.sourceNode.setRenderEffect(filter.filter)
+ canvas.drawRenderNode(filter.sourceNode)
+ }
+ }
+
+ return
+ } else if (view.isHardwareAccelerated && Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+ val filter = FilterHelperV2.build(view, filters, draw)
+ v2 = filter
+ val checkpoint = canvas.saveLayer(null, null)
+
+ // If there's a color matrix that must affect both shadows and source,
+ // composite shadows + source into an offscreen bitmap and then draw with the color filter.
+ filter.cssFilter?.let { matrix ->
+ val pool = getPool(view.context)
+ val tmp = pool.getSourceBitmap(view.width, view.height)
+ val tmpCanvas = Canvas(tmp)
+ // draw shadows/blurs into temp
+ for (node in filter.shadowsOrBlurs) {
+ node.shadow?.let {
+ tmpCanvas.drawRenderNode(it)
+ }
+ node.blur?.let {
+ tmpCanvas.drawBitmap(it, 0f, 0f, null)
+ }
+ }
+
+ // draw source into temp (use recorded fallback if available)
+ val sourceBmp = filter.sourceFallback ?: run {
+ val bmp = pool.getSourceBitmap(view.width, view.height)
+ val c = Canvas(bmp)
+ view.setTag(R.id.tag_suppress_ops, true)
+ view.draw(c)
+ view.setTag(R.id.tag_suppress_ops, false)
+ bmp
+ }
+
+ tmpCanvas.drawBitmap(sourceBmp, 0f, 0f, null)
+
+ // draw composited temp with color matrix applied
+ val paint = Paint().apply {
+ colorFilter = ColorMatrixColorFilter(matrix)
+ }
+ canvas.drawBitmap(tmp, 0f, 0f, paint)
+ // pool.putBitmap(tmp, true)
+ } ?: run {
+ // no color matrix -> draw shadows/blurs + source directly
+ for (node in filter.shadowsOrBlurs) {
+ node.shadow?.let {
+ canvas.drawRenderNode(it)
+ }
+ node.blur?.let {
+ canvas.drawBitmap(it, 0f, 0f, null)
+ }
+ }
+
+ filter.sourceFallback?.let { src ->
+ canvas.drawBitmap(src, 0f, 0f, null)
+ } ?: run {
+ canvas.drawRenderNode(filter.sourceNode)
+ }
+ }
+
+ canvas.restoreToCount(checkpoint)
+ return
+ }
+
+
+ v1 = FilterHelper.build(view, filters, draw)
+ v1?.let {
+ for (bm in it.shadowsOrBlurs) {
+ canvas.drawBitmap(bm, 0f, 0f, null)
+ }
+
+ it.source?.let { source ->
+ it.cssFilter?.let { matrix ->
+ val paint = Paint().apply {
+ colorFilter = ColorMatrixColorFilter(matrix)
+ }
+ canvas.drawBitmap(source, 0f, 0f, paint)
+ } ?: run {
+ canvas.drawBitmap(source, 0f, 0f, null)
+ }
+ }
+
+ }
+ }
+ }
+
+ companion object {
+
+ private var mPool: BitmapPool? = null
+
+ internal fun getPool(context: Context): BitmapPool {
+ if (mPool == null) {
+ mPool = BitmapPool(context)
+ }
+ // failure is not an option!!!
+ return mPool!!
+ }
+
+ @RequiresApi(Build.VERSION_CODES.S)
+ private fun chain(vararg effects: RenderEffect?): RenderEffect? {
+ var out: RenderEffect? = null
+ for (e in effects) {
+ if (e == null) continue
+ out = if (out == null) e else RenderEffect.createChainEffect(e, out)
+ }
+ return out
+ }
+
+ private fun grayscale(value: Float): ColorMatrix {
+ val cm = ColorMatrix()
+ val sat = 1f - value
+ cm.setSaturation(sat)
+ return cm
+ }
+
+ private fun brightness(value: Float): ColorMatrix {
+ // value = 1 → normal
+ val cm = ColorMatrix(
+ floatArrayOf(
+ value, 0f, 0f, 0f, 0f,
+ 0f, value, 0f, 0f, 0f,
+ 0f, 0f, value, 0f, 0f,
+ 0f, 0f, 0f, 1f, 0f
+ )
+ )
+ return cm
+ }
+
+ private fun contrast(value: Float): ColorMatrix {
+ val t = 128f * (1f - value)
+ return ColorMatrix(
+ floatArrayOf(
+ value, 0f, 0f, 0f, t,
+ 0f, value, 0f, 0f, t,
+ 0f, 0f, value, 0f, t,
+ 0f, 0f, 0f, 1f, 0f
+ )
+ )
+ }
+
+ private fun hue(degrees: Float): ColorMatrix {
+ val rotation = degrees * Math.PI / 180
+ val cos = cos(rotation).toFloat()
+ val sin = sin(rotation).toFloat()
+
+ val r1 = floatArrayOf(
+ 0.213f + cos * 0.787f - sin * 0.213f,
+ 0.715f - cos * 0.715f - sin * 0.715f,
+ 0.072f - cos * 0.072f + sin * 0.928f,
+ 0f, 0f
+ )
+ val r2 = floatArrayOf(
+ 0.213f - cos * 0.213f + sin * 0.143f,
+ 0.715f + cos * 0.285f + sin * 0.140f,
+ 0.072f - cos * 0.072f - sin * 0.283f,
+ 0f, 0f
+ )
+ val r3 = floatArrayOf(
+ 0.213f - cos * 0.213f - sin * 0.787f,
+ 0.715f - cos * 0.715f + sin * 0.715f,
+ 0.072f + cos * 0.928f + sin * 0.072f,
+ 0f, 0f
+ )
+
+ val cm = ColorMatrix()
+ cm.set(arrayOf(r1, r2, r3, floatArrayOf(0f, 0f, 0f, 1f, 0f)).flatMap { it.toList() }
+ .toFloatArray())
+ return cm
+ }
+
+ private fun opacity(alpha: Float): ColorMatrix {
+ return ColorMatrix(
+ floatArrayOf(
+ 1f, 0f, 0f, 0f, 0f,
+ 0f, 1f, 0f, 0f, 0f,
+ 0f, 0f, 1f, 0f, 0f,
+ 0f, 0f, 0f, alpha, 0f
+ )
+ )
+ }
+
+ private fun sepia(percent: Float): ColorMatrix {
+ val t = percent.coerceIn(0f, 1f)
+
+ val sepia = floatArrayOf(
+ 0.393f, 0.769f, 0.189f, 0f, 0f,
+ 0.349f, 0.686f, 0.168f, 0f, 0f,
+ 0.272f, 0.534f, 0.131f, 0f, 0f,
+ 0f, 0f, 0f, 1f, 0f
+ )
+
+ val identity = FloatArray(20) { i -> if (i % 6 == 0) 1f else 0f } // identity matrix
+
+ val result = FloatArray(20) { i ->
+ identity[i] * (1f - t) + sepia[i] * t
+ }
+
+ return ColorMatrix(result)
+ }
+
+ private fun invert(percent: Float): ColorMatrix {
+ val t = percent.coerceIn(0f, 1f)
+
+ val identity = floatArrayOf(
+ 1f, 0f, 0f, 0f, 0f,
+ 0f, 1f, 0f, 0f, 0f,
+ 0f, 0f, 1f, 0f, 0f,
+ 0f, 0f, 0f, 1f, 0f
+ )
+
+ val invert = floatArrayOf(
+ -1f, 0f, 0f, 0f, 255f,
+ 0f, -1f, 0f, 0f, 255f,
+ 0f, 0f, -1f, 0f, 255f,
+ 0f, 0f, 0f, 1f, 0f
+ )
+
+ val result = FloatArray(20) { i ->
+ identity[i] * (1f - t) + invert[i] * t
+ }
+
+ return ColorMatrix(result)
+ }
+
+ private fun saturate(percent: Float): ColorMatrix {
+ val cm = ColorMatrix()
+ cm.setSaturation(percent)
+ return cm
+ }
+
+ internal fun parseCssColor(value: String): Int {
+ val trimmed = value.trim().lowercase()
+
+ return when {
+ trimmed.startsWith("#") -> {
+ val hex = trimmed.removePrefix("#")
+ when (hex.length) {
+ 3 -> {
+ // #RGB → expand
+ val r = hex[0].toString().repeat(2).toInt(16)
+ val g = hex[1].toString().repeat(2).toInt(16)
+ val b = hex[2].toString().repeat(2).toInt(16)
+ 0xFF000000.toInt() or (r shl 16) or (g shl 8) or b
+ }
+
+ 6 -> {
+ // #RRGGBB
+ 0xFF000000.toInt() or hex.toInt(16)
+ }
+
+ 8 -> {
+ // #AARRGGBB
+ hex.toLong(16).toInt()
+ }
+
+ else -> Color.BLACK
+ }
+ }
+
+ trimmed.startsWith("rgb(") -> {
+ val nums =
+ trimmed.removePrefix("rgb(").removeSuffix(")").split(",").map { it.trim().toInt() }
+ val (r, g, b) = nums
+ 0xFF000000.toInt() or (r shl 16) or (g shl 8) or b
+ }
+
+ trimmed.startsWith("rgba(") -> {
+ val nums = trimmed.removePrefix("rgba(").removeSuffix(")").split(",").map { it.trim() }
+ val r = nums[0].toInt()
+ val g = nums[1].toInt()
+ val b = nums[2].toInt()
+ val a = (nums[3].toFloat() * 255f).toInt().coerceIn(0, 255)
+ (a shl 24) or (r shl 16) or (g shl 8) or b
+ }
+
+ else -> COLOR_MAP[trimmed] ?: Color.BLACK
+ }
+ }
+
+ private fun parseCssAngle(value: String): Float {
+ val trimmed = value.trim().lowercase()
+ return when {
+ trimmed.endsWith("deg") -> trimmed.removeSuffix("deg").toFloatOrNull() ?: 0f
+ trimmed.endsWith("grad") -> (trimmed.removeSuffix("grad").toFloatOrNull() ?: 0f) * 0.9f
+ trimmed.endsWith("rad") -> (trimmed.removeSuffix("rad").toFloatOrNull() ?: 0f) * RAD_TO_DEG
+ trimmed.endsWith("turn") -> (trimmed.removeSuffix("turn").toFloatOrNull() ?: 0f) * 360f
+ else -> trimmed.toFloatOrNull() ?: 0f
+ }
+ }
+
+ private fun parseCssFloat(
+ value: String,
+ default: Float = 0f,
+ canUseDip: Boolean = false
+ ): Float {
+ return when {
+ value.endsWith("px") -> value.removeSuffix("px").toFloatOrNull() ?: default
+ value.endsWith("%") -> (value.removeSuffix("%").toFloatOrNull() ?: default) / 100f
+ else -> {
+ val ret = value.toFloatOrNull() ?: default
+ if (canUseDip) {
+ ret * Resources.getSystem().displayMetrics.density
+ } else {
+ ret
+ }
+ }
+ }
+ }
+
+ private fun parseDropShadow(value: String): Filter.DropShadow? {
+ val tokens = mutableListOf()
+ val sb = StringBuilder()
+ var parenDepth = 0
+
+ for (c in value.trim()) {
+ when {
+ c == '(' -> {
+ parenDepth++
+ sb.append(c)
+ }
+
+ c == ')' -> {
+ parenDepth--
+ sb.append(c)
+ }
+
+ c.isWhitespace() && parenDepth == 0 -> {
+ if (sb.isNotEmpty()) {
+ tokens.add(sb.toString())
+ sb.clear()
+ }
+ }
+
+ else -> sb.append(c)
+ }
+ }
+
+ if (sb.isNotEmpty()) tokens.add(sb.toString())
+ if (tokens.size < 2) return null
+
+ val offsetX = parseCssFloat(tokens[0], 0f, true)
+ val offsetY = parseCssFloat(tokens[1], 0f, true)
+ val blur = if (tokens.size >= 3) parseCssFloat(tokens[2], 0f, true) else 0f
+
+ val color = if (tokens.size >= 4) {
+ parseCssColor(tokens.subList(3, tokens.size).joinToString(" "))
+ } else {
+ Color.BLACK
+ }
+
+ return Filter.DropShadow(offsetX, offsetY, blur, color)
+ }
+
+
+ // small LRU to avoid re-blurring identical source + params in the same runtime
+ private val dropShadowCache = LruCache(32)
+
+ private fun makeShadowCacheKey(
+ source: Bitmap,
+ offsetX: Float,
+ offsetY: Float,
+ blurRadius: Float,
+ color: Int,
+ width: Int,
+ height: Int
+ ): String {
+ return "${System.identityHashCode(source)}:${source.width}x${source.height}:" +
+ "${width}x${height}:" +
+ "${offsetX.toDouble()}_${offsetY.toDouble()}_${blurRadius.toDouble()}_$color"
+ }
+
+ private val keyToView = WeakHashMap>()
+
+ @JvmStatic
+ fun invalidateCssFilters(view: View) {
+ keyToView[view]?.let {
+ for (key in it) {
+ dropShadowCache.remove(key)
+ }
+ }
+ }
+
+ @JvmStatic
+ fun parse(value: String): CSSFilter {
+ val filters = mutableListOf()
+
+ FILTER_REGEX.findAll(value).forEach { match ->
+ val name = match.groupValues[1].lowercase()
+ val value = match.groupValues[2].trim()
+
+ when (name) {
+ "blur" -> filters.add(Filter.Blur(parseCssFloat(value, 0f, true)))
+ "brightness" -> filters.add(Filter.Brightness(parseCssFloat(value, 1f)))
+ "contrast" -> filters.add(Filter.Contrast(parseCssFloat(value, 1f)))
+ "saturate" -> filters.add(Filter.Saturate(parseCssFloat(value, 1f)))
+ "hue-rotate" -> filters.add(Filter.HueRotate(parseCssAngle(value)))
+ "invert" -> filters.add(Filter.Invert(parseCssFloat(value, 0f)))
+ "opacity" -> filters.add(Filter.Opacity(parseCssFloat(value, 1f)))
+ "sepia" -> filters.add(Filter.Sepia(parseCssFloat(value, 0f)))
+ "grayscale" -> filters.add(Filter.Grayscale(parseCssFloat(value, 0f)))
+ "drop-shadow" -> parseDropShadow(value)?.let { filters.add(it) }
+ }
+ }
+
+ return CSSFilter(
+ if (filters.isNotEmpty()) {
+ value
+ } else {
+ ""
+ }, filters
+ )
+ }
+ }
+}
diff --git a/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/Colors.kt b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/Colors.kt
new file mode 100644
index 0000000000..85fd91fd80
--- /dev/null
+++ b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/Colors.kt
@@ -0,0 +1,29 @@
+package org.nativescript.widgets
+
+import android.graphics.Color
+
+internal val COLOR_MAP = mapOf(
+ "crimson" to 0xFFDC143C.toInt(),
+ "skyblue" to 0xFF87CEEB.toInt(),
+ "cyan" to Color.CYAN,
+ "black" to Color.BLACK,
+ "silver" to 0xFFC0C0C0.toInt(),
+ "gray" to Color.GRAY,
+ "grey" to Color.GRAY,
+ "white" to Color.WHITE,
+ "maroon" to 0xFF800000.toInt(),
+ "red" to Color.RED,
+ "fuchsia" to 0xFFFF00FF.toInt(),
+ "green" to 0xFF008000.toInt(),
+ "lime" to 0xFF00FF00.toInt(),
+ "olive" to 0xFF808000.toInt(),
+ "yellow" to 0xFFFFFF00.toInt(),
+ "navy" to 0xFF000080.toInt(),
+ "blue" to 0xFF0000FF.toInt(),
+ "teal" to 0xFF008080.toInt(),
+ "aqua" to 0xFF00FFFF.toInt(),
+ "orange" to 0xFFFFA500.toInt(),
+ "brown" to 0xFFA52A2A.toInt(),
+ "pink" to 0xFFFFC0CB.toInt(),
+ "transparent" to 0x00000000
+)
diff --git a/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/ImageView.java b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/ImageView.java
index 81c7de963e..da435d06ba 100644
--- a/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/ImageView.java
+++ b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/ImageView.java
@@ -15,6 +15,7 @@
import android.graphics.drawable.Drawable;
import android.os.Build;
+import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatDelegate;
@@ -22,6 +23,9 @@
import org.nativescript.widgets.image.Fetcher;
import org.nativescript.widgets.image.Worker;
+import kotlin.Unit;
+import kotlin.jvm.functions.Function1;
+
/**
* @author hhristov
*/
@@ -292,6 +296,33 @@ private void setBitmapShader() {
}
+ @Nullable
+ private CSSFilters.CSSFilter mFilter = null;
+
+ private String mFilterRaw = "";
+
+ public String getFilter() {
+ return mFilterRaw;
+ }
+
+ public void setFilter(String value) {
+ mFilterRaw = value;
+ boolean hadFilters = mFilter != null && !mFilter.getFilters().isEmpty();
+ mFilter = CSSFilters.parse(value);
+ if (!mFilter.getFilters().isEmpty() || (value.isEmpty() && hadFilters)) {
+ invalidate();
+ }
+ }
+
+ @Override
+ public void draw(@NonNull Canvas canvas) {
+ Object suppress = getTag(R.id.tag_suppress_ops);
+ if (suppress != null && (boolean) suppress) {
+ super.onDraw(canvas);
+ } else {
+ super.draw(canvas);
+ }
+ }
@Override
protected void onDraw(Canvas canvas) {
@@ -420,6 +451,17 @@ protected void onDraw(Canvas canvas) {
}
canvas.drawPath(path, paint);
}
+
+
+ ViewUtils.onDraw(
+ this, canvas, mFilter, new Function1() {
+ @Override
+ public Unit invoke(Canvas canvas) {
+ ImageView.super.onDraw(canvas);
+ return null;
+ }
+ }
+ );
}
@Override
diff --git a/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/LayoutBase.java b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/LayoutBase.java
index ea0b256115..16abc04cd0 100644
--- a/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/LayoutBase.java
+++ b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/LayoutBase.java
@@ -1,6 +1,7 @@
package org.nativescript.widgets;
import android.content.Context;
+import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.MotionEvent;
@@ -17,6 +18,9 @@
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
+import kotlin.Unit;
+import kotlin.jvm.functions.Function1;
+
/**
* @author hhristov
*/
@@ -476,5 +480,42 @@ public int getOverflowEdge() {
}
+ @Override
+ public void draw(@NonNull Canvas canvas) {
+ Object suppress = getTag(R.id.tag_suppress_ops);
+ if (suppress != null && (boolean) suppress) {
+ super.dispatchDraw(canvas);
+ } else {
+ super.draw(canvas);
+ }
+ }
+
+ @Override
+ protected void dispatchDraw(@NonNull Canvas canvas) {
+ ViewUtils.dispatchDraw(this, canvas, mFilter, new Function1() {
+ @Override
+ public Unit invoke(Canvas canvas) {
+ LayoutBase.super.dispatchDraw(canvas);
+ return null;
+ }
+ });
+ }
+
+ @Nullable
+ private CSSFilters.CSSFilter mFilter = null;
+
+ private String mFilterRaw = "";
+ public String getFilter() {
+ return mFilterRaw;
+ }
+
+ public void setFilter(String value) {
+ mFilterRaw = value;
+ boolean hadFilters = mFilter != null && !mFilter.getFilters().isEmpty();
+ mFilter = CSSFilters.parse(value);
+ if (!mFilter.getFilters().isEmpty() || (value.isEmpty() && hadFilters)) {
+ invalidate();
+ }
+ }
}
diff --git a/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/StyleableTextView.java b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/StyleableTextView.java
index 78fa5b2cd5..0d160e582b 100644
--- a/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/StyleableTextView.java
+++ b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/StyleableTextView.java
@@ -4,6 +4,12 @@
import android.graphics.Canvas;
import android.text.TextPaint;
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import kotlin.Unit;
+import kotlin.jvm.functions.Function1;
+
/**
* @author NathanWalker
*/
@@ -16,15 +22,56 @@ public StyleableTextView(Context context) {
super(context);
}
+
+ @Nullable
+ private CSSFilters.CSSFilter mFilter = null;
+
+ private String mFilterRaw = "";
+
+ public String getFilter() {
+ return mFilterRaw;
+ }
+
+ public void setFilter(String value) {
+ mFilterRaw = value;
+ boolean hadFilters = mFilter != null && !mFilter.getFilters().isEmpty();
+ mFilter = CSSFilters.parse(value);
+ if (!mFilter.getFilters().isEmpty() || (value.isEmpty() && hadFilters)) {
+ invalidate();
+ }
+ }
+
@Override
- protected void onDraw(Canvas canvas) {
- if (mTextStrokeWidth > 0) {
- _applyStroke(canvas);
- } else {
+ public void draw(@NonNull Canvas canvas) {
+ Object suppress = getTag(R.id.tag_suppress_ops);
+ if (suppress != null && (boolean) suppress) {
super.onDraw(canvas);
+ } else {
+ super.draw(canvas);
}
}
+ @Override
+ protected void onDraw(Canvas canvas) {
+ ViewUtils.onDraw(this, canvas, mFilter, new Function1() {
+ @Override
+ public Unit invoke(Canvas canvas) {
+ if (mTextStrokeWidth > 0) {
+ _applyStroke(canvas);
+ } else {
+ StyleableTextView.super.onDraw(canvas);
+ }
+ return null;
+ }
+ });
+ }
+
+ @Override
+ public void requestLayout() {
+ super.requestLayout();
+ CSSFilters.invalidateCssFilters(this);
+ }
+
public void setTextStroke(int width, int color, int textColor) {
mTextStrokeWidth = width;
mTextStrokeColor = color;
diff --git a/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/ViewUtils.kt b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/ViewUtils.kt
new file mode 100644
index 0000000000..bf0e154b30
--- /dev/null
+++ b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/ViewUtils.kt
@@ -0,0 +1,63 @@
+package org.nativescript.widgets
+
+import android.graphics.Canvas
+import android.os.Build
+import androidx.core.graphics.withSave
+
+class ViewUtils {
+ companion object {
+ private fun render(
+ view: android.view.View,
+ canvas: Canvas,
+ filter: CSSFilters.CSSFilter?,
+ superDraw: (Canvas) -> Unit,
+ ) {
+ val suppressOps = view.getTag(R.id.tag_suppress_ops) as? Boolean ?: false
+ if (suppressOps || (filter == null)) {
+ superDraw(canvas)
+ return
+ }
+
+ canvas.withSave {
+ // Draw content with filters
+ if (filter.filters.isEmpty()) {
+ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+ view.setRenderEffect(null)
+ }
+ superDraw(canvas)
+ return
+ }
+ filter.renderFilters(view, canvas) { destCanvas ->
+ if (filter.v1 != null || filter.v2 != null) {
+ superDraw(destCanvas)
+ }
+ }
+ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+ if ((filter.v3 as? CSSFilters.FilterHelperV3)?.hasComposite != true) {
+ superDraw(canvas)
+ }
+ }
+ }
+ }
+
+ @JvmStatic
+ fun onDraw(
+ view: android.view.View,
+ canvas: Canvas,
+ filter: CSSFilters.CSSFilter?,
+ superDraw: (Canvas) -> Unit,
+ ) {
+ render(view, canvas, filter, superDraw)
+ }
+
+ @JvmStatic
+ fun dispatchDraw(
+ view: android.view.View,
+ canvas: Canvas,
+ filter: CSSFilters.CSSFilter?,
+ superDraw: (Canvas) -> Unit,
+ ) {
+ render(view, canvas, filter, superDraw)
+ }
+ }
+}
diff --git a/packages/ui-mobile-base/android/widgets/src/main/res/values/ids.xml b/packages/ui-mobile-base/android/widgets/src/main/res/values/ids.xml
new file mode 100644
index 0000000000..26dbfae0cc
--- /dev/null
+++ b/packages/ui-mobile-base/android/widgets/src/main/res/values/ids.xml
@@ -0,0 +1,4 @@
+
+
+