@octane-xplat/smooth-corners 0.0.1 → 0.11.0

package/src/SmoothCorners.tsrx

@@ -0,0 +1,67 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useCallback, useEffect, useRef } from 'octane';
+import { isIOS } from '@nativescript/core';
+import { applySmoothClip as applyIosClip, applySmoothShadow as applyIosShadow } from './apply.ios';
+import { applySmoothClip as applyAndroidClip, applySmoothShadow as applyAndroidShadow } from './apply.android';
+import type { SmoothCornersProps } from './props';
+
+const applyClip = isIOS ? applyIosClip : applyAndroidClip;
+const applyShadow = isIOS ? applyIosShadow : applyAndroidShadow;
+
+/** SmoothCorners — one generated corner curve, clipped natively.
+ *  Two nested gridlayouts: the inner carries the clip (layer mask on iOS,
+ *  drawable+outline on Android); the outer carries the iOS drop shadow
+ *  (a masked layer can't show its own). Radius comes from `corners`, not
+ *  `border-radius`. */
+export function SmoothCorners(props: SmoothCornersProps) @{
+	const state = useRef<{ inner: any; outer: any; props: SmoothCornersProps }>({
+		inner: null,
+		outer: null,
+		props,
+	});
+
+	state.current.props = props;
+
+	const apply = useCallback(() => {
+		const s = state.current;
+		if (s.inner) applyClip(s.inner, s.props);
+		if (s.outer) applyShadow(s.outer, s.props);
+	}, []);
+
+	const bind = useCallback(
+		(which: 'inner' | 'outer') => (view: any) => {
+			const s = state.current;
+			const prev = s[which];
+			if (prev && prev !== view) {
+				prev.off?.('loaded', apply);
+				prev.off?.('layoutChanged', apply);
+			}
+
+			s[which] = view;
+			if (!view) return;
+			view.on?.('loaded', apply);
+			view.on?.('layoutChanged', apply);
+			apply();
+		},
+		[apply],
+	);
+
+	const bindInner = useRef(bind('inner'));
+	const bindOuter = useRef(bind('outer'));
+
+	// Prop changes without a layout event still need a re-clip.
+	useEffect(() => apply());
+
+	return (
+		<gridlayout ref={bindOuter.current}>
+			<gridlayout
+				ref={bindInner.current}
+				id={props.id}
+				className={props.className}
+				style={props.style}
+			>
+				{props.children}
+			</gridlayout>
+		</gridlayout>
+	);
+}

package/src/SmoothCorners.web.tsrx

@@ -0,0 +1,71 @@
+import { useLayoutEffect, useRef, useState } from 'octane';
+import { smoothPathD } from './path';
+import type { SmoothCornersProps } from './props';
+
+/** SmoothCorners — `clip-path: path(d)` on the inner box + an SVG stroke
+ *  overlay for `border`. `shadow` wraps the box in a `drop-shadow` filter so
+ *  the shadow follows the clip (spread is not expressible — ignored). */
+export function SmoothCorners(props: SmoothCornersProps) @{
+	const ref = useRef<HTMLDivElement | null>(null);
+	const [size, setSize] = useState({ w: 0, h: 0 });
+
+	useLayoutEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const update = () => {
+			const r = el.getBoundingClientRect();
+			setSize((prev) =>
+				prev.w === r.width && prev.h === r.height ? prev : { w: r.width, h: r.height },
+			);
+		};
+
+		update();
+		const ro = new ResizeObserver(update);
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, []);
+
+	const d = smoothPathD(size.w, size.h, props.corners);
+
+	const box = (
+		<div
+			ref={ref}
+			id={props.id}
+			className={props.className}
+			style={{
+				position: 'relative',
+				...props.style,
+				clipPath: size.w > 0 ? `path("${d}")` : undefined,
+			}}
+		>
+			{props.children}
+			{props.border && size.w > 0 && (
+				<svg
+					style={{
+						position: 'absolute',
+						inset: 0,
+						width: '100%',
+						height: '100%',
+						pointerEvents: 'none',
+						overflow: 'visible',
+					}}
+					viewBox={`0 0 ${size.w} ${size.h}`}
+					preserveAspectRatio="none"
+				>
+					<path
+						d={d}
+						fill="none"
+						stroke={props.border.color}
+						// Stroke is centered on the edge — the clip removes the outer half.
+						strokeWidth={props.border.width * 2}
+					/>
+				</svg>
+			)}
+		</div>
+	);
+
+	const shadow = props.shadow;
+	if (!shadow) return box;
+	const filter = `drop-shadow(${shadow.offsetX ?? 0}px ${shadow.offsetY ?? 0}px ${shadow.blur ?? 0}px ${shadow.color ?? 'rgba(0,0,0,0.35)'})`;
+	return <div style={{ display: 'grid', filter }}>{box}</div>;
+}

