@pmndrs/uikit/dist/components/text.js

Build performant 3D user interfaces with Three.js and yoga.

import { createFlexNodeState } from '../flex/node.js';
import { createHoverPropertyTransformers, setupCursorCleanup } from '../hover.js';
import { computedIsClipped } from '../clipping.js';
import { setupInstancedPanel } from '../panel/instanced-panel.js';
import { setupObjectTransform, computedTransformMatrix } from '../transform.js';
import { createResponsivePropertyTransformers } from '../responsive.js';
import { computedOrderInfo, ElementType } from '../order.js';
import { createActivePropertyTransfomers } from '../active.js';
import { signal } from '@preact/signals-core';
import { computedGlobalMatrix, computedHandlers, computedIsVisible, computedMergedProperties, setupNode, setupPointerEvents, setupMatrixWorldUpdate, } from './utils.js';
import { setupLayoutListeners, setupClippedListeners } from '../listeners.js';
import { computedPanelGroupDependencies } from '../panel/instanced-panel-group.js';
import { createInteractionPanel, getDefaultPanelMaterialConfig, setupInteractionPanel, } from '../panel/index.js';
import { computedFont, computedGylphGroupDependencies, createInstancedText, } from '../text/index.js';
import { darkPropertyTransformers } from '../dark.js';
import { abortableEffect, computedAncestorsHaveListeners, computedInheritableProperty, } from '../internals.js';
export function createTextState(parentCtx, textSignal, fontFamilies, style, properties, defaultProperties) {
    const flexState = createFlexNodeState();
    const hoveredSignal = signal([]);
    const activeSignal = signal([]);
    const mergedProperties = computedMergedProperties(style, properties, defaultProperties, {
        ...darkPropertyTransformers,
        ...createResponsivePropertyTransformers(parentCtx.root.size),
        ...createHoverPropertyTransformers(hoveredSignal),
        ...createActivePropertyTransfomers(activeSignal),
    });
    const transformMatrix = computedTransformMatrix(mergedProperties, flexState, parentCtx.root.pixelSize);
    const globalMatrix = computedGlobalMatrix(parentCtx.childrenMatrix, transformMatrix);
    const isClipped = computedIsClipped(parentCtx.clippingRect, globalMatrix, flexState.size, parentCtx.root.pixelSize);
    const isVisible = computedIsVisible(flexState, isClipped, mergedProperties);
    const groupDeps = computedPanelGroupDependencies(mergedProperties);
    const backgroundOrderInfo = computedOrderInfo(mergedProperties, 'zIndexOffset', ElementType.Panel, groupDeps, parentCtx.orderInfo);
    const fontSignal = computedFont(mergedProperties, fontFamilies, parentCtx.root.renderer);
    const orderInfo = computedOrderInfo(undefined, 'zIndexOffset', ElementType.Text, computedGylphGroupDependencies(fontSignal), backgroundOrderInfo);
    const handlers = computedHandlers(style, properties, defaultProperties, hoveredSignal, activeSignal);
    const ancestorsHaveListeners = computedAncestorsHaveListeners(parentCtx, handlers);
    const updateMatrixWorld = computedInheritableProperty(mergedProperties, 'updateMatrixWorld', false);
    return Object.assign(flexState, {
        interactionPanel: createInteractionPanel(backgroundOrderInfo, parentCtx.root, parentCtx.clippingRect, globalMatrix, flexState),
        hoveredSignal,
        activeSignal,
        mergedProperties,
        transformMatrix,
        globalMatrix,
        isClipped,
        isVisible,
        groupDeps,
        backgroundOrderInfo,
        fontSignal,
        orderInfo,
        handlers,
        ancestorsHaveListeners,
        updateMatrixWorld,
        textSignal,
        root: parentCtx.root,
    });
}
export function setupText(state, parentCtx, style, properties, object, abortSignal) {
    setupCursorCleanup(state.hoveredSignal, abortSignal);
    setupNode(state, parentCtx, object, false, abortSignal);
    setupObjectTransform(state.root, object, state.transformMatrix, abortSignal);
    setupInstancedPanel(state.mergedProperties, state.backgroundOrderInfo, state.groupDeps, state.root.panelGroupManager, state.globalMatrix, state.size, undefined, state.borderInset, parentCtx.clippingRect, state.isVisible, getDefaultPanelMaterialConfig(), abortSignal);
    const customLayouting = createInstancedText(state.mergedProperties, state.textSignal, state.globalMatrix, state.node, state, state.isVisible, parentCtx.clippingRect, state.orderInfo, state.fontSignal, state.root.gylphGroupManager, undefined, undefined, undefined, undefined, 'break-word', abortSignal);
    abortableEffect(() => state.node.value?.setCustomLayouting(customLayouting.value), abortSignal);
    setupInteractionPanel(state.interactionPanel, state.root, state.globalMatrix, state.size, abortSignal);
    setupPointerEvents(state.mergedProperties, state.ancestorsHaveListeners, state.root, state.interactionPanel, false, abortSignal);
    setupMatrixWorldUpdate(state.updateMatrixWorld, false, object, state.root, state.globalMatrix, false, abortSignal);
    setupMatrixWorldUpdate(state.updateMatrixWorld, false, state.interactionPanel, state.root, state.globalMatrix, true, abortSignal);
    setupLayoutListeners(style, properties, state.size, abortSignal);
    setupClippedListeners(style, properties, state.isClipped, abortSignal);
}