@symbiote-native/angular 0.1.0

package/build/components/scroll-view/projection.js

@@ -0,0 +1,311 @@
+import { AnimatedProps, dlog, isAnchor, reduceProps, routeProp, whenCommitted, createElement, appendChild, insertBefore, removeChild, } from '@symbiote-native/engine';
+import { computeStickyInterpolation, readLayoutNumber, stickyDebounceMs, STICKY_HEADER_Z_INDEX, } from '@symbiote-native/components';
+import { descriptorFor } from '@symbiote-native/components';
+import { Platform } from '@symbiote-native/engine';
+const contentProjection = new WeakMap();
+const projectedWrappers = new WeakMap();
+function createViewNode() {
+    const descriptor = descriptorFor('symbiote-view');
+    return createElement(descriptor.component, descriptor.isText);
+}
+function directNode(record) {
+    return record.wrapper ?? record.child;
+}
+function isProjectedRefreshControl(node) {
+    if (node.component === 'PullToRefreshView' || node.component === 'AndroidSwipeRefreshLayout') {
+        return true;
+    }
+    // Angular public <RefreshControl> is an anchor host whose real native refresh node lives inside
+    // its component view. Projection filtering must recognize that anchor, otherwise iOS re-renders
+    // a RefreshControl sibling and also leaves the projected one inside the scroll content.
+    return isAnchor(node) && node.children.some(isProjectedRefreshControl);
+}
+class StickyProjectionWrapper {
+    controller;
+    childIndex;
+    node;
+    measured = false;
+    layoutY = 0;
+    layoutHeight = 0;
+    animatedTranslateY;
+    animatedProps;
+    cancelBind;
+    listenerId;
+    debounceTimer;
+    translateY = null;
+    haveReceivedInitialZeroTranslateY = true;
+    constructor(controller, childIndex, node) {
+        this.controller = controller;
+        this.childIndex = childIndex;
+        this.node = node;
+        this.animatedTranslateY = this.controller.config.scrollAnimatedValue.interpolate({
+            inputRange: [-1, 0],
+            outputRange: [0, 0],
+        });
+        this.rebuild();
+    }
+    destroy() {
+        this.cancelBind?.();
+        this.cancelBind = undefined;
+        if (this.listenerId !== undefined) {
+            this.animatedTranslateY.removeListener(this.listenerId);
+            this.listenerId = undefined;
+        }
+        if (this.debounceTimer !== undefined) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = undefined;
+        }
+        if (this.animatedProps !== undefined) {
+            this.animatedProps.__detach();
+            this.animatedProps = undefined;
+        }
+    }
+    rebuild() {
+        if (this.listenerId !== undefined) {
+            this.animatedTranslateY.removeListener(this.listenerId);
+            this.listenerId = undefined;
+        }
+        const { inputRange, outputRange } = computeStickyInterpolation({
+            measured: this.measured,
+            inverted: this.controller.config.invertStickyHeaders,
+            scrollViewHeight: this.controller.config.scrollViewHeight,
+            layoutY: this.layoutY,
+            layoutHeight: this.layoutHeight,
+            nextHeaderLayoutY: this.controller.nextStickyHeaderY(this.childIndex),
+        });
+        this.animatedTranslateY = this.controller.config.scrollAnimatedValue.interpolate({
+            inputRange,
+            outputRange,
+        });
+        this.listenerId = this.animatedTranslateY.addListener(this.animatedValueListener);
+        this.applyProps();
+        dlog(`Angular ScrollView projection sticky index=${this.childIndex} measured=${this.measured} y=${this.layoutY}`);
+    }
+    onLayout = (event) => {
+        const y = readLayoutNumber(event, 'y');
+        const height = readLayoutNumber(event, 'height');
+        if (y !== undefined)
+            this.layoutY = y;
+        if (height !== undefined)
+            this.layoutHeight = height;
+        this.measured = true;
+        this.controller.recordHeaderLayoutY(this.childIndex, this.layoutY);
+        this.rebuild();
+    };
+    animatedValueListener = ({ value }) => {
+        if (typeof value !== 'number')
+            return;
+        if (value === 0 && !this.haveReceivedInitialZeroTranslateY) {
+            this.haveReceivedInitialZeroTranslateY = true;
+            return;
+        }
+        if (this.debounceTimer !== undefined)
+            clearTimeout(this.debounceTimer);
+        this.debounceTimer = setTimeout(() => {
+            this.translateY = value;
+            if (value !== 0)
+                this.haveReceivedInitialZeroTranslateY = false;
+            this.applyProps();
+        }, stickyDebounceMs(Platform.OS));
+    };
+    props() {
+        const style = {
+            transform: [{ translateY: this.animatedTranslateY }],
+            zIndex: STICKY_HEADER_Z_INDEX,
+        };
+        const passthrough = this.translateY === null
+            ? undefined
+            : { transform: [{ translateY: this.translateY }], zIndex: STICKY_HEADER_Z_INDEX };
+        return {
+            style: passthrough === undefined ? style : [style, passthrough],
+            onLayout: this.onLayout,
+            collapsable: false,
+        };
+    }
+    applyProps() {
+        const props = this.props();
+        const reduced = reduceProps(props);
+        for (const [key, value] of Object.entries(reduced))
+            routeProp(this.node, key, value);
+        const next = new AnimatedProps(props);
+        next.__attach();
+        if (this.animatedProps !== undefined)
+            this.animatedProps.__detach();
+        this.animatedProps = next;
+        this.cancelBind?.();
+        this.cancelBind = whenCommitted(this.node, () => next.setNativeView(this.node));
+    }
+}
+export class ScrollViewProjectionController {
+    config;
+    contentNode;
+    records = [];
+    headerLayoutYs = new Map();
+    constructor(config) {
+        this.config = config;
+    }
+    update(config) {
+        this.config = config;
+        this.reconcileStickyRecords();
+    }
+    bindContentNode(node) {
+        dlog(`Angular ScrollView projection bindContentNode node=${node.component} preExistingChildren=${node.children.length} recordsBefore=${this.records.length}`);
+        this.contentNode = node;
+        contentProjection.set(node, this);
+        if (this.records.length === 0 && node.children.length > 0) {
+            for (const child of [...node.children]) {
+                this.records.push({ child, wrapper: undefined, sticky: undefined, stickyIndex: undefined });
+            }
+        }
+        this.reconcileStickyRecords();
+    }
+    appendProjectedChild(parent, child, insert) {
+        dlog(`Angular ScrollView projection appendProjectedChild parent=${parent.component} child=${child.component} recordsBefore=${this.records.length}`);
+        const existing = this.records.find(record => record.child === child);
+        if (existing !== undefined)
+            this.records.splice(this.records.indexOf(existing), 1);
+        const record = {
+            child,
+            wrapper: undefined,
+            sticky: undefined,
+            stickyIndex: undefined,
+        };
+        this.records.push(record);
+        this.insertRecord(parent, record, undefined, insert);
+        this.reconcileStickyRecords();
+    }
+    insertProjectedChild(parent, child, beforeChild, insert) {
+        dlog(`Angular ScrollView projection insertProjectedChild parent=${parent.component} child=${child.component} before=${beforeChild ? `${beforeChild.component}` : 'null'} recordsBefore=${this.records.length}`);
+        const existing = this.records.find(record => record.child === child);
+        if (existing !== undefined)
+            this.records.splice(this.records.indexOf(existing), 1);
+        const beforeRecord = beforeChild === null
+            ? undefined
+            : this.records.find(record => record.child === beforeChild || record.wrapper === beforeChild);
+        const record = {
+            child,
+            wrapper: undefined,
+            sticky: undefined,
+            stickyIndex: undefined,
+        };
+        const index = beforeRecord === undefined ? this.records.length : this.records.indexOf(beforeRecord);
+        this.records.splice(index, 0, record);
+        this.insertRecord(parent, record, beforeRecord, insert);
+        this.reconcileStickyRecords();
+    }
+    removeProjectedChild(child, remove) {
+        const record = this.records.find(entry => entry.child === child || entry.wrapper === child);
+        if (record === undefined || this.contentNode === undefined)
+            return false;
+        record.sticky?.destroy();
+        projectedWrappers.delete(record.child);
+        const direct = directNode(record);
+        if (direct.parent === this.contentNode)
+            remove(this.contentNode, direct);
+        this.records.splice(this.records.indexOf(record), 1);
+        this.reconcileStickyRecords();
+        return true;
+    }
+    nextStickyHeaderY(index) {
+        const stickyIndices = this.config.stickyHeaderIndices ?? [];
+        const next = stickyIndices.find(entry => entry > index);
+        return next === undefined ? undefined : this.headerLayoutYs.get(next);
+    }
+    recordHeaderLayoutY(index, y) {
+        if (this.headerLayoutYs.get(index) === y)
+            return;
+        this.headerLayoutYs.set(index, y);
+        for (const record of this.records)
+            record.sticky?.rebuild();
+    }
+    insertRecord(parent, record, beforeRecord, insert) {
+        const before = beforeRecord === undefined ? undefined : directNode(beforeRecord);
+        dlog(`Angular ScrollView projection insertRecord physicalParent=${parent.component} child=${record.child.component} before=${before ? before.component : 'undefined(append)'} parentIsContentNode=${parent === this.contentNode}`);
+        if (before === undefined)
+            insert(parent, record.child);
+        else
+            insert(parent, record.child, before);
+    }
+    reconcileStickyRecords() {
+        if (this.contentNode === undefined)
+            return;
+        dlog(`Angular ScrollView projection reconcile contentNode=${this.contentNode.component} records=${this.records.length} contentNodeActualChildren=${this.contentNode.children.length}`);
+        const stickyIndices = new Set(this.config.stickyHeaderIndices ?? []);
+        if (this.config.customStickyHeaderComponent !== undefined && stickyIndices.size > 0) {
+            dlog('Angular ScrollView projection uses built-in sticky wrapper; custom StickyHeaderComponent is explicit-composition only');
+        }
+        let paintIndex = 0;
+        for (const record of [...this.records]) {
+            if (this.config.excludeRefreshControl && isProjectedRefreshControl(record.child)) {
+                this.removeProjectedChild(record.child, (parent, child) => removeChild(parent, child));
+                continue;
+            }
+            const countsAsChild = !isAnchor(record.child) && !isProjectedRefreshControl(record.child);
+            const childIndex = paintIndex;
+            if (countsAsChild)
+                paintIndex += 1;
+            const shouldWrap = countsAsChild && stickyIndices.has(childIndex);
+            if (shouldWrap && record.wrapper === undefined)
+                this.wrapRecord(record, childIndex);
+            else if (!shouldWrap && record.wrapper !== undefined)
+                this.unwrapRecord(record);
+            else if (shouldWrap && record.stickyIndex !== childIndex) {
+                record.sticky?.destroy();
+                record.sticky = new StickyProjectionWrapper(this, childIndex, directNode(record));
+                record.stickyIndex = childIndex;
+            }
+            else if (shouldWrap)
+                record.sticky?.rebuild();
+        }
+    }
+    // Auto projection runs after Angular has already created projected child host nodes. At this
+    // renderer boundary we can AOT-safely rearrange engine nodes, but we cannot instantiate an
+    // arbitrary Angular component class as a wrapper without owning a ViewContainerRef/injector and
+    // Angular projectable nodes for its <ng-content>. Therefore the automatic sticky path always uses
+    // the built-in engine-node wrapper; custom StickyHeaderComponent wrappers remain supported by
+    // explicit Angular composition with <ScrollViewStickyHeader>/<symbiote-sticky-header> or a user
+    // component that composes it in the template.
+    wrapRecord(record, childIndex) {
+        if (this.contentNode === undefined)
+            return;
+        const wrapper = createViewNode();
+        const currentParent = record.child.parent;
+        const currentIndex = currentParent?.children.indexOf(record.child) ?? -1;
+        if (currentParent === this.contentNode && currentIndex >= 0) {
+            insertBefore(this.contentNode, wrapper, record.child);
+            removeChild(this.contentNode, record.child);
+        }
+        else {
+            appendChild(this.contentNode, wrapper);
+        }
+        appendChild(wrapper, record.child);
+        record.wrapper = wrapper;
+        record.sticky = new StickyProjectionWrapper(this, childIndex, wrapper);
+        record.stickyIndex = childIndex;
+        projectedWrappers.set(record.child, record);
+    }
+    unwrapRecord(record) {
+        if (this.contentNode === undefined || record.wrapper === undefined)
+            return;
+        record.sticky?.destroy();
+        record.sticky = undefined;
+        record.stickyIndex = undefined;
+        const wrapper = record.wrapper;
+        insertBefore(this.contentNode, record.child, wrapper);
+        removeChild(this.contentNode, wrapper);
+        record.wrapper = undefined;
+        projectedWrappers.delete(record.child);
+    }
+}
+export function getScrollViewProjection(node) {
+    return contentProjection.get(node);
+}
+export function removeScrollViewProjectedChild(child, remove) {
+    const record = projectedWrappers.get(child);
+    if (record === undefined)
+        return false;
+    const controller = record.wrapper?.parent
+        ? contentProjection.get(record.wrapper.parent)
+        : undefined;
+    return controller?.removeProjectedChild(child, remove) ?? false;
+}