package/src/apply.android.ts

@@ -0,0 +1,136 @@
+/** Android smooth-corners apply — custom Drawable paints background +
+ *  border along the generated path; a ViewOutlineProvider clips children
+ *  (`setPath` API 30+, `setConvexPath` 21–29 for convex curves); `shadow`
+ *  maps to `elevation`, which follows the outline. The `android` global is
+ *  touched only inside functions so the module is import-safe on iOS. */
+import { Color, Utils } from '@nativescript/core'
+import { generateCommands } from './path'
+import type { PathCommand } from './path'
+import type { SmoothCornersProps } from './props'
+
+declare const android: any
+
+const PATH_KEY = '__smoothPath'
+
+function toAndroidPath(cmds: PathCommand[]): any {
+	const p = new android.graphics.Path()
+	for (const c of cmds) {
+		switch (c.c) {
+			case 'M':
+				p.moveTo(c.x, c.y)
+				break
+			case 'L':
+				p.lineTo(c.x, c.y)
+				break
+			case 'C':
+				p.cubicTo(c.x1, c.y1, c.x2, c.y2, c.x, c.y)
+				break
+			case 'A': {
+				// Canvas is y-down like SVG — degrees map directly.
+				const rect = new android.graphics.RectF(c.cx - c.r, c.cy - c.r, c.cx + c.r, c.cy + c.r)
+				p.arcTo(rect, c.startDeg, c.sweepDeg, false)
+				break
+			}
+			case 'Z':
+				p.close()
+				break
+		}
+	}
+
+	return p
+}
+
+function makeDrawable(state: { view: any; props: SmoothCornersProps; path: any }): any {
+	return (android.graphics.drawable.Drawable as any).extend({
+		draw(canvas: any) {
+			const path = state.path
+			if (!path) {
+				return
+			}
+
+			const bg = state.view?.backgroundColor ?? state.view?.style?.backgroundColor
+			const border = state.props.border
+			if (bg) {
+				const paint = new android.graphics.Paint(android.graphics.Paint.ANTI_ALIAS_FLAG)
+				paint.setStyle(android.graphics.Paint.Style.FILL)
+				paint.setColor(new Color(bg).android)
+				canvas.drawPath(path, paint)
+			}
+
+			if (border && border.width > 0 && border.color) {
+				const paint = new android.graphics.Paint(android.graphics.Paint.ANTI_ALIAS_FLAG)
+				paint.setStyle(android.graphics.Paint.Style.STROKE)
+				// Centered on the edge; the outline clip removes the outer half.
+				paint.setStrokeWidth(Utils.layout.toDevicePixels(border.width) * 2)
+				paint.setColor(new Color(border.color).android)
+				canvas.drawPath(path, paint)
+			}
+		},
+		getOpacity() {
+			return android.graphics.PixelFormat.TRANSLUCENT
+		},
+		setAlpha(_a: number) {},
+		setColorFilter(_f: any) {},
+	})
+}
+
+/** Clip the inner box: outline provider + background/border drawable. */
+export function applySmoothClip(view: any, props: SmoothCornersProps): void {
+	const s = view?.[PATH_KEY] ?? (view[PATH_KEY] = { view, props, path: null, drawable: null })
+	s.props = props
+	const v = view?.android as any
+	const size = view?.getActualSize?.()
+	if (!v || !size || size.width <= 0 || size.height <= 0) {
+		return
+	}
+
+	s.path = toAndroidPath(
+		generateCommands(
+			Utils.layout.toDevicePixels(size.width),
+			Utils.layout.toDevicePixels(size.height),
+			props.corners,
+		),
+	)
+
+	const path = s.path
+	v.setOutlineProvider(
+		new ((android.view.ViewOutlineProvider as any).extend({
+			getOutline(target: any, outline: any) {
+				if (!path) {
+					return
+				}
+
+				if (android.os.Build.VERSION.SDK_INT >= 30) {
+					outline.setPath(path)
+				} else {
+					// Concave paths throw — degrade to the rect; the drawable
+					// still draws the correct background shape.
+					try {
+						outline.setConvexPath(path)
+					} catch {
+						outline.setRect(0, 0, target.getWidth(), target.getHeight())
+					}
+				}
+			},
+		}))(),
+	)
+
+	v.setClipToOutline(true)
+
+	if (!s.drawable) {
+		s.drawable = makeDrawable(s)
+		v.setBackground(s.drawable)
+	}
+
+	s.drawable.setBounds(0, 0, v.getWidth(), v.getHeight())
+	v.invalidate()
+
+	// elevation shadows follow the outline — the curve, free.
+	if (props.shadow) {
+		v.setElevation(Utils.layout.toDevicePixels(props.shadow.blur ?? 8))
+	}
+}
+
+/** Android needs no separate shadow layer — `elevation` follows the inner
+ *  view's outline directly, so the outer hook is a no-op. */
+export function applySmoothShadow(_view: any, _props: SmoothCornersProps): void {}

