@pmndrs/uikit
Version:
Build performant 3D user interfaces with Three.js and yoga.
81 lines (80 loc) • 5.72 kB
JavaScript
import { createFlexNodeState } from '../flex/node.js';
import { createHoverPropertyTransformers, setupCursorCleanup } from '../hover.js';
import { computedIsClipped, computedClippingRect } from '../clipping.js';
import { computedAnyAncestorScrollable, computedGlobalScrollMatrix, computedScrollHandlers, createScrollPosition, createScrollState, setupScroll, setupScrollbars, } from '../scroll.js';
import { setupInstancedPanel } from '../panel/instanced-panel.js';
import { setupObjectTransform, computedTransformMatrix } from '../transform.js';
import { createResponsivePropertyTransformers } from '../responsive.js';
import { ElementType, computedOrderInfo } from '../order.js';
import { createActivePropertyTransfomers } from '../active.js';
import { signal } from '@preact/signals-core';
import { computedGlobalMatrix, computedHandlers, computedIsVisible, computedMergedProperties, setupNode, setupMatrixWorldUpdate, } from './utils.js';
import { setupLayoutListeners, setupClippedListeners } from '../listeners.js';
import { computedPanelGroupDependencies } from '../panel/instanced-panel-group.js';
import { createInteractionPanel, setupInteractionPanel } from '../panel/instanced-panel-mesh.js';
import { darkPropertyTransformers } from '../dark.js';
import { getDefaultPanelMaterialConfig } from '../panel/index.js';
import { computedAncestorsHaveListeners, computedInheritableProperty, computeDefaultProperties, setupPointerEvents, } from '../internals.js';
export function createContainerState(parentCtx, objectRef, style, properties, defaultProperties) {
const flexState = createFlexNodeState();
const hoveredList = signal([]);
const pressedList = signal([]);
//properties
const mergedProperties = computedMergedProperties(style, properties, defaultProperties, {
...darkPropertyTransformers,
...createResponsivePropertyTransformers(parentCtx.root.size),
...createHoverPropertyTransformers(hoveredList),
...createActivePropertyTransfomers(pressedList),
});
//transform
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);
//instanced panel
const groupDeps = computedPanelGroupDependencies(mergedProperties);
const scrollPosition = createScrollPosition();
const scrollbarWidth = computedInheritableProperty(mergedProperties, 'scrollbarWidth', 10);
const orderInfo = computedOrderInfo(mergedProperties, 'zIndexOffset', ElementType.Panel, groupDeps, parentCtx.orderInfo);
const componentState = Object.assign(flexState, {
scrollState: createScrollState(),
scrollbarWidth,
mergedProperties,
transformMatrix,
hoveredList,
defaultProperties: computeDefaultProperties(mergedProperties),
globalMatrix,
isClipped,
isVisible,
scrollPosition,
groupDeps,
orderInfo,
anyAncestorScrollable: computedAnyAncestorScrollable(flexState.scrollable, parentCtx.anyAncestorScrollable),
clippingRect: computedClippingRect(globalMatrix, flexState, parentCtx.root.pixelSize, parentCtx.clippingRect),
childrenMatrix: computedGlobalScrollMatrix(scrollPosition, globalMatrix, parentCtx.root.pixelSize),
root: parentCtx.root,
});
const scrollHandlers = computedScrollHandlers(componentState, properties, objectRef);
const handlers = computedHandlers(style, properties, defaultProperties, hoveredList, pressedList, scrollHandlers);
return Object.assign(componentState, {
interactionPanel: createInteractionPanel(orderInfo, parentCtx.root, parentCtx.clippingRect, globalMatrix, flexState),
handlers,
ancestorsHaveListeners: computedAncestorsHaveListeners(parentCtx, handlers),
});
}
export function setupContainer(state, parentCtx, style, properties, object, childrenContainer, abortSignal) {
setupNode(state, parentCtx, object, false, abortSignal);
setupObjectTransform(state.root, object, state.transformMatrix, abortSignal);
setupCursorCleanup(state.hoveredList, abortSignal);
setupInstancedPanel(state.mergedProperties, state.orderInfo, state.groupDeps, state.root.panelGroupManager, state.globalMatrix, state.size, undefined, state.borderInset, parentCtx.clippingRect, state.isVisible, getDefaultPanelMaterialConfig(), abortSignal);
//scrolling:
setupScroll(state, properties, state.root.pixelSize, childrenContainer, abortSignal);
setupScrollbars(state.mergedProperties, state.scrollPosition, state, state.globalMatrix, state.isVisible, parentCtx.clippingRect, state.orderInfo, state.groupDeps, state.root.panelGroupManager, state.scrollbarWidth, abortSignal);
setupInteractionPanel(state.interactionPanel, state.root, state.globalMatrix, state.size, abortSignal);
setupPointerEvents(state.mergedProperties, state.ancestorsHaveListeners, state.root, state.interactionPanel, false, abortSignal);
const updateMatrixWorld = computedInheritableProperty(state.mergedProperties, 'updateMatrixWorld', false);
setupMatrixWorldUpdate(updateMatrixWorld, false, object, state.root, state.globalMatrix, false, abortSignal);
setupMatrixWorldUpdate(updateMatrixWorld, false, state.interactionPanel, state.root, state.globalMatrix, true, abortSignal);
setupLayoutListeners(style, properties, state.size, abortSignal);
setupClippedListeners(style, properties, state.isClipped, abortSignal);
}