package/build/components/scroll-view/shared.d.ts

@@ -0,0 +1,225 @@
+import { EventEmitter, type AfterViewInit, type OnDestroy } from '@angular/core';
+import { type IAccessibilityProps, type IAccessibilityStateValue, type IAriaProps, type IContentSize } from '@symbiote-native/components';
+import { AnimatedValue, type IStyleProp, type ISymbioteEvent, type ISymbioteNode, type IViewStyle } from '@symbiote-native/engine';
+import { RefreshControl } from '../refresh-control';
+import { ScrollViewProjectionController } from './projection';
+export type { IScrollViewHandle } from '@symbiote-native/components';
+type IScrollHandler = (event: ISymbioteEvent) => void;
+type IContentSizeHandler = (width: number, height: number) => void;
+export declare const SCROLL_VIEW_INPUTS: string[];
+export interface IAngularScrollViewProps extends IAccessibilityProps, IAriaProps {
+    style?: IStyleProp<IViewStyle>;
+    contentContainerStyle?: IStyleProp<IViewStyle> | string;
+    horizontal?: boolean;
+    scrollEnabled?: boolean;
+    showsVerticalScrollIndicator?: boolean;
+    showsHorizontalScrollIndicator?: boolean;
+    pagingEnabled?: boolean;
+    bounces?: boolean;
+    decelerationRate?: 'normal' | 'fast' | number;
+    scrollEventThrottle?: number;
+    contentInset?: {
+        top?: number;
+        left?: number;
+        bottom?: number;
+        right?: number;
+    };
+    contentOffset?: {
+        x: number;
+        y: number;
+    };
+    removeClippedSubviews?: boolean;
+    snapToInterval?: number;
+    snapToOffsets?: number[];
+    snapToAlignment?: 'start' | 'center' | 'end';
+    snapToStart?: boolean;
+    snapToEnd?: boolean;
+    disableIntervalMomentum?: boolean;
+    stickyHeaderIndices?: number[];
+    invertStickyHeaders?: boolean;
+    StickyHeaderComponent?: unknown;
+    keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
+    keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
+    maintainVisibleContentPosition?: {
+        minIndexForVisible: number;
+        autoscrollToTopThreshold?: number;
+    };
+    alwaysBounceHorizontal?: boolean;
+    alwaysBounceVertical?: boolean;
+    centerContent?: boolean;
+    scrollIndicatorInsets?: {
+        top?: number;
+        left?: number;
+        bottom?: number;
+        right?: number;
+    };
+    indicatorStyle?: 'default' | 'black' | 'white';
+    directionalLockEnabled?: boolean;
+    automaticallyAdjustKeyboardInsets?: boolean;
+    contentInsetAdjustmentBehavior?: 'automatic' | 'scrollableAxes' | 'never' | 'always';
+    minimumZoomScale?: number;
+    maximumZoomScale?: number;
+    zoomScale?: number;
+    bouncesZoom?: boolean;
+    pinchGestureEnabled?: boolean;
+    nestedScrollEnabled?: boolean;
+    overScrollMode?: 'auto' | 'always' | 'never';
+    fadingEdgeLength?: number;
+    persistentScrollbar?: boolean;
+    endFillColor?: string;
+    onLayout?: IScrollHandler;
+    onScroll?: IScrollHandler;
+    onScrollBeginDrag?: IScrollHandler;
+    onScrollEndDrag?: IScrollHandler;
+    onMomentumScrollBegin?: IScrollHandler;
+    onMomentumScrollEnd?: IScrollHandler;
+    onScrollToTop?: IScrollHandler;
+    onContentSizeChange?: IContentSizeHandler;
+    onAccessibilityAction?: (event: ISymbioteEvent) => void;
+    onAccessibilityTap?: (event: ISymbioteEvent) => void;
+    onMagicTap?: (event: ISymbioteEvent) => void;
+    onAccessibilityEscape?: (event: ISymbioteEvent) => void;
+}
+export type IAngularScrollViewInputs = Omit<IAngularScrollViewProps, 'onLayout' | 'onScrollToTop' | 'onContentSizeChange' | 'onAccessibilityAction' | 'onAccessibilityTap' | 'onMagicTap' | 'onAccessibilityEscape'>;
+export declare class ScrollViewProjectionDirective {
+    private readonly elementRef;
+    set symbioteScrollViewProjection(controller: ScrollViewProjectionController);
+}
+export declare abstract class ScrollViewBase implements IAngularScrollViewInputs, AfterViewInit, OnDestroy {
+    style: IStyleProp<IViewStyle> | undefined;
+    contentContainerStyle: IStyleProp<IViewStyle> | string | undefined;
+    horizontal: boolean | undefined;
+    scrollEnabled: boolean | undefined;
+    showsVerticalScrollIndicator: boolean | undefined;
+    showsHorizontalScrollIndicator: boolean | undefined;
+    pagingEnabled: boolean | undefined;
+    bounces: boolean | undefined;
+    decelerationRate: 'normal' | 'fast' | number | undefined;
+    scrollEventThrottle: number | undefined;
+    contentInset: IAngularScrollViewProps['contentInset'];
+    contentOffset: IAngularScrollViewProps['contentOffset'];
+    removeClippedSubviews: boolean | undefined;
+    snapToInterval: number | undefined;
+    snapToOffsets: number[] | undefined;
+    snapToAlignment: IAngularScrollViewProps['snapToAlignment'];
+    snapToStart: boolean | undefined;
+    snapToEnd: boolean | undefined;
+    disableIntervalMomentum: boolean | undefined;
+    stickyHeaderIndices: number[] | undefined;
+    invertStickyHeaders: boolean | undefined;
+    StickyHeaderComponent: unknown;
+    keyboardDismissMode: IAngularScrollViewProps['keyboardDismissMode'];
+    keyboardShouldPersistTaps: IAngularScrollViewProps['keyboardShouldPersistTaps'];
+    maintainVisibleContentPosition: IAngularScrollViewProps['maintainVisibleContentPosition'];
+    alwaysBounceHorizontal: boolean | undefined;
+    alwaysBounceVertical: boolean | undefined;
+    centerContent: boolean | undefined;
+    scrollIndicatorInsets: IAngularScrollViewProps['scrollIndicatorInsets'];
+    indicatorStyle: IAngularScrollViewProps['indicatorStyle'];
+    directionalLockEnabled: boolean | undefined;
+    automaticallyAdjustKeyboardInsets: boolean | undefined;
+    contentInsetAdjustmentBehavior: IAngularScrollViewProps['contentInsetAdjustmentBehavior'];
+    minimumZoomScale: number | undefined;
+    maximumZoomScale: number | undefined;
+    zoomScale: number | undefined;
+    bouncesZoom: boolean | undefined;
+    pinchGestureEnabled: boolean | undefined;
+    nestedScrollEnabled: boolean | undefined;
+    overScrollMode: IAngularScrollViewProps['overScrollMode'];
+    fadingEdgeLength: number | undefined;
+    persistentScrollbar: boolean | undefined;
+    endFillColor: string | undefined;
+    onScroll: IScrollHandler | undefined;
+    onScrollBeginDrag: IScrollHandler | undefined;
+    onScrollEndDrag: IScrollHandler | undefined;
+    onMomentumScrollBegin: IScrollHandler | undefined;
+    onMomentumScrollEnd: IScrollHandler | undefined;
+    readonly layout: EventEmitter<ISymbioteEvent>;
+    readonly scrollToTop: EventEmitter<ISymbioteEvent>;
+    readonly contentSizeChange: EventEmitter<IContentSize>;
+    readonly accessibilityAction: EventEmitter<ISymbioteEvent>;
+    readonly accessibilityTap: EventEmitter<ISymbioteEvent>;
+    readonly magicTap: EventEmitter<ISymbioteEvent>;
+    readonly accessibilityEscape: EventEmitter<ISymbioteEvent>;
+    testID: string | undefined;
+    nativeID: string | undefined;
+    accessible: boolean | undefined;
+    accessibilityLabel: string | undefined;
+    accessibilityHint: string | undefined;
+    accessibilityRole: IAccessibilityProps['accessibilityRole'];
+    accessibilityState: IAccessibilityStateValue | undefined;
+    accessibilityValue: IAccessibilityProps['accessibilityValue'];
+    accessibilityActions: IAccessibilityProps['accessibilityActions'];
+    accessibilityLabelledBy: string | string[] | undefined;
+    importantForAccessibility: IAccessibilityProps['importantForAccessibility'];
+    accessibilityLiveRegion: IAccessibilityProps['accessibilityLiveRegion'];
+    screenReaderFocusable: boolean | undefined;
+    accessibilityViewIsModal: boolean | undefined;
+    accessibilityElementsHidden: boolean | undefined;
+    accessibilityIgnoresInvertColors: boolean | undefined;
+    accessibilityLanguage: string | undefined;
+    accessibilityRespondsToUserInteraction: boolean | undefined;
+    accessibilityShowsLargeContentViewer: boolean | undefined;
+    accessibilityLargeContentTitle: string | undefined;
+    role: IAriaProps['role'];
+    'aria-label': string | undefined;
+    'aria-labelledby': string | undefined;
+    'aria-live': IAriaProps['aria-live'];
+    'aria-hidden': boolean | undefined;
+    'aria-busy': boolean | undefined;
+    'aria-checked': boolean | 'mixed' | undefined;
+    'aria-disabled': boolean | undefined;
+    'aria-expanded': boolean | undefined;
+    'aria-selected': boolean | undefined;
+    'aria-modal': boolean | undefined;
+    'aria-valuemax': number | undefined;
+    'aria-valuemin': number | undefined;
+    'aria-valuenow': number | undefined;
+    'aria-valuetext': string | undefined;
+    private hostDirective?;
+    protected projectedRefreshControl?: RefreshControl;
+    protected readonly scrollAnimatedValue: AnimatedValue;
+    private lastContentSize;
+    private viewportHeight;
+    protected readonly projectionController: ScrollViewProjectionController;
+    private detachStickyScroll;
+    private cancelStickyBind;
+    private lastLoggedIsHorizontal;
+    private readonly handleInvertedStickyLayout;
+    private readonly handleContentLayout;
+    private readonly emitterCallbackCache;
+    private cachedStickyOnScrollSource;
+    private cachedStickyOnScrollHandler;
+    get isHorizontal(): boolean;
+    private get hasStickyHeaders();
+    private get resolvedContentContainerStyle();
+    private get scrollViewBaseStyle();
+    get scrollProps(): Record<string, unknown>;
+    protected get layoutSplitStyle(): IStyleProp<IViewStyle>;
+    get androidWrappedScrollProps(): Record<string, unknown>;
+    get iosRefreshControlProps(): Record<string, unknown>;
+    get androidRefreshControlProps(): Record<string, unknown>;
+    protected handleProjectedRefresh(nativeNode: unknown): void;
+    private refreshControlProps;
+    get hasProjectedRefreshControl(): boolean;
+    get contentProps(): Record<string, unknown>;
+    private emitterCallback;
+    private stickyOnScrollHandler;
+    private get hostNode();
+    private readonly handle;
+    scrollTo(options?: {
+        x?: number;
+        y?: number;
+        animated?: boolean;
+    }): void;
+    scrollToEnd(options?: {
+        animated?: boolean;
+    }): void;
+    flashScrollIndicators(): void;
+    getScrollNode(): ISymbioteNode | null;
+    ngAfterViewInit(): void;
+    private attachSticky;
+    ngOnDestroy(): void;
+    private updateProjectionController;
+    private accessibilityInputs;
+}