package/src/apply.ios.ts

@@ -0,0 +1,136 @@
+/** iOS smooth-corners apply — CAShapeLayer mask on the inner view,
+ *  layer.shadow* on the outer. Native globals resolve lazily inside these
+ *  functions so the module is import-safe on Android bundles. */
+import { Color } from '@nativescript/core'
+import { generateCommands } from './path'
+import type { PathCommand } from './path'
+import type { SmoothCornersProps } from './props'
+
+declare const CGPathCreateMutable: any
+declare const CGPathMoveToPoint: any
+declare const CGPathAddLineToPoint: any
+declare const CGPathAddCurveToPoint: any
+declare const CGPathAddArc: any
+declare const CGPathCloseSubpath: any
+declare const CAShapeLayer: any
+
+const rad = (deg: number) => (deg * Math.PI) / 180
+
+function toCGPath(cmds: PathCommand[]): any {
+	const p = CGPathCreateMutable()
+	for (const c of cmds) {
+		switch (c.c) {
+			case 'M':
+				CGPathMoveToPoint(p, null, c.x, c.y)
+				break
+			case 'L':
+				CGPathAddLineToPoint(p, null, c.x, c.y)
+				break
+			case 'C':
+				CGPathAddCurveToPoint(p, null, c.x1, c.y1, c.x2, c.y2, c.x, c.y)
+				break
+			case 'A':
+				// y-down convention matches CGPath on iOS: positive sweep =
+				// increasing angle. Explicit end angle; the flag picks direction.
+				CGPathAddArc(
+					p,
+					null,
+					c.cx,
+					c.cy,
+					c.r,
+					rad(c.startDeg),
+					rad(c.startDeg + c.sweepDeg),
+					c.sweepDeg < 0,
+				)
+
+				break
+			case 'Z':
+				CGPathCloseSubpath(p)
+				break
+		}
+	}
+
+	return p
+}
+
+const MASK_KEY = '__smoothMask'
+const BORDER_KEY = '__smoothBorder'
+
+function sizeOf(view: any): { w: number; h: number } | null {
+	const size = view?.getActualSize?.()
+	return size && size.width > 0 && size.height > 0 ? { w: size.width, h: size.height } : null
+}
+
+/** Clip the inner box: layer mask + optional border stroke layer. */
+export function applySmoothClip(view: any, props: SmoothCornersProps): void {
+	const v = view?.ios
+	const size = v && sizeOf(view)
+	if (!v || !size) {
+		return
+	}
+
+	const path = toCGPath(generateCommands(size.w, size.h, props.corners))
+
+	let mask = v[MASK_KEY] as any
+	if (!mask) {
+		mask = CAShapeLayer.new()
+		v[MASK_KEY] = mask
+	}
+
+	mask.path = path
+	v.layer.mask = mask
+
+	let borderLayer = v[BORDER_KEY] as any
+	const border = props.border
+	if (border && border.width > 0 && border.color) {
+		if (!borderLayer) {
+			borderLayer = CAShapeLayer.new()
+			v[BORDER_KEY] = borderLayer
+			v.layer.addSublayer(borderLayer)
+		}
+
+		borderLayer.frame = v.layer.bounds
+		borderLayer.path = path
+		borderLayer.fillColor = null
+		borderLayer.strokeColor = new Color(border.color).ios.CGColor
+		// Stroke centered on the edge; the mask clips the outer half.
+		borderLayer.lineWidth = border.width * 2
+	} else if (borderLayer) {
+		borderLayer.removeFromSuperlayer()
+		v[BORDER_KEY] = null
+	}
+}
+
+/** Drop shadow on the outer view (a masked layer can't show its own). */
+export function applySmoothShadow(view: any, props: SmoothCornersProps): void {
+	const layer = view?.ios?.layer
+	if (!layer) {
+		return
+	}
+
+	const shadow = props.shadow
+	if (!shadow) {
+		layer.shadowPath = null
+		layer.shadowOpacity = 0
+		return
+	}
+
+	const size = sizeOf(view)
+	if (!size) {
+		return
+	}
+
+	// Spread grows the outline — regenerate larger, recenter via the offset.
+	const spread = shadow.spread ?? 0
+	const w = size.w + spread * 2
+	const h = size.h + spread * 2
+	layer.shadowPath = toCGPath(generateCommands(w, h, props.corners))
+	layer.shadowOffset = {
+		width: (shadow.offsetX ?? 0) - spread,
+		height: (shadow.offsetY ?? 0) - spread,
+	}
+
+	layer.shadowColor = new Color(shadow.color ?? '#000000').ios.CGColor
+	layer.shadowOpacity = shadow.opacity ?? 0.35
+	layer.shadowRadius = shadow.blur ?? 0
+}

package/src/index.macos.ts

@@ -0,0 +1,10 @@
+export { SmoothCorners } from './SmoothCorners.macos.tsrx'
+export type {
+	CornerConfig,
+	CornerCurve,
+	CornerOptions,
+	PerCornerConfig,
+	SmoothBorderConfig,
+	SmoothCornersProps,
+	SmoothShadowConfig,
+} from './props'

package/src/index.ts

@@ -0,0 +1,13 @@
+// Platform barrel — extensionless specifier resolves the per-OS leaf
+// (.ios.tsrx/.android.tsrx under native, .macos.tsrx under macos,
+// .web.tsrx under web); same convention as @octane-xplat/ui index.shared.
+export { SmoothCorners } from './SmoothCorners'
+export type {
+	CornerConfig,
+	CornerCurve,
+	CornerOptions,
+	PerCornerConfig,
+	SmoothBorderConfig,
+	SmoothCornersProps,
+	SmoothShadowConfig,
+} from './props'

package/src/index.web.ts

@@ -0,0 +1,10 @@
+export { SmoothCorners } from './SmoothCorners.web.tsrx'
+export type {
+	CornerConfig,
+	CornerCurve,
+	CornerOptions,
+	PerCornerConfig,
+	SmoothBorderConfig,
+	SmoothCornersProps,
+	SmoothShadowConfig,
+} from './props'